@usetheo/ui 0.9.0-next.0 → 0.11.0-next.0

package/dist/chunk-AXKBNRZW.js

@@ -0,0 +1,173 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { forwardRef, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function binPoints(points, maxBars) {
+  if (points.length <= maxBars) return points;
+  const binSize = Math.ceil(points.length / maxBars);
+  const out = [];
+  for (let i = 0; i < points.length; i += binSize) {
+    const slice = points.slice(i, i + binSize);
+    if (slice.length === 0) continue;
+    const first = slice[0]?.label ?? "";
+    const last = slice[slice.length - 1]?.label ?? first;
+    out.push({
+      label: slice.length === 1 ? first : `${first}\u2026${last}`,
+      input: slice.reduce((a, p) => a + p.input, 0),
+      output: slice.reduce((a, p) => a + p.output, 0)
+    });
+  }
+  return out;
+}
+var formatTokens = (n) => {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return `${n}`;
+};
+var TokenUsageChart = forwardRef(
+  ({
+    className,
+    points,
+    title = "Token usage",
+    height = 160,
+    showLegend = true,
+    maxBars = 60,
+    ...props
+  }, ref) => {
+    const series = useMemo(() => binPoints(points, maxBars), [points, maxBars]);
+    const max = Math.max(1, ...series.map((p) => p.input + p.output));
+    const barCount = series.length;
+    const barWidth = 100 / Math.max(1, barCount);
+    const gap = Math.min(2, barWidth * 0.2);
+    const innerWidth = barWidth - gap;
+    const total = series.reduce((acc, p) => acc + p.input + p.output, 0);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        className: cn("rounded-xl border bg-card p-4", className),
+        "aria-label": "Token usage over time",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-3", children: [
+            title ? /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }) : /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: [
+              "total \xB7 ",
+              formatTokens(total)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-[auto_1fr] gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "grid font-mono text-label text-muted-foreground",
+                style: { height, gridTemplateRows: "1fr 1fr 1fr" },
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatTokens(max) }),
+                  /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatTokens(max / 2) }),
+                  /* @__PURE__ */ jsx("span", { className: "self-end tabular-nums", children: "0" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 100 100",
+                preserveAspectRatio: "none",
+                className: "w-full",
+                style: { height },
+                role: "img",
+                "aria-label": `Token usage across ${barCount} periods`,
+                children: [
+                  [25, 50, 75].map((y) => /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: y,
+                      x2: 100,
+                      y2: y,
+                      stroke: "hsl(var(--border) / 0.4)",
+                      strokeWidth: 0.2
+                    },
+                    y
+                  )),
+                  series.map((p, idx) => {
+                    const totalH = (p.input + p.output) / max * 100;
+                    const inputH = p.input / max * 100;
+                    const outputH = p.output / max * 100;
+                    const x = idx * barWidth + gap / 2;
+                    return /* @__PURE__ */ jsxs("g", { children: [
+                      /* @__PURE__ */ jsx("title", { children: `${p.label} \u2014 input ${formatTokens(p.input)} \xB7 output ${formatTokens(p.output)}` }),
+                      /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x,
+                          y: 100 - totalH,
+                          width: innerWidth,
+                          height: outputH,
+                          fill: "hsl(var(--primary))",
+                          opacity: 0.85
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x,
+                          y: 100 - inputH,
+                          width: innerWidth,
+                          height: inputH,
+                          fill: "hsl(var(--accent))",
+                          opacity: 0.85
+                        }
+                      )
+                    ] }, p.label);
+                  })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "mt-1 grid grid-cols-[auto_1fr] gap-2 font-mono text-label text-muted-foreground",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: `repeat(${barCount}, 1fr)` }, children: series.map((p) => /* @__PURE__ */ jsx("span", { className: "truncate text-center", children: p.label }, p.label)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+            /* @__PURE__ */ jsx("caption", { children: "Token usage by period \u2014 input vs output" }),
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "col", children: "Period" }),
+              /* @__PURE__ */ jsx("th", { scope: "col", children: "Input tokens" }),
+              /* @__PURE__ */ jsx("th", { scope: "col", children: "Output tokens" })
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: series.map((p) => /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("td", { children: p.label }),
+              /* @__PURE__ */ jsx("td", { children: p.input }),
+              /* @__PURE__ */ jsx("td", { children: p.output })
+            ] }, `a11y-${p.label}`)) })
+          ] }),
+          showLegend ? /* @__PURE__ */ jsxs("footer", { className: "mt-3 flex items-center gap-4 font-mono text-label text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "size-2 rounded-sm bg-accent", "aria-hidden": "true" }),
+              "Input"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "size-2 rounded-sm bg-primary", "aria-hidden": "true" }),
+              "Output"
+            ] })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+TokenUsageChart.displayName = "TokenUsageChart";
+
+export { TokenUsageChart };
+//# sourceMappingURL=chunk-AXKBNRZW.js.map
+//# sourceMappingURL=chunk-AXKBNRZW.js.map

