@usetheo/ui 0.8.0-next.0 → 0.10.0-next.0

package/dist/chunk-RVOBP7PO.js

@@ -0,0 +1,116 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { forwardRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var Root = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "aside",
+    {
+      ref,
+      className: cn(
+        "flex h-full w-64 flex-col border-border/40 border-r bg-card text-card-foreground",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root.displayName = "Sidebar";
+var Header = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex h-16 items-center gap-3 border-border/40 border-b px-5", className),
+      ...props
+    }
+  )
+);
+Header.displayName = "Sidebar.Header";
+var Section = forwardRef(
+  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1 px-3 py-4", className), ...props, children: [
+    title ? /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 font-sans text-label-caps text-muted-foreground uppercase", children: title }) : null,
+    children
+  ] })
+);
+Section.displayName = "Sidebar.Section";
+var Item = forwardRef(
+  ({ className, icon: Icon, active, count, as = "button", href, children, ...props }, ref) => {
+    const classes = cn(
+      "group flex w-full items-center gap-3 rounded-lg px-2 py-2",
+      "font-medium font-sans text-body-sm",
+      "transition-colors duration-base ease-out-soft",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
+      active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+      className
+    );
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      Icon ? /* @__PURE__ */ jsx(
+        Icon,
+        {
+          className: cn(
+            "size-4 shrink-0",
+            active ? "text-primary" : "text-muted-foreground group-hover:text-foreground"
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children }),
+      count !== void 0 ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "ml-auto rounded-full px-1.5 py-0.5 font-mono text-label",
+            active ? "bg-primary text-primary-foreground" : "bg-muted-foreground/15"
+          ),
+          children: count
+        }
+      ) : null
+    ] });
+    if (as === "a") {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          href,
+          className: classes,
+          "aria-current": active ? "page" : void 0,
+          ...props,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: classes,
+        "aria-pressed": active ? "true" : void 0,
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+Item.displayName = "Sidebar.Item";
+var Footer = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("mt-auto border-border/40 border-t px-5 py-4", className),
+      ...props
+    }
+  )
+);
+Footer.displayName = "Sidebar.Footer";
+var Sidebar = /* @__PURE__ */ Object.assign(Root, {
+  Header,
+  Section,
+  Item,
+  Footer
+});
+
+export { Sidebar };
+//# sourceMappingURL=chunk-RVOBP7PO.js.map
+//# sourceMappingURL=chunk-RVOBP7PO.js.map

