@chances-ai/design-system 21.0.0 → 24.1.0

package/dist/primitives/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/primitives/text.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,EAAE,EAAqB,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,CAAC;IACrB,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,gBAAgB;YACtB,IAAI,EAAE,gBAAgB;YACtB,MAAM,EAAE,kBAAkB;YAC1B,MAAM,EAAE,kBAAkB;YAC1B,MAAM,EAAE,aAAa;YACrB,OAAO,EAAE,cAAc;YACvB,KAAK,EAAE,YAAY;YACnB,OAAO,EAAE,cAAc;YACvB,UAAU,EAAE,iBAAiB;YAC7B,OAAO,EAAE,EAAE;SACZ;QACD,IAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;QACrF,MAAM,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,WAAW,EAAE;QACtG,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;QACtC,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;KAC1C;IACD,eAAe,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE;CAChE,CAAC,CAAC;AAcH,MAAM,UAAU,IAAI,CAAC,EAAE,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAa;IAC/G,MAAM,IAAI,GAAG,EAAE,CAAC;IAChB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,CAAC,KAAM,IAAI,YACnF,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/theme-vars.d.ts

@@ -0,0 +1,25 @@
+/**
+ * (7.3 / task 03 — W1) The runtime half of the `@theme` bridge `[11.4]`/`[11.5]`.
+ * `tokens.css` statically binds each Tailwind color utility to a `--ch-*` var
+ * (`--color-accent: var(--ch-accent)`); THIS module sets the per-theme VALUES of
+ * those `--ch-*` vars at runtime, so switching theme = swapping one set of custom
+ * properties (the subtree recomputes). Engine-backed (ui-core `resolveThemeTokens`
+ * + `toCssVars`). Browser-safe; the DOM helper is optional (pure `themeVars` for
+ * SSR / inline-style spread).
+ */
+import { type ThemeMode } from "@chances-ai/ui-core";
+/** The full `--ch-*` value set for a theme + mode (spread onto a panel root's
+ *  inline `style`, or fed to {@link applyThemeVars}). */
+export declare function themeVars(themeId: string, mode: ThemeMode): Record<`--${string}`, string>;
+/** Minimal element shape {@link applyThemeVars} writes to — a real `HTMLElement`
+ *  satisfies it; keeps this testable without a DOM and `@types/dom`-free at call
+ *  sites that pass a stub. */
+export interface StyleTarget {
+    style: {
+        setProperty(name: string, value: string): void;
+    };
+}
+/** Imperatively write a theme's `--ch-*` vars onto an element (e.g. the panel
+ *  root / `document.documentElement`). Returns the var set that was applied. */
+export declare function applyThemeVars(el: StyleTarget, themeId: string, mode: ThemeMode): Record<`--${string}`, string>;
+//# sourceMappingURL=theme-vars.d.ts.map

package/dist/theme-vars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-vars.d.ts","sourceRoot":"","sources":["../src/theme-vars.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEpF;yDACyD;AACzD,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAEzF;AAED;;8BAE8B;AAC9B,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE;QAAE,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CAC3D;AAED;gFACgF;AAChF,wBAAgB,cAAc,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAI/G"}

package/dist/theme-vars.js

@@ -0,0 +1,24 @@
+/**
+ * (7.3 / task 03 — W1) The runtime half of the `@theme` bridge `[11.4]`/`[11.5]`.
+ * `tokens.css` statically binds each Tailwind color utility to a `--ch-*` var
+ * (`--color-accent: var(--ch-accent)`); THIS module sets the per-theme VALUES of
+ * those `--ch-*` vars at runtime, so switching theme = swapping one set of custom
+ * properties (the subtree recomputes). Engine-backed (ui-core `resolveThemeTokens`
+ * + `toCssVars`). Browser-safe; the DOM helper is optional (pure `themeVars` for
+ * SSR / inline-style spread).
+ */
+import { resolveThemeTokens, toCssVars } from "@chances-ai/ui-core";
+/** The full `--ch-*` value set for a theme + mode (spread onto a panel root's
+ *  inline `style`, or fed to {@link applyThemeVars}). */
+export function themeVars(themeId, mode) {
+    return toCssVars(resolveThemeTokens(themeId, mode));
+}
+/** Imperatively write a theme's `--ch-*` vars onto an element (e.g. the panel
+ *  root / `document.documentElement`). Returns the var set that was applied. */
+export function applyThemeVars(el, themeId, mode) {
+    const vars = themeVars(themeId, mode);
+    for (const [name, value] of Object.entries(vars))
+        el.style.setProperty(name, value);
+    return vars;
+}
+//# sourceMappingURL=theme-vars.js.map

