@theokit/ui 0.13.0

package/dist/chunk-4WKO3G5C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/confirm-dialog/confirm-dialog.tsx"],"names":[],"mappings":"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","file":"chunk-4WKO3G5C.js","sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Button } from \"../../primitives/button/index.js\";\nimport { Dialog } from \"../../primitives/dialog/index.js\";\nimport { Input } from \"../../primitives/input/index.js\";\n\n/**\n * ConfirmDialog — controlled confirmation modal built on `Dialog`.\n *\n * Focuses Cancel on open (deliberate — NOT the destructive button).\n * `intent=\"destructive\"` styles the confirm button with the destructive\n * variant. `confirmationPhrase` enables typed-confirmation guard:\n * the confirm button is disabled until the input value matches the\n * phrase exactly (case-sensitive). An empty string phrase is treated\n * as \"no phrase required\" (`!!confirmationPhrase`). Pressing Enter in\n * the input triggers confirm when `canConfirm` is true.\n *\n * `onConfirm` can be async. While the returned promise is pending,\n * both buttons are disabled and a `Loader2` spinner appears. On\n * resolve, the dialog closes via `onOpenChange(false)`. On reject,\n * the dialog stays open so the consumer can show their own error.\n *\n * @example\n *   <ConfirmDialog\n *     open={open} onOpenChange={setOpen}\n *     title=\"Delete project\"\n *     description=\"This cannot be undone.\"\n *     intent=\"destructive\"\n *     confirmationPhrase=\"my-project\"\n *     onConfirm={async () => api.deleteProject(id)}\n *   />\n */\nexport interface ConfirmDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: ReactNode;\n  description: ReactNode;\n  confirmLabel?: ReactNode;\n  cancelLabel?: ReactNode;\n  intent?: \"default\" | \"destructive\";\n  confirmationPhrase?: string;\n  onConfirm: () => void | Promise<void>;\n  loading?: boolean;\n}\n\nconst ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n  (\n    {\n      open,\n      onOpenChange,\n      title,\n      description,\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      intent = \"default\",\n      confirmationPhrase,\n      onConfirm,\n      loading: externalLoading,\n    },\n    ref,\n  ) => {\n    const [phraseInput, setPhraseInput] = useState(\"\");\n    const [internalLoading, setInternalLoading] = useState(false);\n    const cancelRef = useRef<HTMLButtonElement | null>(null);\n\n    const phraseRequired = !!confirmationPhrase;\n    const phraseMatched = phraseRequired ? phraseInput === confirmationPhrase : true;\n    const showLoading = externalLoading === true || internalLoading;\n    const canConfirm = phraseMatched && !showLoading;\n\n    // Reset phrase input whenever the dialog closes.\n    useEffect(() => {\n      if (!open) setPhraseInput(\"\");\n    }, [open]);\n\n    // Auto-focus Cancel on open (NOT confirm — destructive safety).\n    useEffect(() => {\n      if (open) {\n        const id = window.setTimeout(() => cancelRef.current?.focus(), 0);\n        return () => window.clearTimeout(id);\n      }\n    }, [open]);\n\n    async function handleConfirm() {\n      if (!canConfirm) return;\n      setInternalLoading(true);\n      try {\n        await onConfirm();\n        onOpenChange(false);\n      } catch {\n        // Stay open; consumer surfaces error.\n      } finally {\n        setInternalLoading(false);\n      }\n    }\n\n    function handleInputKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n      if (e.key === \"Enter\" && canConfirm) {\n        e.preventDefault();\n        void handleConfirm();\n      }\n    }\n\n    return (\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <Dialog.Content ref={ref}>\n          <Dialog.Header>\n            <Dialog.Title>{title}</Dialog.Title>\n            <Dialog.Description>{description}</Dialog.Description>\n          </Dialog.Header>\n          {phraseRequired ? (\n            <Dialog.Body>\n              <p className=\"mb-2 text-body-sm text-muted-foreground\">\n                Type{\" \"}\n                <code className=\"rounded bg-muted px-1 py-0.5 font-mono text-foreground\">\n                  {confirmationPhrase}\n                </code>{\" \"}\n                to confirm\n              </p>\n              <Input\n                value={phraseInput}\n                onChange={(e) => setPhraseInput(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                autoComplete=\"off\"\n                aria-label=\"Confirmation phrase\"\n              />\n            </Dialog.Body>\n          ) : null}\n          <Dialog.Footer>\n            <Button\n              ref={cancelRef}\n              variant=\"secondary\"\n              onClick={() => onOpenChange(false)}\n              disabled={showLoading}\n            >\n              {cancelLabel}\n            </Button>\n            <Button\n              variant={intent === \"destructive\" ? \"destructive\" : \"primary\"}\n              onClick={() => void handleConfirm()}\n              disabled={!canConfirm}\n              data-confirm\n            >\n              {showLoading ? <Loader2 aria-hidden=\"true\" className=\"size-4 animate-spin\" /> : null}\n              {confirmLabel}\n            </Button>\n          </Dialog.Footer>\n        </Dialog.Content>\n      </Dialog>\n    );\n  },\n);\nConfirmDialog.displayName = \"ConfirmDialog\";\n\nexport { ConfirmDialog };\n"]}

