@0001-labs/design-system-1 0.3.0-alpha.27 → 0.3.0

package/DS1/5-visual-kit/bezels.ts

@@ -0,0 +1,394 @@
+/** Measured screen slots from the supplied community file. Artwork is separately licensed. */
+export interface Bezel {
+  id: string; label: string; width: number; height: number;
+  screen: { x: number; y: number; width: number; height: number; radius: number };
+  kind: 'phone' | 'tablet'; asset: string; source: { file: string; node: string };
+}
+export const BEZELS: readonly Bezel[] = [
+  {
+    "id": "iphone-17-pro-max-deep-blue",
+    "label": "iPhone 17 Pro Max \u00b7 Deep Blue",
+    "width": 490,
+    "height": 1000,
+    "screen": {
+      "x": 25,
+      "y": 22,
+      "width": 440,
+      "height": 956,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-pro-max-deep-blue.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14156"
+    }
+  },
+  {
+    "id": "iphone-17-pro-max-cosmic-orange",
+    "label": "iPhone 17 Pro Max \u00b7 Cosmic Orange",
+    "width": 490,
+    "height": 1000,
+    "screen": {
+      "x": 25,
+      "y": 22,
+      "width": 440,
+      "height": 956,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-pro-max-cosmic-orange.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14158"
+    }
+  },
+  {
+    "id": "iphone-17-pro-max-silver",
+    "label": "iPhone 17 Pro Max \u00b7 Silver",
+    "width": 490,
+    "height": 1000,
+    "screen": {
+      "x": 25,
+      "y": 22,
+      "width": 440,
+      "height": 956,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-pro-max-silver.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14160"
+    }
+  },
+  {
+    "id": "iphone-17-pro-deep-blue",
+    "label": "iPhone 17 Pro \u00b7 Deep Blue",
+    "width": 450,
+    "height": 920,
+    "screen": {
+      "x": 24,
+      "y": 23,
+      "width": 402,
+      "height": 874,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-pro-deep-blue.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14139"
+    }
+  },
+  {
+    "id": "iphone-17-pro-cosmic-orange",
+    "label": "iPhone 17 Pro \u00b7 Cosmic Orange",
+    "width": 450,
+    "height": 920,
+    "screen": {
+      "x": 24,
+      "y": 23,
+      "width": 402,
+      "height": 874,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-pro-cosmic-orange.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14141"
+    }
+  },
+  {
+    "id": "iphone-17-pro-silver",
+    "label": "iPhone 17 Pro \u00b7 Silver",
+    "width": 450,
+    "height": 920,
+    "screen": {
+      "x": 24,
+      "y": 23,
+      "width": 402,
+      "height": 874,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-pro-silver.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14148"
+    }
+  },
+  {
+    "id": "iphone-17-black",
+    "label": "iPhone 17 \u00b7 Black",
+    "width": 450,
+    "height": 920,
+    "screen": {
+      "x": 24,
+      "y": 23,
+      "width": 402,
+      "height": 874,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-black.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14214"
+    }
+  },
+  {
+    "id": "iphone-17-lavender",
+    "label": "iPhone 17 \u00b7 Lavender",
+    "width": 450,
+    "height": 920,
+    "screen": {
+      "x": 24,
+      "y": 23,
+      "width": 402,
+      "height": 874,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-lavender.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14201"
+    }
+  },
+  {
+    "id": "iphone-17-mist-blue",
+    "label": "iPhone 17 \u00b7 Mist Blue",
+    "width": 450,
+    "height": 920,
+    "screen": {
+      "x": 24,
+      "y": 23,
+      "width": 402,
+      "height": 874,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-mist-blue.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14203"
+    }
+  },
+  {
+    "id": "iphone-17-sage",
+    "label": "iPhone 17 \u00b7 Sage",
+    "width": 450,
+    "height": 920,
+    "screen": {
+      "x": 24,
+      "y": 23,
+      "width": 402,
+      "height": 874,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-sage.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14210"
+    }
+  },
+  {
+    "id": "iphone-17-white",
+    "label": "iPhone 17 \u00b7 White",
+    "width": 450,
+    "height": 920,
+    "screen": {
+      "x": 24,
+      "y": 23,
+      "width": 402,
+      "height": 874,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-17-white.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14212"
+    }
+  },
+  {
+    "id": "iphone-air-space-black",
+    "label": "iPhone Air \u00b7 Space Black",
+    "width": 460,
+    "height": 960,
+    "screen": {
+      "x": 20,
+      "y": 24,
+      "width": 420,
+      "height": 912,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-air-space-black.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14177"
+    }
+  },
+  {
+    "id": "iphone-air-cloud-white",
+    "label": "iPhone Air \u00b7 Cloud White",
+    "width": 460,
+    "height": 960,
+    "screen": {
+      "x": 20,
+      "y": 24,
+      "width": 420,
+      "height": 912,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-air-cloud-white.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14173"
+    }
+  },
+  {
+    "id": "iphone-air-light-gold",
+    "label": "iPhone Air \u00b7 Light Gold",
+    "width": 460,
+    "height": 960,
+    "screen": {
+      "x": 20,
+      "y": 24,
+      "width": 420,
+      "height": 912,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-air-light-gold.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14179"
+    }
+  },
+  {
+    "id": "iphone-air-sky-blue",
+    "label": "iPhone Air \u00b7 Sky Blue",
+    "width": 460,
+    "height": 960,
+    "screen": {
+      "x": 20,
+      "y": 24,
+      "width": 420,
+      "height": 912,
+      "radius": 58
+    },
+    "kind": "phone",
+    "asset": "assets/iphone-air-sky-blue.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14175"
+    }
+  },
+  {
+    "id": "ipad-pro-13-silver",
+    "label": "iPad Pro 13 M4 \u00b7 Silver",
+    "width": 1500,
+    "height": 1150,
+    "screen": {
+      "x": 62,
+      "y": 58,
+      "width": 1376,
+      "height": 1034,
+      "radius": 28
+    },
+    "kind": "tablet",
+    "asset": "assets/ipad-pro-13-silver.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "5456:18569"
+    }
+  },
+  {
+    "id": "ipad-pro-13-space-gray",
+    "label": "iPad Pro 13 M4 \u00b7 Space Gray",
+    "width": 1500,
+    "height": 1150,
+    "screen": {
+      "x": 62,
+      "y": 58,
+      "width": 1376,
+      "height": 1034,
+      "radius": 28
+    },
+    "kind": "tablet",
+    "asset": "assets/ipad-pro-13-space-gray.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14233"
+    }
+  },
+  {
+    "id": "ipad-pro-11-silver",
+    "label": "iPad Pro 11 M4 \u00b7 Silver",
+    "width": 1320,
+    "height": 940,
+    "screen": {
+      "x": 55,
+      "y": 53,
+      "width": 1210,
+      "height": 834,
+      "radius": 28
+    },
+    "kind": "tablet",
+    "asset": "assets/ipad-pro-11-silver.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6318:14240"
+    }
+  },
+  {
+    "id": "ipad-pro-11-space-gray",
+    "label": "iPad Pro 11 M4 \u00b7 Space Gray",
+    "width": 1320,
+    "height": 940,
+    "screen": {
+      "x": 55,
+      "y": 53,
+      "width": 1210,
+      "height": 834,
+      "radius": 28
+    },
+    "kind": "tablet",
+    "asset": "assets/ipad-pro-11-space-gray.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "6316:14230"
+    }
+  },
+  {
+    "id": "ipad-mini-starlight",
+    "label": "iPad mini \u00b7 Starlight",
+    "width": 1275,
+    "height": 890,
+    "screen": {
+      "x": 71,
+      "y": 73,
+      "width": 1133,
+      "height": 744,
+      "radius": 28
+    },
+    "kind": "tablet",
+    "asset": "assets/ipad-mini-starlight.png",
+    "source": {
+      "file": "8azymSnKt4pnYTZqdzQ7tF",
+      "node": "5456:18828"
+    }
+  }
+];
+export function bezelById(id: string): Bezel | undefined { return BEZELS.find(bezel => bezel.id === id); }
+export function screenGeometry(bezel: Bezel, width: number) {
+  const scale = width / bezel.width;
+  return { scale, width: bezel.screen.width, height: bezel.screen.height,
+    left: bezel.screen.x * scale, top: bezel.screen.y * scale };
+}

