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

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

@@ -0,0 +1,98 @@
+import { LitElement, type PropertyValues } from 'lit';
+import '../2-core/ds-icon';
+export type AppChromeKind = 'macos' | 'macos-compact' | 'ios' | 'ipados' | 'safari' | 'chrome' | 'edge' | 'safari-ios' | 'instagram';
+/** Platform presentation chrome. Controls emit requests; they never navigate or close the host app. */
+export declare class DsAppChrome extends LitElement {
+    static properties: {
+        username: {};
+        caption: {};
+        avatar: {};
+        verified: {
+            type: BooleanConstructor;
+        };
+        likes: {};
+        comments: {};
+        reposts: {};
+        shares: {};
+        progress: {
+            type: NumberConstructor;
+        };
+        kind: {
+            reflect: boolean;
+        };
+        appearance: {
+            reflect: boolean;
+        };
+        time: {};
+        address: {};
+        label: {};
+        href: {};
+        network: {};
+        battery: {
+            type: NumberConstructor;
+        };
+        dualSim: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        favicon: {};
+        backAvailable: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        forwardAvailable: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        assetBase: {
+            attribute: string;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    username: string;
+    caption: string;
+    avatar: string;
+    verified: boolean;
+    likes: string;
+    comments: string;
+    reposts: string;
+    shares: string;
+    progress: number;
+    kind: AppChromeKind;
+    appearance: string;
+    time: string;
+    address: string;
+    label: string;
+    href: string;
+    assetBase: string;
+    interactive: boolean;
+    favicon: string;
+    network: string;
+    battery: number;
+    dualSim: boolean;
+    backAvailable: boolean;
+    forwardAvailable: boolean;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    private drawIcon?;
+    /** The Reels overlay, loaded only when this chrome is Instagram: no other presentation carries it. */
+    private reels?;
+    private reelsLoading?;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Settles once Instagram's overlay is drawn too, so a capture never takes the frame without it. */
+    protected getUpdateComplete(): Promise<boolean>;
+    protected updated(changed: Map<string, unknown>): void;
+    private icon;
+    private control;
+    private lights;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-app-chrome': DsAppChrome;
+    }
+}
+//# sourceMappingURL=app-chrome.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-chrome.d.ts","sourceRoot":"","sources":["../../DS1/5-visual-kit/app-chrome.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvF,OAAO,mBAAmB,CAAC;AAI3B,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,CAAC;AACrI,uGAAuG;AACvG,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMf;IACM,QAAQ,EAAC,MAAM,CAAC;IAAS,OAAO,EAAC,MAAM,CAAC;IAAS,MAAM,EAAC,MAAM,CAAC;IAAS,QAAQ,EAAC,OAAO,CAAC;IAAS,KAAK,EAAC,MAAM,CAAC;IAAS,QAAQ,EAAC,MAAM,CAAC;IAAS,OAAO,EAAC,MAAM,CAAC;IAAS,MAAM,EAAC,MAAM,CAAC;IAAS,QAAQ,EAAC,MAAM,CAAC;IAChN,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;;IAElC,MAAM,CAAC,MAAM,4BAwC+C;IAC5D,OAAO,CAAC,QAAQ,CAAC,CAA+C;IAChE,sGAAsG;IACtG,OAAO,CAAC,KAAK,CAAC,CAA+B;IAC7C,OAAO,CAAC,YAAY,CAAC,CAAgB;IACrC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAWlD,oGAAoG;cACpF,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC;IAMrD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAa/C,OAAO,CAAC,IAAI;IAGZ,OAAO,CAAC,OAAO;IAGf,OAAO,CAAC,MAAM;IACd,MAAM;CAUP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,eAAe,EAAE,WAAW,CAAC;KAAE;CAAE"}

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

@@ -0,0 +1,119 @@
+import { LitElement, adoptStyles, css, html, nothing } from 'lit';
+import { instagramFrame, instagramFrameStyles } from './instagram-frame';
+import { define } from '../0-face/define';
+import '../2-core/ds-icon';
+import { browserStyles } from './browser-styles';
+import { mobileChromeStyles, cellularSignal } from './mobile-chrome';
+/** Platform presentation chrome. Controls emit requests; they never navigate or close the host app. */
+export class DsAppChrome extends LitElement {
+    constructor() { super(); this.username = 'account'; this.caption = ''; this.avatar = ''; this.verified = false; this.likes = ''; this.comments = ''; this.reposts = ''; this.shares = ''; this.progress = 0; this.kind = 'macos'; this.appearance = 'light'; this.time = '00:01'; this.address = ''; this.label = 'Application'; this.href = ''; this.assetBase = ''; this.interactive = false; this.favicon = ''; this.network = '4G'; this.battery = 80; this.dualSim = false; this.backAvailable = true; this.forwardAvailable = false; }
+    willUpdate(changed) {
+        if (!changed.has('kind') || this.kind !== 'instagram' || this.reelsLoading)
+            return;
+        this.reelsLoading = import('./instagram').then((reels) => {
+            adoptStyles(this.renderRoot, [...DsAppChrome.elementStyles, reels.instagramStyles]);
+            this.reels = reels;
+            this.requestUpdate();
+        }).catch(() => {
+            this.reelsLoading = undefined;
+            this.dispatchEvent(new CustomEvent('chrome-error', { detail: { kind: this.kind }, bubbles: true, composed: true }));
+        });
+    }
+    /** Settles once Instagram's overlay is drawn too, so a capture never takes the frame without it. */
+    async getUpdateComplete() {
+        const settled = await super.getUpdateComplete();
+        if (this.kind !== 'instagram' || this.reels || !this.reelsLoading)
+            return settled;
+        await this.reelsLoading;
+        return super.getUpdateComplete();
+    }
+    updated(changed) {
+        if (!changed.has('kind') && !changed.has('interactive'))
+            return;
+        if (this.kind === 'instagram')
+            return;
+        if (this.kind === 'ios' || this.kind === 'ipados')
+            return;
+        if ((this.kind === 'macos' || this.kind === 'macos-compact') && !this.interactive)
+            return;
+        void import('./browser-icons').then(async (icons) => {
+            await icons.loadBrowserIcons(this.kind);
+            this.drawIcon = icons.browserIcon;
+            this.requestUpdate();
+        }).catch(() => {
+            this.dispatchEvent(new CustomEvent('chrome-error', { detail: { kind: this.kind }, bubbles: true, composed: true }));
+        });
+    }
+    icon(name) {
+        return this.drawIcon?.(name, this.kind) ?? nothing;
+    }
+    control(action, label, available = true) {
+        return html `<button type="button" aria-label=${label} class=${available ? '' : 'unavailable'} ?disabled=${!this.interactive || !available} tabindex=${this.interactive && available ? 0 : -1} @click=${() => this.dispatchEvent(new CustomEvent('chrome-action', { detail: { action }, bubbles: true, composed: true }))}>${this.icon(action)}</button>`;
+    }
+    lights() { return html `<div class="lights">${this.control('close', 'Close window')}${this.control('minimize', 'Minimize window')}${this.control('zoom', 'Zoom window')}</div>`; }
+    render() {
+        if (this.kind === 'instagram')
+            return !this.reels ? instagramFrame() : this.reels.instagram({ ...this, interactive: this.interactive, username: this.username, caption: this.caption, avatar: this.avatar, verified: this.verified, likes: this.likes, comments: this.comments, reposts: this.reposts, shares: this.shares, progress: this.progress, action: (action) => this.dispatchEvent(new CustomEvent('chrome-action', { detail: { action }, bubbles: true, composed: true })) });
+        if (this.kind === 'ios' || this.kind === 'ipados')
+            return html `<div class="status"><span class="clock">${this.time}</span><span class="island-space"></span><span class="levels">${this.dualSim ? cellularSignal(true) : html `<span class="cellular" role="img" aria-label="Full signal"><i></i><i></i><i></i><i></i></span>`}${this.network === 'wifi' ? (this.assetBase ? html `<img class="wifi" alt="Wi-Fi" src=${this.assetBase + 'status-wifi.svg'}>` : html `<ds-icon type="wifi" class="wifi" aria-label="Wi-Fi" style="--ds-icon-size:19px"></ds-icon>`) : html `<span class="network">${this.network}</span>`}${this.assetBase ? html `<span class="battery-art" role="img" aria-label=${`Battery ${Math.min(100, Math.max(0, this.battery))}%`}><img class="battery" alt="" src=${this.assetBase + 'status-battery.svg'}><img class="battery charge-art" alt="" src=${this.assetBase + 'status-battery.svg'} style=${`clip-path:inset(0 ${100 - Math.min(100, Math.max(0, this.battery))}% 0 0)`}></span>` : html `<span class="battery-meter" role="img" aria-label=${`Battery ${Math.min(100, Math.max(0, this.battery))}%`} style=${`--battery-charge:${Math.min(100, Math.max(0, this.battery))}%`}><span class="charge"></span></span>`}</span></div>`;
+        if (this.kind === 'macos-compact')
+            return html `<div class="compact">${this.lights()}${this.href ? html `<a class="title" href=${this.href} target="_blank" rel="noopener noreferrer" title=${this.href}>${this.address || this.label}</a>` : html `<span class="title">${this.address || this.label}</span>`}</div>`;
+        if (this.kind === 'macos')
+            return html `<div class="native">${this.lights()}<span class="title">${this.label}</span><slot name="controls"></slot></div>`;
+        if (this.kind === 'safari-ios')
+            return html `<div class="mobile">${this.control('back', 'Back', this.backAvailable)}<div class="address">${this.control('page-menu', 'Page menu')}<span>${this.address}</span>${this.control('reload', 'Reload')}</div>${this.control('tabs', 'Tabs')}</div>`;
+        if (this.kind === 'safari')
+            return html `<div class="toolbar safari-toolbar">${this.lights()}<div class="safari-group sidebar-group">${this.control('sidebar', 'Sidebar')}${this.control('chevron-down', 'Tab groups')}</div><div class="safari-group history">${this.control('back', 'Back', this.backAvailable)}${this.control('forward', 'Forward', this.forwardAvailable)}</div><div class="address safari-address">${this.favicon ? html `<img class="favicon" src=${this.favicon} alt="">` : nothing}<span>${this.address}</span>${this.control('page-menu', 'Page menu')}</div><div class="safari-group safari-actions">${this.control('share', 'Share')}${this.control('plus', 'New tab')}${this.control('tabs', 'Tab overview')}</div></div>`;
+        const edge = this.kind === 'edge';
+        return html `<div class="tabs">${this.lights()}${this.control('chevron-down', 'Search tabs')}<div class="tab">${this.favicon ? html `<img class="favicon" src=${this.favicon} alt="">` : this.icon('globe')}<span>${this.label}</span>${this.control('close-tab', 'Close tab')}</div>${this.control('plus', 'New tab')}</div><div class="toolbar browser-toolbar">${this.control('back', 'Back', this.backAvailable)}${!edge || this.forwardAvailable ? this.control('forward', 'Forward', this.forwardAvailable) : nothing}${this.control('reload', 'Reload')}<div class="address">${this.control(edge ? 'lock' : 'tune', 'Site information')}<span>${this.address}</span>${edge ? this.control('reading', 'Reading mode') : nothing}${this.control('star', edge ? 'Add to favorites' : 'Bookmark this tab')}</div>${this.control(edge ? 'favorites' : 'extensions', edge ? 'Favorites' : 'Extensions')}${this.control('profile', 'Profile')}${this.control(edge ? 'more-horizontal' : 'more', 'Settings and more')}</div>`;
+    }
+}
+DsAppChrome.properties = {
+    username: {}, caption: {}, avatar: {}, verified: { type: Boolean }, likes: {}, comments: {}, reposts: {}, shares: {}, progress: { type: Number },
+    kind: { reflect: true }, appearance: { reflect: true }, time: {}, address: {}, label: {}, href: {},
+    network: {}, battery: { type: Number }, dualSim: { type: Boolean, attribute: 'dual-sim' },
+    favicon: {}, backAvailable: { type: Boolean, attribute: 'back-available' }, forwardAvailable: { type: Boolean, attribute: 'forward-available' },
+    assetBase: { attribute: 'asset-base' }, interactive: { type: Boolean, reflect: true },
+};
+DsAppChrome.styles = [css `
+    :host { display:block; color:#202124; background:#f4f4f4; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:13px; --chrome-line:#d6d6d6; --chrome-field:#fff; --chrome-selected:#fff; }
+    :host([appearance=dark]) { color:#efefef; background:#292a2d; --chrome-line:#444; --chrome-field:#202124; --chrome-selected:#35363a; }
+    * { box-sizing:border-box; } button { font:inherit; color:inherit; border:0; background:none; padding:0; display:grid; place-items:center; width:28px; height:28px; border-radius:5px; }
+    button:focus-visible { outline:2px solid #1677ff; outline-offset:1px; } button:enabled:hover { background:color-mix(in srgb,currentColor 10%,transparent); }
+    button:disabled { opacity:1; } svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
+    .lights { display:flex; align-items:center; gap:8px; width:72px; flex:none; padding-left:12px; }
+    .lights button { width:12px; height:12px; border:1px solid #0002; border-radius:50%; background:#ff5f57; }
+    .lights button:nth-child(2) { background:#febc2e; } .lights button:nth-child(3) { background:#28c840; }
+    .lights svg { --chrome-icon-size:8px; opacity:0; width:8px; height:8px; stroke:#333; } :host([interactive]) .lights:hover svg { opacity:1; }
+    .compact { --compact-scale:var(--sf,1); height:calc(30px * var(--compact-scale)); position:relative; display:flex; justify-content:center; align-items:center; border-bottom:1px solid var(--chrome-line); background:var(--ds-window-chrome-background,#f4f4f4); color:var(--ds-window-chrome-color,#26251e); font:calc(14px * var(--compact-scale))/calc(20px * var(--compact-scale)) var(--ds-typeface-regular,system-ui,sans-serif); }
+    .compact .lights { position:absolute; left:calc(8px * var(--compact-scale)); top:0; width:auto; height:100%; padding:0; gap:calc(6px * var(--compact-scale)); }
+    .compact .lights button { flex:none; width:calc(10px * var(--compact-scale)); height:calc(10px * var(--compact-scale)); border:0; background:color-mix(in srgb,currentColor 18%,transparent); }
+    .compact .title { flex:initial; max-width:calc(100% - 120px * var(--compact-scale)); padding:0 calc(4px * var(--compact-scale)); font-weight:400; color:inherit; text-decoration:none; border-radius:calc(4px * var(--compact-scale)); }
+    .compact a.title:hover { background:color-mix(in srgb,currentColor 8%,transparent); }
+    .compact a.title:focus-visible { outline:2px solid currentColor; outline-offset:1px; }
+    :host([appearance=dark]) .compact { --ds-window-chrome-background:#292a2d; --ds-window-chrome-color:#efefef; }
+    .native { height:38px; display:flex; align-items:center; border-bottom:1px solid var(--chrome-line); }
+    .title { text-align:center; flex:1; padding-right:72px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:600; }
+    .tabs { display:flex; align-items:center; height:38px; gap:8px; padding-right:8px; }
+    .tab { align-self:end; height:30px; min-width:100px; width:220px; background:var(--chrome-selected); border-radius:10px 10px 0 0; display:flex; align-items:center; padding:0 12px; gap:8px; }
+    .tab span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .toolbar { min-height:42px; display:flex; align-items:center; gap:6px; padding:6px 10px; background:var(--chrome-selected); border-bottom:1px solid var(--chrome-line); }
+    .address { min-width:0; flex:1; height:28px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--chrome-field); border:1px solid var(--chrome-line); border-radius:7px; }
+    .address span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .status { height:62px; padding-top:3px; display:flex; align-items:center; justify-content:center; font-size:17.67px; font-weight:590; line-height:22px; background:var(--chrome-screen,#fff); color:var(--chrome-ink,#000); }
+    :host([appearance=dark]) .status { background:var(--chrome-screen,#111); color:var(--chrome-ink,#fff); }
+    .clock { flex:1; text-align:center; padding-left:10px; font-variant-numeric:tabular-nums; }
+    .island-space { width:125px; flex:none; }
+    .levels { flex:1; display:flex; justify-content:center; align-items:center; gap:8px; padding-right:10px; }
+    .battery-art { position:relative; display:block; width:29.333px; height:13.667px; } .battery-art img { display:block; opacity:.3; } .battery-art .charge-art { position:absolute; inset:0; opacity:1; }
+    .cellular { display:flex; align-items:end; gap:2.333px; height:15px; } .cellular i { display:block; width:3.333px; border-radius:4px; background:currentColor; }
+    .cellular i:nth-child(1){height:6.333px}.cellular i:nth-child(2){height:8.67px}.cellular i:nth-child(3){height:11px}.cellular i:nth-child(4){height:13.667px}
+    .battery-fallback { width:27px;height:13px;border:1px solid currentColor;border-radius:3px;padding:2px;position:relative; }.battery-fallback::before {content:"";display:block;height:100%;background:currentColor;border-radius:1px}.battery-fallback::after {content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:currentColor;border-radius:0 1px 1px 0}.wifi { width:19.333px; height:14.333px; }.battery { width:29.333px; height:13.667px; }
+    :host([appearance=dark]) .levels img { filter:invert(1); }
+    :host([kind=ipados]) .status { height:32px; font-size:13px; justify-content:space-between; padding:0 26px; }
+    :host([kind=ipados]) .clock { flex:none; padding:0; } :host([kind=ipados]) .island-space { display:none; } :host([kind=ipados]) .levels { flex:none; padding:0; }
+    .mobile { padding:8px 16px; background:var(--chrome-selected); }
+    .mobile .address { height:44px; border-radius:22px; }
+    .mobile-actions { display:flex; justify-content:space-between; margin-top:8px; }
+  `, browserStyles, mobileChromeStyles, instagramFrameStyles];
+define('ds-app-chrome', DsAppChrome);

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

@@ -0,0 +1,30 @@
+/** 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 declare const BEZELS: readonly Bezel[];
+export declare function bezelById(id: string): Bezel | undefined;
+export declare function screenGeometry(bezel: Bezel, width: number): {
+    scale: number;
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+};
+//# sourceMappingURL=bezels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bezels.d.ts","sourceRoot":"","sources":["../../DS1/5-visual-kit/bezels.ts"],"names":[],"mappings":"AAAA,8FAA8F;AAC9F,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IACzD,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAChF,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACjF;AACD,eAAO,MAAM,MAAM,EAAE,SAAS,KAAK,EA6XlC,CAAC;AACF,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAAkD;AAC1G,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM;;;;;;EAIzD"}

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

@@ -0,0 +1,388 @@
+export const BEZELS = [
+    {
+        "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) { return BEZELS.find(bezel => bezel.id === id); }
+export function screenGeometry(bezel, width) {
+    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/dist/5-visual-kit/browser-icons.d.ts

@@ -0,0 +1,5 @@
+/** Native browser glyphs are unnecessary for Apple windows and device status bars. */
+export declare function loadBrowserIcons(kind: string): Promise<void>;
+/** Presentation glyphs drawn in each browser's native icon vocabulary, not DS1 UI icons. */
+export declare function browserIcon(name: string, kind: string): import("lit").TemplateResult<2>;
+//# sourceMappingURL=browser-icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"browser-icons.d.ts","sourceRoot":"","sources":["../../DS1/5-visual-kit/browser-icons.ts"],"names":[],"mappings":"AAMA,sFAAsF;AACtF,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAM5D;AAED,4FAA4F;AAC5F,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mCA8BrD"}