package/dist/chunk-53XPKI7Q.js

@@ -0,0 +1,97 @@
+import { Button } from './chunk-5VOSCJKQ.js';
+import { cn } from './chunk-EWDN56AS.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-53XPKI7Q.js.map
+//# sourceMappingURL=chunk-53XPKI7Q.js.map

package/dist/chunk-53XPKI7Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/approval-card/approval-card.tsx"],"names":[],"mappings":"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","file":"chunk-53XPKI7Q.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-55TDVDPG.js

@@ -0,0 +1,58 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { ArrowRight } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TONE_CLASS = {
+  primary: "bg-primary text-primary-foreground",
+  accent: "bg-accent text-accent-foreground",
+  success: "bg-success text-success-foreground",
+  warning: "bg-warning text-warning-foreground",
+  info: "bg-info text-info-foreground",
+  muted: "bg-muted text-foreground"
+};
+function Avatar({ party }) {
+  const inits = party.initials ?? party.name.slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "grid size-7 place-items-center rounded-full font-bold font-mono text-label",
+          TONE_CLASS[party.tone ?? "primary"]
+        ),
+        "aria-hidden": "true",
+        children: inits
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "font-medium font-mono text-code-sm text-foreground", children: party.name })
+  ] });
+}
+var AgentHandoff = forwardRef(
+  ({ className, from, to, reason, footer, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "article",
+    {
+      ref,
+      className: cn(
+        "grid gap-2 rounded-lg border border-primary/30 border-dashed bg-primary/5 px-4 py-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Avatar, { party: from }),
+          /* @__PURE__ */ jsx(ArrowRight, { className: "size-4 text-primary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(Avatar, { party: to }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: "handoff" })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-body-sm text-foreground", children: reason }),
+        footer ? /* @__PURE__ */ jsx("p", { className: "font-mono text-label text-muted-foreground", children: footer }) : null
+      ]
+    }
+  )
+);
+AgentHandoff.displayName = "AgentHandoff";
+
+export { AgentHandoff };
+//# sourceMappingURL=chunk-55TDVDPG.js.map
+//# sourceMappingURL=chunk-55TDVDPG.js.map

package/dist/chunk-55TDVDPG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/agent-handoff/agent-handoff.tsx"],"names":[],"mappings":";;;;;AAuBA,IAAM,UAAA,GAAgE;AAAA,EACpE,OAAA,EAAS,oCAAA;AAAA,EACT,MAAA,EAAQ,kCAAA;AAAA,EACR,OAAA,EAAS,oCAAA;AAAA,EACT,OAAA,EAAS,oCAAA;AAAA,EACT,IAAA,EAAM,8BAAA;AAAA,EACN,KAAA,EAAO;AACT,CAAA;AAEA,SAAS,MAAA,CAAO,EAAE,KAAA,EAAM,EAA4B;AAClD,EAAA,MAAM,KAAA,GAAQ,MAAM,QAAA,IAAY,KAAA,CAAM,KAAK,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,CAAE,WAAA,EAAY;AACnE,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gCAAA,EACd,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,4EAAA;AAAA,UACA,UAAA,CAAW,KAAA,CAAM,IAAA,IAAQ,SAAS;AAAA,SACpC;AAAA,QACA,aAAA,EAAY,MAAA;AAAA,QAEX,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oDAAA,EAAsD,gBAAM,IAAA,EAAK;AAAA,GAAA,EACnF,CAAA;AAEJ;AAOA,IAAM,YAAA,GAAe,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,IAAA,EAAM,EAAA,EAAI,QAAQ,MAAA,EAAQ,GAAG,KAAA,EAAM,EAAG,GAAA,qBAClD,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,qFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,QAAA,EAAA,EAAO,WAAU,yBAAA,EAChB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAO,IAAA,EAAM,CAAA;AAAA,0BACrB,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,qBAAA,EAAsB,eAAY,MAAA,EAAO,CAAA;AAAA,0BAC/D,GAAA,CAAC,MAAA,EAAA,EAAO,KAAA,EAAO,EAAA,EAAI,CAAA;AAAA,0BACnB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kFAAA,EAAmF,QAAA,EAAA,SAAA,EAEnG;AAAA,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8BAAA,EAAgC,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,QACnD,yBAAS,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4CAAA,EAA8C,kBAAO,CAAA,GAAO;AAAA;AAAA;AAAA;AAGzF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-55TDVDPG.js","sourcesContent":["import { ArrowRight } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport interface HandoffParty {\n  /** Display name, e.g. \"planner\". */\n  name: string;\n  /** Optional avatar initials (max 2 chars). */\n  initials?: string;\n  /** Identity tone matching AgentProfile. */\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"info\" | \"muted\";\n}\n\ninterface AgentHandoffProps extends HTMLAttributes<HTMLElement> {\n  from: HandoffParty;\n  to: HandoffParty;\n  /** What is being handed off — short reason / payload preview. */\n  reason: ReactNode;\n  /** Optional metadata footer (e.g. timestamp, token budget). */\n  footer?: ReactNode;\n}\n\nconst TONE_CLASS: Record<NonNullable<HandoffParty[\"tone\"]>, string> = {\n  primary: \"bg-primary text-primary-foreground\",\n  accent: \"bg-accent text-accent-foreground\",\n  success: \"bg-success text-success-foreground\",\n  warning: \"bg-warning text-warning-foreground\",\n  info: \"bg-info text-info-foreground\",\n  muted: \"bg-muted text-foreground\",\n};\n\nfunction Avatar({ party }: { party: HandoffParty }) {\n  const inits = party.initials ?? party.name.slice(0, 2).toUpperCase();\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span\n        className={cn(\n          \"grid size-7 place-items-center rounded-full font-bold font-mono text-label\",\n          TONE_CLASS[party.tone ?? \"primary\"],\n        )}\n        aria-hidden=\"true\"\n      >\n        {inits}\n      </span>\n      <span className=\"font-medium font-mono text-code-sm text-foreground\">{party.name}</span>\n    </span>\n  );\n}\n\n/**\n * AgentHandoff — visual marker of one agent delegating to another. Pairs\n * with AgentProfile for the identity tones; place it in the timeline so the\n * user sees the baton being passed.\n */\nconst AgentHandoff = forwardRef<HTMLElement, AgentHandoffProps>(\n  ({ className, from, to, reason, footer, ...props }, ref) => (\n    <article\n      ref={ref}\n      className={cn(\n        \"grid gap-2 rounded-lg border border-primary/30 border-dashed bg-primary/5 px-4 py-3\",\n        className,\n      )}\n      {...props}\n    >\n      <header className=\"flex items-center gap-2\">\n        <Avatar party={from} />\n        <ArrowRight className=\"size-4 text-primary\" aria-hidden=\"true\" />\n        <Avatar party={to} />\n        <span className=\"ml-auto font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n          handoff\n        </span>\n      </header>\n      <p className=\"text-body-sm text-foreground\">{reason}</p>\n      {footer ? <p className=\"font-mono text-label text-muted-foreground\">{footer}</p> : null}\n    </article>\n  ),\n);\nAgentHandoff.displayName = \"AgentHandoff\";\n\nexport { AgentHandoff };\n"]}

