@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/theme.css

@@ -0,0 +1,169 @@
+/* Ripple theme tokens.
+   Hosts may override any --ripple-* custom property in a scoped selector
+   (e.g. `.my-context .ripple-root { --ripple-surface: transparent; }`)
+   to retheme Ripple per render context without polluting the global
+   shadcn token set. Defaults cascade from the host's shadcn tokens, so doing
+   nothing keeps the host's look.
+
+   - --ripple-popover fills every floating layer (menus, popovers, dialogs);
+     in-flow surfaces stay on --ripple-surface (the host's --card).
+   - --ripple-error and --ripple-accent alias the host's --destructive and
+     --primary, so the host's red and brand colour are canonical.
+   - --ripple-{tone}-text and --ripple-accent-text are tones blended toward
+     the surface ink, for text; the raw tones are fills only. Each reaches
+     4.5:1 on its /10 and /15 tints and the plain ground in both themes.
+   - --ripple-track (rails, tracks, skeleton blocks, off switches) and
+     --ripple-control-border (checkbox and radio rims, slider thumbs, OTP
+     slots) are ink washes over whatever card the host paints, so controls
+     read on any surface: tracks at least 1.4:1 and borders at least 3:1
+     (WCAG 1.4.11) against the card in both themes. --ripple-raised fills a
+     selected tab or segment, lighter than the track in both themes;
+     --ripple-card-face is the paper of a card object.
+   The -text and control tokens sit on :where(.ripple-root) too, so a host
+   that re-points a tone or the ink on .ripple-root gets values blended from
+   its own, and any direct override still wins (zero specificity).
+   All ratios are guarded by src/lib/ui/status-text.test.ts. */
+
+/* Fluid Functionalism 8-step surface/elevation ladder (MIT). */
+@import './systems/elevation.css';
+
+:root {
+  --ripple-surface: var(--card);
+  --ripple-surface-foreground: var(--card-foreground);
+  /* Floating layers over content. Not the card tint: see the header. */
+  --ripple-popover: var(--popover);
+  --ripple-popover-foreground: var(--popover-foreground);
+  --ripple-muted: var(--muted);
+  --ripple-muted-foreground: var(--muted-foreground);
+  --ripple-accent: var(--primary);
+  --ripple-accent-foreground: var(--primary-foreground);
+  --ripple-border: var(--border);
+  --ripple-ring: var(--ring);
+  --ripple-success: oklch(0.72 0.17 155);
+  --ripple-success-foreground: oklch(1 0 0);
+  --ripple-warning: oklch(0.80 0.16 80);
+  --ripple-warning-foreground: oklch(0.15 0 0);
+  --ripple-error: var(--destructive);
+  --ripple-error-foreground: var(--destructive-foreground);
+  --ripple-info: oklch(0.70 0.12 250);
+  --ripple-info-foreground: oklch(1 0 0);
+  --ripple-input: var(--background);
+  --ripple-input-foreground: var(--foreground);
+  --ripple-radius: var(--radius);
+  /* Signature ease of the beautiful-ui skin (MIT — see NOTICE). Overridable
+     per context like every other --ripple-* property. Components reach for it
+     two ways: the `ease-ripple-out` utility, or var(--ripple-ease-out) inside a
+     scoped <style> block, which is where the per-component keyframes live.
+     The value is the curve the source actually uses: cubic-bezier(0.23,1,0.32,1)
+     appears 83 times across its CSS and components, while the 0.22/0.36 variant
+     the arc brief quoted appears exactly once. Visually near-identical; this is
+     the one carrying the look. */
+  --ripple-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+/* Readable status text: see the third-pass note at the top. */
+:root,
+:where(.ripple-root) {
+  --ripple-error-text: color-mix(in oklab, var(--ripple-error) 60%, var(--ripple-surface-foreground));
+  --ripple-success-text: color-mix(in oklab, var(--ripple-success) 55%, var(--ripple-surface-foreground));
+  --ripple-warning-text: color-mix(in oklab, var(--ripple-warning) 50%, var(--ripple-surface-foreground));
+  --ripple-info-text: color-mix(in oklab, var(--ripple-info) 55%, var(--ripple-surface-foreground));
+  /* Accent as text (badges, chips, links, mentions): --ripple-accent stays the
+     fill. 58% clears a /15 tint on the callout tint over the muted panel on the
+     darkest ground (#262621) with margin. */
+  --ripple-accent-text: color-mix(in oklab, var(--ripple-accent) 58%, var(--ripple-surface-foreground));
+  /* Control tokens: ink washes over the card, so they read on any host surface. */
+  --ripple-track: color-mix(in oklab, var(--ripple-surface-foreground) 18%, transparent);
+  --ripple-control-border: color-mix(in oklab, var(--ripple-surface-foreground) 50%, transparent);
+  /* A raised chip (selected tab or segment): the card lifted toward white, so
+     it sits lighter than --ripple-track in light and dark alike. */
+  --ripple-raised: color-mix(in oklab, var(--ripple-surface) 68%, white);
+  /* Paper for a card object (study cards, their sheets): white under dark ink,
+     a step above a dark card under light ink. Keyed off the ink, not the
+     surface, so it holds on a host that paints the card lighter than
+     --ripple-surface or leaves it transparent, where --ripple-raised reads
+     recessed in light and mid grey in dark. */
+  --ripple-card-face: oklch(from var(--ripple-surface-foreground) min(1, calc(1.2 - l * 0.9)) calc(c * 0.5) h);
+}
+
+@theme inline {
+  --color-ripple-surface: var(--ripple-surface);
+  --color-ripple-surface-foreground: var(--ripple-surface-foreground);
+  --color-ripple-popover: var(--ripple-popover);
+  --color-ripple-popover-foreground: var(--ripple-popover-foreground);
+  --color-ripple-muted: var(--ripple-muted);
+  --color-ripple-muted-foreground: var(--ripple-muted-foreground);
+  --color-ripple-accent: var(--ripple-accent);
+  --color-ripple-accent-foreground: var(--ripple-accent-foreground);
+  --color-ripple-accent-text: var(--ripple-accent-text);
+  --color-ripple-track: var(--ripple-track);
+  --color-ripple-control-border: var(--ripple-control-border);
+  --color-ripple-raised: var(--ripple-raised);
+  --color-ripple-card-face: var(--ripple-card-face);
+  --color-ripple-border: var(--ripple-border);
+  --color-ripple-ring: var(--ripple-ring);
+  --color-ripple-success: var(--ripple-success);
+  --color-ripple-success-foreground: var(--ripple-success-foreground);
+  --color-ripple-success-text: var(--ripple-success-text);
+  --color-ripple-warning: var(--ripple-warning);
+  --color-ripple-warning-foreground: var(--ripple-warning-foreground);
+  --color-ripple-warning-text: var(--ripple-warning-text);
+  --color-ripple-error: var(--ripple-error);
+  --color-ripple-error-foreground: var(--ripple-error-foreground);
+  --color-ripple-error-text: var(--ripple-error-text);
+  --color-ripple-info: var(--ripple-info);
+  --color-ripple-info-foreground: var(--ripple-info-foreground);
+  --color-ripple-info-text: var(--ripple-info-text);
+  --color-ripple-input: var(--ripple-input);
+  --color-ripple-input-foreground: var(--ripple-input-foreground);
+  --radius-ripple: var(--ripple-radius);
+  --ease-ripple-out: var(--ripple-ease-out);
+}
+
+/* Apple-HIG type scale, shared with paw-enterprise so one class name means one
+   size in the app and on the public site. Names, values and the @utility
+   declarations are a verbatim copy of paw-enterprise's src/styles/global.css;
+   keep them identical. paw-enterprise imports this file before its own copy,
+   so its declarations still come last and win, and identical values make the
+   order moot. The custom properties sit on :where(:root) (zero specificity)
+   so any host :root value wins. Kept out of @theme on purpose: a --text-*
+   token there would also mint a second, functional text-* utility. */
+:where(:root) {
+  --text-title-1: 26px;
+  --text-title-2: 22px;
+  --text-title-3: 17px;
+  --text-headline: 13px;
+  --text-body: 13px;
+  --text-callout: 12px;
+  --text-subheadline: 11px;
+  --text-footnote: 10px;
+  --text-caption-1: 10px;
+  --text-caption-2: 10px;
+
+  --lh-title-1: 32px;
+  --lh-title-2: 28px;
+  --lh-title-3: 22px;
+  --lh-headline: 16px;
+  --lh-body: 16px;
+  --lh-callout: 15px;
+  --lh-subheadline: 14px;
+  --lh-footnote: 13px;
+  --lh-caption: 13px;
+
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+}
+
+@utility text-title-1     { font-size: var(--text-title-1); line-height: var(--lh-title-1); font-weight: var(--weight-regular); }
+@utility text-title-2     { font-size: var(--text-title-2); line-height: var(--lh-title-2); font-weight: var(--weight-regular); }
+@utility text-title-3     { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: var(--weight-regular); }
+@utility text-headline    { font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: var(--weight-semibold); }
+@utility text-body        { font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--weight-regular); }
+@utility text-body-emph   { font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--weight-medium); }
+@utility text-callout     { font-size: var(--text-callout); line-height: var(--lh-callout); font-weight: var(--weight-regular); }
+@utility text-subheadline { font-size: var(--text-subheadline); line-height: var(--lh-subheadline); font-weight: var(--weight-regular); }
+@utility text-footnote    { font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-regular); }
+@utility text-caption-1   { font-size: var(--text-caption-1); line-height: var(--lh-caption); font-weight: var(--weight-regular); }
+@utility text-caption-2   { font-size: var(--text-caption-2); line-height: var(--lh-caption); font-weight: var(--weight-medium); }