package/dist/chunk-RVOBP7PO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/sidebar/sidebar.tsx"],"names":[],"mappings":"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","file":"chunk-RVOBP7PO.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  ElementType,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * Sidebar — vertical navigation shell.\n *\n * Composition:\n *   <Sidebar>\n *     <Sidebar.Header>…brand…</Sidebar.Header>\n *     <Sidebar.Section title=\"Workspace\">\n *       <Sidebar.Item icon={Home} active>Overview</Sidebar.Item>\n *       <Sidebar.Item icon={Rocket} count={3}>Deployments</Sidebar.Item>\n *     </Sidebar.Section>\n *     <Sidebar.Footer>…user…</Sidebar.Footer>\n *   </Sidebar>\n *\n * Width is 260px by default (matches the wiremocks). Pass `className` to override.\n * Sidebar root is `<aside>` with a hairline right border.\n */\n\nconst Root = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(\n  ({ className, ...props }, ref) => (\n    <aside\n      ref={ref}\n      className={cn(\n        \"flex h-full w-64 flex-col border-border/40 border-r bg-card text-card-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRoot.displayName = \"Sidebar\";\n\nconst Header = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex h-16 items-center gap-3 border-border/40 border-b px-5\", className)}\n      {...props}\n    />\n  ),\n);\nHeader.displayName = \"Sidebar.Header\";\n\ninterface SectionProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n}\n\nconst Section = forwardRef<HTMLDivElement, SectionProps>(\n  ({ className, title, children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col gap-1 px-3 py-4\", className)} {...props}>\n      {title ? (\n        <p className=\"px-2 pb-1 font-sans text-label-caps text-muted-foreground uppercase\">\n          {title}\n        </p>\n      ) : null}\n      {children}\n    </div>\n  ),\n);\nSection.displayName = \"Sidebar.Section\";\n\ninterface ItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\"> {\n  icon?: ElementType;\n  active?: boolean;\n  count?: number | string;\n  as?: \"button\" | \"a\";\n  href?: string;\n}\n\n/**\n * Sidebar.Item — single nav row. Renders as <button> by default; pass `as=\"a\"` + `href`\n * to render an anchor for routing.\n */\nconst Item = forwardRef<HTMLElement, ItemProps>(\n  ({ className, icon: Icon, active, count, as = \"button\", href, children, ...props }, ref) => {\n    const classes = cn(\n      \"group flex w-full items-center gap-3 rounded-lg px-2 py-2\",\n      \"font-medium font-sans text-body-sm\",\n      \"transition-colors duration-base ease-out-soft\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n      active\n        ? \"bg-primary/10 text-primary\"\n        : \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n      className,\n    );\n\n    const content = (\n      <>\n        {Icon ? (\n          <Icon\n            className={cn(\n              \"size-4 shrink-0\",\n              active ? \"text-primary\" : \"text-muted-foreground group-hover:text-foreground\",\n            )}\n          />\n        ) : null}\n        <span className=\"flex-1 truncate text-left\">{children}</span>\n        {count !== undefined ? (\n          <span\n            className={cn(\n              \"ml-auto rounded-full px-1.5 py-0.5 font-mono text-label\",\n              active ? \"bg-primary text-primary-foreground\" : \"bg-muted-foreground/15\",\n            )}\n          >\n            {count}\n          </span>\n        ) : null}\n      </>\n    );\n\n    if (as === \"a\") {\n      return (\n        <a\n          ref={ref as Ref<HTMLAnchorElement>}\n          href={href}\n          className={classes}\n          aria-current={active ? \"page\" : undefined}\n          {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        className={classes}\n        aria-pressed={active ? \"true\" : undefined}\n        {...props}\n      >\n        {content}\n      </button>\n    );\n  },\n);\nItem.displayName = \"Sidebar.Item\";\n\nconst Footer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"mt-auto border-border/40 border-t px-5 py-4\", className)}\n      {...props}\n    />\n  ),\n);\nFooter.displayName = \"Sidebar.Footer\";\n\nconst Sidebar = /*#__PURE__*/ Object.assign(Root, {\n  Header,\n  Section,\n  Item,\n  Footer,\n});\n\nexport { Sidebar };\n"]}

package/dist/chunk-SF6R5VMQ.js

@@ -0,0 +1,97 @@
+import { Button } from './chunk-57NXT3OX.js';
+import { cn } from './chunk-ZSRJCIWF.js';
+import { cva } from 'class-variance-authority';
+import { Lock, AlertTriangle, ShieldCheck } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var cardVariants = cva(
+  "grid w-full gap-3 rounded-xl border p-4 transition-colors duration-base ease-out-soft",
+  {
+    variants: {
+      severity: {
+        info: "border-info/40 bg-info/5",
+        warning: "border-warning/40 bg-warning/5",
+        destructive: "border-destructive/40 bg-destructive/5"
+      }
+    },
+    defaultVariants: { severity: "warning" }
+  }
+);
+var ICON_FOR_SEVERITY = {
+  info: ShieldCheck,
+  warning: AlertTriangle,
+  destructive: Lock
+};
+var ICON_TONE = {
+  info: "text-info",
+  warning: "text-warning",
+  destructive: "text-destructive"
+};
+var ApprovalCard = forwardRef(
+  ({
+    className,
+    severity = "warning",
+    title,
+    request,
+    description,
+    details,
+    onApprove,
+    onDeny,
+    onAlways,
+    icon,
+    ...props
+  }, ref) => {
+    const resolvedSeverity = severity ?? "warning";
+    const Icon = icon ?? ICON_FOR_SEVERITY[resolvedSeverity];
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        role: "alertdialog",
+        "aria-label": typeof title === "string" ? title : "Approval required",
+        className: cn(cardVariants({ severity: resolvedSeverity }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn("mt-0.5 inline-flex shrink-0", ICON_TONE[resolvedSeverity]),
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [
+              /* @__PURE__ */ jsx("h4", { className: "font-display text-foreground text-title-md tracking-tight", children: title }),
+              /* @__PURE__ */ jsx("code", { className: "overflow-hidden break-words font-mono text-code-md text-muted-foreground", children: request }),
+              description ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: description }) : null
+            ] })
+          ] }),
+          details ? /* @__PURE__ */ jsxs("details", { className: "rounded-md border border-border/40 bg-background/40 px-3 py-2 text-body-sm", children: [
+            /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none font-mono text-label text-muted-foreground", children: "Show details" }),
+            /* @__PURE__ */ jsx("div", { className: "mt-2 break-words", children: details })
+          ] }) : null,
+          /* @__PURE__ */ jsxs("footer", { className: "flex flex-wrap items-center justify-end gap-2", children: [
+            onAlways ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onAlways, children: "Always allow" }) : null,
+            onDeny ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onDeny, children: "Deny" }) : null,
+            onApprove ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: resolvedSeverity === "destructive" ? "destructive" : "primary",
+                onClick: onApprove,
+                children: "Approve"
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+ApprovalCard.displayName = "ApprovalCard";
+
+export { ApprovalCard };
+//# sourceMappingURL=chunk-SF6R5VMQ.js.map
+//# sourceMappingURL=chunk-SF6R5VMQ.js.map

