@usetheo/ui 0.13.0 → 0.13.1

package/dist/chunk-V3HFDVZ3.js

@@ -0,0 +1,102 @@
+"use client";
+import { Dialog } from './chunk-CSEGVTKO.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { Command } from 'cmdk';
+import { Search, ChevronRight } from 'lucide-react';
+import { useState, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultEmpty = "No results.";
+function CommandPalette({
+  open,
+  onOpenChange,
+  items,
+  onSelect,
+  placeholder = "Type a command or search\u2026",
+  emptyMessage = defaultEmpty,
+  filter
+}) {
+  const [search, setSearch] = useState("");
+  const groups = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      const key = item.group ?? "";
+      if (!map.has(key)) map.set(key, []);
+      map.get(key)?.push(item);
+    }
+    return Array.from(map.entries());
+  }, [items]);
+  const handleSelect = (id) => {
+    onSelect(id);
+    onOpenChange(false);
+    setSearch("");
+  };
+  return /* @__PURE__ */ jsx(Dialog, { "data-slot": "command-palette", open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Content, { className: "max-w-xl p-0", hideCloseButton: true, children: [
+    /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: "Command palette" }),
+    /* @__PURE__ */ jsx(Dialog.Description, { className: "sr-only", children: "Type to search commands. Use arrow keys to navigate, Enter to select, Escape to close." }),
+    /* @__PURE__ */ jsxs(Command, { label: "Command palette", shouldFilter: true, ...filter ? { filter } : {}, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-border/40 border-b px-4 py-3", children: [
+        /* @__PURE__ */ jsx(Search, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          Command.Input,
+          {
+            value: search,
+            onValueChange: setSearch,
+            placeholder,
+            className: cn(
+              "flex-1 bg-transparent",
+              "font-sans text-body-md text-foreground placeholder:text-muted-foreground",
+              "focus:outline-none"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "rounded-md bg-muted px-1.5 py-0.5 font-mono text-label text-muted-foreground", children: "\u2318K" })
+      ] }),
+      /* @__PURE__ */ jsxs(Command.List, { className: "max-h-[420px] overflow-y-auto p-1", children: [
+        /* @__PURE__ */ jsx(Command.Empty, { className: "px-3 py-6 text-center text-body-sm text-muted-foreground", children: emptyMessage }),
+        groups.map(([groupName, list]) => /* @__PURE__ */ jsx(
+          Command.Group,
+          {
+            heading: groupName || void 0,
+            className: cn(
+              "[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1",
+              "[&_[cmdk-group-heading]]:font-sans [&_[cmdk-group-heading]]:text-label-caps",
+              "[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider"
+            ),
+            children: list.map((item) => {
+              const Icon = item.icon;
+              const value = item.searchable ?? (typeof item.label === "string" ? item.label : item.id);
+              return /* @__PURE__ */ jsxs(
+                Command.Item,
+                {
+                  value,
+                  onSelect: () => handleSelect(item.id),
+                  className: cn(
+                    "flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-left",
+                    "transition-colors hover:bg-muted",
+                    "data-[selected=true]:bg-muted",
+                    "focus-visible:outline-none"
+                  ),
+                  children: [
+                    Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4 text-primary" }) : null,
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx("p", { className: "truncate text-body-sm text-foreground", children: item.label }),
+                      item.hint ? /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-label text-muted-foreground", children: item.hint }) : null
+                    ] }),
+                    /* @__PURE__ */ jsx(ChevronRight, { className: "size-3 text-muted-foreground", "aria-hidden": "true" })
+                  ]
+                },
+                item.id
+              );
+            })
+          },
+          groupName || "default"
+        ))
+      ] })
+    ] })
+  ] }) });
+}
+
+export { CommandPalette };
+//# sourceMappingURL=chunk-V3HFDVZ3.js.map
+//# sourceMappingURL=chunk-V3HFDVZ3.js.map