package/dist/chunk-AXKBNRZW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/token-usage-chart/token-usage-chart.tsx"],"names":[],"mappings":"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","file":"chunk-AXKBNRZW.js","sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport interface TokenUsagePoint {\n  /** ISO date or friendly label for the x-axis tooltip. */\n  label: string;\n  /** Input tokens for this period (e.g. day). */\n  input: number;\n  /** Output tokens for this period. */\n  output: number;\n}\n\ninterface TokenUsageChartProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  points: TokenUsagePoint[];\n  /** Title above the chart. */\n  title?: ReactNode;\n  /** Chart height in px. Default 160. */\n  height?: number;\n  /** Show legend below the chart. Default true. */\n  showLegend?: boolean;\n  /**\n   * Maximum number of bars to render. When `points.length` exceeds this, the\n   * series is binned (summed in equal-width windows) so the chart stays\n   * legible and SVG node count stays bounded. Default 60.\n   */\n  maxBars?: number;\n}\n\nfunction binPoints(points: TokenUsagePoint[], maxBars: number): TokenUsagePoint[] {\n  if (points.length <= maxBars) return points;\n  const binSize = Math.ceil(points.length / maxBars);\n  const out: TokenUsagePoint[] = [];\n  for (let i = 0; i < points.length; i += binSize) {\n    const slice = points.slice(i, i + binSize);\n    if (slice.length === 0) continue;\n    const first = slice[0]?.label ?? \"\";\n    const last = slice[slice.length - 1]?.label ?? first;\n    out.push({\n      label: slice.length === 1 ? first : `${first}…${last}`,\n      input: slice.reduce((a, p) => a + p.input, 0),\n      output: slice.reduce((a, p) => a + p.output, 0),\n    });\n  }\n  return out;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;\n  return `${n}`;\n};\n\n/**\n * TokenUsageChart — stacked-bar chart of input vs output tokens over time.\n *\n * Pure SVG, no chart lib. Width is fluid; bars adjust to viewBox. Hover any\n * bar to see the breakdown in the tooltip slot below.\n */\nconst TokenUsageChart = forwardRef<HTMLDivElement, TokenUsageChartProps>(\n  (\n    {\n      className,\n      points,\n      title = \"Token usage\",\n      height = 160,\n      showLegend = true,\n      maxBars = 60,\n      ...props\n    },\n    ref,\n  ) => {\n    const series = useMemo(() => binPoints(points, maxBars), [points, maxBars]);\n    const max = Math.max(1, ...series.map((p) => p.input + p.output));\n    const barCount = series.length;\n    const barWidth = 100 / Math.max(1, barCount);\n    const gap = Math.min(2, barWidth * 0.2);\n    const innerWidth = barWidth - gap;\n\n    const total = series.reduce((acc, p) => acc + p.input + p.output, 0);\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\"rounded-xl border bg-card p-4\", className)}\n        aria-label=\"Token usage over time\"\n        {...props}\n      >\n        <header className=\"flex items-baseline justify-between gap-3\">\n          {title ? (\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n            total · {formatTokens(total)}\n          </span>\n        </header>\n        <div className=\"mt-3 grid grid-cols-[auto_1fr] gap-2\">\n          {/* Y-axis ticks */}\n          <div\n            className=\"grid font-mono text-label text-muted-foreground\"\n            style={{ height, gridTemplateRows: \"1fr 1fr 1fr\" }}\n            aria-hidden=\"true\"\n          >\n            <span className=\"tabular-nums\">{formatTokens(max)}</span>\n            <span className=\"tabular-nums\">{formatTokens(max / 2)}</span>\n            <span className=\"self-end tabular-nums\">0</span>\n          </div>\n          {/* Chart */}\n          <svg\n            viewBox=\"0 0 100 100\"\n            preserveAspectRatio=\"none\"\n            className=\"w-full\"\n            style={{ height }}\n            role=\"img\"\n            aria-label={`Token usage across ${barCount} periods`}\n          >\n            {/* gridlines */}\n            {[25, 50, 75].map((y) => (\n              <line\n                key={y}\n                x1={0}\n                y1={y}\n                x2={100}\n                y2={y}\n                stroke=\"hsl(var(--border) / 0.4)\"\n                strokeWidth={0.2}\n              />\n            ))}\n            {series.map((p, idx) => {\n              const totalH = ((p.input + p.output) / max) * 100;\n              const inputH = (p.input / max) * 100;\n              const outputH = (p.output / max) * 100;\n              const x = idx * barWidth + gap / 2;\n              return (\n                <g key={p.label}>\n                  <title>{`${p.label} — input ${formatTokens(p.input)} · output ${formatTokens(p.output)}`}</title>\n                  {/* output (top, primary tone) */}\n                  <rect\n                    x={x}\n                    y={100 - totalH}\n                    width={innerWidth}\n                    height={outputH}\n                    fill=\"hsl(var(--primary))\"\n                    opacity={0.85}\n                  />\n                  {/* input (bottom, accent tone) */}\n                  <rect\n                    x={x}\n                    y={100 - inputH}\n                    width={innerWidth}\n                    height={inputH}\n                    fill=\"hsl(var(--accent))\"\n                    opacity={0.85}\n                  />\n                </g>\n              );\n            })}\n          </svg>\n        </div>\n        {/* x-axis labels — aligned with the chart column of the parent grid */}\n        <div\n          className=\"mt-1 grid grid-cols-[auto_1fr] gap-2 font-mono text-label text-muted-foreground\"\n          aria-hidden=\"true\"\n        >\n          <span aria-hidden=\"true\" />\n          <div className=\"grid\" style={{ gridTemplateColumns: `repeat(${barCount}, 1fr)` }}>\n            {series.map((p) => (\n              <span key={p.label} className=\"truncate text-center\">\n                {p.label}\n              </span>\n            ))}\n          </div>\n        </div>\n        {/* Screen-reader fallback: the SVG is decorative-ish for AT users.\n         * `<title>` per bar is unreliably exposed across NVDA/VoiceOver/JAWS,\n         * so we ship an `sr-only` table with the same data. Sighted users\n         * never see this; AT users can navigate the values cell-by-cell.\n         * Reference: WCAG 1.1.1 (Non-text content). */}\n        <table className=\"sr-only\">\n          <caption>Token usage by period — input vs output</caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">Period</th>\n              <th scope=\"col\">Input tokens</th>\n              <th scope=\"col\">Output tokens</th>\n            </tr>\n          </thead>\n          <tbody>\n            {series.map((p) => (\n              <tr key={`a11y-${p.label}`}>\n                <td>{p.label}</td>\n                <td>{p.input}</td>\n                <td>{p.output}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n        {showLegend ? (\n          <footer className=\"mt-3 flex items-center gap-4 font-mono text-label text-muted-foreground\">\n            <span className=\"inline-flex items-center gap-1.5\">\n              <span className=\"size-2 rounded-sm bg-accent\" aria-hidden=\"true\" />\n              Input\n            </span>\n            <span className=\"inline-flex items-center gap-1.5\">\n              <span className=\"size-2 rounded-sm bg-primary\" aria-hidden=\"true\" />\n              Output\n            </span>\n          </footer>\n        ) : null}\n      </section>\n    );\n  },\n);\nTokenUsageChart.displayName = \"TokenUsageChart\";\n\nexport { TokenUsageChart };\n"]}