package/dist/chunk-SF6R5VMQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/approval-card/approval-card.tsx"],"names":[],"mappings":"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","file":"chunk-SF6R5VMQ.js","sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { AlertTriangle, Lock, ShieldCheck } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\nimport { Button } from \"../../primitives/button/index.js\";\n\n/**\n * ApprovalCard — inline pause-and-ask card for an agent stream.\n *\n * Used when the agent wants to perform an action that requires the user's\n * consent (run a destructive command, use a new tool, edit outside the\n * sandbox, etc.). Renders as a bordered card inside the conversation stream,\n * pauses the visual flow, and exposes Deny / Approve / Always-allow actions.\n */\n\nconst cardVariants = cva(\n  \"grid w-full gap-3 rounded-xl border p-4 transition-colors duration-base ease-out-soft\",\n  {\n    variants: {\n      severity: {\n        info: \"border-info/40 bg-info/5\",\n        warning: \"border-warning/40 bg-warning/5\",\n        destructive: \"border-destructive/40 bg-destructive/5\",\n      },\n    },\n    defaultVariants: { severity: \"warning\" },\n  },\n);\n\nconst ICON_FOR_SEVERITY: Record<NonNullable<ApprovalSeverity>, IconComponent> = {\n  info: ShieldCheck,\n  warning: AlertTriangle,\n  destructive: Lock,\n};\n\nconst ICON_TONE: Record<NonNullable<ApprovalSeverity>, string> = {\n  info: \"text-info\",\n  warning: \"text-warning\",\n  destructive: \"text-destructive\",\n};\n\ntype ApprovalSeverity = NonNullable<VariantProps<typeof cardVariants>[\"severity\"]>;\n\ninterface ApprovalCardProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"title\">,\n    VariantProps<typeof cardVariants> {\n  /** Short headline (\"Run destructive command?\"). */\n  title: ReactNode;\n  /** What is being requested (command, file path, tool name…). Renders monospace. */\n  request: ReactNode;\n  /** Optional explanation line under the request. */\n  description?: ReactNode;\n  /** Optional expandable details (e.g. full command, file diff). */\n  details?: ReactNode;\n  /** Pressing the primary \"Approve\" button. */\n  onApprove?: () => void;\n  /** Pressing \"Deny\". */\n  onDeny?: () => void;\n  /** Pressing \"Always allow\" — optional tertiary action. */\n  onAlways?: () => void;\n  /** Customise the icon shown in the corner. */\n  icon?: IconComponent;\n}\n\nconst ApprovalCard = forwardRef<HTMLElement, ApprovalCardProps>(\n  (\n    {\n      className,\n      severity = \"warning\",\n      title,\n      request,\n      description,\n      details,\n      onApprove,\n      onDeny,\n      onAlways,\n      icon,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedSeverity: ApprovalSeverity = severity ?? \"warning\";\n    const Icon = icon ?? ICON_FOR_SEVERITY[resolvedSeverity];\n    return (\n      <section\n        ref={ref}\n        role=\"alertdialog\"\n        aria-label={typeof title === \"string\" ? title : \"Approval required\"}\n        className={cn(cardVariants({ severity: resolvedSeverity }), className)}\n        {...props}\n      >\n        <header className=\"flex items-start gap-3\">\n          <span\n            className={cn(\"mt-0.5 inline-flex shrink-0\", ICON_TONE[resolvedSeverity])}\n            aria-hidden=\"true\"\n          >\n            <Icon className=\"size-4\" />\n          </span>\n          <div className=\"grid min-w-0 flex-1 gap-1\">\n            <h4 className=\"font-display text-foreground text-title-md tracking-tight\">{title}</h4>\n            <code className=\"overflow-hidden break-words font-mono text-code-md text-muted-foreground\">\n              {request}\n            </code>\n            {description ? (\n              <p className=\"text-body-sm text-muted-foreground\">{description}</p>\n            ) : null}\n          </div>\n        </header>\n        {details ? (\n          <details className=\"rounded-md border border-border/40 bg-background/40 px-3 py-2 text-body-sm\">\n            <summary className=\"cursor-pointer select-none font-mono text-label text-muted-foreground\">\n              Show details\n            </summary>\n            <div className=\"mt-2 break-words\">{details}</div>\n          </details>\n        ) : null}\n        <footer className=\"flex flex-wrap items-center justify-end gap-2\">\n          {onAlways ? (\n            <Button size=\"sm\" variant=\"ghost\" onClick={onAlways}>\n              Always allow\n            </Button>\n          ) : null}\n          {onDeny ? (\n            <Button size=\"sm\" variant=\"secondary\" onClick={onDeny}>\n              Deny\n            </Button>\n          ) : null}\n          {onApprove ? (\n            <Button\n              size=\"sm\"\n              variant={resolvedSeverity === \"destructive\" ? \"destructive\" : \"primary\"}\n              onClick={onApprove}\n            >\n              Approve\n            </Button>\n          ) : null}\n        </footer>\n      </section>\n    );\n  },\n);\nApprovalCard.displayName = \"ApprovalCard\";\n\nexport { ApprovalCard, type ApprovalSeverity };\n"]}