package/dist/chunk-V3HFDVZ3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/command-palette/command-palette.tsx"],"names":["CommandPrimitive"],"mappings":"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","file":"chunk-V3HFDVZ3.js","sourcesContent":["\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { ChevronRight, Search } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\nimport { Dialog } from \"../../primitives/dialog/index.js\";\n\nexport interface CommandItem {\n  id: string;\n  label: ReactNode;\n  /** Optional secondary line (path, hint, shortcut). */\n  hint?: ReactNode;\n  /** Optional group name. Items with the same group are visually grouped. */\n  group?: string;\n  /** Optional icon. */\n  icon?: IconComponent;\n  /** Optional searchable plain-text used by the cmdk ranker. Falls back to `label` when string. */\n  searchable?: string;\n}\n\ninterface CommandPaletteProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  items: CommandItem[];\n  onSelect: (id: string) => void;\n  placeholder?: string;\n  emptyMessage?: ReactNode;\n  /**\n   * Optional custom filter score (0 = no match, > 0 = match). Receives the\n   * `value` (the item's searchable text) and the current `search` query.\n   * Defaults to cmdk's built-in fuzzy ranker which prioritizes substring +\n   * word-boundary + consecutive matches.\n   */\n  filter?: (value: string, search: string) => number;\n}\n\nconst defaultEmpty = \"No results.\";\n\n/**\n * CommandPalette — Cmd+K-style global launcher with full keyboard navigation.\n *\n * Built on `cmdk` (the de-facto shadcn pattern) + Theo Dialog. Provides\n * out-of-the-box: ArrowUp/ArrowDown navigation, Enter selection, Escape close,\n * Home/End, active-item highlight via `data-selected`, and fuzzy ranking.\n *\n * Stateless: caller owns `open` / `onOpenChange` / `items`. Selecting an item\n * fires `onSelect(id)` and closes the dialog.\n */\nfunction CommandPalette({\n  open,\n  onOpenChange,\n  items,\n  onSelect,\n  placeholder = \"Type a command or search…\",\n  emptyMessage = defaultEmpty,\n  filter,\n}: CommandPaletteProps) {\n  const [search, setSearch] = useState(\"\");\n\n  const groups = useMemo(() => {\n    const map = new Map<string, CommandItem[]>();\n    for (const item of items) {\n      const key = item.group ?? \"\";\n      if (!map.has(key)) map.set(key, []);\n      map.get(key)?.push(item);\n    }\n    return Array.from(map.entries());\n  }, [items]);\n\n  const handleSelect = (id: string) => {\n    onSelect(id);\n    onOpenChange(false);\n    setSearch(\"\");\n  };\n\n  return (\n    <Dialog data-slot=\"command-palette\" open={open} onOpenChange={onOpenChange}>\n      <Dialog.Content className=\"max-w-xl p-0\" hideCloseButton>\n        <Dialog.Title className=\"sr-only\">Command palette</Dialog.Title>\n        <Dialog.Description className=\"sr-only\">\n          Type to search commands. Use arrow keys to navigate, Enter to select, Escape to close.\n        </Dialog.Description>\n        <CommandPrimitive label=\"Command palette\" shouldFilter {...(filter ? { filter } : {})}>\n          <div className=\"flex items-center gap-2 border-border/40 border-b px-4 py-3\">\n            <Search className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n            <CommandPrimitive.Input\n              value={search}\n              onValueChange={setSearch}\n              placeholder={placeholder}\n              className={cn(\n                \"flex-1 bg-transparent\",\n                \"font-sans text-body-md text-foreground placeholder:text-muted-foreground\",\n                \"focus:outline-none\",\n              )}\n            />\n            <span className=\"rounded-md bg-muted px-1.5 py-0.5 font-mono text-label text-muted-foreground\">\n              ⌘K\n            </span>\n          </div>\n          <CommandPrimitive.List className=\"max-h-[420px] overflow-y-auto p-1\">\n            <CommandPrimitive.Empty className=\"px-3 py-6 text-center text-body-sm text-muted-foreground\">\n              {emptyMessage}\n            </CommandPrimitive.Empty>\n            {groups.map(([groupName, list]) => (\n              <CommandPrimitive.Group\n                key={groupName || \"default\"}\n                heading={groupName || undefined}\n                className={cn(\n                  \"[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1\",\n                  \"[&_[cmdk-group-heading]]:font-sans [&_[cmdk-group-heading]]:text-label-caps\",\n                  \"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider\",\n                )}\n              >\n                {list.map((item) => {\n                  const Icon = item.icon;\n                  const value =\n                    item.searchable ?? (typeof item.label === \"string\" ? item.label : item.id);\n                  return (\n                    <CommandPrimitive.Item\n                      key={item.id}\n                      value={value}\n                      onSelect={() => handleSelect(item.id)}\n                      className={cn(\n                        \"flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-left\",\n                        \"transition-colors hover:bg-muted\",\n                        \"data-[selected=true]:bg-muted\",\n                        \"focus-visible:outline-none\",\n                      )}\n                    >\n                      {Icon ? <Icon className=\"size-4 text-primary\" /> : null}\n                      <div className=\"min-w-0 flex-1\">\n                        <p className=\"truncate text-body-sm text-foreground\">{item.label}</p>\n                        {item.hint ? (\n                          <p className=\"truncate font-mono text-label text-muted-foreground\">\n                            {item.hint}\n                          </p>\n                        ) : null}\n                      </div>\n                      <ChevronRight className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n                    </CommandPrimitive.Item>\n                  );\n                })}\n              </CommandPrimitive.Group>\n            ))}\n          </CommandPrimitive.List>\n        </CommandPrimitive>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n\nexport { CommandPalette };\n"]}

package/dist/chunk-V6H2RUVP.js

@@ -0,0 +1,77 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var STATUS_CLASS = {
+  running: "bg-success animate-pulse",
+  queued: "bg-warning",
+  completed: "bg-muted-foreground/50",
+  failed: "bg-destructive",
+  cancelled: "bg-muted-foreground/30"
+};
+var STATUS_LABEL = {
+  running: "Running",
+  queued: "Queued",
+  completed: "Completed",
+  failed: "Failed",
+  cancelled: "Cancelled"
+};
+var MODE_CLASS = {
+  chat: "bg-primary/15 text-primary",
+  code: "bg-success/15 text-success",
+  infra: "bg-accent/15 text-accent"
+};
+var SessionListItem = forwardRef(
+  ({ className, title, status, mode, timestamp, unread, active, onClick, disabled, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "data-slot": "session-list-item",
+      ref,
+      type: "button",
+      onClick,
+      disabled,
+      "aria-current": active ? "true" : void 0,
+      className: cn(
+        "group grid w-full grid-cols-[auto_1fr_auto] items-center gap-2 rounded-md px-2 py-2 text-left",
+        "transition-colors duration-base ease-out-soft",
+        active ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("size-2 shrink-0 rounded-full", STATUS_CLASS[status]),
+            "aria-label": STATUS_LABEL[status],
+            role: "img"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "grid min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-body-sm", children: title }),
+          (mode || timestamp) && /* @__PURE__ */ jsxs("span", { className: "mt-0.5 flex items-center gap-1.5 font-mono text-label text-muted-foreground", children: [
+            mode ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "inline-flex h-3.5 items-center rounded px-1 font-medium text-label-caps uppercase tracking-wider",
+                  MODE_CLASS[mode]
+                ),
+                children: mode
+              }
+            ) : null,
+            timestamp ? /* @__PURE__ */ jsx("span", { className: "truncate", children: timestamp }) : null
+          ] })
+        ] }),
+        unread && unread > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[1.25rem] shrink-0 items-center justify-center rounded-full bg-primary px-1.5 font-mono text-label text-primary-foreground tabular-nums", children: unread > 99 ? "99+" : unread }) : null
+      ]
+    }
+  )
+);
+SessionListItem.displayName = "SessionListItem";
+
+export { SessionListItem };
+//# sourceMappingURL=chunk-V6H2RUVP.js.map
+//# sourceMappingURL=chunk-V6H2RUVP.js.map