package/DS1/5-visual-kit/browser-icons.LICENSE

@@ -0,0 +1,53 @@
+Chromium source: https://chromium.googlesource.com/chromium/src/+/refs/tags/155.0.8059.86/components/vector_icons/
+
+// Copyright 2015 The Chromium Authors
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google LLC nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+Microsoft Fluent system icons: https://github.com/microsoft/fluentui-system-icons
+
+MIT License
+
+Copyright (c) 2020 Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/DS1/5-visual-kit/browser-icons.ts

@@ -0,0 +1,47 @@
+import { svg } from 'lit';
+type NativeGlyphs = Record<string, { size: number; path: string }>;
+let chromiumIcons: NativeGlyphs = {};
+let edgeIcons: NativeGlyphs = {};
+let loading: Promise<void> | undefined;
+
+/** Native browser glyphs are unnecessary for Apple windows and device status bars. */
+export function loadBrowserIcons(kind: string): Promise<void> {
+  if (kind !== 'chrome' && kind !== 'edge') return Promise.resolve();
+  return loading ??= import('./native-icon-paths').then((icons) => {
+    chromiumIcons = icons.chromiumIcons;
+    edgeIcons = icons.edgeIcons;
+  }).catch((error) => { loading = undefined; throw error; });
+}
+
+/** Presentation glyphs drawn in each browser's native icon vocabulary, not DS1 UI icons. */
+export function browserIcon(name: string, kind: string) {
+  if (kind === 'safari-ios' && name === 'tabs') return svg`<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2" y="2" width="12" height="12" rx="2"/><rect x="6" y="6" width="12" height="12" rx="2"/></svg>`;
+  if (kind === 'safari-ios' && name === 'back') return svg`<svg viewBox="0 0 20 20" aria-hidden="true"><path d="m13 3-7 7 7 7"/></svg>`;
+  const native = (kind === 'chrome' ? chromiumIcons : kind === 'edge' ? edgeIcons : {}) as Record<string, {size:number;path:string}>;
+  if (native[name]) { const glyph=native[name]; return svg`<svg viewBox=${`0 0 ${glyph.size} ${glyph.size}`} aria-hidden="true" style="fill:currentColor;stroke:none"><path d=${glyph.path}/></svg>`; }
+  const apple = kind === 'safari' || kind === 'safari-ios' || kind === 'macos';
+  const paths: Record<string, string> = {
+    back: apple ? 'M12 4 6 10l6 6' : 'M16 10H4m6-6-6 6 6 6',
+    forward: apple ? 'm8 4 6 6-6 6' : 'M4 10h12m-6-6 6 6-6 6',
+    reload: 'M16 7a6.5 6.5 0 1 0 .4 5M16 3v4h-4',
+    share: 'M7 6H4v11h12V6h-3M10 12V1m-3 3 3-3 3 3',
+    tabs: 'M6 6H2v12h12v-4M6 2h12v12H6Z',
+    sidebar: 'M3 3h14v14H3ZM8 3v14M5 6h1m-1 3h1m-1 3h1',
+    plus: 'M10 4v12M4 10h12',
+    close: 'm5 5 10 10M15 5 5 15',
+    'close-tab': 'm6 6 8 8m0-8-8 8',
+    minimize: 'M4 10h12', zoom: 'M4 8V4h4m4 12h4v-4M4 4l12 12',
+    'chevron-down': 'm6 8 4 4 4-4',
+    'page-menu': 'M3 5h14M3 10h10M3 15h6',
+    lock: 'M6 9V6a4 4 0 0 1 8 0v3M5 9h10v8H5Z',
+    tune: 'M3 6h7m4 0h3M3 14h3m4 0h7M10 4h4v4h-4ZM6 12h4v4H6Z',
+    star: 'm10 2 2.4 5 5.6.8-4 3.9.9 5.6-4.9-2.6-4.9 2.6.9-5.6-4-3.9L7.6 7Z',
+    extensions: 'M4 4h4V2a2 2 0 0 1 4 0v2h4v5h2a2 2 0 0 1 0 4h-2v5h-5v-2a2 2 0 0 0-4 0v2H2V4Z',
+    reading: 'M10 5Q6 2 2 4v12q4-2 8 1 4-3 8-1V4q-4-2-8 1v12',
+    favorites: 'm7 2 1.6 3.3 3.7.5-2.7 2.6.6 3.6L7 10.3 3.8 12l.6-3.6L1.7 5.8l3.7-.5ZM14 5h4m-4 5h4M3 16h15',
+    globe: 'M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM2 10h16M10 2c-5 4-5 12 0 16 5-4 5-12 0-16Z',
+    profile: 'M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM6 16v-1a4 4 0 0 1 8 0v1M12.5 7a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z',
+  };
+  if(name==='more'||name==='more-horizontal') return svg`<svg viewBox="0 0 20 20" aria-hidden="true" style="fill:currentColor;stroke:none">${name==='more'?svg`<circle cx="10" cy="4" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="10" cy="16" r="1.5"/>`:svg`<circle cx="4" cy="10" r="1.2"/><circle cx="10" cy="10" r="1.2"/><circle cx="16" cy="10" r="1.2"/>`}</svg>`;
+  return svg`<svg viewBox="0 0 20 20" aria-hidden="true"><path d=${paths[name] || paths['globe']}/></svg>`;
+}