package/dist/theme-vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-vars.js","sourceRoot":"","sources":["../src/theme-vars.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAkB,MAAM,qBAAqB,CAAC;AAEpF;yDACyD;AACzD,MAAM,UAAU,SAAS,CAAC,OAAe,EAAE,IAAe;IACxD,OAAO,SAAS,CAAC,kBAAkB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AACtD,CAAC;AASD;gFACgF;AAChF,MAAM,UAAU,cAAc,CAAC,EAAe,EAAE,OAAe,EAAE,IAAe;IAC9E,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACtC,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;QAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACpF,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/widgets/filter-autocomplete.d.ts

@@ -0,0 +1,21 @@
+export interface FilterAutocompleteProps<T extends object> {
+    /** The full option set; filtering happens client-side over `getLabel`. */
+    items: readonly T[];
+    /** The currently selected option's key, or null when nothing is chosen. */
+    selectedKey: string | null;
+    getKey: (item: T) => string;
+    getLabel: (item: T) => string;
+    onSelect: (item: T) => void;
+    isDisabled?: boolean;
+    /** Trigger text shown when nothing is selected. */
+    placeholder?: string;
+    /** Placeholder inside the filter search box. */
+    searchPlaceholder?: string;
+    /** Shown when the filter matches nothing. */
+    emptyLabel?: string;
+    /** Required for a11y (the picker has no visible label). */
+    "aria-label": string;
+    className?: string;
+}
+export declare function FilterAutocomplete<T extends object>({ items, selectedKey, getKey, getLabel, onSelect, isDisabled, placeholder, searchPlaceholder, emptyLabel, "aria-label": ariaLabel, className, }: FilterAutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=filter-autocomplete.d.ts.map

package/dist/widgets/filter-autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-autocomplete.d.ts","sourceRoot":"","sources":["../../src/widgets/filter-autocomplete.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM;IACvD,0EAA0E;IAC1E,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,2EAA2E;IAC3E,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAuB,EACvB,iBAA6B,EAC7B,UAAuB,EACvB,YAAY,EAAE,SAAS,EACvB,SAAS,GACV,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CAuC5B"}

package/dist/widgets/filter-autocomplete.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * (7.3 / task 03 — W3a) `FilterAutocomplete` — the composed, generic substrate
+ * that retires the bespoke web `model-picker.tsx` `[11.2]` (design §3.3). It
+ * folds HeroUI v3's `Autocomplete` compound boilerplate (Trigger → Value →
+ * Popover → Filter → SearchField + ListBox) into a single typed component: the
+ * caller passes `items`, the selected key, and `getKey`/`getLabel`/`onSelect`.
+ *
+ * Client-side filtering uses a plain `contains` predicate (RAC's `filter` prop
+ * is just `(textValue, inputValue) => boolean`), so no `useFilter` dependency.
+ * The W4 client migration builds its `ModelPicker` on this; the pure
+ * `filterModels` test stays, and real keyboard/filter interaction is covered by
+ * the Storybook browser-mode pass (design §4). Theme comes from the panel's
+ * `.chances-theme` scope (see heroui-theme.ts). Requires the optional
+ * `@heroui/react` peer — only this `./widgets` entry pulls it in.
+ */
+import { Autocomplete, EmptyState, ListBox, ListBoxItem, SearchField } from "@heroui/react";
+import { cn } from "../cn.js";
+const contains = (textValue, inputValue) => textValue.toLowerCase().includes(inputValue.trim().toLowerCase());
+export function FilterAutocomplete({ items, selectedKey, getKey, getLabel, onSelect, isDisabled, placeholder = "select…", searchPlaceholder = "filter…", emptyLabel = "no match", "aria-label": ariaLabel, className, }) {
+    const selected = selectedKey == null ? null : (items.find((it) => getKey(it) === selectedKey) ?? null);
+    return (_jsxs(Autocomplete, { "aria-label": ariaLabel, selectedKey: selectedKey, isDisabled: isDisabled, onSelectionChange: (key) => {
+            if (key == null)
+                return;
+            const item = items.find((it) => getKey(it) === String(key));
+            if (item)
+                onSelect(item);
+        }, className: cn("inline-flex", className), children: [_jsxs(Autocomplete.Trigger, { children: [_jsx(Autocomplete.Value, { children: selected ? getLabel(selected) : placeholder }), _jsx(Autocomplete.Indicator, {})] }), _jsx(Autocomplete.Popover, { children: _jsxs(Autocomplete.Filter, { filter: contains, children: [_jsx(SearchField, { autoFocus: true, "aria-label": `filter ${ariaLabel}`, children: _jsxs(SearchField.Group, { children: [_jsx(SearchField.SearchIcon, {}), _jsx(SearchField.Input, { placeholder: searchPlaceholder }), _jsx(SearchField.ClearButton, {})] }) }), _jsx(ListBox, { "aria-label": ariaLabel, items: items, renderEmptyState: () => _jsx(EmptyState, { children: emptyLabel }), children: (item) => (_jsx(ListBoxItem, { id: getKey(item), textValue: getLabel(item), children: getLabel(item) })) })] }) })] }));
+}
+//# sourceMappingURL=filter-autocomplete.js.map