package/dist/ui/index.d.ts

@@ -0,0 +1,113 @@
+/**
+ * @file ui/index.ts
+ * @description The hand-written-caller surface: the subset of ripple that is
+ *   safe and intended to be imported as plain Svelte components, outside
+ *   `<Ripple spec>`. Ripple is the UI source of truth for its hosts
+ *   (paw-enterprise, paw-sites), and this is the door they come through.
+ *
+ *   Not a copy of anything: every name is re-exported from where it already
+ *   lives, so the spec registry and direct callers share one component and a
+ *   fix lands once.
+ *
+ *   WHAT BELONGS HERE. A component that is context-free: it renders correctly
+ *   with no renderer `getContext`. A context read is allowed only when typed
+ *   `| undefined` and guarded. `widgets/data/Table.svelte` is absent because
+ *   it reads `ui-events`/`ui-state`/`ui-data` as required.
+ *   `ui-contract.test.ts` mounts every export standalone and checks that rule
+ *   statically; a new export needs a PROPS entry there. Type exports go
+ *   through a `.ts` module, never `from '….svelte'` (the test counts those).
+ *
+ *   SHAPE. Grouped atom / molecule / organism. Overlays and parts with
+ *   sub-parts are shadcn composable namespaces (`Dialog.Root`, `Slider.Root`),
+ *   the shape paw-enterprise's call sites already use. `confirmDialog` is also
+ *   exported by name because callers import the store, not the component, and
+ *   the asset drag helpers (ASSET_MIME, readAssetDrop, isAssetDrag) are plain
+ *   functions beside AssetPanel.
+ *
+ *   Some exports are ./ui-only (no spec-registry or manifest entry): the AI
+ *   surfaces, the shell and call parts, and the craft editor parts (ToolRail,
+ *   CanvasViewport, EditorShell, TransformBox, InspectorSection, PropertyRow,
+ *   and the Quick mode parts ContextToolbar, AssetPanel, PageStrip). The
+ *   manifest widget count does not move when one of those is added.
+ */
+export { default as Button } from '../widgets/input/Button.svelte';
+export { default as Input } from '../widgets/input/Input.svelte';
+export { default as Textarea } from '../widgets/input/Textarea.svelte';
+export { default as Switch } from '../widgets/input/Switch.svelte';
+export { default as Checkbox } from '../widgets/input/Checkbox.svelte';
+export { default as Chip } from '../widgets/display/Chip.svelte';
+export { default as Badge } from '../widgets/display/Badge.svelte';
+export { default as StatusDot } from '../widgets/display/StatusDot.svelte';
+export { default as Skeleton } from '../widgets/display/Skeleton.svelte';
+export { default as ProgressRing } from '../widgets/display/ProgressRing.svelte';
+export { default as Shimmer } from '../widgets/premium/Shimmer.svelte';
+export { default as Separator } from '../widgets/layout/Separator.svelte';
+export { default as Kbd } from '../widgets/display/Kbd.svelte';
+export { default as CountBadge } from '../widgets/call/CountBadge.svelte';
+export { default as ControlButton } from '../widgets/call/ControlButton.svelte';
+export { default as Card } from '../widgets/layout/Card.svelte';
+export { default as EmptyState } from '../widgets/display/EmptyState.svelte';
+export { default as Avatar } from '../widgets/display/Avatar.svelte';
+export { default as Segmented } from '../widgets/input/Segmented.svelte';
+export { default as ColorPicker } from '../widgets/input/ColorPicker.svelte';
+export { default as NumberInput } from '../widgets/input/NumberInput.svelte';
+export { default as ChoiceGrid } from '../widgets/input/ChoiceGrid.svelte';
+export type { ChoiceOption } from '../widgets/input/choice-grid.js';
+export { default as Search } from '../widgets/input/Search.svelte';
+export { default as Tabs } from '../widgets/layout/Tabs.svelte';
+export { default as Collapsible } from '../widgets/layout/Collapsible.svelte';
+export { default as CodeBlock } from '../widgets/display/CodeBlock.svelte';
+export { default as Diff } from '../widgets/display/Diff.svelte';
+export { default as Markdown } from '../widgets/display/Markdown.svelte';
+export { default as Toast } from '../widgets/overlay/Toast.svelte';
+export { default as ListRow } from '../widgets/layout/ListRow.svelte';
+export { default as SectionHeader } from '../widgets/layout/SectionHeader.svelte';
+export { default as PanelHeader } from '../widgets/layout/PanelHeader.svelte';
+export { default as PageHeader } from '../widgets/layout/PageHeader.svelte';
+export { default as InlineAlert } from '../widgets/display/InlineAlert.svelte';
+export { default as ControlBar } from '../widgets/call/ControlBar.svelte';
+export { default as ParticipantTile } from '../widgets/call/ParticipantTile.svelte';
+export { default as IncomingCallCard } from '../widgets/call/IncomingCallCard.svelte';
+export { default as ToolRail } from '../widgets/craft/ToolRail.svelte';
+export { default as PropertyRow } from '../widgets/craft/PropertyRow.svelte';
+export { default as InspectorSection } from '../widgets/craft/InspectorSection.svelte';
+export * as Slider from '../components/ui/slider/index.js';
+export * as Tooltip from '../components/ui/tooltip/index.js';
+export * as Popover from '../components/ui/popover/index.js';
+export * as HoverCard from '../components/ui/hover-card/index.js';
+export * as DropdownMenu from '../components/ui/dropdown-menu/index.js';
+export * as ContextMenu from '../components/ui/context-menu/index.js';
+export * as Dialog from '../components/ui/dialog/index.js';
+export * as Sheet from '../components/ui/sheet/index.js';
+export * as ConfirmDialog from '../components/ui/confirm-dialog/index.js';
+export * as Command from '../components/ui/command/index.js';
+export { default as CommandPalette } from '../widgets/overlay/CommandPalette.svelte';
+export type { PaletteItem } from '../widgets/overlay/palette-search.js';
+export { confirmDialog, type ConfirmDialogOptions } from '../components/ui/confirm-dialog/index.js';
+export { default as ApprovalGate } from '../widgets/ai/ApprovalGate.svelte';
+export { default as StreamText } from '../widgets/ai/StreamText.svelte';
+export { default as ToolCall } from '../widgets/ai/ToolCall.svelte';
+export { default as ReasoningTrace } from '../widgets/ai/ReasoningTrace.svelte';
+export { default as TaskRows } from '../widgets/ai/TaskRows.svelte';
+export { default as PromptBar } from '../widgets/ai/PromptBar.svelte';
+export { default as AnswerBlock } from '../widgets/ai/AnswerBlock.svelte';
+export { default as PixelLoader } from '../widgets/ai/PixelLoader.svelte';
+export { default as DiffTable } from '../widgets/data/DiffTable.svelte';
+export { default as ContextCards } from '../widgets/ai/ContextCards.svelte';
+export { default as RecommendationCard } from '../widgets/ai/RecommendationCard.svelte';
+export { default as FineTuneCard } from '../widgets/ai/FineTuneCard.svelte';
+export { default as SelectionActions } from '../widgets/ai/SelectionActions.svelte';
+export { default as FloatingDock } from '../widgets/call/FloatingDock.svelte';
+export { default as BottomSheet } from '../widgets/call/BottomSheet.svelte';
+export { default as CanvasViewport } from '../widgets/craft/CanvasViewport.svelte';
+export { default as EditorShell } from '../widgets/craft/EditorShell.svelte';
+export { default as TransformBox } from '../widgets/craft/TransformBox.svelte';
+export { default as Tree } from '../widgets/data/Tree.svelte';
+export { default as ContextToolbar } from '../widgets/craft/ContextToolbar.svelte';
+export type { ToolbarPlacement } from '../widgets/craft/toolbar-math.js';
+export { default as AssetPanel } from '../widgets/craft/AssetPanel.svelte';
+export { ASSET_MIME, readAssetDrop, isAssetDrag } from '../widgets/craft/asset-panel.js';
+export type { AssetTab, AssetItem, AssetFilter, AssetDrop } from '../widgets/craft/asset-panel.js';
+export { default as PageStrip } from '../widgets/craft/PageStrip.svelte';
+export type { PageItem } from '../widgets/craft/page-strip.js';
+export type { CraftTool, CanvasGuide, CanvasGuideChange, CanvasRect, CanvasPointer, CanvasMods, ViewTransform, EditorPanelTab, LayerMove, LayerNode, TransformHandle, TransformKind, ScreenRect, } from '../widgets/craft/types.js';

