@social.io/catalog 1.3.0 → 2.0.0

package/dist_ts_web/pages/firstpage.js

@@ -1,5 +1,24 @@
 import { html } from '@design.estate/dees-element';
+/**
+ * firstpage — the embeddable widget moment: a host page with the
+ * sio-fab launcher (unread pill) anchored bottom-right. Clicking the
+ * fab opens the sio-combox singleton it owns.
+ */
 export const firstpage = () => html `
-  <sio-fab></sio-fab>
+  <div
+    style="position: relative; min-height: 100vh; font-family: var(--sio-font-sf); background: var(--sio-bg);"
+  >
+    <div style="max-width: 560px; margin: 0 auto; padding: 64px 24px;">
+      <div style="font-size: 28px; font-weight: 700; letter-spacing: 0.36px; color: var(--sio-label);">
+        Orbit — customer page
+      </div>
+      <div style="margin-top: 10px; font-size: 15px; line-height: 20px; letter-spacing: -0.24px; color: var(--sio-label-3);">
+        A stand-in host website. The launcher bubble bottom-right is the
+        social.io widget entry point — click it (or press Ctrl+S) to open
+        the combox.
+      </div>
+    </div>
+    <sio-fab .unread=${2}></sio-fab>
+  </div>
 `;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlyc3RwYWdlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL3BhZ2VzL2ZpcnN0cGFnZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFbkQsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Q0FFbEMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlyc3RwYWdlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL3BhZ2VzL2ZpcnN0cGFnZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFbkQ7Ozs7R0FJRztBQUNILE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7Ozs7Ozs7Ozs7O3VCQWNaLENBQUM7O0NBRXZCLENBQUMifQ==

package/dist_ts_web/pages/mainpage.d.ts

@@ -1 +1,7 @@
+/**
+ * mainpage — a composed v7 showcase: the unified feed, built from the
+ * catalog primitives (sio-segmented, sio-ai-card, sio-inset-list,
+ * sio-list-row, sio-avatar, sio-chip). Everything color-related comes
+ * from the --sio-* tokens; light/dark follows the theme manager.
+ */
 export declare const mainpage: () => import("@design.estate/dees-element").TemplateResult<1>;

package/dist_ts_web/pages/mainpage.js

@@ -1,45 +1,117 @@
 import { html } from '@design.estate/dees-element';