package/dist/chunk-56BJLFW7.js

@@ -0,0 +1,26 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var ToolResult = forwardRef(
+  ({ className, variant = "text", children, ...props }, ref) => {
+    if (variant === "text") {
+      return /* @__PURE__ */ jsx("div", { ref, className: cn("text-body-sm text-muted-foreground", className), ...props, children });
+    }
+    return /* @__PURE__ */ jsx("div", { ref, className, ...props, children: /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: cn(
+          "overflow-x-auto whitespace-pre-wrap font-mono text-code-sm",
+          variant === "json" ? "text-primary-glow" : "text-foreground"
+        ),
+        children
+      }
+    ) });
+  }
+);
+ToolResult.displayName = "ToolResult";
+
+export { ToolResult };
+//# sourceMappingURL=chunk-56BJLFW7.js.map
+//# sourceMappingURL=chunk-56BJLFW7.js.map

package/dist/chunk-56BJLFW7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/tool-result/tool-result.tsx"],"names":[],"mappings":";;;;AAsBA,IAAM,UAAA,GAAa,UAAA;AAAA,EACjB,CAAC,EAAE,SAAA,EAAW,OAAA,GAAU,QAAQ,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC5D,IAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,MAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,EAAA,CAAG,sCAAsC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChF,QAAA,EACH,CAAA;AAAA,IAEJ;AACA,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAuB,GAAG,KAAA,EACvC,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,4DAAA;AAAA,UACA,OAAA,KAAY,SAAS,mBAAA,GAAsB;AAAA,SAC7C;AAAA,QAEC;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;AACA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-56BJLFW7.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\ntype Variant = \"text\" | \"code\" | \"json\";\n\ninterface ToolResultProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: Variant;\n  /**\n   * Pre-formatted content. For `code`/`json`, the component uses mono font\n   * and preserves whitespace. For `text`, normal body font.\n   */\n  children: ReactNode;\n}\n\n/**\n * ToolResult — formatted output of a tool invocation.\n *\n * Three quick variants: plain text, code (monospace), json (monospace, tinted).\n * Always rendered as a `<div>` for predictable prop typing; code/json variants\n * wrap children in `<pre>` internally.\n */\nconst ToolResult = forwardRef<HTMLDivElement, ToolResultProps>(\n  ({ className, variant = \"text\", children, ...props }, ref) => {\n    if (variant === \"text\") {\n      return (\n        <div ref={ref} className={cn(\"text-body-sm text-muted-foreground\", className)} {...props}>\n          {children}\n        </div>\n      );\n    }\n    return (\n      <div ref={ref} className={className} {...props}>\n        <pre\n          className={cn(\n            \"overflow-x-auto whitespace-pre-wrap font-mono text-code-sm\",\n            variant === \"json\" ? \"text-primary-glow\" : \"text-foreground\",\n          )}\n        >\n          {children}\n        </pre>\n      </div>\n    );\n  },\n);\nToolResult.displayName = \"ToolResult\";\n\nexport { ToolResult };\n"]}

