@social.io/catalog 1.3.0 → 2.1.0

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>
+    `;
+  }
+}