package/dist/ui/index.js

@@ -0,0 +1,126 @@
+/**
+ * @file ui/index.ts
+ * @description The hand-written-caller surface: the subset of ripple that is
+ *   safe and intended to be imported as plain Svelte components, outside
+ *   `<Ripple spec>`. Ripple is the UI source of truth for its hosts
+ *   (paw-enterprise, paw-sites), and this is the door they come through.
+ *
+ *   Not a copy of anything: every name is re-exported from where it already
+ *   lives, so the spec registry and direct callers share one component and a
+ *   fix lands once.
+ *
+ *   WHAT BELONGS HERE. A component that is context-free: it renders correctly
+ *   with no renderer `getContext`. A context read is allowed only when typed
+ *   `| undefined` and guarded. `widgets/data/Table.svelte` is absent because
+ *   it reads `ui-events`/`ui-state`/`ui-data` as required.
+ *   `ui-contract.test.ts` mounts every export standalone and checks that rule
+ *   statically; a new export needs a PROPS entry there. Type exports go
+ *   through a `.ts` module, never `from '….svelte'` (the test counts those).
+ *
+ *   SHAPE. Grouped atom / molecule / organism. Overlays and parts with
+ *   sub-parts are shadcn composable namespaces (`Dialog.Root`, `Slider.Root`),
+ *   the shape paw-enterprise's call sites already use. `confirmDialog` is also
+ *   exported by name because callers import the store, not the component, and
+ *   the asset drag helpers (ASSET_MIME, readAssetDrop, isAssetDrag) are plain
+ *   functions beside AssetPanel.
+ *
+ *   Some exports are ./ui-only (no spec-registry or manifest entry): the AI
+ *   surfaces, the shell and call parts, and the craft editor parts (ToolRail,
+ *   CanvasViewport, EditorShell, TransformBox, InspectorSection, PropertyRow,
+ *   and the Quick mode parts ContextToolbar, AssetPanel, PageStrip). The
+ *   manifest widget count does not move when one of those is added.
+ */
+/* ── atoms ─────────────────────────────────────────────────────────────────
+   No dependency on another primitive. */
+export { default as Button } from '../widgets/input/Button.svelte';
+export { default as Input } from '../widgets/input/Input.svelte';
+export { default as Textarea } from '../widgets/input/Textarea.svelte';
+export { default as Switch } from '../widgets/input/Switch.svelte';
+export { default as Checkbox } from '../widgets/input/Checkbox.svelte';
+export { default as Chip } from '../widgets/display/Chip.svelte';
+export { default as Badge } from '../widgets/display/Badge.svelte';
+export { default as StatusDot } from '../widgets/display/StatusDot.svelte';
+export { default as Skeleton } from '../widgets/display/Skeleton.svelte';
+export { default as ProgressRing } from '../widgets/display/ProgressRing.svelte';
+export { default as Shimmer } from '../widgets/premium/Shimmer.svelte';
+export { default as Separator } from '../widgets/layout/Separator.svelte';
+export { default as Kbd } from '../widgets/display/Kbd.svelte';
+export { default as CountBadge } from '../widgets/call/CountBadge.svelte';
+export { default as ControlButton } from '../widgets/call/ControlButton.svelte';
+/* ── molecules ─────────────────────────────────────────────────────────────
+   Compose atoms; still no app state. */
+export { default as Card } from '../widgets/layout/Card.svelte';
+export { default as EmptyState } from '../widgets/display/EmptyState.svelte';
+export { default as Avatar } from '../widgets/display/Avatar.svelte';
+export { default as Segmented } from '../widgets/input/Segmented.svelte';
+export { default as ColorPicker } from '../widgets/input/ColorPicker.svelte';
+export { default as NumberInput } from '../widgets/input/NumberInput.svelte';
+export { default as ChoiceGrid } from '../widgets/input/ChoiceGrid.svelte';
+export { default as Search } from '../widgets/input/Search.svelte';
+export { default as Tabs } from '../widgets/layout/Tabs.svelte';
+export { default as Collapsible } from '../widgets/layout/Collapsible.svelte';
+export { default as CodeBlock } from '../widgets/display/CodeBlock.svelte';
+export { default as Diff } from '../widgets/display/Diff.svelte';
+export { default as Markdown } from '../widgets/display/Markdown.svelte';
+export { default as Toast } from '../widgets/overlay/Toast.svelte';
+export { default as ListRow } from '../widgets/layout/ListRow.svelte';
+export { default as SectionHeader } from '../widgets/layout/SectionHeader.svelte';
+export { default as PanelHeader } from '../widgets/layout/PanelHeader.svelte';
+export { default as PageHeader } from '../widgets/layout/PageHeader.svelte';
+export { default as InlineAlert } from '../widgets/display/InlineAlert.svelte';
+export { default as ControlBar } from '../widgets/call/ControlBar.svelte';
+export { default as ParticipantTile } from '../widgets/call/ParticipantTile.svelte';
+export { default as IncomingCallCard } from '../widgets/call/IncomingCallCard.svelte';
+export { default as ToolRail } from '../widgets/craft/ToolRail.svelte';
+export { default as PropertyRow } from '../widgets/craft/PropertyRow.svelte';
+export { default as InspectorSection } from '../widgets/craft/InspectorSection.svelte';
+/* ── form parts with sub-parts: shadcn composable namespace ────────────── */
+export * as Slider from '../components/ui/slider/index.js';
+/* ── overlays ──────────────────────────────────────────────────────────────
+   The canonical overlay set, one namespace per kind (anchored / modal /
+   palette; Toast above is the transient kind). shadcn composable shape. */
+export * as Tooltip from '../components/ui/tooltip/index.js';
+export * as Popover from '../components/ui/popover/index.js';
+export * as HoverCard from '../components/ui/hover-card/index.js';
+export * as DropdownMenu from '../components/ui/dropdown-menu/index.js';
+export * as ContextMenu from '../components/ui/context-menu/index.js';
+export * as Dialog from '../components/ui/dialog/index.js';
+export * as Sheet from '../components/ui/sheet/index.js';
+export * as ConfirmDialog from '../components/ui/confirm-dialog/index.js';
+export * as Command from '../components/ui/command/index.js';
+/* The palette over commands AND content (Quick mode's `/` and ⌘K). Also a spec widget. */
+export { default as CommandPalette } from '../widgets/overlay/CommandPalette.svelte';
+export { confirmDialog } from '../components/ui/confirm-dialog/index.js';
+/* ── organisms ─────────────────────────────────────────────────────────────
+   Own behaviour and state. The AI-native tier: the product's core surfaces.
+   TaskRows and PromptBar joined it in the beautiful-ui re-skin (2026-09-14) and
+   are deliberately absent from the spec registry and the manifest — they reach
+   callers through this surface only, which is why the manifest still reports
+   189 widgets. */
+export { default as ApprovalGate } from '../widgets/ai/ApprovalGate.svelte';
+export { default as StreamText } from '../widgets/ai/StreamText.svelte';
+export { default as ToolCall } from '../widgets/ai/ToolCall.svelte';
+export { default as ReasoningTrace } from '../widgets/ai/ReasoningTrace.svelte';
+export { default as TaskRows } from '../widgets/ai/TaskRows.svelte';
+export { default as PromptBar } from '../widgets/ai/PromptBar.svelte';
+export { default as AnswerBlock } from '../widgets/ai/AnswerBlock.svelte';
+export { default as PixelLoader } from '../widgets/ai/PixelLoader.svelte';
+export { default as DiffTable } from '../widgets/data/DiffTable.svelte';
+export { default as ContextCards } from '../widgets/ai/ContextCards.svelte';
+export { default as RecommendationCard } from '../widgets/ai/RecommendationCard.svelte';
+export { default as FineTuneCard } from '../widgets/ai/FineTuneCard.svelte';
+export { default as SelectionActions } from '../widgets/ai/SelectionActions.svelte';
+export { default as FloatingDock } from '../widgets/call/FloatingDock.svelte';
+export { default as BottomSheet } from '../widgets/call/BottomSheet.svelte';
+/* ── craft editor organisms ────────────────────────────────────────────────
+   The shared frame of the craft editors (vector, photo, layout). `Tree` is the
+   registered widget; its opt-in layer props make it the layer list. */
+export { default as CanvasViewport } from '../widgets/craft/CanvasViewport.svelte';
+export { default as EditorShell } from '../widgets/craft/EditorShell.svelte';
+export { default as TransformBox } from '../widgets/craft/TransformBox.svelte';
+export { default as Tree } from '../widgets/data/Tree.svelte';
+export { default as ContextToolbar } from '../widgets/craft/ContextToolbar.svelte';
+export { default as AssetPanel } from '../widgets/craft/AssetPanel.svelte';
+/* The drag contract between AssetPanel and a canvas: plain helpers, not components. */
+export { ASSET_MIME, readAssetDrop, isAssetDrag } from '../widgets/craft/asset-panel.js';
+export { default as PageStrip } from '../widgets/craft/PageStrip.svelte';

