@social.io/catalog 1.3.0 → 2.1.0

package/ts_web/elements/sio-chip.ts

@@ -0,0 +1,134 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+
+export type TSioChipVariant = 'channel' | 'lane' | 'status' | 'generic';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-chip': SioChip;
+  }
+}
+
+/**
+ * variant:value → palette token.
+ *   channel  mail | chats | calls | letters
+ *   lane     feed | paper | people
+ *   status   now | today | later | done   (unified-feed triage buckets)
+ */
+const chipPalette: Record<string, string> = {
+  '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).
+ */
+@customElement('sio-chip')
+export class SioChip extends DeesElement {
+  public 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>
+  `;
+
+  @property({ type: String })
+  public accessor variant: TSioChipVariant = 'generic';
+
+  /** palette key within the variant, e.g. "mail", "feed", "now" */
+  @property({ type: String })
+  public accessor value = '';
+
+  /** custom CSS color for variant="generic"; defaults to the system tint */
+  @property({ type: String })
+  public accessor color = '';
+
+  /** optional leading glyph (sio-icon name) */
+  @property({ type: String })
+  public accessor icon = '';
+
+  public 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;
+      }
+    `,
+  ];
+
+  private get resolvedColor(): string {
+    return (
+      chipPalette[`${this.variant}:${this.value}`] || this.color || 'var(--sio-tint)'
+    );
+  }
+
+  public render(): TemplateResult {
+    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>
+    `;
+  }
+}

package/ts_web/elements/sio-cmdk.ts

@@ -0,0 +1,461 @@
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+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;
+  }
+}
+
+@customElement('sio-cmdk')
+export class SioCmdk extends DeesElement {
+  public static demo = () => {
+    const demoSections: ISioCmdkSection[] = [
+      {
+        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: string, subject: string, time: string) => 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: CustomEvent<{ id: string }>) => 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>
+    `;
+  };
+
+  // --------------------------------------------------------------------- api
+
+  /** Grouped commands; filtered live against `query`. */
+  @property({ type: Array })
+  public accessor sections: ISioCmdkSection[] = [];
+
+  /** Host-owned visibility flag (wire ⌘K / cmdk-close in the app shell). */
+  @property({ type: Boolean, reflect: true })
+  public accessor open = false;
+
+  /** Current filter text — settable to preseed, updated as the user types. */
+  @property({ type: String })
+  public accessor query = '';
+
+  @property({ type: String })
+  public accessor placeholder = 'Type a command…';
+
+  @state()
+  private accessor activeIndex = 0;
+
+  // ------------------------------------------------------------------ styles
+
+  public 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
+
+  private getFilteredSections(): ISioCmdkSection[] {
+    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);
+  }
+
+  private getFlatItems(): ISioCmdkItem[] {
+    return this.getFilteredSections().flatMap((sectionArg) => sectionArg.items);
+  }
+
+  // -------------------------------------------------------------- lifecycle
+
+  public willUpdate(): void {
+    // 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;
+    }
+  }
+
+  public updated(changedPropertiesArg: Map<PropertyKey, unknown>): void {
+    if (changedPropertiesArg.has('open') && this.open) {
+      const inputElement = this.shadowRoot?.querySelector<HTMLInputElement>('.search-input');
+      inputElement?.focus({ preventScroll: true });
+    }
+  }
+
+  // ------------------------------------------------------------ interaction
+
+  private handleInput(eventArg: Event): void {
+    this.query = (eventArg.target as HTMLInputElement).value;
+    this.activeIndex = 0;
+  }
+
+  private handleKeydown(eventArg: KeyboardEvent): void {
+    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;
+    }
+  }
+
+  private async scrollActiveRowIntoView(): Promise<void> {
+    await this.updateComplete;
+    this.shadowRoot?.querySelector('.row.active')?.scrollIntoView({ block: 'nearest' });
+  }
+
+  private handleBackdropClick(eventArg: MouseEvent): void {
+    if (eventArg.target === eventArg.currentTarget) {
+      this.close();
+    }
+  }
+
+  private runItem(itemArg: ISioCmdkItem): void {
+    this.dispatchEvent(
+      new CustomEvent<{ id: string }>('cmdk-run', {
+        detail: { id: itemArg.id },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private close(): void {
+    this.dispatchEvent(
+      new CustomEvent('cmdk-close', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  // ----------------------------------------------------------------- render
+
+  public render(): TemplateResult {
+    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>
+    `;
+  }
+}