package/dist/widgets/filter-autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-autocomplete.js","sourceRoot":"","sources":["../../src/widgets/filter-autocomplete.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAsB9B,MAAM,QAAQ,GAAG,CAAC,SAAiB,EAAE,UAAkB,EAAW,EAAE,CAClE,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;AAEpE,MAAM,UAAU,kBAAkB,CAAmB,EACnD,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAW,GAAG,SAAS,EACvB,iBAAiB,GAAG,SAAS,EAC7B,UAAU,GAAG,UAAU,EACvB,YAAY,EAAE,SAAS,EACvB,SAAS,GACkB;IAC3B,MAAM,QAAQ,GAAG,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC;IAEvG,OAAO,CACL,MAAC,YAAY,kBACC,SAAS,EACrB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,CAAC,GAAG,EAAE,EAAE;YACzB,IAAI,GAAG,IAAI,IAAI;gBAAE,OAAO;YACxB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;YAC5D,IAAI,IAAI;gBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,aAEvC,MAAC,YAAY,CAAC,OAAO,eACnB,KAAC,YAAY,CAAC,KAAK,cAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,GAAsB,EACtF,KAAC,YAAY,CAAC,SAAS,KAAG,IACL,EACvB,KAAC,YAAY,CAAC,OAAO,cACnB,MAAC,YAAY,CAAC,MAAM,IAAC,MAAM,EAAE,QAAQ,aACnC,KAAC,WAAW,IAAC,SAAS,sBAAa,UAAU,SAAS,EAAE,YACtD,MAAC,WAAW,CAAC,KAAK,eAChB,KAAC,WAAW,CAAC,UAAU,KAAG,EAC1B,KAAC,WAAW,CAAC,KAAK,IAAC,WAAW,EAAE,iBAAiB,GAAI,EACrD,KAAC,WAAW,CAAC,WAAW,KAAG,IACT,GACR,EACd,KAAC,OAAO,kBAAa,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,KAAC,UAAU,cAAE,UAAU,GAAc,YACxG,CAAC,IAAO,EAAE,EAAE,CAAC,CACZ,KAAC,WAAW,IAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,IAAI,CAAC,YACrD,QAAQ,CAAC,IAAI,CAAC,GACH,CACf,GACO,IACU,GACD,IACV,CAChB,CAAC;AACJ,CAAC"}

package/dist/widgets/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * (7.3 / task 03 — W3a) `@chances-ai/design-system/widgets` — the HeroUI v3
+ * "rich widget" tier `[11.2]`. This is the ONLY design-system entry that pulls
+ * the optional `@heroui/react` peer, so the main barrel stays HeroUI-free (and
+ * `bun --compile` clean for the CLI, which never imports widgets).
+ *
+ * We re-export the blessed HeroUI compound components through one seam — apps
+ * import them from design-system, not `@heroui/react` directly, so the
+ * integration point (theme wiring via `.chances-theme`, version pinning) is
+ * centralized. Heavy behavior (focus-trap, react-aria keyboard nav, overlay
+ * positioning) is HeroUI's; we add only `FilterAutocomplete` (the composed
+ * model-picker substrate). Self-built chrome (Surface/Text/Button/…) lives in
+ * the main barrel — NOT here — per the two-tier split (design §3.2/§3.3).
+ */
+export { Autocomplete, Select, Modal, Drawer, Popover, Menu, Tabs, Tooltip, ListBox, ListBoxItem, ListBoxSection, SearchField, EmptyState, Label, Separator, Spinner, } from "@heroui/react";
+export { FilterAutocomplete, type FilterAutocompleteProps } from "./filter-autocomplete.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/widgets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/widgets/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EACL,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACV,KAAK,EACL,SAAS,EACT,OAAO,GACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/widgets/index.js

