@lark-apaas/coding-registry-buildless 0.1.21 → 0.1.22

package/components/design-canvas.jsx

@@ -684,7 +684,7 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
     // ticks leave scale unchanged — skip the cross-frame post for those.
     if (lastPostedScale.current !== scale) {
       lastPostedScale.current = scale;
-      window.parent.postMessage({ type: 'miaoda:canvas:zoom', scale }, '*');
+      try { window.parent.postMessage({ type: 'miaoda:canvas:zoom', scale }, '*'); } catch (e) { /* no parent — ignore */ }
     }
     // A replayed viewport is the presenter's framing, not this viewer's — it
     // must not overwrite the viewport this end will restore when opening the
@@ -1057,11 +1057,11 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
         // images/fonts is after our mount-time announce, so re-announce.
         // Clear the pan-tick guard so apply() re-posts the current scale
         // even if it's unchanged — the host just reset dcScale to 1.
-        window.parent.postMessage({ type: 'miaoda:canvas:present' }, '*');
+        try { window.parent.postMessage({ type: 'miaoda:canvas:present' }, '*'); } catch (e) { /* no parent — ignore */ }
         // Re-announce the upgrade capability too — the host's readyGen reset
         // (fires on iframe 'load', which for image/font-heavy canvases lands
         // after the mount-time announce) drops prior state, so re-declare here.
-        window.parent.postMessage({ type: 'miaoda:upgrade:available', kind: 'design-canvas' }, '*');
+        try { window.parent.postMessage({ type: 'miaoda:upgrade:available', kind: 'design-canvas' }, '*'); } catch (e) { /* no parent — ignore */ }
         lastPostedScale.current = undefined;
         // The re-announce apply() must not change who owns the view: a
         // viewport seed can land BEFORE the iframe's native 'load' fires this
@@ -1106,13 +1106,13 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
     // lastPostedScale reset mirrors the miaoda:canvas:probe handler: the layout
     // effect's restore-path apply() may already have posted the restored
     // scale (before miaoda:canvas:present), so clear the guard to re-post it in order.
-    window.parent.postMessage({ type: 'miaoda:canvas:present' }, '*');
+    try { window.parent.postMessage({ type: 'miaoda:canvas:present' }, '*'); } catch (e) { /* no parent — ignore */ }
     // Generic "upgrade" capability signal — announce that this artifact offers
     // an upgrade entry so the host can show/hide its upgrade button. Decoupled
     // from the canvas zoom-proxy protocol above; any product may post the same
     // message. Listener (onHostMsg) is already registered above → announce-after-
     // register order holds. No client-side behavior here.
-    window.parent.postMessage({ type: 'miaoda:upgrade:available', kind: 'design-canvas' }, '*');
+    try { window.parent.postMessage({ type: 'miaoda:upgrade:available', kind: 'design-canvas' }, '*'); } catch (e) { /* no parent — ignore */ }
     lastPostedScale.current = undefined;
     apply();
 

package/components/tweaks-panel.jsx

