@social.io/catalog 1.3.0 → 2.0.0

package/ts_web/elements/sio-tab-bar.ts

@@ -0,0 +1,195 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-tab-bar': SioTabBar;
+  }
+}
+
+export interface ISioTabBarChannel {
+  id: string;
+  label: string;
+  color: string;
+  icon: string;
+}
+
+export interface ISioTabChangeDetail {
+  id: string;
+  channel: ISioTabBarChannel;
+}
+
+/**
+ * The v7 channel set — All / Mail / Chats / Calls / Letters
+ * (prototype: SIO_CHANNELS in SocialIOData.jsx).
+ */
+const defaultChannels: ISioTabBarChannel[] = [
+  { id: 'all', label: 'All', color: 'var(--sio-blue)', icon: 'grid-2x2' },
+  { id: 'mail', label: 'Mail', color: 'var(--sio-ch-mail)', icon: 'mail' },
+  { id: 'chats', label: 'Chats', color: 'var(--sio-ch-chats)', icon: 'message-circle' },
+  { id: 'calls', label: 'Calls', color: 'var(--sio-ch-calls)', icon: 'phone' },
+  { id: 'letters', label: 'Letters', color: 'var(--sio-ch-letters)', icon: 'file-text' },
+];
+
+const calendarChannel: ISioTabBarChannel = {
+  id: 'calendar',
+  label: 'Calendar',
+  color: 'var(--sio-blue)',
+  icon: 'calendar',
+};
+
+/**
+ * sio-tab-bar — the mobile bottom channel switcher (v7 prototype:
+ * SIOTabBar in SocialIOChannels.jsx).
+ *
+ * A liquid-glass bar (blur 28px saturate 180%, 0.5px top hairline) with one
+ * flex-equal tab per channel: 22px icon over a 10.5px label. The active tab
+ * lights up in its channel color; 30px bottom padding clears the iOS home
+ * indicator. Selecting a tab dispatches `tab-change` with `{ id, channel }`
+ * (bubbles, composed).
+ */
+@customElement('sio-tab-bar')
+export class SioTabBar extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; max-width: 390px; font-family: var(--sio-font-sf);">
+      <!-- Mail active -->
+      <div
+        style="border-radius: 20px; overflow: hidden; border: var(--sio-hairline) solid var(--sio-separator); background: var(--sio-bg);"
+      >
+        <div style="padding: 18px 16px 26px;">
+          <div style="font-size: 28px; font-weight: 700; letter-spacing: 0.36px; color: var(--sio-label);">Mail</div>
+          <div style="margin-top: 3px; font-size: 13px; color: var(--sio-label-3);">
+            4 unread · Feed 12 · Paper 4 · People 3
+          </div>
+        </div>
+        <sio-tab-bar active="mail"></sio-tab-bar>
+      </div>
+
+      <!-- Chats active, with the optional Calendar tab -->
+      <div
+        style="border-radius: 20px; overflow: hidden; border: var(--sio-hairline) solid var(--sio-separator); background: var(--sio-bg);"
+      >
+        <div style="padding: 18px 16px 26px;">
+          <div style="font-size: 28px; font-weight: 700; letter-spacing: 0.36px; color: var(--sio-label);">Chats</div>
+          <div style="margin-top: 3px; font-size: 13px; color: var(--sio-label-3);">
+            3 new · Lena is typing…
+          </div>
+        </div>
+        <sio-tab-bar active="chats" .withCalendar=${true}></sio-tab-bar>
+      </div>
+    </div>
+  `;
+
+  @property({ type: Array })
+  public accessor channels: ISioTabBarChannel[] = defaultChannels;
+
+  @property({ type: String })
+  public accessor active = 'mail';
+
+  @property({ type: Boolean })
+  public accessor withCalendar = false;
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      /* toolbar glass, hairline on the top edge (the bar sits at the bottom) */
+      .bar {
+        display: flex;
+        padding: 8px 0 30px; /* 30px clears the iOS home indicator */
+        background: var(--sio-toolbar-glass-bg);
+        backdrop-filter: blur(28px) saturate(180%);
+        -webkit-backdrop-filter: blur(28px) saturate(180%);
+        border-top: var(--sio-hairline) solid var(--sio-separator);
+      }
+
+      .tab {
+        appearance: none;
+        border: none;
+        margin: 0;
+        padding: 0;
+        background: transparent;
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2px;
+        font-family: var(--sio-font-sf);
+        color: var(--sio-label-3);
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: color 120ms ease;
+      }
+
+      .tab.active {
+        color: var(--_channel-color, var(--sio-tint));
+      }
+
+      .tab:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-tint) 40%, transparent);
+        outline-offset: -2px;
+        border-radius: var(--sio-radius-sm);
+      }
+
+      .label {
+        font-size: 10.5px;
+        font-weight: 500;
+        letter-spacing: 0.02px;
+        line-height: 1.25;
+        white-space: nowrap;
+      }
+
+      .tab.active .label {
+        font-weight: 600;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const tabs = this.withCalendar ? [...this.channels, calendarChannel] : this.channels;
+    return html`
+      <nav class="bar" part="bar">
+        ${tabs.map(
+          (channel) => html`
+            <button
+              type="button"
+              class="tab ${channel.id === this.active ? 'active' : ''}"
+              style="--_channel-color: ${channel.color}"
+              aria-current=${channel.id === this.active ? 'page' : 'false'}
+              @click=${() => this.handleSelect(channel)}
+            >
+              <sio-icon icon=${channel.icon} size="22" .strokeWidth=${1.7}></sio-icon>
+              <span class="label">${channel.label}</span>
+            </button>
+          `,
+        )}
+      </nav>
+    `;
+  }
+
+  private handleSelect(channel: ISioTabBarChannel): void {
+    if (channel.id === this.active) {
+      return;
+    }
+    this.active = channel.id;
+    this.dispatchEvent(
+      new CustomEvent<ISioTabChangeDetail>('tab-change', {
+        detail: { id: channel.id, channel },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}

package/ts_web/elements/sio-unread-badge.ts

@@ -0,0 +1,147 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js'; // used by the static demo
+
+export type TSioUnreadBadgeChannel = 'tint' | 'mail' | 'chats' | 'calls' | 'letters' | 'alert';
+export type TSioUnreadBadgeSize = 'md' | 'sm';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-unread-badge': SioUnreadBadge;
+  }
+}
+
+const badgeColors: Record<TSioUnreadBadgeChannel, string> = {
+  tint: 'var(--sio-tint)',
+  mail: 'var(--sio-ch-mail)',
+  chats: 'var(--sio-ch-chats)',
+  calls: 'var(--sio-ch-calls)',
+  letters: 'var(--sio-ch-letters)',
+  alert: 'var(--sio-red)',
+};
+
+/**
+ * sio-unread-badge — count pill on solid channel color (v7 chat list /
+ * channel rail / widget launcher). md: min-width 20, height 20, radius 10,
+ * 11.5/700 tabular white. sm (rails): 16px with 10px numerals.
+ * `ring` adds the 2px surface ring used when the pill sits on an icon.
+ */
+@customElement('sio-unread-badge')
+export class SioUnreadBadge extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="display: flex; gap: 10px; align-items: center;">
+        <sio-unread-badge count="3" channel="chats"></sio-unread-badge>
+        <sio-unread-badge count="12" channel="mail"></sio-unread-badge>
+        <sio-unread-badge count="1" channel="calls"></sio-unread-badge>
+        <sio-unread-badge count="2" channel="letters"></sio-unread-badge>
+        <sio-unread-badge count="4"></sio-unread-badge>
+        <sio-unread-badge count="1" channel="alert"></sio-unread-badge>
+      </div>
+      <div style="display: flex; gap: 10px; align-items: center;">
+        <sio-unread-badge count="3" channel="chats" size="sm"></sio-unread-badge>
+        <sio-unread-badge count="12" channel="mail" size="sm"></sio-unread-badge>
+        <sio-unread-badge count="5" channel="calls" size="sm" ring></sio-unread-badge>
+      </div>
+      <div style="display: flex; gap: 22px; align-items: center;">
+        <span style="position: relative; display: inline-flex;">
+          <sio-icon icon="envelope" size="20" style="color: var(--sio-ch-mail);"></sio-icon>
+          <sio-unread-badge
+            count="3"
+            channel="mail"
+            size="sm"
+            ring
+            style="position: absolute; top: -5px; right: -9px;"
+          ></sio-unread-badge>
+        </span>
+        <span style="position: relative; display: inline-flex;">
+          <sio-icon icon="message-circle" size="20" style="color: var(--sio-ch-chats);"></sio-icon>
+          <sio-unread-badge
+            count="7"
+            channel="chats"
+            size="sm"
+            ring
+            style="position: absolute; top: -5px; right: -9px;"
+          ></sio-unread-badge>
+        </span>
+      </div>
+    </div>
+  `;
+
+  @property({ type: Number })
+  public accessor count = 0;
+
+  @property({ type: String })
+  public accessor channel: TSioUnreadBadgeChannel = 'tint';
+
+  @property({ type: String })
+  public accessor size: TSioUnreadBadgeSize = 'md';
+
+  /** 2px surface ring — for pills sitting on rail icons */
+  @property({ type: Boolean })
+  public accessor ring = false;
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+        flex-shrink: 0;
+      }
+
+      .badge {
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 20px;
+        height: 20px;
+        padding: 0 6px;
+        border-radius: 10px;
+        background: var(--badge-color);
+        color: #fff; /* white numerals on solid channel color per v7 */
+        font-family: var(--sio-font-sf);
+        font-size: 11.5px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        line-height: 1;
+        white-space: nowrap;
+        user-select: none;
+      }
+
+      .badge.sm {
+        min-width: 16px;
+        height: 16px;
+        padding: 0 5px;
+        border-radius: 8px;
+        font-size: 10px;
+      }
+
+      .badge.ring {
+        box-shadow: 0 0 0 2px var(--sio-surface);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (this.count <= 0) {
+      return html``;
+    }
+    return html`
+      <span
+        class="badge ${this.size === 'sm' ? 'sm' : ''} ${this.ring ? 'ring' : ''}"
+        style="--badge-color: ${badgeColors[this.channel] || badgeColors.tint};"
+      >
+        ${this.count}
+      </span>
+    `;
+  }
+}