package/dist/chunk-V6H2RUVP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/session-list-item/session-list-item.tsx"],"names":[],"mappings":";;;;AAwBA,IAAM,YAAA,GAAiD;AAAA,EACrD,OAAA,EAAS,0BAAA;AAAA,EACT,MAAA,EAAQ,YAAA;AAAA,EACR,SAAA,EAAW,wBAAA;AAAA,EACX,MAAA,EAAQ,gBAAA;AAAA,EACR,SAAA,EAAW;AACb,CAAA;AAEA,IAAM,YAAA,GAAiD;AAAA,EACrD,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,SAAA,EAAW,WAAA;AAAA,EACX,MAAA,EAAQ,QAAA;AAAA,EACR,SAAA,EAAW;AACb,CAAA;AAEA,IAAM,UAAA,GAA0C;AAAA,EAC9C,IAAA,EAAM,4BAAA;AAAA,EACN,IAAA,EAAM,4BAAA;AAAA,EACN,KAAA,EAAO;AACT,CAAA;AAkBA,IAAM,eAAA,GAAkB,UAAA;AAAA,EACtB,CACE,EAAE,SAAA,EAAW,KAAA,EAAO,QAAQ,IAAA,EAAM,SAAA,EAAW,MAAA,EAAQ,MAAA,EAAQ,OAAA,EAAS,QAAA,EAAU,GAAG,KAAA,IACnF,GAAA,qBAEA,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,GAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,OAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA,EAAc,SAAS,MAAA,GAAS,MAAA;AAAA,MAChC,SAAA,EAAW,EAAA;AAAA,QACT,+FAAA;AAAA,QACA,+CAAA;AAAA,QACA,SACI,0BAAA,GACA,+DAAA;AAAA,QACJ,yEAAA;AAAA,QACA,iDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA,CAAG,8BAAA,EAAgC,YAAA,CAAa,MAAM,CAAC,CAAA;AAAA,YAClE,YAAA,EAAY,aAAa,MAAM,CAAA;AAAA,YAC/B,IAAA,EAAK;AAAA;AAAA,SACP;AAAA,wBACA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EACd,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EAAqC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UAAA,CACzD,IAAA,IAAQ,SAAA,qBACR,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,6EAAA,EACb,QAAA,EAAA;AAAA,YAAA,IAAA,mBACC,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,kGAAA;AAAA,kBACA,WAAW,IAAI;AAAA,iBACjB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA,aACH,GACE,IAAA;AAAA,YACH,4BAAY,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAY,qBAAU,CAAA,GAAU;AAAA,WAAA,EAC/D;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,MAAA,IAAU,MAAA,GAAS,CAAA,mBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2JAAA,EACb,QAAA,EAAA,MAAA,GAAS,EAAA,GAAK,KAAA,GAAQ,MAAA,EACzB,CAAA,GACE;AAAA;AAAA;AAAA;AAGV;AACA,eAAA,CAAgB,WAAA,GAAc,iBAAA","file":"chunk-V6H2RUVP.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * SessionListItem — single row in the sidebar's Sessions list for a code agent\n * app. Richer than the generic `Sidebar.Item`: shows a status dot, the agent\n * mode last used (chat/code/infra), and a relative timestamp.\n *\n *   <SessionListItem\n *     title=\"Build the alignment grid demo\"\n *     status=\"running\"\n *     mode=\"code\"\n *     timestamp=\"2m ago\"\n *     active\n *     onClick={() => navigate(`/session/${id}`)}\n *   />\n *\n * The status dot maps to the agent run state and animates while running.\n */\n\nexport type SessionRunStatus = \"running\" | \"queued\" | \"completed\" | \"failed\" | \"cancelled\";\nexport type SessionMode = \"chat\" | \"code\" | \"infra\";\n\nconst STATUS_CLASS: Record<SessionRunStatus, string> = {\n  running: \"bg-success animate-pulse\",\n  queued: \"bg-warning\",\n  completed: \"bg-muted-foreground/50\",\n  failed: \"bg-destructive\",\n  cancelled: \"bg-muted-foreground/30\",\n};\n\nconst STATUS_LABEL: Record<SessionRunStatus, string> = {\n  running: \"Running\",\n  queued: \"Queued\",\n  completed: \"Completed\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nconst MODE_CLASS: Record<SessionMode, string> = {\n  chat: \"bg-primary/15 text-primary\",\n  code: \"bg-success/15 text-success\",\n  infra: \"bg-accent/15 text-accent\",\n};\n\ninterface SessionListItemProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\" | \"title\"> {\n  /** Session title (truncated). */\n  title: ReactNode;\n  /** Agent run state. Drives the status dot. */\n  status: SessionRunStatus;\n  /** Last mode the user was viewing this session in. Optional pill. */\n  mode?: SessionMode;\n  /** Relative timestamp string (\"2m ago\", \"yesterday\"). */\n  timestamp?: ReactNode;\n  /** Optional unread count (pending agent events, new outputs). */\n  unread?: number;\n  /** Whether this is the currently selected session. */\n  active?: boolean;\n}\n\nconst SessionListItem = forwardRef<HTMLButtonElement, SessionListItemProps>(\n  (\n    { className, title, status, mode, timestamp, unread, active, onClick, disabled, ...props },\n    ref,\n  ) => (\n    <button\n      data-slot=\"session-list-item\"\n      ref={ref}\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-current={active ? \"true\" : undefined}\n      className={cn(\n        \"group grid w-full grid-cols-[auto_1fr_auto] items-center gap-2 rounded-md px-2 py-2 text-left\",\n        \"transition-colors duration-base ease-out-soft\",\n        active\n          ? \"bg-muted text-foreground\"\n          : \"text-muted-foreground hover:bg-muted/50 hover:text-foreground\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className={cn(\"size-2 shrink-0 rounded-full\", STATUS_CLASS[status])}\n        aria-label={STATUS_LABEL[status]}\n        role=\"img\"\n      />\n      <span className=\"grid min-w-0\">\n        <span className=\"truncate font-medium text-body-sm\">{title}</span>\n        {(mode || timestamp) && (\n          <span className=\"mt-0.5 flex items-center gap-1.5 font-mono text-label text-muted-foreground\">\n            {mode ? (\n              <span\n                className={cn(\n                  \"inline-flex h-3.5 items-center rounded px-1 font-medium text-label-caps uppercase tracking-wider\",\n                  MODE_CLASS[mode],\n                )}\n              >\n                {mode}\n              </span>\n            ) : null}\n            {timestamp ? <span className=\"truncate\">{timestamp}</span> : null}\n          </span>\n        )}\n      </span>\n      {unread && unread > 0 ? (\n        <span className=\"inline-flex min-w-[1.25rem] shrink-0 items-center justify-center rounded-full bg-primary px-1.5 font-mono text-label text-primary-foreground tabular-nums\">\n          {unread > 99 ? \"99+\" : unread}\n        </span>\n      ) : null}\n    </button>\n  ),\n);\nSessionListItem.displayName = \"SessionListItem\";\n\nexport { SessionListItem };\n"]}