package/dist/chunk-B75MEYNR.js

@@ -0,0 +1,106 @@
+import { MCPServerCard } from './chunk-QB6BNHO3.js';
+import { cn } from './chunk-ZSRJCIWF.js';
+import { Plus } from 'lucide-react';
+import { forwardRef, useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var STATUS_ORDER = ["connected", "starting", "degraded", "disconnected"];
+var MCPServerList = forwardRef(
+  ({ className, servers, title = "MCP servers", onAdd, onRestart, onDisconnect, ...props }, ref) => {
+    const [filter, setFilter] = useState(null);
+    const counts = useMemo(() => {
+      const result = {
+        connected: 0,
+        starting: 0,
+        degraded: 0,
+        disconnected: 0
+      };
+      for (const s of servers) result[s.status]++;
+      return result;
+    }, [servers]);
+    const filtered = useMemo(
+      () => filter ? servers.filter((s) => s.status === filter) : servers,
+      [servers, filter]
+    );
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        className: cn("grid gap-3", className),
+        "aria-label": "MCP servers",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+            title ? /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }) : /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "inline-flex rounded-lg border border-border/60 bg-muted p-0.5", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setFilter(null),
+                    "aria-pressed": filter === null,
+                    className: cn(
+                      "rounded-md px-2.5 py-1 font-mono text-label",
+                      filter === null ? "bg-card text-foreground shadow-sm" : "text-muted-foreground"
+                    ),
+                    children: [
+                      "All \xB7 ",
+                      servers.length
+                    ]
+                  }
+                ),
+                STATUS_ORDER.map((status) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setFilter(status),
+                    "aria-pressed": filter === status,
+                    disabled: counts[status] === 0,
+                    className: cn(
+                      "rounded-md px-2.5 py-1 font-mono text-label uppercase",
+                      filter === status ? "bg-card text-foreground shadow-sm" : "text-muted-foreground",
+                      "disabled:opacity-40"
+                    ),
+                    children: [
+                      status,
+                      " \xB7 ",
+                      counts[status]
+                    ]
+                  },
+                  status
+                ))
+              ] }),
+              onAdd ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onAdd,
+                  className: "inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 font-sans text-label text-primary-foreground hover:shadow-glow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+                    " Add server"
+                  ]
+                }
+              ) : null
+            ] })
+          ] }),
+          filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "rounded-xl border border-border/60 border-dashed bg-muted/30 px-4 py-8 text-center font-sans text-body-sm text-muted-foreground", children: "No servers in this state." }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: filtered.map((server) => /* @__PURE__ */ jsx(
+            MCPServerCard,
+            {
+              server,
+              ...onRestart ? { onRestart } : {},
+              ...onDisconnect ? { onDisconnect } : {}
+            },
+            server.id
+          )) })
+        ]
+      }
+    );
+  }
+);
+MCPServerList.displayName = "MCPServerList";
+
+export { MCPServerList };
+//# sourceMappingURL=chunk-B75MEYNR.js.map
+//# sourceMappingURL=chunk-B75MEYNR.js.map