+/**
+ * mainpage — a composed v7 showcase: the unified feed, built from the
+ * catalog primitives (sio-segmented, sio-ai-card, sio-inset-list,
+ * sio-list-row, sio-avatar, sio-chip). Everything color-related comes
+ * from the --sio-* tokens; light/dark follows the theme manager.
+ */
 export const mainpage = () => html `
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-      background: #f5f5f5;
-    }
-    .demo-container {
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-    }
-    .demo-section {
-      background: white;
-      border-radius: 8px;
-      padding: 40px;
-      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-      max-width: 1200px;
-      width: 100%;
-    }
-    h2 {
-      margin-bottom: 20px;
-      font-family: sans-serif;
-    }
-    .component-demo {
-      margin: 20px 0;
-      position: relative;
-      min-height: 700px;
-    }
-  </style>
-  <div class="demo-container">
-    <div class="demo-section">
-      <h2>Social.io Catalog Components</h2>
-      
-      <div class="component-demo">
-        <h3>FAB with Combox Demo</h3>
-        <sio-fab .showCombox=${true}></sio-fab>
+  <div
+    style="min-height: 100vh; padding: 40px 0 64px; background: var(--sio-bg); font-family: var(--sio-font-sf);"
+  >
+    <div style="max-width: 440px; margin: 0 auto;">
+      <div
+        style="padding: 0 16px 14px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.37px; color: var(--sio-label);"
+      >
+        Feed
       </div>
+
+      <div style="padding: 0 16px 18px;">
+        <sio-segmented
+          .segments=${[
+    { id: 'priority', label: 'Priority' },
+    { id: 'time', label: 'Timeline' },
+    { id: 'person', label: 'By person' },
+]}
+          selected="priority"
+        ></sio-segmented>
+      </div>
+
+      <div style="padding: 0 16px 18px;">
+        <sio-ai-card label="Morning digest · 3 items">
+          <div>Maya needs your revenue split for the Q3 deck before Thursday's board call.</div>
+          <div>Finanzamt letter: objection deadline detected — Jul 24 (13 days left).</div>
+          <div>Jonas resolved the launch-copy thread; one pricing question stays open.</div>
+        </sio-ai-card>
+      </div>
+
+      <sio-inset-list header="Now">
+        <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"
+        >
+          <sio-avatar
+            slot="avatar"
+            initials="ML"
+            tint="#FF6B8A"
+            size="30"
+            channelBadge="mail"
+          ></sio-avatar>
+          <sio-chip slot="meta" variant="channel" value="mail" icon="envelope">Mail</sio-chip>
+          <sio-chip slot="meta" variant="status" value="now">Now</sio-chip>
+        </sio-list-row>
+        <sio-list-row
+          unread
+          title="Deutsche Post"
+          time="08:55"
+          subject="Letter scanned: Finanzamt München"
+          preview="2 pages · OCR ready · deadline detected: Jul 24"
+          density="comfortable"
+        >
+          <sio-avatar
+            slot="avatar"
+            initials="DP"
+            tint="var(--sio-ch-letters)"
+            size="30"
+            channelBadge="letters"
+          ></sio-avatar>
+          <sio-chip slot="meta" variant="channel" value="letters" icon="file-text">Letter</sio-chip>
+          <sio-chip slot="meta" variant="lane" value="paper">Paper trail</sio-chip>
+        </sio-list-row>
+      </sio-inset-list>
+
+      <div style="height: 22px;"></div>
+
+      <sio-inset-list header="Today">
+        <sio-list-row
+          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"
+        >
+          <sio-avatar
+            slot="avatar"
+            initials="JW"
+            tint="var(--sio-ch-chats)"
+            size="30"
+            presence="online"
+          ></sio-avatar>
+          <sio-chip slot="meta" variant="channel" value="chats" icon="message-circle">Chat</sio-chip>
+          <sio-chip slot="meta" variant="status" value="today">Today</sio-chip>
+        </sio-list-row>
+        <sio-list-row
+          title="Ana Ferreira"
+          time="Tue"
+          subject="Missed call · voicemail (0:42)"
+          density="cozy"
+        >
+          <sio-avatar
+            slot="avatar"
+            initials="AF"
+            tint="var(--sio-ch-calls)"
+            size="30"
+            channelBadge="calls"
+          ></sio-avatar>
+          <sio-chip slot="meta" variant="channel" value="calls" icon="phone">Call</sio-chip>
+          <sio-chip slot="meta" variant="status" value="done">Done</sio-chip>
+        </sio-list-row>
+      </sio-inset-list>
     </div>
   </div>
 `;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbnBhZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvcGFnZXMvbWFpbnBhZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRW5ELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OytCQXNDSCxJQUFJOzs7O0NBSWxDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbnBhZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvcGFnZXMvbWFpbnBhZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRW5EOzs7OztHQUtHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7OztzQkFhWjtJQUNWLEVBQUUsRUFBRSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFO0lBQ3JDLEVBQUUsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFO0lBQ2pDLEVBQUUsRUFBRSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFO0NBQ3JDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBMkZWLENBQUMifQ==

package/{license → license.md}

@@ -1,4 +1,6 @@
-Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
+MIT License
+
+Copyright (c) 2020-2026 Task Venture Capital GmbH (hello@task.vc)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package.json

