@social.io/catalog 1.3.0 → 2.1.0

package/ts_web/elements/sio-icon.ts

@@ -3,13 +3,46 @@ import {
   html,
   property,
   customElement,
-  cssManager,
   css,
   type TemplateResult,
 } from '@design.estate/dees-element';
 
 import * as lucideIcons from 'lucide';
-import { createElement } from 'lucide';
+import {
+  Archive,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Clock,
+  Download,
+  FileText,
+  Forward,
+  Grid2x2,
+  Mail,
+  MessageCircle,
+  Mic,
+  MicOff,
+  MonitorUp,
+  Paperclip,
+  Pencil,
+  Phone,
+  PhoneOff,
+  Plus,
+  Reply,
+  Search,
+  Send,
+  Sparkles,
+  Star,
+  Trash2,
+  Users,
+  Video,
+  X,
+  createElement,
+  type IconNode,
+} from 'lucide';
+import { sioElementStyles } from './tokens.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -17,19 +50,86 @@ declare global {
   }
 }
 
+/**
+ * v7 icon aliases — the design's SF-symbol-flavored names mapped onto lucide.
+ * Anything not listed here falls through to the PascalCase lucide lookup,
+ * so every lucide icon stays addressable by its kebab-case name.
+ */
+const sioIconAliases: Record<string, IconNode> = {
+  // channels
+  envelope: Mail,
+  mail: Mail,
+  'message-circle': MessageCircle,
+  phone: Phone,
+  'file-text': FileText,
+  // unified feed / triage
+  'grid-2x2': Grid2x2,
+  grid: Grid2x2,
+  sparkles: Sparkles,
+  star: Star,
+  paperclip: Paperclip,
+  archive: Archive,
+  clock: Clock,
+  trash: Trash2,
+  reply: Reply,
+  forward: Forward,
+  // composer / navigation
+  search: Search,
+  send: Send,
+  plus: Plus,
+  chevron: ChevronRight,
+  'chevron-left': ChevronLeft,
+  'chevron-right': ChevronRight,
+  'chevron-up': ChevronUp,
+  'chevron-down': ChevronDown,
+  // calls / meetings
+  mic: Mic,
+  'mic-off': MicOff,
+  video: Video,
+  'monitor-up': MonitorUp,
+  users: Users,
+  'phone-off': PhoneOff,
+  // generic
+  check: Check,
+  x: X,
+  download: Download,
+  pencil: Pencil,
+};
+
 @customElement('sio-icon')
 export class SioIcon extends DeesElement {
   public static demo = () => html`
-    <div style="display: flex; gap: 16px; align-items: center;">
-      <sio-icon icon="search"></sio-icon>
-      <sio-icon icon="message-square" color="#3b82f6"></sio-icon>
-      <sio-icon icon="x" size="32"></sio-icon>
-      <sio-icon icon="send" strokeWidth="3"></sio-icon>
+    <div style="display: flex; flex-direction: column; gap: 16px; font-family: var(--sio-font-sf); color: var(--sio-label);">
+      <div style="display: flex; gap: 16px; align-items: center;">
+        <sio-icon icon="envelope" style="color: var(--sio-ch-mail);"></sio-icon>
+        <sio-icon icon="message-circle" style="color: var(--sio-ch-chats);"></sio-icon>
+        <sio-icon icon="phone" style="color: var(--sio-ch-calls);"></sio-icon>
+        <sio-icon icon="file-text" style="color: var(--sio-ch-letters);"></sio-icon>
+        <sio-icon icon="grid-2x2" style="color: var(--sio-tint);"></sio-icon>
+        <sio-icon icon="sparkles" style="color: var(--sio-tint);"></sio-icon>
+      </div>
+      <div style="display: flex; gap: 16px; align-items: center; color: var(--sio-label-3);">
+        <sio-icon icon="star" size="18"></sio-icon>
+        <sio-icon icon="paperclip" size="18"></sio-icon>
+        <sio-icon icon="archive" size="18"></sio-icon>
+        <sio-icon icon="clock" size="18"></sio-icon>
+        <sio-icon icon="reply" size="18"></sio-icon>
+        <sio-icon icon="forward" size="18"></sio-icon>
+        <sio-icon icon="trash" size="18" style="color: var(--sio-red);"></sio-icon>
+      </div>
+      <div style="display: flex; gap: 16px; align-items: center; color: var(--sio-label-2);">
+        <sio-icon icon="mic" size="20"></sio-icon>
+        <sio-icon icon="video" size="20"></sio-icon>
+        <sio-icon icon="monitor-up" size="20"></sio-icon>
+        <sio-icon icon="users" size="20"></sio-icon>
+        <sio-icon icon="phone-off" size="20" style="color: var(--sio-red);"></sio-icon>
+        <sio-icon icon="send" size="20" style="color: var(--sio-tint);"></sio-icon>
+      </div>
     </div>
   `;
 
   @property({ type: String })
-  public accessor icon: string;
+  public accessor icon: string = '';
 
   @property({ type: Number })
   public accessor size: number = 24;
@@ -38,7 +138,7 @@ export class SioIcon extends DeesElement {
   public accessor color: string = 'currentColor';
 
   @property({ type: Number })
-  public accessor strokeWidth: number = 2;
+  public accessor strokeWidth: number = 1.75;
 
   // Cache for rendered icons
   private static iconCache = new Map<string, string>();
@@ -51,7 +151,7 @@ export class SioIcon extends DeesElement {
   private lastStrokeWidth: number | null = null;
 
   public static styles = [
-    cssManager.defaultStyles,
+    ...sioElementStyles,
     css`
       :host {
         display: inline-flex;
@@ -59,14 +159,15 @@ export class SioIcon extends DeesElement {
         justify-content: center;
         line-height: 1;
         vertical-align: middle;
+        color: currentColor;
       }
-      
+
       #iconContainer {
         display: flex;
         align-items: center;
         justify-content: center;
       }
-      
+
       #iconContainer svg {
         display: block;
         width: 100%;
@@ -81,6 +182,31 @@ export class SioIcon extends DeesElement {
     `;
   }
 
+  private resolveIconNode(): IconNode | undefined {
+    const iconName = this.icon
+      .replace(/^lucide:/, '')
+      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+      .toLowerCase();
+
+    const aliasNode = sioIconAliases[iconName];
+    if (aliasNode) {
+      return aliasNode;
+    }
+
+    // Convert icon name to PascalCase (e.g., 'message-square' -> 'MessageSquare')
+    const pascalCaseName = iconName
+      .split('-')
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join('');
+
+    const lucideNode = (lucideIcons as Record<string, unknown>)[pascalCaseName];
+    if (Array.isArray(lucideNode)) {
+      return lucideNode as IconNode;
+    }
+
+    return undefined;
+  }
+
   public updated() {
     // Check if we need to update
     if (
@@ -114,33 +240,29 @@ export class SioIcon extends DeesElement {
     }
 
     try {
-      // Convert icon name to PascalCase (e.g., 'message-square' -> 'MessageSquare')
-      const pascalCaseName = this.icon
-        .split('-')
-        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
-        .join('');
-
-      const iconComponent = (lucideIcons as any)[pascalCaseName];
-      if (!iconComponent) {
-        console.warn(`Lucide icon '${pascalCaseName}' not found`);
+      const iconNode = this.resolveIconNode();
+      if (!iconNode) {
+        console.warn(`sio-icon: lucide icon '${this.icon}' not found`);
         return;
       }
 
       // Create the icon element
-      const svgElement = createElement(iconComponent, {
+      const svgElement = createElement(iconNode, {
         size: this.size,
         color: this.color,
         strokeWidth: this.strokeWidth,
       });
 
       if (svgElement) {
+        svgElement.setAttribute('aria-hidden', 'true');
+
         // Cache the result
         const svgString = svgElement.outerHTML;
         SioIcon.iconCache.set(cacheKey, svgString);
-        
+
         // Limit cache size
         if (SioIcon.iconCache.size > SioIcon.MAX_CACHE_SIZE) {
-          const firstKey = SioIcon.iconCache.keys().next().value;
+          const firstKey = SioIcon.iconCache.keys().next().value!;
           SioIcon.iconCache.delete(firstKey);
         }
 
@@ -160,4 +282,4 @@ export class SioIcon extends DeesElement {
     this.lastColor = null;
     this.lastStrokeWidth = null;
   }
-}
+}

package/ts_web/elements/sio-image-lightbox.ts

@@ -4,19 +4,15 @@ import {
   html,
   customElement,
   type TemplateResult,
-  cssManager,
   css,
-  unsafeCSS,
   state,
 } from '@design.estate/dees-element';
 
-// Import design tokens
-import { colors, bdTheme } from './00colors.js';
-import { spacing, radius, shadows, transitions } from './00tokens.js';
-import { fontFamilies } from './00fonts.js';
+import { sioElementStyles } from './tokens.js';
 
 // Import components
 import { SioPdfViewer } from './sio-pdf-viewer.js';
+import './sio-icon.js';
 SioPdfViewer;
 
 export interface ILightboxFile {
@@ -26,9 +22,6 @@ export interface ILightboxFile {
   type?: string;
 }
 
-// For backwards compatibility
-export type ILightboxImage = ILightboxFile;
-
 declare global {
   interface HTMLElementTagNameMap {
     'sio-image-lightbox': SioImageLightbox;
@@ -51,13 +44,7 @@ export class SioImageLightbox extends DeesElement {
   @property({ type: Object })
   public accessor file: ILightboxFile | null = null;
 
-  // For backwards compatibility
-  public get image(): ILightboxFile | null {
-    return this.file;
-  }
-  public set image(value: ILightboxFile | null) {
-    this.file = value;
-  }
+  private closeCleanupTimeout: ReturnType<typeof setTimeout> | null = null;
 
   @state()
   private accessor fileLoaded: boolean = false;
@@ -76,14 +63,14 @@ export class SioImageLightbox extends DeesElement {
   private startY: number = 0;
 
   public static styles = [
-    cssManager.defaultStyles,
+    ...sioElementStyles,
     css`
       :host {
         position: fixed;
         inset: 0;
         z-index: 10000;
         pointer-events: none;
-        font-family: ${unsafeCSS(fontFamilies.sans)};
+        font-family: var(--sio-font-sf);
         isolation: isolate;
       }
 
@@ -112,7 +99,7 @@ export class SioImageLightbox extends DeesElement {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: ${unsafeCSS(spacing["8"])};
+        padding: 32px;
         pointer-events: none;
         opacity: 0;
         transform: scale(0.9);
@@ -148,8 +135,8 @@ export class SioImageLightbox extends DeesElement {
         display: block;
         max-width: 100%;
         max-height: 90vh;
-        border-radius: ${unsafeCSS(radius.lg)};
-        box-shadow: ${unsafeCSS(shadows["2xl"])};
+        border-radius: var(--sio-radius-lg);
+        box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.35);
         opacity: 0;
         transition: opacity 300ms ease;
       }
@@ -157,13 +144,13 @@ export class SioImageLightbox extends DeesElement {
       .image.loaded {
         opacity: 1;
       }
-      
+
       .pdf-viewer {
         width: 90vw;
         height: 90vh;
-        border-radius: ${unsafeCSS(radius.lg)};
-        box-shadow: ${unsafeCSS(shadows["2xl"])};
-        background: white;
+        border-radius: var(--sio-radius-lg);
+        box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.35);
+        background: var(--sio-surface);
         opacity: 0;
         transition: opacity 300ms ease;
         border: none;
@@ -178,10 +165,10 @@ export class SioImageLightbox extends DeesElement {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        color: white;
+        color: #fff; /* on-scrim constant */
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(spacing["2"])};
+        gap: 8px;
       }
 
       .spinner {
@@ -199,10 +186,10 @@ export class SioImageLightbox extends DeesElement {
 
       .controls {
         position: absolute;
-        top: ${unsafeCSS(spacing["4"])};
-        right: ${unsafeCSS(spacing["4"])};
+        top: 16px;
+        right: 16px;
         display: flex;
-        gap: ${unsafeCSS(spacing["2"])};
+        gap: 8px;
         opacity: 0;
         transition: opacity 200ms ease;
         z-index: 10;
@@ -215,17 +202,17 @@ export class SioImageLightbox extends DeesElement {
       .control-button {
         width: 40px;
         height: 40px;
-        border-radius: ${unsafeCSS(radius.full)};
-        background: rgba(0, 0, 0, 0.5);
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        color: white;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.5); /* scrim glass */
+        backdrop-filter: blur(28px) saturate(180%);
+        -webkit-backdrop-filter: blur(28px) saturate(180%);
+        border: var(--sio-hairline) solid rgba(255, 255, 255, 0.1);
+        color: #fff; /* on-scrim constant */
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        transition: ${unsafeCSS(transitions.all)};
+        transition: all 150ms ease;
       }
 
       .control-button:hover {
@@ -239,16 +226,16 @@ export class SioImageLightbox extends DeesElement {
 
       .info {
         position: absolute;
-        bottom: ${unsafeCSS(spacing["4"])};
-        left: ${unsafeCSS(spacing["4"])};
-        right: ${unsafeCSS(spacing["4"])};
-        background: rgba(0, 0, 0, 0.7);
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: ${unsafeCSS(radius.lg)};
-        padding: ${unsafeCSS(spacing["3"])} ${unsafeCSS(spacing["4"])};
-        color: white;
+        bottom: 16px;
+        left: 16px;
+        right: 16px;
+        background: rgba(0, 0, 0, 0.7); /* scrim glass */
+        backdrop-filter: blur(28px) saturate(180%);
+        -webkit-backdrop-filter: blur(28px) saturate(180%);
+        border: var(--sio-hairline) solid rgba(255, 255, 255, 0.1);
+        border-radius: var(--sio-radius-lg);
+        padding: 12px 16px;
+        color: #fff; /* on-scrim constant */
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -265,27 +252,29 @@ export class SioImageLightbox extends DeesElement {
 
       .info-name {
         font-weight: 500;
-        font-size: 0.9375rem;
+        font-size: 15px;
+        letter-spacing: -0.24px;
       }
 
       .info-actions {
         display: flex;
-        gap: ${unsafeCSS(spacing["3"])};
+        gap: 12px;
       }
 
       .info-button {
         background: none;
         border: none;
-        color: white;
+        color: #fff; /* on-scrim constant */
         opacity: 0.8;
         cursor: pointer;
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(spacing["1"])};
-        font-size: 0.875rem;
-        padding: ${unsafeCSS(spacing["1"])} ${unsafeCSS(spacing["2"])};
-        border-radius: ${unsafeCSS(radius.md)};
-        transition: ${unsafeCSS(transitions.all)};
+        gap: 4px;
+        font-size: 13px;
+        font-family: inherit;
+        padding: 4px 8px;
+        border-radius: var(--sio-radius-sm);
+        transition: all 150ms ease;
       }
 
       .info-button:hover {
@@ -295,19 +284,19 @@ export class SioImageLightbox extends DeesElement {
 
       @media (max-width: 600px) {
         .container {
-          padding: ${unsafeCSS(spacing["4"])};
+          padding: 16px;
         }
 
         .controls {
-          top: ${unsafeCSS(spacing["2"])};
-          right: ${unsafeCSS(spacing["2"])};
+          top: 8px;
+          right: 8px;
         }
 
         .info {
-          bottom: ${unsafeCSS(spacing["2"])};
-          left: ${unsafeCSS(spacing["2"])};
-          right: ${unsafeCSS(spacing["2"])};
-          padding: ${unsafeCSS(spacing["2"])} ${unsafeCSS(spacing["3"])};
+          bottom: 8px;
+          left: 8px;
+          right: 8px;
+          padding: 8px 12px;
         }
       }
     `,
@@ -400,7 +389,11 @@ export class SioImageLightbox extends DeesElement {
     `;
   }
 
-  public async open(file: ILightboxFile | ILightboxImage) {
+  public async open(file: ILightboxFile) {
+    if (this.closeCleanupTimeout) {
+      clearTimeout(this.closeCleanupTimeout);
+      this.closeCleanupTimeout = null;
+    }
     this.file = file;
     this.fileLoaded = false;
     this.resetZoom();
@@ -432,7 +425,8 @@ export class SioImageLightbox extends DeesElement {
     }));
 
     // Clean up after animation
-    setTimeout(() => {
+    this.closeCleanupTimeout = setTimeout(() => {
+      this.closeCleanupTimeout = null;
       this.file = null;
       this.fileLoaded = false;
       this.resetZoom();
@@ -516,5 +510,9 @@ export class SioImageLightbox extends DeesElement {
   public async disconnectedCallback() {
     await super.disconnectedCallback();
     document.removeEventListener('keydown', this.handleKeyDown);
+    if (this.closeCleanupTimeout) {
+      clearTimeout(this.closeCleanupTimeout);
+      this.closeCleanupTimeout = null;
+    }
   }
 }

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

@@ -0,0 +1,140 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+import './sio-list-row.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-inset-list': SioInsetList;
+  }
+}
+
+/**
+ * sio-inset-list — iOS grouped ("inset") card list container
+ * (design source: SIORowMobile groups in SocialIOiOS.jsx).
+ *
+ * Rounds children into an 18px card on the grouped canvas with 16px side
+ * margins (mobile), separates them with 0.5px inset hairlines, and takes an
+ * optional uppercase section header at the 32px inset.
+ *
+ * Separators: `sio-list-row` children draw their own text-aligned inset
+ * hairline (auto-hidden on the last row); all other children get a plain
+ * hairline between siblings from this container.
+ */
+@customElement('sio-inset-list')
+export class SioInsetList extends DeesElement {
+  public static demo = () => html`
+    <div style="max-width: 420px; background: var(--sio-bg); padding: 18px 0; font-family: var(--sio-font-sf); border-radius: 12px;">
+      <sio-inset-list header="Today">
+        <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."
+          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-list-row>
+        <sio-list-row
+          unread
+          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="comfortable"
+        >
+          <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
+          title="Deutsche Post"
+          time="Yesterday"
+          subject="Letter scanned: Finanzamt München"
+          preview="2 pages · OCR ready · deadline detected: Jul 24"
+          density="comfortable"
+        >
+          <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>
+        </sio-list-row>
+      </sio-inset-list>
+      <div style="height: 18px;"></div>
+      <sio-inset-list header="Notifications">
+        <div style="padding: 12px 16px; font-size: 15px; color: var(--sio-label); display: flex; align-items: center;">
+          <span style="flex: 1;">Priority only</span>
+          <span style="font-size: 15px; color: var(--sio-label-3);">On</span>
+        </div>
+        <div style="padding: 12px 16px; font-size: 15px; color: var(--sio-label); display: flex; align-items: center;">
+          <span style="flex: 1;">Quiet hours</span>
+          <span style="font-size: 15px; color: var(--sio-label-3);">22:00 – 07:00</span>
+        </div>
+        <div style="padding: 12px 16px; font-size: 15px; color: var(--sio-tint);">Add exception…</div>
+      </sio-inset-list>
+    </div>
+  `;
+
+  /** Optional uppercase section header rendered above the card at the 32px inset. */
+  @property({ type: String })
+  public accessor header = '';
+
+  /** Drops the 16px side margins (embedding in desktop columns). */
+  @property({ type: Boolean, reflect: true })
+  public accessor flush = false;
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--sio-font-sf);
+      }
+      .section-header {
+        padding: 6px 32px;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--sio-label-3);
+        letter-spacing: -0.08px;
+        text-transform: uppercase;
+      }
+      :host([flush]) .section-header {
+        padding: 6px 16px;
+      }
+      .card {
+        background: var(--sio-surface);
+        margin: 0 16px;
+        border-radius: 18px;
+        overflow: hidden;
+      }
+      :host([flush]) .card {
+        margin: 0;
+      }
+      /* plain hairline between non-row children; sio-list-row draws its own
+         inset hairline and hides it on :last-child itself */
+      ::slotted(:not(sio-list-row):not(:last-child)) {
+        border-bottom: var(--sio-hairline) solid var(--sio-separator);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      ${this.header ? html`<div class="section-header">${this.header}</div>` : html``}
+      <div class="card">
+        <slot></slot>
+      </div>
+    `;
+  }
+}