@social.io/catalog 2.1.0 → 2.1.2

package/readme.hints.md

@@ -1,82 +0,0 @@
-# @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.