package/dist/chunk-VB53UMAL.js

@@ -0,0 +1,106 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { Coins, TrendingUp, TrendingDown } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var formatUsd = (n) => n >= 100 ? `$${n.toFixed(0)}` : n >= 10 ? `$${n.toFixed(1)}` : `$${n.toFixed(2)}`;
+var CostMeter = forwardRef(
+  ({ className, cost, budget, title = "Spend", delta, compact, ...props }, ref) => {
+    if (compact) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-slot": "cost-meter",
+          ref,
+          className: cn(
+            "inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card px-2.5 py-1",
+            "font-mono text-label",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(Coins, { className: "size-3 text-primary", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground tabular-nums", children: formatUsd(cost) }),
+            budget ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              "/ ",
+              formatUsd(budget)
+            ] }) : null
+          ]
+        }
+      );
+    }
+    const ratio = budget ? Math.max(0, Math.min(1, cost / budget)) : 0;
+    const percent = Math.round(ratio * 100);
+    const overBudget = budget !== void 0 && cost > budget;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "cost-meter",
+        ref,
+        className: cn("grid gap-2 rounded-xl border bg-card p-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: title }),
+            delta ? /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-1 font-mono text-body-sm tabular-nums",
+                  delta.value >= 0 ? "text-warning" : "text-success"
+                ),
+                children: [
+                  delta.value >= 0 ? /* @__PURE__ */ jsx(TrendingUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "size-3", "aria-hidden": "true" }),
+                  delta.value >= 0 ? "+" : "",
+                  formatUsd(Math.abs(delta.value)),
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: delta.period })
+                ]
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-bold font-display text-display-md text-foreground tabular-nums leading-none", children: formatUsd(cost) }),
+            budget !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "font-mono text-body-sm text-muted-foreground", children: [
+              "of ",
+              formatUsd(budget)
+            ] }) : null
+          ] }),
+          budget !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+                role: "progressbar",
+                tabIndex: -1,
+                "aria-valuenow": percent,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-full rounded-full transition-[width,background-color]",
+                      overBudget ? "bg-destructive" : ratio > 0.75 ? "bg-warning" : "bg-primary"
+                    ),
+                    style: { width: `${Math.min(100, percent)}%` }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: [
+              percent,
+              "% of budget ",
+              overBudget ? "\xB7 over!" : "used"
+            ] })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+CostMeter.displayName = "CostMeter";
+
+export { CostMeter };
+//# sourceMappingURL=chunk-VB53UMAL.js.map
+//# sourceMappingURL=chunk-VB53UMAL.js.map

