@social.io/catalog 1.3.0 → 2.1.0

package/readme.md

@@ -1,190 +1,157 @@
 # @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 v8 design system and web component library: Apple-native Lit components for the unified-inbox product family — the faceted social.io brand mark, 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
+## Design System
 
-```typescript
-import { SioFab, SioCombox } from '@social.io/catalog';
+Product UI components draw from the token layer in `tokens.ts`; `sio-logo`
+preserves the canonical v8 facet palette as brand artwork:
 
-// Components auto-register as custom elements
-// Just use them in your HTML:
-```
+- **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.
 
-```html
-<!-- Floating Action Button that opens the chat -->
-<sio-fab></sio-fab>
+Theming follows the ambient theme via `cssManager.bdTheme()` pairs, with explicit `:host([theme='dark'])` / `:host([dark])` attribute overrides.
 
-<!-- Or use the full chat box directly -->
-<sio-combox></sio-combox>
+```typescript
+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); }
+  `,
+];
 ```
 
-## 🧩 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
-
-The library uses CSS custom properties for theming. The design system includes:
-
-- **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
-
-### Dark Mode
+## Components
 
-Dark mode is automatically supported. The components use `bdTheme()` helper that switches between light and dark values:
+Components auto-register as custom elements on import.
 
 ```typescript
-import { bdTheme } from '@social.io/catalog';
-
-// Usage in styles
-css`
-  background: ${bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 10%)')};
-`
+import '@social.io/catalog';
 ```
 
-## 📖 Usage Examples
-
-### Basic Chat FAB
-
 ```html
-<sio-fab></sio-fab>
+<sio-logo size="30" theme="auto" no-entrance></sio-logo>
 ```
 
-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
+### Foundation
+
+| Element | Purpose |
+| --- | --- |
+| `sio-logo` | Faceted social.io S mark with tight/square layouts, palette modes, and reduced-motion-aware animations |
+| `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) |
+
+#### `sio-logo`
+
+| Property | Default | Purpose |
+| --- | --- | --- |
+| `size` | `40` | Mark height in CSS pixels; tight-crop width follows the brand aspect ratio |
+| `background` | `transparent` | Canvas background color |
+| `gap` | `2` | Inset between facets in the 500px design grid |
+| `radius` | `16` | Facet corner radius in the 500px design grid |
+| `square` | `false` | Render on a square tile instead of the tight S crop |
+| `mono` | empty | Use one color while retaining facet depth |
+| `theme` | `auto` | Select `auto`, `light`, or `dark` backdrop palette behavior |
+| `loading` | `false` | Run the looping loading treatment |
+| `no-entrance` | `false` | Disable the entrance animation |
+| `no-hover` | `false` | Disable the pointer wave animation |
+
+The public `play()`, `wave()`, and `dismiss()` methods trigger the entrance,
+wave, and exit treatments. All motion respects `prefers-reduced-motion`.
+
+### 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 the built-in v8 brand mark and per-channel unread badges |
+| `sio-dropdown-menu` | Slot-triggered menu with destructive/disabled items |
+
+`sio-tab-bar` uses `max(30px, var(--sio-safe-area-bottom,
+env(safe-area-inset-bottom, 0px)))` for its bottom padding. Set
+`--sio-safe-area-bottom` when a screenshot or native shell supplies a known
+system-reserved area.
+
+### 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
-<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>
+<!-- Drop-in chat widget -->
+<sio-fab></sio-fab>
 ```
 
-### Image Lightbox
-
 ```typescript
-const lightbox = document.querySelector('sio-image-lightbox');
-lightbox.open({
-  url: 'https://example.com/photo.jpg',
-  name: 'My Photo',
-  size: 1024000
-});
-```
-
-### PDF Viewer
+import { SioCombox } from '@social.io/catalog';
 
-```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 repository license 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.
 
@@ -196,7 +163,7 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G
 
 ### Company Information
 
-Task Venture Capital GmbH
+Task Venture Capital GmbH<br>
 Registered at District Court Bremen HRB 35230 HB, Germany
 
 For any legal inquiries or further information, please contact us via email at hello@task.vc.

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.1.0',
+  description: 'Apple-native v8 design system and web components for social.io'
 }

package/ts_web/elements/index.ts

@@ -1,16 +1,40 @@
-// Core components
+// design tokens — custom props, glass recipes, SF type ramp
+export * from './tokens.js';
+
+// foundation
+export * from './sio-logo.js';
 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>
+    `;
+  }
+}