@chances-ai/design-system 21.0.0 → 24.2.0

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC/F,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAGzD,OAAO,EAAE,IAAI,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGzH,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG3F,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAMtG,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -1,10 +1,41 @@
 /**
- * `@chances-ai/design-system` — the SOLE cross-platform design system (Tamagui,
- * res #1), consumed by `web-ui` (web/Electron) and the future mobile app. Its
- * tokens + themes are derived from `@chances-ai/ui-core` so all surfaces — TUI,
- * web, desktop, mobile — share one palette. v17 M0 ships config + tokens only.
+ * `@chances-ai/design-system` — the browser-safe UI kit (task 03 / docs/7.3).
+ * Self-built chrome (tailwind-variants) + HeroUI v3 widget wrappers + the seed
+ * OKLCH `@theme` bridge, consumed by apps/web + apps/desktop (one UI tree, four
+ * surfaces). Depends on `@chances-ai/ui-core` (the token engine) + HeroUI; NO
+ * `node:*` (cruiser browser-safe rule). `./styles` exports the generated
+ * `tokens.css` (the @theme bindings).
+ *
+ * W1 lands the foundation (cn + @theme bridge + theme-vars); chrome components
+ * (W2), HeroUI widgets (W3a) and the diff/Monaco deriver (W3b) build on it.
  */
-export { config, default } from "./tamagui.config.js";
-export { tokens } from "./tokens.js";
-export { themes } from "./themes.js";
+export { cn } from "./cn.js";
+export { themeVars, applyThemeVars } from "./theme-vars.js";
+// (W2) Self-built chrome primitives (tailwind-variants) — the inline-style
+// Box/Txt replacements + the chrome kit consumed by the W4 web-ui migration.
+export { Surface, surface } from "./primitives/surface.js";
+export { Stack, Row } from "./primitives/stack.js";
+export { Text, text } from "./primitives/text.js";
+export { Button, button } from "./primitives/button.js";
+export { Card } from "./primitives/card.js";
+export { ScrollArea } from "./primitives/scroll-area.js";
+// Lightweight self-built Tabs (design §3.2); the HeroUI `Tabs` (richer collection
+// behavior) is the separate `./widgets` entry.
+export { Tabs } from "./primitives/tabs.js";
+export { StatusBadge, statusBadge } from "./primitives/status-badge.js";
+// (W2) Icons: typed lucide facade (general tier) + git-status domain glyph.
+export { Icon, ICON_REGISTRY } from "./icon/icon.js";
+export { GitStatusIcon, GIT_STATUS_ICON } from "./icon/sprite.js";
+// (followup) build-time SVG spritesheet [11.7]: mount <SpriteSheet/> once, render
+// domain glyphs by id via <Sprite>. Scaffold glyphs; full file-type set → task 05.
+export { Sprite, SpriteSheet, SPRITE_IDS } from "./icon/sprite.js";
+// (W3a) HeroUI theme wiring — the base-var override map + the panel-root class
+// helper. HeroUI-FREE (just the map + a kebab string), so it lives in the main
+// barrel; the HeroUI widget wrappers themselves are the separate `./widgets`
+// entry. The `.chances-theme` override rules ship as `./heroui-theme.css`.
+export { HEROUI_BASE_VAR_MAP, HEROUI_BASE_VARS_UNMAPPED, heroUiThemeClassName, } from "./heroui-theme.js";
+// (W3b) diff visuals — the 5-block change-bar + the seed→Monaco theme deriver
+// (both browser-safe; the deriver pulls no monaco runtime).
+export { ChangeBar, changeBarBlocks } from "./diff/change-bar.js";
+export { seedThemeToMonaco } from "./diff/monaco-theme.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,MAAM,EAAE,OAAO,EAAkB,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAoB,MAAM,iBAAiB,CAAC;AAE9E,2EAA2E;AAC3E,6EAA6E;AAC7E,OAAO,EAAE,OAAO,EAAE,OAAO,EAA2C,MAAM,yBAAyB,CAAC;AACpG,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAqC,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,MAAM,EAAyC,MAAM,wBAAwB,CAAC;AAC/F,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,kFAAkF;AAClF,+CAA+C;AAC/C,OAAO,EAAE,IAAI,EAAgC,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,WAAW,EAAmD,MAAM,8BAA8B,CAAC;AAEzH,4EAA4E;AAC5E,OAAO,EAAE,IAAI,EAAE,aAAa,EAAiC,MAAM,gBAAgB,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,eAAe,EAA2B,MAAM,kBAAkB,CAAC;AAC3F,kFAAkF;AAClF,mFAAmF;AACnF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAqC,MAAM,kBAAkB,CAAC;AAEtG,+EAA+E;AAC/E,+EAA+E;AAC/E,6EAA6E;AAC7E,2EAA2E;AAC3E,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAE3B,8EAA8E;AAC9E,4DAA4D;AAC5D,OAAO,EAAE,SAAS,EAAE,eAAe,EAA6C,MAAM,sBAAsB,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAA8C,MAAM,wBAAwB,CAAC"}