package/dist/chunk-B75MEYNR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/mcp-server-list/mcp-server-list.tsx"],"names":[],"mappings":"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","file":"chunk-B75MEYNR.js","sourcesContent":["import { Plus } from \"lucide-react\";\nimport { forwardRef, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport {\n  type MCPServer,\n  MCPServerCard,\n  type MCPServerStatus,\n} from \"../../primitives/mcp-server-card/index.js\";\n\ninterface MCPServerListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  servers: MCPServer[];\n  title?: ReactNode;\n  onAdd?: () => void;\n  onRestart?: (id: string) => void;\n  onDisconnect?: (id: string) => void;\n}\n\nconst STATUS_ORDER: MCPServerStatus[] = [\"connected\", \"starting\", \"degraded\", \"disconnected\"];\n\n/**\n * MCPServerList — grouped MCP server inventory with status filter chips.\n * Surfaces degraded/disconnected servers prominently so the user can act.\n */\nconst MCPServerList = forwardRef<HTMLDivElement, MCPServerListProps>(\n  (\n    { className, servers, title = \"MCP servers\", onAdd, onRestart, onDisconnect, ...props },\n    ref,\n  ) => {\n    const [filter, setFilter] = useState<MCPServerStatus | null>(null);\n\n    const counts = useMemo(() => {\n      const result: Record<MCPServerStatus, number> = {\n        connected: 0,\n        starting: 0,\n        degraded: 0,\n        disconnected: 0,\n      };\n      for (const s of servers) result[s.status]++;\n      return result;\n    }, [servers]);\n\n    const filtered = useMemo(\n      () => (filter ? servers.filter((s) => s.status === filter) : servers),\n      [servers, filter],\n    );\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\"grid gap-3\", className)}\n        aria-label=\"MCP servers\"\n        {...props}\n      >\n        <header className=\"flex flex-wrap items-center justify-between gap-3\">\n          {title ? (\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          <div className=\"flex items-center gap-2\">\n            <div className=\"inline-flex rounded-lg border border-border/60 bg-muted p-0.5\">\n              <button\n                type=\"button\"\n                onClick={() => setFilter(null)}\n                aria-pressed={filter === null}\n                className={cn(\n                  \"rounded-md px-2.5 py-1 font-mono text-label\",\n                  filter === null ? \"bg-card text-foreground shadow-sm\" : \"text-muted-foreground\",\n                )}\n              >\n                All · {servers.length}\n              </button>\n              {STATUS_ORDER.map((status) => (\n                <button\n                  key={status}\n                  type=\"button\"\n                  onClick={() => setFilter(status)}\n                  aria-pressed={filter === status}\n                  disabled={counts[status] === 0}\n                  className={cn(\n                    \"rounded-md px-2.5 py-1 font-mono text-label uppercase\",\n                    filter === status\n                      ? \"bg-card text-foreground shadow-sm\"\n                      : \"text-muted-foreground\",\n                    \"disabled:opacity-40\",\n                  )}\n                >\n                  {status} · {counts[status]}\n                </button>\n              ))}\n            </div>\n            {onAdd ? (\n              <button\n                type=\"button\"\n                onClick={onAdd}\n                className=\"inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 font-sans text-label text-primary-foreground hover:shadow-glow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              >\n                <Plus className=\"size-3.5\" /> Add server\n              </button>\n            ) : null}\n          </div>\n        </header>\n\n        {filtered.length === 0 ? (\n          <p className=\"rounded-xl border border-border/60 border-dashed bg-muted/30 px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n            No servers in this state.\n          </p>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n            {filtered.map((server) => (\n              <MCPServerCard\n                key={server.id}\n                server={server}\n                {...(onRestart ? { onRestart } : {})}\n                {...(onDisconnect ? { onDisconnect } : {})}\n              />\n            ))}\n          </div>\n        )}\n      </section>\n    );\n  },\n);\nMCPServerList.displayName = \"MCPServerList\";\n\nexport { MCPServerList };\n"]}