package/dist/chunk-VB53UMAL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/cost-meter/cost-meter.tsx"],"names":[],"mappings":"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","file":"chunk-VB53UMAL.js","sourcesContent":["import { Coins, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\ninterface CostMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Current cost in USD. */\n  cost: number;\n  /** Optional monthly budget; renders progress bar when present. */\n  budget?: number;\n  /** Optional title (e.g. \"This session\", \"Monthly\"). */\n  title?: ReactNode;\n  /** Optional delta vs previous period. */\n  delta?: { value: number; period: string };\n  /** Compact mode — single-line summary. */\n  compact?: boolean;\n}\n\nconst formatUsd = (n: number) =>\n  n >= 100 ? `$${n.toFixed(0)}` : n >= 10 ? `$${n.toFixed(1)}` : `$${n.toFixed(2)}`;\n\n/**\n * CostMeter — gauge for token spend. Two visuals:\n *   - card: title + big number + optional progress bar + optional delta.\n *   - compact: chip \"Coins $4.20\" for nav bars.\n */\nconst CostMeter = forwardRef<HTMLDivElement, CostMeterProps>(\n  ({ className, cost, budget, title = \"Spend\", delta, compact, ...props }, ref) => {\n    if (compact) {\n      return (\n        <div\n          data-slot=\"cost-meter\"\n          ref={ref}\n          className={cn(\n            \"inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card px-2.5 py-1\",\n            \"font-mono text-label\",\n            className,\n          )}\n          {...props}\n        >\n          <Coins className=\"size-3 text-primary\" aria-hidden=\"true\" />\n          <span className=\"text-foreground tabular-nums\">{formatUsd(cost)}</span>\n          {budget ? <span className=\"text-muted-foreground\">/ {formatUsd(budget)}</span> : null}\n        </div>\n      );\n    }\n\n    const ratio = budget ? Math.max(0, Math.min(1, cost / budget)) : 0;\n    const percent = Math.round(ratio * 100);\n    const overBudget = budget !== undefined && cost > budget;\n\n    return (\n      <div\n        data-slot=\"cost-meter\"\n        ref={ref}\n        className={cn(\"grid gap-2 rounded-xl border bg-card p-4\", className)}\n        {...props}\n      >\n        <header className=\"flex items-baseline justify-between\">\n          <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {title}\n          </span>\n          {delta ? (\n            <span\n              className={cn(\n                \"inline-flex items-center gap-1 font-mono text-body-sm tabular-nums\",\n                delta.value >= 0 ? \"text-warning\" : \"text-success\",\n              )}\n            >\n              {delta.value >= 0 ? (\n                <TrendingUp className=\"size-3\" aria-hidden=\"true\" />\n              ) : (\n                <TrendingDown className=\"size-3\" aria-hidden=\"true\" />\n              )}\n              {delta.value >= 0 ? \"+\" : \"\"}\n              {formatUsd(Math.abs(delta.value))}{\" \"}\n              <span className=\"text-muted-foreground\">{delta.period}</span>\n            </span>\n          ) : null}\n        </header>\n        <div className=\"flex items-baseline gap-1.5\">\n          <span className=\"font-bold font-display text-display-md text-foreground tabular-nums leading-none\">\n            {formatUsd(cost)}\n          </span>\n          {budget !== undefined ? (\n            <span className=\"font-mono text-body-sm text-muted-foreground\">\n              of {formatUsd(budget)}\n            </span>\n          ) : null}\n        </div>\n        {budget !== undefined ? (\n          <div className=\"grid gap-1\">\n            <div\n              className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n              role=\"progressbar\"\n              tabIndex={-1}\n              aria-valuenow={percent}\n              aria-valuemin={0}\n              aria-valuemax={100}\n            >\n              <div\n                className={cn(\n                  \"h-full rounded-full transition-[width,background-color]\",\n                  overBudget ? \"bg-destructive\" : ratio > 0.75 ? \"bg-warning\" : \"bg-primary\",\n                )}\n                style={{ width: `${Math.min(100, percent)}%` }}\n              />\n            </div>\n            <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n              {percent}% of budget {overBudget ? \"· over!\" : \"used\"}\n            </span>\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nCostMeter.displayName = \"CostMeter\";\n\nexport { CostMeter };\n"]}

package/dist/chunk-VBEMLZGX.js

@@ -0,0 +1,86 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { TrendingDown, TrendingUp } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MetricsPanel = forwardRef(
+  ({ className, title, description, metrics, columns, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "metrics-panel",
+      ref,
+      className: cn("rounded-xl border bg-card p-5 shadow-sm", className),
+      ...props,
+      children: [
+        title || description ? /* @__PURE__ */ jsxs("header", { className: "mb-4 grid gap-0.5", children: [
+          title ? /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: description }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid gap-4",
+            style: {
+              gridTemplateColumns: columns ? `repeat(${columns}, minmax(0, 1fr))` : "repeat(auto-fit, minmax(180px, 1fr))"
+            },
+            children: metrics.map((m) => /* @__PURE__ */ jsx(Tile, { metric: m }, m.label))
+          }
+        )
+      ]
+    }
+  )
+);
+MetricsPanel.displayName = "MetricsPanel";
+function Tile({ metric }) {
+  const interactive = metric.onClick !== void 0;
+  const Tag = interactive ? "button" : "div";
+  const ariaLabel = interactive ? metric.actionLabel ?? `View ${metric.label} details` : void 0;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      type: interactive ? "button" : void 0,
+      onClick: metric.onClick,
+      "aria-label": ariaLabel,
+      className: cn(
+        "flex flex-col gap-2 rounded-lg border border-border/30 bg-muted/30 p-4 text-left",
+        "transition-colors duration-base ease-out-soft",
+        interactive && "hover:border-primary/40 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-sans text-label-caps text-muted-foreground uppercase", children: metric.label }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-bold font-display text-display-md tabular-nums leading-none", children: metric.value }),
+          metric.unit ? /* @__PURE__ */ jsx("span", { className: "font-mono text-body-sm text-muted-foreground", children: metric.unit }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          metric.delta ? /* @__PURE__ */ jsx(Delta, { metric }) : null,
+          metric.sparkline && metric.sparkline.length > 0 ? /* @__PURE__ */ jsx(Sparkline, { values: metric.sparkline }) : null
+        ] })
+      ]
+    }
+  );
+}
+function Delta({ metric }) {
+  const tone = metric.deltaGood === void 0 ? "text-muted-foreground" : metric.deltaGood ? "text-success" : "text-destructive";
+  const Icon = metric.deltaGood === false ? TrendingDown : TrendingUp;
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1 font-mono text-body-sm", tone), children: [
+    /* @__PURE__ */ jsx(Icon, { className: "size-3" }),
+    " ",
+    metric.delta
+  ] });
+}
+function Sparkline({ values }) {
+  const clamped = values.map((v) => Math.max(0, Math.min(1, v)));
+  return /* @__PURE__ */ jsx("span", { className: "ml-auto flex h-6 items-end gap-[2px]", "aria-hidden": "true", children: clamped.map((v, idx) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "w-[3px] rounded-sm bg-primary/60",
+      style: { height: `${Math.max(8, v * 100)}%` }
+    },
+    idx
+  )) });
+}
+
+export { MetricsPanel };
+//# sourceMappingURL=chunk-VBEMLZGX.js.map
+//# sourceMappingURL=chunk-VBEMLZGX.js.map