package/dist/motion/animated.d.ts

@@ -0,0 +1,34 @@
+/**
+ * (7.3 / task 03 — followup) `motion`-powered high-value animations `[11.8]`
+ * (design §3.6). The design's rule is "CSS transitions for 90%, reach for motion
+ * ONLY at high-value moments" — these are exactly those two moments:
+ *   - `AnimatedNumber` — a streaming token-count / context-gauge that springs from
+ *     its old value to the new one (the live-number moment);
+ *   - `SlideIn` — mount/unmount slide+fade for transient surfaces (the panel
+ *     slide-in moment), via `AnimatePresence`.
+ *
+ * `motion` honours `prefers-reduced-motion` automatically. Browser-safe (no
+ * `node:*`); `motion/react` is a normal dep. These live on a separate `./motion`
+ * entry so the chrome barrel stays motion-free for consumers that don't need it.
+ */
+import { type ReactNode } from "react";
+export interface AnimatedNumberProps {
+    value: number;
+    className?: string;
+    /** Locale for the formatted output (default: host locale). */
+    locale?: string;
+}
+/** A number that springs smoothly to `value` as it changes — for live token
+ *  counts / context gauges. Renders the rounded, locale-formatted value. */
+export declare function AnimatedNumber({ value, className, locale }: AnimatedNumberProps): import("react/jsx-runtime").JSX.Element;
+export interface SlideInProps {
+    children: ReactNode;
+    /** When false, the child animates out (and unmounts). */
+    show?: boolean;
+    /** Edge the panel slides from. */
+    from?: "right" | "left" | "bottom" | "top";
+    className?: string;
+}
+/** Slide + fade a transient surface (drawer/sidebar/notification) in and out. */
+export declare function SlideIn({ children, show, from, className }: SlideInProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=animated.d.ts.map

package/dist/motion/animated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated.d.ts","sourceRoot":"","sources":["../../src/motion/animated.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;4EAC4E;AAC5E,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CAO/E;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,iFAAiF;AACjF,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAW,EAAE,IAAc,EAAE,SAAS,EAAE,EAAE,YAAY,2CAiBzF"}

package/dist/motion/animated.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * (7.3 / task 03 — followup) `motion`-powered high-value animations `[11.8]`
+ * (design §3.6). The design's rule is "CSS transitions for 90%, reach for motion
+ * ONLY at high-value moments" — these are exactly those two moments:
+ *   - `AnimatedNumber` — a streaming token-count / context-gauge that springs from
+ *     its old value to the new one (the live-number moment);
+ *   - `SlideIn` — mount/unmount slide+fade for transient surfaces (the panel
+ *     slide-in moment), via `AnimatePresence`.
+ *
+ * `motion` honours `prefers-reduced-motion` automatically. Browser-safe (no
+ * `node:*`); `motion/react` is a normal dep. These live on a separate `./motion`
+ * entry so the chrome barrel stays motion-free for consumers that don't need it.
+ */
+import { useEffect } from "react";
+import { AnimatePresence, motion, useSpring, useTransform } from "motion/react";
+import { cn } from "../cn.js";
+/** A number that springs smoothly to `value` as it changes — for live token
+ *  counts / context gauges. Renders the rounded, locale-formatted value. */
+export function AnimatedNumber({ value, className, locale }) {
+    const spring = useSpring(value, { stiffness: 140, damping: 22, mass: 0.6 });
+    const text = useTransform(spring, (v) => Math.round(v).toLocaleString(locale));
+    useEffect(() => {
+        spring.set(value);
+    }, [value, spring]);
+    return _jsx(motion.span, { className: cn("tabular-nums", className), children: text });
+}
+const OFFSET = {
+    right: { x: 24 },
+    left: { x: -24 },
+    bottom: { y: 24 },
+    top: { y: -24 },
+};
+/** Slide + fade a transient surface (drawer/sidebar/notification) in and out. */
+export function SlideIn({ children, show = true, from = "right", className }) {
+    const offset = OFFSET[from];
+    return (_jsx(AnimatePresence, { children: show && (_jsx(motion.div, { className: className, initial: { opacity: 0, ...offset }, animate: { opacity: 1, x: 0, y: 0 }, exit: { opacity: 0, ...offset }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: children })) }));
+}
+//# sourceMappingURL=animated.js.map

package/dist/motion/animated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated.js","sourceRoot":"","sources":["../../src/motion/animated.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAS9B;4EAC4E;AAC5E,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAuB;IAC9E,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;IAC5E,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IACpB,OAAO,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,YAAG,IAAI,GAAe,CAAC;AACrF,CAAC;AAWD,MAAM,MAAM,GAA0E;IACpF,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;IAChB,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;IAChB,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;IACjB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;CAChB,CAAC;AAEF,iFAAiF;AACjF,MAAM,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,OAAO,EAAE,SAAS,EAAgB;IACxF,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5B,OAAO,CACL,KAAC,eAAe,cACb,IAAI,IAAI,CACP,KAAC,MAAM,CAAC,GAAG,IACT,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,MAAM,EAAE,EAClC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EACnC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,MAAM,EAAE,EAC/B,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,YAE1D,QAAQ,GACE,CACd,GACe,CACnB,CAAC;AACJ,CAAC"}

package/dist/primitives/button.d.ts

@@ -0,0 +1,52 @@
+/**
+ * (7.3 / task 03 — W2) `Button` — self-built chrome `[11.1]` (NOT HeroUI; HeroUI
+ * owns the heavy widgets). tailwind-variants variant/size + optional leading/
+ * trailing icon slots (OpenHands Button shape, tv-ified). Reads seed-engine
+ * color utilities. Browser-safe.
+ */
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { type VariantProps } from "tailwind-variants";
+export declare const button: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+        danger: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50 disabled:cursor-default", {
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+        danger: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+        danger: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50 disabled:cursor-default", unknown, unknown, undefined>>;
+export type ButtonVariants = VariantProps<typeof button>;
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">, ButtonVariants {
+    start?: ReactNode;
+    end?: ReactNode;
+}
+export declare function Button({ variant, size, start, end, className, children, type, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button.d.ts.map

package/dist/primitives/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/primitives/button.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mPAYjB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAEzD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IACzG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAe,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,2CAQ/G"}

package/dist/primitives/button.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { cn } from "../cn.js";
+export const button = tv({
+    base: "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50 disabled:cursor-default",
+    variants: {
+        variant: {
+            primary: "bg-accent text-text-on-accent hover:opacity-90",
+            secondary: "bg-surface-raised text-text-base border border-border-base hover:bg-surface-hover",
+            ghost: "bg-transparent text-text-base hover:bg-surface-hover",
+            danger: "bg-error text-text-on-error hover:opacity-90",
+        },
+        size: { sm: "h-7 px-2 text-xs", md: "h-9 px-3 text-sm", lg: "h-11 px-4 text-base" },
+    },
+    defaultVariants: { variant: "primary", size: "md" },
+});
+export function Button({ variant, size, start, end, className, children, type = "button", ...rest }) {
+    return (_jsxs("button", { type: type, className: cn(button({ variant, size }), className), ...rest, children: [start, children, end] }));
+}
+//# sourceMappingURL=button.js.map

package/dist/primitives/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/primitives/button.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,EAAE,EAAqB,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,CAAC;IACvB,IAAI,EAAE,sMAAsM;IAC5M,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,gDAAgD;YACzD,SAAS,EAAE,mFAAmF;YAC9F,KAAK,EAAE,sDAAsD;YAC7D,MAAM,EAAE,8CAA8C;SACvD;QACD,IAAI,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,EAAE,EAAE,kBAAkB,EAAE,EAAE,EAAE,qBAAqB,EAAE;KACpF;IACD,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE;CACpD,CAAC,CAAC;AASH,MAAM,UAAU,MAAM,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,IAAI,EAAe;IAC9G,OAAO,CACL,kBAAQ,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,KAAM,IAAI,aAC9E,KAAK,EACL,QAAQ,EACR,GAAG,IACG,CACV,CAAC;AACJ,CAAC"}

package/dist/primitives/card.d.ts

@@ -0,0 +1,7 @@
+/**
+ * (7.3 / task 03 — W2) `Card` — a raised, bordered, rounded {@link Surface}
+ * preset for panels/sidebars. Browser-safe.
+ */
+import { type SurfaceProps } from "./surface.js";
+export declare function Card({ level, border, radius, padding, ...rest }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=card.d.ts.map

package/dist/primitives/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/primitives/card.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAE1D,wBAAgB,IAAI,CAAC,EAAE,KAAgB,EAAE,MAAe,EAAE,MAAa,EAAE,OAAc,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,2CAE/G"}

package/dist/primitives/card.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * (7.3 / task 03 — W2) `Card` — a raised, bordered, rounded {@link Surface}
+ * preset for panels/sidebars. Browser-safe.
+ */
+import { Surface } from "./surface.js";
+export function Card({ level = "raised", border = "base", radius = "lg", padding = "md", ...rest }) {
+    return _jsx(Surface, { level: level, border: border, radius: radius, padding: padding, ...rest });
+}
+//# sourceMappingURL=card.js.map

package/dist/primitives/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/primitives/card.tsx"],"names":[],"mappings":";AAAA;;;GAGG;AACH,OAAO,EAAE,OAAO,EAAqB,MAAM,cAAc,CAAC;AAE1D,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,IAAI,EAAgB;IAC9G,OAAO,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAM,IAAI,GAAI,CAAC;AAC/F,CAAC"}

package/dist/primitives/scroll-area.d.ts

@@ -0,0 +1,7 @@
+/**
+ * (7.3 / task 03 — W2) `ScrollArea` — an overflow-scroll {@link Surface} preset
+ * for the transcript / file-tree / sidebar panes. Browser-safe.
+ */
+import { type SurfaceProps } from "./surface.js";
+export declare function ScrollArea({ overflow, grow, className, ...rest }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/primitives/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../src/primitives/scroll-area.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAE1D,wBAAgB,UAAU,CAAC,EAAE,QAAiB,EAAE,IAAW,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,2CAE9F"}

package/dist/primitives/scroll-area.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * (7.3 / task 03 — W2) `ScrollArea` — an overflow-scroll {@link Surface} preset
+ * for the transcript / file-tree / sidebar panes. Browser-safe.
+ */
+import { Surface } from "./surface.js";
+export function ScrollArea({ overflow = "auto", grow = true, className, ...rest }) {
+    return _jsx(Surface, { overflow: overflow, grow: grow, className: className, ...rest });
+}
+//# sourceMappingURL=scroll-area.js.map

package/dist/primitives/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.js","sourceRoot":"","sources":["../../src/primitives/scroll-area.tsx"],"names":[],"mappings":";AAAA;;;GAGG;AACH,OAAO,EAAE,OAAO,EAAqB,MAAM,cAAc,CAAC;AAE1D,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAgB;IAC7F,OAAO,KAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,KAAM,IAAI,GAAI,CAAC;AACrF,CAAC"}

package/dist/primitives/stack.d.ts

@@ -0,0 +1,9 @@
+/**
+ * (7.3 / task 03 — W2) `Stack` / `Row` — thin row/column convenience over
+ * {@link Surface} (the most common layout shape during the W4 migration). `Stack`
+ * is a column, `Row` a row; both forward all Surface variants. Browser-safe.
+ */
+import { type SurfaceProps } from "./surface.js";
+export declare function Stack(props: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function Row(props: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stack.d.ts.map

package/dist/primitives/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/primitives/stack.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAE1D,wBAAgB,KAAK,CAAC,KAAK,EAAE,YAAY,2CAExC;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,YAAY,2CAEtC"}

package/dist/primitives/stack.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * (7.3 / task 03 — W2) `Stack` / `Row` — thin row/column convenience over
+ * {@link Surface} (the most common layout shape during the W4 migration). `Stack`
+ * is a column, `Row` a row; both forward all Surface variants. Browser-safe.
+ */
+import { Surface } from "./surface.js";
+export function Stack(props) {
+    return _jsx(Surface, { direction: "column", ...props });
+}
+export function Row(props) {
+    return _jsx(Surface, { direction: "row", ...props });
+}
+//# sourceMappingURL=stack.js.map

package/dist/primitives/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../src/primitives/stack.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AACH,OAAO,EAAE,OAAO,EAAqB,MAAM,cAAc,CAAC;AAE1D,MAAM,UAAU,KAAK,CAAC,KAAmB;IACvC,OAAO,KAAC,OAAO,IAAC,SAAS,EAAC,QAAQ,KAAK,KAAK,GAAI,CAAC;AACnD,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,KAAmB;IACrC,OAAO,KAAC,OAAO,IAAC,SAAS,EAAC,KAAK,KAAK,KAAK,GAAI,CAAC;AAChD,CAAC"}

package/dist/primitives/status-badge.d.ts

@@ -0,0 +1,42 @@
+/**
+ * (7.3 / task 03 — W2) `StatusBadge` — the plan-mode / auto-accept / yolo / risk
+ * pill, reusing the brand token utilities `[11.1]`. `tone` picks the semantic
+ * color. Browser-safe.
+ */
+import type { ReactNode } from "react";
+import { type VariantProps } from "tailwind-variants";
+export declare const statusBadge: import("tailwind-variants").TVReturnType<{
+    tone: {
+        plan: string;
+        accept: string;
+        success: string;
+        warning: string;
+        error: string;
+        neutral: string;
+    };
+}, undefined, "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium transition-colors", {
+    tone: {
+        plan: string;
+        accept: string;
+        success: string;
+        warning: string;
+        error: string;
+        neutral: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tone: {
+        plan: string;
+        accept: string;
+        success: string;
+        warning: string;
+        error: string;
+        neutral: string;
+    };
+}, undefined, "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium transition-colors", unknown, unknown, undefined>>;
+export type StatusBadgeVariants = VariantProps<typeof statusBadge>;
+export interface StatusBadgeProps extends StatusBadgeVariants {
+    children?: ReactNode;
+    className?: string;
+}
+export declare function StatusBadge({ tone, className, children }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=status-badge.d.ts.map

package/dist/primitives/status-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/primitives/status-badge.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;4IAetB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEnE,MAAM,WAAW,gBAAiB,SAAQ,mBAAmB;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAE1E"}

package/dist/primitives/status-badge.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { cn } from "../cn.js";
+export const statusBadge = tv({
+    base: "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium transition-colors",
+    variants: {
+        tone: {
+            plan: "text-plan-mode border border-plan-mode",
+            accept: "text-auto-accept border border-auto-accept",
+            success: "text-success border border-success",
+            warning: "text-warning border border-warning",
+            error: "text-error border border-error",
+            // text-weak (AA-normal after the neutral-scale repair, §11) + a neutral
+            // border — muted but legible at the badge's xs size.
+            neutral: "text-text-weak border border-border-base",
+        },
+    },
+    defaultVariants: { tone: "neutral" },
+});
+export function StatusBadge({ tone, className, children }) {
+    return _jsx("span", { className: cn(statusBadge({ tone }), className), children: children });
+}
+//# sourceMappingURL=status-badge.js.map

package/dist/primitives/status-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-badge.js","sourceRoot":"","sources":["../../src/primitives/status-badge.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,EAAE,EAAqB,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC;IAC5B,IAAI,EAAE,+FAA+F;IACrG,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,wCAAwC;YAC9C,MAAM,EAAE,4CAA4C;YACpD,OAAO,EAAE,oCAAoC;YAC7C,OAAO,EAAE,oCAAoC;YAC7C,KAAK,EAAE,gCAAgC;YACvC,wEAAwE;YACxE,qDAAqD;YACrD,OAAO,EAAE,0CAA0C;SACpD;KACF;IACD,eAAe,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;CACrC,CAAC,CAAC;AASH,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAoB;IACzE,OAAO,eAAM,SAAS,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAQ,CAAC;AAClF,CAAC"}

package/dist/primitives/surface.d.ts

@@ -0,0 +1,201 @@
+/**
+ * (7.3 / task 03 — W2) `Surface` — the flex container primitive `[11.11]`, the
+ * tailwind-variants replacement for the inline-style `Box` (retired in W4). Reads
+ * the seed-engine `@theme` color utilities (`bg-bg-base` / `bg-surface-raised` /
+ * `border-border-base`). Layout beyond the common variants → `className`
+ * (Tailwind utilities) or `style` (one-off escape hatch). Browser-safe.
+ */
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { type VariantProps } from "tailwind-variants";
+export declare const surface: import("tailwind-variants").TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+    level: {
+        none: string;
+        base: string;
+        weak: string;
+        raised: string;
+        inset: string;
+    };
+    border: {
+        none: string;
+        base: string;
+        weak: string;
+        strong: string;
+    };
+    radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    padding: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    gap: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    align: {
+        start: string;
+        center: string;
+        end: string;
+        stretch: string;
+    };
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+        between: string;
+    };
+    grow: {
+        true: string;
+        false: string;
+    };
+    overflow: {
+        visible: string;
+        hidden: string;
+        auto: string;
+        scroll: string;
+    };
+}, undefined, "flex", {
+    direction: {
+        row: string;
+        column: string;
+    };
+    level: {
+        none: string;
+        base: string;
+        weak: string;
+        raised: string;
+        inset: string;
+    };
+    border: {
+        none: string;
+        base: string;
+        weak: string;
+        strong: string;
+    };
+    radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    padding: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    gap: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    align: {
+        start: string;
+        center: string;
+        end: string;
+        stretch: string;
+    };
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+        between: string;
+    };
+    grow: {
+        true: string;
+        false: string;
+    };
+    overflow: {
+        visible: string;
+        hidden: string;
+        auto: string;
+        scroll: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+    level: {
+        none: string;
+        base: string;
+        weak: string;
+        raised: string;
+        inset: string;
+    };
+    border: {
+        none: string;
+        base: string;
+        weak: string;
+        strong: string;
+    };
+    radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    padding: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    gap: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    align: {
+        start: string;
+        center: string;
+        end: string;
+        stretch: string;
+    };
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+        between: string;
+    };
+    grow: {
+        true: string;
+        false: string;
+    };
+    overflow: {
+        visible: string;
+        hidden: string;
+        auto: string;
+        scroll: string;
+    };
+}, undefined, "flex", unknown, unknown, undefined>>;
+export type SurfaceVariants = VariantProps<typeof surface>;
+export interface SurfaceProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, SurfaceVariants {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Surface({ direction, level, border, radius, padding, gap, align, justify, grow, overflow, className, children, ...rest }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=surface.d.ts.map

package/dist/primitives/surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../src/primitives/surface.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA+BlB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAAE,eAAe;IAClG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,GAAG,EACH,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,2CAYd"}

package/dist/primitives/surface.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { cn } from "../cn.js";
+export const surface = tv({
+    base: "flex",
+    variants: {
+        direction: { row: "flex-row", column: "flex-col" },
+        level: {
+            none: "",
+            base: "bg-bg-base",
+            weak: "bg-bg-weak",
+            raised: "bg-surface-raised",
+            inset: "bg-surface-inset",
+        },
+        border: {
+            none: "",
+            base: "border border-border-base",
+            weak: "border border-border-weak",
+            strong: "border border-border-strong",
+        },
+        radius: { none: "", sm: "rounded-sm", md: "rounded-md", lg: "rounded-lg", full: "rounded-full" },
+        padding: { none: "", xs: "p-1", sm: "p-2", md: "p-3", lg: "p-4" },
+        gap: { none: "", xs: "gap-1", sm: "gap-2", md: "gap-3", lg: "gap-4" },
+        align: { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" },
+        justify: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+            between: "justify-between",
+        },
+        grow: { true: "flex-1", false: "" },
+        overflow: { visible: "", hidden: "overflow-hidden", auto: "overflow-auto", scroll: "overflow-y-auto" },
+    },
+    defaultVariants: { direction: "column", level: "none", border: "none", radius: "none", padding: "none", gap: "none" },
+});
+export function Surface({ direction, level, border, radius, padding, gap, align, justify, grow, overflow, className, children, ...rest }) {
+    return (_jsx("div", { className: cn(surface({ direction, level, border, radius, padding, gap, align, justify, grow, overflow }), className), ...rest, children: children }));
+}
+//# sourceMappingURL=surface.js.map