@@ -0,0 +1,17 @@
+/**
+ * (7.3 / task 03 — W3a) `@chances-ai/design-system/widgets` — the HeroUI v3
+ * "rich widget" tier `[11.2]`. This is the ONLY design-system entry that pulls
+ * the optional `@heroui/react` peer, so the main barrel stays HeroUI-free (and
+ * `bun --compile` clean for the CLI, which never imports widgets).
+ *
+ * We re-export the blessed HeroUI compound components through one seam — apps
+ * import them from design-system, not `@heroui/react` directly, so the
+ * integration point (theme wiring via `.chances-theme`, version pinning) is
+ * centralized. Heavy behavior (focus-trap, react-aria keyboard nav, overlay
+ * positioning) is HeroUI's; we add only `FilterAutocomplete` (the composed
+ * model-picker substrate). Self-built chrome (Surface/Text/Button/…) lives in
+ * the main barrel — NOT here — per the two-tier split (design §3.2/§3.3).
+ */
+export { Autocomplete, Select, Modal, Drawer, Popover, Menu, Tabs, Tooltip, ListBox, ListBoxItem, ListBoxSection, SearchField, EmptyState, Label, Separator, Spinner, } from "@heroui/react";
+export { FilterAutocomplete } from "./filter-autocomplete.js";
+//# sourceMappingURL=index.js.map

package/dist/widgets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/widgets/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EACL,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACV,KAAK,EACL,SAAS,EACT,OAAO,GACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,kBAAkB,EAAgC,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chances-ai/design-system",
-  "version": "21.0.0",
+  "version": "24.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -8,21 +8,74 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./widgets": {
+      "types": "./dist/widgets/index.d.ts",
+      "import": "./dist/widgets/index.js"
+    },
+    "./styles": "./src/tokens.css",
+    "./heroui-theme.css": "./src/heroui-theme.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/tokens.css",
+    "src/heroui-theme.css"
   ],
   "dependencies": {
-    "@chances-ai/ui-core": "21.0.0",
-    "@tamagui/core": "^2.1.0"
+    "@chances-ai/ui-core": "24.1.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "1.17.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2"
   },
   "peerDependencies": {
-    "react": "^19.2"
+    "@heroui/react": "^3.1.0",
+    "react": "^19.2",
+    "react-dom": "^19.2",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@heroui/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@heroui/react": "^3.1.0",
+    "@storybook/addon-a11y": "10.4.1",
+    "@storybook/addon-vitest": "10.4.1",
+    "@storybook/react-vite": "10.4.1",
+    "@tailwindcss/vite": "^4.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "3.2.6",
+    "@vitest/expect": "3.2.6",
+    "@vitest/runner": "3.2.6",
+    "@vitest/snapshot": "3.2.6",
+    "@vitest/spy": "3.2.6",
+    "@vitest/utils": "3.2.6",
+    "playwright": "^1.60.0",
+    "react": "^19.2",
+    "react-dom": "^19.2",
+    "storybook": "10.4.1",
+    "tailwindcss": "^4.0.0",
+    "vite": "^6.0.0",
+    "vitest": "3.2.6"
   },
   "scripts": {
     "build": "tsc -b",
     "check": "tsc -b",
-    "test": "bun test"
+    "test": "bun test --timeout 30000",
+    "test:stories": "vitest run",
+    "storybook": "storybook dev -p 6006 --no-open --disable-telemetry",
+    "build:storybook": "storybook build --disable-telemetry",
+    "gen:theme": "bun ../../scripts/gen-theme-css.ts"
   }
 }

package/src/heroui-theme.css

