@usetheo/ui 0.13.0 → 0.13.1

package/dist/chunk-OZFUUO2Q.js

@@ -0,0 +1,50 @@
+import { isDev } from './chunk-ML7WLNIK.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var OVERRIDE_OPTIONS = ["off", "minimal", "low", "medium", "high", "xhigh"];
+function inheritedLabel(inheritedValue) {
+  if (inheritedValue === void 0) return "Inherited";
+  return `Inherited: ${inheritedValue}`;
+}
+function overrideLabel(level) {
+  if (level === "off") return "Off";
+  return `Override: ${level}`;
+}
+var ThinkingLevelSelector = forwardRef(
+  ({ value, inheritedValue, onChange, disabled = false, className, "data-testid": dataTestId }, ref) => {
+    if (isDev() && value === "inherited" && inheritedValue === void 0) {
+      console.warn(
+        '[ThinkingLevelSelector] value="inherited" but no inheritedValue prop \u2014 rendering as "Inherited: ?".'
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "select",
+      {
+        "data-slot": "thinking-level-selector",
+        ref,
+        "aria-label": "Thinking level",
+        className: cn(
+          "rounded-md border border-border bg-background px-2 py-1 text-sm",
+          "focus:outline-none focus:ring-2 focus:ring-primary",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        disabled,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        "data-testid": dataTestId ?? "thinking-level-selector",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "inherited", children: inheritedLabel(inheritedValue) }),
+          OVERRIDE_OPTIONS.map((level) => /* @__PURE__ */ jsx("option", { value: level, children: overrideLabel(level) }, level))
+        ]
+      }
+    );
+  }
+);
+ThinkingLevelSelector.displayName = "ThinkingLevelSelector";
+
+export { ThinkingLevelSelector };
+//# sourceMappingURL=chunk-OZFUUO2Q.js.map
+//# sourceMappingURL=chunk-OZFUUO2Q.js.map

package/dist/chunk-OZFUUO2Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/thinking-level-selector/thinking-level-selector.tsx"],"names":[],"mappings":";;;;;AAgCA,IAAM,mBAAoC,CAAC,KAAA,EAAO,WAAW,KAAA,EAAO,QAAA,EAAU,QAAQ,OAAO,CAAA;AAE7F,SAAS,eAAe,cAAA,EAAmD;AACzE,EAAA,IAAI,cAAA,KAAmB,QAAW,OAAO,WAAA;AACzC,EAAA,OAAO,cAAc,cAAc,CAAA,CAAA;AACrC;AAEA,SAAS,cAAc,KAAA,EAA8B;AACnD,EAAA,IAAI,KAAA,KAAU,OAAO,OAAO,KAAA;AAC5B,EAAA,OAAO,aAAa,KAAK,CAAA,CAAA;AAC3B;AAEO,IAAM,qBAAA,GAAwB,UAAA;AAAA,EACnC,CACE,EAAE,KAAA,EAAO,cAAA,EAAgB,QAAA,EAAU,QAAA,GAAW,KAAA,EAAO,SAAA,EAAW,aAAA,EAAe,UAAA,EAAW,EAC1F,GAAA,KACG;AACH,IAAA,IAAI,KAAA,EAAM,IAAK,KAAA,KAAU,WAAA,IAAe,mBAAmB,MAAA,EAAW;AAEpE,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN;AAAA,OACF;AAAA,IACF;AACA,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,GAAA;AAAA,QACA,YAAA,EAAW,gBAAA;AAAA,QACX,SAAA,EAAW,EAAA;AAAA,UACT,iEAAA;AAAA,UACA,oDAAA;AAAA,UACA,QAAA,IAAY,+BAAA;AAAA,UACZ;AAAA,SACF;AAAA,QACA,QAAA;AAAA,QACA,KAAA;AAAA,QACA,UAAU,CAAC,CAAA,KAAM,QAAA,CAAS,CAAA,CAAE,OAAO,KAAiC,CAAA;AAAA,QACpE,eAAa,UAAA,IAAc,yBAAA;AAAA,QAE3B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,WAAA,EAAa,QAAA,EAAA,cAAA,CAAe,cAAc,CAAA,EAAE,CAAA;AAAA,UACzD,gBAAA,CAAiB,GAAA,CAAI,CAAC,KAAA,qBACrB,GAAA,CAAC,QAAA,EAAA,EAAmB,KAAA,EAAO,KAAA,EACxB,QAAA,EAAA,aAAA,CAAc,KAAK,CAAA,EAAA,EADT,KAEb,CACD;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AACA,qBAAA,CAAsB,WAAA,GAAc,uBAAA","file":"chunk-OZFUUO2Q.js","sourcesContent":["import { forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\nimport { isDev } from \"../../../lib/env.js\";\n\n/**\n * ThinkingLevelSelector — multi-state combobox for LLM reasoning budget.\n *\n * Mirrors the OpenClaw Control UI thinking selector. Values follow the SDK's\n * `Agent.thinking` parameter (\"minimal\" | \"low\" | \"medium\" | \"high\" | \"xhigh\")\n * plus a sentinel \"off\" and the special \"inherited\" mode that means \"use the\n * value resolved by the parent agent/session\".\n *\n * Pure UI primitive. No backend dependency. Consumer wires `value` from agent\n * state and persists `onChange` selections wherever it pleases.\n *\n * Phase 1 of `theokit-ui-parity-plan.md` (T1.1).\n */\n\nexport type ThinkingLevel = \"off\" | \"minimal\" | \"low\" | \"medium\" | \"high\" | \"xhigh\";\n\nexport type ThinkingLevelOrInherited = ThinkingLevel | \"inherited\";\n\nexport interface ThinkingLevelSelectorProps {\n  value: ThinkingLevelOrInherited;\n  inheritedValue?: ThinkingLevel;\n  onChange: (value: ThinkingLevelOrInherited) => void;\n  disabled?: boolean;\n  className?: string;\n  \"data-testid\"?: string;\n}\n\nconst OVERRIDE_OPTIONS: ThinkingLevel[] = [\"off\", \"minimal\", \"low\", \"medium\", \"high\", \"xhigh\"];\n\nfunction inheritedLabel(inheritedValue: ThinkingLevel | undefined): string {\n  if (inheritedValue === undefined) return \"Inherited\";\n  return `Inherited: ${inheritedValue}`;\n}\n\nfunction overrideLabel(level: ThinkingLevel): string {\n  if (level === \"off\") return \"Off\";\n  return `Override: ${level}`;\n}\n\nexport const ThinkingLevelSelector = forwardRef<HTMLSelectElement, ThinkingLevelSelectorProps>(\n  (\n    { value, inheritedValue, onChange, disabled = false, className, \"data-testid\": dataTestId },\n    ref,\n  ) => {\n    if (isDev() && value === \"inherited\" && inheritedValue === undefined) {\n      // biome-ignore lint/suspicious/noConsole: dev-only warning when caller passes value=\"inherited\" without inheritedValue\n      console.warn(\n        '[ThinkingLevelSelector] value=\"inherited\" but no inheritedValue prop — rendering as \"Inherited: ?\".',\n      );\n    }\n    return (\n      <select\n        data-slot=\"thinking-level-selector\"\n        ref={ref}\n        aria-label=\"Thinking level\"\n        className={cn(\n          \"rounded-md border border-border bg-background px-2 py-1 text-sm\",\n          \"focus:outline-none focus:ring-2 focus:ring-primary\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        disabled={disabled}\n        value={value}\n        onChange={(e) => onChange(e.target.value as ThinkingLevelOrInherited)}\n        data-testid={dataTestId ?? \"thinking-level-selector\"}\n      >\n        <option value=\"inherited\">{inheritedLabel(inheritedValue)}</option>\n        {OVERRIDE_OPTIONS.map((level) => (\n          <option key={level} value={level}>\n            {overrideLabel(level)}\n          </option>\n        ))}\n      </select>\n    );\n  },\n);\nThinkingLevelSelector.displayName = \"ThinkingLevelSelector\";\n"]}

