@social.io/catalog 1.3.0 → 2.1.0

package/ts_web/elements/sio-kbd.ts

@@ -0,0 +1,80 @@
+import {
+  DeesElement,
+  html,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { sioElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-kbd': SioKbd;
+  }
+}
+
+/**
+ * sio-kbd — keyboard hint chip (v7 `.sio-kbd`): mono 11px on surface-2
+ * with a 0.5px hairline border and 4px radius. Shown in toolbars and the
+ * command palette, e.g. ⌘R (reply), E (archive), ⌘K (commands).
+ */
+@customElement('sio-kbd')
+export class SioKbd extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; flex-direction: column; gap: 14px;">
+      <div style="display: flex; gap: 6px; align-items: center;">
+        <sio-kbd>⌘K</sio-kbd>
+        <sio-kbd>⌘R</sio-kbd>
+        <sio-kbd>⇧⌘A</sio-kbd>
+        <sio-kbd>E</sio-kbd>
+        <sio-kbd>⌫</sio-kbd>
+        <sio-kbd>esc</sio-kbd>
+      </div>
+      <div style="display: flex; gap: 14px; align-items: center; font-size: 12px;">
+        <span style="display: inline-flex; gap: 5px; align-items: center;">
+          Reply <sio-kbd>⌘R</sio-kbd>
+        </span>
+        <span style="display: inline-flex; gap: 5px; align-items: center;">
+          Archive <sio-kbd>E</sio-kbd>
+        </span>
+        <span style="display: inline-flex; gap: 5px; align-items: center;">
+          Snooze <sio-kbd>H</sio-kbd>
+        </span>
+        <span style="display: inline-flex; gap: 5px; align-items: center;">
+          Commands <sio-kbd>⌘K</sio-kbd>
+        </span>
+      </div>
+    </div>
+  `;
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+        flex-shrink: 0;
+      }
+
+      /* v7 .sio-kbd */
+      .kbd {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 1px 5px;
+        border-radius: var(--sio-radius-xs);
+        background: var(--sio-surface-2);
+        color: var(--sio-label-2);
+        font-family: var(--sio-font-mono);
+        font-size: 11px;
+        border: var(--sio-hairline) solid var(--sio-separator);
+        white-space: nowrap;
+        user-select: none;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`<span class="kbd"><slot></slot></span>`;
+  }
+}

package/ts_web/elements/sio-list-row.ts

@@ -0,0 +1,393 @@
+import {
+  DeesElement,
+  html,
+  property,
+  state,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles, sioTabularNums } from './tokens.js';
+import './sio-icon.js';
+
+/**
+ * Row density per the v7 spec — comfortable 78px / cozy 62px / compact 48px
+ * (`--sio-row-*` tokens) with 14 / 11 / 8px vertical padding.
+ */
+export type TSioListRowDensity = 'comfortable' | 'cozy' | 'compact';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-list-row': SioListRow;
+  }
+}
+
+/**
+ * sio-list-row — the universal list row of social.io v7
+ * (thread lists, unified feed, search results, person history).
+ *
+ * Anatomy (design source: SIODesktopRow / SIOUniRow / SIORowMobile):
+ *   [8px unread-dot gutter] [avatar slot] [line1: title + trailing + time]
+ *                                         [line2: subject]
+ *                                         [preview — clamped 2/1/0 lines]
+ *                                         [meta slot — chips]
+ *   plus a hover-revealed trailing `actions` slot (triage: done/snooze/draft)
+ *   and a 0.5px inset hairline between rows (hidden on the last row).
+ *
+ * Slots:
+ *   avatar          — leading avatar (any element; 30px at cozy/comfortable, 24px compact)
+ *   line1-trailing  — small trailing adornments on line 1 (count, star, paperclip)
+ *   meta            — chip row (lane/channel chips, AI summary chip); hidden at compact
+ *   actions         — desktop triage actions, revealed on hover (opacity 0 -> 1, .12s)
+ *
+ * Events:
+ *   row-select — bubbles/composed; fired on click or Enter/Space
+ *                (not fired for clicks inside the `actions` slot).
+ */
+@customElement('sio-list-row')
+export class SioListRow extends DeesElement {
+  public static demo = () => html`
+    <div style="max-width: 420px; font-family: var(--sio-font-sf); display: flex; flex-direction: column; gap: 18px;">
+      <div style="background: var(--sio-surface); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 var(--sio-hairline) var(--sio-separator);">
+        <sio-list-row
+          unread
+          title="Maya Lindqvist"
+          time="09:41"
+          subject="Q3 numbers ahead of the board call"
+          preview="Attached the deck — the growth slide still needs your revenue split before Thursday. Can you take a pass today?"
+          density="comfortable"
+        >
+          <span
+            slot="avatar"
+            style="width: 30px; height: 30px; border-radius: 50%; background: var(--sio-ch-mail); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: -0.2px;"
+          >ML</span>
+          <sio-icon slot="line1-trailing" icon="star" size="11" style="color: var(--sio-yellow);"></sio-icon>
+          <span
+            slot="meta"
+            style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; background: color-mix(in oklab, var(--sio-ch-mail) 14%, transparent); color: var(--sio-ch-mail); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;"
+          >Mail</span>
+          <span slot="meta" style="font-size: 11px; color: var(--sio-label-3);">3 attachments</span>
+          <span slot="actions" title="Done" style="width: 24px; height: 24px; border-radius: 6px; color: var(--sio-green); display: inline-flex; align-items: center; justify-content: center;"><sio-icon icon="check" size="13"></sio-icon></span>
+          <span slot="actions" title="Snooze" style="width: 24px; height: 24px; border-radius: 6px; color: var(--sio-orange); display: inline-flex; align-items: center; justify-content: center;"><sio-icon icon="clock" size="13"></sio-icon></span>
+          <span slot="actions" title="AI draft" style="width: 24px; height: 24px; border-radius: 6px; color: var(--sio-tint); display: inline-flex; align-items: center; justify-content: center;"><sio-icon icon="sparkles" size="13"></sio-icon></span>
+        </sio-list-row>
+        <sio-list-row
+          selected
+          title="Jonas Weber"
+          time="08:12"
+          subject="Launch copy — final review"
+          preview="I folded your edits in. One open question on the pricing line."
+          density="cozy"
+        >
+          <span
+            slot="avatar"
+            style="width: 30px; height: 30px; border-radius: 50%; background: var(--sio-ch-chats); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: -0.2px;"
+          >JW</span>
+        </sio-list-row>
+        <sio-list-row
+          unread
+          title="Deutsche Post"
+          time="Yesterday"
+          subject="Letter scanned: Finanzamt München"
+          preview="2 pages · OCR ready · deadline detected: Jul 24"
+          density="cozy"
+        >
+          <span
+            slot="avatar"
+            style="width: 30px; height: 30px; border-radius: 50%; background: var(--sio-ch-letters); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: -0.2px;"
+          >DP</span>
+          <span slot="line1-trailing" style="font-size: 11px; color: var(--sio-label-3); font-variant-numeric: tabular-nums;">2</span>
+        </sio-list-row>
+        <sio-list-row
+          title="Ana Ferreira"
+          time="Tue"
+          subject="Missed call · voicemail (0:42)"
+          density="compact"
+        >
+          <span
+            slot="avatar"
+            style="width: 24px; height: 24px; border-radius: 50%; background: var(--sio-ch-calls); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; letter-spacing: -0.2px;"
+          >AF</span>
+        </sio-list-row>
+      </div>
+    </div>
+  `;
+
+  @property({ type: String })
+  public accessor title = '';
+
+  /** Trailing timestamp on line 1 — rendered with tabular-nums. */
+  @property({ type: String })
+  public accessor time = '';
+
+  /** Line 2 — subject / one-line summary. Tinted when the row is selected. */
+  @property({ type: String })
+  public accessor subject = '';
+
+  /** Optional preview text — clamped to 2 lines (comfortable) / 1 line (cozy), hidden at compact. */
+  @property({ type: String })
+  public accessor preview = '';
+
+  @property({ type: String, reflect: true })
+  public accessor density: TSioListRowDensity = 'cozy';
+
+  /** Shows the 8px tint dot in the leading gutter. */
+  @property({ type: Boolean, reflect: true })
+  public accessor unread = false;
+
+  /** Selected state — tint-soft background, tinted subject line. */
+  @property({ type: Boolean, reflect: true })
+  public accessor selected = false;
+
+  @state()
+  private accessor hasMeta = false;
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        cursor: default;
+        background: transparent;
+        transition: background 0.08s ease;
+        font-family: var(--sio-font-sf);
+        /* inset for the inter-row hairline: 14 pad + 8 gutter + 10 gap + 30 avatar + 10 gap */
+        --sio-row-hairline-inset: 72px;
+      }
+      :host(:hover) {
+        background: var(--sio-surface-2);
+      }
+      :host([selected]) {
+        background: var(--sio-tint-soft);
+      }
+      :host([selected]) .subject {
+        color: var(--sio-tint);
+      }
+      :host([density='compact']) {
+        --sio-row-hairline-inset: 66px;
+      }
+
+      .row {
+        position: relative;
+        display: flex;
+        gap: 10px;
+        padding: 11px 14px;
+        min-height: var(--sio-row-cozy);
+        box-sizing: border-box;
+        align-items: flex-start;
+        outline: none;
+      }
+      :host([density='comfortable']) .row {
+        padding: 14px;
+        min-height: var(--sio-row-comfortable);
+      }
+      :host([density='compact']) .row {
+        padding: 8px 14px;
+        min-height: var(--sio-row-compact);
+      }
+      .row:focus-visible {
+        box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--sio-tint) 40%, transparent);
+      }
+
+      /* 8px unread-dot gutter */
+      .gutter {
+        width: 8px;
+        flex-shrink: 0;
+        padding-top: 8px;
+        display: flex;
+        justify-content: center;
+      }
+      .unread-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--sio-tint);
+        flex-shrink: 0;
+      }
+
+      .avatar {
+        flex-shrink: 0;
+        display: flex;
+        align-items: flex-start;
+      }
+
+      .main {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .line1 {
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+      }
+      .title {
+        flex: 1;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--sio-label);
+        letter-spacing: -0.1px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      :host([unread]) .title {
+        font-weight: 600;
+      }
+      .time {
+        font-size: 11px;
+        color: var(--sio-label-3);
+        ${sioTabularNums}
+      }
+      slot[name='line1-trailing'] {
+        display: contents;
+      }
+
+      .subject {
+        font-size: 13px;
+        font-weight: 400;
+        color: var(--sio-label-3);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-top: 1px;
+      }
+      :host([unread]) .subject {
+        font-weight: 500;
+        color: var(--sio-label);
+      }
+
+      .preview {
+        font-size: 12px;
+        color: var(--sio-label-3);
+        margin-top: 2px;
+        line-height: 1.4;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+      }
+      :host([density='comfortable']) .preview {
+        -webkit-line-clamp: 2;
+      }
+      :host([density='compact']) .preview {
+        display: none;
+      }
+
+      .meta {
+        display: none;
+        gap: 6px;
+        align-items: center;
+        margin-top: 5px;
+      }
+      .meta.has-content {
+        display: flex;
+      }
+      :host([density='compact']) .meta {
+        display: none;
+      }
+
+      /* hover-revealed triage actions — desktop */
+      .actions {
+        position: absolute;
+        right: 10px;
+        top: 7px;
+        z-index: 5;
+        display: flex;
+        gap: 2px;
+        padding: 3px;
+        border-radius: 9px;
+        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);
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.12s ease;
+      }
+      :host(:hover) .actions {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      /* 0.5px inset hairline between rows */
+      .hairline {
+        position: absolute;
+        bottom: 0;
+        left: var(--sio-row-hairline-inset);
+        right: 0;
+        height: var(--sio-hairline);
+        background: var(--sio-separator);
+        pointer-events: none;
+      }
+      :host(:last-child) .hairline {
+        display: none;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div
+        class="row"
+        role="option"
+        tabindex="0"
+        aria-selected=${this.selected ? 'true' : 'false'}
+        @click=${this.handleSelect}
+        @keydown=${this.handleKeydown}
+      >
+        <div class="gutter">
+          ${this.unread ? html`<div class="unread-dot"></div>` : html``}
+        </div>
+        <div class="avatar">
+          <slot name="avatar"></slot>
+        </div>
+        <div class="main">
+          <div class="line1">
+            <span class="title">${this.title}</span>
+            <slot name="line1-trailing"></slot>
+            ${this.time ? html`<span class="time">${this.time}</span>` : html``}
+          </div>
+          ${this.subject ? html`<div class="subject">${this.subject}</div>` : html``}
+          ${this.preview ? html`<div class="preview">${this.preview}</div>` : html``}
+          <div class="meta ${this.hasMeta ? 'has-content' : ''}">
+            <slot name="meta" @slotchange=${this.handleMetaSlotChange}></slot>
+          </div>
+        </div>
+        <div class="actions">
+          <slot name="actions"></slot>
+        </div>
+        <div class="hairline"></div>
+      </div>
+    `;
+  }
+
+  private handleMetaSlotChange(eventArg: Event): void {
+    const slotElement = eventArg.target as HTMLSlotElement;
+    this.hasMeta = slotElement.assignedElements().length > 0;
+  }
+
+  private handleSelect(eventArg: Event): void {
+    // clicks inside the triage actions belong to the consumer's own handlers
+    const actionsContainer = this.shadowRoot?.querySelector('.actions');
+    if (actionsContainer && eventArg.composedPath().includes(actionsContainer)) {
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent('row-select', {
+        detail: { selected: this.selected },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private handleKeydown(eventArg: KeyboardEvent): void {
+    if (eventArg.key === 'Enter' || eventArg.key === ' ') {
+      eventArg.preventDefault();
+      this.handleSelect(eventArg);
+    }
+  }
+}