package/dist/chunk-VBEMLZGX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/metrics-panel/metrics-panel.tsx"],"names":[],"mappings":"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","file":"chunk-VBEMLZGX.js","sourcesContent":["import { TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport interface Metric {\n  /**\n   * Short label, e.g. \"Requests/s\", \"p95 latency\", \"Error rate\".\n   */\n  label: string;\n  /**\n   * Pre-formatted value string, e.g. \"1.2k\", \"182ms\", \"0.03%\".\n   * Consumer formats; the component does not parse.\n   */\n  value: string;\n  /**\n   * Optional unit suffix appended after value with .9 opacity.\n   */\n  unit?: string;\n  /**\n   * Optional change vs comparison period, e.g. \"+12%\", \"-4ms\", \"+0.01pp\".\n   */\n  delta?: string;\n  /**\n   * If true, delta is \"good\" (success color); if false, \"bad\" (destructive).\n   * If omitted, delta is rendered in muted (neutral).\n   *\n   * Caller decides semantics — \"more requests\" is good but \"more errors\" is bad.\n   */\n  deltaGood?: boolean;\n  /**\n   * Optional sparkline data, 0..1 normalized. Consumer is responsible for normalization.\n   */\n  sparkline?: number[];\n  /**\n   * Optional onClick to drill into the metric.\n   */\n  onClick?: () => void;\n  /**\n   * Optional override for the clickable tile's accessible name. When the\n   * tile is interactive (`onClick` set), defaults to `View <label> details`.\n   * Has no effect when `onClick` is absent (tile is rendered as a non-link\n   * `<div>` with no button semantics). T4.3.\n   */\n  actionLabel?: string;\n}\n\ninterface MetricsPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  description?: ReactNode;\n  metrics: Metric[];\n  /**\n   * Grid columns. Defaults to auto-fit ~180px min.\n   */\n  columns?: number;\n}\n\n/**\n * MetricsPanel — grid of metric tiles for observability dashboards.\n *\n * Visual: each tile is a soft surface with a big value (font-display),\n * label uppercase muted, optional delta with arrow icon + tone color,\n * optional CSS-only sparkline drawn as flexed bars.\n *\n * No external chart lib — keeps the registry copy-pasteable.\n */\nconst MetricsPanel = forwardRef<HTMLDivElement, MetricsPanelProps>(\n  ({ className, title, description, metrics, columns, ...props }, ref) => (\n    <div\n      data-slot=\"metrics-panel\"\n      ref={ref}\n      className={cn(\"rounded-xl border bg-card p-5 shadow-sm\", className)}\n      {...props}\n    >\n      {title || description ? (\n        <header className=\"mb-4 grid gap-0.5\">\n          {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : null}\n          {description ? <p className=\"text-body-sm text-muted-foreground\">{description}</p> : null}\n        </header>\n      ) : null}\n      <div\n        className=\"grid gap-4\"\n        style={{\n          gridTemplateColumns: columns\n            ? `repeat(${columns}, minmax(0, 1fr))`\n            : \"repeat(auto-fit, minmax(180px, 1fr))\",\n        }}\n      >\n        {metrics.map((m) => (\n          <Tile key={m.label} metric={m} />\n        ))}\n      </div>\n    </div>\n  ),\n);\nMetricsPanel.displayName = \"MetricsPanel\";\n\nfunction Tile({ metric }: { metric: Metric }) {\n  const interactive = metric.onClick !== undefined;\n  const Tag = interactive ? \"button\" : \"div\";\n  // T4.3 (Code Issue 3): clickable tiles need an explicit accessible name\n  // so AT users hear \"View Requests/s details, button\" instead of just\n  // the spoken value cluster. Falls back to metric.actionLabel when the\n  // caller wants custom text (e.g., \"Drill into requests\").\n  const ariaLabel = interactive\n    ? (metric.actionLabel ?? `View ${metric.label} details`)\n    : undefined;\n  return (\n    <Tag\n      type={interactive ? \"button\" : undefined}\n      onClick={metric.onClick}\n      aria-label={ariaLabel}\n      className={cn(\n        \"flex flex-col gap-2 rounded-lg border border-border/30 bg-muted/30 p-4 text-left\",\n        \"transition-colors duration-base ease-out-soft\",\n        interactive &&\n          \"hover:border-primary/40 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n      )}\n    >\n      <span className=\"font-sans text-label-caps text-muted-foreground uppercase\">\n        {metric.label}\n      </span>\n      <div className=\"flex items-baseline gap-1.5\">\n        <span className=\"font-bold font-display text-display-md tabular-nums leading-none\">\n          {metric.value}\n        </span>\n        {metric.unit ? (\n          <span className=\"font-mono text-body-sm text-muted-foreground\">{metric.unit}</span>\n        ) : null}\n      </div>\n      <div className=\"flex items-center gap-2\">\n        {metric.delta ? <Delta metric={metric} /> : null}\n        {metric.sparkline && metric.sparkline.length > 0 ? (\n          <Sparkline values={metric.sparkline} />\n        ) : null}\n      </div>\n    </Tag>\n  );\n}\n\nfunction Delta({ metric }: { metric: Metric }) {\n  const tone =\n    metric.deltaGood === undefined\n      ? \"text-muted-foreground\"\n      : metric.deltaGood\n        ? \"text-success\"\n        : \"text-destructive\";\n  const Icon = metric.deltaGood === false ? TrendingDown : TrendingUp;\n  return (\n    <span className={cn(\"inline-flex items-center gap-1 font-mono text-body-sm\", tone)}>\n      <Icon className=\"size-3\" /> {metric.delta}\n    </span>\n  );\n}\n\nfunction Sparkline({ values }: { values: number[] }) {\n  const clamped = values.map((v) => Math.max(0, Math.min(1, v)));\n  return (\n    <span className=\"ml-auto flex h-6 items-end gap-[2px]\" aria-hidden=\"true\">\n      {clamped.map((v, idx) => (\n        <span\n          // biome-ignore lint/suspicious/noArrayIndexKey: positional, values are not stable identifiers\n          key={idx}\n          className=\"w-[3px] rounded-sm bg-primary/60\"\n          style={{ height: `${Math.max(8, v * 100)}%` }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport { MetricsPanel };\n"]}

package/dist/chunk-VBQFE5RV.js

@@ -0,0 +1,92 @@
+"use client";
+import { Dialog } from './chunk-CSEGVTKO.js';
+import { Button } from './chunk-25KBUQEQ.js';
+import { ShieldAlert, FolderOpen, AlertTriangle } from 'lucide-react';
+import { useRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var defaultOperationLabels = {
+  read: "read",
+  write: "edit",
+  delete: "permanently delete"
+};
+var defaultLabels = {
+  cancel: "Cancel",
+  always: "Always allow",
+  allow: "Allow once",
+  requestedOps: "Requested operations:"
+};
+function PermissionModal({
+  open,
+  onOpenChange,
+  request,
+  onDecide,
+  title,
+  description,
+  operationLabels,
+  labels
+}) {
+  const opLabels = { ...defaultOperationLabels, ...operationLabels };
+  const opsList = request.operations.map((op) => opLabels[op]).join(", ");
+  const text = { ...defaultLabels, ...labels };
+  const decidedRef = useRef(false);
+  function handleDecide(decision) {
+    decidedRef.current = true;
+    onDecide(decision);
+  }
+  function handleOpenChange(next) {
+    const wasDecided = decidedRef.current;
+    decidedRef.current = false;
+    if (!next && !wasDecided) {
+      onDecide("denied");
+    }
+    onOpenChange(next);
+  }
+  const defaultTitle = /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(ShieldAlert, { className: "size-5 text-warning", "aria-hidden": "true" }),
+    "Allow Theo to ",
+    opsList,
+    " files in",
+    " ",
+    /* @__PURE__ */ jsx("code", { className: "rounded-md bg-muted px-1.5 py-0.5 font-mono text-code-md text-primary", children: request.path }),
+    "?"
+  ] });
+  const defaultDescription = /* @__PURE__ */ jsxs(Fragment, { children: [
+    "This includes all files and subfolders. Theo will be able to ",
+    opsList,
+    " and may share the contents with connected third-party tools. Be careful when exposing confidential information."
+  ] });
+  return /* @__PURE__ */ jsx(Dialog, { "data-slot": "permission-modal", open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Content, { className: "max-w-xl", children: [
+    /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+      /* @__PURE__ */ jsx(Dialog.Title, { children: title ?? defaultTitle }),
+      /* @__PURE__ */ jsx(Dialog.Description, { children: description ?? defaultDescription })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 rounded-md border border-border/40 bg-muted/40 p-3", children: [
+      /* @__PURE__ */ jsx(
+        FolderOpen,
+        {
+          className: "mt-0.5 size-4 shrink-0 text-muted-foreground",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-mono text-code-sm text-foreground", children: request.path }),
+        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 font-sans text-label text-warning", children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3", "aria-hidden": "true" }),
+          text.requestedOps,
+          " ",
+          opsList
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => handleDecide("denied"), children: text.cancel }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => handleDecide("always_allowed"), children: text.always }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => handleDecide("allowed_once"), children: text.allow })
+    ] })
+  ] }) });
+}
+
+export { PermissionModal };
+//# sourceMappingURL=chunk-VBQFE5RV.js.map
+//# sourceMappingURL=chunk-VBQFE5RV.js.map