package/dist/chunk-P44UAK45.js

@@ -0,0 +1,115 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { Clock, Play, Square, Trash2 } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var STATUS_CONFIG = {
+  idle: { label: "Scheduled", class: "border-success/40 bg-success/10 text-success" },
+  running: {
+    label: "Running",
+    class: "border-primary/40 bg-primary/10 text-primary animate-pulse"
+  },
+  failed: {
+    label: "Last run failed",
+    class: "border-destructive/40 bg-destructive/10 text-destructive"
+  },
+  disabled: { label: "Disabled", class: "border-border/40 bg-muted text-muted-foreground" }
+};
+var CronJobCard = forwardRef(
+  ({ className, job, onRunNow, onToggle, onRemove, ...props }, ref) => {
+    const cfg = STATUS_CONFIG[job.status];
+    const enabled = job.status !== "disabled";
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "data-slot": "cron-job-card",
+        ref,
+        className: cn(
+          "grid gap-3 rounded-xl border bg-card p-4",
+          job.status === "disabled" && "opacity-70",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("h4", { className: "font-display text-title-md tracking-tight", children: job.name }),
+              /* @__PURE__ */ jsxs("p", { className: "mt-0.5 inline-flex items-center gap-2 font-mono text-code-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(Clock, { className: "size-3", "aria-hidden": "true" }),
+                " ",
+                job.schedule
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center rounded-full border px-2.5 py-0.5",
+                  "font-mono text-label uppercase tracking-wider",
+                  cfg.class
+                ),
+                children: cfg.label
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "line-clamp-2 rounded-md bg-muted/60 px-3 py-2 font-mono text-code-sm text-foreground", children: job.prompt }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 font-mono text-label text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "last:" }),
+              " ",
+              job.lastRun ?? "never"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "next:" }),
+              " ",
+              job.nextRun ?? "\u2014"
+            ] })
+          ] }),
+          job.lastResult ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: job.lastResult }) : null,
+          /* @__PURE__ */ jsxs("footer", { className: "flex items-center justify-end gap-1.5", children: [
+            onRunNow ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onRunNow(job.id),
+                className: "inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: [
+                  /* @__PURE__ */ jsx(Play, { className: "size-3" }),
+                  " Run now"
+                ]
+              }
+            ) : null,
+            onToggle ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onToggle(job.id, !enabled),
+                className: "inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: [
+                  /* @__PURE__ */ jsx(Square, { className: "size-3" }),
+                  " ",
+                  enabled ? "Pause" : "Enable"
+                ]
+              }
+            ) : null,
+            onRemove ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onRemove(job.id),
+                "aria-label": `Remove ${job.name}`,
+                className: "rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+CronJobCard.displayName = "CronJobCard";
+
+export { CronJobCard };
+//# sourceMappingURL=chunk-P44UAK45.js.map
+//# sourceMappingURL=chunk-P44UAK45.js.map