@@ -0,0 +1,40 @@
+/* (7.3 / task 03 — W3a) HeroUI v3 theme bridge — generated-shape, kept in sync
+   with `heroui-theme.ts` `HEROUI_BASE_VAR_MAP` (the test enforces parity).
+
+   UNLAYERED ON PURPOSE: HeroUI declares its variables inside `@layer base`, and
+   in the CSS cascade an unlayered rule beats any layered rule regardless of
+   source order — so these overrides win without `!important`. We override only
+   HeroUI's BASE variables; its "calculated" vars (--surface-hover, --*-soft,
+   --border-secondary, …) recompute automatically via `color-mix()` from these.
+
+   Usage: put `chances-theme` + a mode class (`dark`/`light`) on the panel root,
+   and set the `--ch-*` values on that same element (design-system `themeVars` /
+   `applyThemeVars`). Then every HeroUI widget rendered inside the panel adopts
+   the seed palette. See `heroUiThemeClassName(mode)`. */
+.chances-theme {
+  --background: var(--ch-bg-base);
+  --foreground: var(--ch-text-base);
+  --surface: var(--ch-surface-base);
+  --surface-foreground: var(--ch-text-base);
+  --surface-secondary: var(--ch-surface-raised);
+  --surface-secondary-foreground: var(--ch-text-base);
+  --surface-tertiary: var(--ch-bg-weak);
+  --surface-tertiary-foreground: var(--ch-text-base);
+  --overlay: var(--ch-surface-raised);
+  --overlay-foreground: var(--ch-text-base);
+  --muted: var(--ch-text-weak);
+  --default: var(--ch-bg-weak);
+  --default-foreground: var(--ch-text-base);
+  --success: var(--ch-success);
+  --success-foreground: var(--ch-text-on-success);
+  --warning: var(--ch-warning);
+  --warning-foreground: var(--ch-text-on-warning);
+  --danger: var(--ch-error);
+  --danger-foreground: var(--ch-text-on-error);
+  --border: var(--ch-border-base);
+  --separator: var(--ch-border-weak);
+  --field-background: var(--ch-input-base);
+  --field-foreground: var(--ch-text-base);
+  --segment: var(--ch-surface-raised);
+  --segment-foreground: var(--ch-text-base);
+}

package/src/tokens.css