package/dist/chunk-BGKA6DI6.js

@@ -0,0 +1,34 @@
+import { BrowserControls } from './chunk-VMMATOPE.js';
+import { cn } from './chunk-ZSRJCIWF.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PreviewPanel = forwardRef(
+  ({ className, url, onUrlChange, onBack, onForward, onReload, content, logsSlot, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      className: cn("flex h-full flex-col overflow-hidden rounded-xl border bg-card", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          BrowserControls,
+          {
+            url,
+            ...onUrlChange ? { onUrlChange } : {},
+            ...onBack ? { onBack } : {},
+            ...onForward ? { onForward } : {},
+            ...onReload ? { onReload } : {}
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden bg-background", children: content }),
+        logsSlot ? /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-auto border-border/40 border-t bg-card", children: logsSlot }) : null
+      ]
+    }
+  )
+);
+PreviewPanel.displayName = "PreviewPanel";
+
+export { PreviewPanel };
+//# sourceMappingURL=chunk-BGKA6DI6.js.map
+//# sourceMappingURL=chunk-BGKA6DI6.js.map

package/dist/chunk-BGKA6DI6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/preview-panel/preview-panel.tsx"],"names":[],"mappings":";;;;;AA2BA,IAAM,YAAA,GAAe,UAAA;AAAA,EACnB,CACE,EAAE,SAAA,EAAW,GAAA,EAAK,WAAA,EAAa,MAAA,EAAQ,SAAA,EAAW,QAAA,EAAU,OAAA,EAAS,QAAA,EAAU,GAAG,KAAA,IAClF,GAAA,qBAEA,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,gEAAA,EAAkE,SAAS,CAAA;AAAA,MACxF,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACC,GAAI,WAAA,GAAc,EAAE,WAAA,KAAgB,EAAC;AAAA,YACrC,GAAI,MAAA,GAAS,EAAE,MAAA,KAAW,EAAC;AAAA,YAC3B,GAAI,SAAA,GAAY,EAAE,SAAA,KAAc,EAAC;AAAA,YACjC,GAAI,QAAA,GAAW,EAAE,QAAA,KAAa;AAAC;AAAA,SAClC;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sCAAA,EAAwC,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,QAC9D,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0DAAA,EAA4D,oBAAS,CAAA,GAClF;AAAA;AAAA;AAAA;AAGV;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-BGKA6DI6.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { BrowserControls } from \"../../primitives/browser-controls/index.js\";\n\ninterface PreviewPanelProps extends Omit<HTMLAttributes<HTMLElement>, \"content\"> {\n  url: string;\n  onUrlChange?: (next: string) => void;\n  onBack?: () => void;\n  onForward?: () => void;\n  onReload?: () => void;\n  /**\n   * Region rendered as the preview body. Typically an <iframe>.\n   */\n  content: ReactNode;\n  /**\n   * Optional logs section rendered below the preview (e.g. dev server output).\n   */\n  logsSlot?: ReactNode;\n}\n\n/**\n * PreviewPanel — browser preview with controls + integrated logs slot.\n *\n * The Code workspace shows live dev-server URL + HMR logs side-by-side; this\n * panel keeps both in a single card so the user doesn't switch contexts.\n */\nconst PreviewPanel = forwardRef<HTMLElement, PreviewPanelProps>(\n  (\n    { className, url, onUrlChange, onBack, onForward, onReload, content, logsSlot, ...props },\n    ref,\n  ) => (\n    <section\n      ref={ref}\n      className={cn(\"flex h-full flex-col overflow-hidden rounded-xl border bg-card\", className)}\n      {...props}\n    >\n      <BrowserControls\n        url={url}\n        {...(onUrlChange ? { onUrlChange } : {})}\n        {...(onBack ? { onBack } : {})}\n        {...(onForward ? { onForward } : {})}\n        {...(onReload ? { onReload } : {})}\n      />\n      <div className=\"flex-1 overflow-hidden bg-background\">{content}</div>\n      {logsSlot ? (\n        <div className=\"max-h-48 overflow-auto border-border/40 border-t bg-card\">{logsSlot}</div>\n      ) : null}\n    </section>\n  ),\n);\nPreviewPanel.displayName = \"PreviewPanel\";\n\nexport { PreviewPanel };\n"]}

