Component inventory

> GENERATED by `pnpm --filter ddx-web inventory:docs` from `ddx-web/src/inventory`. Do not edit by hand. 151 entries. ## Group A ### SiteShell `SiteShell` Group A · pattern `operator` · component · server · i18n `site` - **Props** — `instantiation`: `content` · `overrides`: `mode` - **Axes** — `mode` - **Variants** — — - **Modes** — `marketing`, `docs`, `auth` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xxl`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null }, "overrides": { "mode": "marketing" } } ``` ### SiteHeader `SiteHeader` Group A · pattern `operator` · component · client · i18n `site` - **Props** — `instantiation`: — · `overrides`: `mode` - **Axes** — `mode` - **Variants** — — - **Modes** — `marketing`, `docs`, `auth` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xxl`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "mode": "marketing" } } ``` ### SiteMain `SiteMain` Group A · pattern `operator` · component · server · i18n `site` - **Props** — `instantiation`: `content` · `overrides`: `mode` - **Axes** — `mode` - **Variants** — — - **Modes** — `marketing`, `docs`, `auth` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xxl`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null }, "overrides": { "mode": "marketing" } } ``` ### SiteFooter `SiteFooter` Group A · pattern `operator` · component · server · i18n `site` - **Props** — `instantiation`: — · `overrides`: `mode` - **Axes** — `mode` - **Variants** — — - **Modes** — `marketing`, `docs`, `auth` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xxl`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "mode": "marketing" } } ``` ### SiteMobileMenu `SiteMobileMenu` Group A · pattern `operator` · component · client · i18n `site` - **Props** — `instantiation`: — · `overrides`: `mode` - **Axes** — `mode` - **Variants** — — - **Modes** — `marketing`, `docs`, `auth` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xxl`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "mode": "marketing" } } ``` ### PortalShell `PortalShell` Group A · pattern `P1` · component · server · i18n `portal` - **Props** — `instantiation`: `orgSlug`, `role`, `orgName`, `organizations`, `user` · `overrides`: `sideNavDefaultOpen`, `notifications`, `connection`, `notificationsCount`, `recording` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-card`, `--token-color-hairline`, `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-duration-base`, `--token-color-bg` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "orgSlug": "acme-health", "role": "staff", "orgName": "Acme Health", "organizations": [], "user": { "name": "Acme Health Staff", "email": "staff@acme-health.test", "image": null } }, "overrides": { "sideNavDefaultOpen": true } } ``` ### PortalHeader `PortalHeader` Group A · pattern `P1` · component · client · i18n `portal` - **Props** — `instantiation`: `orgSlug`, `role`, `orgName`, `organizations`, `user` · `overrides`: `notifications` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-card`, `--token-color-hairline`, `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-duration-base`, `--token-shadow-elev-2` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "orgSlug": "acme-health", "role": "staff", "orgName": "Acme Health", "organizations": [], "user": { "name": "Acme Health Staff", "email": "staff@acme-health.test", "image": null } }, "overrides": {} } ``` ### PortalSideNav `PortalSideNav` Group A · pattern `P1` · component · client · i18n `portal` - **Props** — `instantiation`: `orgSlug`, `role`, `orgName`, `organizations`, `user` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-card`, `--token-color-hairline`, `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-duration-base`, `--token-color-muted` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "orgSlug": "acme-health", "role": "staff", "orgName": "Acme Health", "organizations": [], "user": { "name": "Acme Health Staff", "email": "staff@acme-health.test", "image": null } }, "overrides": {} } ``` ### PortalMobileMenu `PortalMobileMenu` Group A · pattern `P1` · component · client · i18n `portal` - **Props** — `instantiation`: `orgSlug`, `role`, `orgName`, `organizations`, `user` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-card`, `--token-color-hairline`, `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-duration-base`, `--token-shadow-elev-3` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "orgSlug": "acme-health", "role": "staff", "orgName": "Acme Health", "organizations": [], "user": { "name": "Acme Health Staff", "email": "staff@acme-health.test", "image": null } }, "overrides": {} } ``` ### PortalMain `PortalMain` Group A · pattern `P1` · component · server · i18n `portal` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-bg` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### PortalStatusLine `PortalStatusLine` Group A · pattern `P1` · component · client · i18n `portal` - **Props** — `instantiation`: — · `overrides`: `connection`, `recording`, `notificationsCount` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-success`, `--token-color-destructive`, `--token-spacing-sm` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### PortalFooter `PortalFooter` Group A · pattern `P1` · component · server · i18n `portal` - **Props** — `instantiation`: `orgName` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-card`, `--token-color-hairline`, `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-duration-base` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "orgName": "Acme Health" }, "overrides": {} } ``` ### PortalConnectionBanner `PortalConnectionBanner` Group A · pattern `P22` · component · client · i18n `portal` - **Props** — `instantiation`: `state` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-destructive`, `--token-color-warning`, `--token-spacing-md` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "state": "offline" }, "overrides": {} } ``` ### PortalGlobalRecordingIndicator `PortalGlobalRecordingIndicator` Group A · pattern `P1` · component · client · i18n `portal` - **Props** — `instantiation`: `recording` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-destructive`, `--token-duration-slow` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "recording": true }, "overrides": {} } ``` ### PortalBreadcrumb `PortalBreadcrumb` Group A · pattern `operator` · component · client · i18n `portal-page` - **Props** — `instantiation`: — · `overrides`: `variant` - **Axes** — `variant` - **Variants** — `page`, `entity`, `modal` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "variant": "page" } } ``` ### PortalActionBar `PortalActionBar` Group A · pattern `operator` · component · client · i18n `portal-page` - **Props** — `instantiation`: `actions` · `overrides`: `docked` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "actions": [] }, "overrides": { "docked": false } } ``` ### PortalDockableActions `PortalDockableActions` Group A · pattern `operator` · component · client · i18n `portal-page` - **Props** — `instantiation`: `content` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null }, "overrides": {} } ``` ### PortalCommandPalette `PortalCommandPalette` Group A · pattern `operator` · component · client · i18n `portal-page` - **Props** — `instantiation`: — · `overrides`: `mode` - **Axes** — `mode` - **Variants** — — - **Modes** — `portal`, `docs` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "mode": "portal" } } ``` ## Group B ### SitePage `SitePage` Group B · pattern `operator` · component · server · i18n `site` - **Props** — `instantiation`: `eyebrow`, `title`, `description`, `actions`, `content` · `overrides`: `variant`, `layout`, `fill` - **Axes** — `variant` - **Variants** — `landing`, `standard`, `docs` - **Modes** — — - **Tokens** — `--token-font-display`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "eyebrow": "", "title": "", "description": "", "actions": [], "content": null }, "overrides": { "variant": "standard", "layout": "stack", "fill": false } } ``` ### PortalPage `PortalPage` Group B · pattern `P1` · component · server · i18n `portal-page` - **Props** — `instantiation`: `eyebrow`, `title`, `description`, `actions`, `content` · `overrides`: `variant`, `layout`, `fill` - **Axes** — `variant` - **Variants** — `standard`, `workspace`, `section`, `focus`, `agentic`, `fullbleed` - **Modes** — — - **Tokens** — `--token-font-display`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "eyebrow": "", "title": "", "description": "", "actions": [], "content": null }, "overrides": { "variant": "standard", "layout": "stack", "fill": false } } ``` ### PortalPageHeader `PortalPageHeader` Group B · pattern `P2` · component · server · i18n `portal-page` - **Props** — `instantiation`: `title` · `overrides`: `mode`, `searchable`, `docked`, `notifications` - **Axes** — `mode` - **Variants** — — - **Modes** — `full`, `compact`, `minimal`, `none` - **Tokens** — `--token-font-display`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "mode": "full", "searchable": false, "docked": false, "notifications": null } } ``` ### PortalPageContent `PortalPageContent` Group B · pattern `P2` · component · server · i18n `portal-page` - **Props** — `instantiation`: `content` · `overrides`: `layout` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-lg` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null }, "overrides": { "layout": "stack" } } ``` ### PortalPageSideNav `PortalPageSideNav` Group B · pattern `P2` · component · client · i18n `portal` - **Props** — `instantiation`: `sectionId` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "sectionId": "patterns" }, "overrides": {} } ``` ### PortalLoading `PortalLoading` Group B · pattern `P22` · component · server · i18n `portal` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-font-display`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### PortalShellSkeleton `PortalShellSkeleton` Group B · pattern `P22` · component · server · i18n `portal` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-font-display`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl`, `--token-spacing-xs` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### PortalError `PortalError` Group B · pattern `P22` · component · client · i18n `portal` - **Props** — `instantiation`: `error`, `retry` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-font-display`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "error": {}, "retry": "[function]" }, "overrides": {} } ``` ### PortalNotFound `PortalNotFound` Group B · pattern `P22` · component · server · i18n `portal` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-font-display`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### SitePageForm `SitePageForm` Group B · pattern `P7` · component · client · i18n `families` - **Props** — `instantiation`: `schema`, `defaultValues`, `onSubmit` · `overrides`: `variant`, `size`, `density`, `readOnly`, `submitLabel`, `cancelLabel`, `columns`, `dirtyGuard` - **Axes** — `variant`, `size`, `density` - **Variants** — `create`, `edit`, `dialog`, `inline` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "schema": { "def": { "type": "object", "shape": {} }, "type": "object" }, "defaultValues": {}, "onSubmit": "[function]" }, "overrides": { "variant": "create", "size": "md", "density": "cosy", "columns": 1, "dirtyGuard": true } } ``` ### PortalPageForm `PortalPageForm` Group B · pattern `P7` · component · client · i18n `families` - **Props** — `instantiation`: `schema`, `defaultValues`, `onSubmit` · `overrides`: `variant`, `size`, `density`, `readOnly`, `submitLabel`, `cancelLabel`, `columns`, `dirtyGuard` - **Axes** — `variant`, `size`, `density` - **Variants** — `create`, `edit`, `dialog`, `inline` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "schema": { "def": { "type": "object", "shape": {} }, "type": "object" }, "defaultValues": {}, "onSubmit": "[function]" }, "overrides": { "variant": "create", "size": "md", "density": "cosy", "columns": 1, "dirtyGuard": true } } ``` ### SitePageCard `SitePageCard` Group B · pattern `operator` · component · server · i18n `families` - **Props** — `instantiation`: `title` · `overrides`: `variant`, `density`, `headingLevel` - **Axes** — `variant`, `density` - **Variants** — `flat`, `elevated`, `interactive`, `entity`, `stat` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl`, `--token-shadow-elev-1`, `--token-shadow-elev-3`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "variant": "elevated", "density": "cosy", "headingLevel": 3 } } ``` ### PortalPageCard `PortalPageCard` Group B · pattern `operator` · component · server · i18n `families` - **Props** — `instantiation`: `title` · `overrides`: `variant`, `density`, `headingLevel` - **Axes** — `variant`, `density` - **Variants** — `flat`, `elevated`, `interactive`, `entity`, `stat` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl`, `--token-shadow-elev-1`, `--token-shadow-elev-3`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "variant": "elevated", "density": "cosy", "headingLevel": 3 } } ``` ### SitePageTable `SitePageTable` Group B · pattern `operator` · component · client · i18n `families` - **Props** — `instantiation`: `columns`, `rows` · `overrides`: `variant`, `mode`, `views`, `sorting`, `urlState`, `selectable`, `virtualize`, `pageSizes` - **Axes** — `variant`, `mode` - **Variants** — `list`, `grid`, `timeline`, `board` - **Modes** — `view`, `loading`, `empty`, `error` - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "columns": [], "rows": [] }, "overrides": { "mode": "view", "sorting": "server", "urlState": true } } ``` ### PortalPageTable `PortalPageTable` Group B · pattern `operator` · component · client · i18n `families` - **Props** — `instantiation`: `columns`, `rows` · `overrides`: `variant`, `mode`, `views`, `sorting`, `urlState`, `selectable`, `virtualize`, `pageSizes` - **Axes** — `variant`, `mode` - **Variants** — `list`, `grid`, `timeline`, `board` - **Modes** — `view`, `loading`, `empty`, `error` - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "columns": [], "rows": [] }, "overrides": { "mode": "view", "sorting": "server", "urlState": true } } ``` ### SitePageHeroSection `SitePageHeroSection` Group B · pattern `operator` · component · server · i18n `families` - **Props** — `instantiation`: `title` · `overrides`: `variant`, `headingLevel` - **Axes** — `variant` - **Variants** — `split`, `centered`, `media` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl`, `--token-font-display`, `--token-spacing-xxl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "variant": "split", "headingLevel": 1 } } ``` ### PortalPageHeroSection `PortalPageHeroSection` Group B · pattern `operator` · component · server · i18n `families` - **Props** — `instantiation`: `title` · `overrides`: `variant`, `headingLevel` - **Axes** — `variant` - **Variants** — `split`, `centered`, `media` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl`, `--token-font-display`, `--token-spacing-xxl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "variant": "split", "headingLevel": 1 } } ``` ### SitePageCtaSection `SitePageCtaSection` Group B · pattern `operator` · component · server · i18n `families` - **Props** — `instantiation`: `title`, `actions` · `overrides`: `variant` - **Axes** — `variant` - **Variants** — `banner`, `inline`, `sticky` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl`, `--token-shadow-elev-1`, `--token-shadow-elev-3` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "actions": [] }, "overrides": { "variant": "banner" } } ``` ### PortalPageCtaSection `PortalPageCtaSection` Group B · pattern `operator` · component · server · i18n `families` - **Props** — `instantiation`: `title`, `actions` · `overrides`: `variant` - **Axes** — `variant` - **Variants** — `banner`, `inline`, `sticky` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl`, `--token-shadow-elev-1`, `--token-shadow-elev-3` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "actions": [] }, "overrides": { "variant": "banner" } } ``` ### SitePageGrid `SitePageGrid` Group B · pattern `operator` · component · server · i18n `families` - **Props** — `instantiation`: `label`, `items` · `overrides`: `variant` - **Axes** — `variant` - **Variants** — `kpi`, `chart`, `card` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "label": "", "items": [] }, "overrides": { "variant": "card" } } ``` ### PortalPageGrid `PortalPageGrid` Group B · pattern `operator` · component · server · i18n `families` - **Props** — `instantiation`: `label`, `items` · `overrides`: `variant` - **Axes** — `variant` - **Variants** — `kpi`, `chart`, `card` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "label": "", "items": [] }, "overrides": { "variant": "card" } } ``` ### SitePageBanner `SitePageBanner` Group B · pattern `operator` · component · client · i18n `families` - **Props** — `instantiation`: `title` · `overrides`: `variant`, `dismissible`, `size` - **Axes** — `variant`, `size` - **Variants** — `info`, `success`, `warning`, `danger`, `ai` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "variant": "info", "dismissible": false, "size": "md" } } ``` ### PortalPageBanner `PortalPageBanner` Group B · pattern `operator` · component · client · i18n `families` - **Props** — `instantiation`: `title` · `overrides`: `variant`, `dismissible`, `size` - **Axes** — `variant`, `size` - **Variants** — `info`, `success`, `warning`, `danger`, `ai` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "variant": "info", "dismissible": false, "size": "md" } } ``` ### SitePageDialog `SitePageDialog` Group B · pattern `operator` · component · client · i18n `families` - **Props** — `instantiation`: `open`, `onOpenChange`, `title` · `overrides`: `variant`, `dismissible`, `confirmLabel`, `isPending` - **Axes** — `variant` - **Variants** — `sm`, `md`, `lg`, `full`, `destructive` - **Modes** — — - **Tokens** — `--token-shadow-elev-4`, `--token-spacing-md`, `--token-duration-base` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "open": false, "onOpenChange": "[function]", "title": "" }, "overrides": { "variant": "md", "dismissible": true, "isPending": false } } ``` ### PortalPageDialog `PortalPageDialog` Group B · pattern `operator` · component · client · i18n `families` - **Props** — `instantiation`: `open`, `onOpenChange`, `title` · `overrides`: `variant`, `dismissible`, `confirmLabel`, `isPending` - **Axes** — `variant` - **Variants** — `sm`, `md`, `lg`, `full`, `destructive` - **Modes** — — - **Tokens** — `--token-shadow-elev-4`, `--token-spacing-md`, `--token-duration-base` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "open": false, "onOpenChange": "[function]", "title": "" }, "overrides": { "variant": "md", "dismissible": true, "isPending": false } } ``` ### SitePageCarousel `SitePageCarousel` Group B · pattern `operator` · component · client · i18n `families` - **Props** — `instantiation`: `label`, `slides` · `overrides`: `variant`, `loop` - **Axes** — `variant` - **Variants** — `media`, `cards`, `testimonials` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "label": "", "slides": [] }, "overrides": { "variant": "cards", "loop": false } } ``` ### PortalPageCarousel `PortalPageCarousel` Group B · pattern `operator` · component · client · i18n `families` - **Props** — `instantiation`: `label`, `slides` · `overrides`: `variant`, `loop` - **Axes** — `variant` - **Variants** — `media`, `cards`, `testimonials` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "label": "", "slides": [] }, "overrides": { "variant": "cards", "loop": false } } ``` ### SitePageWizard `SitePageWizard` Group B · pattern `P20` · component · client · i18n `families` - **Props** — `instantiation`: `steps` · `overrides`: `variant`, `navigable` - **Axes** — `variant` - **Variants** — `steps`, `resume`, `review` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "steps": [] }, "overrides": { "variant": "steps", "navigable": true } } ``` ### PortalPageWizard `PortalPageWizard` Group B · pattern `P20` · component · client · i18n `families` - **Props** — `instantiation`: `steps` · `overrides`: `variant`, `navigable` - **Axes** — `variant` - **Variants** — `steps`, `resume`, `review` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "steps": [] }, "overrides": { "variant": "steps", "navigable": true } } ``` ### SitePageHeader `SitePageHeader` Group B · pattern `operator` · component · server · i18n `families` - **Props** — `instantiation`: `title` · `overrides`: `mode`, `searchable`, `docked`, `notifications` - **Axes** — `mode` - **Variants** — — - **Modes** — `full`, `compact`, `minimal`, `none` - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl`, `--token-font-display`, `--token-spacing-xxl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "mode": "full", "searchable": false, "docked": false, "notifications": null } } ``` ### PortalPageList `PortalPageList` Group B · pattern `P3` · template · server · i18n `templates` - **Props** — `instantiation`: `title`, `columns`, `rows`, `total` · `overrides`: `viewModes`, `state`, `selectable`, `pageSizes`, `search`, `fill` - **Axes** — `mode` - **Variants** — — - **Modes** — `view`, `error` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "columns": [], "rows": [], "total": 0 }, "overrides": { "viewModes": [ "list" ], "state": "view", "selectable": false, "search": true, "fill": true } } ``` ### PortalPageRecord `PortalPageRecord` Group B · pattern `P5` · template · server · i18n `templates` - **Props** — `instantiation`: `title`, `tabs` · `overrides`: `state` - **Axes** — `mode` - **Variants** — — - **Modes** — `view`, `error` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "tabs": [] }, "overrides": { "state": "view" } } ``` ### PortalRecordDelete `PortalRecordDelete` Group B · pattern `P5` · component · client · i18n `templates` - **Props** — `instantiation`: `onDelete`, `onDeleted` · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "onDelete": "[function]", "onDeleted": "[function]" }, "overrides": { "size": "default" } } ``` ### PortalPageWorkspace `PortalPageWorkspace` Group B · pattern `P6` · template · server · i18n `templates` - **Props** — `instantiation`: `title`, `entity`, `recordId`, `rail`, `railLabel`, `tabs`, `content` · `overrides`: `rail` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "entity": "clients", "recordId": "", "rail": [], "railLabel": "", "tabs": [], "content": null }, "overrides": { "rail": "responsive" } } ``` ### PortalPageDashboard `PortalPageDashboard` Group B · pattern `P10` · template · server · i18n `templates` - **Props** — `instantiation`: `title`, `stats`, `charts` · `overrides`: `state`, `chartColumns` - **Axes** — `mode` - **Variants** — — - **Modes** — `view`, `error` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "stats": [], "charts": [] }, "overrides": { "state": "view", "chartColumns": 2 } } ``` ### PortalPageCalendar `PortalPageCalendar` Group B · pattern `P11` · template · server · i18n `templates` - **Props** — `instantiation`: `title`, `events` · `overrides`: `mode`, `views`, `state`, `weekStartsOn` - **Axes** — `mode` - **Variants** — — - **Modes** — `agenda`, `booking`, `availability` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "events": [] }, "overrides": { "mode": "agenda", "views": [ "day", "week", "month" ], "state": "view", "weekStartsOn": 1 } } ``` ### PortalPageInbox `PortalPageInbox` Group B · pattern `P18` · template · server · i18n `templates` - **Props** — `instantiation`: `title`, `items`, `total` · `overrides`: `state` - **Axes** — `mode` - **Variants** — — - **Modes** — `view`, `error` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "items": [], "total": 0 }, "overrides": { "state": "view" } } ``` ### PortalPageSettings `PortalPageSettings` Group B · pattern `P19` · template · server · i18n `templates` - **Props** — `instantiation`: `title`, `sections` · `overrides`: `apiKeys`, `apiKeyKinds` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "sections": [] }, "overrides": { "apiKeys": false, "apiKeyKinds": [ "user" ] } } ``` ### PlatformPageSettings `PlatformPageSettings` Group B · pattern `P19` · template · client · i18n `settings` - **Props** — `instantiation`: `title` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": {} } ``` ### PortalPageEmpty `PortalPageEmpty` Group B · pattern `P22` · component · server · i18n `templates` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### PortalPageLoading `PortalPageLoading` Group B · pattern `P22` · component · server · i18n `templates` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### PortalPageError `PortalPageError` Group B · pattern `P22` · component · server · i18n `templates` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### PortalPageNotFound `PortalPageNotFound` Group B · pattern `P22` · component · server · i18n `templates` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### PortalPageStream `PortalPageStream` Group B · pattern `P14` · template · client · i18n `realtime` - **Props** — `instantiation`: `transport`, `endpoint` · `overrides`: `variant`, `debug` - **Axes** — `variant` - **Variants** — `deep-search`, `reasoning`, `authoring` - **Modes** — — - **Tokens** — `--token-spacing-md`, `--token-spacing-lg`, `--token-shadow-elev-1` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "transport": "ndjson", "endpoint": "ai-demo-stream" }, "overrides": { "variant": "reasoning", "debug": false } } ``` ### PortalPageChat `PortalPageChat` Group B · pattern `P12` · template · server · i18n `chat` - **Props** — `instantiation`: `eyebrow`, `title`, `description`, `kind` · `overrides`: `variant`, `density`, `rail`, `attach` - **Axes** — `variant`, `density` - **Variants** — `bubble`, `flat`, `compact` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-2`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "eyebrow": "", "title": "", "description": "", "kind": "human-dm" }, "overrides": { "variant": "bubble", "density": "cosy", "rail": true, "attach": false } } ``` ### PortalPageRoom `PortalPageRoom` Group B · pattern `P16` · template · server · i18n `call` - **Props** — `instantiation`: `eyebrow`, `title`, `description`, `room`, `provider` · `overrides`: `density`, `sidePanel` - **Axes** — `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-shadow-elev-1`, `--token-shadow-elev-2` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "eyebrow": "", "title": "", "description": "", "room": { "roomId": "demo" }, "provider": "none" }, "overrides": { "density": "cosy", "sidePanel": true } } ``` ## Group C ### DataTable `DataTable` Group C · pattern `P3` · component · client · i18n `data` - **Props** — `instantiation`: `columns`, `rows` · `overrides`: `variant`, `mode`, `views`, `sorting`, `urlState`, `selectable`, `virtualize`, `pageSizes`, `fill`, `fillerRows` - **Axes** — `variant`, `mode` - **Variants** — `list`, `rows`, `grid`, `timeline`, `board` - **Modes** — `view`, `loading`, `empty`, `error` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-3`, `--token-duration-fast`, `--token-ease-standard` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "columns": [], "rows": [] }, "overrides": { "sorting": "server", "urlState": true, "selectable": false, "fill": false, "fillerRows": true } } ``` ### Pagination `Pagination` Group C · pattern `P3` · component · client · i18n `data` - **Props** — `instantiation`: `page`, `pageSize`, `total` · `overrides`: `pageSizes`, `showPageSize`, `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "page": 1, "pageSize": 20, "total": 0 }, "overrides": { "showPageSize": true, "size": "md" } } ``` ### FilterBar `FilterBar` Group C · pattern `P3` · component · client · i18n `data` - **Props** — `instantiation`: `filters` · `overrides`: `showSearch`, `showClear` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "filters": [] }, "overrides": { "showSearch": true, "showClear": true } } ``` ### SearchField `SearchField` Group C · pattern `P3` · component · client · i18n `data` - **Props** — `instantiation`: — · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-ease-standard` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "size": "md" } } ``` ### ViewModeSwitch `ViewModeSwitch` Group C · pattern `P4` · component · client · i18n `data` - **Props** — `instantiation`: `views` · `overrides`: `size`, `showLabels` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-ease-standard`, `--token-shadow-elev-1` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "views": [ "list", "rows", "grid", "timeline", "board" ] }, "overrides": { "size": "md", "showLabels": true } } ``` ### StatTile `StatTile` Group C · pattern `P10` · component · client · i18n `data` - **Props** — `instantiation`: `label`, `value` · `overrides`: `variant`, `tone`, `mode` - **Axes** — `variant`, `mode` - **Variants** — `stat`, `kpi` - **Modes** — `view`, `loading` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-3`, `--token-color-success`, `--token-color-warning`, `--token-color-destructive`, `--token-color-accent` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "label": "", "value": "" }, "overrides": { "variant": "stat", "tone": "neutral", "mode": "view" } } ``` ### KpiTile `KpiTile` Group C · pattern `P10` · component · client · i18n `data` - **Props** — `instantiation`: `label`, `value`, `series` · `overrides`: `tone`, `mode` - **Axes** — `mode` - **Variants** — — - **Modes** — `view`, `loading` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-3`, `--token-color-success`, `--token-color-warning`, `--token-color-destructive`, `--token-color-accent`, `--token-color-primary`, `--token-color-accent`, `--token-color-gold`, `--token-color-rose`, `--token-color-success` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "label": "", "value": "", "series": [] }, "overrides": { "tone": "neutral", "mode": "view" } } ``` ### StatusPill `StatusPill` Group C · pattern `P5` · component · client · i18n `data` - **Props** — `instantiation`: `status` · `overrides`: `size`, `tone` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-color-success`, `--token-color-warning`, `--token-color-destructive`, `--token-color-accent` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "status": "unknown" }, "overrides": { "size": "sm" } } ``` ### Badge `Badge` Group C · pattern `P3` · component · client · i18n `data` - **Props** — `instantiation`: `label` · `overrides`: `variant`, `tone`, `size` - **Axes** — `variant`, `size` - **Variants** — `lifecycle`, `provenance-ai`, `count`, `chip` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-color-success`, `--token-color-warning`, `--token-color-destructive`, `--token-color-accent`, `--token-duration-fast`, `--token-ease-standard` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "label": "" }, "overrides": { "variant": "lifecycle", "tone": "neutral", "size": "sm" } } ``` ### Chart `Chart` Group C · pattern `P10` · component · client · i18n `data` - **Props** — `instantiation`: `data`, `xKey`, `series`, `label` · `overrides`: `variant`, `size`, `mode`, `showLegend`, `showGrid`, `stacked` - **Axes** — `variant`, `size`, `mode` - **Variants** — `line`, `bar`, `area`, `sparkline` - **Modes** — `view`, `loading`, `empty`, `error` - **Tokens** — `--token-color-primary`, `--token-color-accent`, `--token-color-gold`, `--token-color-rose`, `--token-color-success`, `--token-shadow-elev-3` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "data": [], "xKey": "x", "series": [], "label": "" }, "overrides": { "variant": "line", "size": "md", "mode": "view", "showGrid": true, "stacked": false } } ``` ### Timeline `Timeline` Group C · pattern `P4` · component · client · i18n `data` - **Props** — `instantiation`: `items` · `overrides`: `size`, `mode` - **Axes** — `size`, `mode` - **Variants** — — - **Modes** — `view`, `loading`, `empty` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-color-success`, `--token-color-warning`, `--token-color-destructive`, `--token-color-accent`, `--token-duration-fast`, `--token-ease-standard` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "items": [] }, "overrides": { "size": "md", "mode": "view" } } ``` ### KanbanBoard `KanbanBoard` Group C · pattern `P4` · component · client · i18n `data` - **Props** — `instantiation`: `lanes`, `cards` · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-3`, `--token-duration-fast`, `--token-ease-standard` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "lanes": [], "cards": [] }, "overrides": { "size": "md" } } ``` ### RowActions `RowActions` Group C · pattern `P3` · component · client · i18n `data` - **Props** — `instantiation`: `row`, `onView` · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-3` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "row": { "id": "" }, "onView": "[function]" }, "overrides": { "size": "md" } } ``` ### EntityLink `EntityLink` Group C · pattern `P5` · component · client · i18n `data` - **Props** — `instantiation`: `entity`, `label` · `overrides`: `variant` - **Axes** — `variant` - **Variants** — `text`, `chip` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-duration-fast`, `--token-ease-standard` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "entity": { "kind": "project", "id": "example" }, "label": "Project" }, "overrides": { "variant": "text" } } ``` ### EntityView `EntityView` Group C · pattern `P4` · component · server · i18n `kernel` - **Props** — `instantiation`: `descriptor`, `mode`, `data`, `projection`, `orgSlug`, `role`, `can` · `overrides`: `mode`, `columns`, `cardFields`, `groupBy`, `dateField`, `actions`, `switcher` - **Axes** — `mode` - **Variants** — — - **Modes** — `table`, `cards`, `list`, `timeline`, `kanban`, `calendar`, `detail`, `form`, `wizard`, `print`, `export` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-shadow-elev-1` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "descriptor": { "name": "member", "plural": "members", "fields": [ { "name": "user", "kind": "relation", "target": "user", "cardinality": "one", "required": true, "readOnly": true, "filterable": true, "labelKey": "entity.member.fields.user" }, { "name": "organization", "kind": "relation", "target": "organization", "cardinality": "one", "required": true, "readOnly": true, "labelKey": "entity.member.fields.organization" }, { "name": "role", "kind": "enum", "values": [ "org-admin", "staff", "member", "client" ], "required": true, "filterable": true, "sortable": true, "writableBy": [ "org-admin", "super-admin" ], "labelKey": "entity.member.fields.role" }, { "name": "title", "kind": "text", "max": 120, "searchable": true, "writableBy": [ "org-admin", "super-admin" ], "labelKey": "entity.member.fields.title" }, { "name": "department", "kind": "text", "max": 120, "filterable": true, "sortable": true, "writableBy": [ "org-admin", "super-admin" ], "labelKey": "entity.member.fields.department" }, { "name": "status", "kind": "enum", "values": [ "invited", "active", "suspended" ], "required": true, "filterable": true, "writableBy": [ "org-admin", "super-admin" ], "lifecycle": { "initial": "invited", "transitions": { "invited": [ "active" ], "active": [ "suspended" ], "suspended": [ "active" ] } }, "labelKey": "entity.member.fields.status" }, { "name": "joinedAt", "kind": "datetime", "readOnly": true, "sortable": true, "labelKey": "entity.member.fields.joinedAt" }, { "name": "email", "kind": "computed", "type": "email", "dependsOn": [ "user" ], "readOnly": true, "pii": true, "labelKey": "entity.member.fields.email" } ], "projections": [ { "name": "summary", "fields": [ "user", "role", "title", "status", "joinedAt" ], "audience": { "roles": [ "org-admin", "staff", "member", "client", "super-admin" ] } }, { "name": "detail", "fields": [ "user", "role", "title", "status", "department", "joinedAt" ], "audience": { "roles": [ "org-admin", "super-admin" ], "owner": true } }, { "name": "admin", "fields": [ "user", "organization", "role", "title", "status", "department", "joinedAt", "email" ], "audience": { "roles": [ "org-admin", "super-admin" ] } } ], "access": { "rbac": { "org-admin": [ "read", "list", "update", "audit" ], "staff": [ "read", "list" ], "member": [ "read", "list" ], "client": [ "read", "list" ], "super-admin": [ "read", "list", "update", "audit" ] }, "acl": { "enabled": false, "grantable": [], "principalTypes": [] }, "ownerField": "user", "ownerOps": [ "read" ] }, "capabilities": { "audit": true, "proofChain": true, "acl": false, "attachments": true, "events": true, "softDelete": true, "search": true }, "routeBase": "/orgs/:orgSlug/members", "events": { "created": "member.created", "updated": "member.updated", "deleted": "member.deleted", "aclChanged": "member.acl-changed", "attached": "member.attached" }, "queryKeyPrefix": "[function]", "sortFields": [ "role", "department", "joinedAt" ], "filterFields": [ "user", "role", "department", "status" ], "searchFields": [ "title" ], "defaultSort": "joinedAt", "listQuerySchema": { "def": { "type": "pipe", "in": { "def": { "type": "pipe", "in": { "def": { "type": "unknown" }, "type": "unknown", "transform": "[function]" }, "out": { "def": { "type": "transform", "transform": "[function]" }, "type": "transform" } }, "type": "pipe", "in": { "def": { "type": "unknown" }, "type": "unknown", "transform": "[function]" }, "out": { "def": { "type": "transform", "transform": "[function]" }, "type": "transform" }, "transform": "[function]" }, "out": { "def": { "type": "transform", "transform": "[function]" }, "type": "transform" } }, "type": "pipe", "in": { "def": { "type": "pipe", "in": { "def": { "type": "unknown" }, "type": "unknown", "transform": "[function]" }, "out": { "def": { "type": "transform", "transform": "[function]" }, "type": "transform" } }, "type": "pipe", "in": { "def": { "type": "unknown" }, "type": "unknown", "transform": "[function]" }, "out": { "def": { "type": "transform", "transform": "[function]" }, "type": "transform" }, "transform": "[function]" }, "out": { "def": { "type": "transform", "transform": "[function]" }, "type": "transform" } } }, "mode": "table", "data": { "kind": "page", "items": [], "total": 0 }, "projection": "summary", "orgSlug": "", "role": "", "can": [ "read", "list" ] }, "overrides": { "switcher": true } } ``` ### EntityAccessPanel `EntityAccessPanel` Group C · pattern `P5` · component · client · i18n `kernel` - **Props** — `instantiation`: `entity`, `orgSlug`, `recordId`, `grants`, `members` · `overrides`: `caption` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "entity": "member", "orgSlug": "", "recordId": "", "grants": [], "members": {} }, "overrides": {} } ``` ### EntityAttachmentsPanel `EntityAttachmentsPanel` Group C · pattern `P5` · component · client · i18n `kernel` - **Props** — `instantiation`: `entity`, `orgSlug`, `recordId`, `items`, `upload` · `overrides`: `caption` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "entity": "member", "orgSlug": "", "recordId": "", "items": [], "upload": null }, "overrides": {} } ``` ### EntityAuditPanel `EntityAuditPanel` Group C · pattern `P5` · component · client · i18n `kernel` - **Props** — `instantiation`: `rows`, `verification`, `names` · `overrides`: `caption` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "rows": [], "verification": { "ok": true, "length": 0 }, "names": {} }, "overrides": {} } ``` ## Group D ### EntityForm `EntityForm` Group D · pattern `P7` · component · client · i18n `forms` - **Props** — `instantiation`: `schema`, `defaultValues`, `onSubmit` · `overrides`: `mode`, `size`, `density`, `readOnly`, `submitLabel`, `cancelLabel`, `failureTitle`, `columns`, `dirtyGuard`, `unsavedStatus` - **Axes** — `variant`, `size`, `density` - **Variants** — `dialog`, `page`, `inline`, `wizard-step` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-shadow-elev-1`, `--token-shadow-elev-2`, `--token-spacing-lg` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "schema": { "def": { "type": "object", "shape": {} }, "type": "object" }, "defaultValues": {}, "onSubmit": "[function]" }, "overrides": { "mode": "page", "size": "md", "density": "cosy", "readOnly": false, "columns": 1, "dirtyGuard": true, "unsavedStatus": true } } ``` ### Field `Field` Group D · pattern `P7` · component · client · i18n `forms` - **Props** — `instantiation`: `name`, `kind`, `label` · `overrides`: `size`, `density`, `readOnly`, `disabled` - **Axes** — `variant`, `size`, `density` - **Variants** — `text`, `email`, `password`, `textarea`, `number`, `select`, `combobox`, `multi-select`, `date`, `date-range`, `time-slot`, `switch`, `radio`, `checkbox`, `slider`, `rich`, `file`, `phone`, `url`, `money`, `address`, `image`, `signature`, `relation`, `lifecycle` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "name": "name", "kind": "text", "label": "" }, "overrides": { "size": "md", "density": "cosy", "readOnly": false, "disabled": false } } ``` ### RichTextEditor `RichTextEditor` Group D · pattern `P17` · component · client · i18n `forms` - **Props** — `instantiation`: `value`, `onChange`, `label` · `overrides`: `preset`, `size`, `density`, `readOnly` - **Axes** — `variant`, `size`, `density` - **Variants** — `note`, `mail`, `block`, `field`, `minimal` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-shadow-elev-3` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "value": "", "onChange": "[function]", "label": "" }, "overrides": { "preset": "note", "size": "md", "density": "cosy", "readOnly": false } } ``` ### FileDropzone `FileDropzone` Group D · pattern `P7` · component · client · i18n `forms` - **Props** — `instantiation`: `kind` · `overrides`: `multiple`, `size`, `density`, `readOnly` - **Axes** — `variant`, `size`, `density` - **Variants** — `single`, `multi`, `image`, `audio`, `document` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "kind": "document" }, "overrides": { "multiple": false, "size": "md", "density": "cosy", "readOnly": false } } ``` ### AvatarUpload `AvatarUpload` Group D · pattern `P7` · component · client · i18n `forms` - **Props** — `instantiation`: `currentUrl`, `name` · `overrides`: `size`, `readOnly` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-shadow-elev-1` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "currentUrl": null, "name": "" }, "overrides": { "size": "md", "readOnly": false } } ``` ### SignaturePad `SignaturePad` Group D · pattern `P7` · component · client · i18n `kernel` - **Props** — `instantiation`: `modes` · `overrides`: `size`, `density`, `readOnly`, `disabled` - **Axes** — `size`, `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "modes": [ "drawn", "typed" ] }, "overrides": { "size": "md", "density": "cosy", "readOnly": false, "disabled": false } } ``` ### AddressField `AddressField` Group D · pattern `P7` · component · client · i18n `kernel` - **Props** — `instantiation`: — · `overrides`: `size`, `density`, `readOnly`, `disabled` - **Axes** — `size`, `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "size": "md", "density": "cosy", "readOnly": false, "disabled": false } } ``` ### MoneyField `MoneyField` Group D · pattern `P7` · component · client · i18n `kernel` - **Props** — `instantiation`: — · `overrides`: `size`, `density`, `readOnly`, `disabled` - **Axes** — `size`, `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "size": "md", "density": "cosy", "readOnly": false, "disabled": false } } ``` ### ImageField `ImageField` Group D · pattern `P7` · component · client · i18n `kernel` - **Props** — `instantiation`: `kind` · `overrides`: `size`, `density`, `readOnly`, `disabled` - **Axes** — `size`, `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast`, `--token-shadow-elev-1` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "kind": "image" }, "overrides": { "size": "md", "density": "cosy", "readOnly": false, "disabled": false } } ``` ### DateRangeField `DateRangeField` Group D · pattern `P7` · component · client · i18n `kernel` - **Props** — `instantiation`: — · `overrides`: `size`, `density`, `readOnly`, `disabled` - **Axes** — `size`, `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "size": "md", "density": "cosy", "readOnly": false, "disabled": false } } ``` ### RelationField `RelationField` Group D · pattern `P7` · component · client · i18n `kernel` - **Props** — `instantiation`: `cardinality` · `overrides`: `size`, `density`, `readOnly`, `disabled` - **Axes** — `size`, `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "cardinality": "one" }, "overrides": { "size": "md", "density": "cosy", "readOnly": false, "disabled": false } } ``` ### LifecycleField `LifecycleField` Group D · pattern `P7` · component · client · i18n `kernel` - **Props** — `instantiation`: `lifecycle` · `overrides`: `size`, `density`, `readOnly`, `disabled` - **Axes** — `size`, `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "lifecycle": { "initial": "", "transitions": {} } }, "overrides": { "size": "md", "density": "cosy", "readOnly": false, "disabled": false } } ``` ## Group E ### SiteLoading `SiteLoading` Group E · pattern `P22` · component · server · i18n `feedback` - **Props** — `instantiation`: — · `overrides`: `variant` - **Axes** — `variant` - **Variants** — `detail`, `form`, `cards`, `table`, `dashboard`, `viewer` - **Modes** — — - **Tokens** — `--token-spacing-xl`, `--token-spacing-md`, `--token-spacing-xxl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "variant": "detail" } } ``` ### BrandLoader `BrandLoader` Group E · pattern `P22` · component · server · i18n `feedback` - **Props** — `instantiation`: — · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-duration-fast`, `--token-duration-slow`, `--token-duration-page`, `--token-ease-enter`, `--token-ease-standard`, `--token-reduced-motion-duration`, `--token-spacing-xs`, `--token-shadow-elev-3` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "size": "lg" } } ``` ### ClientBrandLoader `ClientBrandLoader` Group E · pattern `P22` · component · client · i18n `feedback` - **Props** — `instantiation`: — · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-duration-fast`, `--token-duration-slow`, `--token-duration-page`, `--token-ease-enter`, `--token-ease-standard`, `--token-reduced-motion-duration`, `--token-spacing-xs` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "size": "lg" } } ``` ### PageSkeleton `PageSkeleton` Group E · pattern `P22` · component · server · i18n `feedback` - **Props** — `instantiation`: — · `overrides`: `variant` - **Axes** — `variant` - **Variants** — `table`, `dashboard`, `detail`, `viewer`, `form`, `cards` - **Modes** — — - **Tokens** — `--token-duration-fast`, `--token-duration-slow`, `--token-duration-page`, `--token-ease-enter`, `--token-ease-standard`, `--token-reduced-motion-duration`, `--token-spacing-lg`, `--token-shadow-elev-1` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "variant": "table" } } ``` ### LoadingPanel `LoadingPanel` Group E · pattern `P22` · component · client · i18n `feedback` - **Props** — `instantiation`: — · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-duration-fast`, `--token-duration-slow`, `--token-duration-page`, `--token-ease-enter`, `--token-ease-standard`, `--token-reduced-motion-duration` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "size": "md" } } ``` ### Notify `Notify` Group E · pattern `P22` · component · client · i18n `feedback` - **Props** — `instantiation`: `items`, `onDismiss` · `overrides`: `showHeading`, `size` - **Axes** — `size` - **Variants** — `info`, `success`, `warning`, `danger`, `ai`, `persistent` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "items": [], "onDismiss": "[function]" }, "overrides": { "showHeading": true, "size": "md" } } ``` ### NotifyBanner `NotifyBanner` Group E · pattern `P22` · component · client · i18n `feedback` - **Props** — `instantiation`: `title` · `overrides`: `variant`, `dismissible`, `size` - **Axes** — `variant`, `size` - **Variants** — `info`, `success`, `warning`, `danger`, `ai`, `persistent` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "variant": "info", "dismissible": false, "size": "md" } } ``` ### Dialog `Dialog` Group E · pattern `P22` · component · client · i18n `feedback` - **Props** — `instantiation`: `open`, `onOpenChange`, `title` · `overrides`: `variant`, `dismissible`, `scrollable`, `hideCloseButton` - **Axes** — `variant` - **Variants** — `sm`, `md`, `lg`, `full` - **Modes** — — - **Tokens** — `--token-shadow-elev-3`, `--token-spacing-md`, `--token-spacing-lg` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "open": false, "onOpenChange": "[function]", "title": "" }, "overrides": { "variant": "md", "dismissible": true, "scrollable": false, "hideCloseButton": false } } ``` ### ConfirmDialog `ConfirmDialog` Group E · pattern `P22` · component · client · i18n `feedback` - **Props** — `instantiation`: `open`, `onOpenChange` · `overrides`: `variant`, `isPending`, `confirmLabel`, `cancelLabel`, `icon` - **Axes** — `variant` - **Variants** — `default`, `destructive` - **Modes** — — - **Tokens** — `--token-shadow-elev-3`, `--token-spacing-md`, `--token-spacing-lg` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "open": false, "onOpenChange": "[function]" }, "overrides": { "variant": "default", "isPending": false } } ``` ### Drawer `Drawer` Group E · pattern `P22` · component · client · i18n `feedback` - **Props** — `instantiation`: `open`, `onOpenChange`, `title` · `overrides`: `variant`, `size`, `destructive`, `dismissible` - **Axes** — `variant`, `size` - **Variants** — `side`, `bottom` - **Modes** — — - **Tokens** — `--token-shadow-elev-4`, `--token-spacing-md` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "open": false, "onOpenChange": "[function]", "title": "" }, "overrides": { "variant": "side", "size": "md", "destructive": false, "dismissible": true } } ``` ### EmptyState `EmptyState` Group E · pattern `P22` · component · client · i18n `feedback` - **Props** — `instantiation`: `title` · `overrides`: `mode`, `icon` - **Axes** — `mode` - **Variants** — — - **Modes** — `empty`, `error` - **Tokens** — `--token-spacing-lg` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "mode": "empty" } } ``` ## Group F ### SseBusProvider `SseBusProvider` Group F · pattern `P14` · helper · client · i18n `realtime` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — — - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### StreamingText `StreamingText` Group F · pattern `P14` · component · client · i18n `realtime` - **Props** — `instantiation`: `text` · `overrides`: `mode`, `animating`, `plugins` - **Axes** — `mode` - **Variants** — — - **Modes** — `static`, `streaming` - **Tokens** — `--token-spacing-sm`, `--token-font-body` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "text": "" }, "overrides": { "mode": "static", "animating": false } } ``` ### NotificationFeed `NotificationFeed` Group F · pattern `P14` · component · client · i18n `realtime` - **Props** — `instantiation`: — · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "size": "sm" } } ``` ### NotificationCount `NotificationCount` Group F · pattern `P14` · component · client · i18n `realtime` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — — - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### SseConnectionState `SseConnectionState` Group F · pattern `P14` · component · client · i18n `realtime` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ## Group G ### ChatSurface `ChatSurface` Group G · pattern `P12` · component · client · i18n `chat` - **Props** — `instantiation`: `kind`, `title` · `overrides`: `variant`, `density`, `rail`, `attach` - **Axes** — `variant`, `density` - **Variants** — `bubble`, `flat`, `compact` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-2`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "kind": "human-dm", "title": "" }, "overrides": { "variant": "bubble", "density": "cosy", "rail": true, "attach": false } } ``` ### ChatMessage `ChatMessage` Group G · pattern `P12` · component · client · i18n `chat` - **Props** — `instantiation`: `message` · `overrides`: `variant`, `showAuthor` - **Axes** — `variant` - **Variants** — `bubble`, `flat`, `compact` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-2`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "message": { "id": "entry", "role": "other", "author": "", "createdAt": "", "parts": [] } }, "overrides": { "variant": "bubble", "showAuthor": true } } ``` ### ChatComposer `ChatComposer` Group G · pattern `P12` · component · client · i18n `chat` - **Props** — `instantiation`: `onSend` · `overrides`: `disabled`, `busy`, `attach`, `density` - **Axes** — `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-2`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "onSend": "[function]" }, "overrides": { "disabled": false, "busy": false, "attach": false, "density": "cosy" } } ``` ### ChatThreadList `ChatThreadList` Group G · pattern `P12` · component · client · i18n `chat` - **Props** — `instantiation`: `threads`, `activeId`, `onSelect` · `overrides`: `density` - **Axes** — `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-2`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "threads": [], "activeId": null, "onSelect": "[function]" }, "overrides": { "density": "cosy" } } ``` ### ToolCallCard `ToolCallCard` Group G · pattern `P12` · component · client · i18n `chat` - **Props** — `instantiation`: `name`, `state` · `overrides`: `defaultOpen` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-2`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "name": "tool", "state": "done" }, "overrides": { "defaultOpen": false } } ``` ### HitlCard `HitlCard` Group G · pattern `P12` · component · client · i18n `chat` - **Props** — `instantiation`: `requestId`, `title`, `state` · `overrides`: `readOnly` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-2`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "requestId": "entry", "title": "", "state": "pending" }, "overrides": { "readOnly": true } } ``` ## Group H ### VoiceAssistantPanel `VoiceAssistantPanel` Group H · pattern `P13` · component · client · i18n `voice` - **Props** — `instantiation`: `provider`, `title` · `overrides`: `mode`, `presentation`, `density`, `transcript` - **Axes** — `variant`, `density` - **Variants** — `dock`, `floating`, `fullscreen` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-3`, `--token-duration-fast`, `--token-duration-base` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "provider": "none", "title": "" }, "overrides": { "mode": "dock", "presentation": "voice", "density": "cosy", "transcript": true } } ``` ### VoiceOrb `VoiceOrb` Group H · pattern `P13` · component · client · i18n `voice` - **Props** — `instantiation`: `state`, `level` · `overrides`: `size` - **Axes** — `variant`, `size` - **Variants** — `idle`, `connecting`, `listening`, `thinking`, `speaking` - **Modes** — — - **Tokens** — `--token-duration-fast`, `--token-duration-base` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "state": "idle", "level": 0 }, "overrides": { "size": "md" } } ``` ### PortalPageVoice `PortalPageVoice` Group H · pattern `P13` · template · server · i18n `voice` - **Props** — `instantiation`: `eyebrow`, `title`, `description`, `provider`, `assistantTitle` · `overrides`: `mode`, `presentation`, `density` - **Axes** — `variant`, `density` - **Variants** — `dock`, `floating`, `fullscreen` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-3` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "eyebrow": "", "title": "", "description": "", "provider": "none", "assistantTitle": "" }, "overrides": { "mode": "dock", "presentation": "voice", "density": "cosy" } } ``` ### AudioRecorder `AudioRecorder` Group H · pattern `P15` · component · client · i18n `voice` - **Props** — `instantiation`: `transcriber` · `overrides`: `mode`, `density`, `deviceSelect`, `autoUpload` - **Axes** — `variant`, `density` - **Variants** — `inline`, `fab`, `dictation` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-3`, `--token-duration-fast`, `--token-duration-base` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "transcriber": "none" }, "overrides": { "mode": "inline", "density": "cosy", "deviceSelect": true, "autoUpload": false } } ``` ### AudioPlayer `AudioPlayer` Group H · pattern `P15` · component · client · i18n `voice` - **Props** — `instantiation`: `src`, `title` · `overrides`: `variant`, `density`, `downloadable` - **Axes** — `variant`, `density` - **Variants** — `compact`, `full`, `bubble` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-3` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "src": "", "title": "" }, "overrides": { "variant": "full", "density": "cosy", "downloadable": true } } ``` ### Waveform `Waveform` Group H · pattern `P15` · component · client · i18n `voice` - **Props** — `instantiation`: `analyser`, `label` · `overrides`: `variant`, `size` - **Axes** — `variant`, `size` - **Variants** — `bars`, `line` - **Modes** — — - **Tokens** — `--token-spacing-sm` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "analyser": null, "label": "" }, "overrides": { "variant": "bars", "size": "md" } } ``` ### DeviceSelector `DeviceSelector` Group H · pattern `P15` · component · client · i18n `voice` - **Props** — `instantiation`: `devices`, `value`, `onChange` · `overrides`: `disabled` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "devices": [], "value": null, "onChange": "[function]" }, "overrides": { "disabled": false } } ``` ### TranscriptView `TranscriptView` Group H · pattern `P15` · component · client · i18n `voice` - **Props** — `instantiation`: `segments` · `overrides`: `density`, `speakers` - **Axes** — `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "segments": [] }, "overrides": { "density": "cosy", "speakers": true } } ``` ### PortalPageRecorder `PortalPageRecorder` Group H · pattern `P15` · template · server · i18n `voice` - **Props** — `instantiation`: `eyebrow`, `title`, `description`, `transcriber` · `overrides`: `density` - **Axes** — `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-shadow-elev-1`, `--token-shadow-elev-3` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "eyebrow": "", "title": "", "description": "", "transcriber": "none" }, "overrides": { "density": "cosy" } } ``` ## Group I ### MediaViewer `MediaViewer` Group I · pattern `P9` · component · client · i18n `media` - **Props** — `instantiation`: `items` · `overrides`: `mode`, `aspect`, `downloadable`, `startIndex` - **Axes** — `mode` - **Variants** — — - **Modes** — `inline`, `lightbox`, `carousel`, `fullscreen`, `zoom` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "items": [] }, "overrides": { "mode": "inline", "aspect": "video", "downloadable": false, "startIndex": 0 } } ``` ### DocumentViewer `DocumentViewer` Group I · pattern `P9` · component · client · i18n `media` - **Props** — `instantiation`: `document` · `overrides`: `markdown`, `audio`, `downloadable`, `pdfMode` - **Axes** — `variant` - **Variants** — `pdf`, `docx`, `xlsx`, `image`, `dicom`, `markdown`, `html`, `audio`, `video`, `unknown` - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "document": { "id": "", "kind": "unknown", "url": "", "title": "" } }, "overrides": { "markdown": null, "audio": null, "downloadable": true, "pdfMode": "paged" } } ``` ### PdfViewer `PdfViewer` Group I · pattern `P9` · component · client · i18n `media` - **Props** — `instantiation`: `url`, `title` · `overrides`: `mode`, `textLayer`, `initialZoom`, `downloadable` - **Axes** — `mode` - **Variants** — — - **Modes** — `paged`, `continuous`, `print` - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "url": "", "title": "" }, "overrides": { "mode": "paged", "textLayer": true, "initialZoom": 1, "downloadable": true } } ``` ### DicomViewer `DicomViewer` Group I · pattern `P9` · component · client · i18n `media` - **Props** — `instantiation`: `url`, `title` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "url": "", "title": "" }, "overrides": {} } ``` ### QrCode `QrCode` Group I · pattern `P8` · component · server · i18n `media` - **Props** — `instantiation`: `value`, `label` · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — — - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "value": "", "label": "" }, "overrides": { "size": "md" } } ``` ### PrintLayout `PrintLayout` Group I · pattern `P8` · component · client · i18n `media` - **Props** — `instantiation`: `title`, `body` · `overrides`: `printOnLoad` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "body": null }, "overrides": { "printOnLoad": false } } ``` ### PrintFieldGrid `PrintFieldGrid` Group I · pattern `P8` · component · server · i18n `media` - **Props** — `instantiation`: `sections` · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "sections": [] }, "overrides": {} } ``` ### PdfDocument `PdfDocument` Group I · pattern `P8` · component · server · i18n `media` - **Props** — `instantiation`: `title`, `orgName`, `footer`, `sections` · `overrides`: `variant` - **Axes** — `variant` - **Variants** — `branded`, `form`, `report` - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "", "orgName": "", "footer": "", "sections": [] }, "overrides": { "variant": "branded" } } ``` ### PortalPageViewer `PortalPageViewer` Group I · pattern `P9` · template · server · i18n `media` - **Props** — `instantiation`: `title` · `overrides`: `pdfMode`, `downloadable` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "pdfMode": "paged", "downloadable": true } } ``` ### PortalPagePrint `PortalPagePrint` Group I · pattern `P8` · template · server · i18n `media` - **Props** — `instantiation`: `title` · `overrides`: `printOnLoad` - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "title": "" }, "overrides": { "printOnLoad": false } } ``` ## Group J ### CallRoom `CallRoom` Group J · pattern `P16` · component · client · i18n `call` - **Props** — `instantiation`: `room`, `provider`, `title` · `overrides`: `density`, `sidePanel` - **Axes** — `density` - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-spacing-lg`, `--token-shadow-elev-1`, `--token-shadow-elev-2` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "room": { "roomId": "demo" }, "provider": "none", "title": "" }, "overrides": { "density": "cosy", "sidePanel": true } } ``` ## Group K ### Heading `Heading` Group K · pattern `operator` · component · server · i18n `primitives` - **Props** — `instantiation`: `level`, `content` · `overrides`: `variant`, `size` - **Axes** — `variant`, `size` - **Variants** — `display`, `section` - **Modes** — — - **Tokens** — `--token-font-display` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "level": 2, "content": null }, "overrides": { "variant": "section" } } ``` ### Text `Text` Group K · pattern `operator` · component · server · i18n `primitives` - **Props** — `instantiation`: `content` · `overrides`: `variant`, `size`, `tone`, `weight`, `numeric` - **Axes** — `variant`, `size` - **Variants** — `body`, `ui`, `muted`, `small` - **Modes** — — - **Tokens** — `--token-font-body` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null }, "overrides": { "variant": "body", "weight": "regular", "numeric": false } } ``` ### Label `Label` Group K · pattern `operator` · component · server · i18n `primitives` - **Props** — `instantiation`: `content` · `overrides`: `variant` - **Axes** — `variant` - **Variants** — `field`, `eyebrow` - **Modes** — — - **Tokens** — `--token-font-body` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null }, "overrides": { "variant": "field" } } ``` ### Code `Code` Group K · pattern `operator` · component · server · i18n `primitives` - **Props** — `instantiation`: `content` · `overrides`: `mode` - **Axes** — `mode` - **Variants** — — - **Modes** — `inline`, `block` - **Tokens** — `--token-font-mono`, `--token-color-muted` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null }, "overrides": { "mode": "inline" } } ``` ### Mono `Mono` Group K · pattern `operator` · component · server · i18n `primitives` - **Props** — `instantiation`: `content` · `overrides`: `size`, `tone` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-font-mono` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null }, "overrides": { "size": "xs", "tone": "default" } } ``` ### Numeric `Numeric` Group K · pattern `operator` · component · server · i18n `primitives` - **Props** — `instantiation`: `content` · `overrides`: `variant`, `size` - **Axes** — `variant`, `size` - **Variants** — `data`, `display` - **Modes** — — - **Tokens** — `--token-font-body`, `--token-font-display` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null }, "overrides": { "variant": "data", "size": "sm" } } ``` ### Surface `Surface` Group K · pattern `operator` · component · server · i18n `primitives` - **Props** — `instantiation`: `content` · `overrides`: `mode`, `tone`, `elevation`, `density` - **Axes** — `mode`, `density` - **Variants** — — - **Modes** — `flat`, `raised`, `overlay` - **Tokens** — `--token-shadow-elev-1`, `--token-shadow-elev-2`, `--token-shadow-elev-3`, `--token-shadow-elev-4`, `--token-spacing-md`, `--token-spacing-lg`, `--token-spacing-xl` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null }, "overrides": { "mode": "raised", "tone": "elevated", "density": "cosy" } } ``` ### Icon `Icon` Group K · pattern `operator` · component · server · i18n `primitives` - **Props** — `instantiation`: `name` · `overrides`: `size`, `variant` - **Axes** — `variant`, `size` - **Variants** — `thin`, `regular` - **Modes** — — - **Tokens** — — - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "name": "circle" }, "overrides": { "size": "sm", "variant": "regular" } } ``` ### Button `Button` Group K · pattern `operator` · component · server · i18n `primitives` - **Props** — `instantiation`: `content`, `type` · `overrides`: `variant`, `size`, `width`, `align`, `height` - **Axes** — `variant`, `size` - **Variants** — `primary`, `secondary`, `outline`, `ghost`, `destructive`, `link` - **Modes** — — - **Tokens** — `--token-font-body`, `--token-color-primary`, `--token-color-accent-soft`, `--token-shadow-elev-1`, `--token-spacing-sm`, `--token-duration-fast` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "content": null, "type": "button" }, "overrides": { "variant": "primary", "size": "md", "width": "auto", "align": "center", "height": "control" } } ``` ### ThemeSwitcher `ThemeSwitcher` Group K · pattern `operator` · component · client · i18n `primitives` - **Props** — `instantiation`: — · `overrides`: `size`, `iconOnly` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-font-body`, `--token-color-muted` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": { "iconOnly": false } } ``` ### DensitySwitcher `DensitySwitcher` Group K · pattern `operator` · component · client · i18n `primitives` - **Props** — `instantiation`: — · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-muted` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ``` ### PaletteSwitcher `PaletteSwitcher` Group K · pattern `operator` · component · client · i18n `primitives` - **Props** — `instantiation`: `value`, `onValueChange` · `overrides`: `size` - **Axes** — `size` - **Variants** — — - **Modes** — — - **Tokens** — `--token-color-muted` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "value": "dudoxx", "onValueChange": "[function]" }, "overrides": {} } ``` ### BrandLogo `BrandLogo` Group K · pattern `operator` · component · client · i18n `brand` - **Props** — `instantiation`: `name`, `mode`, `style`, `src` · `overrides`: `mode`, `variant`, `size`, `withName` - **Axes** — `mode`, `variant`, `size` - **Variants** — `monogram-circle`, `monogram-square`, `wordmark` - **Modes** — `platform`, `generated`, `upload` - **Tokens** — `--token-color-primary`, `--token-color-primary-foreground`, `--token-font-display`, `--token-spacing-sm` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "name": "", "mode": "platform", "style": "monogram-square", "src": null }, "overrides": { "size": "md", "withName": false } } ``` ### BrandIllustration `BrandIllustration` Group K · pattern `operator` · component · server · i18n `brand` - **Props** — `instantiation`: `illustration` · `overrides`: `variant`, `size` - **Axes** — `variant`, `size` - **Variants** — `signal`, `grid`, `orbit`, `none` - **Modes** — — - **Tokens** — `--token-color-primary`, `--token-color-accent`, `--token-color-muted-foreground` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": { "illustration": "signal" }, "overrides": { "size": "md" } } ``` ### DdxDebugProvider `PlatformDebugProvider` Group K · pattern `operator` · component · client · i18n `debug` - **Props** — `instantiation`: — · `overrides`: — - **Axes** — — - **Variants** — — - **Modes** — — - **Tokens** — `--token-spacing-xs`, `--token-spacing-sm`, `--token-spacing-md`, `--token-font-mono` - **Gallery** — not yet Usage (defaults): ```json { "instantiation": {}, "overrides": {} } ```