@social.io/catalog 1.3.0 → 2.0.0

package/ts_web/elements/index.ts

@@ -1,16 +1,39 @@
-// Core components
+// design tokens — custom props, glass recipes, SF type ramp
+export * from './tokens.js';
+
+// foundation
 export * from './sio-icon.js';
 export * from './sio-button.js';
+export * from './sio-kbd.js';
+export * from './sio-chip.js';
+export * from './sio-avatar.js';
+export * from './sio-unread-badge.js';
+
+// chrome & navigation
+export * from './sio-glass-toolbar.js';
+export * from './sio-segmented.js';
+export * from './sio-tab-bar.js';
+export * from './sio-channel-rail.js';
 export * from './sio-dropdown-menu.js';
 
-// Conversation components
+// lists & feed
+export * from './sio-list-row.js';
+export * from './sio-inset-list.js';
+export * from './sio-bucket-header.js';
+
+// content & input
+export * from './sio-ai-card.js';
+export * from './sio-composer.js';
+export * from './sio-cmdk.js';
+export * from './sio-waveform.js';
+export * from './sio-step-timeline.js';
+export * from './sio-paper-thumb.js';
+
+// embeddable chat-widget suite
+export * from './sio-fab.js';
+export * from './sio-combox.js';
 export * from './sio-conversation-selector.js';
 export * from './sio-conversation-view.js';
 export * from './sio-message-input.js';
-export * from './sio-combox.js';
-
-// Other components
-export * from './sio-fab.js';
-export * from './sio-recorder.js';
 export * from './sio-image-lightbox.js';
 export * from './sio-pdf-viewer.js';

package/ts_web/elements/sio-ai-card.ts