package/dist/chunk-BNQAJGEN.js

@@ -0,0 +1,88 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { Sparkles, RotateCcw } from 'lucide-react';
+import { forwardRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SystemPromptEditor = forwardRef(
+  ({
+    className,
+    defaultPrompt,
+    override,
+    onOverrideChange,
+    tokenEstimate,
+    title = "System prompt",
+    ...props
+  }, ref) => {
+    const usingOverride = override.length > 0;
+    const [showDefault, setShowDefault] = useState(false);
+    return /* @__PURE__ */ jsxs("section", { ref, className: cn("rounded-xl border bg-card", className), ...props, children: [
+      /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-3 border-border/40 border-b px-4 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-primary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-label uppercase tracking-wider",
+                usingOverride ? "border-primary/40 bg-primary/10 text-primary" : "border-border/40 bg-muted text-muted-foreground"
+              ),
+              children: usingOverride ? "Override active" : "Vendor default"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          tokenEstimate !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: [
+            "~",
+            tokenEstimate.toLocaleString(),
+            " tokens"
+          ] }) : null,
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowDefault((v) => !v),
+              className: "rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: [
+                showDefault ? "Hide" : "Show",
+                " default"
+              ]
+            }
+          ),
+          usingOverride ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onOverrideChange(""),
+              className: "inline-flex items-center gap-1 rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: [
+                /* @__PURE__ */ jsx(RotateCcw, { className: "size-3" }),
+                " Reset"
+              ]
+            }
+          ) : null
+        ] })
+      ] }),
+      showDefault ? /* @__PURE__ */ jsx("pre", { className: "max-h-48 overflow-auto border-border/40 border-b bg-muted/40 px-4 py-3 font-mono text-code-sm text-muted-foreground", children: defaultPrompt }) : null,
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: override,
+          onChange: (e) => onOverrideChange(e.target.value),
+          placeholder: usingOverride ? "" : "Leave empty to use the vendor default. Type here to override.",
+          rows: 8,
+          className: cn(
+            "w-full resize-y bg-transparent px-4 py-3 font-mono text-code-md text-foreground",
+            "placeholder:text-muted-foreground",
+            "focus:outline-none"
+          )
+        }
+      )
+    ] });
+  }
+);
+SystemPromptEditor.displayName = "SystemPromptEditor";
+
+export { SystemPromptEditor };
+//# sourceMappingURL=chunk-BNQAJGEN.js.map
+//# sourceMappingURL=chunk-BNQAJGEN.js.map