package/ts_web/elements/sio-waveform.ts

@@ -0,0 +1,239 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-waveform': SioWaveform;
+  }
+}
+
+/**
+ * sio-waveform — v7 voicemail / voice-message player.
+ *
+ * A surface card with a round play/pause control, a deterministic bar-chart
+ * waveform (played bars in the channel color, the rest in systemGray @ 45%
+ * per the v7 spec) and tabular elapsed / -remaining counters.
+ *
+ * Clicking the waveform dispatches `seek` ({ progress }); the play control
+ * toggles and dispatches `play` / `pause` ({ progress }).
+ */
+@customElement('sio-waveform')
+export class SioWaveform extends DeesElement {
+  public static demo = () => html`
+    <div
+      style="display: flex; flex-direction: column; gap: 20px; max-width: 420px; padding: 20px; background: var(--sio-bg); border-radius: 18px; font-family: var(--sio-font-sf);"
+    >
+      <div>
+        <div style="font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: var(--sio-label);">
+          Maren Vogel
+        </div>
+        <div style="font-size: 13px; color: var(--sio-label-3); margin-top: 2px;">
+          Today 09:41 · 1:47 · Voicemail
+        </div>
+      </div>
+      <sio-waveform progress="0.28" elapsed="0:28" remaining="-1:19"></sio-waveform>
+      <sio-waveform
+        progress="0.62"
+        playing
+        elapsed="1:06"
+        remaining="-0:41"
+        color="var(--sio-ch-chats)"
+        bars="64"
+      ></sio-waveform>
+      <sio-waveform progress="0" elapsed="0:00" remaining="-1:47" color="var(--sio-tint)"></sio-waveform>
+    </div>
+  `;
+
+  /** Number of waveform bars (the v7 voicemail player draws 50). */
+  @property({ type: Number })
+  public accessor bars: number = 50;
+
+  /** Playback position, 0–1. Played bars take the channel color. */
+  @property({ type: Number })
+  public accessor progress: number = 0;
+
+  /** Accent for played bars + play control. Any CSS color, defaults to the calls channel. */
+  @property({ type: String })
+  public accessor color: string = 'var(--sio-ch-calls)';
+
+  /** Elapsed counter, e.g. "0:28". */
+  @property({ type: String })
+  public accessor elapsed: string = '0:00';
+
+  /** Remaining counter, e.g. "-1:19". */
+  @property({ type: String })
+  public accessor remaining: string = '-0:00';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor playing = false;
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: block;
+
+        /* systemGray (#8E8E93) @ 45% — unplayed bars per the v7 spec */
+        --sio-waveform-rest: color-mix(in oklab, var(--sio-bucket-later) 45%, transparent);
+      }
+
+      .player {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 14px 16px;
+        background: var(--sio-surface);
+        border: var(--sio-hairline) solid var(--sio-separator);
+        border-radius: 16px;
+      }
+
+      .playButton {
+        width: 44px;
+        height: 44px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        border-radius: 22px;
+        padding: 0;
+        cursor: pointer;
+        font: inherit;
+        transition: transform 80ms ease, filter 120ms ease;
+      }
+      .playButton:hover {
+        filter: brightness(1.06);
+      }
+      .playButton:active {
+        transform: scale(0.94);
+      }
+      .playButton:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-tint) 60%, transparent);
+        outline-offset: 2px;
+      }
+      .playButton svg {
+        display: block;
+      }
+
+      .track {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .wave {
+        display: block;
+        width: 100%;
+        height: 28px;
+        cursor: pointer;
+      }
+
+      .counters {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 2px;
+        font-size: 11px;
+        line-height: 13px;
+        color: var(--sio-label-3);
+        font-variant-numeric: tabular-nums;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const barCount = Math.max(1, Math.floor(this.bars));
+    const clamped = Math.min(1, Math.max(0, this.progress));
+    const playedCount = Math.round(barCount * clamped);
+    const barTemplates: TemplateResult[] = [];
+    for (let i = 0; i < barCount; i++) {
+      // deterministic pseudo-random heights — transcribed from the v7 prototype
+      const h = 4 + Math.abs(Math.sin(i * 0.55) * 11) + Math.abs(Math.cos(i * 1.3) * 6);
+      barTemplates.push(html`
+        <rect
+          x=${i * 4}
+          y=${14 - h / 2}
+          width="2.2"
+          height=${h}
+          rx="1.1"
+          fill=${i < playedCount ? this.color : 'var(--sio-waveform-rest)'}
+        ></rect>
+      `);
+    }
+    return html`
+      <div class="player" part="player">
+        <button
+          class="playButton"
+          style="background: ${this.color};"
+          aria-label=${this.playing ? 'Pause' : 'Play'}
+          @click=${this.handlePlayToggle}
+        >
+          ${this.playing
+            ? html`
+                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
+                  <rect x="6" y="4.5" width="4.4" height="15" rx="1.6" fill="var(--sio-surface)"></rect>
+                  <rect x="13.6" y="4.5" width="4.4" height="15" rx="1.6" fill="var(--sio-surface)"></rect>
+                </svg>
+              `
+            : html`
+                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M7 5l12 7-12 7V5z" fill="var(--sio-surface)"></path>
+                </svg>
+              `}
+        </button>
+        <div class="track">
+          <svg
+            class="wave"
+            viewBox="0 0 ${barCount * 4} 28"
+            preserveAspectRatio="none"
+            role="slider"
+            aria-label="Playback position"
+            aria-valuemin="0"
+            aria-valuemax="1"
+            aria-valuenow=${clamped.toFixed(2)}
+            @click=${this.handleSeek}
+          >
+            ${barTemplates}
+          </svg>
+          <div class="counters">
+            <span>${this.elapsed}</span>
+            <span>${this.remaining}</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private handlePlayToggle() {
+    this.playing = !this.playing;
+    this.dispatchEvent(
+      new CustomEvent(this.playing ? 'play' : 'pause', {
+        detail: { progress: Math.min(1, Math.max(0, this.progress)) },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private handleSeek(event: MouseEvent) {
+    const wave = event.currentTarget as SVGSVGElement;
+    const rect = wave.getBoundingClientRect();
+    if (!rect.width) {
+      return;
+    }
+    const progress = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+    this.progress = progress;
+    this.dispatchEvent(
+      new CustomEvent('seek', {
+        detail: { progress },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}