package/dist/chunk-SP4CP5HY.js

@@ -0,0 +1,57 @@
+import { cn } from './chunk-ZSRJCIWF.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",
+      {
+        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-SP4CP5HY.js.map
+//# sourceMappingURL=chunk-SP4CP5HY.js.map

package/dist/chunk-SP4CP5HY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/tool-call/tool-call.tsx"],"names":[],"mappings":";;;;;AAiCA,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,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-SP4CP5HY.js","sourcesContent":["import { 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        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"]}

package/dist/chunk-SWJ4EUOI.js

@@ -0,0 +1,30 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var EmptyState = forwardRef(
+  ({ className, icon: Icon, title, description, action, eyebrow, dashed = true, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "grid place-items-center gap-3 rounded-2xl border bg-card px-6 py-12 text-center",
+        dashed ? "border-border/60 border-dashed" : "border-border/40",
+        className
+      ),
+      ...props,
+      children: [
+        Icon ? /* @__PURE__ */ jsx("span", { className: "grid size-12 place-items-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Icon, { className: "size-6", "aria-hidden": "true" }) }) : null,
+        eyebrow ? /* @__PURE__ */ jsx("p", { className: "font-mono text-label-caps text-muted-foreground uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx("h3", { className: "font-display text-foreground text-title-md", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "max-w-md text-body-sm text-muted-foreground", children: description }) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: action }) : null
+      ]
+    }
+  )
+);
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState };
+//# sourceMappingURL=chunk-SWJ4EUOI.js.map
+//# sourceMappingURL=chunk-SWJ4EUOI.js.map

package/dist/chunk-SWJ4EUOI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/empty-state/empty-state.tsx"],"names":[],"mappings":";;;;AAwBA,IAAM,UAAA,GAAa,UAAA;AAAA,EACjB,CACE,EAAE,SAAA,EAAW,IAAA,EAAM,MAAM,KAAA,EAAO,WAAA,EAAa,MAAA,EAAQ,OAAA,EAAS,MAAA,GAAS,IAAA,EAAM,GAAG,KAAA,IAChF,GAAA,qBAEA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,iFAAA;AAAA,QACA,SAAS,gCAAA,GAAmC,kBAAA;AAAA,QAC5C;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wEAAA,EACd,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,aAAA,EAAY,MAAA,EAAO,CAAA,EAC9C,CAAA,GACE,IAAA;AAAA,QACH,0BACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,2DAAA,EAA6D,mBAAQ,CAAA,GAChF,IAAA;AAAA,wBACJ,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,4CAAA,EAA8C,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACjE,8BACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,6CAAA,EAA+C,uBAAY,CAAA,GACtE,IAAA;AAAA,QACH,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAQ,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA;AAGvD;AACA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-SWJ4EUOI.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\n\ninterface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Icon shown above the title. */\n  icon?: IconComponent;\n  title: ReactNode;\n  description?: ReactNode;\n  /** Optional action slot (typically <Button>). */\n  action?: ReactNode;\n  /** Hint shown above the title (e.g. uppercase eyebrow). */\n  eyebrow?: ReactNode;\n  /** Bordered dashed surface (placeholder vibe). Default true. */\n  dashed?: boolean;\n}\n\n/**\n * EmptyState — visual placeholder for empty lists / first-run screens.\n *\n * Composition: icon + eyebrow + title + description + action. All slots are\n * optional except title.\n */\nconst EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    { className, icon: Icon, title, description, action, eyebrow, dashed = true, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"grid place-items-center gap-3 rounded-2xl border bg-card px-6 py-12 text-center\",\n        dashed ? \"border-border/60 border-dashed\" : \"border-border/40\",\n        className,\n      )}\n      {...props}\n    >\n      {Icon ? (\n        <span className=\"grid size-12 place-items-center rounded-2xl bg-primary/10 text-primary\">\n          <Icon className=\"size-6\" aria-hidden=\"true\" />\n        </span>\n      ) : null}\n      {eyebrow ? (\n        <p className=\"font-mono text-label-caps text-muted-foreground uppercase\">{eyebrow}</p>\n      ) : null}\n      <h3 className=\"font-display text-foreground text-title-md\">{title}</h3>\n      {description ? (\n        <p className=\"max-w-md text-body-sm text-muted-foreground\">{description}</p>\n      ) : null}\n      {action ? <div className=\"mt-2\">{action}</div> : null}\n    </div>\n  ),\n);\nEmptyState.displayName = \"EmptyState\";\n\nexport { EmptyState };\n"]}

package/dist/chunk-TK24HQJJ.js

@@ -0,0 +1,128 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { AlertCircle } from 'lucide-react';
+import { createContext, forwardRef, useId, Children, isValidElement, cloneElement, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var FormFieldContext = createContext(null);
+function useFormField() {
+  const ctx = useContext(FormFieldContext);
+  if (!ctx) throw new Error("FormField subcomponents must be inside <FormField>.");
+  return ctx;
+}
+var rootGapBySize = {
+  sm: "gap-1",
+  md: "gap-1.5",
+  lg: "gap-2"
+};
+var FormFieldRoot = forwardRef(
+  ({ className, id: idProp, invalid, size = "md", ...props }, ref) => {
+    const auto = useId();
+    const fieldId = idProp ?? `field-${auto}`;
+    const ctx = {
+      fieldId,
+      hintId: `${fieldId}-hint`,
+      errorId: `${fieldId}-error`,
+      hasError: !!invalid,
+      size
+    };
+    return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ref, className: cn("grid", rootGapBySize[size], className), ...props }) });
+  }
+);
+FormFieldRoot.displayName = "FormField";
+var labelFontBySize = {
+  sm: "text-label-caps",
+  md: "text-body-sm",
+  lg: "text-body-md"
+};
+var hintFontBySize = {
+  sm: "text-label-caps",
+  md: "text-body-sm",
+  lg: "text-body-md"
+};
+var FormFieldLabel = forwardRef(
+  ({ className, required, children, ...props }, ref) => {
+    const { fieldId, size } = useFormField();
+    return /* @__PURE__ */ jsxs(
+      LabelPrimitive.Root,
+      {
+        ref,
+        htmlFor: fieldId,
+        className: cn(
+          "inline-flex items-center gap-1 font-medium font-sans text-foreground",
+          labelFontBySize[size],
+          "peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          required ? /* @__PURE__ */ jsx("span", { className: "text-destructive", "aria-hidden": "true", children: "*" }) : null
+        ]
+      }
+    );
+  }
+);
+FormFieldLabel.displayName = "FormField.Label";
+var FormFieldControl = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { fieldId, hintId, errorId, hasError } = useFormField();
+    const described = hasError ? errorId : hintId;
+    const only = Children.only(children);
+    const cloned = isValidElement(only) ? cloneElement(only, {
+      id: fieldId,
+      "aria-describedby": described,
+      "aria-invalid": hasError || void 0
+    }) : only;
+    return /* @__PURE__ */ jsx("div", { ref, ...props, children: cloned });
+  }
+);
+FormFieldControl.displayName = "FormField.Control";
+var FormFieldHint = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { hintId, hasError, size } = useFormField();
+    if (hasError) return null;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: hintId,
+        className: cn("text-muted-foreground", hintFontBySize[size], className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+FormFieldHint.displayName = "FormField.Hint";
+var FormFieldError = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { errorId, hasError, size } = useFormField();
+    if (!hasError) return null;
+    return /* @__PURE__ */ jsxs(
+      "p",
+      {
+        ref,
+        id: errorId,
+        role: "alert",
+        className: cn("flex items-center gap-1 text-destructive", hintFontBySize[size], className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+FormFieldError.displayName = "FormField.Error";
+var FormField = /* @__PURE__ */ Object.assign(FormFieldRoot, {
+  Label: FormFieldLabel,
+  Control: FormFieldControl,
+  Hint: FormFieldHint,
+  Error: FormFieldError
+});
+
+export { FormField };
+//# sourceMappingURL=chunk-TK24HQJJ.js.map
+//# sourceMappingURL=chunk-TK24HQJJ.js.map

package/dist/chunk-TK24HQJJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/form-field/form-field.tsx"],"names":[],"mappings":"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","file":"chunk-TK24HQJJ.js","sourcesContent":["import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { AlertCircle } from \"lucide-react\";\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useId,\n} from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * FormField — composition wrapper for accessible form rows.\n *\n * Provides context with a generated `id`, so children (Label, Input, Hint,\n * Error) wire themselves via `htmlFor` / `id` / `aria-describedby` without\n * the consumer having to thread IDs manually.\n *\n * Composition:\n *   <FormField>\n *     <FormField.Label required>Email</FormField.Label>\n *     <FormField.Control>\n *       <Input type=\"email\" placeholder=\"…\" />\n *     </FormField.Control>\n *     <FormField.Hint>We never share your email.</FormField.Hint>\n *     <FormField.Error>{error}</FormField.Error>\n *   </FormField>\n *\n * Errors take precedence over hints (only one of them shows at once).\n */\n\ntype FormFieldSize = \"sm\" | \"md\" | \"lg\";\n\ninterface FormFieldContextValue {\n  fieldId: string;\n  hintId: string;\n  errorId: string;\n  hasError: boolean;\n  size: FormFieldSize;\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue | null>(null);\n\nfunction useFormField(): FormFieldContextValue {\n  const ctx = useContext(FormFieldContext);\n  if (!ctx) throw new Error(\"FormField subcomponents must be inside <FormField>.\");\n  return ctx;\n}\n\ninterface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** Optional explicit id override. */\n  id?: string;\n  /** Marks the field as invalid; switches Hint → Error and toggles aria. */\n  invalid?: boolean;\n  /**\n   * Size scale propagated to Label / Hint / Error subparts via Context.\n   * Default `md` preserves prior behavior. Subparts do NOT accept a `size`\n   * prop of their own — use `className` for granular tweaks (EC-8).\n   */\n  size?: FormFieldSize;\n}\n\nconst rootGapBySize: Record<FormFieldSize, string> = {\n  sm: \"gap-1\",\n  md: \"gap-1.5\",\n  lg: \"gap-2\",\n};\n\nconst FormFieldRoot = forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ className, id: idProp, invalid, size = \"md\", ...props }, ref) => {\n    const auto = useId();\n    const fieldId = idProp ?? `field-${auto}`;\n    const ctx: FormFieldContextValue = {\n      fieldId,\n      hintId: `${fieldId}-hint`,\n      errorId: `${fieldId}-error`,\n      hasError: !!invalid,\n      size,\n    };\n    return (\n      <FormFieldContext.Provider value={ctx}>\n        <div ref={ref} className={cn(\"grid\", rootGapBySize[size], className)} {...props} />\n      </FormFieldContext.Provider>\n    );\n  },\n);\nFormFieldRoot.displayName = \"FormField\";\n\nconst labelFontBySize: Record<FormFieldSize, string> = {\n  sm: \"text-label-caps\",\n  md: \"text-body-sm\",\n  lg: \"text-body-md\",\n};\n\nconst hintFontBySize: Record<FormFieldSize, string> = {\n  sm: \"text-label-caps\",\n  md: \"text-body-sm\",\n  lg: \"text-body-md\",\n};\n\ninterface FormFieldLabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {\n  required?: boolean;\n}\n\n// Inlined label markup (was importing `<Label>` from sibling primitive).\n// BLOCKER-001 / D2: form-field stays in primitives/ but cannot cross-import.\n// Uses the same Radix LabelPrimitive primitive that the standalone `<Label>`\n// uses, with identical Tailwind tokens — visual parity is preserved.\nconst FormFieldLabel = forwardRef<ElementRef<typeof LabelPrimitive.Root>, FormFieldLabelProps>(\n  ({ className, required, children, ...props }, ref) => {\n    const { fieldId, size } = useFormField();\n    return (\n      <LabelPrimitive.Root\n        ref={ref}\n        htmlFor={fieldId}\n        className={cn(\n          \"inline-flex items-center gap-1 font-medium font-sans text-foreground\",\n          labelFontBySize[size],\n          \"peer-disabled:cursor-not-allowed peer-disabled:opacity-60\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {required ? (\n          <span className=\"text-destructive\" aria-hidden=\"true\">\n            *\n          </span>\n        ) : null}\n      </LabelPrimitive.Root>\n    );\n  },\n);\nFormFieldLabel.displayName = \"FormField.Label\";\n\nconst FormFieldControl = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ children, ...props }, ref) => {\n    const { fieldId, hintId, errorId, hasError } = useFormField();\n    const described = hasError ? errorId : hintId;\n    // Children.only enforces exactly one child element (the form control) so we\n    // can safely clone it with the wiring props (id + aria-describedby + aria-invalid).\n    // The previous implementation spread the element object directly which relied\n    // on React's internal `$$typeof` invariant and silently dropped `ref` — the\n    // cloneElement path preserves both `ref` and `key`.\n    const only = Children.only(children) as ReactElement;\n    const cloned = isValidElement(only)\n      ? cloneElement(only, {\n          id: fieldId,\n          \"aria-describedby\": described,\n          \"aria-invalid\": hasError || undefined,\n        } as Partial<typeof only.props>)\n      : only;\n    return (\n      <div ref={ref} {...props}>\n        {cloned}\n      </div>\n    );\n  },\n);\nFormFieldControl.displayName = \"FormField.Control\";\n\nconst FormFieldHint = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { hintId, hasError, size } = useFormField();\n    if (hasError) return null;\n    return (\n      <p\n        ref={ref}\n        id={hintId}\n        className={cn(\"text-muted-foreground\", hintFontBySize[size], className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nFormFieldHint.displayName = \"FormField.Hint\";\n\nconst FormFieldError = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { errorId, hasError, size } = useFormField();\n    if (!hasError) return null;\n    return (\n      <p\n        ref={ref}\n        id={errorId}\n        role=\"alert\"\n        className={cn(\"flex items-center gap-1 text-destructive\", hintFontBySize[size], className)}\n        {...props}\n      >\n        <AlertCircle className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n        {children as ReactNode}\n      </p>\n    );\n  },\n);\nFormFieldError.displayName = \"FormField.Error\";\n\nconst FormField = /*#__PURE__*/ Object.assign(FormFieldRoot, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  Hint: FormFieldHint,\n  Error: FormFieldError,\n});\n\nexport { FormField };\n"]}