@@ -0,0 +1,143 @@
+/* GENERATED by scripts/gen-theme-css.ts — DO NOT EDIT. Run `bun scripts/gen-theme-css.ts`. */
+/* The seed OKLCH engine (ui-core) is the single source: the @theme block binds
+   each Tailwind color utility to a runtime --ch-* var; applyThemeVars (theme-vars.ts)
+   sets those vars per selected theme + mode. The :root block is the default-dark
+   fallback so the kit renders before a theme is applied. */
+
+@theme {
+  --color-accent: var(--ch-accent);
+  --color-success: var(--ch-success);
+  --color-error: var(--ch-error);
+  --color-warning: var(--ch-warning);
+  --color-permission: var(--ch-permission);
+  --color-plan-mode: var(--ch-plan-mode);
+  --color-auto-accept: var(--ch-auto-accept);
+  --color-bash-pink: var(--ch-bash-pink);
+  --color-diff-added-bg: var(--ch-diff-added-bg);
+  --color-diff-removed-bg: var(--ch-diff-removed-bg);
+  --color-diff-added-word-bg: var(--ch-diff-added-word-bg);
+  --color-diff-removed-word-bg: var(--ch-diff-removed-word-bg);
+  --color-user-message-bg: var(--ch-user-message-bg);
+  --color-stall: var(--ch-stall);
+  --color-syn-keyword: var(--ch-syn-keyword);
+  --color-syn-string: var(--ch-syn-string);
+  --color-syn-comment: var(--ch-syn-comment);
+  --color-syn-number: var(--ch-syn-number);
+  --color-syn-function: var(--ch-syn-function);
+  --color-syn-type: var(--ch-syn-type);
+  --color-syn-literal: var(--ch-syn-literal);
+  --color-syn-title: var(--ch-syn-title);
+  --color-syn-attr: var(--ch-syn-attr);
+  --color-bg-base: var(--ch-bg-base);
+  --color-bg-weak: var(--ch-bg-weak);
+  --color-bg-strong: var(--ch-bg-strong);
+  --color-surface-base: var(--ch-surface-base);
+  --color-surface-raised: var(--ch-surface-raised);
+  --color-surface-inset: var(--ch-surface-inset);
+  --color-surface-hover: var(--ch-surface-hover);
+  --color-surface-active: var(--ch-surface-active);
+  --color-text-base: var(--ch-text-base);
+  --color-text-weak: var(--ch-text-weak);
+  --color-text-weaker: var(--ch-text-weaker);
+  --color-text-strong: var(--ch-text-strong);
+  --color-border-base: var(--ch-border-base);
+  --color-border-weak: var(--ch-border-weak);
+  --color-border-strong: var(--ch-border-strong);
+  --color-border-focus: var(--ch-border-focus);
+  --color-border-selected: var(--ch-border-selected);
+  --color-input-base: var(--ch-input-base);
+  --color-input-hover: var(--ch-input-hover);
+  --color-input-focus: var(--ch-input-focus);
+  --color-input-disabled: var(--ch-input-disabled);
+  --color-icon-base: var(--ch-icon-base);
+  --color-icon-weak: var(--ch-icon-weak);
+  --color-icon-strong: var(--ch-icon-strong);
+  --color-icon-disabled: var(--ch-icon-disabled);
+  --color-button-primary: var(--ch-button-primary);
+  --color-button-secondary: var(--ch-button-secondary);
+  --color-button-ghost-hover: var(--ch-button-ghost-hover);
+  --color-diff-add-surface: var(--ch-diff-add-surface);
+  --color-diff-delete-surface: var(--ch-diff-delete-surface);
+  --color-diff-change-bar-add: var(--ch-diff-change-bar-add);
+  --color-diff-change-bar-delete: var(--ch-diff-change-bar-delete);
+  --color-diff-change-bar-modified: var(--ch-diff-change-bar-modified);
+  --color-md-heading: var(--ch-md-heading);
+  --color-md-link: var(--ch-md-link);
+  --color-md-code: var(--ch-md-code);
+  --color-md-quote: var(--ch-md-quote);
+  --color-md-strong: var(--ch-md-strong);
+  --color-md-emph: var(--ch-md-emph);
+  --color-text-on-accent: var(--ch-text-on-accent);
+  --color-text-on-success: var(--ch-text-on-success);
+  --color-text-on-error: var(--ch-text-on-error);
+  --color-text-on-warning: var(--ch-text-on-warning);
+}
+
+:root {
+  --ch-accent: rgb(215,119,87);
+  --ch-success: rgb(78,186,101);
+  --ch-error: rgb(255,107,128);
+  --ch-warning: rgb(255,193,7);
+  --ch-permission: rgb(177,185,249);
+  --ch-plan-mode: rgb(72,150,140);
+  --ch-auto-accept: rgb(175,135,255);
+  --ch-bash-pink: rgb(253,93,177);
+  --ch-stall: rgb(171,43,63);
+  --ch-user-message-bg: rgb(55,55,55);
+  --ch-diff-added-bg: rgb(34,92,43);
+  --ch-diff-removed-bg: rgb(122,41,54);
+  --ch-diff-added-word-bg: rgb(56,166,96);
+  --ch-diff-removed-word-bg: rgb(179,89,107);
+  --ch-syn-keyword: rgb(198,120,221);
+  --ch-syn-string: rgb(152,195,121);
+  --ch-syn-comment: rgb(106,115,125);
+  --ch-syn-number: rgb(209,154,102);
+  --ch-syn-function: rgb(97,175,239);
+  --ch-syn-type: rgb(229,192,123);
+  --ch-syn-literal: rgb(86,182,194);
+  --ch-syn-title: rgb(97,175,239);
+  --ch-syn-attr: rgb(209,154,102);
+  --ch-bg-base: rgb(0,0,0);
+  --ch-bg-weak: rgb(12,12,12);
+  --ch-bg-strong: rgb(12,12,12);
+  --ch-surface-base: rgb(12,12,12);
+  --ch-surface-raised: rgb(17,17,17);
+  --ch-surface-inset: rgb(9,9,9);
+  --ch-surface-hover: rgb(17,17,17);
+  --ch-surface-active: rgb(22,22,22);
+  --ch-text-base: rgb(255,255,255);
+  --ch-text-weak: rgb(98,98,98);
+  --ch-text-weaker: rgb(73,73,73);
+  --ch-text-strong: rgb(240,240,240);
+  --ch-border-base: rgb(85,85,85);
+  --ch-border-weak: rgb(22,22,22);
+  --ch-border-strong: rgb(52,52,52);
+  --ch-border-focus: rgb(85,111,246);
+  --ch-border-selected: rgb(85,111,246);
+  --ch-input-base: rgb(12,12,12);
+  --ch-input-hover: rgb(17,17,17);
+  --ch-input-focus: rgb(36,46,157);
+  --ch-input-disabled: rgb(22,22,22);
+  --ch-icon-base: rgb(127,127,127);
+  --ch-icon-weak: rgb(52,52,52);
+  --ch-icon-strong: rgb(240,240,240);
+  --ch-icon-disabled: rgb(39,39,39);
+  --ch-button-primary: rgb(240,240,240);
+  --ch-button-secondary: rgb(17,17,17);
+  --ch-button-ghost-hover: rgb(17,17,17);
+  --ch-diff-add-surface: rgb(0,20,5);
+  --ch-diff-delete-surface: rgb(36,0,9);
+  --ch-diff-change-bar-add: rgb(22,108,57);
+  --ch-diff-change-bar-delete: rgb(163,22,70);
+  --ch-diff-change-bar-modified: rgb(113,86,17);
+  --ch-md-heading: rgb(254,212,199);
+  --ch-md-link: rgb(211,222,254);
+  --ch-md-code: rgb(131,254,154);
+  --ch-md-quote: rgb(254,221,154);
+  --ch-md-strong: rgb(254,212,199);
+  --ch-md-emph: rgb(254,221,154);
+  --ch-text-on-accent: rgb(0,0,0);
+  --ch-text-on-success: rgb(0,0,0);
+  --ch-text-on-error: rgb(0,0,0);
+  --ch-text-on-warning: rgb(0,0,0);
+}

