@social.io/catalog 1.3.0 → 2.0.0

package/dist_ts_web/elements/sio-channel-rail.js

@@ -0,0 +1,275 @@
+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';
+import './sio-icon.js';
+/**
+ * The v7 channel set — All / Mail / Chats / Calls / Letters
+ * (prototype: SIO_CHANNELS in SocialIOData.jsx).
+ */
+const defaultChannels = [
+    { id: 'all', label: 'All', color: 'var(--sio-blue)', icon: 'grid-2x2' },
+    { id: 'mail', label: 'Mail', color: 'var(--sio-ch-mail)', icon: 'mail' },
+    { id: 'chats', label: 'Chats', color: 'var(--sio-ch-chats)', icon: 'message-circle' },
+    { id: 'calls', label: 'Calls', color: 'var(--sio-ch-calls)', icon: 'phone' },
+    { id: 'letters', label: 'Letters', color: 'var(--sio-ch-letters)', icon: 'file-text' },
+];
+/**
+ * sio-channel-rail — the 64px channel column at the very left of the
+ * desktop window (v7 prototype: SIOChannelRail in
+ * SocialIODesktopChannels.jsx).
+ *
+ * Each item stacks an 18px icon over a 10px label; the active item gets a
+ * rounded-10 chip and its channel color, and every item can carry an unread
+ * badge (channel-colored pill at top -5 / right -9 with a 2px ring cut out
+ * of the rail). Selecting a channel dispatches `channel-select` with
+ * `{ id, channel }` (bubbles, composed).
+ */
+let SioChannelRail = (() => {
+    let _classDecorators = [customElement('sio-channel-rail')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _channels_decorators;
+    let _channels_initializers = [];
+    let _channels_extraInitializers = [];
+    let _active_decorators;
+    let _active_initializers = [];
+    let _active_extraInitializers = [];
+    var SioChannelRail = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _channels_decorators = [property({ type: Array })];
+            _active_decorators = [property({ type: String })];
+            __esDecorate(this, null, _channels_decorators, { kind: "accessor", name: "channels", static: false, private: false, access: { has: obj => "channels" in obj, get: obj => obj.channels, set: (obj, value) => { obj.channels = value; } }, metadata: _metadata }, _channels_initializers, _channels_extraInitializers);
+            __esDecorate(this, null, _active_decorators, { kind: "accessor", name: "active", static: false, private: false, access: { has: obj => "active" in obj, get: obj => obj.active, set: (obj, value) => { obj.active = value; } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioChannelRail = _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; gap: 24px; font-family: var(--sio-font-sf);">
+      <!-- busy morning: unreads on every channel -->
+      <div
+        style="display: flex; height: 340px; border-radius: 12px; overflow: hidden; border: var(--sio-hairline) solid var(--sio-separator);"
+      >
+        <sio-channel-rail
+          active="mail"
+          .channels=${[
+            { id: 'all', label: 'All', color: 'var(--sio-blue)', icon: 'grid-2x2', unread: 3 },
+            { id: 'mail', label: 'Mail', color: 'var(--sio-ch-mail)', icon: 'mail', unread: 4 },
+            { id: 'chats', label: 'Chats', color: 'var(--sio-ch-chats)', icon: 'message-circle', unread: 7 },
+            { id: 'calls', label: 'Calls', color: 'var(--sio-ch-calls)', icon: 'phone', unread: 1 },
+            { id: 'letters', label: 'Letters', color: 'var(--sio-ch-letters)', icon: 'file-text', unread: 2 },
+        ]}
+        ></sio-channel-rail>
+        <div style="width: 210px; background: var(--sio-surface); padding: 14px 16px;">
+          <div style="font-size: 13px; font-weight: 600; color: var(--sio-label);">Inbox</div>
+          <div style="margin-top: 2px; font-size: 11px; color: var(--sio-label-3);">
+            4 unread · Feed 12 · Paper 4
+          </div>
+        </div>
+      </div>
+
+      <!-- Letters active, all clear -->
+      <div
+        style="display: flex; height: 340px; border-radius: 12px; overflow: hidden; border: var(--sio-hairline) solid var(--sio-separator);"
+      >
+        <sio-channel-rail active="letters"></sio-channel-rail>
+        <div style="width: 210px; background: var(--sio-surface); padding: 14px 16px;">
+          <div style="font-size: 13px; font-weight: 600; color: var(--sio-label);">Letters</div>
+          <div style="margin-top: 2px; font-size: 11px; color: var(--sio-label-3);">
+            Scan station online · 1 queued
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+        #channels_accessor_storage = __runInitializers(this, _channels_initializers, defaultChannels);
+        get channels() { return this.#channels_accessor_storage; }
+        set channels(value) { this.#channels_accessor_storage = value; }
+        #active_accessor_storage = (__runInitializers(this, _channels_extraInitializers), __runInitializers(this, _active_initializers, 'mail'));
+        get active() { return this.#active_accessor_storage; }
+        set active(value) { this.#active_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      /* Rail chrome: the systemGray fill composited over the canvas —
+         #E8E8EC light / #1C1C1F dark, matching the design's #EDEDEE/#17171A
+         from tokens alone. */
+      .rail {
+        width: 64px;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 2px;
+        padding: 10px 8px;
+        background-color: var(--sio-bg);
+        background-image: linear-gradient(var(--sio-surface-2), var(--sio-surface-2));
+        border-right: var(--sio-hairline) solid var(--sio-separator);
+      }
+
+      .item {
+        appearance: none;
+        border: none;
+        margin: 0;
+        position: relative;
+        padding: 8px 0;
+        border-radius: var(--sio-radius);
+        background: transparent;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 3px;
+        font-family: var(--sio-font-sf);
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: background 120ms ease, color 120ms ease;
+      }
+
+      .item.active {
+        background: color-mix(in oklab, var(--sio-label) 5%, transparent);
+      }
+
+      .item:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-tint) 40%, transparent);
+        outline-offset: -2px;
+      }
+
+      .glyph {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--sio-label-3);
+      }
+
+      .item.active .glyph {
+        color: var(--_channel-color, var(--sio-tint));
+      }
+
+      .badge {
+        position: absolute;
+        top: -5px;
+        right: -9px;
+        min-width: 15px;
+        height: 15px;
+        padding: 0 4px;
+        box-sizing: border-box;
+        border-radius: 8px;
+        background: var(--_channel-color, var(--sio-tint));
+        /* fixed foreground on the theme-stable channel palette */
+        color: #ffffff;
+        font-size: 10px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        /* 2px ring in the rail's own chrome tone */
+        box-shadow: 0 0 0 2px color-mix(in srgb, var(--sio-label) 8%, var(--sio-bg));
+      }
+
+      .label {
+        font-size: 10px;
+        font-weight: 500;
+        letter-spacing: 0.02px;
+        line-height: 1.25;
+        color: var(--sio-label-2);
+        white-space: nowrap;
+      }
+
+      .item.active .label {
+        font-weight: 600;
+        color: var(--sio-label);
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <nav class="rail" part="rail">
+        ${this.channels.map((channel) => html `
+            <button
+              type="button"
+              class="item ${channel.id === this.active ? 'active' : ''}"
+              style="--_channel-color: ${channel.color}"
+              aria-current=${channel.id === this.active ? 'page' : 'false'}
+              @click=${() => this.handleSelect(channel)}
+            >
+              <span class="glyph">
+                <sio-icon icon=${channel.icon} size="18" .strokeWidth=${1.7}></sio-icon>
+                ${channel.unread
+                ? html `<span class="badge">${channel.unread}</span>`
+                : html ``}
+              </span>
+              <span class="label">${channel.label}</span>
+            </button>
+          `)}
+      </nav>
+    `;
+        }
+        handleSelect(channel) {
+            if (channel.id === this.active) {
+                return;
+            }
+            this.active = channel.id;
+            this.dispatchEvent(new CustomEvent('channel-select', {
+                detail: { id: channel.id, channel },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _active_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioChannelRail = _classThis;
+})();
+export { SioChannelRail };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWNoYW5uZWwtcmFpbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zaW8tY2hhbm5lbC1yYWlsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsR0FFSixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGVBQWUsQ0FBQztBQXFCdkI7OztHQUdHO0FBQ0gsTUFBTSxlQUFlLEdBQTBCO0lBQzdDLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFO0lBQ3ZFLEVBQUUsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxvQkFBb0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFO0lBQ3hFLEVBQUUsRUFBRSxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxxQkFBcUIsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUU7SUFDckYsRUFBRSxFQUFFLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLHFCQUFxQixFQUFFLElBQUksRUFBRSxPQUFPLEVBQUU7SUFDNUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLHVCQUF1QixFQUFFLElBQUksRUFBRSxXQUFXLEVBQUU7Q0FDdkYsQ0FBQztBQUVGOzs7Ozs7Ozs7O0dBVUc7SUFFVSxjQUFjOzRCQUQxQixhQUFhLENBQUMsa0JBQWtCLENBQUM7Ozs7c0JBQ0UsV0FB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

package/dist_ts_web/elements/sio-chip.d.ts

@@ -0,0 +1,25 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+export type TSioChipVariant = 'channel' | 'lane' | 'status' | 'generic';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-chip': SioChip;
+    }
+}
+/**
+ * sio-chip — uppercase 11px/600 label on a 14% color-mix tint of the
+ * palette color (v7 `.sio-lane-chip` and the channel chips in list rows).
+ */
+export declare class SioChip extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    accessor variant: TSioChipVariant;
+    /** palette key within the variant, e.g. "mail", "feed", "now" */
+    accessor value: string;
+    /** custom CSS color for variant="generic"; defaults to the system tint */
+    accessor color: string;
+    /** optional leading glyph (sio-icon name) */
+    accessor icon: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private get resolvedColor();
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/sio-chip.js

@@ -0,0 +1,188 @@
+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';
+import './sio-icon.js';
+/**
+ * variant:value → palette token.
+ *   channel  mail | chats | calls | letters
+ *   lane     feed | paper | people
+ *   status   now | today | later | done   (unified-feed triage buckets)
+ */
+const chipPalette = {
+    'channel:mail': 'var(--sio-ch-mail)',
+    'channel:chats': 'var(--sio-ch-chats)',
+    'channel:calls': 'var(--sio-ch-calls)',
+    'channel:letters': 'var(--sio-ch-letters)',
+    'lane:feed': 'var(--sio-lane-feed)',
+    'lane:paper': 'var(--sio-lane-paper)',
+    'lane:people': 'var(--sio-lane-people)',
+    'status:now': 'var(--sio-bucket-now)',
+    'status:today': 'var(--sio-bucket-today)',
+    'status:later': 'var(--sio-bucket-later)',
+    'status:done': 'var(--sio-bucket-done)',
+};
+/**
+ * sio-chip — uppercase 11px/600 label on a 14% color-mix tint of the
+ * palette color (v7 `.sio-lane-chip` and the channel chips in list rows).
+ */
+let SioChip = (() => {
+    let _classDecorators = [customElement('sio-chip')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
+    var SioChip = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _variant_decorators = [property({ type: String })];
+            _value_decorators = [property({ type: String })];
+            _color_decorators = [property({ type: String })];
+            _icon_decorators = [property({ type: String })];
+            __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_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, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioChip = _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: 14px;">
+      <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+        <sio-chip variant="channel" value="mail" icon="envelope">Mail</sio-chip>
+        <sio-chip variant="channel" value="chats" icon="message-circle">Chat</sio-chip>
+        <sio-chip variant="channel" value="calls" icon="phone">Call</sio-chip>
+        <sio-chip variant="channel" value="letters" icon="file-text">Letter</sio-chip>
+      </div>
+      <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+        <sio-chip variant="lane" value="feed">Feed</sio-chip>
+        <sio-chip variant="lane" value="paper">Paper trail</sio-chip>
+        <sio-chip variant="lane" value="people">People</sio-chip>
+      </div>
+      <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+        <sio-chip variant="status" value="now">Now</sio-chip>
+        <sio-chip variant="status" value="today">Today</sio-chip>
+        <sio-chip variant="status" value="later">Later</sio-chip>
+        <sio-chip variant="status" value="done">Done</sio-chip>
+      </div>
+      <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+        <sio-chip icon="sparkles">AI summary</sio-chip>
+        <sio-chip color="var(--sio-ch-letters)">Suggested</sio-chip>
+      </div>
+    </div>
+  `;
+        #variant_accessor_storage = __runInitializers(this, _variant_initializers, 'generic');
+        get variant() { return this.#variant_accessor_storage; }
+        set variant(value) { this.#variant_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _value_initializers, ''));
+        /** palette key within the variant, e.g. "mail", "feed", "now" */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #color_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _color_initializers, ''));
+        /** custom CSS color for variant="generic"; defaults to the system tint */
+        get color() { return this.#color_accessor_storage; }
+        set color(value) { this.#color_accessor_storage = value; }
+        #icon_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _icon_initializers, ''));
+        /** optional leading glyph (sio-icon name) */
+        get icon() { return this.#icon_accessor_storage; }
+        set icon(value) { this.#icon_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: inline-flex;
+        flex-shrink: 0;
+      }
+
+      /* v7 .sio-lane-chip */
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 3px 9px;
+        border-radius: var(--sio-radius-sm);
+        background: color-mix(in oklab, var(--chip-color) 14%, transparent);
+        color: var(--chip-color);
+        font-family: var(--sio-font-sf);
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        user-select: none;
+      }
+
+      sio-icon {
+        flex: 0 0 auto;
+      }
+    `,
+        ];
+        get resolvedColor() {
+            return (chipPalette[`${this.variant}:${this.value}`] || this.color || 'var(--sio-tint)');
+        }
+        render() {
+            return html `
+      <span class="chip" style="--chip-color: ${this.resolvedColor};">
+        ${this.icon ? html `<sio-icon icon=${this.icon} size="10"></sio-icon>` : ''}
+        <slot></slot>
+      </span>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _icon_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioChip = _classThis;
+})();
+export { SioChip };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWNoaXAuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLWNoaXAudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsSUFBSSxFQUNKLFFBQVEsRUFDUixhQUFhLEVBQ2IsR0FBRyxHQUVKLE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQy9DLE9BQU8sZUFBZSxDQUFDO0FBVXZCOzs7OztHQUtHO0FBQ0gsTUFBTSxXQUFXLEdBQTJCO0lBQzFDLGNBQWMsRUFBRSxvQkFBb0I7SUFDcEMsZUFBZSxFQUFFLHFCQUFxQjtJQUN0QyxlQUFlLEVBQUUscUJBQXFCO0lBQ3RDLGlCQUFpQixFQUFFLHVCQUF1QjtJQUMxQyxXQUFXLEVBQUUsc0JBQXNCO0lBQ25DLFlBQVksRUFBRSx1QkFBdUI7SUFDckMsYUFBYSxFQUFFLHdCQUF3QjtJQUN2QyxZQUFZLEVBQUUsdUJBQXVCO0lBQ3JDLGNBQWMsRUFBRSx5QkFBeUI7SUFDekMsY0FBYyxFQUFFLHlCQUF5QjtJQUN6QyxhQUFhLEVBQUUsd0JBQXdCO0NBQ3hDLENBQUM7QUFFRjs7O0dBR0c7SUFFVSxPQUFPOzRCQURuQixhQUFhLENBQUMsVUFBVSxDQUFDOzs7O3NCQUNHLFdBQVc7Ozs7Ozs7Ozs7Ozs7dUJBQW5CLFNBQVEsV0FBVzs7OzttQ0EyQnJDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztpQ0FJMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2lDQUkxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztZQVgzQiwwS0FBZ0IsT0FBTyw2QkFBUCxPQUFPLHlGQUE4QjtZQUlyRCxvS0FBZ0IsS0FBSyw2QkFBTCxLQUFLLHFGQUFNO1lBSTNCLG9LQUFnQixLQUFLLDZCQUFMLEtBQUsscUZBQU07WUFJM0IsaUtBQWdCLElBQUksNkJBQUosSUFBSSxtRkFBTTtZQXhDNUIsNktBd0ZDOzs7O1FBdkZRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F3QjlCLENBQUM7UUFHRiwyRUFBMkMsU0FBUyxFQUFDO1FBQXJELElBQWdCLE9BQU8sNkNBQThCO1FBQXJELElBQWdCLE9BQU8sbURBQThCO1FBSXJELDZIQUF3QixFQUFFLEdBQUM7UUFGM0IsaUVBQWlFO1FBRWpFLElBQWdCLEtBQUssMkNBQU07UUFBM0IsSUFBZ0IsS0FBSyxpREFBTTtRQUkzQiwySEFBd0IsRUFBRSxHQUFDO1FBRjNCLDBFQUEwRTtRQUUxRSxJQUFnQixLQUFLLDJDQUFNO1FBQTNCLElBQWdCLEtBQUssaURBQU07UUFJM0IseUhBQXVCLEVBQUUsR0FBQztRQUYxQiw2Q0FBNkM7UUFFN0MsSUFBZ0IsSUFBSSwwQ0FBTTtRQUExQixJQUFnQixJQUFJLGdEQUFNO1FBRW5CLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0EyQkY7U0FDRixDQUFDO1FBRUYsSUFBWSxhQUFhO1lBQ3ZCLE9BQU8sQ0FDTCxXQUFXLENBQUMsR0FBRyxJQUFJLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLElBQUksaUJBQWlCLENBQ2hGLENBQUM7UUFDSixDQUFDO1FBRU0sTUFBTTtZQUNYLE9BQU8sSUFBSSxDQUFBO2dEQUNpQyxJQUFJLENBQUMsYUFBYTtVQUN4RCxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUEsa0JBQWtCLElBQUksQ0FBQyxJQUFJLHdCQUF3QixDQUFDLENBQUMsQ0FBQyxFQUFFOzs7S0FHN0UsQ0FBQztRQUNKLENBQUM7Ozs7OztZQXZGVSx1REFBTzs7Ozs7U0FBUCxPQUFPIn0=

package/dist_ts_web/elements/sio-cmdk.d.ts

@@ -0,0 +1,59 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+import './sio-kbd.js';
+/**
+ * sio-cmdk — v7 command palette overlay (SocialIODesktop.jsx `SIOCmdK`
+ * + socialio.css `.sio-cmdk*`).
+ *
+ * Scrim rgba(0,0,0,.32) + blur(6px), 640px panel at 14vh on --sio-surface,
+ * radius 14, deep shadow + 0.5px hairline ring. Search row with magnifier,
+ * query input and an `esc` kbd hint; grouped results with uppercase 11/600
+ * section headers; rows of 18px glyph + 14px label + right kbd chord.
+ * Active row = tint-soft wash + tint text.
+ *
+ * Keyboard: ↑/↓ move (wrapping), Enter runs the active item, Esc closes.
+ * Typing filters items across all sections; empty sections disappear.
+ *
+ * Events: `cmdk-run` { id } · `cmdk-close` (both bubble + composed).
+ * The host owns the `open` flag — the palette never hides itself.
+ */
+export interface ISioCmdkItem {
+    id: string;
+    /** lucide icon name rendered through sio-icon (18px glyph slot). */
+    icon: string;
+    label: string;
+    /** keyboard chord hint, e.g. '⇧R' or 'G I'. */
+    shortcut?: string;
+}
+export interface ISioCmdkSection {
+    name: string;
+    items: ISioCmdkItem[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-cmdk': SioCmdk;
+    }
+}
+export declare class SioCmdk extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    /** Grouped commands; filtered live against `query`. */
+    accessor sections: ISioCmdkSection[];
+    /** Host-owned visibility flag (wire ⌘K / cmdk-close in the app shell). */
+    accessor open: boolean;
+    /** Current filter text — settable to preseed, updated as the user types. */
+    accessor query: string;
+    accessor placeholder: string;
+    private accessor activeIndex;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private getFilteredSections;
+    private getFlatItems;
+    willUpdate(): void;
+    updated(changedPropertiesArg: Map<PropertyKey, unknown>): void;
+    private handleInput;
+    private handleKeydown;
+    private scrollActiveRowIntoView;
+    private handleBackdropClick;
+    private runItem;
+    private close;
+    render(): TemplateResult;
+}