@@ -1,33 +1,27 @@
 {
   "name": "@social.io/catalog",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "private": false,
-  "description": "catalog for social.io",
-  "main": "dist_ts_web/index.js",
-  "typings": "dist_ts_web/index.d.ts",
+  "description": "v7 Apple-native design system and web components for social.io",
+  "exports": {
+    ".": "./dist_ts_web/index.js"
+  },
   "type": "module",
-  "author": "Lossless GmbH",
-  "license": "UNLICENSED",
+  "author": "Task Venture Capital GmbH",
+  "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.6",
-    "@design.estate/dees-element": "^2.1.3",
-    "@design.estate/dees-wcctools": "^1.2.1",
-    "@losslessone_private/loint-pubapi": "^1.0.14",
-    "@social.io/interfaces": "^1.2.1",
-    "lucide": "^0.556.0",
-    "rrweb": "2.0.0-alpha.4",
-    "rrweb-player": "1.0.0-alpha.4",
-    "rrweb-snapshot": "2.0.0-alpha.4"
+    "@design.estate/dees-domtools": "^2.5.6",
+    "@design.estate/dees-element": "^2.4.0",
+    "lucide": "^1.16.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^3.1.2",
-    "@git.zone/tsbundle": "^2.6.3",
-    "@git.zone/tsrun": "^2.0.0",
-    "@git.zone/tstest": "^3.1.3",
-    "@git.zone/tswatch": "^2.3.5",
-    "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/smartenv": "^6.0.0",
-    "@types/node": "^24.10.1"
+    "@git.zone/tsbuild": "^4.4.2",
+    "@git.zone/tsbundle": "^2.10.0",
+    "@git.zone/tsrun": "^2.0.5",
+    "@git.zone/tstest": "^3.6.6",
+    "@git.zone/tswatch": "^3.3.2",
+    "@types/node": "^26.1.0",
+    "@design.estate/dees-wcctools": "^3.9.0"
   },
   "files": [
     "ts/**/*",
@@ -38,7 +32,7 @@
     "dist_ts_web/**/*",
     "assets/**/*",
     "cli.js",
-    "npmextra.json",
+    ".smartconfig.json",
     "readme.md"
   ],
   "browserslist": [
@@ -46,16 +40,16 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/social.io/private/catalog.git"
+    "url": "git+https://code.foss.global/social.io/catalog.git"
   },
   "bugs": {
-    "url": "https://gitlab.com/social.io/private/catalog/issues"
+    "url": "https://code.foss.global/social.io/catalog/issues"
   },
-  "homepage": "https://gitlab.com/social.io/private/catalog#readme",
+  "homepage": "https://code.foss.global/social.io/catalog#readme",
   "scripts": {
     "test": "tstest test/",
-    "build": "tsbuild tsfolders --allowimplicitany --skiplibcheck && tsbundle element --production",
-    "watch": "tswatch element",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
+    "watch": "tswatch",
     "buildDocs": "tsdoc"
   }
 }

package/readme.hints.md