package/dist/tamagui.config.d.ts

@@ -1,117 +0,0 @@
-export declare const config: import("@tamagui/core").TamaguiInternalConfig<{
-    color: {
-        white: import("@tamagui/core").Variable<string>;
-        black: import("@tamagui/core").Variable<string>;
-        accent: import("@tamagui/core").Variable<string>;
-        success: import("@tamagui/core").Variable<string>;
-        error: import("@tamagui/core").Variable<string>;
-        warning: import("@tamagui/core").Variable<string>;
-        permission: import("@tamagui/core").Variable<string>;
-        planMode: import("@tamagui/core").Variable<string>;
-        autoAccept: import("@tamagui/core").Variable<string>;
-        bashPink: import("@tamagui/core").Variable<string>;
-    };
-    space: {
-        0: import("@tamagui/core").Variable<number>;
-        1: import("@tamagui/core").Variable<number>;
-        2: import("@tamagui/core").Variable<number>;
-        3: import("@tamagui/core").Variable<number>;
-        4: import("@tamagui/core").Variable<number>;
-        5: import("@tamagui/core").Variable<number>;
-        6: import("@tamagui/core").Variable<number>;
-        true: import("@tamagui/core").Variable<number>;
-    };
-    size: {
-        0: import("@tamagui/core").Variable<number>;
-        1: import("@tamagui/core").Variable<number>;
-        2: import("@tamagui/core").Variable<number>;
-        3: import("@tamagui/core").Variable<number>;
-        4: import("@tamagui/core").Variable<number>;
-        true: import("@tamagui/core").Variable<number>;
-    };
-    radius: {
-        0: import("@tamagui/core").Variable<number>;
-        1: import("@tamagui/core").Variable<number>;
-        2: import("@tamagui/core").Variable<number>;
-        3: import("@tamagui/core").Variable<number>;
-        true: import("@tamagui/core").Variable<number>;
-    };
-    zIndex: {
-        0: import("@tamagui/core").Variable<number>;
-        1: import("@tamagui/core").Variable<number>;
-        2: import("@tamagui/core").Variable<number>;
-        true: import("@tamagui/core").Variable<number>;
-    };
-} & Omit<{
-    space: {
-        0: import("@tamagui/core").Variable<number>;
-        1: import("@tamagui/core").Variable<number>;
-        2: import("@tamagui/core").Variable<number>;
-        3: import("@tamagui/core").Variable<number>;
-        4: import("@tamagui/core").Variable<number>;
-        5: import("@tamagui/core").Variable<number>;
-        6: import("@tamagui/core").Variable<number>;
-        true: import("@tamagui/core").Variable<number>;
-    };
-    size: {
-        0: import("@tamagui/core").Variable<number>;
-        1: import("@tamagui/core").Variable<number>;
-        2: import("@tamagui/core").Variable<number>;
-        3: import("@tamagui/core").Variable<number>;
-        4: import("@tamagui/core").Variable<number>;
-        true: import("@tamagui/core").Variable<number>;
-    };
-    radius: {
-        0: import("@tamagui/core").Variable<number>;
-        1: import("@tamagui/core").Variable<number>;
-        2: import("@tamagui/core").Variable<number>;
-        3: import("@tamagui/core").Variable<number>;
-        true: import("@tamagui/core").Variable<number>;
-    };
-    zIndex: {
-        0: import("@tamagui/core").Variable<number>;
-        1: import("@tamagui/core").Variable<number>;
-        2: import("@tamagui/core").Variable<number>;
-        true: import("@tamagui/core").Variable<number>;
-    };
-    color: {
-        white: import("@tamagui/core").Variable<string>;
-        black: import("@tamagui/core").Variable<string>;
-        accent: import("@tamagui/core").Variable<string>;
-        success: import("@tamagui/core").Variable<string>;
-        error: import("@tamagui/core").Variable<string>;
-        warning: import("@tamagui/core").Variable<string>;
-        permission: import("@tamagui/core").Variable<string>;
-        planMode: import("@tamagui/core").Variable<string>;
-        autoAccept: import("@tamagui/core").Variable<string>;
-        bashPink: import("@tamagui/core").Variable<string>;
-    };
-}, "color" | "space" | "size" | "radius" | "zIndex">, {
-    dark: Record<string, string>;
-    light: Record<string, string>;
-}, {
-    readonly p: "padding";
-    readonly px: "paddingHorizontal";
-    readonly py: "paddingVertical";
-    readonly m: "margin";
-    readonly f: "flex";
-    readonly w: "width";
-    readonly h: "height";
-    readonly bg: "backgroundColor";
-}, {
-    sm: {
-        maxWidth: number;
-    };
-    gtSm: {
-        minWidth: number;
-    };
-}, {}, {}, {
-    disableSSR: true;
-}, "default">;
-export type AppConfig = typeof config;
-declare module "@tamagui/core" {
-    interface TamaguiCustomConfig extends AppConfig {
-    }
-}
-export default config;
-//# sourceMappingURL=tamagui.config.d.ts.map

