fancy-ui-react 0.2.0

package/dist/cameleon/skins/terminal/meta.js

@@ -0,0 +1,70 @@
+"use client";
+const terminalMeta = {
+  palette: [
+    { name: "Black", value: "#0a0e0a", note: "page bg · void" },
+    { name: "Panel", value: "#0d120d", note: "near-black card" },
+    { name: "Dim green", value: "#14532d", note: "muted border · disabled" },
+    { name: "Green", value: "#22c55e", note: "border · phosphor" },
+    { name: "Bright green", value: "#4ade80", note: "text · foreground" },
+    { name: "Error red", value: "#f87171", note: "aria-invalid" },
+    { name: "Blue", value: "#38bdf8", note: "accent · info" },
+    { name: "Amber", value: "#facc15", note: "accent · warn" }
+  ],
+  type: [
+    {
+      sample: "DISPLAY",
+      spec: "SPACE MONO 700 CAPS · 56 · +0.02EM",
+      style: "font-family:var(--skin-font-mono);font-size:56px;font-weight:700;letter-spacing:0.02em;line-height:1;text-transform:uppercase;"
+    },
+    {
+      sample: "HEADING — SYSTEM READOUT",
+      spec: "SPACE MONO 700 CAPS · 26 · +0.06EM",
+      style: "font-family:var(--skin-font-mono);font-size:26px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;"
+    },
+    {
+      sample: "Body — phosphor glows on a black tube; the cursor blinks and waits for input.",
+      spec: "SPACE MONO 400 · 14 · 1.6",
+      style: "font-family:var(--skin-font-mono);font-size:14px;font-weight:400;line-height:1.6;max-width:52ch;"
+    },
+    {
+      sample: "$ prompt --input",
+      spec: "SPACE MONO 400 · 13 · caret green",
+      style: "font-family:var(--skin-font-mono);font-size:13px;font-weight:400;letter-spacing:0.01em;"
+    },
+    {
+      sample: "LABEL · STATUS: OK",
+      spec: "SPACE MONO 700 CAPS · 10.5 · +0.14EM",
+      style: "font-family:var(--skin-font-mono);font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;"
+    }
+  ],
+  specs: {
+    radius: [
+      { size: "0px", label: "tag" },
+      { size: "0px", label: "tile" },
+      { size: "0px", label: "nav" },
+      { size: "0px", label: "card" },
+      { size: "0 (square world)", label: "pill" }
+    ],
+    border: "1px solid green (#22c55e), everywhere. Dim green #14532d when muted.",
+    shadowRest: "none (flat) · optional phosphor glow via CSS",
+    shadowHover: "none · invert on hover (bg fills green, text goes black)",
+    spacing: "monospace grid · 4 / 8 / 12 / 16 / 24 · character-cell rhythm"
+  },
+  responsive: [
+    {
+      label: "Desktop ≥1024",
+      note: "80-column mainframe · left nav column + fluid readout · hover inverts"
+    },
+    {
+      label: "Tablet 720–1023",
+      note: "narrowed to ~64 cols · top status bar + scroll chips · 2-col grid"
+    },
+    {
+      label: "Mobile <720",
+      note: "single 40-col stack · 44px+ tap targets · caret stays blinking"
+    }
+  ]
+};
+export {
+  terminalMeta
+};

package/dist/cameleon/skins/terminal/ornaments.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Terminal ornaments as plain functions returning JSX. The blinking is driven
+ * by the `cam-blink` keyframes in terminal.css.
+ */
+import type { ReactNode } from "react";
+import type { RecipeArgs } from "../../types.js";
+export declare function buttonTrailing(_args: RecipeArgs): ReactNode;

package/dist/cameleon/skins/terminal/ornaments.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function buttonTrailing(_args) {
+  return /* @__PURE__ */ jsx("span", { className: "cam-caret", "aria-hidden": "true", children: "▊" });
+}
+export {
+  buttonTrailing
+};