@@ -0,0 +1,81 @@
+# @social.io/catalog — hints
+
+## v2 architecture (v7 design program)
+
+- Pure web-component catalog: Lit via `@design.estate/dees-element` with
+  standard TC39 decorators (`@property({ ... }) public accessor x`,
+  `@state() private accessor y`). No services, no recorder — the v1
+  media-recorder stack was removed.
+- Every element: `@customElement('sio-...')`, a
+  `declare global { interface HTMLElementTagNameMap }` entry, a
+  `public static demo = () => html\`...\`` with realistic v7 content, and
+  `static styles = [...sioElementStyles, css\`...\`]`.
+- Entry points:
+  - `ts_web/index.ts` → re-exports `ts_web/elements/index.ts` (the barrel:
+    tokens + all components).
+  - `html/index.ts` → dees-wcctools catalog with three sections:
+    Primitives (all `Sio*` classes except the widget suite), Chat Widget
+    (`SioFab`, `SioCombox`, `SioConversationSelector`, `SioConversationView`,
+    `SioMessageInput`, `SioImageLightbox`, `SioPdfViewer`), Pages.
+  - `ts_web/pages/` — `firstpage` (widget host page with the sio-fab
+    launcher), `mainpage` (composed v7 unified-feed showcase:
+    segmented + ai-card + inset-list + list-rows + avatars + chips).
+- Build: `pnpm build` = `tsbuild tsfolders` (no skipLibCheck) + `tsbundle`.
+  Dev: `pnpm watch` (tswatch serves `html/index.html`).
+- Tests: `test/test.chromium.ts` runs in real Chromium via
+  `pnpm test` (tstest). Pattern: construct → append to body →
+  `await updateComplete` → assert against `shadowRoot`. Gotcha: the
+  dees-domtools base styles put `transition: background .1s, color .1s`
+  on `*` — wait ~200ms before asserting a *changed* computed color.
+
+## Token system (`ts_web/elements/tokens.ts`)
+
+- The only source of color/typography/radius/density values. Components
+  never hardcode colors; tints derive with
+  `color-mix(in oklab, var(--sio-...) N%, transparent)`. No string
+  concatenation on `cssManager.bdTheme(...)` results (the v1 anti-pattern) —
+  light/dark pairs live inside tokens.ts, or a component declares its own
+  scoped custom prop via `bdTheme` when the value is component-specific
+  (e.g. the segmented-control knob).
+- `sioElementStyles = [cssManager.defaultStyles, sioBaseStyles]` — spread it
+  first in every element's `static styles`.
+- Custom props (all `--sio-*`): surfaces (`bg`, `bg-grouped`, `surface`,
+  `surface-2`), 4-level labels, separators (0.5px hairline convention via
+  `--sio-hairline`), tint `#0A84FF` (dark `#409CFF`, hover `#0071E3`/`#64B2FF`,
+  soft 10%/18%), channel palette (mail `#0A84FF`, chats `#30D158`,
+  calls `#FF9F0A`, letters `#A2845E`), lane palette (feed/paper/people),
+  bucket palette (now `#FF453A`, today `#FF9F0A`, later `#8E8E93`,
+  done `#30D158`), density row heights 78/62/48px, radii ramp, glass values.
+- Helper CSS fragments: `sioGlass` / `sioToolbarGlass` / `sioPillGlass`
+  (backdrop blur 28px saturate 180%), the SF type ramp
+  (`sioTypeLargeTitle` … `sioTypeCaption2`, `sioTypeMono`), and
+  `sioTabularNums` for any run of digits. `sioTheme` maps token names to
+  `var(--sio-*)` strings for inline styles.
+- Icons: `sio-icon` is a thin wrapper over the `lucide` npm package
+  (never a CDN), with a small alias map (e.g. `envelope` → `mail`).
+
+## Component inventory (27 files / 28 elements)
+
+Foundation: `sio-icon`, `sio-button`, `sio-kbd`, `sio-chip`
+(channel/lane/status palettes), `sio-avatar` + `sio-avatar-stack`,
+`sio-unread-badge`.
+
+Chrome & navigation: `sio-glass-toolbar`, `sio-segmented`,
+`sio-tab-bar`, `sio-channel-rail`, `sio-dropdown-menu`.
+
+Lists & feed: `sio-list-row` (density comfortable/cozy/compact =
+78/62/48px, unread gutter, hover triage actions, inset hairlines),
+`sio-inset-list` (iOS grouped card), `sio-bucket-header`.
+
+Content & input: `sio-ai-card`, `sio-composer` (`composer-send` /
+`composer-attach`), `sio-cmdk` (host-owned `open`, `cmdk-run` /
+`cmdk-close`), `sio-waveform`, `sio-step-timeline`, `sio-paper-thumb`.
+
+Chat-widget suite (embeddable): `sio-fab` (owns the `SioCombox`
+singleton), `sio-combox` (three states: home list / conversation /
+away email-fallback), `sio-conversation-selector`,
+`sio-conversation-view`, `sio-message-input`, `sio-image-lightbox`,
+`sio-pdf-viewer`.
+
+All interactions dispatch `CustomEvent`s with `bubbles: true,
+composed: true`; `render()` stays side-effect free.