package/dist/chunk-P44UAK45.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/cron-job-card/cron-job-card.tsx"],"names":[],"mappings":"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","file":"chunk-P44UAK45.js","sourcesContent":["import { Clock, Play, Square, Trash2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport type CronJobStatus = \"idle\" | \"running\" | \"failed\" | \"disabled\";\n\nexport interface CronJob {\n  id: string;\n  /** Human-readable job name. */\n  name: string;\n  /** Cron expression — e.g. every 4 hours. */\n  schedule: string;\n  /** What gets run (prompt or command). */\n  prompt: string;\n  status: CronJobStatus;\n  /** ISO/string timestamp of last run. */\n  lastRun?: string;\n  /** ISO/string timestamp of next run. */\n  nextRun?: string;\n  /** Optional last-run result line. */\n  lastResult?: ReactNode;\n}\n\ninterface CronJobCardProps extends Omit<HTMLAttributes<HTMLElement>, \"onToggle\"> {\n  job: CronJob;\n  onRunNow?: (id: string) => void;\n  onToggle?: (id: string, enabled: boolean) => void;\n  onRemove?: (id: string) => void;\n}\n\nconst STATUS_CONFIG: Record<CronJobStatus, { label: string; class: string }> = {\n  idle: { label: \"Scheduled\", class: \"border-success/40 bg-success/10 text-success\" },\n  running: {\n    label: \"Running\",\n    class: \"border-primary/40 bg-primary/10 text-primary animate-pulse\",\n  },\n  failed: {\n    label: \"Last run failed\",\n    class: \"border-destructive/40 bg-destructive/10 text-destructive\",\n  },\n  disabled: { label: \"Disabled\", class: \"border-border/40 bg-muted text-muted-foreground\" },\n};\n\n/**\n * CronJobCard — one scheduled agent job. Shows cron expression, prompt,\n * status, last/next run. Inline actions: run now, pause, delete.\n */\nconst CronJobCard = forwardRef<HTMLElement, CronJobCardProps>(\n  ({ className, job, onRunNow, onToggle, onRemove, ...props }, ref) => {\n    const cfg = STATUS_CONFIG[job.status];\n    const enabled = job.status !== \"disabled\";\n    return (\n      <article\n        data-slot=\"cron-job-card\"\n        ref={ref}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4\",\n          job.status === \"disabled\" && \"opacity-70\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h4 className=\"font-display text-title-md tracking-tight\">{job.name}</h4>\n            <p className=\"mt-0.5 inline-flex items-center gap-2 font-mono text-code-sm text-muted-foreground\">\n              <Clock className=\"size-3\" aria-hidden=\"true\" /> {job.schedule}\n            </p>\n          </div>\n          <span\n            className={cn(\n              \"inline-flex items-center rounded-full border px-2.5 py-0.5\",\n              \"font-mono text-label uppercase tracking-wider\",\n              cfg.class,\n            )}\n          >\n            {cfg.label}\n          </span>\n        </header>\n\n        <p className=\"line-clamp-2 rounded-md bg-muted/60 px-3 py-2 font-mono text-code-sm text-foreground\">\n          {job.prompt}\n        </p>\n\n        <div className=\"grid grid-cols-2 gap-3 font-mono text-label text-muted-foreground\">\n          <span>\n            <span className=\"text-muted-foreground/60\">last:</span> {job.lastRun ?? \"never\"}\n          </span>\n          <span>\n            <span className=\"text-muted-foreground/60\">next:</span> {job.nextRun ?? \"—\"}\n          </span>\n        </div>\n\n        {job.lastResult ? (\n          <p className=\"text-body-sm text-muted-foreground\">{job.lastResult}</p>\n        ) : null}\n\n        <footer className=\"flex items-center justify-end gap-1.5\">\n          {onRunNow ? (\n            <button\n              type=\"button\"\n              onClick={() => onRunNow(job.id)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Play className=\"size-3\" /> Run now\n            </button>\n          ) : null}\n          {onToggle ? (\n            <button\n              type=\"button\"\n              onClick={() => onToggle(job.id, !enabled)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Square className=\"size-3\" /> {enabled ? \"Pause\" : \"Enable\"}\n            </button>\n          ) : null}\n          {onRemove ? (\n            <button\n              type=\"button\"\n              onClick={() => onRemove(job.id)}\n              aria-label={`Remove ${job.name}`}\n              className=\"rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Trash2 className=\"size-3.5\" />\n            </button>\n          ) : null}\n        </footer>\n      </article>\n    );\n  },\n);\nCronJobCard.displayName = \"CronJobCard\";\n\nexport { CronJobCard };\n"]}

package/dist/chunk-PJUP4BJD.js