package/DS1/5-visual-kit/browser-styles.ts

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+
+/** macOS reference layouts: Safari 27 compact, Chrome 155, Edge 156. CSS pixels at 1×. */
+export const browserStyles = css`
+  :host { --browser-strip:#dee1e6; --browser-toolbar:#fff; --browser-address:#f1f3f4; --browser-ink:#3c4043; }
+  :host([appearance=dark]) { --browser-strip:#202124; --browser-toolbar:#35363a; --browser-address:#202124; --browser-ink:#e8eaed; }
+  :host([kind=edge]) { --browser-strip:#f3f3f3; --browser-toolbar:#fff; --browser-address:#fff; --browser-ink:#242424; }
+  :host([kind=edge][appearance=dark]) { --browser-strip:#202020; --browser-toolbar:#2b2b2b; --browser-address:#2b2b2b; --browser-ink:#f5f5f5; }
+  .unavailable { opacity:.35 !important; }
+  .favicon { width:16px; height:16px; object-fit:contain; flex:none; }
+  .lights { width:80px; padding-left:12px; gap:8px; height:100%; }
+  .lights svg { width:8px; height:8px; }
+  .tabs { height:40px; gap:8px; padding:0 8px 0 0; background:var(--browser-strip); color:var(--browser-ink); }
+  .tabs > button { width:28px; height:28px; flex:none; border-radius:8px; }
+  .tab { position:relative; isolation:isolate; height:34px; width:232px; min-width:80px; border-radius:12px 12px 0 0; padding:0 10px; gap:8px; background:var(--browser-toolbar); font-size:13px; font-weight:400; }
+  .tab::before,.tab::after { content:''; position:absolute; bottom:0; width:12px; height:12px; background:transparent; z-index:-1; }
+  .tab::before { left:-12px; border-radius:0 0 12px 0; box-shadow:4px 4px 0 4px var(--browser-toolbar); }
+  .tab::after { right:-12px; border-radius:0 0 0 12px; box-shadow:-4px 4px 0 4px var(--browser-toolbar); }
+  .tab > svg { flex:none; width:16px; height:16px; color:#5f6368; }
+  :host([appearance=dark]) .tab > svg { color:#bdc1c6; }
+  .tab button { flex:none; width:20px; height:20px; border-radius:50%; }
+  .tab button svg { width:16px; height:16px; }
+  .browser-toolbar { height:46px; min-height:46px; padding:6px; gap:2px; background:var(--browser-toolbar); color:var(--browser-ink); border-bottom:1px solid #00000015; }
+  .browser-toolbar > button { width:34px; height:34px; flex:none; border-radius:50%; }
+  .browser-toolbar svg { width:20px; height:20px; stroke-width:1.65; }
+  .browser-toolbar .address { height:34px; padding:0 6px; gap:4px; margin:0 4px; border:0; border-radius:17px; background:var(--browser-address); justify-content:start; }
+  .address > span { flex:1; min-width:0; font-size:14px; }
+  .browser-toolbar .address button { flex:none; width:28px; height:28px; border-radius:50%; }
+  .browser-toolbar .address button svg { width:18px; height:18px; }
+  :host([kind=edge]) .tabs { background:var(--browser-strip); gap:6px; }
+  :host([kind=edge]) .tab { height:36px; width:240px; border-radius:10px 10px 0 0; }
+  :host([kind=edge]) .browser-toolbar { height:40px; min-height:40px; padding:4px; gap:0; }
+  :host([kind=edge]) .browser-toolbar > button { width:36px; height:32px; border-radius:6px; }
+  :host([kind=edge]) .browser-toolbar svg { stroke-width:1.3; }
+  :host([kind=edge]) .address { height:32px; border:1px solid #c7c7c7; margin:0 4px 0 0; padding:0 5px; }
+  :host([kind=edge][appearance=dark]) .address { border-color:#555; }
+  :host([kind=safari]) { background:#f8f8f8; color:#424242; }
+  :host([kind=safari][appearance=dark]) { background:#444448; color:#f4f4f4; }
+  :host([kind=safari]) .toolbar { height:52px; min-height:52px; padding:8px 12px 8px 0; gap:8px; border-bottom:1px solid #00000018; }
+  .safari-group { display:flex; align-items:center; height:36px; border-radius:18px; background:#eaeaea; flex:none; padding:0 4px; }
+  .safari-group button { width:32px; height:32px; border-radius:50%; }
+  .safari-group svg { width:18px; height:18px; stroke-width:1.5; }
+  .sidebar-group { gap:0; padding:0 8px; }
+  .sidebar-group button:last-child { width:16px; }
+  .sidebar-group button:last-child svg { width:12px; }
+  :host([kind=safari]) .safari-address { height:36px; max-width:none; margin:0; padding:0 10px 0 16px; border-radius:18px; background:#eaeaea; border:1px solid #00000008; box-shadow:0 1px 2px #00000008; gap:8px; }
+  .safari-address span { text-align:center; font-size:13px; }
+  .safari-address button { width:24px; height:28px; flex:none; }
+  .safari-actions { padding:0 8px; }
+  :host([kind=safari][appearance=dark]) .safari-group { background:#5b5b5f; }
+  :host([kind=safari][appearance=dark]) .safari-address { background:#505054; border-color:#ffffff10; }
+  @media(max-width:480px) { .tab { width:180px; } }
+`;