package/dist/tamagui.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tamagui.config.d.ts","sourceRoot":"","sources":["../src/tamagui.config.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAqBjB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,OAAO,MAAM,CAAC;AAItC,OAAO,QAAQ,eAAe,CAAC;IAC7B,UAAU,mBAAoB,SAAQ,SAAS;KAAG;CACnD;AAED,eAAe,MAAM,CAAC"}

package/dist/tamagui.config.js

@@ -1,35 +0,0 @@
-/**
- * (v17 M0 / docs/6.1 §4, res #1) The Tamagui design-system config — the SOLE
- * cross-platform design system (Tamagui spans React-DOM + React-Native). M0
- * ships the skeleton: `createTamagui` over ui-core-derived tokens + themes,
- * proving the compile chain works on Bun + `tsc -b` + React 19 BEFORE any
- * component layer consumes it (that lands with web-ui in M1). No components,
- * no compiler plugin (that is a build-time optimization for apps/web).
- */
-import { createTamagui } from "@tamagui/core";
-import { tokens } from "./tokens.js";
-import { themes } from "./themes.js";
-export const config = createTamagui({
-    tokens,
-    themes,
-    shorthands: {
-        p: "padding",
-        px: "paddingHorizontal",
-        py: "paddingVertical",
-        m: "margin",
-        f: "flex",
-        w: "width",
-        h: "height",
-        bg: "backgroundColor",
-    },
-    media: {
-        sm: { maxWidth: 860 },
-        gtSm: { minWidth: 861 },
-    },
-    settings: {
-        // M0 has no SSR pipeline yet; the web app wires this in M1.
-        disableSSR: true,
-    },
-});
-export default config;
-//# sourceMappingURL=tamagui.config.js.map

package/dist/tamagui.config.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tamagui.config.js","sourceRoot":"","sources":["../src/tamagui.config.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAC;IAClC,MAAM;IACN,MAAM;IACN,UAAU,EAAE;QACV,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,mBAAmB;QACvB,EAAE,EAAE,iBAAiB;QACrB,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,MAAM;QACT,CAAC,EAAE,OAAO;QACV,CAAC,EAAE,QAAQ;QACX,EAAE,EAAE,iBAAiB;KACb;IACV,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QACrB,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;KACxB;IACD,QAAQ,EAAE;QACR,4DAA4D;QAC5D,UAAU,EAAE,IAAI;KACjB;CACF,CAAC,CAAC;AAUH,eAAe,MAAM,CAAC"}

package/dist/themes.d.ts

@@ -1,5 +0,0 @@
-export declare const themes: {
-    dark: Record<string, string>;
-    light: Record<string, string>;
-};
-//# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAuCA,eAAO,MAAM,MAAM;;;CAGlB,CAAC"}