@@ -0,0 +1,116 @@
+"use client";
+import { ChatComposer } from './chunk-PZGUZHI7.js';
+import { MentionMenu } from './chunk-HZ7Z22VW.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TRIGGER_CHARS = ["/", "@", "#"];
+var TRIGGER_RE = /(^|\s)([/@#])([^\s]*)$/;
+function detectTrigger(value) {
+  const match = value.match(TRIGGER_RE);
+  if (!match) return null;
+  const leading = match[1] ?? "";
+  const triggerChar = match[2];
+  const query = match[3] ?? "";
+  if (!TRIGGER_CHARS.includes(triggerChar)) return null;
+  const start = (match.index ?? 0) + leading.length;
+  return { trigger: triggerChar, query, start };
+}
+function resolveItems(source, query) {
+  if (!source) return [];
+  if (typeof source === "function") return source(query);
+  if (!query) return source;
+  const q = query.toLowerCase();
+  return source.filter((item) => {
+    const haystack = `${typeof item.label === "string" ? item.label : ""} ${typeof item.description === "string" ? item.description : ""}`.toLowerCase();
+    return haystack.includes(q);
+  });
+}
+function defaultInsertText(item, trigger) {
+  const label = typeof item.label === "string" ? item.label : "";
+  if (label.startsWith(trigger)) return label;
+  return `${trigger}${label}`;
+}
+function AgentComposer({
+  value,
+  onValueChange,
+  commands,
+  files,
+  memories,
+  resolveInsertText = defaultInsertText,
+  emptyLabels,
+  containerClassName,
+  className,
+  textareaProps,
+  ...chatComposerProps
+}) {
+  const [dismissedAt, setDismissedAt] = useState(null);
+  const detected = useMemo(() => detectTrigger(value), [value]);
+  const isDismissed = detected !== null && dismissedAt === detected.start;
+  const activeTrigger = isDismissed ? null : detected?.trigger ?? null;
+  const query = isDismissed ? "" : detected?.query ?? "";
+  const items = useMemo(() => {
+    if (!activeTrigger || !detected) return [];
+    if (activeTrigger === "/") return resolveItems(commands, query);
+    if (activeTrigger === "@") return resolveItems(files, query);
+    if (activeTrigger === "#") return resolveItems(memories, query);
+    return [];
+  }, [activeTrigger, detected, commands, files, memories, query]);
+  const handleSelect = (item) => {
+    if (!detected) return;
+    const before = value.slice(0, detected.start);
+    const insert = resolveInsertText(item, detected.trigger);
+    onValueChange(`${before}${insert} `);
+    setDismissedAt(null);
+  };
+  const handleClose = () => {
+    if (detected) setDismissedAt(detected.start);
+  };
+  const interceptKeyDown = (e) => {
+    if (activeTrigger) {
+      if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) {
+        if (e.key === "Enter") e.preventDefault();
+        return;
+      }
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      e.currentTarget.form?.requestSubmit();
+    }
+    textareaProps?.onKeyDown?.(e);
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "agent-composer", className: cn("relative", containerClassName), children: [
+    /* @__PURE__ */ jsx(
+      MentionMenu,
+      {
+        open: !!activeTrigger && items !== null,
+        trigger: activeTrigger ?? "/",
+        items,
+        onSelect: handleSelect,
+        onClose: handleClose,
+        emptyLabel: activeTrigger ? emptyLabels?.[activeTrigger] : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChatComposer,
+      {
+        value,
+        onValueChange: (next) => {
+          if (!detectTrigger(next)) setDismissedAt(null);
+          onValueChange(next);
+        },
+        className,
+        textareaProps: {
+          ...textareaProps,
+          onKeyDown: interceptKeyDown
+        },
+        ...chatComposerProps
+      }
+    )
+  ] });
+}
+
+export { AgentComposer };
+//# sourceMappingURL=chunk-PJUP4BJD.js.map
+//# sourceMappingURL=chunk-PJUP4BJD.js.map

package/dist/chunk-PJUP4BJD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/agent-composer/agent-composer.tsx"],"names":[],"mappings":"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","file":"chunk-PJUP4BJD.js","sourcesContent":["\"use client\";\n\nimport { useMemo, useState } from \"react\";\nimport type { ComponentProps, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport {\n  type MentionItem,\n  MentionMenu,\n  type MentionTrigger,\n} from \"../../primitives/mention-menu/index.js\";\nimport { ChatComposer } from \"../chat-composer/chat-composer.js\";\n\n/**\n * AgentComposer — ChatComposer + slash-command / @file / #memory triggers.\n *\n * Wraps ChatComposer and watches the value for three trigger characters:\n *   `/` → slash commands (`/clear`, `/help`, …)\n *   `@` → file references (`@src/components/Foo.tsx`)\n *   `#` → memory entries (`#alignment-grid`)\n *\n * Detection is string-based — no textarea ref required. A trigger is active\n * iff the value ends with a token of the form `[\\s|^]([/@#])[^\\s]*` (i.e. a\n * trigger char preceded by start-of-string or whitespace, with no space\n * after).\n *\n * The consumer provides the candidate items per trigger. On selection the\n * trailing token is replaced with the chosen value plus a trailing space.\n */\n\ntype ItemsProvider = (query: string) => MentionItem[];\n\ninterface AgentComposerProps extends ComponentProps<typeof ChatComposer> {\n  /** Items shown when `/` is the active trigger. */\n  commands?: MentionItem[] | ItemsProvider;\n  /** Items shown when `@` is the active trigger. */\n  files?: MentionItem[] | ItemsProvider;\n  /** Items shown when `#` is the active trigger. */\n  memories?: MentionItem[] | ItemsProvider;\n  /**\n   * What text gets inserted when an item is picked. Defaults to\n   * `${trigger}${item.label}` (assumes `label` is a string). Override to\n   * insert a token different from the visible label (e.g. include path,\n   * id, …).\n   */\n  resolveInsertText?: (item: MentionItem, trigger: MentionTrigger) => string;\n  /** Optional slot for the empty-state copy per trigger. */\n  emptyLabels?: Partial<Record<MentionTrigger, ReactNode>>;\n  /** Outer wrapper className (the relative positioning anchor for the menu). */\n  containerClassName?: string;\n}\n\nconst TRIGGER_CHARS: ReadonlyArray<MentionTrigger> = [\"/\", \"@\", \"#\"];\n\nconst TRIGGER_RE = /(^|\\s)([/@#])([^\\s]*)$/;\n\ninterface DetectedTrigger {\n  trigger: MentionTrigger;\n  query: string;\n  /** Index in the value where the trigger char starts. */\n  start: number;\n}\n\nfunction detectTrigger(value: string): DetectedTrigger | null {\n  const match = value.match(TRIGGER_RE);\n  if (!match) return null;\n  const leading = match[1] ?? \"\";\n  const triggerChar = match[2] as MentionTrigger;\n  const query = match[3] ?? \"\";\n  if (!TRIGGER_CHARS.includes(triggerChar)) return null;\n  // start = position of the trigger char itself\n  const start = (match.index ?? 0) + leading.length;\n  return { trigger: triggerChar, query, start };\n}\n\nfunction resolveItems(\n  source: MentionItem[] | ItemsProvider | undefined,\n  query: string,\n): MentionItem[] {\n  if (!source) return [];\n  if (typeof source === \"function\") return source(query);\n  if (!query) return source;\n  const q = query.toLowerCase();\n  return source.filter((item) => {\n    const haystack = `${typeof item.label === \"string\" ? item.label : \"\"} ${\n      typeof item.description === \"string\" ? item.description : \"\"\n    }`.toLowerCase();\n    return haystack.includes(q);\n  });\n}\n\nfunction defaultInsertText(item: MentionItem, trigger: MentionTrigger): string {\n  const label = typeof item.label === \"string\" ? item.label : \"\";\n  // If the visible label already starts with the trigger char (e.g. \"/clear\"),\n  // use it as-is so we don't end up with \"//clear\".\n  if (label.startsWith(trigger)) return label;\n  return `${trigger}${label}`;\n}\n\nexport function AgentComposer({\n  value,\n  onValueChange,\n  commands,\n  files,\n  memories,\n  resolveInsertText = defaultInsertText,\n  emptyLabels,\n  containerClassName,\n  className,\n  textareaProps,\n  ...chatComposerProps\n}: AgentComposerProps) {\n  // Trigger detection + manual dismiss state.\n  // We honour `dismissed` so the user can Esc the menu and keep typing after\n  // a trigger char without the menu re-appearing.\n  const [dismissedAt, setDismissedAt] = useState<number | null>(null);\n\n  const detected = useMemo(() => detectTrigger(value), [value]);\n  const isDismissed = detected !== null && dismissedAt === detected.start;\n  const activeTrigger = isDismissed ? null : (detected?.trigger ?? null);\n  const query = isDismissed ? \"\" : (detected?.query ?? \"\");\n\n  const items = useMemo(() => {\n    if (!activeTrigger || !detected) return [];\n    if (activeTrigger === \"/\") return resolveItems(commands, query);\n    if (activeTrigger === \"@\") return resolveItems(files, query);\n    if (activeTrigger === \"#\") return resolveItems(memories, query);\n    return [];\n  }, [activeTrigger, detected, commands, files, memories, query]);\n\n  const handleSelect = (item: MentionItem) => {\n    if (!detected) return;\n    const before = value.slice(0, detected.start);\n    const insert = resolveInsertText(item, detected.trigger);\n    onValueChange(`${before}${insert} `);\n    setDismissedAt(null);\n  };\n\n  const handleClose = () => {\n    if (detected) setDismissedAt(detected.start);\n  };\n\n  const interceptKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (activeTrigger) {\n      // Let MentionMenu's global key handler take Arrow/Enter/Esc.\n      if ([\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.key)) {\n        if (e.key === \"Enter\") e.preventDefault(); // also prevent form submit\n        return;\n      }\n    }\n    // Mirror ChatComposer's default Enter-to-submit when menu is closed.\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      (e.currentTarget.form as HTMLFormElement | null)?.requestSubmit();\n    }\n    textareaProps?.onKeyDown?.(e);\n  };\n\n  return (\n    <div data-slot=\"agent-composer\" className={cn(\"relative\", containerClassName)}>\n      <MentionMenu\n        open={!!activeTrigger && items !== null}\n        trigger={(activeTrigger ?? \"/\") as MentionTrigger}\n        items={items}\n        onSelect={handleSelect}\n        onClose={handleClose}\n        emptyLabel={activeTrigger ? emptyLabels?.[activeTrigger] : undefined}\n      />\n      <ChatComposer\n        value={value}\n        onValueChange={(next) => {\n          // If user clears the trigger token, drop the dismissed marker too.\n          if (!detectTrigger(next)) setDismissedAt(null);\n          onValueChange(next);\n        }}\n        className={className}\n        textareaProps={{\n          ...textareaProps,\n          onKeyDown: interceptKeyDown,\n        }}\n        {...chatComposerProps}\n      />\n    </div>\n  );\n}\n"]}

