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

package/dist/5-visual-kit/browser-icons.js

@@ -0,0 +1,51 @@
+import { svg } from 'lit';
+let chromiumIcons = {};
+let edgeIcons = {};
+let loading;
+/** Native browser glyphs are unnecessary for Apple windows and device status bars. */
+export function loadBrowserIcons(kind) {
+    if (kind !== 'chrome' && kind !== 'edge')
+        return Promise.resolve();
+    return loading ?? (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, kind) {
+    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 : {});
+    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 = {
+        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/dist/5-visual-kit/browser-styles.d.ts

@@ -0,0 +1,3 @@
+/** macOS reference layouts: Safari 27 compact, Chrome 155, Edge 156. CSS pixels at 1×. */
+export declare const browserStyles: import("lit").CSSResult;
+//# sourceMappingURL=browser-styles.d.ts.map

package/dist/5-visual-kit/browser-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-styles.d.ts","sourceRoot":"","sources":["../../DS1/5-visual-kit/browser-styles.ts"],"names":[],"mappings":"AAEA,0FAA0F;AAC1F,eAAO,MAAM,aAAa,yBAiDzB,CAAC"}

package/dist/5-visual-kit/browser-styles.js

@@ -0,0 +1,52 @@
+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/dist/5-visual-kit/device-bezel.d.ts

@@ -0,0 +1,84 @@
+import { LitElement } from 'lit';
+import './app-chrome';
+/** Artwork and a measured, native-size screen. The entire screen scales uniformly into the bezel. */
+export declare class DsDeviceBezel extends LitElement {
+    static properties: {
+        edgeToEdge: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        staticFrame: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        frameless: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        responsive: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        device: {};
+        assetBase: {
+            attribute: string;
+        };
+        chromeAssets: {
+            attribute: string;
+        };
+        network: {};
+        battery: {
+            type: NumberConstructor;
+        };
+        dualSim: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        time: {};
+        address: {};
+        browser: {};
+        appearance: {
+            reflect: boolean;
+        };
+        interactive: {
+            type: BooleanConstructor;
+        };
+        status: {
+            type: BooleanConstructor;
+        };
+        measuredWidth: {
+            state: boolean;
+        };
+    };
+    edgeToEdge: boolean;
+    frameless: boolean;
+    responsive: boolean;
+    staticFrame: boolean;
+    device: string;
+    assetBase: string;
+    chromeAssets: string;
+    network: string;
+    battery: number;
+    dualSim: boolean;
+    time: string;
+    address: string;
+    browser: string;
+    appearance: string;
+    interactive: boolean;
+    status: boolean;
+    private measuredWidth;
+    private observer?;
+    constructor();
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-device-bezel': DsDeviceBezel;
+    }
+}
+//# sourceMappingURL=device-bezel.d.ts.map

package/dist/5-visual-kit/device-bezel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-bezel.d.ts","sourceRoot":"","sources":["../../DS1/5-visual-kit/device-bezel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,OAAO,cAAc,CAAC;AACtB,qGAAqG;AACrG,qBAAa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAogB;IAC7gB,UAAU,EAAC,OAAO,CAAC;IAAS,SAAS,EAAE,OAAO,CAAC;IAAS,UAAU,EAAE,OAAO,CAAC;IAC5E,WAAW,EAAE,OAAO,CAAC;IAAS,MAAM,EAAE,MAAM,CAAC;IAAS,SAAS,EAAE,MAAM,CAAC;IAAS,YAAY,EAAE,MAAM,CAAC;IAAS,OAAO,EAAE,MAAM,CAAC;IAAS,OAAO,EAAE,MAAM,CAAC;IAAS,OAAO,EAAE,OAAO,CAAC;IAAS,IAAI,EAAE,MAAM,CAAC;IAAS,OAAO,EAAE,MAAM,CAAC;IAAS,OAAO,EAAE,MAAM,CAAC;IAAS,UAAU,EAAE,MAAM,CAAC;IAAS,WAAW,EAAE,OAAO,CAAC;IAAS,MAAM,EAAE,OAAO,CAAC;IACrV,QAAgB,aAAa,CAAS;IACtC,OAAO,CAAC,QAAQ,CAAC,CAAgB;;IAEjC,MAAM,CAAC,MAAM,0BAwBX;IACF,iBAAiB;IACjB,oBAAoB;IACpB,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,iBAAiB,EAAE,aAAa,CAAC;KAAE;CAAE"}

package/dist/5-visual-kit/device-bezel.js

@@ -0,0 +1,56 @@
+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 {
+    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; }
+    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>`;
+    }
+}
+DsDeviceBezel.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 } };
+DsDeviceBezel.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; }
+  `;
+define('ds-device-bezel', DsDeviceBezel);

package/dist/5-visual-kit/instagram-frame.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare const instagramFrameStyles: import("lit").CSSResult;
+/** The frame alone, until the overlay has loaded. */
+export declare const instagramFrame: () => import("lit").TemplateResult<1>;
+//# sourceMappingURL=instagram-frame.d.ts.map

package/dist/5-visual-kit/instagram-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instagram-frame.d.ts","sourceRoot":"","sources":["../../DS1/5-visual-kit/instagram-frame.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,yBAKhC,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,cAAc,uCAAoF,CAAC"}

package/dist/5-visual-kit/instagram-frame.js

@@ -0,0 +1,13 @@
+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>`;

package/dist/5-visual-kit/instagram.d.ts

@@ -0,0 +1,18 @@
+/** Presentation based on the supplied October 2026 iPhone Reels reference. Its frame and media are `instagram-frame.ts`, drawn before this loads. */
+export declare const instagramStyles: import("lit").CSSResult;
+interface ReelsOptions {
+    interactive: boolean;
+    username: string;
+    caption: string;
+    avatar: string;
+    verified: boolean;
+    likes: string;
+    comments: string;
+    reposts: string;
+    shares: string;
+    progress: number;
+    action: (action: string) => void;
+}
+export declare function instagram(o: ReelsOptions): import("lit").TemplateResult<1>;
+export {};
+//# sourceMappingURL=instagram.d.ts.map

package/dist/5-visual-kit/instagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instagram.d.ts","sourceRoot":"","sources":["../../DS1/5-visual-kit/instagram.ts"],"names":[],"mappings":"AAEA,qJAAqJ;AACrJ,eAAO,MAAM,eAAe,yBAwB3B,CAAC;AAQF,UAAU,YAAY;IAAG,WAAW,EAAC,OAAO,CAAC;IAAC,QAAQ,EAAC,MAAM,CAAC;IAAC,OAAO,EAAC,MAAM,CAAC;IAAC,MAAM,EAAC,MAAM,CAAC;IAAC,QAAQ,EAAC,OAAO,CAAC;IAAC,KAAK,EAAC,MAAM,CAAC;IAAC,QAAQ,EAAC,MAAM,CAAC;IAAC,OAAO,EAAC,MAAM,CAAC;IAAC,MAAM,EAAC,MAAM,CAAC;IAAC,QAAQ,EAAC,MAAM,CAAC;IAAC,MAAM,EAAC,CAAC,MAAM,EAAC,MAAM,KAAG,IAAI,CAAA;CAAE;AAC7N,wBAAgB,SAAS,CAAC,CAAC,EAAC,YAAY,mCAIvC"}

package/dist/5-visual-kit/instagram.js

@@ -0,0 +1,39 @@
+import { css, html, svg, nothing } from 'lit';
+/** Presentation based on the supplied October 2026 iPhone Reels reference. Its frame and media are `instagram-frame.ts`, drawn before this loads. */
+export const instagramStyles = css `
+  .reels::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(#0005,transparent 23%,transparent 55%,#0009); }
+  .reels button { width:44px; height:44px; border-radius:8px; color:white; }
+  .reels svg { width:27px; height:27px; stroke-width:1.8; }
+  .reels-header { position:absolute; top:68px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; }
+  .reels-tabs { display:flex; gap:14px; font-size:24px; font-weight:700; }
+  .reels-tabs span:last-child { color:#ffffffa6; }
+  .reels-actions { position:absolute; right:10px; bottom:118px; display:grid; gap:15px; text-align:center; }
+  .reels-action { display:grid; justify-items:center; font-size:13px; line-height:18px; }
+  .reels-action button { height:36px; }
+  .reels-action span:empty { display:none; }
+  .reels-author { position:absolute; left:16px; right:64px; bottom:120px; font-size:14px; }
+  .reels-identity { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
+  .reels-avatar { flex:none; width:40px; height:40px; border:2px solid #fb44b8; border-radius:50%; padding:2px; background:#ffd52a; color:#111; display:grid; place-items:center; overflow:hidden; }
+  .reels-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
+  .reels-name { font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .reels-verified { font-size:15px; }
+  .reels .reels-follow { width:auto; height:28px; padding:0 9px; border:1px solid #ffffff80; font-size:14px; }
+  .reels-caption { margin:0; line-height:20px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
+  .reels-progress { position:absolute; bottom:98px; left:16px; right:16px; height:2px; background:#ffffff40; border-radius:2px; overflow:hidden; }
+  .reels-progress i { display:block; height:100%; background:white; transform-origin:left; }
+  .reels-nav { position:absolute; bottom:26px; left:50px; right:50px; height:52px; padding:3px; border:1px solid #ffffff40; border-radius:30px; background:#3339; backdrop-filter:blur(20px); display:flex; align-items:center; justify-content:space-around; }
+  .reels-nav button { flex:1; border-radius:30px; height:44px; }
+  .reels-nav .selected { background:#ffffff30; }
+`;
+const paths = {
+    plus: 'M12 3v18M3 12h18', heart: 'M12 21 3.5 13C-3 6 6-1 12 6 18-1 27 6 20.5 13Z',
+    comment: 'M21 20 20 15a9 9 0 1 0-5 5Z', repost: 'm15 2 4 4-4 4M19 6H7a4 4 0 0 0-4 4v3m6 9-4-4 4-4M5 18h12a4 4 0 0 0 4-4v-3',
+    send: 'm3 3 19 1-8 18-4-11Z M10 11 22 4', more: 'M4 8h16M4 14h11',
+    home: 'm3 10 9-8 9 8v11h-6v-8H9v8H3Z', reels: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z m5 4 7 5-7 5Z',
+    search: 'M17 17 22 22M20 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0', profile: 'M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0M3 12h18M12 3v18', filters: 'M2 6h20M2 18h20M7 3v6M17 15v6',
+};
+export function instagram(o) {
+    const button = (action, label, selected = false) => html `<button type="button" class=${selected ? 'selected' : ''} aria-label=${label} ?disabled=${!o.interactive} tabindex=${o.interactive ? 0 : -1} @click=${() => o.action(action)}>${svg `<svg viewBox="0 0 24 24" aria-hidden="true"><path d=${paths[action] ?? paths.profile}></path></svg>`}</button>`;
+    const action = (name, label, count) => html `<div class="reels-action">${button(name, label)}<span>${count}</span></div>`;
+    return html `<div class="reels"><div class="reels-media"><slot></slot></div><div class="reels-header">${button('plus', 'Create')}<div class="reels-tabs"><span>Reels</span><span>Friends</span></div>${button('filters', 'Feed preferences')}</div><div class="reels-actions">${action('heart', 'Like', o.likes)}${action('comment', 'Comment', o.comments)}${action('repost', 'Repost', o.reposts)}${action('send', 'Share', o.shares)}${action('more', 'More', '')}</div><div class="reels-author"><div class="reels-identity"><span class="reels-avatar">${o.avatar ? html `<img src=${o.avatar} alt="">` : html `<span>◎</span>`}</span><span class="reels-name">${o.username}</span>${o.verified ? html `<span class="reels-verified" aria-label="Verified">✹</span>` : nothing}<button class="reels-follow" ?disabled=${!o.interactive} tabindex=${o.interactive ? 0 : -1} @click=${() => o.action('follow')}>Follow</button></div><p class="reels-caption">${o.caption}</p></div><div class="reels-progress" aria-hidden="true"><i style=${`transform:scaleX(${Math.min(1, Math.max(0, o.progress))})`}></i></div><nav class="reels-nav" aria-label="Instagram">${button('home', 'Home')}${button('reels', 'Reels', true)}${button('send', 'Messages')}${button('search', 'Search')}${button('profile', 'Profile')}</nav></div>`;
+}

package/dist/5-visual-kit/mobile-chrome.d.ts

@@ -0,0 +1,4 @@
+/** Measured from the supplied 1179×2556 iPhone capture at 3× (393×852 points). */
+export declare const mobileChromeStyles: import("lit").CSSResult;
+export declare const cellularSignal: (dual: boolean) => import("lit").TemplateResult<1>;
+//# sourceMappingURL=mobile-chrome.d.ts.map

package/dist/5-visual-kit/mobile-chrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-chrome.d.ts","sourceRoot":"","sources":["../../DS1/5-visual-kit/mobile-chrome.ts"],"names":[],"mappings":"AAEA,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,yBAoB9B,CAAC;AACF,eAAO,MAAM,cAAc,GAAI,MAAM,OAAO,oCAA+T,CAAC"}

package/dist/5-visual-kit/mobile-chrome.js

@@ -0,0 +1,24 @@
+import { css, html, svg } from 'lit';
+/** Measured from the supplied 1179×2556 iPhone capture at 3× (393×852 points). */
+export const mobileChromeStyles = css `
+  :host([kind=safari-ios]) { background:transparent; color:#080808; }
+  :host([kind=safari-ios][appearance=dark]) { color:#f5f5f5; }
+  .mobile { display:flex; align-items:center; gap:7px; padding:0 33px; height:49px; background:transparent; }
+  .mobile > button,.mobile .address { height:49px; border:1px solid #00000016; border-radius:28px; background:linear-gradient(155deg,#ffffffa0,#ffffff66 45%,#ffffffb8); box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #ffffffb0,0 2px 9px #00000005; backdrop-filter:blur(3px) saturate(1.5); -webkit-backdrop-filter:blur(3px) saturate(1.5); }
+  .mobile > button { width:49px; flex:none; }
+  .mobile .address { min-width:0; flex:1; padding:0 12px; gap:6px; justify-content:space-between; }
+  .mobile .address span { text-align:center; color:inherit; font-size:17px; font-weight:600; letter-spacing:-.4px; }
+  .mobile .address button { width:24px; height:36px; flex:none; }
+  .mobile svg { width:28px; height:28px; stroke-width:1.65; }
+  .mobile > button:first-child svg { width:27px; height:27px; stroke-width:1.8; }
+  .mobile .address button svg { width:24px; height:24px; }
+  :host([kind=safari-ios][appearance=dark]) .mobile > button,:host([kind=safari-ios][appearance=dark]) .mobile .address { border-color:#ffffff24; background:linear-gradient(155deg,#303030b8,#20202080 45%,#202020e0); box-shadow:inset 0 1px 1px #ffffff35,inset 0 -1px 2px #ffffff18,0 2px 9px #0001; }
+  :host([kind=ios]) .status { height:59px; padding-top:0; }
+  .network { font-size:14px; font-weight:500; line-height:16px; letter-spacing:-.4px; }
+  .signal { display:block; width:20px; height:16px; fill:currentColor; stroke:none; }
+  .status .levels { gap:6px; }
+  .status .battery-meter { display:block; position:relative; width:25px; height:13px; border-radius:4.5px; background:color-mix(in srgb,currentColor 30%,transparent); overflow:visible; }
+  .battery-meter .charge { display:block; height:100%; width:var(--battery-charge,80%); background:currentColor; border-radius:4.5px 0 0 4.5px; }
+  .battery-meter::after { content:''; position:absolute; left:26px; top:4px; width:2px; height:5px; border-radius:0 2px 2px 0; background:color-mix(in srgb,currentColor 30%,transparent); }
+`;
+export const cellularSignal = (dual) => html `<svg class="signal" viewBox="0 0 20 16" role="img" aria-label=${dual ? 'Full dual-SIM signal' : 'Full signal'}>${[0, 1, 2, 3].map(i => svg `<rect x=${i * 5} y=${dual ? 4 - i : 7 - i * 2} width="3.5" height=${dual ? 6 + i : 8 + i * 2} rx="1.75"></rect>${dual ? svg `<rect x=${i * 5} y="12" width="3.5" height="3.5" rx="1.75"></rect>` : ''}`)}</svg>`;

package/dist/5-visual-kit/native-icon-paths.d.ts

@@ -0,0 +1,146 @@
+/*!
+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.
+
+*/
+/** Chromium 155 (BSD-3-Clause) and Microsoft Fluent system icons (MIT). See browser-icons.LICENSE. */
+export declare const chromiumIcons: {
+    back: {
+        size: number;
+        path: string;
+    };
+    forward: {
+        size: number;
+        path: string;
+    };
+    reload: {
+        size: number;
+        path: string;
+    };
+    tune: {
+        size: number;
+        path: string;
+    };
+    extensions: {
+        size: number;
+        path: string;
+    };
+    profile: {
+        size: number;
+        path: string;
+    };
+    "close-tab": {
+        size: number;
+        path: string;
+    };
+    "chevron-down": {
+        size: number;
+        path: string;
+    };
+    star: {
+        size: number;
+        path: string;
+    };
+};
+export declare const edgeIcons: {
+    back: {
+        size: number;
+        path: string;
+    };
+    forward: {
+        size: number;
+        path: string;
+    };
+    reload: {
+        size: number;
+        path: string;
+    };
+    lock: {
+        size: number;
+        path: string;
+    };
+    reading: {
+        size: number;
+        path: string;
+    };
+    star: {
+        size: number;
+        path: string;
+    };
+    favorites: {
+        size: number;
+        path: string;
+    };
+    profile: {
+        size: number;
+        path: string;
+    };
+    "more-horizontal": {
+        size: number;
+        path: string;
+    };
+    "chevron-down": {
+        size: number;
+        path: string;
+    };
+    plus: {
+        size: number;
+        path: string;
+    };
+    "close-tab": {
+        size: number;
+        path: string;
+    };
+};
+//# sourceMappingURL=native-icon-paths.d.ts.map

package/dist/5-visual-kit/native-icon-paths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-icon-paths.d.ts","sourceRoot":"","sources":["../../DS1/5-visual-kit/native-icon-paths.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDE;AACF,sGAAsG;AACtG,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCzB,CAAC;AACF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDrB,CAAC"}