@social.io/catalog 1.3.0 → 2.1.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.1.0",
   "private": false,
-  "description": "catalog for social.io",
-  "main": "dist_ts_web/index.js",
-  "typings": "dist_ts_web/index.d.ts",
+  "description": "Apple-native v8 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.11.2",
+    "@git.zone/tsrun": "^2.0.5",
+    "@git.zone/tstest": "^3.6.6",
+    "@git.zone/tswatch": "^3.3.5",
+    "@types/node": "^26.1.1",
+    "@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,82 @@
+# @social.io/catalog — hints
+
+## v2 architecture (v8 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 v8 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 (28 files / 29 elements)
+
+Foundation: `sio-logo` (faceted canvas mark, theme/DPR/reduced-motion aware),
+`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.