package/dist/chunk-5HOQLE6Y.js

@@ -0,0 +1,35 @@
+import { useInLiveRegion } from './chunk-UGKI466V.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { Loader2 } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AgentStartingState = forwardRef(
+  ({ className, label = "Starting up\u2026", hint, ...props }, ref) => {
+    const inLiveRegion = useInLiveRegion();
+    return /* @__PURE__ */ jsxs(
+      "output",
+      {
+        ref,
+        "aria-live": inLiveRegion ? void 0 : "polite",
+        className: cn(
+          "flex items-center gap-3 rounded-xl border border-primary/30 border-dashed bg-primary/5 px-4 py-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin text-primary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { className: "grid", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-body-sm text-foreground", children: label }),
+            hint ? /* @__PURE__ */ jsx("span", { className: "text-body-sm text-muted-foreground", children: hint }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+AgentStartingState.displayName = "AgentStartingState";
+
+export { AgentStartingState };
+//# sourceMappingURL=chunk-5HOQLE6Y.js.map
+//# sourceMappingURL=chunk-5HOQLE6Y.js.map

package/dist/chunk-5HOQLE6Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/agent-starting-state/agent-starting-state.tsx"],"names":[],"mappings":";;;;;;AAmBA,IAAM,kBAAA,GAAqB,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,qBAAgB,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAE9D,IAAA,MAAM,eAAe,eAAA,EAAgB;AACrC,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAW,eAAe,MAAA,GAAY,QAAA;AAAA,QACtC,SAAA,EAAW,EAAA;AAAA,UACT,kGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,kCAAA,EAAmC,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BACzE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0CAAA,EAA4C,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,YACjE,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EAAsC,gBAAK,CAAA,GAAU;AAAA,WAAA,EAC/E;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA","file":"chunk-5HOQLE6Y.js","sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { OutputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { useInLiveRegion } from \"../../../lib/live-region-context.js\";\n\ninterface AgentStartingStateProps extends OutputHTMLAttributes<HTMLOutputElement> {\n  /** Title shown next to the spinner. Default \"Starting up…\". */\n  label?: ReactNode;\n  /** Optional secondary copy explaining the bootstrap step. */\n  hint?: ReactNode;\n}\n\n/**\n * AgentStartingState — full-width skeleton shown while the agent boots.\n *\n * Visual: violet spinner + label, optional hint below. Wrapped in a soft card.\n * Uses semantic `<output aria-live=\"polite\">` so screen readers announce the state.\n */\nconst AgentStartingState = forwardRef<HTMLOutputElement, AgentStartingStateProps>(\n  ({ className, label = \"Starting up…\", hint, ...props }, ref) => {\n    // T4.1 (MF-4): omit aria-live when nested inside a container live region.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <output\n        ref={ref}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        className={cn(\n          \"flex items-center gap-3 rounded-xl border border-primary/30 border-dashed bg-primary/5 px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <Loader2 className=\"size-4 animate-spin text-primary\" aria-hidden=\"true\" />\n        <div className=\"grid\">\n          <span className=\"font-medium text-body-sm text-foreground\">{label}</span>\n          {hint ? <span className=\"text-body-sm text-muted-foreground\">{hint}</span> : null}\n        </div>\n      </output>\n    );\n  },\n);\nAgentStartingState.displayName = \"AgentStartingState\";\n\nexport { AgentStartingState };\n"]}

package/dist/chunk-5TY3NYF5.js

@@ -0,0 +1,144 @@
+import { Input } from './chunk-B3VAJSZ2.js';
+import { Button } from './chunk-5VOSCJKQ.js';
+import { BadgeWithDot } from './chunk-P57HUMAE.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",
+      {
+        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 (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+          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-5TY3NYF5.js.map
+//# sourceMappingURL=chunk-5TY3NYF5.js.map

package/dist/chunk-5TY3NYF5.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-5TY3NYF5.js","sourcesContent":["import { 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 { 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        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 (typeof process !== \"undefined\" && process.env.NODE_ENV !== \"production\") {\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-5VOSCJKQ.js

@@ -0,0 +1,92 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg",
+    // NIT-004: `font-medium` (500) aligns with the design-system.md UI weight.
+    // Previously `font-bold` (700) exceeded the normative 400/500/600 weight
+    // range declared for Geist Sans in the Violet Forge identity.
+    "font-medium font-sans tracking-tight",
+    "transition-[box-shadow,background-color,color,transform] 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-background",
+    // Tailwind v4 dropped the `button { cursor: pointer }` preflight rule
+    // (https://tailwindcss.com/docs/upgrade-guide#default-button-cursor) so
+    // every <button> now shows the default arrow cursor. Restore the
+    // "clickable hand" explicitly for the Button primitive; the
+    // `disabled:pointer-events-none` rule below short-circuits cursor
+    // application for disabled state (no events → cursor is moot).
+    // `aria-disabled:cursor-default` is a belt-and-suspenders override
+    // for paths where pointer-events still flow.
+    "cursor-pointer disabled:cursor-default aria-disabled:cursor-default",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-primary text-primary-foreground",
+          "hover:bg-primary hover:shadow-glow",
+          "active:scale-[0.98] active:bg-primary-deep active:shadow-none"
+        ],
+        secondary: [
+          "border border-border bg-secondary text-secondary-foreground",
+          "hover:bg-muted",
+          "active:scale-[0.98]"
+        ],
+        accent: ["bg-accent text-accent-foreground", "hover:bg-accent-deep", "active:scale-[0.98]"],
+        ghost: [
+          "bg-transparent text-foreground",
+          "hover:bg-muted",
+          "active:scale-[0.98] active:bg-secondary"
+        ],
+        link: [
+          "bg-transparent text-primary underline-offset-4",
+          "hover:text-primary-deep hover:underline",
+          "h-auto p-0"
+        ],
+        destructive: [
+          "bg-destructive text-destructive-foreground",
+          "hover:bg-destructive/90",
+          "active:scale-[0.98]"
+        ]
+      },
+      size: {
+        sm: "h-8 px-3 text-body-sm",
+        // md: tier ajustável via density (CSS var on :root). See D3 ADR of
+        // faang-density-tightening plan. Default `comfortable` density makes
+        // this 36px (--theo-control-h: 2.25rem). sm and lg stay hardcoded.
+        md: "h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] text-body-sm",
+        lg: "h-11 px-4 text-body-md",
+        icon: "h-[var(--theo-control-h,2.25rem)] w-[var(--theo-control-h,2.25rem)] p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = forwardRef(
+  ({ className, variant, size, asChild = false, type, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        type: asChild ? void 0 : type ?? "button",
+        className: cn(buttonVariants({ variant, size }), className),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
+//# sourceMappingURL=chunk-5VOSCJKQ.js.map
+//# sourceMappingURL=chunk-5VOSCJKQ.js.map

package/dist/chunk-5VOSCJKQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/button/button.tsx"],"names":[],"mappings":";;;;;;AAqBA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB;AAAA,IACE,4EAAA;AAAA;AAAA;AAAA;AAAA,IAIA,sCAAA;AAAA,IACA,sFAAA;AAAA,IACA,0IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,qEAAA;AAAA,IACA,kDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,oCAAA;AAAA,UACA,oCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,SAAA,EAAW;AAAA,UACT,6DAAA;AAAA,UACA,gBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,MAAA,EAAQ,CAAC,kCAAA,EAAoC,sBAAA,EAAwB,qBAAqB,CAAA;AAAA,QAC1F,KAAA,EAAO;AAAA,UACL,gCAAA;AAAA,UACA,gBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAA,EAAM;AAAA,UACJ,gDAAA;AAAA,UACA,yCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,WAAA,EAAa;AAAA,UACX,4CAAA;AAAA,UACA,yBAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,uBAAA;AAAA;AAAA;AAAA;AAAA,QAIJ,EAAA,EAAI,qFAAA;AAAA,QACJ,EAAA,EAAI,wBAAA;AAAA,QACJ,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAQA,IAAM,MAAA,GAAS,UAAA;AAAA,EACb,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,OAAA,GAAU,KAAA,EAAO,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACtE,IAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,QAAA;AAC9B,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAM,OAAA,GAAU,MAAA,GAAa,IAAA,IAAQ,QAAA;AAAA,QACrC,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QACzD,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-5VOSCJKQ.js","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * Button — primitive action element in the Violet Forge design system.\n *\n * Variants:\n *   - primary    Theo violet fill, glow on hover (signature)\n *   - secondary  surface with hairline border\n *   - accent     burnt-sienna fill, celebratory actions\n *   - ghost      transparent, hover lifts surface\n *   - link       text-only, primary color, underline on hover\n *   - destructive  for irreversible actions\n *\n * Sizes: sm (32px) · md (40px, default) · lg (48px) · icon (square 40px)\n *\n * `asChild` swaps the root for the consumer's element (Radix Slot pattern).\n */\nconst buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg\",\n    // NIT-004: `font-medium` (500) aligns with the design-system.md UI weight.\n    // Previously `font-bold` (700) exceeded the normative 400/500/600 weight\n    // range declared for Geist Sans in the Violet Forge identity.\n    \"font-medium font-sans tracking-tight\",\n    \"transition-[box-shadow,background-color,color,transform] 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-background\",\n    // Tailwind v4 dropped the `button { cursor: pointer }` preflight rule\n    // (https://tailwindcss.com/docs/upgrade-guide#default-button-cursor) so\n    // every <button> now shows the default arrow cursor. Restore the\n    // \"clickable hand\" explicitly for the Button primitive; the\n    // `disabled:pointer-events-none` rule below short-circuits cursor\n    // application for disabled state (no events → cursor is moot).\n    // `aria-disabled:cursor-default` is a belt-and-suspenders override\n    // for paths where pointer-events still flow.\n    \"cursor-pointer disabled:cursor-default aria-disabled:cursor-default\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          \"bg-primary text-primary-foreground\",\n          \"hover:bg-primary hover:shadow-glow\",\n          \"active:scale-[0.98] active:bg-primary-deep active:shadow-none\",\n        ],\n        secondary: [\n          \"border border-border bg-secondary text-secondary-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98]\",\n        ],\n        accent: [\"bg-accent text-accent-foreground\", \"hover:bg-accent-deep\", \"active:scale-[0.98]\"],\n        ghost: [\n          \"bg-transparent text-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98] active:bg-secondary\",\n        ],\n        link: [\n          \"bg-transparent text-primary underline-offset-4\",\n          \"hover:text-primary-deep hover:underline\",\n          \"h-auto p-0\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground\",\n          \"hover:bg-destructive/90\",\n          \"active:scale-[0.98]\",\n        ],\n      },\n      size: {\n        sm: \"h-8 px-3 text-body-sm\",\n        // md: tier ajustável via density (CSS var on :root). See D3 ADR of\n        // faang-density-tightening plan. Default `comfortable` density makes\n        // this 36px (--theo-control-h: 2.25rem). sm and lg stay hardcoded.\n        md: \"h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] text-body-sm\",\n        lg: \"h-11 px-4 text-body-md\",\n        icon: \"h-[var(--theo-control-h,2.25rem)] w-[var(--theo-control-h,2.25rem)] p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, type, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        ref={ref}\n        type={asChild ? undefined : (type ?? \"button\")}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n"]}