package/dist/chunk-BNQAJGEN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/system-prompt-editor/system-prompt-editor.tsx"],"names":[],"mappings":"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","file":"chunk-BNQAJGEN.js","sourcesContent":["import { RotateCcw, Sparkles } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\ninterface SystemPromptEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Vendor / default system prompt (read-only). */\n  defaultPrompt: string;\n  /** Current override; pass empty string for \"use default\". */\n  override: string;\n  onOverrideChange: (next: string) => void;\n  /** Approximate token count for the active prompt. */\n  tokenEstimate?: number;\n  title?: ReactNode;\n}\n\n/**\n * SystemPromptEditor — surface the agent's system prompt with a clear\n * \"vendor default\" vs \"user override\" toggle.\n *\n * Behavior:\n *   - When override is empty, the textarea shows the default (greyed out,\n *     editable starts blank).\n *   - When user types, override takes effect.\n *   - \"Reset to default\" wipes the override.\n *\n * Critical for transparency: a user must be able to see and edit the prompt.\n */\nconst SystemPromptEditor = forwardRef<HTMLDivElement, SystemPromptEditorProps>(\n  (\n    {\n      className,\n      defaultPrompt,\n      override,\n      onOverrideChange,\n      tokenEstimate,\n      title = \"System prompt\",\n      ...props\n    },\n    ref,\n  ) => {\n    const usingOverride = override.length > 0;\n    const [showDefault, setShowDefault] = useState(false);\n\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n        <header className=\"flex items-center justify-between gap-3 border-border/40 border-b px-4 py-3\">\n          <div className=\"flex items-center gap-2\">\n            <Sparkles className=\"size-4 text-primary\" aria-hidden=\"true\" />\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n            <span\n              className={cn(\n                \"inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-label uppercase tracking-wider\",\n                usingOverride\n                  ? \"border-primary/40 bg-primary/10 text-primary\"\n                  : \"border-border/40 bg-muted text-muted-foreground\",\n              )}\n            >\n              {usingOverride ? \"Override active\" : \"Vendor default\"}\n            </span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {tokenEstimate !== undefined ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                ~{tokenEstimate.toLocaleString()} tokens\n              </span>\n            ) : null}\n            <button\n              type=\"button\"\n              onClick={() => setShowDefault((v) => !v)}\n              className=\"rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              {showDefault ? \"Hide\" : \"Show\"} default\n            </button>\n            {usingOverride ? (\n              <button\n                type=\"button\"\n                onClick={() => onOverrideChange(\"\")}\n                className=\"inline-flex items-center gap-1 rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              >\n                <RotateCcw className=\"size-3\" /> Reset\n              </button>\n            ) : null}\n          </div>\n        </header>\n\n        {showDefault ? (\n          <pre className=\"max-h-48 overflow-auto border-border/40 border-b bg-muted/40 px-4 py-3 font-mono text-code-sm text-muted-foreground\">\n            {defaultPrompt}\n          </pre>\n        ) : null}\n\n        <textarea\n          value={override}\n          onChange={(e) => onOverrideChange(e.target.value)}\n          placeholder={\n            usingOverride ? \"\" : \"Leave empty to use the vendor default. Type here to override.\"\n          }\n          rows={8}\n          className={cn(\n            \"w-full resize-y bg-transparent px-4 py-3 font-mono text-code-md text-foreground\",\n            \"placeholder:text-muted-foreground\",\n            \"focus:outline-none\",\n          )}\n        />\n      </section>\n    );\n  },\n);\nSystemPromptEditor.displayName = \"SystemPromptEditor\";\n\nexport { SystemPromptEditor };\n"]}

package/dist/chunk-BP2SETUC.js

@@ -0,0 +1,101 @@
+import { Dialog } from './chunk-2UJROWAG.js';
+import { cn } from './chunk-ZSRJCIWF.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, { 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-BP2SETUC.js.map
+//# sourceMappingURL=chunk-BP2SETUC.js.map

package/dist/chunk-BP2SETUC.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-BP2SETUC.js","sourcesContent":["import { 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 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"]}