package/readme.md

@@ -1,190 +1,124 @@
 # @social.io/catalog
 
-A modern, beautifully designed UI component library for building conversational interfaces and support chat experiences. Built with Lit Element and TypeScript.
+The social.io v7 design system and web component library: Apple-native Lit components for the unified-inbox product family — feed rows, channel navigation, command palette, media primitives, and the embeddable chat-widget suite. Built on [@design.estate/dees-element](https://www.npmjs.com/package/@design.estate/dees-element) (Lit 3, standard TC39 decorators) with a CSS-custom-property token system and full light/dark theming.
 
 ## Issue Reporting and Security
 
 For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
 
-## 🎯 Features
-
-- **Complete Chat UI** - Ready-to-use conversation components with message threads, typing indicators, and attachments
-- **Floating Action Button** - Eye-catching FAB with smooth animations for triggering the chat interface
-- **PDF Viewer** - Built-in PDF rendering with zoom, pagination, and download capabilities
-- **Image Lightbox** - Full-featured lightbox with zoom, pan, and keyboard navigation
-- **Modern Design Tokens** - Consistent styling with customizable colors, spacing, typography, and shadows
-- **Dark Mode Ready** - Full light/dark theme support out of the box
-- **Accessibility** - Keyboard navigation and proper ARIA attributes
-- **TypeScript First** - Full type definitions for all components
-
-## 📦 Installation
+## Install
 
 ```bash
-npm install @social.io/catalog
-# or
 pnpm add @social.io/catalog
 ```
 
-## 🚀 Quick Start
-
-```typescript
-import { SioFab, SioCombox } from '@social.io/catalog';
-
-// Components auto-register as custom elements
-// Just use them in your HTML:
-```
-
-```html
-<!-- Floating Action Button that opens the chat -->
-<sio-fab></sio-fab>
-
-<!-- Or use the full chat box directly -->
-<sio-combox></sio-combox>
-```
-
-## 🧩 Components
-
-### Core Components
-
-| Component | Description |
-|-----------|-------------|
-| `<sio-fab>` | Floating action button with animated chat icon |
-| `<sio-combox>` | Complete chat interface with conversation list and message view |
-| `<sio-button>` | Styled button with variants (primary, secondary, destructive, outline, ghost) |
-| `<sio-icon>` | Lucide icon wrapper with size and color customization |
-| `<sio-dropdown-menu>` | Animated dropdown menu with keyboard support |
-
-### Conversation Components
-
-| Component | Description |
-|-----------|-------------|
-| `<sio-conversation-selector>` | Searchable list of conversations with unread indicators |
-| `<sio-conversation-view>` | Message thread with typing indicators and file attachments |
-| `<sio-message-input>` | Auto-expanding textarea with file upload |
-
-### Media Components
-
-| Component | Description |
-|-----------|-------------|
-| `<sio-image-lightbox>` | Fullscreen image viewer with zoom and pan |
-| `<sio-pdf-viewer>` | PDF renderer with page navigation and zoom controls |
-
-### Utility Components
-
-| Component | Description |
-|-----------|-------------|
-| `<sio-recorder>` | Session recording using rrweb |
-
-## 💅 Styling & Theming
+## Design System
 
-The library uses CSS custom properties for theming. The design system includes:
+Every component draws exclusively from the token layer in `tokens.ts`:
 
-- **Colors** - Primary, secondary, accent, destructive, muted, and semantic colors
-- **Typography** - System font stack with size and weight variants
-- **Spacing** - Consistent spacing scale (0.5rem increments)
-- **Radius** - Border radius tokens from sm to full
-- **Shadows** - Elevation system from sm to 2xl
-- **Transitions** - Smooth animation presets
+- **Semantic surfaces** — `--sio-bg`, `--sio-surface`, `--sio-surface-2`, four label levels, and 0.5px hairline separators, switching between iOS-style light (`#F2F2F7`/`#FFFFFF`) and true-black dark (`#000`/`#1C1C1E`).
+- **Tint** — `--sio-tint` `#0A84FF`, deliberately brightened to `#409CFF` in dark mode, with hover and soft (translucent) variants.
+- **Channel palette** — mail `#0A84FF`, chats `#30D158`, calls `#FF9F0A`, letters `#A2845E`; lane palette (feed/paper/people) and triage-bucket palette (now/today/later/done) alongside.
+- **Density** — `--sio-row-comfortable` 78px, `--sio-row-cozy` 62px, `--sio-row-compact` 48px.
+- **Glass recipes** — `sioGlass`, `sioToolbarGlass`, `sioPillGlass` (backdrop blur + saturate) as reusable CSS fragments.
+- **SF type ramp** — `sioTypeLargeTitle` (34/700) through `sioTypeCaption2` (11/400), tabular numerals for counts and times.
 
-### Dark Mode
-
-Dark mode is automatically supported. The components use `bdTheme()` helper that switches between light and dark values:
+Theming follows the ambient theme via `cssManager.bdTheme()` pairs, with explicit `:host([theme='dark'])` / `:host([dark])` attribute overrides.
 
 ```typescript
-import { bdTheme } from '@social.io/catalog';
-
-// Usage in styles
-css`
-  background: ${bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 10%)')};
-`
+import { css } from '@design.estate/dees-element';
+import { sioElementStyles } from '@social.io/catalog';
+
+// in your own component:
+public static styles = [
+  ...sioElementStyles,
+  css`
+    .bar { background: var(--sio-surface); color: var(--sio-tint); }
+  `,
+];
 ```
 
-## 📖 Usage Examples
-
-### Basic Chat FAB
+## Components
+
+Components auto-register as custom elements on import.
+
+### Foundation
+
+| Element | Purpose |
+| --- | --- |
+| `sio-icon` | Lucide icon renderer (`icon`, `size`, `color`, `strokeWidth`) |
+| `sio-button` | Primary / secondary / destructive / outline / ghost variants, sm–lg sizes, status spinner |
+| `sio-avatar` / `sio-avatar-stack` | Initials-on-tint circles with presence dot, channel badge, overlapping stacks |
+| `sio-chip` | Channel / lane / status chips (uppercase 11px on soft color-mix background) |
+| `sio-unread-badge` | Count pills in channel colors, rail-sized variant |
+| `sio-kbd` | Keyboard-shortcut hint chip (mono, hairline border) |
+
+### Chrome and navigation
+
+| Element | Purpose |
+| --- | --- |
+| `sio-glass-toolbar` | 44px glass bar with start/center/end slots |
+| `sio-segmented` | iOS-style segmented control with counts |
+| `sio-tab-bar` | Mobile bottom glass bar, channel tabs + optional calendar |
+| `sio-channel-rail` | 64px desktop rail with per-channel unread badges |
+| `sio-dropdown-menu` | Slot-triggered menu with destructive/disabled items |
+
+### Lists and feed
+
+| Element | Purpose |
+| --- | --- |
+| `sio-list-row` | Universal row: three densities, unread-dot gutter, selection tint, hover action slot |
+| `sio-inset-list` | iOS grouped card list with inset hairlines and section headers |
+| `sio-bucket-header` | Triage-bucket header (colored dot + uppercase label + count) |
+
+### Content and input
+
+| Element | Purpose |
+| --- | --- |
+| `sio-ai-card` | AI summary/translation surface (soft tint, uppercase eyebrow, bullets) |
+| `sio-composer` | Pill input + circular send button, attach slot, email-capture variant |
+| `sio-cmdk` | Command palette: search, grouped results, keyboard navigation, kbd chords |
+| `sio-waveform` | Voicemail player bar chart with progress coloring and counters |
+| `sio-step-timeline` | Vertical tracking timeline (done/pending steps) |
+| `sio-paper-thumb` | Physical-letter thumbnail (torn-edge inbound / stamped outbound) |
+
+### Embeddable chat-widget suite
+
+| Element | Purpose |
+| --- | --- |
+| `sio-fab` | 56px tinted launcher with unread badge and open/close crossfade |
+| `sio-combox` | The widget shell (380×620, singleton `createOnBody()`), welcome → conversation → away states, "Powered by social.io" footer |
+| `sio-conversation-selector` | Gradient-header welcome pane: team avatar stack, recent conversation, CTA, FAQ list |
+| `sio-conversation-view` | Message thread: glass header with presence, bubbles, typing indicator, away→email notice |
+| `sio-message-input` | Composer wrapper with attachments and email-capture mode |
+| `sio-image-lightbox` / `sio-pdf-viewer` | Attachment viewers (zoom/pan images, paginated PDFs) |
 
 ```html
+<!-- Drop-in chat widget -->
 <sio-fab></sio-fab>
 ```
 
-The FAB opens a complete chat interface when clicked. It includes:
-- Keyboard shortcut (Ctrl+S) to toggle
-- Smooth scale and pulse animations
-- Gradient background with glow effects
-
-### Custom Button Variants
-
-```html
-<sio-button type="primary">Submit</sio-button>
-<sio-button type="destructive">Delete</sio-button>
-<sio-button type="outline">Cancel</sio-button>
-<sio-button type="ghost" size="sm">
-  <sio-icon icon="settings"></sio-icon>
-</sio-button>
-```
-
-### Image Lightbox
-
 ```typescript
-const lightbox = document.querySelector('sio-image-lightbox');
-lightbox.open({
-  url: 'https://example.com/photo.jpg',
-  name: 'My Photo',
-  size: 1024000
-});
-```
+import { SioCombox } from '@social.io/catalog';
 
-### PDF Viewer
-
-```html
-<sio-pdf-viewer
-  url="https://example.com/document.pdf"
-  fileName="document.pdf"
-></sio-pdf-viewer>
-```
-
-### Dropdown Menu
-
-```html
-<sio-dropdown-menu
-  .items=${[
-    { id: 'edit', label: 'Edit', icon: 'pencil' },
-    { id: 'delete', label: 'Delete', icon: 'trash', destructive: true }
-  ]}
-  @item-selected=${(e) => console.log('Selected:', e.detail.item)}
->
-  <sio-button type="ghost">
-    <sio-icon icon="more-vertical"></sio-icon>
-  </sio-button>
-</sio-dropdown-menu>
+const combox = SioCombox.createOnBody();
+combox.open();
 ```
 
-## 🔧 Development
+## Development
 
 ```bash
-# Install dependencies
 pnpm install
-
-# Start development server with hot reload
-pnpm watch
-
-# Run tests
-pnpm test
-
-# Build for production
-pnpm build
+pnpm watch    # wcctools component dashboard on http://localhost:3002
+pnpm test     # Chromium component tests via @git.zone/tstest
+pnpm build    # tsbuild + tsbundle
 ```
 
-## 📚 Dependencies
-
-- **@design.estate/dees-element** - Lit Element base with utilities
-- **@design.estate/dees-domtools** - DOM manipulation helpers
-- **lucide** - Beautiful open-source icons
-- **rrweb** - Session recording/replay (for recorder component)
+Every component ships a `static demo` rendered in the wcctools dashboard, grouped into Primitives, Chat Widget, and Pages sections, with light/dark and viewport switching.
 
 ## License and Legal Information
 
-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license.md](./license.md) file.
 
 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
 

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@social.io/catalog',
-  version: '1.3.0',
-  description: 'catalog for social.io'
+  version: '2.0.0',
+  description: 'v7 Apple-native design system and web components for social.io'
 }