package/dist/cameleon/skins/terminal/recipes.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Terminal recipes — the full "Core components" set in the CRT art direction:
+ * square (`rounded-none`), monospace, uppercase, green-on-black, NO motion
+ * (`transition-none`, except the switch thumb translate). Glow + blinking caret
+ * come from terminal.css / ornaments.
+ *
+ * Static class literals only (Tailwind JIT-safe). States are attribute-driven:
+ * primitives set `disabled`, `aria-invalid`, `aria-checked` and Tailwind's
+ * state variants (hover, focus, peer-, group-, disabled, aria) do the rest.
+ *
+ * Palette: green #22c55e / bright green #4ade80, black bg, dim green #14532d,
+ * error red #f87171. Focus = green outline (not ring). Error = red border/outline.
+ */
+import type { RecipeArgs, RecipeResult, SkinRecipes } from "../../types.js";
+export declare function terminalButton(args: RecipeArgs): RecipeResult;
+export declare const terminalInput: (args: RecipeArgs) => RecipeResult;
+export declare const terminalTextarea: (args: RecipeArgs) => RecipeResult;
+export declare const terminalSelect: (args: RecipeArgs) => RecipeResult;
+export declare const terminalCheckbox: (args: RecipeArgs) => RecipeResult;
+export declare const terminalRadio: (args: RecipeArgs) => RecipeResult;
+export declare const terminalSwitch: (args: RecipeArgs) => RecipeResult;
+export declare const terminalSlider: () => RecipeResult;
+export declare function terminalBadge(args: RecipeArgs): RecipeResult;
+export declare function terminalTooltip(args: RecipeArgs): RecipeResult;
+export declare const terminalRecipes: SkinRecipes;

package/dist/cameleon/skins/terminal/recipes.js