package/dist/chunk-PJWYIOY4.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-PJWYIOY4.js.map
+//# sourceMappingURL=chunk-PJWYIOY4.js.map

package/dist/chunk-PJWYIOY4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-PJWYIOY4.js"}

package/dist/chunk-PVCW4O37.js

@@ -0,0 +1,147 @@
+"use client";
+import { Input } from './chunk-BYUWQ6OP.js';
+import { BadgeWithDot } from './chunk-624AATQZ.js';
+import { isDev } from './chunk-ML7WLNIK.js';
+import { Button } from './chunk-25KBUQEQ.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { Plus, Lock, EyeOff, Eye, Copy, Trash2 } from 'lucide-react';
+import { forwardRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_SCOPES = ["production", "staging", "preview", "all"];
+var EnvVarEditor = forwardRef(
+  ({ className, vars, onAdd, onRemove, scopeOptions = DEFAULT_SCOPES, ...props }, ref) => {
+    const [newKey, setNewKey] = useState("");
+    const [newValue, setNewValue] = useState("");
+    const [newScope, setNewScope] = useState(scopeOptions[0] ?? "production");
+    const submit = () => {
+      const trimmedKey = newKey.trim();
+      if (!trimmedKey) return;
+      onAdd?.({ key: trimmedKey, value: newValue, scope: newScope, masked: true });
+      setNewKey("");
+      setNewValue("");
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "env-var-editor",
+        ref,
+        className: cn("rounded-xl border bg-card p-5 shadow-sm", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("header", { className: "mb-4 flex items-baseline justify-between gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: "Environment variables" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-body-sm text-muted-foreground", children: [
+              vars.length,
+              " ",
+              vars.length === 1 ? "variable" : "variables"
+            ] })
+          ] }) }),
+          onAdd ? /* @__PURE__ */ jsxs(
+            "form",
+            {
+              className: "mb-4 grid grid-cols-[2fr_3fr_auto_auto] gap-2",
+              onSubmit: (e) => {
+                e.preventDefault();
+                submit();
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder: "DATABASE_URL",
+                    value: newKey,
+                    onChange: (e) => setNewKey(e.target.value),
+                    className: "font-mono",
+                    "aria-label": "Variable name"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder: "postgresql://\u2026",
+                    value: newValue,
+                    onChange: (e) => setNewValue(e.target.value),
+                    className: "font-mono",
+                    "aria-label": "Variable value"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    value: newScope,
+                    onChange: (e) => setNewScope(e.target.value),
+                    "aria-label": "Variable scope",
+                    className: cn(
+                      "h-10 rounded-md border border-input bg-card px-3",
+                      "font-sans text-body-sm",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+                    ),
+                    children: scopeOptions.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s }, s))
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Button, { type: "submit", children: [
+                  /* @__PURE__ */ jsx(Plus, {}),
+                  " Add"
+                ] })
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-border/30", children: [
+            vars.map((v) => /* @__PURE__ */ jsx(Row, { entry: v, ...onRemove ? { onRemove } : {} }, v.id)),
+            vars.length === 0 ? /* @__PURE__ */ jsx("li", { className: "py-8 text-center text-body-sm text-muted-foreground", children: "No environment variables yet." }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+EnvVarEditor.displayName = "EnvVarEditor";
+function Row({ entry, onRemove }) {
+  const [revealed, setRevealed] = useState(!entry.masked);
+  const value = revealed ? entry.value : "\u2022".repeat(Math.min(entry.value.length, 12) || 8);
+  const copy = () => {
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      navigator.clipboard.writeText(entry.value).catch((err) => {
+        if (isDev()) {
+          console.warn("[@theokit/ui] EnvVarEditor clipboard write failed:", err);
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("li", { className: "grid grid-cols-[2fr_3fr_auto_auto] items-center gap-3 py-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-code-sm text-foreground", children: entry.key }),
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 truncate font-mono text-code-sm text-muted-foreground", children: [
+      entry.readonly ? /* @__PURE__ */ jsx(Lock, { className: "size-3", "aria-hidden": "true" }) : null,
+      value
+    ] }),
+    /* @__PURE__ */ jsx(BadgeWithDot, { variant: entry.scope === "production" ? "primary" : "default", children: entry.scope ?? "all" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+      entry.masked ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          variant: "ghost",
+          onClick: () => setRevealed((r) => !r),
+          "aria-label": revealed ? "Hide value" : "Reveal value",
+          children: revealed ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(Button, { size: "icon", variant: "ghost", onClick: copy, "aria-label": "Copy value", children: /* @__PURE__ */ jsx(Copy, {}) }),
+      onRemove && !entry.readonly ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          variant: "ghost",
+          onClick: () => onRemove(entry.id),
+          "aria-label": `Remove ${entry.key}`,
+          children: /* @__PURE__ */ jsx(Trash2, {})
+        }
+      ) : null
+    ] })
+  ] });
+}
+
+export { EnvVarEditor };
+//# sourceMappingURL=chunk-PVCW4O37.js.map
+//# sourceMappingURL=chunk-PVCW4O37.js.map