package/dist/chunk-VBQFE5RV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/permission-modal/permission-modal.tsx"],"names":[],"mappings":"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","file":"chunk-VBQFE5RV.js","sourcesContent":["\"use client\";\n\nimport { AlertTriangle, FolderOpen, ShieldAlert } from \"lucide-react\";\nimport { useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type {\n  PermissionDecision,\n  PermissionOperation,\n  PermissionRequest,\n} from \"../../../types/permission.js\";\nimport { Button } from \"../../primitives/button/index.js\";\nimport { Dialog } from \"../../primitives/dialog/index.js\";\n\n/**\n * Friendly operation labels used by the default copy. Override with the\n * `operationLabels` prop to localize or rephrase per project.\n */\nexport const defaultOperationLabels: Record<PermissionOperation, string> = {\n  read: \"read\",\n  write: \"edit\",\n  delete: \"permanently delete\",\n};\n\ninterface PermissionModalLabels {\n  /** \"Cancel\" button. */\n  cancel: ReactNode;\n  /** \"Always allow\" tertiary button. */\n  always: ReactNode;\n  /** \"Allow once\" primary button. */\n  allow: ReactNode;\n  /** Inline label rendered before the operation list inside the body card. */\n  requestedOps: ReactNode;\n}\n\nconst defaultLabels: PermissionModalLabels = {\n  cancel: \"Cancel\",\n  always: \"Always allow\",\n  allow: \"Allow once\",\n  requestedOps: \"Requested operations:\",\n};\n\ninterface PermissionModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  request: PermissionRequest;\n  /**\n   * Fires when the user picks a decision. The modal does NOT auto-close;\n   * caller decides whether the decision should dismiss the modal.\n   */\n  onDecide: (decision: PermissionDecision) => void;\n  /** Override the modal title. Defaults to \"Allow Theo to {ops} files in {path}?\". */\n  title?: ReactNode;\n  /** Override the modal description (body lead text). */\n  description?: ReactNode;\n  /** Override the verb used for each operation in the default copy. */\n  operationLabels?: Partial<Record<PermissionOperation, string>>;\n  /** Override button text + inline labels. Useful for i18n. */\n  labels?: Partial<PermissionModalLabels>;\n}\n\n/**\n * PermissionModal — local-files access prompt built on Dialog.\n *\n * Three actions: Cancel (denied), Always allow, Allow once. Per WIREMOCKS §5,\n * the path is shown in the title (not hidden in body) and destructive\n * operations are listed inline.\n *\n * All visible text can be overridden via `title`, `description`,\n * `operationLabels`, and `labels`. Defaults are English; pass overrides for\n * other locales.\n */\nfunction PermissionModal({\n  open,\n  onOpenChange,\n  request,\n  onDecide,\n  title,\n  description,\n  operationLabels,\n  labels,\n}: PermissionModalProps) {\n  const opLabels = { ...defaultOperationLabels, ...operationLabels };\n  const opsList = request.operations.map((op) => opLabels[op]).join(\", \");\n  const text = { ...defaultLabels, ...labels };\n\n  // T4.4 (Code Issue 4): Esc / overlay-click previously fired onOpenChange(false)\n  // but never onDecide — users saw \"Cancel\" semantics, app saw silent dismissal.\n  // Track whether an explicit button decision happened; if the dialog closes\n  // without one, treat it as denied. decidedRef must reset on every fresh open\n  // so a rapid close-then-open doesn't carry state forward.\n  const decidedRef = useRef(false);\n  function handleDecide(decision: PermissionDecision) {\n    decidedRef.current = true;\n    onDecide(decision);\n  }\n  function handleOpenChange(next: boolean) {\n    const wasDecided = decidedRef.current;\n    // Reset BEFORE invoking onDecide so a re-open within the same tick starts\n    // clean. Edge case from SF-6: rapid toggle could leave decidedRef=true.\n    decidedRef.current = false;\n    if (!next && !wasDecided) {\n      onDecide(\"denied\");\n    }\n    onOpenChange(next);\n  }\n\n  const defaultTitle = (\n    <span className=\"flex items-center gap-2\">\n      <ShieldAlert className=\"size-5 text-warning\" aria-hidden=\"true\" />\n      Allow Theo to {opsList} files in{\" \"}\n      <code className=\"rounded-md bg-muted px-1.5 py-0.5 font-mono text-code-md text-primary\">\n        {request.path}\n      </code>\n      ?\n    </span>\n  );\n\n  const defaultDescription = (\n    <>\n      This includes all files and subfolders. Theo will be able to {opsList} and may share the\n      contents with connected third-party tools. Be careful when exposing confidential information.\n    </>\n  );\n\n  return (\n    <Dialog data-slot=\"permission-modal\" open={open} onOpenChange={handleOpenChange}>\n      <Dialog.Content className=\"max-w-xl\">\n        <Dialog.Header>\n          <Dialog.Title>{title ?? defaultTitle}</Dialog.Title>\n          <Dialog.Description>{description ?? defaultDescription}</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body>\n          <div className=\"flex items-start gap-3 rounded-md border border-border/40 bg-muted/40 p-3\">\n            <FolderOpen\n              className=\"mt-0.5 size-4 shrink-0 text-muted-foreground\"\n              aria-hidden=\"true\"\n            />\n            <div className=\"grid gap-1\">\n              <p className=\"font-mono text-code-sm text-foreground\">{request.path}</p>\n              <p className=\"flex items-center gap-1.5 font-sans text-label text-warning\">\n                <AlertTriangle className=\"size-3\" aria-hidden=\"true\" />\n                {text.requestedOps} {opsList}\n              </p>\n            </div>\n          </div>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Button variant=\"secondary\" onClick={() => handleDecide(\"denied\")}>\n            {text.cancel}\n          </Button>\n          <Button variant=\"ghost\" onClick={() => handleDecide(\"always_allowed\")}>\n            {text.always}\n          </Button>\n          <Button onClick={() => handleDecide(\"allowed_once\")}>{text.allow}</Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n\nexport { PermissionModal };\n"]}