@@ -0,0 +1,125 @@
+"use client";
+const forced = (map, state) => state && map[state] || "";
+const BTN_BASE = "inline-flex items-center justify-center gap-2 rounded-none border font-mono uppercase tracking-widest whitespace-nowrap cursor-pointer select-none transition-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 disabled:opacity-40 disabled:pointer-events-none";
+const BTN_SIZE = {
+  sm: "px-3 py-1.5 text-[11px]",
+  md: "px-4 py-2 text-xs",
+  lg: "px-5 py-2.5 text-sm"
+};
+const BTN_VARIANT = {
+  primary: "border-[#22c55e] bg-black text-[#4ade80] hover:bg-[#22c55e] hover:text-black focus-visible:outline-[#22c55e]",
+  secondary: "border-[#14532d] bg-transparent text-[#4ade80]/80 hover:border-[#22c55e] hover:text-[#4ade80] focus-visible:outline-[#22c55e]",
+  destructive: "border-[#f87171] bg-black text-[#f87171] hover:bg-[#f87171] hover:text-black focus-visible:outline-[#f87171]"
+};
+const BTN_FORCE = {
+  hover: "bg-[#22c55e] text-black",
+  active: "bg-[#4ade80] text-black",
+  focus: "outline outline-1 outline-offset-2 outline-[#22c55e]"
+};
+function terminalButton(args) {
+  const size = BTN_SIZE[args.size ?? "md"] ?? BTN_SIZE.md;
+  const variant = BTN_VARIANT[args.variant ?? "primary"] ?? BTN_VARIANT.primary;
+  return { root: `${BTN_BASE} ${size} ${variant} ${forced(BTN_FORCE, args.state)}`, label: "" };
+}
+const FIELD_BASE = "w-full rounded-none border border-[#22c55e] bg-black px-3 py-2 text-xs font-mono text-[#4ade80] outline-none transition-none caret-[#22c55e] placeholder:text-[#4ade80]/40 hover:border-[#4ade80] focus:outline focus:outline-1 focus:outline-offset-0 focus:outline-[#22c55e] disabled:opacity-40 disabled:cursor-not-allowed disabled:border-[#14532d] disabled:text-[#4ade80]/40 aria-[invalid=true]:border-[#f87171] aria-[invalid=true]:focus:outline-[#f87171]";
+const FIELD_FORCE = {
+  hover: "border-[#4ade80]",
+  focus: "outline outline-1 outline-offset-0 outline-[#22c55e]"
+};
+const terminalInput = (args) => ({
+  root: `${FIELD_BASE} ${forced(FIELD_FORCE, args.state)}`
+});
+const terminalTextarea = (args) => ({
+  root: `${FIELD_BASE} min-h-[80px] leading-relaxed resize-y ${forced(FIELD_FORCE, args.state)}`
+});
+const terminalSelect = (args) => ({
+  root: "relative inline-block w-full",
+  field: `${FIELD_BASE} appearance-none pr-9 cursor-pointer ${forced(FIELD_FORCE, args.state)}`,
+  chevron: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[#22c55e]"
+});
+const CHOICE_ROOT = "inline-flex items-center gap-2 cursor-pointer select-none text-xs font-mono text-[#4ade80] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60";
+const CHOICE_BOX_BASE = "grid place-items-center h-[18px] w-[18px] shrink-0 border border-[#22c55e] bg-black transition-none text-transparent peer-focus-visible:outline peer-focus-visible:outline-1 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#22c55e] peer-disabled:opacity-40 peer-disabled:border-[#14532d] peer-aria-[invalid=true]:border-[#f87171] peer-data-[invalid=true]:border-[#f87171]";
+const CHOICE_FORCE = {
+  hover: "border-[#4ade80]",
+  focus: "outline outline-1 outline-offset-2 outline-[#22c55e]"
+};
+const terminalCheckbox = (args) => ({
+  root: CHOICE_ROOT,
+  box: `${CHOICE_BOX_BASE} rounded-none peer-checked:bg-[#22c55e] peer-checked:text-black ${forced(CHOICE_FORCE, args.state)}`
+});
+const terminalRadio = (args) => ({
+  root: CHOICE_ROOT,
+  box: `${CHOICE_BOX_BASE} rounded-full peer-checked:bg-[#22c55e] ${forced(CHOICE_FORCE, args.state)}`
+});
+const SWITCH_FORCE = {
+  hover: "border-[#4ade80]",
+  focus: "outline outline-1 outline-offset-2 outline-[#22c55e]"
+};
+const terminalSwitch = (args) => ({
+  root: "group inline-flex h-[22px] w-[40px] shrink-0 items-center rounded-none border border-[#22c55e] bg-black p-[2px] cursor-pointer transition-none aria-[checked=true]:bg-[#22c55e] focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-[#22c55e] disabled:opacity-40 disabled:cursor-not-allowed aria-[invalid=true]:border-[#f87171] " + forced(SWITCH_FORCE, args.state),
+  thumb: "h-[14px] w-[14px] rounded-none border border-[#22c55e] bg-[#4ade80] transition-transform group-aria-[checked=true]:translate-x-[18px] group-aria-[checked=true]:bg-black group-aria-[checked=true]:border-black"
+});
+const terminalSlider = () => ({
+  root: "cam-range w-[160px] cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50"
+});
+const BADGE_BASE = "inline-flex items-center rounded-none border px-[10px] py-[3px] text-[11px] font-mono uppercase tracking-widest before:content-[''] before:mr-[6px] before:h-[7px] before:w-[7px] before:rounded-none before:shrink-0";
+const BADGE_VARIANT = {
+  default: "border-[#22c55e] bg-black text-[#4ade80] before:bg-[#4ade80]",
+  solid: "border-[#22c55e] bg-[#22c55e] text-black before:bg-black",
+  blue: "border-[#38bdf8] bg-black text-[#38bdf8] before:bg-[#38bdf8]",
+  red: "border-[#f87171] bg-black text-[#f87171] before:bg-[#f87171]",
+  yellow: "border-[#facc15] bg-black text-[#facc15] before:bg-[#facc15]",
+  green: "border-[#22c55e] bg-black text-[#4ade80] before:bg-[#22c55e]",
+  purple: "border-[#a78bfa] bg-black text-[#a78bfa] before:bg-[#a78bfa]"
+};
+const BADGE_FORCE = {
+  hover: "border-[#4ade80] text-[#4ade80] before:bg-[#4ade80]",
+  active: "bg-[#22c55e] text-black before:bg-black",
+  focus: "outline outline-1 outline-offset-2 outline-[#22c55e]",
+  disabled: "border-[#14532d] text-[#4ade80]/40 before:bg-[#14532d]",
+  error: "border-[#f87171] text-[#f87171] before:bg-[#f87171]"
+};
+function terminalBadge(args) {
+  const variant = BADGE_VARIANT[args.variant ?? "default"] ?? BADGE_VARIANT.default;
+  return { root: `${BADGE_BASE} ${variant} ${forced(BADGE_FORCE, args.state)}` };
+}
+const TT_TRIGGER = {
+  focus: "outline outline-1 outline-offset-2 outline-[#22c55e]",
+  error: "border-[#f87171] text-[#f87171]"
+};
+const TT_BUBBLE = {
+  focus: "outline outline-1 outline-offset-2 outline-[#22c55e]",
+  error: "border-[#f87171] text-[#f87171]"
+};
+function terminalTooltip(args) {
+  return {
+    root: "relative inline-flex group",
+    trigger: "grid place-items-center h-[26px] w-[26px] rounded-none border border-[#22c55e] bg-black text-[#4ade80] text-xs font-mono font-bold cursor-help focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-[#22c55e] " + forced(TT_TRIGGER, args.state),
+    bubble: "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-none border border-[#22c55e] bg-black px-3 py-1.5 text-xs font-mono text-[#4ade80] opacity-0 transition-none group-hover:opacity-100 group-focus-within:opacity-100 " + forced(TT_BUBBLE, args.state)
+  };
+}
+const terminalRecipes = {
+  button: terminalButton,
+  input: terminalInput,
+  textarea: terminalTextarea,
+  select: terminalSelect,
+  checkbox: terminalCheckbox,
+  radio: terminalRadio,
+  switch: terminalSwitch,
+  slider: terminalSlider,
+  badge: terminalBadge,
+  tooltip: terminalTooltip
+};
+export {
+  terminalBadge,
+  terminalButton,
+  terminalCheckbox,
+  terminalInput,
+  terminalRadio,
+  terminalRecipes,
+  terminalSelect,
+  terminalSlider,
+  terminalSwitch,
+  terminalTextarea,
+  terminalTooltip
+};

package/dist/cameleon/skins/terminal/tokens.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Terminal skin tokens — CRT green-on-black, monospace everywhere.
+ * The maximal-divergence proof: square corners, no motion, glow, blinking caret.
+ */
+export declare const terminalTokens: Record<string, string>;

package/dist/cameleon/skins/terminal/tokens.js

@@ -0,0 +1,18 @@
+"use client";
+const terminalTokens = {
+  "--skin-page-bg": "#0a0e0a",
+  "--skin-page-fg": "#4ade80",
+  "--skin-card": "#0d120d",
+  "--skin-surface": "#0a0e0a",
+  "--skin-line": "#22c55e",
+  "--skin-blue": "#38bdf8",
+  "--skin-red": "#f87171",
+  "--skin-yellow": "#facc15",
+  "--skin-green": "#22c55e",
+  "--skin-purple": "#a78bfa",
+  "--skin-font-sans": "'Space Mono', ui-monospace, SFMono-Regular, monospace",
+  "--skin-font-mono": "'Space Mono', ui-monospace, SFMono-Regular, monospace"
+};
+export {
+  terminalTokens
+};

package/dist/cameleon/types.d.ts

@@ -0,0 +1,133 @@
+/**
+ * Cameleon Engine — the skin contract.
+ *
+ * A "skin" is a complete art direction, not a color theme. It changes
+ * typography, borders, shadows, motion, ornaments, and structure while the
+ * component API stays identical. A skin has three collaborating layers:
+ *
+ *   1. tokens    — CSS custom properties (the shared substrate: color, font,
+ *                  radius, shadow *values*) applied scoped by <FancyProvider>.
+ *   2. recipes   — pure functions returning static Tailwind class strings per
+ *                  component "part" (root, label, field, panel...). This is
+ *                  where structure / motion / hover formulas live.
+ *   3. ornaments — render functions the skin injects into fixed component
+ *                  slots for DOM that differs per skin (Brutal's arrow,
+ *                  Terminal's caret).
+ *
+ * Plus an optional per-skin CSS file (scoped by `[data-skin="<name>"]`) for
+ * pseudo-elements, textures, and keyframes a class cannot express.
+ */
+import type { ReactNode } from "react";
+/**
+ * Component state passed to a recipe. "error"/"disabled"/"loading" are real
+ * semantic states (attribute-driven). "hover"/"active"/"focus" are normally CSS
+ * pseudo-states — they appear here only for the /skins state-matrix demo, where a
+ * recipe FORCES that visual statically (see `demoState` on the primitives).
+ */
+export type PartState = "default" | "error" | "disabled" | "loading" | "hover" | "active" | "focus";
+/** Inputs to every recipe. Plain object → recipes are pure and unit-testable. */
+export interface RecipeArgs {
+    variant?: string;
+    size?: string;
+    state?: PartState;
+}
+/**
+ * One class string per named PART.
+ * IMPORTANT: values MUST be static class literals (no computed fragments like
+ * `rounded-${r}`) so Tailwind v4's JIT can see them. Build them from `as const`
+ * maps, mirroring src/lib/fancy-ui/book/index.ts.
+ */
+export type RecipeResult = Record<string, string>;
+export type RecipeFn = (args: RecipeArgs) => RecipeResult;
+/**
+ * The recipes a skin provides — one per primitive. Every skin implements all of
+ * them so components never have to handle a missing recipe. Part names per
+ * recipe (the keys of the returned RecipeResult) are a fixed contract shared by
+ * all skins:
+ *   button   → root, label
+ *   badge    → root                (args.variant: default|blue|red|yellow|green|purple|solid)
+ *   input    → root
+ *   textarea → root
+ *   select   → root, field, chevron
+ *   checkbox → root, box
+ *   radio    → root, box
+ *   switch   → root, thumb
+ *   slider   → root                (thumb/track come from per-skin CSS via .cam-range)
+ *   tooltip  → root, trigger, bubble
+ */
+export interface SkinRecipes {
+    button: RecipeFn;
+    badge: RecipeFn;
+    input: RecipeFn;
+    textarea: RecipeFn;
+    select: RecipeFn;
+    checkbox: RecipeFn;
+    radio: RecipeFn;
+    switch: RecipeFn;
+    slider: RecipeFn;
+    tooltip: RecipeFn;
+}
+/** Extra DOM a skin injects into a component's fixed ornament slots. */
+export interface SkinOrnaments {
+    /** Trailing glyph inside Button (Brutal arrow, Terminal caret marker). */
+    buttonTrailing?: (args: RecipeArgs) => ReactNode;
+    /** Eyebrow row at the top of Card (Brutal dot + mono label + / NN index). */
+    cardEyebrow?: (props: {
+        index?: number;
+        label?: string;
+    }) => ReactNode;
+}
+/** A webfont the skin needs. Injected once (deduped by id) by the provider. */
+export interface SkinFont {
+    id: string;
+    href: string;
+}
+/**
+ * Human-readable design metadata for the /skins documentation page (the
+ * design-system.html reproduction). Each skin describes its own palette, type
+ * scale, and specs so sections /01–/03 and /05 reflect the active skin.
+ */
+export interface SkinMeta {
+    /** /01 Color tokens — swatches. */
+    palette: {
+        name: string;
+        value: string;
+        note?: string;
+    }[];
+    /** /02 Typography scale — one row per specimen; `style` is inline CSS for the sample. */
+    type: {
+        sample: string;
+        spec: string;
+        style: string;
+    }[];
+    /** /03 Grid, radius & borders. */
+    specs: {
+        radius: {
+            size: string;
+            label: string;
+        }[];
+        border: string;
+        shadowRest: string;
+        shadowHover: string;
+        spacing: string;
+    };
+    /** /05 Responsive variants — one card per breakpoint. */
+    responsive: {
+        label: string;
+        note: string;
+    }[];
+}
+export interface Skin {
+    /** Stable id — becomes the `data-skin` attribute value + font dedupe key. */
+    name: string;
+    label: string;
+    /** Drives an optional scoped `.dark` when <FancyProvider manageColorScheme>. */
+    colorScheme: "light" | "dark";
+    /** CSS custom properties applied scoped to the provider's subtree. */
+    tokens: Record<string, string>;
+    fonts?: SkinFont[];
+    recipes: SkinRecipes;
+    ornaments?: SkinOrnaments;
+    /** Design metadata powering the /skins documentation sections. */
+    meta: SkinMeta;
+}

package/dist/components/agent-plan/AgentPlan.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import type { PlanStepData } from "../../internals/ai-types.js";
+/**
+ * Props for AgentPlan
+ */
+export interface AgentPlanProps {
+    /** The plan, in the order the agent means to work through it. Nests via `substeps`. */
+    steps: PlanStepData[];
+    /** Header text, sitting beside the done/total count. */
+    label?: string;
+    /** Whether the thin completion bar shows under the header. */
+    showProgress?: boolean;
+    /** Called when a row is activated; supplying it turns every row into a button. */
+    onSelect?: (step: PlanStepData) => void;
+    /** Replaces the built-in row body, keeping the glyph and the indent. */
+    item?: (step: PlanStepData, index: number) => ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const AgentPlan: import("react").ForwardRefExoticComponent<AgentPlanProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/agent-plan/AgentPlan.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css               */
+const STATUS_LABELS = {
+  pending: "Pending",
+  running: "Running",
+  done: "Completed",
+  error: "Failed",
+  cancelled: "Cancelled"
+};
+function buildRows(steps) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Map();
+  const ids = /* @__PURE__ */ new Set();
+  const collectIds = (list) => {
+    for (const step of list) {
+      ids.add(step.id);
+      if (step.substeps) collectIds(step.substeps);
+    }
+  };
+  collectIds(steps);
+  const used = /* @__PURE__ */ new Set();
+  const push = (step, depth) => {
+    const occurrence = seen.get(step.id) ?? 0;
+    seen.set(step.id, occurrence + 1);
+    let key = `${step.id}#${occurrence}`;
+    let suffix = occurrence;
+    while (ids.has(key) || used.has(key)) {
+      suffix++;
+      key = `${step.id}#${suffix}`;
+    }
+    used.add(key);
+    out.push({ step, key, depth, index: out.length, lastSub: false });
+  };
+  for (const step of steps) {
+    push(step, 0);
+    const queue = [...step.substeps ?? []];
+    while (queue.length > 0) {
+      const sub = queue.shift();
+      push(sub, 1);
+      if (sub.substeps && sub.substeps.length > 0) queue.unshift(...sub.substeps);
+    }
+    const last = out[out.length - 1];
+    if (last.depth === 1) last.lastSub = true;
+  }
+  return out;
+}
+function Glyph({ status }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ft-agentplan-glyph",
+        status === "pending" && "ft-status-pending",
+        status === "running" && "ft-status-running",
+        status === "done" && "ft-status-done",
+        status === "error" && "ft-status-error",
+        status === "cancelled" && "ft-status-cancelled"
+      ),
+      "aria-hidden": "true",
+      children: status === "done" ? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "ft-agentplan-icon",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "m5 13 4 4L19 7" })
+        }
+      ) : status === "error" ? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "ft-agentplan-icon",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6 6 18" })
+        }
+      ) : status === "cancelled" ? /* @__PURE__ */ jsx("span", { className: "ft-agentplan-dash" }) : status === "running" ? /* @__PURE__ */ jsx("span", { className: "ft-agentplan-dot" }) : /* @__PURE__ */ jsx("span", { className: "ft-agentplan-ring" })
+    }
+  );
+}
+function RowBody({
+  row,
+  item
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Glyph, { status: row.step.status }),
+    item ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: STATUS_LABELS[row.step.status] }),
+      item(row.step, row.index)
+    ] }) : /* @__PURE__ */ jsxs("span", { className: "ft-agentplan-text min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "ft-agentplan-step-label block leading-snug",
+            (row.step.status === "done" || row.step.status === "cancelled") && "text-muted-foreground",
+            row.step.status === "running" && "font-medium"
+          ),
+          children: row.step.label
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: STATUS_LABELS[row.step.status] }),
+      row.step.detail ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "ft-agentplan-detail text-muted-foreground mt-0.5 block truncate text-xs",
+          title: row.step.detail,
+          children: row.step.detail
+        }
+      ) : null
+    ] })
+  ] });
+}
+const AgentPlan = forwardRef(function AgentPlan2({ steps, label = "Plan", showProgress = true, onSelect, item, className, sound }, ref) {
+  const uid = useFancyId();
+  const labelId = `${uid}-label`;
+  const playCue = useSoundCue(sound);
+  const selectStep = (step) => {
+    playCue("select");
+    onSelect?.(step);
+  };
+  const rows = buildRows(steps);
+  const total = rows.length;
+  const doneCount = rows.filter((row) => row.step.status === "done").length;
+  const percent = total === 0 ? 0 : Math.round(doneCount / total * 1e3) / 10;
+  const currentIndex = rows.findIndex((row) => row.step.status === "running");
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("ft-agentplan w-full text-sm", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ft-agentplan-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("span", { id: labelId, className: "ft-agentplan-label text-foreground truncate font-medium", children: label }),
+        /* @__PURE__ */ jsxs("span", { className: "ft-agentplan-count text-muted-foreground ml-auto shrink-0 text-xs tabular-nums", children: [
+          doneCount,
+          "/",
+          total
+        ] })
+      ] }),
+      showProgress ? (
+        // The count above already says it in words, so the bar is decoration.
+        /* @__PURE__ */ jsx("div", { className: "ft-agentplan-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "ft-agentplan-bar", style: { width: `${percent}%` } }) })
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ft-agentplan-list", role: "list", "aria-labelledby": labelId, children: rows.map((row) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "ft-agentplan-row",
+          row.depth === 1 && "ft-agentplan-sub",
+          row.lastSub && "ft-agentplan-sub-last"
+        ),
+        role: "listitem",
+        "data-status": row.step.status,
+        "aria-current": row.index === currentIndex ? "step" : void 0,
+        children: onSelect ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ft-agentplan-body hover:bg-muted/60 focus-visible:ring-ring flex w-full cursor-pointer items-start gap-2 rounded-md text-left transition-colors focus-visible:ring-1 focus-visible:outline-none",
+            onClick: () => selectStep(row.step),
+            children: /* @__PURE__ */ jsx(RowBody, { row, item })
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "ft-agentplan-body flex items-start gap-2 rounded-md", children: /* @__PURE__ */ jsx(RowBody, { row, item }) })
+      },
+      row.key
+    )) })
+  ] });
+});
+export {
+  AgentPlan
+};