package/dist/utils/safe-color.d.ts

@@ -0,0 +1,4 @@
+export declare const COLOR_RE: RegExp;
+export declare const safeColor: (raw: string | undefined, fallback: string) => string;
+/** A colour literal or a `var(--ripple-*)` token, else undefined. Never throws. */
+export declare function safeThemeColor(raw: unknown): string | undefined;

package/dist/utils/safe-color.js

@@ -0,0 +1,18 @@
+// utils/safe-color.ts: the colour allowlist for spec-controlled colour props.
+// A colour from a spec is model output and may land in an attribute, a style
+// declaration or a generator that concatenates strings (Qr), so only literals
+// that cannot terminate either are let through: hex, rgb/rgba/hsl/hsla
+// functional forms and bare keywords. Anything else falls back.
+// `safeThemeColor` also admits a Ripple token reference, `var(--ripple-name)`,
+// for widgets that paint through CSS (Gauge); Qr keeps the strict set because
+// its generator cannot resolve a custom property.
+export const COLOR_RE = /^(#[0-9a-f]{3,8}|[a-z]+|(rgb|rgba|hsl|hsla)\([0-9a-z%.,\s/]+\))$/i;
+const TOKEN_RE = /^var\(--ripple-[a-z0-9-]+\)$/i;
+export const safeColor = (raw, fallback) => raw && COLOR_RE.test(raw.trim()) ? raw.trim() : fallback;
+/** A colour literal or a `var(--ripple-*)` token, else undefined. Never throws. */
+export function safeThemeColor(raw) {
+    if (typeof raw !== 'string')
+        return undefined;
+    const c = raw.trim();
+    return c && (COLOR_RE.test(c) || TOKEN_RE.test(c)) ? c : undefined;
+}

package/dist/utils/safe-props.d.ts

@@ -0,0 +1,97 @@
+/**
+ * @file safe-props.ts
+ * @changes 2026-09-17: shortSample's circular-object fallback is a literal
+ *   '[unserializable]' and option labels coerce via asText (objects → JSON,
+ *   not "[object Object]") — oxlint no-base-to-string sweep.
+ * @description Defensive guards for widget props consumed as arrays/objects.
+ *
+ * Ripple specs are LLM-generated. The expression resolver silently returns
+ * `undefined` (or a literal string) when it can't parse a fragment — so a
+ * `prop.map(...)` call on the receiving widget will throw and crash the
+ * entire panel. These helpers absorb that failure mode: if the prop isn't
+ * the expected shape we return a safe empty value and warn once.
+ *
+ * Pattern in widgets:
+ *   const safeOptions = $derived(safeArray(options, { widget: 'select', key: 'options' }));
+ *   const safeData    = $derived(safeObject(data,    { widget: 'kvtable', key: 'data' }));
+ *
+ * The `widget` / `key` context is what makes the warnings useful — without
+ * them you only see a stack trace deep inside Svelte runtime.
+ */
+interface Ctx {
+    widget?: string;
+    key?: string;
+}
+/**
+ * Detail payload of the `ripple:bad-prop` CustomEvent fired on
+ * `document` whenever a defensive guard hits a non-conforming prop.
+ *
+ * Host applications can listen for these to pipe spec-quality
+ * problems into Sentry / Datadog / a dashboard:
+ *
+ *     document.addEventListener('ripple:bad-prop', (e) => {
+ *       const d = (e as CustomEvent<RippleBadPropDetail>).detail;
+ *       sendTelemetry('ripple.bad_prop', d);
+ *     });
+ *
+ * The same dedupe rules that throttle console warnings also throttle
+ * events, so listeners get one signal per unique offending value.
+ */
+export interface RippleBadPropDetail {
+    widget?: string;
+    key?: string;
+    expected: 'array' | 'object' | 'function';
+    receivedType: string;
+    /** Best-effort sample of the bad value for inspection; primitives
+     *  pass through, objects are stringified with a short cap. */
+    sample: unknown;
+}
+/** Coerce to array. Returns [] for non-arrays and warns once with context. */
+export declare function safeArray<T = unknown>(v: unknown, ctx?: Ctx): T[];
+/** Coerce to plain object. Returns {} for non-objects and warns once. */
+export declare function safeObject<T extends Record<string, unknown> = Record<string, unknown>>(v: unknown, ctx?: Ctx): T;
+/** Coerce to function. Returns a no-op for non-functions and warns once. */
+export declare function safeFn<F extends (...args: never[]) => unknown>(v: unknown, ctx?: Ctx): F;
+/**
+ * Coerce a single choice-widget option into the canonical
+ * `{value, label}` shape. Accepts:
+ *
+ *   - a primitive (string / number) — used as both value and label,
+ *   - an object with `value` and `label` (passed through),
+ *   - an object with one of the common alias keys: value ← `id`/`key`,
+ *     label ← `name`/`title`/`text`.
+ *
+ * This is what lets a `workspace.members` `$source` (which returns
+ * `{id, name, email, ...}`) bind directly to a `<select>` / `<radio-group>`
+ * / `<segmented>` / `<combobox>` / `<multi-select>` without a manual
+ * mapping step the resolver couldn't express anyway.
+ *
+ * Pass-through extra fields are preserved so widgets that look at e.g.
+ * `description` or `disabled` keep working.
+ */
+export interface CanonicalOption {
+    value: string | number;
+    label: string;
+    [k: string]: unknown;
+}
+export declare function toCanonicalOption(raw: unknown): CanonicalOption | null;
+/**
+ * Map an unknown options array into canonical `{value, label}` shape,
+ * dropping any item that can't be coerced, and any later option whose value
+ * repeats an earlier one (compared as strings, so 1 and '1' collapse too).
+ * Choice widgets key their {#each} by value, and a repeated value from the
+ * model would throw `each_key_duplicate`; two options with one value were one
+ * choice anyway. Use in choice widgets:
+ *
+ *     const normalized = $derived(canonicalOptions(options, { widget: 'select', key: 'options' }));
+ */
+export declare function canonicalOptions(v: unknown, ctx?: Ctx): CanonicalOption[];
+/**
+ * One each-key per item, unique even when the model repeats an id: the first
+ * `a` keys as `a`, later ones as `a#1`, `a#2` (skipping any key already taken).
+ * Use as `{#each items as item, i (keys[i])}` with `keys` derived alongside
+ * the list, so a repeated id renders both items instead of throwing
+ * `each_key_duplicate`. Unlike canonicalOptions, nothing is dropped.
+ */
+export declare function uniqueKeys<T>(items: readonly T[], getId: (item: T, i: number) => unknown): string[];
+export {};