feat(site-builder): tablet/mobile canvas emulates published hide, stacking and full-width

Frame gets data-device; RenderNode mirrors hide flags and selection onto the
dom; editor.css emulates the exported breakpoints inside the narrowed frame.
Also: data-wsb-overridden counts only set values, responsive scope ids are
zone-prefixed (h-/b-/f-) so ROOT no longer collides, and comment delimiters
are stripped from responsive declarations.

Refs #37

craft/src/utils/html-export.test.ts

@@ -631,19 +631,36 @@ describe('per-breakpoint overrides + hidden nodes (W0-breakpoints)', () => {
   test('a mobile override exports one scoped body <style> block + data-wsb-r on the <h2>', () => {
     const { html, css } = exportBodyHtml(makeState({ styleMobile: { fontSize: '24px' } }));
     expect(html.startsWith(
-      '<style data-wsb-responsive>@media (max-width:767px){[data-wsb-r="head1"]{font-size:24px!important}}</style>',
+      '<style data-wsb-responsive>@media (max-width:767px){[data-wsb-r="b-head1"]{font-size:24px!important}}</style>',
     )).toBe(true);
-    expect(html).toContain('<h2 style="font-size:40px" data-wsb-r="head1">Hello</h2>');
+    expect(html).toContain('<h2 style="font-size:40px" data-wsb-r="b-head1">Hello</h2>');
     expect(css).toBe('');
   });
 
+  test('ROOT overrides in header/body/footer get distinct scopes (no cross-zone collision)', () => {
+    const rootOnly = JSON.stringify({
+      ROOT: { type: { resolvedName: 'Container' }, isCanvas: true, displayName: 'Container', custom: {},
+        hidden: false, nodes: [], linkedNodes: {}, props: { tag: 'div', style: {}, styleMobile: { padding: '4px' } } },
+    });
+    const h = exportBodyHtml(rootOnly, 'header').html;
+    const b = exportBodyHtml(rootOnly).html;
+    const f = exportBodyHtml(rootOnly, 'footer').html;
+    expect(h).toContain('[data-wsb-r="h-ROOT"]');
+    expect(h).toContain('<div data-wsb-r="h-ROOT"');
+    expect(b).toContain('[data-wsb-r="b-ROOT"]');
+    expect(f).toContain('[data-wsb-r="f-ROOT"]');
+    const doc = h + b + f;
+    expect(doc.match(/data-wsb-r="b-ROOT"/g)!.length).toBe(2); // rule + attribute
+    expect(doc).not.toMatch(/data-wsb-r="ROOT"/);
+  });
+
   test('the full document carries the block in the BODY, not the head', () => {
     const { html } = exportToHtml(makeState({ styleTablet: { textAlign: 'center' } }));
     const head = html.slice(0, html.indexOf('</head>'));
     const body = html.slice(html.indexOf('<body>'));
     expect(head).not.toContain('data-wsb');
     expect(body).toContain(
-      '<style data-wsb-responsive>@media (max-width:991px){[data-wsb-r="head1"]{text-align:center!important}}</style>',
+      '<style data-wsb-responsive>@media (max-width:991px){[data-wsb-r="b-head1"]{text-align:center!important}}</style>',
     );
   });
 
@@ -716,7 +733,7 @@ describe('injectAttrs skips leading <style> blocks (W0-breakpoints)', () => {
       },
     });
     const { html } = exportBodyHtml(state);
-    expect(html).toMatch(/<a href="#"[^>]* data-wsb-r="btn1">Go<\/a>/);
+    expect(html).toMatch(/<a href="#"[^>]* data-wsb-r="b-btn1">Go<\/a>/);
     expect(html).not.toContain('<style data-wsb-r=');
     expect(html).toContain('</style><a href="#"');
   });