package/dist/chunk-PVCW4O37.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/env-var-editor/env-var-editor.tsx"],"names":[],"mappings":"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","file":"chunk-PVCW4O37.js","sourcesContent":["\"use client\";\n\nimport { Copy, Eye, EyeOff, Lock, Plus, Trash2 } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { isDev } from \"../../../lib/env.js\";\nimport { Badge } from \"../../primitives/badge/index.js\";\nimport { Button } from \"../../primitives/button/index.js\";\nimport { Input } from \"../../primitives/input/index.js\";\n\nexport type EnvScope = \"production\" | \"staging\" | \"preview\" | \"all\" | string;\n\nexport interface EnvVar {\n  id: string;\n  key: string;\n  /**\n   * Secret value. If `masked` is true, value is hidden by default.\n   */\n  value: string;\n  masked?: boolean;\n  scope?: EnvScope;\n  /**\n   * Read-only marker (e.g. system-managed vars like THEO_DEPLOY_ID).\n   */\n  readonly?: boolean;\n}\n\ninterface EnvVarEditorProps extends HTMLAttributes<HTMLDivElement> {\n  vars: EnvVar[];\n  onAdd?: (entry: Omit<EnvVar, \"id\">) => void;\n  onRemove?: (id: string) => void;\n  /**\n   * Available scope options for the add form. Defaults to a sensible PaaS set.\n   */\n  scopeOptions?: EnvScope[];\n}\n\nconst DEFAULT_SCOPES: EnvScope[] = [\"production\", \"staging\", \"preview\", \"all\"];\n\n/**\n * EnvVarEditor — table-like editor for environment variables.\n *\n * Mono font on keys/values, mask toggle on secret values, scope badge,\n * remove + copy actions. Add form sits above the list.\n *\n * Stateless: caller controls the list and reacts to onAdd / onRemove.\n */\nconst EnvVarEditor = forwardRef<HTMLDivElement, EnvVarEditorProps>(\n  ({ className, vars, onAdd, onRemove, scopeOptions = DEFAULT_SCOPES, ...props }, ref) => {\n    const [newKey, setNewKey] = useState(\"\");\n    const [newValue, setNewValue] = useState(\"\");\n    const [newScope, setNewScope] = useState<EnvScope>(scopeOptions[0] ?? \"production\");\n\n    const submit = () => {\n      const trimmedKey = newKey.trim();\n      if (!trimmedKey) return;\n      onAdd?.({ key: trimmedKey, value: newValue, scope: newScope, masked: true });\n      setNewKey(\"\");\n      setNewValue(\"\");\n    };\n\n    return (\n      <div\n        data-slot=\"env-var-editor\"\n        ref={ref}\n        className={cn(\"rounded-xl border bg-card p-5 shadow-sm\", className)}\n        {...props}\n      >\n        <header className=\"mb-4 flex items-baseline justify-between gap-3\">\n          <div>\n            <h3 className=\"font-display text-title-md tracking-tight\">Environment variables</h3>\n            <p className=\"text-body-sm text-muted-foreground\">\n              {vars.length} {vars.length === 1 ? \"variable\" : \"variables\"}\n            </p>\n          </div>\n        </header>\n\n        {onAdd ? (\n          <form\n            className=\"mb-4 grid grid-cols-[2fr_3fr_auto_auto] gap-2\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              submit();\n            }}\n          >\n            <Input\n              placeholder=\"DATABASE_URL\"\n              value={newKey}\n              onChange={(e) => setNewKey(e.target.value)}\n              className=\"font-mono\"\n              aria-label=\"Variable name\"\n            />\n            <Input\n              placeholder=\"postgresql://…\"\n              value={newValue}\n              onChange={(e) => setNewValue(e.target.value)}\n              className=\"font-mono\"\n              aria-label=\"Variable value\"\n            />\n            <select\n              value={newScope}\n              onChange={(e) => setNewScope(e.target.value)}\n              aria-label=\"Variable scope\"\n              className={cn(\n                \"h-10 rounded-md border border-input bg-card px-3\",\n                \"font-sans text-body-sm\",\n                \"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              {scopeOptions.map((s) => (\n                <option key={s} value={s}>\n                  {s}\n                </option>\n              ))}\n            </select>\n            <Button type=\"submit\">\n              <Plus /> Add\n            </Button>\n          </form>\n        ) : null}\n\n        <ul className=\"divide-y divide-border/30\">\n          {vars.map((v) => (\n            <Row key={v.id} entry={v} {...(onRemove ? { onRemove } : {})} />\n          ))}\n          {vars.length === 0 ? (\n            <li className=\"py-8 text-center text-body-sm text-muted-foreground\">\n              No environment variables yet.\n            </li>\n          ) : null}\n        </ul>\n      </div>\n    );\n  },\n);\nEnvVarEditor.displayName = \"EnvVarEditor\";\n\ninterface RowProps {\n  entry: EnvVar;\n  onRemove?: (id: string) => void;\n}\n\nfunction Row({ entry, onRemove }: RowProps) {\n  const [revealed, setRevealed] = useState(!entry.masked);\n\n  const value = revealed ? entry.value : \"•\".repeat(Math.min(entry.value.length, 12) || 8);\n\n  const copy = () => {\n    if (typeof navigator !== \"undefined\" && navigator.clipboard) {\n      navigator.clipboard.writeText(entry.value).catch((err: unknown) => {\n        // T7.6: dev-only warning so engineers see something when clipboard\n        // fails (Safari/Firefox iframe sandbox, document not focused,\n        // Permissions-Policy block). Production stays silent — behavior is\n        // fail-safe (user can still copy manually).\n        if (isDev()) {\n          // biome-ignore lint/suspicious/noConsole: dev-only clipboard diagnostic (T7.6)\n          console.warn(\"[@theokit/ui] EnvVarEditor clipboard write failed:\", err);\n        }\n      });\n    }\n  };\n\n  return (\n    <li className=\"grid grid-cols-[2fr_3fr_auto_auto] items-center gap-3 py-3\">\n      <span className=\"truncate font-mono text-code-sm text-foreground\">{entry.key}</span>\n      <span className=\"flex items-center gap-2 truncate font-mono text-code-sm text-muted-foreground\">\n        {entry.readonly ? <Lock className=\"size-3\" aria-hidden=\"true\" /> : null}\n        {value}\n      </span>\n      <Badge variant={entry.scope === \"production\" ? \"primary\" : \"default\"}>\n        {entry.scope ?? \"all\"}\n      </Badge>\n      <div className=\"flex items-center gap-0.5\">\n        {entry.masked ? (\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => setRevealed((r) => !r)}\n            aria-label={revealed ? \"Hide value\" : \"Reveal value\"}\n          >\n            {revealed ? <EyeOff /> : <Eye />}\n          </Button>\n        ) : null}\n        <Button size=\"icon\" variant=\"ghost\" onClick={copy} aria-label=\"Copy value\">\n          <Copy />\n        </Button>\n        {onRemove && !entry.readonly ? (\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onRemove(entry.id)}\n            aria-label={`Remove ${entry.key}`}\n          >\n            <Trash2 />\n          </Button>\n        ) : null}\n      </div>\n    </li>\n  );\n}\n\nexport { EnvVarEditor };\n"]}

