@social.io/catalog 1.3.0 → 2.0.0

package/dist_ts_web/elements/sio-waveform.js

@@ -0,0 +1,304 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, html, property, customElement, css, } from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+/**
+ * sio-waveform — v7 voicemail / voice-message player.
+ *
+ * A surface card with a round play/pause control, a deterministic bar-chart
+ * waveform (played bars in the channel color, the rest in systemGray @ 45%
+ * per the v7 spec) and tabular elapsed / -remaining counters.
+ *
+ * Clicking the waveform dispatches `seek` ({ progress }); the play control
+ * toggles and dispatches `play` / `pause` ({ progress }).
+ */
+let SioWaveform = (() => {
+    let _classDecorators = [customElement('sio-waveform')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _bars_decorators;
+    let _bars_initializers = [];
+    let _bars_extraInitializers = [];
+    let _progress_decorators;
+    let _progress_initializers = [];
+    let _progress_extraInitializers = [];
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    let _elapsed_decorators;
+    let _elapsed_initializers = [];
+    let _elapsed_extraInitializers = [];
+    let _remaining_decorators;
+    let _remaining_initializers = [];
+    let _remaining_extraInitializers = [];
+    let _playing_decorators;
+    let _playing_initializers = [];
+    let _playing_extraInitializers = [];
+    var SioWaveform = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _bars_decorators = [property({ type: Number })];
+            _progress_decorators = [property({ type: Number })];
+            _color_decorators = [property({ type: String })];
+            _elapsed_decorators = [property({ type: String })];
+            _remaining_decorators = [property({ type: String })];
+            _playing_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _bars_decorators, { kind: "accessor", name: "bars", static: false, private: false, access: { has: obj => "bars" in obj, get: obj => obj.bars, set: (obj, value) => { obj.bars = value; } }, metadata: _metadata }, _bars_initializers, _bars_extraInitializers);
+            __esDecorate(this, null, _progress_decorators, { kind: "accessor", name: "progress", static: false, private: false, access: { has: obj => "progress" in obj, get: obj => obj.progress, set: (obj, value) => { obj.progress = value; } }, metadata: _metadata }, _progress_initializers, _progress_extraInitializers);
+            __esDecorate(this, null, _color_decorators, { kind: "accessor", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
+            __esDecorate(this, null, _elapsed_decorators, { kind: "accessor", name: "elapsed", static: false, private: false, access: { has: obj => "elapsed" in obj, get: obj => obj.elapsed, set: (obj, value) => { obj.elapsed = value; } }, metadata: _metadata }, _elapsed_initializers, _elapsed_extraInitializers);
+            __esDecorate(this, null, _remaining_decorators, { kind: "accessor", name: "remaining", static: false, private: false, access: { has: obj => "remaining" in obj, get: obj => obj.remaining, set: (obj, value) => { obj.remaining = value; } }, metadata: _metadata }, _remaining_initializers, _remaining_extraInitializers);
+            __esDecorate(this, null, _playing_decorators, { kind: "accessor", name: "playing", static: false, private: false, access: { has: obj => "playing" in obj, get: obj => obj.playing, set: (obj, value) => { obj.playing = value; } }, metadata: _metadata }, _playing_initializers, _playing_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioWaveform = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div
+      style="display: flex; flex-direction: column; gap: 20px; max-width: 420px; padding: 20px; background: var(--sio-bg); border-radius: 18px; font-family: var(--sio-font-sf);"
+    >
+      <div>
+        <div style="font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: var(--sio-label);">
+          Maren Vogel
+        </div>
+        <div style="font-size: 13px; color: var(--sio-label-3); margin-top: 2px;">
+          Today 09:41 · 1:47 · Voicemail
+        </div>
+      </div>
+      <sio-waveform progress="0.28" elapsed="0:28" remaining="-1:19"></sio-waveform>
+      <sio-waveform
+        progress="0.62"
+        playing
+        elapsed="1:06"
+        remaining="-0:41"
+        color="var(--sio-ch-chats)"
+        bars="64"
+      ></sio-waveform>
+      <sio-waveform progress="0" elapsed="0:00" remaining="-1:47" color="var(--sio-tint)"></sio-waveform>
+    </div>
+  `;
+        #bars_accessor_storage = __runInitializers(this, _bars_initializers, 50);
+        /** Number of waveform bars (the v7 voicemail player draws 50). */
+        get bars() { return this.#bars_accessor_storage; }
+        set bars(value) { this.#bars_accessor_storage = value; }
+        #progress_accessor_storage = (__runInitializers(this, _bars_extraInitializers), __runInitializers(this, _progress_initializers, 0));
+        /** Playback position, 0–1. Played bars take the channel color. */
+        get progress() { return this.#progress_accessor_storage; }
+        set progress(value) { this.#progress_accessor_storage = value; }
+        #color_accessor_storage = (__runInitializers(this, _progress_extraInitializers), __runInitializers(this, _color_initializers, 'var(--sio-ch-calls)'));
+        /** Accent for played bars + play control. Any CSS color, defaults to the calls channel. */
+        get color() { return this.#color_accessor_storage; }
+        set color(value) { this.#color_accessor_storage = value; }
+        #elapsed_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _elapsed_initializers, '0:00'));
+        /** Elapsed counter, e.g. "0:28". */
+        get elapsed() { return this.#elapsed_accessor_storage; }
+        set elapsed(value) { this.#elapsed_accessor_storage = value; }
+        #remaining_accessor_storage = (__runInitializers(this, _elapsed_extraInitializers), __runInitializers(this, _remaining_initializers, '-0:00'));
+        /** Remaining counter, e.g. "-1:19". */
+        get remaining() { return this.#remaining_accessor_storage; }
+        set remaining(value) { this.#remaining_accessor_storage = value; }
+        #playing_accessor_storage = (__runInitializers(this, _remaining_extraInitializers), __runInitializers(this, _playing_initializers, false));
+        get playing() { return this.#playing_accessor_storage; }
+        set playing(value) { this.#playing_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: block;
+
+        /* systemGray (#8E8E93) @ 45% — unplayed bars per the v7 spec */
+        --sio-waveform-rest: color-mix(in oklab, var(--sio-bucket-later) 45%, transparent);
+      }
+
+      .player {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 14px 16px;
+        background: var(--sio-surface);
+        border: var(--sio-hairline) solid var(--sio-separator);
+        border-radius: 16px;
+      }
+
+      .playButton {
+        width: 44px;
+        height: 44px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        border-radius: 22px;
+        padding: 0;
+        cursor: pointer;
+        font: inherit;
+        transition: transform 80ms ease, filter 120ms ease;
+      }
+      .playButton:hover {
+        filter: brightness(1.06);
+      }
+      .playButton:active {
+        transform: scale(0.94);
+      }
+      .playButton:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-tint) 60%, transparent);
+        outline-offset: 2px;
+      }
+      .playButton svg {
+        display: block;
+      }
+
+      .track {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .wave {
+        display: block;
+        width: 100%;
+        height: 28px;
+        cursor: pointer;
+      }
+
+      .counters {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 2px;
+        font-size: 11px;
+        line-height: 13px;
+        color: var(--sio-label-3);
+        font-variant-numeric: tabular-nums;
+      }
+    `,
+        ];
+        render() {
+            const barCount = Math.max(1, Math.floor(this.bars));
+            const clamped = Math.min(1, Math.max(0, this.progress));
+            const playedCount = Math.round(barCount * clamped);
+            const barTemplates = [];
+            for (let i = 0; i < barCount; i++) {
+                // deterministic pseudo-random heights — transcribed from the v7 prototype
+                const h = 4 + Math.abs(Math.sin(i * 0.55) * 11) + Math.abs(Math.cos(i * 1.3) * 6);
+                barTemplates.push(html `
+        <rect
+          x=${i * 4}
+          y=${14 - h / 2}
+          width="2.2"
+          height=${h}
+          rx="1.1"
+          fill=${i < playedCount ? this.color : 'var(--sio-waveform-rest)'}
+        ></rect>
+      `);
+            }
+            return html `
+      <div class="player" part="player">
+        <button
+          class="playButton"
+          style="background: ${this.color};"
+          aria-label=${this.playing ? 'Pause' : 'Play'}
+          @click=${this.handlePlayToggle}
+        >
+          ${this.playing
+                ? html `
+                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
+                  <rect x="6" y="4.5" width="4.4" height="15" rx="1.6" fill="var(--sio-surface)"></rect>
+                  <rect x="13.6" y="4.5" width="4.4" height="15" rx="1.6" fill="var(--sio-surface)"></rect>
+                </svg>
+              `
+                : html `
+                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M7 5l12 7-12 7V5z" fill="var(--sio-surface)"></path>
+                </svg>
+              `}
+        </button>
+        <div class="track">
+          <svg
+            class="wave"
+            viewBox="0 0 ${barCount * 4} 28"
+            preserveAspectRatio="none"
+            role="slider"
+            aria-label="Playback position"
+            aria-valuemin="0"
+            aria-valuemax="1"
+            aria-valuenow=${clamped.toFixed(2)}
+            @click=${this.handleSeek}
+          >
+            ${barTemplates}
+          </svg>
+          <div class="counters">
+            <span>${this.elapsed}</span>
+            <span>${this.remaining}</span>
+          </div>
+        </div>
+      </div>
+    `;
+        }
+        handlePlayToggle() {
+            this.playing = !this.playing;
+            this.dispatchEvent(new CustomEvent(this.playing ? 'play' : 'pause', {
+                detail: { progress: Math.min(1, Math.max(0, this.progress)) },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        handleSeek(event) {
+            const wave = event.currentTarget;
+            const rect = wave.getBoundingClientRect();
+            if (!rect.width) {
+                return;
+            }
+            const progress = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+            this.progress = progress;
+            this.dispatchEvent(new CustomEvent('seek', {
+                detail: { progress },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _playing_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioWaveform = _classThis;
+})();
+export { SioWaveform };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLXdhdmVmb3JtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3Npby13YXZlZm9ybS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxJQUFJLEVBQ0osUUFBUSxFQUNSLGFBQWEsRUFDYixHQUFHLEdBRUosTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFRL0M7Ozs7Ozs7OztHQVNHO0lBRVUsV0FBVzs0QkFEdkIsYUFBYSxDQUFDLGNBQWMsQ0FBQzs7OztzQkFDRyxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OzJCQUFuQixTQUFRLFdBQVc7Ozs7Z0NBMkJ6QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7b0NBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztpQ0FJMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO21DQUkxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7cUNBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzttQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUM7WUFsQjNDLGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQWM7WUFJbEMsNktBQWdCLFFBQVEsNkJBQVIsUUFBUSwyRkFBYTtZQUlyQyxvS0FBZ0IsS0FBSyw2QkFBTCxLQUFLLHFGQUFpQztZQUl0RCwwS0FBZ0IsT0FBTyw2QkFBUCxPQUFPLHlGQUFrQjtZQUl6QyxnTEFBZ0IsU0FBUyw2QkFBVCxTQUFTLDZGQUFtQjtZQUc1QywwS0FBZ0IsT0FBTyw2QkFB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

package/dist_ts_web/elements/tokens.d.ts

@@ -0,0 +1,70 @@
+export declare const sioBaseStyles: import("@design.estate/dees-element").CSSResult;
+export declare const sioElementStyles: import("@design.estate/dees-element").CSSResult[];
+/** Free-floating liquid-glass surface (system.css `.glass`). */
+export declare const sioGlass: import("@design.estate/dees-element").CSSResult;
+/** Toolbar / header glass with hairline bottom edge (socialio.css `.sio-toolbar-glass`). */
+export declare const sioToolbarGlass: import("@design.estate/dees-element").CSSResult;
+/** Pill-shaped glass (segmented controls, floating pills, tab bars). */
+export declare const sioPillGlass: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeLargeTitle: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeTitle1: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeTitle2: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeTitle3: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeHeadline: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeBody: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeCallout: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeSubheadline: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeFootnote: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeCaption1: import("@design.estate/dees-element").CSSResult;
+export declare const sioTypeCaption2: import("@design.estate/dees-element").CSSResult;
+/** Monospaced type (message-ids, kbd hints, code). */
+export declare const sioTypeMono: import("@design.estate/dees-element").CSSResult;
+/** Apply to any run of digits (counts, times, sizes) per the v7 spec. */
+export declare const sioTabularNums: import("@design.estate/dees-element").CSSResult;
+export declare const sioTheme: {
+    bg: string;
+    bgGrouped: string;
+    surface: string;
+    surface2: string;
+    label: string;
+    label2: string;
+    label3: string;
+    label4: string;
+    separator: string;
+    separatorOpaque: string;
+    tint: string;
+    tintHover: string;
+    tintSoft: string;
+    chMail: string;
+    chChats: string;
+    chCalls: string;
+    chLetters: string;
+    laneFeed: string;
+    lanePaper: string;
+    lanePeople: string;
+    bucketNow: string;
+    bucketToday: string;
+    bucketLater: string;
+    bucketDone: string;
+    green: string;
+    red: string;
+    yellow: string;
+    orange: string;
+    blue: string;
+    rowComfortable: string;
+    rowCozy: string;
+    rowCompact: string;
+    radiusXs: string;
+    radiusSm: string;
+    radius: string;
+    radiusMd: string;
+    radiusLg: string;
+    radiusPill: string;
+    hairline: string;
+    glassBg: string;
+    glassBorder: string;
+    toolbarGlassBg: string;
+    fontSf: string;
+    fontMono: string;
+    fontRounded: string;
+};

package/dist_ts_web/elements/tokens.js

@@ -0,0 +1,277 @@
+import { css, cssManager } from '@design.estate/dees-element';
+/*
+ * social.io v7 tokens — Apple-native design system.
+ *
+ * Light = iOS systemGray6 canvas (#F2F2F7) with white surfaces;
+ * dark = true black with elevated #1C1C1E surfaces.
+ * System-blue tint (brightened to #409CFF in dark), SF type ramp,
+ * 0.5px hairlines, liquid-glass surfaces (blur 28px saturate 180%).
+ *
+ * Components take every PALETTE color (tint, channels, lanes, buckets,
+ * surfaces, labels) from these custom props; genuinely local material
+ * values (scrims, paper textures, control knobs) may live in the component.
+ * Tints derive via color-mix(in oklab, var(--sio-...) N%, transparent).
+ *
+ * Palettes:
+ *   channels  mail #0A84FF · chats #30D158 · calls #FF9F0A · letters #A2845E
+ *   lanes     feed #0A84FF · paper #FF9F0A · people #30D158
+ *   buckets   now #FF453A · today #FF9F0A · later #8E8E93 · done #30D158
+ */
+// ---------------------------------------------------------------------------
+// base custom props (light/dark via cssManager.bdTheme)
+// ---------------------------------------------------------------------------
+export const sioBaseStyles = css `
+  :host {
+    /* semantic surfaces */
+    --sio-bg: ${cssManager.bdTheme('#F2F2F7', '#000000')};
+    --sio-bg-grouped: ${cssManager.bdTheme('#F2F2F7', '#000000')};
+    --sio-surface: ${cssManager.bdTheme('#FFFFFF', '#1C1C1E')};
+    --sio-surface-2: ${cssManager.bdTheme('rgba(118,118,128,0.08)', 'rgba(118,118,128,0.24)')};
+
+    /* labels — 4 levels per iOS HIG */
+    --sio-label: ${cssManager.bdTheme('#000000', '#FFFFFF')};
+    --sio-label-2: ${cssManager.bdTheme('rgba(60,60,67,0.85)', 'rgba(235,235,245,0.85)')};
+    --sio-label-3: ${cssManager.bdTheme('rgba(60,60,67,0.60)', 'rgba(235,235,245,0.60)')};
+    --sio-label-4: ${cssManager.bdTheme('rgba(60,60,67,0.30)', 'rgba(235,235,245,0.30)')};
+
+    /* separators */
+    --sio-separator: ${cssManager.bdTheme('rgba(60,60,67,0.12)', 'rgba(84,84,88,0.65)')};
+    --sio-separator-opaque: ${cssManager.bdTheme('#C6C6C8', '#38383A')};
+
+    /* tint — system blue, brightened in dark */
+    --sio-tint: ${cssManager.bdTheme('#0A84FF', '#409CFF')};
+    --sio-tint-hover: ${cssManager.bdTheme('#0071E3', '#64B2FF')};
+    --sio-tint-soft: ${cssManager.bdTheme('rgba(10,132,255,0.10)', 'rgba(10,132,255,0.18)')};
+    /* foreground on solid tint/channel fills — white in both themes */
+    --sio-on-accent: #ffffff;
+
+    /* channel palette (stable across themes) */
+    --sio-ch-mail: #0A84FF;
+    --sio-ch-chats: #30D158;
+    --sio-ch-calls: #FF9F0A;
+    --sio-ch-letters: #A2845E;
+
+    /* lane palette — split inbox */
+    --sio-lane-feed: #0A84FF;
+    --sio-lane-paper: #FF9F0A;
+    --sio-lane-people: #30D158;
+
+    /* bucket palette — unified feed triage */
+    --sio-bucket-now: #FF453A;
+    --sio-bucket-today: #FF9F0A;
+    --sio-bucket-later: #8E8E93;
+    --sio-bucket-done: #30D158;
+
+    /* system accents */
+    --sio-green: #30D158;
+    --sio-red: #FF453A;
+    --sio-yellow: #FFD60A;
+    --sio-orange: #FF9F0A;
+    --sio-blue: #0A84FF;
+
+    /* density — list row heights */
+    --sio-row-comfortable: 78px;
+    --sio-row-cozy: 62px;
+    --sio-row-compact: 48px;
+
+    /* radii ramp */
+    --sio-radius-xs: 4px;
+    --sio-radius-sm: 6px;
+    --sio-radius: 10px;
+    --sio-radius-md: 12px;
+    --sio-radius-lg: 14px;
+    --sio-radius-pill: 980px;
+
+    /* hairline convention */
+    --sio-hairline: 0.5px;
+
+    /* liquid glass */
+    --sio-glass-bg: ${cssManager.bdTheme('rgba(255,255,255,0.55)', 'rgba(40,40,42,0.6)')};
+    --sio-glass-border: ${cssManager.bdTheme('rgba(0,0,0,0.06)', 'rgba(255,255,255,0.08)')};
+    --sio-toolbar-glass-bg: ${cssManager.bdTheme('rgba(255,255,255,0.78)', 'rgba(28,28,30,0.78)')};
+
+    /* SF font stacks */
+    --sio-font-sf: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
+    --sio-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+    --sio-font-rounded: -apple-system-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
+
+    font-family: var(--sio-font-sf);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host([theme='dark']),
+  :host([dark]) {
+    --sio-bg: #000000;
+    --sio-bg-grouped: #000000;
+    --sio-surface: #1C1C1E;
+    --sio-surface-2: rgba(118,118,128,0.24);
+    --sio-label: #FFFFFF;
+    --sio-label-2: rgba(235,235,245,0.85);
+    --sio-label-3: rgba(235,235,245,0.60);
+    --sio-label-4: rgba(235,235,245,0.30);
+    --sio-separator: rgba(84,84,88,0.65);
+    --sio-separator-opaque: #38383A;
+    --sio-tint: #409CFF;
+    --sio-tint-hover: #64B2FF;
+    --sio-tint-soft: rgba(10,132,255,0.18);
+    --sio-glass-bg: rgba(40,40,42,0.6);
+    --sio-glass-border: rgba(255,255,255,0.08);
+    --sio-toolbar-glass-bg: rgba(28,28,30,0.78);
+  }
+`;
+export const sioElementStyles = [cssManager.defaultStyles, sioBaseStyles];
+// ---------------------------------------------------------------------------
+// glass recipes — interpolate inside a selector block:
+//   .toolbar { ${sioToolbarGlass} }
+// ---------------------------------------------------------------------------
+/** Free-floating liquid-glass surface (system.css `.glass`). */
+export const sioGlass = css `
+  background: var(--sio-glass-bg);
+  backdrop-filter: blur(28px) saturate(180%);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  border: var(--sio-hairline) solid var(--sio-glass-border);
+`;
+/** Toolbar / header glass with hairline bottom edge (socialio.css `.sio-toolbar-glass`). */
+export const sioToolbarGlass = css `
+  background: var(--sio-toolbar-glass-bg);
+  backdrop-filter: blur(28px) saturate(180%);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  border-bottom: var(--sio-hairline) solid var(--sio-separator);
+`;
+/** Pill-shaped glass (segmented controls, floating pills, tab bars). */
+export const sioPillGlass = css `
+  background: var(--sio-glass-bg);
+  backdrop-filter: blur(28px) saturate(180%);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  border: var(--sio-hairline) solid var(--sio-glass-border);
+  border-radius: var(--sio-radius-pill);
+`;
+// ---------------------------------------------------------------------------
+// SF type ramp — iOS HIG text styles as reusable fragments
+// ---------------------------------------------------------------------------
+export const sioTypeLargeTitle = css `
+  font-size: 34px;
+  line-height: 41px;
+  font-weight: 700;
+  letter-spacing: 0.37px;
+`;
+export const sioTypeTitle1 = css `
+  font-size: 28px;
+  line-height: 34px;
+  font-weight: 700;
+  letter-spacing: 0.36px;
+`;
+export const sioTypeTitle2 = css `
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 700;
+  letter-spacing: 0.35px;
+`;
+export const sioTypeTitle3 = css `
+  font-size: 20px;
+  line-height: 25px;
+  font-weight: 600;
+  letter-spacing: 0.38px;
+`;
+export const sioTypeHeadline = css `
+  font-size: 17px;
+  line-height: 22px;
+  font-weight: 600;
+  letter-spacing: -0.43px;
+`;
+export const sioTypeBody = css `
+  font-size: 17px;
+  line-height: 22px;
+  font-weight: 400;
+  letter-spacing: -0.43px;
+`;
+export const sioTypeCallout = css `
+  font-size: 16px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: -0.32px;
+`;
+export const sioTypeSubheadline = css `
+  font-size: 15px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: -0.24px;
+`;
+export const sioTypeFootnote = css `
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: -0.08px;
+`;
+export const sioTypeCaption1 = css `
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0;
+`;
+export const sioTypeCaption2 = css `
+  font-size: 11px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 0.07px;
+`;
+/** Monospaced type (message-ids, kbd hints, code). */
+export const sioTypeMono = css `
+  font-family: var(--sio-font-mono);
+`;
+/** Apply to any run of digits (counts, times, sizes) per the v7 spec. */
+export const sioTabularNums = css `
+  font-variant-numeric: tabular-nums;
+`;
+// ---------------------------------------------------------------------------
+// sioTheme — var() references for inline styles / style maps
+// ---------------------------------------------------------------------------
+export const sioTheme = {
+    bg: 'var(--sio-bg)',
+    bgGrouped: 'var(--sio-bg-grouped)',
+    surface: 'var(--sio-surface)',
+    surface2: 'var(--sio-surface-2)',
+    label: 'var(--sio-label)',
+    label2: 'var(--sio-label-2)',
+    label3: 'var(--sio-label-3)',
+    label4: 'var(--sio-label-4)',
+    separator: 'var(--sio-separator)',
+    separatorOpaque: 'var(--sio-separator-opaque)',
+    tint: 'var(--sio-tint)',
+    tintHover: 'var(--sio-tint-hover)',
+    tintSoft: 'var(--sio-tint-soft)',
+    chMail: 'var(--sio-ch-mail)',
+    chChats: 'var(--sio-ch-chats)',
+    chCalls: 'var(--sio-ch-calls)',
+    chLetters: 'var(--sio-ch-letters)',
+    laneFeed: 'var(--sio-lane-feed)',
+    lanePaper: 'var(--sio-lane-paper)',
+    lanePeople: 'var(--sio-lane-people)',
+    bucketNow: 'var(--sio-bucket-now)',
+    bucketToday: 'var(--sio-bucket-today)',
+    bucketLater: 'var(--sio-bucket-later)',
+    bucketDone: 'var(--sio-bucket-done)',
+    green: 'var(--sio-green)',
+    red: 'var(--sio-red)',
+    yellow: 'var(--sio-yellow)',
+    orange: 'var(--sio-orange)',
+    blue: 'var(--sio-blue)',
+    rowComfortable: 'var(--sio-row-comfortable)',
+    rowCozy: 'var(--sio-row-cozy)',
+    rowCompact: 'var(--sio-row-compact)',
+    radiusXs: 'var(--sio-radius-xs)',
+    radiusSm: 'var(--sio-radius-sm)',
+    radius: 'var(--sio-radius)',
+    radiusMd: 'var(--sio-radius-md)',
+    radiusLg: 'var(--sio-radius-lg)',
+    radiusPill: 'var(--sio-radius-pill)',
+    hairline: 'var(--sio-hairline)',
+    glassBg: 'var(--sio-glass-bg)',
+    glassBorder: 'var(--sio-glass-border)',
+    toolbarGlassBg: 'var(--sio-toolbar-glass-bg)',
+    fontSf: 'var(--sio-font-sf)',
+    fontMono: 'var(--sio-font-mono)',
+    fontRounded: 'var(--sio-font-rounded)',
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9rZW5zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3Rva2Vucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRTlEOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCRztBQUVILDhFQUE4RTtBQUM5RSx3REFBd0Q7QUFDeEQsOEVBQThFO0FBQzlFLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxHQUFHLENBQUE7OztnQkFHaEIsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDO3dCQUNoQyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7cUJBQzNDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzt1QkFDdEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSx3QkFBd0IsQ0FBQzs7O21CQUcxRSxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7cUJBQ3RDLFVBQVUsQ0FBQyxPQUFPLENBQUMscUJBQXFCLEVBQUUsd0JBQXdCLENBQUM7cUJBQ25FLFVBQVUsQ0FBQyxPQUFPLENBQUMscUJBQXFCLEVBQUUsd0JBQXdCLENBQUM7cUJBQ25FLFVBQVUsQ0FBQyxPQUFPLENBQUMscUJBQXFCLEVBQUUsd0JBQXdCLENBQUM7Ozt1QkFHakUsVUFBVSxDQUFDLE9BQU8sQ0FBQyxxQkFBcUIsRUFBRSxxQkFBcUIsQ0FBQzs4QkFDekQsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzs7a0JBR3BELFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzt3QkFDbEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDO3VCQUN6QyxVQUFVLENBQUMsT0FBTyxDQUFDLHVCQUF1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

package/dist_ts_web/pages/firstpage.d.ts

@@ -1 +1,6 @@
+/**
+ * firstpage — the embeddable widget moment: a host page with the
+ * sio-fab launcher (unread pill) anchored bottom-right. Clicking the
+ * fab opens the sio-combox singleton it owns.
+ */
 export declare const firstpage: () => import("@design.estate/dees-element").TemplateResult<1>;