@social.io/catalog 1.3.0 → 2.1.0

package/dist_ts_web/elements/sio-cmdk.js

@@ -0,0 +1,471 @@
+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, css, customElement, property, state, } from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+import './sio-kbd.js';
+let SioCmdk = (() => {
+    let _classDecorators = [customElement('sio-cmdk')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _sections_decorators;
+    let _sections_initializers = [];
+    let _sections_extraInitializers = [];
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _query_decorators;
+    let _query_initializers = [];
+    let _query_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _activeIndex_decorators;
+    let _activeIndex_initializers = [];
+    let _activeIndex_extraInitializers = [];
+    var SioCmdk = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _sections_decorators = [property({ type: Array })];
+            _open_decorators = [property({ type: Boolean, reflect: true })];
+            _query_decorators = [property({ type: String })];
+            _placeholder_decorators = [property({ type: String })];
+            _activeIndex_decorators = [state()];
+            __esDecorate(this, null, _sections_decorators, { kind: "accessor", name: "sections", static: false, private: false, access: { has: obj => "sections" in obj, get: obj => obj.sections, set: (obj, value) => { obj.sections = value; } }, metadata: _metadata }, _sections_initializers, _sections_extraInitializers);
+            __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(this, null, _query_decorators, { kind: "accessor", name: "query", static: false, private: false, access: { has: obj => "query" in obj, get: obj => obj.query, set: (obj, value) => { obj.query = value; } }, metadata: _metadata }, _query_initializers, _query_extraInitializers);
+            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(this, null, _activeIndex_decorators, { kind: "accessor", name: "activeIndex", static: false, private: false, access: { has: obj => "activeIndex" in obj, get: obj => obj.activeIndex, set: (obj, value) => { obj.activeIndex = value; } }, metadata: _metadata }, _activeIndex_initializers, _activeIndex_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioCmdk = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => {
+            const demoSections = [
+                {
+                    name: 'Actions',
+                    items: [
+                        { id: 'action.reply', icon: 'reply', label: 'Reply', shortcut: 'R' },
+                        { id: 'action.reply-all', icon: 'reply-all', label: 'Reply all', shortcut: '⇧R' },
+                        { id: 'action.forward', icon: 'forward', label: 'Forward', shortcut: 'F' },
+                        { id: 'action.archive', icon: 'archive', label: 'Archive', shortcut: 'E' },
+                    ],
+                },
+                {
+                    name: 'Jump to',
+                    items: [
+                        { id: 'goto.inbox-people', icon: 'inbox', label: 'Inbox · People', shortcut: 'G I' },
+                        { id: 'goto.starred', icon: 'star', label: 'Starred', shortcut: 'G S' },
+                        { id: 'goto.sent', icon: 'send', label: 'Sent', shortcut: 'G T' },
+                    ],
+                },
+                {
+                    name: 'Snooze',
+                    items: [
+                        { id: 'snooze.tomorrow', icon: 'sunset', label: 'Tomorrow morning', shortcut: 'H 1' },
+                        { id: 'snooze.evening', icon: 'clock', label: 'This evening', shortcut: 'H 2' },
+                        { id: 'snooze.next-week', icon: 'calendar', label: 'Next week', shortcut: 'H 3' },
+                    ],
+                },
+            ];
+            // The wrapper's transform contains the fixed-position overlay so each
+            // frame keeps its own palette (same trick as the prototype's mac window).
+            const frameStyle = `
+      position: relative; transform: translateZ(0); overflow: hidden;
+      border-radius: 12px; background: var(--sio-bg);
+      box-shadow: 0 0 0 0.5px var(--sio-separator);
+    `;
+            const mockRow = (from, subject, time) => html `
+      <div style="display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 0.5px solid var(--sio-separator);">
+        <span style="width: 8px; height: 8px; border-radius: 50%; background: var(--sio-tint); flex-shrink: 0;"></span>
+        <span style="width: 140px; font-size: 14px; font-weight: 600; color: var(--sio-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${from}</span>
+        <span style="flex: 1; font-size: 14px; color: var(--sio-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${subject}</span>
+        <span style="font-size: 12px; color: var(--sio-label-3); font-variant-numeric: tabular-nums;">${time}</span>
+      </div>
+    `;
+            const mockWindow = html `
+      <div style="height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-bottom: 0.5px solid var(--sio-separator); background: var(--sio-surface);">
+        <span style="width: 12px; height: 12px; border-radius: 50%; background: #FF5F57;"></span>
+        <span style="width: 12px; height: 12px; border-radius: 50%; background: #FEBC2E;"></span>
+        <span style="width: 12px; height: 12px; border-radius: 50%; background: #28C840;"></span>
+        <span style="margin-left: 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: var(--sio-label);">People</span>
+        <span style="font-size: 12px; font-weight: 500; color: var(--sio-label-3);">3 unread</span>
+      </div>
+      ${mockRow('Maya Lindqvist', 'Launch copy — final pass before Thursday', '09:41')}
+      ${mockRow('Jonas Weber', 'Re: Offsite agenda + travel booking', 'Yesterday')}
+      ${mockRow('Priya Nair', 'Voicemail transcript: callback re: contract', 'Tue')}
+    `;
+            return html `
+      <div style="display: flex; flex-direction: column; gap: 28px; font-family: var(--sio-font-sf);">
+        <div>
+          <div style="font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--sio-label-3); margin: 0 0 10px 2px;">
+            ⌘K over the desktop — grouped results, first row active
+          </div>
+          <div style="${frameStyle} height: 480px;">
+            <div>${mockWindow}</div>
+            <sio-cmdk
+              open
+              .sections=${demoSections}
+              @cmdk-run=${(eventArg) => console.log('cmdk-run', eventArg.detail.id)}
+              @cmdk-close=${() => console.log('cmdk-close')}
+            ></sio-cmdk>
+          </div>
+        </div>
+        <div>
+          <div style="font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--sio-label-3); margin: 0 0 10px 2px;">
+            Typed query "re" — sections filter down, empty groups drop out
+          </div>
+          <div style="${frameStyle} height: 340px;">
+            <div>${mockWindow}</div>
+            <sio-cmdk open query="re" .sections=${demoSections}></sio-cmdk>
+          </div>
+        </div>
+      </div>
+    `;
+        };
+        #sections_accessor_storage = __runInitializers(this, _sections_initializers, []);
+        // --------------------------------------------------------------------- api
+        /** Grouped commands; filtered live against `query`. */
+        get sections() { return this.#sections_accessor_storage; }
+        set sections(value) { this.#sections_accessor_storage = value; }
+        #open_accessor_storage = (__runInitializers(this, _sections_extraInitializers), __runInitializers(this, _open_initializers, false));
+        /** Host-owned visibility flag (wire ⌘K / cmdk-close in the app shell). */
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #query_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _query_initializers, ''));
+        /** Current filter text — settable to preseed, updated as the user types. */
+        get query() { return this.#query_accessor_storage; }
+        set query(value) { this.#query_accessor_storage = value; }
+        #placeholder_accessor_storage = (__runInitializers(this, _query_extraInitializers), __runInitializers(this, _placeholder_initializers, 'Type a command…'));
+        get placeholder() { return this.#placeholder_accessor_storage; }
+        set placeholder(value) { this.#placeholder_accessor_storage = value; }
+        #activeIndex_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _activeIndex_initializers, 0));
+        get activeIndex() { return this.#activeIndex_accessor_storage; }
+        set activeIndex(value) { this.#activeIndex_accessor_storage = value; }
+        // ------------------------------------------------------------------ styles
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: none;
+      }
+      :host([open]) {
+        display: block;
+        position: fixed;
+        inset: 0;
+        z-index: 100;
+      }
+      /* scrim + shadow values are spec'd black in the v7 prototype
+         (socialio.css .sio-cmdk*) — they are not theme surfaces. */
+      .backdrop {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.32);
+        backdrop-filter: blur(6px);
+        -webkit-backdrop-filter: blur(6px);
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        padding-top: 14vh;
+      }
+      .panel {
+        width: 640px;
+        max-width: calc(100% - 80px);
+        background: var(--sio-surface);
+        border-radius: var(--sio-radius-lg);
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.35),
+          0 0 0 var(--sio-hairline) var(--sio-separator);
+        overflow: hidden;
+      }
+
+      /* search row */
+      .search-row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 14px 16px;
+        border-bottom: var(--sio-hairline) solid var(--sio-separator);
+      }
+      .search-icon {
+        color: var(--sio-label-3);
+        flex-shrink: 0;
+      }
+      .search-input {
+        flex: 1;
+        min-width: 0;
+        padding: 0;
+        border: none;
+        outline: none;
+        background: transparent;
+        font-family: var(--sio-font-sf);
+        font-size: 15px;
+        line-height: 20px;
+        letter-spacing: -0.24px;
+        color: var(--sio-label);
+      }
+      .search-input::placeholder {
+        color: var(--sio-label-4);
+      }
+      .esc-hint {
+        flex-shrink: 0;
+        cursor: pointer;
+      }
+
+      /* grouped results */
+      .results {
+        padding: 6px 0;
+        max-height: 360px;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+      }
+      .section {
+        padding: 4px 0;
+      }
+      .section-header {
+        padding: 6px 18px;
+        font-size: 11px;
+        line-height: 13px;
+        font-weight: 600;
+        letter-spacing: 0.06px;
+        text-transform: uppercase;
+        color: var(--sio-label-3);
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 18px;
+        color: var(--sio-label);
+        cursor: default;
+        transition: background 0.08s ease;
+      }
+      .row.active {
+        background: var(--sio-tint-soft);
+        color: var(--sio-tint);
+      }
+      .glyph {
+        width: 18px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        color: inherit;
+      }
+      .label {
+        flex: 1;
+        min-width: 0;
+        font-size: 14px;
+        line-height: 19px;
+        letter-spacing: -0.15px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .row sio-kbd {
+        flex-shrink: 0;
+      }
+      .empty {
+        padding: 18px;
+        text-align: center;
+        font-size: 14px;
+        color: var(--sio-label-3);
+      }
+    `,
+        ];
+        // --------------------------------------------------------------- filtering
+        getFilteredSections() {
+            const normalizedQuery = this.query.trim().toLowerCase();
+            if (!normalizedQuery) {
+                return this.sections;
+            }
+            return this.sections
+                .map((sectionArg) => ({
+                ...sectionArg,
+                items: sectionArg.items.filter((itemArg) => itemArg.label.toLowerCase().includes(normalizedQuery)),
+            }))
+                .filter((sectionArg) => sectionArg.items.length > 0);
+        }
+        getFlatItems() {
+            return this.getFilteredSections().flatMap((sectionArg) => sectionArg.items);
+        }
+        // -------------------------------------------------------------- lifecycle
+        willUpdate() {
+            // keep the active row inside the (possibly shrunken) filtered list
+            const totalItems = this.getFlatItems().length;
+            if (this.activeIndex >= totalItems) {
+                this.activeIndex = totalItems > 0 ? totalItems - 1 : 0;
+            }
+        }
+        updated(changedPropertiesArg) {
+            if (changedPropertiesArg.has('open') && this.open) {
+                const inputElement = this.shadowRoot?.querySelector('.search-input');
+                inputElement?.focus({ preventScroll: true });
+            }
+        }
+        // ------------------------------------------------------------ interaction
+        handleInput(eventArg) {
+            this.query = eventArg.target.value;
+            this.activeIndex = 0;
+        }
+        handleKeydown(eventArg) {
+            const flatItems = this.getFlatItems();
+            switch (eventArg.key) {
+                case 'ArrowDown':
+                    eventArg.preventDefault();
+                    if (flatItems.length > 0) {
+                        this.activeIndex = (this.activeIndex + 1) % flatItems.length;
+                        this.scrollActiveRowIntoView();
+                    }
+                    break;
+                case 'ArrowUp':
+                    eventArg.preventDefault();
+                    if (flatItems.length > 0) {
+                        this.activeIndex = (this.activeIndex - 1 + flatItems.length) % flatItems.length;
+                        this.scrollActiveRowIntoView();
+                    }
+                    break;
+                case 'Enter':
+                    eventArg.preventDefault();
+                    if (flatItems[this.activeIndex]) {
+                        this.runItem(flatItems[this.activeIndex]);
+                    }
+                    break;
+                case 'Escape':
+                    eventArg.preventDefault();
+                    this.close();
+                    break;
+            }
+        }
+        async scrollActiveRowIntoView() {
+            await this.updateComplete;
+            this.shadowRoot?.querySelector('.row.active')?.scrollIntoView({ block: 'nearest' });
+        }
+        handleBackdropClick(eventArg) {
+            if (eventArg.target === eventArg.currentTarget) {
+                this.close();
+            }
+        }
+        runItem(itemArg) {
+            this.dispatchEvent(new CustomEvent('cmdk-run', {
+                detail: { id: itemArg.id },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        close() {
+            this.dispatchEvent(new CustomEvent('cmdk-close', {
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        // ----------------------------------------------------------------- render
+        render() {
+            if (!this.open) {
+                return html ``;
+            }
+            const filteredSections = this.getFilteredSections();
+            let runningIndex = -1;
+            return html `
+      <div class="backdrop" @click=${this.handleBackdropClick} @keydown=${this.handleKeydown}>
+        <div class="panel" role="dialog" aria-modal="true" aria-label="Command palette">
+          <div class="search-row">
+            <sio-icon class="search-icon" icon="search" size="16"></sio-icon>
+            <input
+              class="search-input"
+              type="text"
+              .value=${this.query}
+              placeholder=${this.placeholder}
+              spellcheck="false"
+              autocomplete="off"
+              aria-label="Search commands"
+              @input=${this.handleInput}
+            />
+            <sio-kbd class="esc-hint" @click=${this.close}>esc</sio-kbd>
+          </div>
+          <div class="results" role="listbox" aria-label="Commands">
+            ${filteredSections.length === 0
+                ? html `<div class="empty">No matching commands</div>`
+                : filteredSections.map((sectionArg) => html `
+                    <div class="section">
+                      <div class="section-header">${sectionArg.name}</div>
+                      ${sectionArg.items.map((itemArg) => {
+                    runningIndex += 1;
+                    const itemIndex = runningIndex;
+                    const isActive = itemIndex === this.activeIndex;
+                    return html `
+                          <div
+                            class="row ${isActive ? 'active' : ''}"
+                            role="option"
+                            aria-selected=${isActive ? 'true' : 'false'}
+                            @pointerenter=${() => {
+                        this.activeIndex = itemIndex;
+                    }}
+                            @click=${() => this.runItem(itemArg)}
+                          >
+                            <span class="glyph">
+                              ${itemArg.icon
+                        ? html `<sio-icon icon=${itemArg.icon} size="16"></sio-icon>`
+                        : html ``}
+                            </span>
+                            <span class="label">${itemArg.label}</span>
+                            ${itemArg.shortcut
+                        ? html `<sio-kbd>${itemArg.shortcut}</sio-kbd>`
+                        : html ``}
+                          </div>
+                        `;
+                })}
+                    </div>
+                  `)}
+          </div>
+        </div>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _activeIndex_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioCmdk = _classThis;
+})();
+export { SioCmdk };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWNtZGsuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLWNtZGsudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsSUFBSSxFQUNKLEdBQUcsRUFDSCxhQUFhLEVBQ2IsUUFBUSxFQUNSLEtBQUssR0FFTixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGVBQWUsQ0FBQztBQUN2QixPQUFPLGNBQWMsQ0FBQztJQXdDVCxPQUFPOzRCQURuQixhQUFhLENBQUMsVUFBVSxDQUFDOzs7O3NCQUNHLFdBQVc7Ozs7Ozs7Ozs7Ozs7Ozs7dUJBQW5CLFNBQVEsV0FBVzs7OztvQ0F3RnJDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsQ0FBQztnQ0FJekIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUM7aUNBSTFDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzt1Q0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3VDQUcxQixLQUFLLEVBQUU7WUFiUiw2S0FBZ0IsUUFBUSw2QkFBUixRQUFRLDJGQUF5QjtZQUlqRCxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUFTO1lBSTdCLG9LQUFnQixLQUFLLDZCQUFMLEtBQUsscUZBQU07WUFHM0Isc0xBQWdCLFdBQVcsNkJBQVgsV0FBVyxpR0FBcUI7WUFHaEQsc0xBQWlCLFdBQVcsNkJBQVgsV0FBVyxpR0FBSztZQXZHbkMsNktBeVpDOzs7O1FBeFpRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFO1lBQ3hCLE1BQU0sWUFBWSxHQUFzQjtnQkFDdEM7b0JBQ0UsSUFBSSxFQUFFLFNBQVM7b0JBQ2YsS0FBSyxFQUFFO3dCQUNMLEVBQUUsRUFBRSxFQUFFLGNBQWMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRTt3QkFDcEUsRUFBRSxFQUFFLEVBQUUsa0JBQWtCLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7d0JBQ2pGLEVBQUUsRUFBRSxFQUFFLGdCQUFnQixFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsR0FBRyxFQUFFO3dCQUMxRSxFQUFFLEVBQUUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRTtxQkFDM0U7aUJBQ0Y7Z0JBQ0Q7b0JBQ0UsSUFBSSxFQUFFLFNBQVM7b0JBQ2YsS0FBSyxFQUFFO3dCQUNMLEVBQUUsRUFBRSxFQUFFLG1CQUFtQixFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLGdCQUFnQixFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUU7d0JBQ3BGLEVBQUUsRUFBRSxFQUFFLGNBQWMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRTt3QkFDdkUsRUFBRSxFQUFFLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFO3FCQUNsRTtpQkFDRjtnQkFDRDtvQkFDRSxJQUFJLEVBQUUsUUFBUTtvQkFDZCxLQUFLLEVBQUU7d0JBQ0wsRUFBRSxFQUFFLEVBQUUsaUJBQWlCLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsa0JBQWtCLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRTt3QkFDckYsRUFBRSxFQUFFLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsY0FBYyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUU7d0JBQy9FLEVBQUUsRUFBRSxFQUFFLGtCQUFrQixFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFO3FCQUNsRjtpQkFDRjthQUNGLENBQUM7WUFDRixzRUFBc0U7WUFDdEUsMEVBQTBFO1lBQzFFLE1BQU0sVUFBVSxHQUFHOzs7O0tBSWxCLENBQUM7WUFDRixNQUFNLE9BQU8sR0FBRyxDQUFDLElBQVksRUFBRSxPQUFlLEVBQUUsSUFBWSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUE7OztrS0FHeUYsSUFBSTs2SUFDekIsT0FBTzt3R0FDNUMsSUFBSTs7S0FFdkcsQ0FBQztZQUNGLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQTs7Ozs7Ozs7UUFRbkIsT0FBTyxDQUFDLGdCQUFnQixFQUFFLDBDQUEwQyxFQUFFLE9BQU8sQ0FBQztRQUM5RSxPQUFPLENBQUMsYUFBYSxFQUFFLHFDQUFxQyxFQUFFLFdBQVcsQ0FBQztRQUMxRSxPQUFPLENBQUMsWUFBWSxFQUFFLDZDQUE2QyxFQUFFLEtBQUssQ0FBQztLQUM5RSxDQUFDO1lBQ0YsT0FBTyxJQUFJLENBQUE7Ozs7Ozt3QkFNUyxVQUFVO21CQUNmLFVBQVU7OzswQkFHSCxZQUFZOzBCQUNaLENBQUMsUUFBcUMsRUFBRSxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxVQUFVLEVBQUUsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7NEJBQ3BGLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsWUFBWSxDQUFDOzs7Ozs7Ozt3QkFRbkMsVUFBVTttQkFDZixVQUFVO2tEQUNxQixZQUFZOzs7O0tBSXpELENBQUM7UUFDSixDQUFDLENBQUM7UUFNRiw2RUFBOEMsRUFBRSxFQUFDO1FBSmpELDRFQUE0RTtRQUU1RSx1REFBdUQ7UUFFdkQsSUFBZ0IsUUFBUSw4Q0FBeUI7UUFBakQsSUFBZ0IsUUFBUSxvREFBeUI7UUFJakQsNEhBQXVCLEtBQUssR0FBQztRQUY3QiwwRUFBMEU7UUFFMUUsSUFBZ0IsSUFBSSwwQ0FBUztRQUE3QixJQUFnQixJQUFJLGdEQUFTO1FBSTdCLDBIQUF3QixFQUFFLEdBQUM7UUFGM0IsNEVBQTRFO1FBRTVFLElBQWdCLEtBQUssMkNBQU07UUFBM0IsSUFBZ0IsS0FBSyxpREFBTTtRQUczQix1SUFBOEIsaUJBQWlCLEdBQUM7UUFBaEQsSUFBZ0IsV0FBVyxpREFBcUI7UUFBaEQsSUFBZ0IsV0FBVyx1REFBcUI7UUFHaEQsNklBQStCLENBQUMsR0FBQztRQUFqQyxJQUFpQixXQUFXLGlEQUFLO1FBQWpDLElBQWlCLFdBQVcsdURBQUs7UUFFakMsNEVBQTRFO1FBRXJFLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0E4SEY7U0FDRixDQUFDO1FBRUYsNEVBQTRFO1FBRXBFLG1CQUFtQjtZQUN6QixNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQ3hELElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztnQkFDckIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDO1lBQ3ZCLENBQUM7WUFDRCxPQUFPLElBQUksQ0FBQyxRQUFRO2lCQUNqQixHQUFHLENBQUMsQ0FBQyxVQUFVLEVBQUUsRUFBRSxDQUFDLENBQUM7Z0JBQ3BCLEdBQUcsVUFBVTtnQkFDYixLQUFLLEVBQUUsVUFBVSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUN6QyxPQUFPLENBQUMsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsQ0FDdEQ7YUFDRixDQUFDLENBQUM7aUJBQ0YsTUFBTSxDQUFDLENBQUMsVUFBVSxFQUFFLEVBQUUsQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztRQUN6RCxDQUFDO1FBRU8sWUFBWTtZQUNsQixPQUFPLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLFVBQVUsRUFBRSxFQUFFLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlFLENBQUM7UUFFRCwyRUFBMkU7UUFFcEUsVUFBVTtZQUNmLG1FQUFtRTtZQUNuRSxNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsTUFBTSxDQUFDO1lBQzlDLElBQUksSUFBSSxDQUFDLFdBQVcsSUFBSSxVQUFVLEVBQUUsQ0FBQztnQkFDbkMsSUFBSSxDQUFDLFdBQVcsR0FBRyxVQUFVLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDekQsQ0FBQztRQUNILENBQUM7UUFFTSxPQUFPLENBQUMsb0JBQStDO1lBQzVELElBQUksb0JBQW9CLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztnQkFDbEQsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLFVBQVUsRUFBRSxhQUFhLENBQW1CLGVBQWUsQ0FBQyxDQUFDO2dCQUN2RixZQUFZLEVBQUUsS0FBSyxDQUFDLEVBQUUsYUFBYSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7WUFDL0MsQ0FBQztRQUNILENBQUM7UUFFRCwyRUFBMkU7UUFFbkUsV0FBVyxDQUFDLFFBQWU7WUFDakMsSUFBSSxDQUFDLEtBQUssR0FBSSxRQUFRLENBQUMsTUFBMkIsQ0FBQyxLQUFLLENBQUM7WUFDekQsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLENBQUM7UUFDdkIsQ0FBQztRQUVPLGFBQWEsQ0FBQyxRQUF1QjtZQUMzQyxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDdEMsUUFBUSxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUM7Z0JBQ3JCLEtBQUssV0FBVztvQkFDZCxRQUFRLENBQUMsY0FBYyxFQUFFLENBQUM7b0JBQzFCLElBQUksU0FBUyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUUsQ0FBQzt3QkFDekIsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxDQUFDLEdBQUcsU0FBUyxDQUFDLE1BQU0sQ0FBQzt3QkFDN0QsSUFBSSxDQUFDLHVCQUF1QixFQUFFLENBQUM7b0JBQ2pDLENBQUM7b0JBQ0QsTUFBTTtnQkFDUixLQUFLLFNBQVM7b0JBQ1osUUFBUSxDQUFDLGNBQWMsRUFBRSxDQUFDO29CQUMxQixJQUFJLFNBQVMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFLENBQUM7d0JBQ3pCLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsR0FBRyxTQUFTLENBQUMsTUFBTSxDQUFDLEdBQUcsU0FBUyxDQUFDLE1BQU0sQ0FBQzt3QkFDaEYsSUFBSSxDQUFDLHVCQUF1QixFQUFFLENBQUM7b0JBQ2pDLENBQUM7b0JBQ0QsTUFBTTtnQkFDUixLQUFLLE9BQU87b0JBQ1YsUUFBUSxDQUFDLGNBQWMsRUFBRSxDQUFDO29CQUMxQixJQUFJLFNBQVMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQUUsQ0FBQzt3QkFDaEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUM7b0JBQzVDLENBQUM7b0JBQ0QsTUFBTTtnQkFDUixLQUFLLFFBQVE7b0JBQ1gsUUFBUSxDQUFDLGNBQWMsRUFBRSxDQUFDO29CQUMxQixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7b0JBQ2IsTUFBTTtZQUNWLENBQUM7UUFDSCxDQUFDO1FBRU8sS0FBSyxDQUFDLHVCQUF1QjtZQUNuQyxNQUFNLElBQUksQ0FBQyxjQUFjLENBQUM7WUFDMUIsSUFBSSxDQUFDLFVBQVUsRUFBRSxhQUFhLENBQUMsYUFBYSxDQUFDLEVBQUUsY0FBYyxDQUFDLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxDQUFDLENBQUM7UUFDdEYsQ0FBQztRQUVPLG1CQUFtQixDQUFDLFFBQW9CO1lBQzlDLElBQUksUUFBUSxDQUFDLE1BQU0sS0FBSyxRQUFRLENBQUMsYUFBYSxFQUFFLENBQUM7Z0JBQy9DLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNmLENBQUM7UUFDSCxDQUFDO1FBRU8sT0FBTyxDQUFDLE9BQXFCO1lBQ25DLElBQUksQ0FBQyxhQUFhLENBQ2hCLElBQUksV0FBVyxDQUFpQixVQUFVLEVBQUU7Z0JBQzFDLE1BQU0sRUFBRSxFQUFFLEVBQUUsRUFBRSxPQUFPLENBQUMsRUFBRSxFQUFFO2dCQUMxQixPQUFPLEVBQUUsSUFBSTtnQkFDYixRQUFRLEVBQUUsSUFBSTthQUNmLENBQUMsQ0FDSCxDQUFDO1FBQ0osQ0FBQztRQUVPLEtBQUs7WUFDWCxJQUFJLENBQUMsYUFBYSxDQUNoQixJQUFJLFdBQVcsQ0FBQyxZQUFZLEVBQUU7Z0JBQzVCLE9BQU8sRUFBRSxJQUFJO2dCQUNiLFFBQVEsRUFBRSxJQUFJO2FBQ2YsQ0FBQyxDQUNILENBQUM7UUFDSixDQUFDO1FBRUQsMkVBQTJFO1FBRXBFLE1BQU07WUFDWCxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO2dCQUNmLE9BQU8sSUFBSSxDQUFBLEVBQUUsQ0FBQztZQUNoQixDQUFDO1lBQ0QsTUFBTSxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztZQUNwRCxJQUFJLFlBQVksR0FBRyxDQUFDLENBQUMsQ0FBQztZQUN0QixPQUFPLElBQUksQ0FBQTtxQ0FDc0IsSUFBSSxDQUFDLG1CQUFtQixhQUFhLElBQUksQ0FBQyxhQUFhOzs7Ozs7O3VCQU9yRSxJQUFJLENBQUMsS0FBSzs0QkFDTCxJQUFJLENBQUMsV0FBVzs7Ozt1QkFJckIsSUFBSSxDQUFDLFdBQVc7OytDQUVRLElBQUksQ0FBQyxLQUFLOzs7Y0FHM0MsZ0JBQWdCLENBQUMsTUFBTSxLQUFLLENBQUM7Z0JBQzdCLENBQUMsQ0FBQyxJQUFJLENBQUEsK0NBQStDO2dCQUNyRCxDQUFDLENBQUMsZ0JBQWdCLENBQUMsR0FBRyxDQUNsQixDQUFDLFVBQVUsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFBOztvREFFYyxVQUFVLENBQUMsSUFBSTt3QkFDM0MsVUFBVSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxPQUFPLEVBQUUsRUFBRTtvQkFDakMsWUFBWSxJQUFJLENBQUMsQ0FBQztvQkFDbEIsTUFBTSxTQUFTLEdBQUcsWUFBWSxDQUFDO29CQUMvQixNQUFNLFFBQVEsR0FBRyxTQUFTLEtBQUssSUFBSSxDQUFDLFdBQVcsQ0FBQztvQkFDaEQsT0FBTyxJQUFJLENBQUE7O3lDQUVNLFFBQVEsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxFQUFFOzs0Q0FFckIsUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE9BQU87NENBQzNCLEdBQUcsRUFBRTt3QkFDbkIsSUFBSSxDQUFDLFdBQVcsR0FBRyxTQUFTLENBQUM7b0JBQy9CLENBQUM7cUNBQ1EsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUM7OztnQ0FHaEMsT0FBTyxDQUFDLElBQUk7d0JBQ1osQ0FBQyxDQUFDLElBQUksQ0FBQSxrQkFBa0IsT0FBTyxDQUFDLElBQUksd0JBQXdCO3dCQUM1RCxDQUFDLENBQUMsSUFBSSxDQUFBLEVBQUU7O2tEQUVVLE9BQU8sQ0FBQyxLQUFLOzhCQUNqQyxPQUFPLENBQUMsUUFBUTt3QkFDaEIsQ0FBQyxDQUFDLElBQUksQ0FBQSxZQUFZLE9BQU8sQ0FBQyxRQUFRLFlBQVk7d0JBQzlDLENBQUMsQ0FBQyxJQUFJLENBQUEsRUFBRTs7eUJBRWIsQ0FBQztnQkFDSixDQUFDLENBQUM7O21CQUVMLENBQ0Y7Ozs7S0FJWixDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBeFpVLHVEQUFPOzs7OztTQUFQLE9BQU8ifQ==

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

@@ -1,20 +1,74 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import { type IMessage } from './sio-conversation-view.js';
 declare global {
     interface HTMLElementTagNameMap {
         'sio-combox': SioCombox;
     }
 }
+/**
+ * sio-combox — the widget panel (v7 SocialIOWidget.jsx SIOWidgetShell).
+ *
+ * 380×620 panel, radius 20 on --sio-surface, floating shadow with a
+ * 0.5px ring, anchored above the sio-fab launcher. Slides between the
+ * home/welcome state (sio-conversation-selector) and the conversation
+ * state (sio-conversation-view); the away/email-fallback state is the
+ * conversation state with `away` set. Every state carries the centered
+ * "Powered by social.io" footer with the mini brand glyph.
+ *
+ * Singleton API: SioCombox.createOnBody() / getInstance(), plus
+ * open() / close() / toggle() / getIsOpen(). Full-screen on phablet.
+ */
 export declare class SioCombox extends DeesElement {
     static demo: () => TemplateResult<1>;
-    accessor referenceObject: HTMLElement;
+    private static instance;
+    /**
+     * Creates and appends a singleton combox to document.body
+     */
+    static createOnBody(): SioCombox;
+    /**
+     * Gets the singleton instance if it exists
+     */
+    static getInstance(): SioCombox | null;
+    /** team is away — the conversation state falls back to email capture */
+    accessor away: boolean;
     private accessor selectedConversationId;
+    private accessor isKeyboardVisible;
+    private accessor isOpen;
+    private keyboardBlurTimeout?;
     private accessor conversations;
     private accessor messages;
     constructor();
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): Promise<void>;
+    private handleInputFocus;
+    private handleInputBlur;
+    updated(changedProperties: Map<string, any>): void;
+    /**
+     * Opens the combox
+     */
+    open(): void;
+    /**
+     * Closes the combox
+     */
+    close(): void;
+    /**
+     * Toggles the combox open/closed state
+     */
+    toggle(): void;
+    /**
+     * Returns whether the combox is currently open
+     */
+    getIsOpen(): boolean;
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
     private handleConversationSelected;
+    private handleNewConversation;
     private handleBack;
     private handleSendMessage;
+    /**
+     * Append an inbound (support-side) message to a conversation.
+     * The host application calls this when a reply arrives.
+     */
+    receiveMessage(conversationId: string, message: IMessage): void;
     private handleOpenImage;
 }