package/dist/chunk-PXT47DRZ.js

@@ -0,0 +1,59 @@
+"use client";
+import { cn } from './chunk-EWDN56AS.js';
+import { Wrench, ChevronRight } from 'lucide-react';
+import { forwardRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ToolCall = forwardRef(
+  ({ className, name, summary, detail, defaultOpen, hideIcon, ...props }, ref) => {
+    const [open, setOpen] = useState(defaultOpen ?? false);
+    const expandable = detail !== void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "tool-call",
+        ref,
+        className: cn("rounded-md border border-border/40 bg-muted/30", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => expandable && setOpen((v) => !v),
+              "aria-expanded": expandable ? open : void 0,
+              disabled: !expandable,
+              className: cn(
+                "flex w-full items-center gap-2 px-3 py-2 text-left",
+                "font-sans text-body-sm text-foreground",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                expandable && "cursor-pointer hover:bg-muted/60"
+              ),
+              children: [
+                !hideIcon ? /* @__PURE__ */ jsx(Wrench, { className: "size-3.5 shrink-0 text-primary", "aria-hidden": "true" }) : null,
+                name ? /* @__PURE__ */ jsx("span", { className: "font-mono text-code-sm text-muted-foreground", children: name }) : null,
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: summary }),
+                expandable ? /* @__PURE__ */ jsx(
+                  ChevronRight,
+                  {
+                    className: cn(
+                      "size-3.5 text-muted-foreground transition-transform",
+                      open && "rotate-90"
+                    ),
+                    "aria-hidden": "true"
+                  }
+                ) : null
+              ]
+            }
+          ),
+          expandable && open ? /* @__PURE__ */ jsx("div", { className: "border-border/40 border-t bg-card px-3 py-2", children: detail }) : null
+        ]
+      }
+    );
+  }
+);
+ToolCall.displayName = "ToolCall";
+
+export { ToolCall };
+//# sourceMappingURL=chunk-PXT47DRZ.js.map
+//# sourceMappingURL=chunk-PXT47DRZ.js.map