package/dist/components/agent-plan/index.d.ts

@@ -0,0 +1,2 @@
+export { AgentPlan } from "./AgentPlan.js";
+export type { AgentPlanProps } from "./AgentPlan.js";

package/dist/components/ai-data-table/AiDataTable.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+/** One column, rendered in the order it appears in the array. */
+export interface AiDataTableColumn {
+    /** Key looked up on every row. */
+    key: string;
+    /** Header text. */
+    label: string;
+    /** Horizontal alignment. Defaults to right on a numeric column, left otherwise. */
+    align?: "left" | "center" | "right";
+    /** Renders the column with tabular figures, and right-aligns it unless `align` says otherwise. */
+    numeric?: boolean;
+}
+/** Everything a cell is allowed to hold — the four things a model actually emits. */
+export type AiDataTableValue = string | number | boolean | null | undefined;
+/** One row, keyed by column key. Missing keys read as empty. */
+export type AiDataTableRow = Record<string, AiDataTableValue>;
+/**
+ * Props for AiDataTable
+ */
+export interface AiDataTableProps {
+    /** The columns to render, in order. */
+    columns: AiDataTableColumn[];
+    /** The rows to render, in the order the model produced them. */
+    rows: AiDataTableRow[];
+    /** Describes the table for assistive tech. Hidden on screen unless `captionVisible`. */
+    caption?: string;
+    /** Shows `caption` as a muted line above the table. */
+    captionVisible?: boolean;
+    /** Tighter rows, for a table read at a glance rather than studied. */
+    dense?: boolean;
+    /** Key of the column to tint — the recommendation, or whichever criterion decided it. */
+    highlightColumn?: string;
+    /** Replaces the default cell rendering. Receives the raw value and its position. */
+    cell?: (value: unknown, at: {
+        row: number;
+        key: string;
+    }) => ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Renders tabular model output — columns and rows, an optional highlighted
+ * column, and accessible glyphs for booleans and empty values.
+ *
+ * The root element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ *
+ * The wrapper is the only thing allowed to scroll sideways: a model asked for
+ * nine criteria will produce nine columns, and the page around it must not go
+ * on a horizontal rail because of that. Which is why it is focusable and
+ * named — a scroll container that only answers to a pointer is unreachable
+ * for anyone driving the page from the keyboard.
+ */
+export declare const AiDataTable: import("react").ForwardRefExoticComponent<AiDataTableProps & import("react").RefAttributes<HTMLDivElement>>;