package/DS1/5-visual-kit/device-bezel.ts

@@ -0,0 +1,55 @@
+import { LitElement, css, html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { define } from '../0-face/define';
+import { bezelById, screenGeometry } from './bezels';
+import './app-chrome';
+/** Artwork and a measured, native-size screen. The entire screen scales uniformly into the bezel. */
+export class DsDeviceBezel extends LitElement {
+  static properties={ edgeToEdge:{type:Boolean,attribute:"edge-to-edge",reflect:true}, staticFrame:{type:Boolean,attribute:"static",reflect:true}, frameless:{type:Boolean,reflect:true}, responsive:{type:Boolean,reflect:true}, device:{}, assetBase:{attribute:'asset-base'}, chromeAssets:{attribute:'chrome-assets'}, network:{}, battery:{type:Number}, dualSim:{type:Boolean,attribute:'dual-sim'}, time:{}, address:{}, browser:{}, appearance:{reflect:true}, interactive:{type:Boolean}, status:{type:Boolean}, measuredWidth:{state:true} };
+  declare edgeToEdge:boolean; declare frameless: boolean; declare responsive: boolean;
+  declare staticFrame: boolean; declare device: string; declare assetBase: string; declare chromeAssets: string; declare network: string; declare battery: number; declare dualSim: boolean; declare time: string; declare address: string; declare browser: string; declare appearance: string; declare interactive: boolean; declare status: boolean;
+  declare private measuredWidth: number;
+  private observer?:ResizeObserver;
+  constructor(){super();this.edgeToEdge=false;this.staticFrame=false;this.frameless=false;this.responsive=false;this.device='iphone-17-pro-max-deep-blue';this.assetBase='';this.chromeAssets='';this.network='4G';this.battery=80;this.dualSim=false;this.time='00:01';this.address='';this.browser='';this.appearance='light';this.interactive=false;this.status=true;this.measuredWidth=0;}
+  static styles=css`
+    :host { display:block; width:var(--ds-device-width,280px); max-width:100%; }
+    :host([frameless]) { display:contents; }
+    .status-wrap { flex:none; }
+    :host([edge-to-edge]) .status-wrap { position:absolute; top:0; left:0; right:0; z-index:2; pointer-events:none; }
+    :host([edge-to-edge]) .home { display:none; }
+    /* Over the page, the status bar's ink follows appearance: black over a light page, white over a dark one. */
+    :host([edge-to-edge]) ds-app-chrome { --chrome-screen:transparent; background:transparent; }
+    .scaled-chrome { transform-origin:top left; }
+    .device.compact { box-shadow:inset 0 0 0 3px #202124; border-radius:32px; background:#202124; }
+    .compact .art { display:none; }
+    .device { position:relative; width:100%; }
+    .screen { position:absolute; transform-origin:top left; overflow:hidden; background:var(--ds-device-paper,#fff); display:flex; flex-direction:column; }
+    :host([appearance=dark]) .screen { --ds-device-paper:#111; }
+    .content { position:relative; flex:1; min-height:0; overflow:hidden; }
+    .art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
+    .browser { position:absolute; left:0; right:0; bottom:34px; z-index:1; }
+    .screen.with-browser .home { position:absolute; bottom:0; left:0; right:0; background:transparent; pointer-events:none; }
+    .screen.with-browser .home::after { display:none; }
+    .home { height:34px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--ds-device-paper,#fff); }
+    .home::after { content:''; width:134px; height:5px; border-radius:9px; background:#000; }
+    :host([appearance=dark]) .home::after { background:#fff; }
+    ds-app-chrome { flex:none; } ::slotted(iframe) { display:block; width:100%; height:100%; border:0; }
+    .missing { padding:20px; border:1px solid currentColor; font:14px/20px sans-serif; }
+  `;
+  connectedCallback(){super.connectedCallback();this.observer=new ResizeObserver(entries=>{this.measuredWidth=entries[0].contentRect.width;});this.observer.observe(this);}
+  disconnectedCallback(){this.observer?.disconnect();super.disconnectedCallback();}
+  render(){
+    if(this.frameless)return html`<slot></slot>`;
+    const b=bezelById(this.device);
+    if(!b||!this.assetBase)return html`<div class="missing" role="status">${b?'Set asset-base to your licensed bezel artwork.':'Unknown device bezel.'}</div>`;
+    const g=screenGeometry(b,this.measuredWidth||b.width);
+    const compact=this.responsive && this.measuredWidth>0 && this.measuredWidth<320;
+    if(compact){g.left=3;g.top=3;g.scale=(this.measuredWidth-6)/g.width;}
+    const screenStyle={left:g.left+'px',top:g.top+'px',width:g.width*(this.responsive?g.scale:1)+'px',height:g.height*(this.responsive?g.scale:1)+'px',borderRadius:(compact?29:b.screen.radius*(this.responsive?g.scale:1))+'px',transform:this.responsive?'none':`scale(${g.scale})`};
+    const chromeStyle=this.responsive?`width:${g.width}px;transform:scale(${g.scale});`:'';
+    const path=this.assetBase.replace(/\/?$/,'/')+b.asset.split('/').pop();
+    return html`<div class=${compact?'device compact':'device'} style=${styleMap({aspectRatio:`${b.width} / ${b.height}`})}><div class=${this.browser==='safari'?'screen with-browser':'screen'} part="screen" style=${styleMap(screenStyle)}>${this.status?html`<div class="status-wrap" style=${this.responsive?`height:${(b.kind==='phone'?59:32)*g.scale}px`:""}><ds-app-chrome class="scaled-chrome" style=${chromeStyle} .kind=${b.kind==='phone'?'ios':'ipados'} .time=${this.time} .network=${this.network} .battery=${this.battery} .dualSim=${this.dualSim} .appearance=${this.appearance} .assetBase=${this.chromeAssets}></ds-app-chrome></div>`:nothing}<div class="content" part="viewport" ?inert=${this.staticFrame}><slot></slot></div>${this.browser==='safari'?html`<div class="browser" style=${this.responsive?`height:${49*g.scale}px;bottom:${34*g.scale}px`:""}><ds-app-chrome class="scaled-chrome" style=${chromeStyle} kind="safari-ios" .address=${this.address} .appearance=${this.appearance} .interactive=${this.interactive&&!this.staticFrame}></ds-app-chrome></div>`:nothing}<div class="home" aria-hidden="true"></div></div><img class="art" src=${path} alt="" width=${b.width} height=${b.height} @error=${()=>this.dispatchEvent(new CustomEvent('bezel-error',{detail:{device:b.id},bubbles:true,composed:true}))}></div>`;
+  }
+}
+define('ds-device-bezel',DsDeviceBezel);
+declare global { interface HTMLElementTagNameMap { 'ds-device-bezel': DsDeviceBezel; } }

package/DS1/5-visual-kit/instagram-frame.ts

@@ -0,0 +1,15 @@
+import { css, html } from 'lit';
+
+/**
+ * The Reels frame: its size, its transparent face and the slotted media. App chrome draws it from
+ * the start, so the picture shows and nothing moves while the overlay (`instagram.ts`) loads on demand.
+ */
+export const instagramFrameStyles = css`
+  :host([kind=instagram]) { height:100%; background:transparent; color:white; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
+  .reels { position:relative; height:100%; overflow:hidden; isolation:isolate; }
+  .reels-media { position:absolute; inset:0; z-index:-2; }
+  .reels ::slotted(*) { width:100%; height:100%; display:block; object-fit:cover; }
+`;
+
+/** The frame alone, until the overlay has loaded. */
+export const instagramFrame = () => html`<div class="reels"><div class="reels-media"><slot></slot></div></div>`;