package/dist/chunk-VHK2OUCW.js

@@ -0,0 +1,38 @@
+import { CopyButton } from './chunk-Z6HZMGO2.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CodeBlock = forwardRef(
+  ({ className, code, language: _language, terminal, copyable, caption, ...props }, ref) => {
+    const lines = code.split(/\r?\n/);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "code-block",
+        ref,
+        className: cn(
+          "relative rounded-lg border border-border/40 bg-muted/40 font-mono text-body-sm",
+          className
+        ),
+        ...props,
+        children: [
+          caption !== void 0 ? /* @__PURE__ */ jsx("div", { className: "border-border/40 border-b px-3 py-1.5 font-sans text-label text-muted-foreground", children: caption }) : null,
+          copyable ? /* @__PURE__ */ jsx(CopyButton, { value: code, "aria-label": "Copy code", className: "absolute top-2 right-2" }) : null,
+          /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-3 text-foreground", children: terminal ? /* @__PURE__ */ jsx("code", { children: lines.map((line, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: code lines are positional; reorder requires consumer recompute.
+            /* @__PURE__ */ jsxs("span", { className: "block whitespace-pre", children: [
+              /* @__PURE__ */ jsx("span", { className: "select-none text-muted-foreground", children: "$ " }),
+              line
+            ] }, i)
+          )) }) : /* @__PURE__ */ jsx("code", { children: code }) })
+        ]
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+
+export { CodeBlock };
+//# sourceMappingURL=chunk-VHK2OUCW.js.map
+//# sourceMappingURL=chunk-VHK2OUCW.js.map

package/dist/chunk-VHK2OUCW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/code-block/code-block.tsx"],"names":[],"mappings":";;;;;AAgCA,IAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAC,EAAE,SAAA,EAAW,IAAA,EAAM,QAAA,EAAU,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,OAAA,EAAS,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACxF,IAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,KAAA,CAAM,OAAO,CAAA;AAEhC,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,YAAA;AAAA,QACV,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,gFAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,OAAA,KAAY,yBACX,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kFAAA,EACZ,mBACH,CAAA,GACE,IAAA;AAAA,UACH,QAAA,uBACE,UAAA,EAAA,EAAW,KAAA,EAAO,MAAM,YAAA,EAAW,WAAA,EAAY,SAAA,EAAU,wBAAA,EAAyB,CAAA,GACjF,IAAA;AAAA,0BACJ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qCAAA,EACZ,QAAA,EAAA,QAAA,uBACE,MAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA;AAAA;AAAA,4BAEhB,IAAA,CAAC,MAAA,EAAA,EAAa,SAAA,EAAU,sBAAA,EACtB,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EAAoC,QAAA,EAAA,IAAA,EAAE,CAAA;AAAA,cACrD;AAAA,aAAA,EAAA,EAFQ,CAGX;AAAA,WACD,CAAA,EACH,CAAA,mBAEA,GAAA,CAAC,MAAA,EAAA,EAAM,gBAAK,CAAA,EAEhB;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-VHK2OUCW.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { CopyButton } from \"../../primitives/copy-button/index.js\";\n\n/**\n * CodeBlock — terminal command / code snippet surface.\n *\n * Pre-rendered code block with optional terminal \"$ \" prefix per line,\n * optional caption (file name), and optional CopyButton positioned top-right.\n * The CopyButton receives the RAW `code` (without the visual \"$ \" prefix),\n * so consumers paste only the executable command.\n *\n * @example\n *   <CodeBlock code=\"theo deploy\" terminal copyable />\n *   <CodeBlock code={dotenv} caption=\".env.local\" copyable />\n *\n * `language` is reserved for future syntax highlighting (v1: ignored).\n */\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** Code content. Can be multiline. */\n  code: string;\n  /** Language hint (forward-compat; v1 ignored). */\n  language?: string;\n  /** When true, prefix each line with \"$ \" for shell commands. */\n  terminal?: boolean;\n  /** Show inline CopyButton in top-right. */\n  copyable?: boolean;\n  /** Optional caption above block (e.g. \".env.local\"). */\n  caption?: ReactNode;\n}\n\nconst CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(\n  ({ className, code, language: _language, terminal, copyable, caption, ...props }, ref) => {\n    const lines = code.split(/\\r?\\n/);\n\n    return (\n      <div\n        data-slot=\"code-block\"\n        ref={ref}\n        className={cn(\n          \"relative rounded-lg border border-border/40 bg-muted/40 font-mono text-body-sm\",\n          className,\n        )}\n        {...props}\n      >\n        {caption !== undefined ? (\n          <div className=\"border-border/40 border-b px-3 py-1.5 font-sans text-label text-muted-foreground\">\n            {caption}\n          </div>\n        ) : null}\n        {copyable ? (\n          <CopyButton value={code} aria-label=\"Copy code\" className=\"absolute top-2 right-2\" />\n        ) : null}\n        <pre className=\"overflow-x-auto p-3 text-foreground\">\n          {terminal ? (\n            <code>\n              {lines.map((line, i) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: code lines are positional; reorder requires consumer recompute.\n                <span key={i} className=\"block whitespace-pre\">\n                  <span className=\"select-none text-muted-foreground\">$ </span>\n                  {line}\n                </span>\n              ))}\n            </code>\n          ) : (\n            <code>{code}</code>\n          )}\n        </pre>\n      </div>\n    );\n  },\n);\nCodeBlock.displayName = \"CodeBlock\";\n\nexport { CodeBlock };\n"]}