package/dist/chunk-PXT47DRZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/tool-call/tool-call.tsx"],"names":[],"mappings":";;;;;AAmCA,IAAM,QAAA,GAAW,UAAA;AAAA,EACf,CAAC,EAAE,SAAA,EAAW,IAAA,EAAM,OAAA,EAAS,MAAA,EAAQ,WAAA,EAAa,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC9E,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAA,CAAS,eAAe,KAAK,CAAA;AACrD,IAAA,MAAM,aAAa,MAAA,KAAW,MAAA;AAC9B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,WAAA;AAAA,QACV,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,gDAAA,EAAkD,SAAS,CAAA;AAAA,QACxE,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,SAAS,MAAM,UAAA,IAAc,QAAQ,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAAA,cAC9C,eAAA,EAAe,aAAa,IAAA,GAAO,MAAA;AAAA,cACnC,UAAU,CAAC,UAAA;AAAA,cACX,SAAA,EAAW,EAAA;AAAA,gBACT,oDAAA;AAAA,gBACA,wCAAA;AAAA,gBACA,0IAAA;AAAA,gBACA,UAAA,IAAc;AAAA,eAChB;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,CAAC,2BACA,GAAA,CAAC,MAAA,EAAA,EAAO,WAAU,gCAAA,EAAiC,aAAA,EAAY,QAAO,CAAA,GACpE,IAAA;AAAA,gBACH,uBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8CAAA,EAAgD,gBAAK,CAAA,GACnE,IAAA;AAAA,gCACJ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EAAmB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,gBAC1C,UAAA,mBACC,GAAA;AAAA,kBAAC,YAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,EAAA;AAAA,sBACT,qDAAA;AAAA,sBACA,IAAA,IAAQ;AAAA,qBACV;AAAA,oBACA,aAAA,EAAY;AAAA;AAAA,iBACd,GACE;AAAA;AAAA;AAAA,WACN;AAAA,UACC,cAAc,IAAA,mBACb,GAAA,CAAC,SAAI,SAAA,EAAU,6CAAA,EAA+C,kBAAO,CAAA,GACnE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-PXT47DRZ.js","sourcesContent":["\"use client\";\n\nimport { ChevronRight, Wrench } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\ninterface ToolCallProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tool name e.g. \"bash\", \"read_file\", \"edit_file\". */\n  name?: string;\n  /**\n   * Summary label e.g. \"Ran 2 commands\", \"Read 18 files\".\n   */\n  summary: ReactNode;\n  /**\n   * Collapsible payload (e.g. command, stdout, file list).\n   */\n  detail?: ReactNode;\n  defaultOpen?: boolean;\n  /**\n   * If true, hides the wrench icon (useful when grouping by name elsewhere).\n   */\n  hideIcon?: boolean;\n}\n\n/**\n * ToolCall — collapsible row representing an agent tool invocation.\n *\n * Visual: subtle muted container, wrench icon, summary in body text,\n * chevron rotates on expand. Pairs with `<ToolResult>` for the rendered output.\n *\n * Typical usage inside a ChatMessage assistant body:\n *\n *   <ToolCall summary=\"Read 18 files\" detail={<ToolResult>{output}</ToolResult>} />\n */\nconst ToolCall = forwardRef<HTMLDivElement, ToolCallProps>(\n  ({ className, name, summary, detail, defaultOpen, hideIcon, ...props }, ref) => {\n    const [open, setOpen] = useState(defaultOpen ?? false);\n    const expandable = detail !== undefined;\n    return (\n      <div\n        data-slot=\"tool-call\"\n        ref={ref}\n        className={cn(\"rounded-md border border-border/40 bg-muted/30\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={() => expandable && setOpen((v) => !v)}\n          aria-expanded={expandable ? open : undefined}\n          disabled={!expandable}\n          className={cn(\n            \"flex w-full items-center gap-2 px-3 py-2 text-left\",\n            \"font-sans text-body-sm text-foreground\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n            expandable && \"cursor-pointer hover:bg-muted/60\",\n          )}\n        >\n          {!hideIcon ? (\n            <Wrench className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n          ) : null}\n          {name ? (\n            <span className=\"font-mono text-code-sm text-muted-foreground\">{name}</span>\n          ) : null}\n          <span className=\"flex-1 truncate\">{summary}</span>\n          {expandable ? (\n            <ChevronRight\n              className={cn(\n                \"size-3.5 text-muted-foreground transition-transform\",\n                open && \"rotate-90\",\n              )}\n              aria-hidden=\"true\"\n            />\n          ) : null}\n        </button>\n        {expandable && open ? (\n          <div className=\"border-border/40 border-t bg-card px-3 py-2\">{detail}</div>\n        ) : null}\n      </div>\n    );\n  },\n);\nToolCall.displayName = \"ToolCall\";\n\nexport { ToolCall };\n"]}