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

package/scripts/ios-frame.js

@@ -0,0 +1,338 @@
+/* BEGIN USAGE */
+// ios-frame.js — Simplified iOS 26 (Liquid Glass) device frame, as custom elements.
+// Based on the iOS 26 UI Kit + Figma status bar spec. No assets, no deps, no React.
+// Defines: <ios-device>, <ios-status-bar>, <ios-list>, <ios-list-row>, <ios-keyboard>
+//
+// Usage — wrap your screen content in <ios-device> to get the bezel, status bar
+// and home indicator. Load with a plain <script src="ios-frame.js"></script>:
+//
+//   <ios-device>
+//     ...your screen content...
+//   </ios-device>
+//   <ios-device dark keyboard>…</ios-device>
+//   <ios-device width="390" height="844">…</ios-device>   <!-- smaller device size -->
+//
+// Attributes:
+//   <ios-device>     width (402) · height (874) · dark · keyboard
+//   <ios-status-bar> dark · time ("9:41")
+//   <ios-list>       header · dark          — rows go in as light-DOM children
+//   <ios-list-row>   title · detail · icon (a CSS color) · dark · is-last · no-chevron
+//   <ios-keyboard>   dark
+// Booleans are by attribute presence: `dark` on, absent off. `no-chevron` turns the
+// row's chevron OFF (it is on by default).
+//
+// Safe areas — REQUIRED on every screen. The status bar (top) and home indicator
+// (bottom) float OVER your content; inset it or it overlaps them.
+//   --ios-safe-top     top inset (Dynamic Island + status bar)
+//   --ios-safe-bottom  bottom inset (home indicator)
+/* END USAGE */
+
+(() => {
+  /**
+   * 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>';
+
+  /**
+   * Every element is read-attributes-then-repaint-the-shadow. No incremental
+   * update: these are purely presentational frames, and one repaint costs far
+   * less than the diffing logic it would take to avoid it.
+   */
+  class Base extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+      this._render();
+    }
+    attributeChangedCallback() {
+      // Elements that already carry attributes at upgrade time land here too,
+      // before the shadow root exists.
+      if (this.shadowRoot) this._render();
+    }
+    /** Attribute read with a fallback. */
+    attr(name, fallback) {
+      const v = this.getAttribute(name);
+      return v === null || v === '' ? fallback : v;
+    }
+    get dark() {
+      return this.hasAttribute('dark');
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Status bar
+  // ───────────────────────────────────────────────────────────
+  class IOSStatusBar extends Base {
+    static get observedAttributes() {
+      return ['dark', 'time'];
+    }
+    _render() {
+      const c = this.dark ? '#fff' : '#000';
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="display:flex;gap:154px;align-items:center;justify-content:center;
+             padding:21px 24px 19px;box-sizing:border-box;position:relative;z-index:20;width:100%">
+          <div style="flex:1;height:22px;display:flex;align-items:center;justify-content:center;padding-top:1.5px">
+            <span style="font-family:-apple-system,'SF Pro',system-ui;font-weight:590;
+                  font-size:17px;line-height:22px;color:${c}">${esc(this.attr('time', '9:41'))}</span>
+          </div>
+          <div style="flex:1;height:22px;display:flex;align-items:center;justify-content:center;gap:7px;padding-top:1px;padding-right:1px">
+            <svg width="19" height="12" viewBox="0 0 19 12">
+              <rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7" fill="${c}"/>
+              <rect x="4.8" y="5" width="3.2" height="7" rx="0.7" fill="${c}"/>
+              <rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7" fill="${c}"/>
+              <rect x="14.4" y="0" width="3.2" height="12" rx="0.7" fill="${c}"/>
+            </svg>
+            <svg width="17" height="12" viewBox="0 0 17 12">
+              <path d="M8.5 3.2C10.8 3.2 12.9 4.1 14.4 5.6L15.5 4.5C13.7 2.7 11.2 1.5 8.5 1.5C5.8 1.5 3.3 2.7 1.5 4.5L2.6 5.6C4.1 4.1 6.2 3.2 8.5 3.2Z" fill="${c}"/>
+              <path d="M8.5 6.8C9.9 6.8 11.1 7.3 12 8.2L13.1 7.1C11.8 5.9 10.2 5.1 8.5 5.1C6.8 5.1 5.2 5.9 3.9 7.1L5 8.2C5.9 7.3 7.1 6.8 8.5 6.8Z" fill="${c}"/>
+              <circle cx="8.5" cy="10.5" r="1.5" fill="${c}"/>
+            </svg>
+            <svg width="27" height="13" viewBox="0 0 27 13">
+              <rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke="${c}" stroke-opacity="0.35" fill="none"/>
+              <rect x="2" y="2" width="20" height="9" rx="2" fill="${c}"/>
+              <path d="M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z" fill="${c}" fill-opacity="0.4"/>
+            </svg>
+          </div>
+        </div>`;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Grouped list (inset card, r:26) + row (52px)
+  // ───────────────────────────────────────────────────────────
+  class IOSListRow extends Base {
+    static get observedAttributes() {
+      return ['title', 'detail', 'icon', 'dark', 'is-last', 'no-chevron'];
+    }
+    _render() {
+      const dark = this.dark;
+      const text = dark ? '#fff' : '#000';
+      const sec = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';
+      const ter = dark ? 'rgba(235,235,245,0.3)' : 'rgba(60,60,67,0.3)';
+      const sep = dark ? 'rgba(84,84,88,0.65)' : 'rgba(60,60,67,0.12)';
+      const icon = this.attr('icon', '');
+      const detail = this.attr('detail', '');
+      // chevron defaults on: the attribute's presence turns it OFF (same shape as
+      // deck-stage's no-rail).
+      const chevron = !this.hasAttribute('no-chevron');
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="display:flex;align-items:center;min-height:52px;padding:0 16px;
+             position:relative;font-family:-apple-system,system-ui;font-size:17px;letter-spacing:-0.43px">
+          ${icon ? `<div style="width:30px;height:30px;border-radius:7px;background:${icon};margin-right:12px;flex-shrink:0"></div>` : ''}
+          <div style="flex:1;color:${text}">${esc(this.attr('title', ''))}</div>
+          ${detail ? `<span style="color:${sec};margin-right:6px">${esc(detail)}</span>` : ''}
+          ${
+            chevron
+              ? `<svg width="8" height="14" viewBox="0 0 8 14" style="flex-shrink:0">
+                   <path d="M1 1l6 6-6 6" stroke="${ter}" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+                 </svg>`
+              : ''
+          }
+          ${
+            this.hasAttribute('is-last')
+              ? ''
+              : `<div style="position:absolute;bottom:0;right:0;left:${icon ? '58px' : '16px'};height:0.5px;background:${sep}"></div>`
+          }
+        </div>`;
+    }
+  }
+
+  class IOSList extends Base {
+    static get observedAttributes() {
+      return ['header', 'dark'];
+    }
+    _render() {
+      const dark = this.dark;
+      const header = this.attr('header', '');
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame">
+          ${
+            header
+              ? `<div part="header" style="font-family:-apple-system,system-ui;font-size:13px;
+                   color:${dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)'};text-transform:uppercase;
+                   padding:8px 36px 6px;letter-spacing:-0.08px">${header}</div>`
+              : ''
+          }
+          <div part="card" style="background:${dark ? '#1C1C1E' : '#fff'};border-radius:26px;
+               margin:0 16px;overflow:hidden"><slot></slot></div>
+        </div>`;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Keyboard — iOS 26 liquid glass
+  // ───────────────────────────────────────────────────────────
+  class IOSKeyboard extends Base {
+    static get observedAttributes() {
+      return ['dark'];
+    }
+    _render() {
+      const dark = this.dark;
+      const glyph = dark ? 'rgba(255,255,255,0.7)' : '#595959';
+      const sugg = dark ? 'rgba(255,255,255,0.6)' : '#333';
+      const keyBg = dark ? 'rgba(255,255,255,0.22)' : 'rgba(255,255,255,0.85)';
+
+      const icons = {
+        shift: `<svg width="19" height="17" viewBox="0 0 19 17"><path d="M9.5 1L1 9.5h4.5V16h8V9.5H18L9.5 1z" fill="${glyph}"/></svg>`,
+        del: `<svg width="23" height="17" viewBox="0 0 23 17"><path d="M7 1h13a2 2 0 012 2v11a2 2 0 01-2 2H7l-6-7.5L7 1z" fill="none" stroke="${glyph}" stroke-width="1.6" stroke-linejoin="round"/><path d="M10 5l7 7M17 5l-7 7" stroke="${glyph}" stroke-width="1.6" stroke-linecap="round"/></svg>`,
+        ret: `<svg width="20" height="14" viewBox="0 0 20 14"><path d="M18 1v6H4m0 0l4-4M4 7l4 4" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+      };
+
+      const key = (content, { w, flex, ret, fs = 25 } = {}) => `
+        <div style="height:42px;border-radius:8.5px;${flex ? 'flex:1;' : ''}${w ? `width:${w}px;` : ''}min-width:0;
+             background:${ret ? '#08f' : keyBg};box-shadow:0 1px 0 rgba(0,0,0,0.075);
+             display:flex;align-items:center;justify-content:center;
+             font-family:-apple-system,'SF Compact',system-ui;font-size:${fs}px;font-weight:458;
+             color:${ret ? '#fff' : glyph}">${content}</div>`;
+
+      const row = (keys, pad = 0) =>
+        `<div style="display:flex;gap:6.5px;justify-content:center;padding:0 ${pad}px">
+           ${keys.map((l) => key(l, { flex: true })).join('')}
+         </div>`;
+
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="position:relative;z-index:15;border-radius:27px;overflow:hidden;
+             padding:11px 0 2px;display:flex;flex-direction:column;align-items:center;
+             box-shadow:${dark ? '0 -2px 20px rgba(0,0,0,0.09)' : '0 -1px 6px rgba(0,0,0,0.018), 0 -3px 20px rgba(0,0,0,0.012)'}">
+          <div style="position:absolute;inset:0;border-radius:27px;
+               backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);
+               background:${dark ? 'rgba(120,120,128,0.14)' : 'rgba(255,255,255,0.25)'}"></div>
+          <div style="position:absolute;inset:0;border-radius:27px;pointer-events:none;
+               box-shadow:${
+                 dark
+                   ? 'inset 1.5px 1.5px 1px rgba(255,255,255,0.15)'
+                   : 'inset 1.5px 1.5px 1px rgba(255,255,255,0.7), inset -1px -1px 1px rgba(255,255,255,0.4)'
+               };
+               border:${dark ? '0.5px solid rgba(255,255,255,0.15)' : '0.5px solid rgba(0,0,0,0.06)'}"></div>
+
+          <div style="display:flex;gap:20px;align-items:center;padding:8px 22px 13px;width:100%;
+               box-sizing:border-box;position:relative">
+            ${['"The"', 'the', 'to']
+              .map(
+                (w, i) =>
+                  `${i > 0 ? '<div style="width:1px;height:25px;background:#ccc;opacity:0.3"></div>' : ''}
+                   <div style="flex:1;text-align:center;font-family:-apple-system,system-ui;font-size:17px;
+                        color:${sugg};letter-spacing:-0.43px;line-height:22px">${w}</div>`,
+              )
+              .join('')}
+          </div>
+
+          <div style="display:flex;flex-direction:column;gap:13px;padding:0 6.5px;width:100%;
+               box-sizing:border-box;position:relative">
+            ${row(['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'])}
+            ${row(['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'], 20)}
+            <div style="display:flex;gap:14.25px;align-items:center">
+              ${key(icons.shift, { w: 45 })}
+              <div style="display:flex;gap:6.5px;flex:1">
+                ${['z', 'x', 'c', 'v', 'b', 'n', 'm'].map((l) => key(l, { flex: true })).join('')}
+              </div>
+              ${key(icons.del, { w: 45 })}
+            </div>
+            <div style="display:flex;gap:6px;align-items:center">
+              ${key('ABC', { w: 92.25, fs: 18 })}
+              ${key('', { flex: true })}
+              ${key(icons.ret, { w: 92.25, ret: true })}
+            </div>
+          </div>
+
+          <div style="height:56px;width:100%;position:relative"></div>
+        </div>`;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Device frame
+  // ───────────────────────────────────────────────────────────
+  class IOSDevice 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', 402))};height:${px(this.attr('height', 874))};
+             border-radius:48px;overflow:hidden;position:relative;
+             background:${dark ? '#000' : '#F2F2F7'};border:1px solid #DEE0E3;
+             font-family:-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
+             --ios-safe-top:62px;--ios-safe-bottom:34px">
+          <div part="island" style="position:absolute;top:11px;left:50%;transform:translateX(-50%);
+               width:126px;height:37px;border-radius:24px;background:#000;z-index:50"></div>
+          <div style="position:absolute;top:0;left:0;right:0;z-index:10">
+            <ios-status-bar${d}></ios-status-bar>
+          </div>
+          <!-- isolation:isolate gives the screen content its own stacking context, so
+               a z-index the author writes inside it cannot paint over the status bar
+               (10), the dynamic island (50) or the home indicator (60). -->
+          <div style="height:100%;display:flex;flex-direction:column;isolation:isolate">
+            <div style="flex:1;overflow:auto"><slot></slot></div>
+            ${this.hasAttribute('keyboard') ? `<ios-keyboard${d}></ios-keyboard>` : ''}
+          </div>
+          <div part="home-indicator" style="position:absolute;bottom:0;left:0;right:0;z-index:60;height:34px;
+               display:flex;justify-content:center;align-items:flex-end;padding-bottom:8px;pointer-events:none">
+            <div style="width:139px;height:5px;border-radius:100px;
+                 background:${dark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'}"></div>
+          </div>
+        </div>`;
+    }
+  }
+
+  // A duplicate define throws — copies of this file can coexist on one page, so
+  // the guard is mandatory.
+  for (const [tag, ctor] of [
+    ['ios-status-bar', IOSStatusBar],
+    ['ios-list-row', IOSListRow],
+    ['ios-list', IOSList],
+    ['ios-keyboard', IOSKeyboard],
+    ['ios-device', IOSDevice],
+  ]) {
+    if (!customElements.get(tag)) customElements.define(tag, ctor);
+  }
+})();