@@ -0,0 +1,175 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+
+/**
+ * Accent source for the card. Empty string = system tint (default);
+ * a channel name colors the card with the channel palette instead
+ * (bg 8% / border 28% per the unified detail design).
+ */
+export type TSioAiCardChannel = '' | 'mail' | 'chats' | 'calls' | 'letters';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-ai-card': SioAiCard;
+  }
+}
+
+/**
+ * sio-ai-card — the shared AI surface of social.io v7.
+ *
+ * Tint-soft (or channel-color 8%) background, 0.5px hairline border at
+ * color-mix 25–28%, radius 12. Header row: sparkle icon + uppercase
+ * 11/700 tinted eyebrow. Slotted children render as bullet lines,
+ * each prefixed with a tinted dot (disable via `plain` for the
+ * single-paragraph summary style).
+ *
+ * Design sources: SocialIODesktop.jsx (thread AI summary),
+ * SocialIOUnified.jsx (channel-colored summary),
+ * SocialIOChannels.jsx (letters "translated" summary).
+ */
+@customElement('sio-ai-card')
+export class SioAiCard extends DeesElement {
+  public static demo = () => html`
+    <div
+      style="display: grid; gap: 14px; max-width: 640px; padding: 24px; background: var(--sio-bg); font-family: var(--sio-font-sf);"
+    >
+      <sio-ai-card label="Summary · 4 messages">
+        <div>Lena rewrote the hero and the "three lanes" section based on Tuesday's feedback.</div>
+        <div>Two open questions: (1) keep the Hey-style screener mention, (2) tighten the closing CTA.</div>
+        <div>She's asking for a 15-min sync before Tuesday's ship.</div>
+      </sio-ai-card>
+
+      <sio-ai-card label="Summary" translated-to="English" plain>
+        <div>
+          2024 tax assessment — <b>refund of €1,284.60</b> due to you. Will be paid to your
+          registered bank account within 4 weeks. Objection period: 1 month.
+        </div>
+      </sio-ai-card>
+
+      <sio-ai-card label="AI summary" channel="letters" plain>
+        <div>Scanned at Berlin-Mitte hub. Objection deadline in 28 days.</div>
+      </sio-ai-card>
+
+      <sio-ai-card label="AI summary" channel="chats" plain>
+        <div>Lena: "bumping this — should we hold the banner for Thursday?"</div>
+      </sio-ai-card>
+    </div>
+  `;
+
+  /** Eyebrow text, rendered uppercase — e.g. "Summary · 4 messages". */
+  @property({ type: String })
+  public accessor label = 'Summary';
+
+  /** Channel accent; empty = system tint. */
+  @property({ type: String, reflect: true })
+  public accessor channel: TSioAiCardChannel = '';
+
+  /** Translated variant — appends "· translated to <language>" to the eyebrow. */
+  @property({ type: String, attribute: 'translated-to' })
+  public accessor translatedTo = '';
+
+  /** Single-paragraph summary style: no tinted dot in front of slotted lines. */
+  @property({ type: Boolean, reflect: true })
+  public accessor plain = false;
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: block;
+        --sio-ai-accent: var(--sio-tint);
+        --sio-ai-bg: var(--sio-tint-soft);
+        --sio-ai-border: color-mix(in oklab, var(--sio-tint) 25%, transparent);
+      }
+      :host([channel='mail']) {
+        --sio-ai-accent: var(--sio-ch-mail);
+        --sio-ai-bg: color-mix(in oklab, var(--sio-ch-mail) 8%, transparent);
+        --sio-ai-border: color-mix(in oklab, var(--sio-ch-mail) 28%, transparent);
+      }
+      :host([channel='chats']) {
+        --sio-ai-accent: var(--sio-ch-chats);
+        --sio-ai-bg: color-mix(in oklab, var(--sio-ch-chats) 8%, transparent);
+        --sio-ai-border: color-mix(in oklab, var(--sio-ch-chats) 28%, transparent);
+      }
+      :host([channel='calls']) {
+        --sio-ai-accent: var(--sio-ch-calls);
+        --sio-ai-bg: color-mix(in oklab, var(--sio-ch-calls) 8%, transparent);
+        --sio-ai-border: color-mix(in oklab, var(--sio-ch-calls) 28%, transparent);
+      }
+      :host([channel='letters']) {
+        --sio-ai-accent: var(--sio-ch-letters);
+        --sio-ai-bg: color-mix(in oklab, var(--sio-ch-letters) 8%, transparent);
+        --sio-ai-border: color-mix(in oklab, var(--sio-ch-letters) 28%, transparent);
+      }
+
+      .card {
+        padding: 14px 16px;
+        border-radius: var(--sio-radius-md);
+        background: var(--sio-ai-bg);
+        border: var(--sio-hairline) solid var(--sio-ai-border);
+      }
+
+      .eyebrow {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+        font-size: 11px;
+        line-height: 13px;
+        font-weight: 700;
+        letter-spacing: 0.06px;
+        text-transform: uppercase;
+        color: var(--sio-ai-accent);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .eyebrow sio-icon {
+        flex: 0 0 auto;
+      }
+
+      ::slotted(*) {
+        display: flex;
+        gap: 8px;
+        margin: 0 0 3px;
+        font-size: 13.5px;
+        line-height: 1.5;
+        color: var(--sio-label);
+      }
+
+      ::slotted(*:last-child) {
+        margin-bottom: 0;
+      }
+
+      ::slotted(*)::before {
+        content: '·';
+        color: var(--sio-ai-accent);
+        flex: 0 0 auto;
+      }
+
+      :host([plain]) ::slotted(*)::before {
+        content: none;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const suffix = this.translatedTo ? ` · translated to ${this.translatedTo}` : '';
+    return html`
+      <div class="card" part="card">
+        <div class="eyebrow" part="eyebrow">
+          <sio-icon icon="sparkles" size="11" .strokeWidth=${2}></sio-icon>
+          <span>${this.label}${suffix}</span>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/ts_web/elements/sio-avatar.ts

@@ -0,0 +1,295 @@
+import {
+  DeesElement,
+  html,
+  property,
+  state,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+
+export type TSioAvatarPresence = 'none' | 'online';
+export type TSioAvatarChannelBadge = 'none' | 'mail' | 'chats' | 'calls' | 'letters';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-avatar': SioAvatar;
+    'sio-avatar-stack': SioAvatarStack;
+  }
+}
+
+/**
+ * channel badge recipes — 18px glyph circle bottom-right of the avatar,
+ * solid channel color with a 2px surface ring (v7 SIOUniRow).
+ */
+const channelBadgeRecipes: Record<
+  Exclude<TSioAvatarChannelBadge, 'none'>,
+  { icon: string; color: string }
+> = {
+  mail: { icon: 'envelope', color: 'var(--sio-ch-mail)' },
+  chats: { icon: 'message-circle', color: 'var(--sio-ch-chats)' },
+  calls: { icon: 'phone', color: 'var(--sio-ch-calls)' },
+  letters: { icon: 'file-text', color: 'var(--sio-ch-letters)' },
+};
+
+/**
+ * sio-avatar — initials on a tinted circle (v7 `.sio-avatar`).
+ *
+ * The tint is data-driven (each person carries their own accent color),
+ * so it is passed in as a prop; it defaults to the system tint token.
+ * Optional presence dot (online) and channel badge, both ringed with
+ * 2px of surface color so they read on top of list rows.
+ */
+@customElement('sio-avatar')
+export class SioAvatar extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; flex-direction: column; gap: 20px;">
+      <div style="display: flex; gap: 14px; align-items: center;">
+        <sio-avatar initials="LP" tint="#FF6B8A" size="56"></sio-avatar>
+        <sio-avatar initials="MV" tint="#0A84FF" size="44"></sio-avatar>
+        <sio-avatar initials="PS" tint="#30D158"></sio-avatar>
+        <sio-avatar initials="L" tint="#5E6AD2" size="34"></sio-avatar>
+        <sio-avatar initials="FA" tint="#A2845E" size="28"></sio-avatar>
+        <sio-avatar initials="JW" tint="#FF9F0A" size="20"></sio-avatar>
+      </div>
+      <div style="display: flex; gap: 14px; align-items: center;">
+        <sio-avatar initials="LP" tint="#FF6B8A" size="44" presence="online"></sio-avatar>
+        <sio-avatar initials="MV" tint="#0A84FF" size="40" channelBadge="mail"></sio-avatar>
+        <sio-avatar initials="LP" tint="#FF6B8A" size="40" channelBadge="chats"></sio-avatar>
+        <sio-avatar initials="PS" tint="#30D158" size="40" channelBadge="calls"></sio-avatar>
+        <sio-avatar initials="FA" tint="#A2845E" size="40" channelBadge="letters"></sio-avatar>
+      </div>
+      <div style="display: flex; gap: 24px; align-items: center;">
+        <sio-avatar-stack size="32">
+          <sio-avatar initials="LP" tint="#FF6B8A" size="32"></sio-avatar>
+          <sio-avatar initials="MV" tint="#0A84FF" size="32"></sio-avatar>
+          <sio-avatar initials="PS" tint="#30D158" size="32"></sio-avatar>
+        </sio-avatar-stack>
+        <sio-avatar-stack max="3" size="24">
+          <sio-avatar initials="LP" tint="#FF6B8A" size="24"></sio-avatar>
+          <sio-avatar initials="MV" tint="#0A84FF" size="24"></sio-avatar>
+          <sio-avatar initials="PS" tint="#30D158" size="24"></sio-avatar>
+          <sio-avatar initials="JW" tint="#FF9F0A" size="24"></sio-avatar>
+          <sio-avatar initials="AK" tint="#5E6AD2" size="24"></sio-avatar>
+        </sio-avatar-stack>
+      </div>
+    </div>
+  `;
+
+  @property({ type: String })
+  public accessor initials = '';
+
+  /** person accent color (data-driven); any CSS color, tokens welcome */
+  @property({ type: String })
+  public accessor tint = 'var(--sio-tint)';
+
+  @property({ type: Number })
+  public accessor size = 40;
+
+  @property({ type: String })
+  public accessor presence: TSioAvatarPresence = 'none';
+
+  @property({ type: String })
+  public accessor channelBadge: TSioAvatarChannelBadge = 'none';
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+        flex-shrink: 0;
+      }
+
+      .wrapper {
+        position: relative;
+        flex-shrink: 0;
+        display: inline-flex;
+      }
+
+      /* v7 .sio-avatar — initials on tinted circle, white per design */
+      .avatar {
+        border-radius: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-family: var(--sio-font-sf);
+        font-weight: 600;
+        letter-spacing: -0.2px;
+        color: #fff; /* on-tint constant across themes (v7 .sio-avatar) */
+        user-select: none;
+      }
+
+      .presence {
+        position: absolute;
+        right: -1px;
+        bottom: -1px;
+        border-radius: 50%;
+        background: var(--sio-green);
+        border: 2px solid var(--sio-surface);
+      }
+
+      .channelBadge {
+        position: absolute;
+        right: -3px;
+        bottom: -3px;
+        width: 18px;
+        height: 18px;
+        border-radius: 9px;
+        color: #fff; /* glyph on solid channel color */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid var(--sio-surface);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const fontSize = Math.round(this.size * 0.4);
+    const presenceSize = Math.max(8, Math.round(this.size * 0.27));
+    const badge = this.channelBadge !== 'none' ? channelBadgeRecipes[this.channelBadge] : null;
+    return html`
+      <div class="wrapper">
+        <div
+          class="avatar"
+          style="width: ${this.size}px; height: ${this.size}px; font-size: ${fontSize}px; background: ${this.tint};"
+        >
+          ${this.initials}
+        </div>
+        ${this.presence === 'online'
+          ? html`<div class="presence" style="width: ${presenceSize}px; height: ${presenceSize}px;"></div>`
+          : ''}
+        ${badge
+          ? html`
+              <div class="channelBadge" style="background: ${badge.color};">
+                <sio-icon icon=${badge.icon} size="10"></sio-icon>
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+}
+
+/**
+ * sio-avatar-stack — overlapping avatar row (thread participants).
+ * Slotted sio-avatar elements overlap by -8px, each ringed with 2px of
+ * surface color; avatars beyond `max` collapse into a "+N" bubble.
+ */
+@customElement('sio-avatar-stack')
+export class SioAvatarStack extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; gap: 24px; align-items: center;">
+      <sio-avatar-stack size="32">
+        <sio-avatar initials="LP" tint="#FF6B8A" size="32"></sio-avatar>
+        <sio-avatar initials="MV" tint="#0A84FF" size="32"></sio-avatar>
+        <sio-avatar initials="PS" tint="#30D158" size="32"></sio-avatar>
+      </sio-avatar-stack>
+      <sio-avatar-stack max="3" size="28">
+        <sio-avatar initials="LP" tint="#FF6B8A" size="28"></sio-avatar>
+        <sio-avatar initials="MV" tint="#0A84FF" size="28"></sio-avatar>
+        <sio-avatar initials="PS" tint="#30D158" size="28"></sio-avatar>
+        <sio-avatar initials="JW" tint="#FF9F0A" size="28"></sio-avatar>
+        <sio-avatar initials="AK" tint="#5E6AD2" size="28"></sio-avatar>
+        <sio-avatar initials="RB" tint="#A2845E" size="28"></sio-avatar>
+      </sio-avatar-stack>
+      <sio-avatar-stack max="2" size="24">
+        <sio-avatar initials="LP" tint="#FF6B8A" size="24"></sio-avatar>
+        <sio-avatar initials="MV" tint="#0A84FF" size="24"></sio-avatar>
+        <sio-avatar initials="PS" tint="#30D158" size="24"></sio-avatar>
+        <sio-avatar initials="JW" tint="#FF9F0A" size="24"></sio-avatar>
+      </sio-avatar-stack>
+    </div>
+  `;
+
+  /** visible avatars before collapsing into "+N" */
+  @property({ type: Number })
+  public accessor max = 4;
+
+  /** diameter of the "+N" overflow bubble — match the slotted avatar size */
+  @property({ type: Number })
+  public accessor size = 28;
+
+  @state()
+  private accessor overflowCount = 0;
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      ::slotted(sio-avatar) {
+        border-radius: 50%;
+        box-shadow: 0 0 0 2px var(--sio-surface);
+      }
+
+      ::slotted(sio-avatar:not(:first-child)) {
+        margin-left: -8px;
+      }
+
+      ::slotted(sio-avatar[data-sio-stack-overflow]) {
+        display: none;
+      }
+
+      .overflow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        margin-left: -8px;
+        border-radius: 50%;
+        background: var(--sio-surface-2);
+        color: var(--sio-label-2);
+        font-family: var(--sio-font-sf);
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+        box-shadow: 0 0 0 2px var(--sio-surface);
+        user-select: none;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const overflowFontSize = Math.max(9, Math.round(this.size * 0.36));
+    return html`
+      <slot @slotchange=${this.recomputeStack}></slot>
+      ${this.overflowCount > 0
+        ? html`
+            <span
+              class="overflow"
+              style="width: ${this.size}px; height: ${this.size}px; font-size: ${overflowFontSize}px;"
+            >
+              +${this.overflowCount}
+            </span>
+          `
+        : ''}
+    `;
+  }
+
+  public updated(changedProperties: Map<PropertyKey, unknown>) {
+    if (changedProperties.has('max')) {
+      this.recomputeStack();
+    }
+  }
+
+  private recomputeStack = () => {
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) {
+      return;
+    }
+    const avatars = slot
+      .assignedElements()
+      .filter((element) => element.tagName.toLowerCase() === 'sio-avatar');
+    avatars.forEach((element, index) => {
+      element.toggleAttribute('data-sio-stack-overflow', index >= this.max);
+    });
+    this.overflowCount = Math.max(0, avatars.length - this.max);
+  };
+}

package/ts_web/elements/sio-bucket-header.ts

@@ -0,0 +1,157 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles, sioTabularNums } from './tokens.js';
+
+/**
+ * Known tint keys resolve to v7 palette tokens; anything else is passed
+ * through verbatim so callers can hand in `var(--sio-…)` references.
+ */
+export type TSioBucketTint =
+  | 'now'
+  | 'today'
+  | 'later'
+  | 'done'
+  | 'feed'
+  | 'paper'
+  | 'people'
+  | 'mail'
+  | 'chats'
+  | 'calls'
+  | 'letters'
+  | 'tint'
+  | string;
+
+const bucketTintVars: Record<string, string> = {
+  now: 'var(--sio-bucket-now)',
+  today: 'var(--sio-bucket-today)',
+  later: 'var(--sio-bucket-later)',
+  done: 'var(--sio-bucket-done)',
+  feed: 'var(--sio-lane-feed)',
+  paper: 'var(--sio-lane-paper)',
+  people: 'var(--sio-lane-people)',
+  mail: 'var(--sio-ch-mail)',
+  chats: 'var(--sio-ch-chats)',
+  calls: 'var(--sio-ch-calls)',
+  letters: 'var(--sio-ch-letters)',
+  tint: 'var(--sio-tint)',
+};
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-bucket-header': SioBucketHeader;
+  }
+}
+
+/**
+ * sio-bucket-header — triage bucket band of the unified feed
+ * (design source: SIOBucketHeader in SocialIOUnified.jsx).
+ *
+ * 6px color dot + uppercase 13/700 tinted label + tabular count,
+ * optional right-aligned subtitle, on a faint 2% label-tint band.
+ * A default slot after the subtitle takes custom trailing content.
+ */
+@customElement('sio-bucket-header')
+export class SioBucketHeader extends DeesElement {
+  public static demo = () => html`
+    <div style="max-width: 420px; font-family: var(--sio-font-sf); background: var(--sio-bg); border-radius: 12px; overflow: hidden;">
+      <sio-bucket-header label="Now" count="2" tint="now" subtitle="needs reply today"></sio-bucket-header>
+      <div style="background: var(--sio-surface); height: 44px;"></div>
+      <sio-bucket-header label="Today" count="4" tint="today"></sio-bucket-header>
+      <div style="background: var(--sio-surface); height: 44px;"></div>
+      <sio-bucket-header label="Later" count="7" tint="later"></sio-bucket-header>
+      <div style="background: var(--sio-surface); height: 44px;"></div>
+      <sio-bucket-header label="Done" count="12" tint="done" subtitle="cleared this week"></sio-bucket-header>
+      <div style="background: var(--sio-surface); height: 44px;"></div>
+      <sio-bucket-header label="Yesterday" count="3" tint="tint"></sio-bucket-header>
+      <div style="background: var(--sio-surface); height: 44px;"></div>
+    </div>
+  `;
+
+  /** Bucket label — rendered uppercase, 13px / 700, tinted. */
+  @property({ type: String })
+  public accessor label = '';
+
+  /** Item count — rendered as "· n" with tabular-nums. Omit to hide. */
+  @property({ type: Number })
+  public accessor count: number | undefined = undefined;
+
+  /** Optional right-aligned subtitle on the band (e.g. "needs reply today"). */
+  @property({ type: String })
+  public accessor subtitle = '';
+
+  /**
+   * Bucket tint: now | today | later | done, lane keys (feed/paper/people),
+   * channel keys (mail/chats/calls/letters), 'tint', or any CSS color value.
+   */
+  @property({ type: String })
+  public accessor tint: TSioBucketTint = 'later';
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--sio-font-sf);
+      }
+      .header {
+        padding: 16px 16px 8px;
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        /* faint band — ~2% label ink over the grouped background */
+        background: color-mix(in oklab, var(--sio-label) 2%, transparent);
+      }
+      .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 3px;
+        background: var(--_bucket-tint);
+        flex-shrink: 0;
+      }
+      .label {
+        font-size: 13px;
+        font-weight: 700;
+        color: var(--_bucket-tint);
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+      .count {
+        font-size: 11px;
+        color: var(--sio-label-3);
+        ${sioTabularNums}
+      }
+      .spacer {
+        flex: 1;
+      }
+      .subtitle {
+        font-size: 11px;
+        color: var(--sio-label-3);
+      }
+    `,
+  ];
+
+  private get resolvedTint(): string {
+    return bucketTintVars[this.tint] ?? this.tint;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="header" style="--_bucket-tint: ${this.resolvedTint}">
+        <div class="dot"></div>
+        <span class="label">${this.label}</span>
+        ${typeof this.count === 'number' && !Number.isNaN(this.count)
+          ? html`<span class="count">· ${this.count}</span>`
+          : html``}
+        <span class="spacer"></span>
+        ${this.subtitle ? html`<span class="subtitle">${this.subtitle}</span>` : html``}
+        <slot></slot>
+      </div>
+    `;
+  }
+}