@@ -190,7 +190,7 @@ function useTweaks(defaults) {
     const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
       ? keyOrEdits : { [keyOrEdits]: val };
     setValues((prev) => ({ ...prev, ...edits }));
-    window.parent.postMessage({ type: 'miaoda:tweaks:set-keys', edits }, '*');
+    try { window.parent.postMessage({ type: 'miaoda:tweaks:set-keys', edits }, '*'); } catch (e) { /* no parent — ignore */ }
     // Same-window signal so in-page listeners (deck-stage rail thumbnails)
     // can react — the parent message only reaches the host, not peers.
     window.dispatchEvent(new CustomEvent('tweakchange', { detail: edits }));
@@ -248,13 +248,13 @@ function TweaksPanel({ title = 'Tweaks', children }) {
       else if (t === 'miaoda:tweaks:deactivate') setOpen(false);
     };
     window.addEventListener('message', onMsg);
-    window.parent.postMessage({ type: 'miaoda:tweaks:available' }, '*');
+    try { window.parent.postMessage({ type: 'miaoda:tweaks:available' }, '*'); } catch (e) { /* no parent — ignore */ }
     return () => window.removeEventListener('message', onMsg);
   }, []);
 
   const dismiss = () => {
     setOpen(false);
-    window.parent.postMessage({ type: 'miaoda:tweaks:dismissed' }, '*');
+    try { window.parent.postMessage({ type: 'miaoda:tweaks:dismissed' }, '*'); } catch (e) { /* no parent — ignore */ }
   };
 
   const onDragStart = (e) => {
@@ -586,8 +586,11 @@ Object.assign(window, {
   document.head.appendChild(s);
 })();
 
-const __twkSendChat = (text) =>
-  window.parent.postMessage({ type: 'miaoda:tweaks:chat', text }, '*');
+const __twkSendChat = (text) => {
+  // Posting to the host must never take the component down: the parent frame can be
+  // cross-origin or already gone, and postMessage throws in both cases.
+  try { window.parent.postMessage({ type: 'miaoda:tweaks:chat', text }, '*'); } catch (e) { /* no parent — ignore */ }
+};
 
 const __TWK_SPARK_PATH = 'M18.3658 62.2435L36.7823 51.9165L37.0858 51.012L36.7823 50.5083H35.8716L32.7853 50.3206L22.2616 50.0389L13.1546 49.6634L4.30054 49.194L2.07438 48.7246L0 45.9551L0.202378 44.5938L2.07438 43.3264L4.75589 43.5611L10.6755 43.9836L19.5801 44.5938L26.0056 44.9693L35.568 45.9551H37.0858L37.2882 45.3448L36.7823 44.9693L36.3775 44.5938L27.1693 38.3507L17.2022 31.7789L11.9909 27.9767L9.20822 26.0522L7.79157 24.2684L7.18443 20.3254L9.71416 17.5089L13.1546 17.7436L14.0147 17.9783L17.5057 20.654L24.9431 26.4277L34.6573 33.5627L36.0739 34.7362L36.6444 34.3512L36.7317 34.079L36.0739 32.9994L30.8121 23.4704L25.1961 13.7537L22.6664 9.71675L22.0086 7.32277C21.7539 6.31812 21.6039 5.48695 21.6039 4.45938L24.4878 0.516349L26.1068 0L30.0026 0.516349L31.6216 1.92457L34.0502 7.46359L37.9459 16.1476L44.0173 27.9767L45.7881 31.4973L46.7494 34.7362L47.1036 35.722H47.7107V35.1587L48.2166 28.4931L49.1274 20.3254L50.0381 9.81063L50.3416 6.85336L51.8089 3.28586L54.7434 1.36128L57.0201 2.44092L58.8921 5.11655L58.6391 6.85336L57.5261 14.0822L55.3505 25.395L53.9338 32.9994H54.7434L55.7047 32.0136L59.5498 26.944L65.9753 18.8702L68.8086 15.6782L72.1479 12.1577L74.2729 10.4678H78.3204L81.2549 14.8802L79.9395 19.4335L75.7907 24.6909L72.3503 29.1503L67.4173 35.7593L64.3563 41.0732L64.6308 41.5116L65.3682 41.4487L76.499 39.0548L82.5198 37.9751L89.7042 36.7547L92.9423 38.2568L93.2964 39.8058L92.0316 42.9509L84.3412 44.8285L75.3354 46.6592L61.9245 49.8162L61.776 49.9356L61.9513 50.1956L67.9991 50.743L70.5795 50.8839H76.9038L88.6923 51.7757L91.7786 53.7942L93.6 56.282L93.2964 58.2066L88.5405 60.6006L82.1656 59.0985L67.2402 55.531L62.1302 54.2636H61.4218V54.6861L65.6718 58.8638L73.514 65.9049L83.2787 75.0114L83.7846 77.2646L82.5198 79.0483L81.2043 78.8606L72.6032 72.3827L69.264 69.4724L61.776 63.1354H61.2701V63.7926L62.9903 66.3274L72.1479 80.081L72.6032 84.3057L71.9455 85.667L69.5676 86.5119L66.9872 86.0425L61.5736 78.4851L56.0588 70.0357L51.6065 62.4313L51.0687 62.7708L48.419 91.0652L47.2048 92.5204L44.3715 93.6L41.9935 91.8162L40.7286 88.9059L41.9935 83.1322L43.5114 75.6217L44.7256 69.6602L45.8387 62.2435L46.5185 59.7659L46.4584 59.6001L45.9153 59.6914L40.3239 67.3601L31.824 78.8606L25.0949 86.0425L23.4759 86.6997L20.6932 85.2445L20.9462 82.6628L22.5146 80.3627L31.824 68.5336L37.44 61.1639L41.0595 56.9335L41.0243 56.3216L40.8245 56.3046L16.0891 72.4297L11.6874 72.993L9.76476 71.2092L10.0177 68.2989L10.9284 67.3601L18.3658 62.2435Z';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-registry-buildless",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Miaoda registry (buildless runtime) — shadcn-style copy-in SDKs (globals + CDN-pinned, browser Babel) for buildless static HTML stacks",
   "type": "module",
   "files": [

package/scripts/android-frame.js

@@ -0,0 +1,253 @@
+/* BEGIN USAGE */
+// android-frame.js — Simplified Android (Material 3) device frame, as custom elements.
+// Based on Figma M3 spec. No dependencies, no image assets, no React.
+// Defines: <android-device>, <android-status-bar>, <android-list-item>, <android-nav-bar>, <android-keyboard>
+//
+// Usage — wrap your screen content in <android-device> to get the bezel, status bar
+// and gesture nav. Load with a plain <script src="android-frame.js"></script>:
+//
+//   <android-device>
+//     ...your screen content...
+//   </android-device>
+//   <android-device dark keyboard>…</android-device>
+//   <android-device width="360" height="800">…</android-device>   <!-- smaller device size -->
+//
+// Attributes:
+//   <android-device>     width (412) · height (892) · dark · keyboard
+//   <android-status-bar> dark
+//   <android-list-item>  headline · supporting · leading (one or two chars for the avatar)
+//   <android-nav-bar>    dark
+// Booleans are by attribute presence: `dark` on, absent off.
+/* END USAGE */
+
+(() => {
+  const MD_C = {
+    surface: '#f4fbf8',
+    surfaceVariant: '#dae5e1',
+    inverseOnSurface: '#ecf2ef',
+    secondaryContainer: '#cde8e1',
+    primaryFixedDim: '#83d5c6',
+    onSurface: '#171d1b',
+    onSurfaceVar: '#49454f',
+    onPrimaryContainer: '#00201c',
+    primary: '#006a60',
+    frameBorder: 'rgba(116,119,117,0.5)',
+  };
+  /**
+   * React version renders text and attributes through JSX, which escapes them. These
+   * elements build their shadow with innerHTML template strings, so that protection is
+   * gone — every value that comes from an author attribute, from persisted state, or
+   * from a Magic Share replay has to go through here. The artboard label matters most:
+   * it is renameable, it round-trips through the sidecar, AND a peer can push one in
+   * over Magic Share, so an unescaped one is script execution in the follower's page.
+   */
+  const esc = (v) =>
+    String(v ?? '').replace(
+      /[&<>"']/g,
+      (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch],
+    );
+
+  // Non-numeric input falls through into a style="..." attribute, so it must be
+  // escaped too — a quote in it would break out of the attribute.
+  const px = (v) => (/^-?\d+(\.\d+)?$/.test(String(v)) ? `${v}px` : esc(v));
+
+  /**
+   * display:contents — the host generates no box of its own, so the shadow's root
+   * div becomes the parent's layout child directly. That is what keeps this port
+   * pixel-identical to the React version: the JSX component renders that same div
+   * with nothing wrapping it. `block` would add an outer box that swallows the
+   * flex properties meant for the inner one, showing up as a few pixels of drift
+   * in the visual regression.
+   */
+  /**
+   * The React version lives in the light DOM, so its box model comes from the
+   * product's own `*` reset (most products set border-box). That reset never
+   * reaches into a shadow root, and hardcoding either value gets half the products
+   * wrong. `inherit` is wrong too — it passes an inline border-box down to
+   * descendants, which a `*` rule would not. Copying the host's computed value is
+   * the only thing that matches the React version exactly: the host is a light DOM
+   * element, so the product's `*` rule does hit it.
+   */
+  const hostCss = (el) =>
+    '<style>:host{display:contents}*,*::before,*::after{box-sizing:' +
+    getComputedStyle(el).boxSizing +
+    '}</style>';
+
+  class Base extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+      this._render();
+    }
+    attributeChangedCallback() {
+      if (this.shadowRoot) this._render();
+    }
+    attr(name, fallback) {
+      const v = this.getAttribute(name);
+      return v === null || v === '' ? fallback : v;
+    }
+    get dark() {
+      return this.hasAttribute('dark');
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Status bar (time left, wifi/cell/battery right)
+  // ───────────────────────────────────────────────────────────
+  class AndroidStatusBar extends Base {
+    static get observedAttributes() {
+      return ['dark'];
+    }
+    _render() {
+      const c = this.dark ? '#fff' : MD_C.onSurface;
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="height:40px;display:flex;align-items:center;justify-content:space-between;
+             padding:0 16px;position:relative;font-family:Roboto,system-ui,sans-serif">
+          <div style="width:128px;display:flex;align-items:center;gap:8px">
+            <span style="font-size:14px;font-weight:400;letter-spacing:0.25px;line-height:20px;color:${c}">9:30</span>
+          </div>
+          <div style="position:absolute;left:50%;top:8px;transform:translateX(-50%);
+               width:24px;height:24px;border-radius:100px;background:#2e2e2e"></div>
+          <div style="display:flex;align-items:center">
+            <div style="display:flex;padding-right:2px">
+              <svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:-2px">
+                <path d="M8 13.3L.67 5.97a10.37 10.37 0 0114.66 0L8 13.3z" fill="${c}"/>
+              </svg>
+              <svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:-2px">
+                <path d="M14.67 14.67V1.33L1.33 14.67h13.34z" fill="${c}"/>
+              </svg>
+            </div>
+            <svg width="16" height="16" viewBox="0 0 16 16">
+              <rect x="3.75" y="2" width="8.5" height="13" rx="1.5" fill="${c}"/>
+              <rect x="5.5" y="0.9" width="5" height="2" rx="0.5" fill="${c}"/>
+            </svg>
+          </div>
+        </div>`;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // List item (Material 3)
+  // ───────────────────────────────────────────────────────────
+  class AndroidListItem extends Base {
+    static get observedAttributes() {
+      return ['headline', 'supporting', 'leading'];
+    }
+    _render() {
+      const leading = this.attr('leading', '');
+      const supporting = this.attr('supporting', '');
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="display:flex;align-items:center;gap:16px;padding:12px 16px;
+             min-height:56px;box-sizing:border-box;font-family:Roboto,system-ui,sans-serif">
+          ${
+            leading
+              ? `<div style="width:40px;height:40px;border-radius:50%;background:${MD_C.primary};color:#fff;
+                   display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:500;flex-shrink:0">${leading}</div>`
+              : ''
+          }
+          <div style="flex:1;min-width:0">
+            <div style="font-size:16px;color:${MD_C.onSurface};line-height:24px">${esc(this.attr('headline', ''))}</div>
+            ${supporting ? `<div style="font-size:14px;color:${MD_C.onSurfaceVar};line-height:20px">${esc(supporting)}</div>` : ''}
+          </div>
+        </div>`;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Gesture nav bar (pill)
+  // ───────────────────────────────────────────────────────────
+  class AndroidNavBar extends Base {
+    static get observedAttributes() {
+      return ['dark'];
+    }
+    _render() {
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="height:24px;display:flex;align-items:center;justify-content:center">
+          <div style="width:108px;height:4px;border-radius:2px;
+               background:${this.dark ? '#fff' : MD_C.onSurface};opacity:0.4"></div>
+        </div>`;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Keyboard — Gboard (Material 3)
+  // ───────────────────────────────────────────────────────────
+  class AndroidKeyboard extends Base {
+    _render() {
+      const key = (l, { flex = 1, bg = MD_C.surface, r = 6, minW, fs = 21 } = {}) =>
+        `<div style="height:46px;border-radius:${r}px;flex:${flex};${minW ? `min-width:${minW}px;` : ''}
+              background:${bg};display:flex;align-items:center;justify-content:center;
+              font-family:Roboto,system-ui;font-size:${fs}px;color:${MD_C.onPrimaryContainer}">${l}</div>`;
+      const row = (keys, style = '') =>
+        `<div style="display:flex;gap:6px;justify-content:center;${style}">${keys.map((l) => key(l)).join('')}</div>`;
+
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="background:${MD_C.inverseOnSurface};padding:0 8px 8px;
+             display:flex;flex-direction:column;gap:4px">
+          <div style="height:44px"></div>
+          <div style="display:flex;flex-direction:column;gap:12px">
+            ${row(['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'])}
+            ${row(['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'], 'padding:0 20px;')}
+            <div style="display:flex;gap:6px">
+              ${key('', { bg: MD_C.surfaceVariant })}
+              <div style="display:flex;gap:6px;flex:7;min-width:274px">
+                ${['z', 'x', 'c', 'v', 'b', 'n', 'm'].map((l) => key(l)).join('')}
+              </div>
+              ${key('', { bg: MD_C.surfaceVariant })}
+            </div>
+            <div style="display:flex;gap:6px">
+              ${key('?123', { bg: MD_C.secondaryContainer, r: 100, minW: 58, fs: 14 })}
+              ${key(',', { bg: MD_C.surfaceVariant })}
+              ${key('', { flex: 3, minW: 154 })}
+              ${key('.', { bg: MD_C.surfaceVariant })}
+              ${key('', { bg: MD_C.primaryFixedDim, r: 100, minW: 58 })}
+            </div>
+          </div>
+        </div>`;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Device frame — wraps everything
+  // ───────────────────────────────────────────────────────────
+  class AndroidDevice extends Base {
+    static get observedAttributes() {
+      return ['width', 'height', 'dark', 'keyboard'];
+    }
+    _render() {
+      const dark = this.dark;
+      const d = dark ? ' dark' : '';
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="width:${px(this.attr('width', 412))};height:${px(this.attr('height', 892))};
+             border-radius:18px;overflow:hidden;background:${dark ? '#1d1b20' : MD_C.surface};
+             border:8px solid ${MD_C.frameBorder};display:flex;flex-direction:column;box-sizing:border-box">
+          <android-status-bar${d}></android-status-bar>
+          <div style="flex:1;overflow:auto"><slot></slot></div>
+          ${this.hasAttribute('keyboard') ? '<android-keyboard></android-keyboard>' : ''}
+          <android-nav-bar${d}></android-nav-bar>
+        </div>`;
+    }
+  }
+
+  for (const [tag, ctor] of [
+    ['android-status-bar', AndroidStatusBar],
+    ['android-list-item', AndroidListItem],
+    ['android-nav-bar', AndroidNavBar],
+    ['android-keyboard', AndroidKeyboard],
+    ['android-device', AndroidDevice],
+  ]) {
+    if (!customElements.get(tag)) customElements.define(tag, ctor);
+  }
+})();

package/scripts/browser-window.js

@@ -0,0 +1,246 @@
+/* BEGIN USAGE */
+// browser-window.js — Simplified Chrome browser window (dark theme, macOS), as custom elements.
+// No dependencies, no image assets, no React. All inline styles + inline SVG.
+// Defines: <browser-window>, <browser-tab-bar>, <browser-toolbar>, <browser-tab>, <browser-traffic-lights>
+//
+// Usage — wrap your page content in <browser-window> to get the tab bar + URL bar.
+// Tabs are light-DOM children; the window marks the active one from `active-index`:
+//
+//   <browser-window width="1100" height="680" url="acme.design/pricing" active-index="0">
+//     <browser-tab title="Pricing"></browser-tab>
+//     <browser-tab title="Docs"></browser-tab>
+//     ...your page content...
+//   </browser-window>
+//
+// Attributes:
+//   <browser-window>  width (900) · height (600) · url ("example.com") · active-index (0)
+//   <browser-tab>     title ("New Tab") · active
+//   <browser-toolbar> url
+// With no <browser-tab> children the window renders a single "New Tab".
+// `active` on a tab is for authoring; the parent rewrites data-active on every render,
+// so when both are present the parent wins.
+/* END USAGE */
+
+(() => {
+  const C = {
+    barBg: '#202124',
+    tabBg: '#35363a',
+    text: '#e8eaed',
+    dim: '#9aa0a6',
+    urlBg: '#282a2d',
+  };
+  /**
+   * React version renders text and attributes through JSX, which escapes them. These
+   * elements build their shadow with innerHTML template strings, so that protection is
+   * gone — every value that comes from an author attribute, from persisted state, or
+   * from a Magic Share replay has to go through here. The artboard label matters most:
+   * it is renameable, it round-trips through the sidecar, AND a peer can push one in
+   * over Magic Share, so an unescaped one is script execution in the follower's page.
+   */
+  const esc = (v) =>
+    String(v ?? '').replace(
+      /[&<>"']/g,
+      (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch],
+    );
+
+  // Non-numeric input falls through into a style="..." attribute, so it must be
+  // escaped too — a quote in it would break out of the attribute.
+  const px = (v) => (/^-?\d+(\.\d+)?$/.test(String(v)) ? `${v}px` : esc(v));
+
+  /**
+   * display:contents — the host generates no box of its own, so the shadow's root
+   * div becomes the parent's layout child directly. That is what keeps this port
+   * pixel-identical to the React version: the JSX component renders that same div
+   * with nothing wrapping it. `block` would add an outer box that swallows the
+   * flex properties meant for the inner one, showing up as a few pixels of drift
+   * in the visual regression.
+   */
+  /**
+   * The React version lives in the light DOM, so its box model comes from the
+   * product's own `*` reset (most products set border-box). That reset never
+   * reaches into a shadow root, and hardcoding either value gets half the products
+   * wrong. `inherit` is wrong too — it passes an inline border-box down to
+   * descendants, which a `*` rule would not. Copying the host's computed value is
+   * the only thing that matches the React version exactly: the host is a light DOM
+   * element, so the product's `*` rule does hit it.
+   */
+  const hostCss = (el) =>
+    '<style>:host{display:contents}*,*::before,*::after{box-sizing:' +
+    getComputedStyle(el).boxSizing +
+    '}</style>';
+
+  class Base extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+      this._render();
+    }
+    attributeChangedCallback() {
+      if (this.shadowRoot) this._render();
+    }
+    attr(name, fallback) {
+      const v = this.getAttribute(name);
+      return v === null || v === '' ? fallback : v;
+    }
+  }
+
+  class ChromeTrafficLights extends Base {
+    _render() {
+      const dot = (bg) =>
+        `<div style="width:12px;height:12px;border-radius:50%;background:${bg}"></div>`;
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="display:flex;gap:8px;padding:0 14px">
+          ${dot('#ff5f57')}${dot('#febc2e')}${dot('#28c840')}
+        </div>`;
+    }
+  }
+
+  class ChromeTab extends Base {
+    static get observedAttributes() {
+      return ['title', 'active', 'data-active'];
+    }
+    _render() {
+      // The parent rewrites data-active on every reflow; an author-written `active`
+      // only takes effect when there is no parent to override it.
+      const active = this.hasAttribute('data-active') || this.hasAttribute('active');
+      const curve = (flip) => `
+        <svg width="8" height="10" viewBox="0 0 8 10"
+             style="position:absolute;bottom:0;${flip ? 'right' : 'left'}:-8px;${flip ? 'transform:scaleX(-1);' : ''}">
+          <path d="M0 10C2 9 6 8 8 0V10H0Z" fill="${C.tabBg}"/>
+        </svg>`;
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="position:relative;height:34px;align-self:flex-end;padding:0 12px;
+             display:flex;align-items:center;gap:8px;
+             background:${active ? C.tabBg : 'transparent'};border-radius:8px 8px 0 0;
+             min-width:120px;max-width:220px;font-family:system-ui,sans-serif;font-size:12px;
+             color:${active ? C.text : C.dim}">
+          ${active ? curve(false) + curve(true) : ''}
+          <div style="width:14px;height:14px;border-radius:50%;background:#5f6368;flex-shrink:0"></div>
+          <span style="flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(this.attr('title', 'New Tab'))}</span>
+        </div>`;
+    }
+  }
+
+  /**
+   * Project active-index onto data-active on the children.
+   *
+   * Same shape as how deck-stage marks its slides: list state is written by the
+   * parent onto light DOM children, so authors and tests can read it without
+   * piercing a shadow root.
+   */
+  function markTabs(host) {
+    const tabs = [...host.querySelectorAll(':scope > browser-tab')];
+    const idx = Number(host.getAttribute('active-index') ?? 0);
+    tabs.forEach((t, i) => t.toggleAttribute('data-active', i === idx));
+    return tabs;
+  }
+
+  /** Supply one default tab when the author wrote none, matching the React
+   *  version's default `tabs` value. */
+  function ensureDefaultTab(host, slotName) {
+    if (host.querySelector(':scope > browser-tab')) return;
+    const t = document.createElement('browser-tab');
+    t.setAttribute('title', 'New Tab');
+    if (slotName) t.setAttribute('slot', slotName);
+    t.toggleAttribute('data-active', true);
+    host.appendChild(t);
+  }
+
+  class ChromeTabBar extends Base {
+    static get observedAttributes() {
+      return ['active-index'];
+    }
+    _render() {
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="display:flex;align-items:center;height:44px;background:${C.barBg};padding-right:8px">
+          <browser-traffic-lights></browser-traffic-lights>
+          <div style="display:flex;align-items:flex-end;height:100%;padding-left:4px;flex:1"><slot></slot></div>
+        </div>`;
+      ensureDefaultTab(this);
+      markTabs(this);
+    }
+  }
+
+  class ChromeToolbar extends Base {
+    static get observedAttributes() {
+      return ['url'];
+    }
+    _render() {
+      const dot = `<div style="width:28px;height:28px;display:flex;align-items:center;justify-content:center">
+          <div style="width:16px;height:16px;border-radius:50%;background:${C.dim};opacity:0.4"></div>
+        </div>`;
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="height:40px;background:${C.tabBg};display:flex;align-items:center;gap:4px;padding:0 8px">
+          ${dot}
+          <div style="flex:1;height:30px;border-radius:15px;background:${C.urlBg};display:flex;
+               align-items:center;gap:8px;padding:0 14px;margin:0 6px">
+            <div style="width:12px;height:12px;border-radius:50%;background:${C.dim};opacity:0.4"></div>
+            <span style="flex:1;color:${C.text};font-size:13px;font-family:system-ui,sans-serif">${esc(this.attr('url', 'example.com'))}</span>
+          </div>
+          ${dot}
+        </div>`;
+    }
+  }
+
+  class ChromeWindow extends Base {
+    static get observedAttributes() {
+      return ['width', 'height', 'url', 'active-index'];
+    }
+    connectedCallback() {
+      this._render();
+      if (!this._mo) {
+        // Re-mark after the author adds or removes a tab — same reason deck-stage
+        // watches for slide changes.
+        this._mo = new MutationObserver(() => this._markOwnTabs());
+        this._mo.observe(this, { childList: true });
+      }
+    }
+    disconnectedCallback() {
+      this._mo?.disconnect();
+      this._mo = null;
+    }
+    _markOwnTabs() {
+      for (const t of this.querySelectorAll(':scope > browser-tab')) t.setAttribute('slot', 'tab');
+      ensureDefaultTab(this, 'tab');
+      markTabs(this);
+    }
+    _render() {
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="width:${px(this.attr('width', 900))};height:${px(this.attr('height', 600))};
+             border-radius:10px;overflow:hidden;border:1px solid #DEE0E3;
+             display:flex;flex-direction:column;background:${C.tabBg}">
+          <div style="display:flex;align-items:center;height:44px;background:${C.barBg};padding-right:8px">
+            <browser-traffic-lights></browser-traffic-lights>
+            <div style="display:flex;align-items:flex-end;height:100%;padding-left:4px;flex:1">
+              <slot name="tab"></slot>
+            </div>
+          </div>
+          <browser-toolbar url="${esc(this.attr('url', 'example.com'))}"></browser-toolbar>
+          <div style="flex:1;background:#fff;overflow:auto"><slot></slot></div>
+        </div>`;
+      this._markOwnTabs();
+    }
+  }
+
+  for (const [tag, ctor] of [
+    ['browser-traffic-lights', ChromeTrafficLights],
+    ['browser-tab', ChromeTab],
+    ['browser-tab-bar', ChromeTabBar],
+    ['browser-toolbar', ChromeToolbar],
+    ['browser-window', ChromeWindow],
+  ]) {
+    if (!customElements.get(tag)) customElements.define(tag, ctor);
+  }
+})();

package/scripts/deck-stage.js

@@ -224,7 +224,15 @@
    * reuses. It costs one thing — render() also resets that img's `sizes`,
    * discarding the rail-width hint _materialize sets; the URL still matches the
    * slide's, so the thumb reuses the slide's decoded bitmap. */
-  const KEEP_LIVE_PREFIXES = ['cd-'];
+  /* The device frames (ios-/android-/macos-/browser-) get in on the *other* half
+   * of the rule. Their content lives in a shadow root, so cloneNode captures none
+   * of it — for them re-mounting is not "adds nothing", it is the only way to get
+   * the content at all. They do satisfy clause 2: purely presentational, read
+   * attributes and paint the shadow, no storage and no messages.
+   * design-canvas is deliberately NOT on this list — it reads localStorage,
+   * fetches its sidecar and posts to the host on mount, so running it once per
+   * thumbnail would corrupt the real state. */
+  const KEEP_LIVE_PREFIXES = ['cd-', 'ios-', 'android-', 'macos-', 'browser-'];
   const keepsCloneLive = (el) => KEEP_LIVE_PREFIXES.some((p) => el.localName.startsWith(p));
 
   /* Why a clone needs a substrate rule of its own: _collectAuthorCss samples