package/scripts/macos-window.js

@@ -0,0 +1,260 @@
+/* BEGIN USAGE */
+// macos-window.js — Simplified macOS Tahoe (Liquid Glass) window, as custom elements.
+// Based on the macOS Tahoe UI Kit. No image assets, no dependencies, no React.
+// Defines: <macos-window>, <macos-sidebar>, <macos-sidebar-item>, <macos-sidebar-header>,
+//          <macos-toolbar>, <macos-glass>, <macos-traffic-lights>
+//
+// Usage — wrap your app content in <macos-window> to get the window chrome
+// (traffic lights + titlebar). Sidebar rows go into the `sidebar` slot:
+//
+//   <macos-window width="980" height="620" title="Documents">
+//     <macos-sidebar-header slot="sidebar" title="Favorites"></macos-sidebar-header>
+//     <macos-sidebar-item  slot="sidebar" label="Projects"></macos-sidebar-item>
+//     <macos-sidebar-item  slot="sidebar" label="Drafts" selected></macos-sidebar-item>
+//     ...your app content...
+//   </macos-window>
+//
+// Attributes:
+//   <macos-window>         width (900) · height (600) · title ("Folder")
+//   <macos-sidebar-item>   label · selected
+//   <macos-sidebar-header> title
+//   <macos-toolbar>        title
+//   <macos-glass>          radius (296) · dark
+// Booleans are by attribute presence. <macos-window> renders its own <macos-sidebar>;
+// you only supply the rows.
+/* END USAGE */
+
+(() => {
+  // Single quotes around font names, deliberately: this string goes into a
+  // style="..." attribute, and a double quote inside the value closes the
+  // attribute early — every declaration after it is dropped, which shows up as
+  // font sizes falling back to the default.
+  const FONT = "-apple-system, BlinkMacSystemFont, 'SF Pro', 'Helvetica Neue', sans-serif";
+  /**
+   * 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;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Liquid glass primitive — blur + white tint + inset highlight
+  // ───────────────────────────────────────────────────────────
+  class MacGlass extends Base {
+    static get observedAttributes() {
+      return ['radius', 'dark'];
+    }
+    _render() {
+      const dark = this.hasAttribute('dark');
+      const r = px(this.attr('radius', 296));
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="position:relative;border-radius:${r}">
+          <div part="glass" style="position:absolute;inset:0;border-radius:${r};
+               background:${dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.35)'};
+               backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
+               border:${dark ? '0.5px solid rgba(255,255,255,0.12)' : '0.5px solid rgba(255,255,255,0.6)'};
+               box-shadow:${
+                 dark
+                   ? '0 8px 40px rgba(0,0,0,0.2)'
+                   : '0 8px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4)'
+               }"></div>
+          <div style="position:relative;z-index:1"><slot></slot></div>
+        </div>`;
+    }
+  }
+
+  class MacTrafficLights extends Base {
+    _render() {
+      const dot = (bg) =>
+        `<div style="width:14px;height:14px;border-radius:50%;background:${bg};border:0.5px solid rgba(0,0,0,0.1)"></div>`;
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="display:flex;gap:9px;align-items:center;padding:1px">
+          ${dot('#ff736a')}${dot('#febc2e')}${dot('#19c332')}
+        </div>`;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Toolbar — title + glass pill icons
+  // ───────────────────────────────────────────────────────────
+  class MacToolbar extends Base {
+    static get observedAttributes() {
+      return ['title'];
+    }
+    _render() {
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="display:flex;gap:8px;align-items:center;padding:8px;flex-shrink:0">
+          <div style="font-family:${FONT};font-size:15px;font-weight:700;color:rgba(0,0,0,0.85);
+               white-space:nowrap;padding-left:8px">${esc(this.attr('title', 'Folder'))}</div>
+          <div style="flex:1"></div>
+          <macos-glass>
+            <div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center">
+              <div style="width:14px;height:14px;border-radius:50%;background:#4c4c4c;opacity:0.4"></div>
+            </div>
+          </macos-glass>
+          <macos-glass>
+            <div style="width:140px;height:36px;display:flex;align-items:center;gap:6px;padding:0 12px">
+              <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+                <circle cx="5.5" cy="5.5" r="4" stroke="#727272" stroke-width="1.5"/>
+                <path d="M8.5 8.5l3 3" stroke="#727272" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+              <span style="font-family:${FONT};font-size:13px;font-weight:500;color:#727272">Search</span>
+            </div>
+          </macos-glass>
+        </div>`;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Sidebar — frosted glass panel floating inside the window
+  // ───────────────────────────────────────────────────────────
+  class MacSidebarItem extends Base {
+    static get observedAttributes() {
+      return ['label', 'selected'];
+    }
+    _render() {
+      const selected = this.hasAttribute('selected');
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="display:flex;align-items:center;gap:6px;height:24px;
+             padding:4px 10px 4px 6px;margin:0 10px;border-radius:8px;position:relative;
+             font-family:${FONT};font-size:11px;font-weight:500">
+          ${selected ? '<div style="position:absolute;inset:0;border-radius:8px;background:rgba(0,0,0,0.11);mix-blend-mode:multiply"></div>' : ''}
+          <div style="width:14px;height:14px;border-radius:50%;
+               background:${selected ? '#007aff' : 'rgba(0,0,0,0.4)'};opacity:${selected ? 1 : 0.5};
+               flex-shrink:0;position:relative"></div>
+          <span style="color:rgba(0,0,0,0.85);position:relative">${esc(this.attr('label', ''))}</span>
+        </div>`;
+    }
+  }
+
+  class MacSidebarHeader extends Base {
+    static get observedAttributes() {
+      return ['title'];
+    }
+    _render() {
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="padding:14px 18px 5px;font-family:${FONT};font-size:11px;
+             font-weight:700;color:rgba(0,0,0,0.5)">${esc(this.attr('title', ''))}</div>`;
+    }
+  }
+
+  class MacSidebar extends Base {
+    _render() {
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="width:220px;height:100%;padding:8px;flex-shrink:0;
+             position:relative;display:flex;flex-direction:column">
+          <div style="position:absolute;inset:8px;border-radius:18px;
+               background:rgba(210,225,245,0.45);
+               backdrop-filter:blur(50px) saturate(200%);-webkit-backdrop-filter:blur(50px) saturate(200%);
+               border:0.5px solid rgba(255,255,255,0.5);
+               box-shadow:0 8px 40px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.35)"></div>
+          <div style="position:relative;z-index:1;padding:10px 0;display:flex;flex-direction:column;gap:2px">
+            <div style="height:32px;display:flex;align-items:center;justify-content:space-between;
+                 padding:0 10px;margin-bottom:4px">
+              <macos-traffic-lights></macos-traffic-lights>
+            </div>
+            <slot></slot>
+          </div>
+        </div>`;
+    }
+  }
+
+  // ───────────────────────────────────────────────────────────
+  // Window — r:26, big shadow, sidebar + toolbar + content
+  // ───────────────────────────────────────────────────────────
+  class MacWindow extends Base {
+    static get observedAttributes() {
+      return ['width', 'height', 'title'];
+    }
+    _render() {
+      this.shadowRoot.innerHTML =
+        hostCss(this) +
+        `
+        <div part="frame" style="width:${px(this.attr('width', 900))};height:${px(this.attr('height', 600))};
+             border-radius:26px;overflow:hidden;background:#fff;border:1px solid #DEE0E3;
+             display:flex;position:relative;font-family:${FONT}">
+          <!-- This element renders the sidebar panel; the author supplies only the rows.
+               Same shape as the React version's <MacSidebar>{sidebar}</MacSidebar>. -->
+          <macos-sidebar><slot name="sidebar"></slot></macos-sidebar>
+          <div style="flex:1;display:flex;flex-direction:column">
+            <macos-toolbar title="${esc(this.attr('title', 'Folder'))}"></macos-toolbar>
+            <div style="flex:1;overflow:auto;padding:4px 8px"><slot></slot></div>
+          </div>
+        </div>`;
+    }
+  }
+
+  for (const [tag, ctor] of [
+    ['macos-glass', MacGlass],
+    ['macos-traffic-lights', MacTrafficLights],
+    ['macos-toolbar', MacToolbar],
+    ['macos-sidebar-item', MacSidebarItem],
+    ['macos-sidebar-header', MacSidebarHeader],
+    ['macos-sidebar', MacSidebar],
+    ['macos-window', MacWindow],
+  ]) {
+    if (!customElements.get(tag)) customElements.define(tag, ctor);
+  }
+})();