@elabs-ai/components-ui 4.2.0 → 5.0.0

package/dist/chunk-EKY3A5LO.js

@@ -0,0 +1,133 @@
+"use client";
+import {
+  buttonVariants
+} from "./chunk-VA2OONPE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/alert-dialog/alert-dialog.tsx
+import {
+  forwardRef
+} from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive.Portal;
+var AlertDialogOverlay = forwardRef(function AlertDialogOverlay2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Overlay,
+    {
+      ref,
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-overlay backdrop-blur-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var AlertDialogContent = forwardRef(function AlertDialogContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        ref,
+        "data-slot": "alert-dialog-content",
+        className: cn(
+          // `max-h` + `overflow-y-auto`: without a height ceiling, a long body
+          // (a big diff, a long list of items to confirm) overflows past both
+          // viewport edges with its actions unreachable — the `-translate-y-1/2`
+          // centring only makes this worse by pushing the top half off-screen.
+          "fixed left-1/2 top-1/2 z-50 grid max-h-[85dvh] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-card p-6 text-card-foreground shadow-dialog data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+});
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn("flex flex-col gap-1.5 text-start", className),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+var AlertDialogTitle = forwardRef(function AlertDialogTitle2({ className, ...props }, ref) {
+  return (
+    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Title,
+      {
+        ref,
+        "data-slot": "alert-dialog-title",
+        className: cn("text-title leading-none", className),
+        ...props
+      }
+    )
+  );
+});
+var AlertDialogDescription = forwardRef(function AlertDialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    {
+      ref,
+      "data-slot": "alert-dialog-description",
+      className: cn("text-body text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+var AlertDialogAction = forwardRef(function AlertDialogAction2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Action,
+    {
+      ref,
+      "data-slot": "alert-dialog-action",
+      className: cn(buttonVariants(), className),
+      ...props
+    }
+  );
+});
+var AlertDialogCancel = forwardRef(function AlertDialogCancel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Cancel,
+    {
+      ref,
+      "data-slot": "alert-dialog-cancel",
+      className: cn(buttonVariants({ variant: "outline" }), className),
+      ...props
+    }
+  );
+});
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel
+};
+//# sourceMappingURL=chunk-EKY3A5LO.js.map

package/dist/chunk-EKY3A5LO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from \"react\";\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport { cn } from \"../../lib/cn\";\nimport { buttonVariants } from \"../button\";\n\nexport const AlertDialog = AlertDialogPrimitive.Root;\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\nexport const AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nconst AlertDialogOverlay = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(function AlertDialogOverlay({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-overlay backdrop-blur-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport const AlertDialogContent = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(function AlertDialogContent({ className, ...props }, ref) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          // `max-h` + `overflow-y-auto`: without a height ceiling, a long body\n          // (a big diff, a long list of items to confirm) overflows past both\n          // viewport edges with its actions unreachable — the `-translate-y-1/2`\n          // centring only makes this worse by pushing the top half off-screen.\n          \"fixed left-1/2 top-1/2 z-50 grid max-h-[85dvh] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-card p-6 text-card-foreground shadow-dialog data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n});\n\nexport function AlertDialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 text-start\", className)}\n      {...props}\n    />\n  );\n}\nexport function AlertDialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\nexport const AlertDialogTitle = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  return (\n    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"text-title leading-none\", className)}\n      {...props}\n    />\n  );\n});\nexport const AlertDialogDescription = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Description\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-body text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n});\nexport const AlertDialogAction = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Action>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(function AlertDialogAction({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Action\n      ref={ref}\n      data-slot=\"alert-dialog-action\"\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n});\nexport const AlertDialogCancel = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(function AlertDialogCancel({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      ref={ref}\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,OAIK;AACP,YAAY,0BAA0B;AAalC,cAiBA,YAjBA;AATG,IAAM,cAAmC;AACzC,IAAM,qBAA0C;AAChD,IAAM,oBAAyC;AAEtD,IAAM,qBAAqB,WAGzB,SAASA,oBAAmB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC1D,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,qBAAqB,WAGhC,SAASC,oBAAmB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC1D,SACE,qBAAC,qBACC;AAAA,wBAAC,sBAAmB;AAAA,IACpB;AAAA,MAAsB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,UAKT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ,CAAC;AAEM,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAmC;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oCAAoC,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ;AACO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAmC;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,0DAA0D,SAAS;AAAA,MAChF,GAAG;AAAA;AAAA,EACN;AAEJ;AACO,IAAM,mBAAmB,WAG9B,SAASC,kBAAiB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACxD;AAAA;AAAA,IAEE;AAAA,MAAsB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW,GAAG,2BAA2B,SAAS;AAAA,QACjD,GAAG;AAAA;AAAA,IACN;AAAA;AAEJ,CAAC;AACM,IAAM,yBAAyB,WAGpC,SAASC,wBAAuB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9D,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACM,IAAM,oBAAoB,WAG/B,SAASC,mBAAkB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACzD,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,GAAG,SAAS;AAAA,MACxC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACM,IAAM,oBAAoB,WAG/B,SAASC,mBAAkB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACzD,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,CAAC,GAAG,SAAS;AAAA,MAC9D,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["AlertDialogOverlay","AlertDialogContent","AlertDialogTitle","AlertDialogDescription","AlertDialogAction","AlertDialogCancel"]}

package/dist/chunk-EL3OXVOW.js

@@ -0,0 +1,31 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/skip-link/skip-link.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var SkipLink = forwardRef(function SkipLink2({ targetId = "main-content", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref,
+      "data-slot": "skip-link",
+      href: `#${targetId}`,
+      className: cn(
+        "sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:start-4 focus-visible:top-4 focus-visible:z-50",
+        "focus-visible:rounded-md focus-visible:bg-card focus-visible:px-3 focus-visible:py-2 focus-visible:text-body focus-visible:text-foreground focus-visible:shadow-ring-md",
+        "focus-ring",
+        className
+      ),
+      ...props,
+      children: children ?? "Skip to main content"
+    }
+  );
+});
+
+export {
+  SkipLink
+};
+//# sourceMappingURL=chunk-EL3OXVOW.js.map

package/dist/chunk-EL3OXVOW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/skip-link/skip-link.tsx"],"sourcesContent":["import { forwardRef, type ComponentProps } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nexport interface SkipLinkProps extends ComponentProps<\"a\"> {\n  /** The id of the landmark to jump to. Defaults to \"main-content\". */\n  targetId?: string;\n}\n\n/**\n * The first focusable element of an application: invisible until focused, then a\n * token-styled pill pinned to the top-start corner. Give the target element\n * `id={targetId}` and `tabIndex={-1}` so focus actually lands there.\n */\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(function SkipLink(\n  { targetId = \"main-content\", className, children, ...props },\n  ref,\n) {\n  return (\n    <a\n      ref={ref}\n      data-slot=\"skip-link\"\n      href={`#${targetId}`}\n      className={cn(\n        \"sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:start-4 focus-visible:top-4 focus-visible:z-50\",\n        \"focus-visible:rounded-md focus-visible:bg-card focus-visible:px-3 focus-visible:py-2 focus-visible:text-body focus-visible:text-foreground focus-visible:shadow-ring-md\",\n        \"focus-ring\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? \"Skip to main content\"}\n    </a>\n  );\n});\n"],"mappings":";;;;;;AAAA,SAAS,kBAAuC;AAkB5C;AALG,IAAM,WAAW,WAA6C,SAASA,UAC5E,EAAE,WAAW,gBAAgB,WAAW,UAAU,GAAG,MAAM,GAC3D,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,MAAM,IAAI,QAAQ;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ,CAAC;","names":["SkipLink"]}

package/dist/chunk-EP3U7OQ3.js

@@ -0,0 +1,18 @@
+"use client";
+
+// src/lib/agent-event-model.ts
+function agentEventOutcomeStatus(outcome) {
+  switch (outcome) {
+    case "ok":
+      return "complete";
+    case "blocked":
+      return "denied";
+    case "failed":
+      return "failed";
+  }
+}
+
+export {
+  agentEventOutcomeStatus
+};
+//# sourceMappingURL=chunk-EP3U7OQ3.js.map

package/dist/chunk-EP3U7OQ3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/agent-event-model.ts"],"sourcesContent":["/**\n * The lifecycle/hook-event model behind `AgentEvent` (`@elabs-ai/components-ai`,\n * #109) and the terminal CLI look-alike family's own event line (issue #117).\n *\n * Promoted here (not duplicated) because `@elabs-ai/components-ai` and\n * `@elabs-ai/components-terminal` are layer-2 DAG SIBLINGS and may not import\n * each other — `ui` is upstream of both\n * (docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4).\n * `agentEventOutcomeStatus` maps onto the existing closed 7-state `Status`\n * (`components/status-badge/status-badge.tsx`), which already lives in\n * `ui` — no eighth status is introduced.\n */\nimport type { Status } from \"../components/status-badge/status-badge\";\n\n/**\n * When an event fired relative to the action it gates. A separate, WIDER\n * vocabulary than `CheckResult.phase` (`\"before\" | \"after\"`, per-check): this\n * one also admits `\"lifecycle\"` for events with no gated action (a turn's\n * `user_prompt_submit`/`stop`). The two `phase` concepts answer different\n * questions — \"when did this event fire\" vs \"when did this check run\" — and\n * are never unified (§ 6.1 of the architecture decision above).\n */\nexport type AgentEventPhase = \"before\" | \"after\" | \"lifecycle\";\n\n/** An event's verdict. Maps onto the existing closed `Status` — see `agentEventOutcomeStatus`. */\nexport type AgentEventOutcome = \"ok\" | \"blocked\" | \"failed\";\n\n/**\n * `outcome` → the canonical 7-state `Status`. No new status value is added\n * (issue #109 acceptance criteria); `blocked` maps to `denied` — a runtime\n * hook refusing an action is the same shape as a human denying one.\n */\nexport function agentEventOutcomeStatus(outcome: AgentEventOutcome): Status {\n  switch (outcome) {\n    case \"ok\":\n      return \"complete\";\n    case \"blocked\":\n      return \"denied\";\n    case \"failed\":\n      return \"failed\";\n  }\n}\n"],"mappings":";;;AAgCO,SAAS,wBAAwB,SAAoC;AAC1E,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;","names":[]}

package/dist/chunk-EY2PGOG3.js

@@ -0,0 +1,246 @@
+"use client";
+import {
+  Heading,
+  Text
+} from "./chunk-FDPONOOT.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/dialog/dialog.tsx
+import {
+  forwardRef,
+  useCallback,
+  useRef
+} from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TABBABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"]):not([data-slot="dialog-body"])'
+].join(",");
+var dialogContentVariants = cva(
+  // `grid-cols-[minmax(0,1fr)]` (NOT the implicit `auto` column): grid items
+  // default to `min-width:auto`, so a `nowrap`/`truncate` child or a long
+  // unbreakable token (a file path, a URL) sets the column's min-content size and
+  // pushes the dialog past its `max-w-*`. A `minmax(0,1fr)` column floors that at
+  // 0, so inner `truncate`/`w-full` shrink instead of overflowing (#regression).
+  //
+  // Height/scroll (#341). Two mutually-exclusive regimes, picked by ANATOMY —
+  // never by a `scroll` prop (`.claude/rules/component-api.md`: `cva` is for
+  // visual axes, behaviour is composition):
+  //   1. NO `DialogBody` — the content box itself caps at the viewport
+  //      (`max-h-…` + `overflow-y-auto`) and scrolls as one column. Before this,
+  //      a taller-than-viewport dialog overflowed past BOTH viewport edges and
+  //      its top was unreachable (the `-translate-y-1/2` centring).
+  //   2. WITH a `DialogBody` — the `has-[…]` pair turns the content box into a
+  //      3-row grid (`auto | minmax(0,1fr) | auto`) and stops it scrolling, so a
+  //      fixed header and footer sandwich a body that owns the scroll. The pair
+  //      is INERT for every dialog that has no `DialogBody`.
+  // `size="full"`'s own `h-/max-h-/overflow-hidden` still wins — cva emits the
+  // base first, so tailwind-merge resolves the later variant utilities over it.
+  "fixed left-1/2 top-1/2 z-50 grid grid-cols-[minmax(0,1fr)] w-full -translate-x-1/2 -translate-y-1/2 gap-4 max-h-[calc(100dvh-2rem)] overflow-y-auto overscroll-contain has-[[data-slot=dialog-body]]:overflow-hidden has-[[data-slot=dialog-body]]:grid-rows-[auto_minmax(0,1fr)_auto] rounded-xl bg-card p-6 text-card-foreground shadow-dialog data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        lg: "max-w-lg",
+        xl: "max-w-3xl",
+        // `dvh` (dynamic viewport height), not `vh`: on mobile Safari/Chrome
+        // `vh` is measured against the LARGEST viewport (browser chrome
+        // collapsed), so `size="full"` overflows past the visible viewport
+        // while the address bar is showing.
+        full: "max-w-[95vw] h-[90dvh] max-h-[90dvh] overflow-hidden"
+      }
+    },
+    defaultVariants: { size: "lg" }
+  }
+);
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = forwardRef(function DialogOverlay2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      ref,
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-overlay backdrop-blur-overlay",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var DialogContent = forwardRef(function DialogContent2({ className, children, size, onOpenAutoFocus, ...props }, ref) {
+  const { t } = useLocale();
+  const contentRef = useRef(null);
+  const setRefs = useCallback(
+    (node) => {
+      contentRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const handleOpenAutoFocus = useCallback(
+    (event) => {
+      onOpenAutoFocus?.(event);
+      if (event.defaultPrevented) return;
+      const body = contentRef.current?.querySelector('[data-slot="dialog-body"]');
+      if (!body) return;
+      for (const candidate of body.querySelectorAll(TABBABLE)) {
+        candidate.focus({ preventScroll: true });
+        if (candidate.ownerDocument.activeElement !== candidate) continue;
+        event.preventDefault();
+        return;
+      }
+    },
+    [onOpenAutoFocus]
+  );
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref: setRefs,
+        "data-slot": "dialog-content",
+        className: cn(dialogContentVariants({ size }), className),
+        onOpenAutoFocus: handleOpenAutoFocus,
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "absolute end-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-ring",
+              "aria-label": t("close"),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-1.5 text-start", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+var DialogTitle = forwardRef(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      ref,
+      "data-slot": "dialog-title",
+      className: cn("text-title leading-none", className),
+      ...props
+    }
+  );
+});
+var DialogDescription = forwardRef(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      ref,
+      "data-slot": "dialog-description",
+      className: cn("text-body text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+var DialogBody = forwardRef(function DialogBody2({ className, tabIndex, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-body",
+      tabIndex: tabIndex ?? 0,
+      className: cn(
+        "-m-1 min-h-0 overflow-y-auto overscroll-contain p-1 scroll-p-1 focus-ring",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var DialogSection = forwardRef(function DialogSection2({ className, title, description, level = 3, actions, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      "data-slot": "dialog-section",
+      className: cn("flex flex-col gap-3", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(Heading, { level, size: "subtitle", "data-slot": "dialog-section-title", children: title }),
+            description ? /* @__PURE__ */ jsx(Text, { variant: "caption", tone: "muted", "data-slot": "dialog-section-description", children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions }) : null
+        ] }),
+        children
+      ]
+    }
+  );
+});
+
+export {
+  dialogContentVariants,
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogSection
+};
+//# sourceMappingURL=chunk-EY2PGOG3.js.map

package/dist/chunk-EY2PGOG3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n  type MutableRefObject,\n  type ReactNode,\n} from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\nimport { useLocale } from \"../locale-provider\";\nimport { Heading, Text } from \"../typography\";\n\n/**\n * The first keyboard-reachable control inside a dialog, EXCLUDING the\n * `DialogBody` wrapper itself. Deliberately a pragmatic selector rather than a\n * full tabbability implementation — Radix owns focus trapping; this only\n * reorders the opening target (see `DialogContent`'s `onOpenAutoFocus`).\n */\nconst TABBABLE = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"]):not([data-slot=\"dialog-body\"])',\n].join(\",\");\n\nexport const dialogContentVariants = cva(\n  // `grid-cols-[minmax(0,1fr)]` (NOT the implicit `auto` column): grid items\n  // default to `min-width:auto`, so a `nowrap`/`truncate` child or a long\n  // unbreakable token (a file path, a URL) sets the column's min-content size and\n  // pushes the dialog past its `max-w-*`. A `minmax(0,1fr)` column floors that at\n  // 0, so inner `truncate`/`w-full` shrink instead of overflowing (#regression).\n  //\n  // Height/scroll (#341). Two mutually-exclusive regimes, picked by ANATOMY —\n  // never by a `scroll` prop (`.claude/rules/component-api.md`: `cva` is for\n  // visual axes, behaviour is composition):\n  //   1. NO `DialogBody` — the content box itself caps at the viewport\n  //      (`max-h-…` + `overflow-y-auto`) and scrolls as one column. Before this,\n  //      a taller-than-viewport dialog overflowed past BOTH viewport edges and\n  //      its top was unreachable (the `-translate-y-1/2` centring).\n  //   2. WITH a `DialogBody` — the `has-[…]` pair turns the content box into a\n  //      3-row grid (`auto | minmax(0,1fr) | auto`) and stops it scrolling, so a\n  //      fixed header and footer sandwich a body that owns the scroll. The pair\n  //      is INERT for every dialog that has no `DialogBody`.\n  // `size=\"full\"`'s own `h-/max-h-/overflow-hidden` still wins — cva emits the\n  // base first, so tailwind-merge resolves the later variant utilities over it.\n  \"fixed left-1/2 top-1/2 z-50 grid grid-cols-[minmax(0,1fr)] w-full -translate-x-1/2 -translate-y-1/2 gap-4 max-h-[calc(100dvh-2rem)] overflow-y-auto overscroll-contain has-[[data-slot=dialog-body]]:overflow-hidden has-[[data-slot=dialog-body]]:grid-rows-[auto_minmax(0,1fr)_auto] rounded-xl bg-card p-6 text-card-foreground shadow-dialog data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n  {\n    variants: {\n      size: {\n        sm: \"max-w-sm\",\n        lg: \"max-w-lg\",\n        xl: \"max-w-3xl\",\n        // `dvh` (dynamic viewport height), not `vh`: on mobile Safari/Chrome\n        // `vh` is measured against the LARGEST viewport (browser chrome\n        // collapsed), so `size=\"full\"` overflows past the visible viewport\n        // while the address bar is showing.\n        full: \"max-w-[95vw] h-[90dvh] max-h-[90dvh] overflow-hidden\",\n      },\n    },\n    defaultVariants: { size: \"lg\" },\n  },\n);\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport const DialogOverlay = forwardRef<\n  ElementRef<typeof DialogPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(function DialogOverlay({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-overlay backdrop-blur-overlay\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport const DialogContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &\n    VariantProps<typeof dialogContentVariants>\n>(function DialogContent({ className, children, size, onOpenAutoFocus, ...props }, ref) {\n  const { t } = useLocale();\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const setRefs = useCallback(\n    (node: HTMLDivElement | null) => {\n      contentRef.current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as MutableRefObject<HTMLDivElement | null>).current = node;\n    },\n    [ref],\n  );\n\n  /**\n   * A `DialogBody` carries `tabIndex={0}` so a keyboard user can scroll it — but\n   * being the first tab stop would also make the scroll WRAPPER the dialog's\n   * opening focus target, which paints a focus ring around the whole body on\n   * open and skips the first field. Skip past it to the first real control\n   * INSIDE the body. Inert for dialogs with no `DialogBody`, so nothing that\n   * shipped before changes.\n   *\n   * Two things this deliberately does NOT do, both because getting them wrong\n   * strands the keyboard:\n   *   * It only prevents Radix's default once a candidate has *actually taken*\n   *     focus. A selector match is not proof of focusability — a `display:none`\n   *     candidate (the ubiquitous `<input type=\"file\" hidden>`) swallows\n   *     `.focus()`, so preventing the default for it would leave focus on the\n   *     TRIGGER, outside the modal.\n   *   * It gives up when the body holds no focusable control at all. Radix's own\n   *     fallback then focuses the body — which is the right target for a\n   *     text-only scroll region, and better than reaching past it to the\n   *     footer's primary action.\n   */\n  const handleOpenAutoFocus = useCallback(\n    (event: Event) => {\n      onOpenAutoFocus?.(event);\n      if (event.defaultPrevented) return;\n      const body = contentRef.current?.querySelector<HTMLElement>('[data-slot=\"dialog-body\"]');\n      if (!body) return;\n      for (const candidate of body.querySelectorAll<HTMLElement>(TABBABLE)) {\n        candidate.focus({ preventScroll: true });\n        if (candidate.ownerDocument.activeElement !== candidate) continue;\n        event.preventDefault();\n        return;\n      }\n    },\n    [onOpenAutoFocus],\n  );\n\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={setRefs}\n        data-slot=\"dialog-content\"\n        className={cn(dialogContentVariants({ size }), className)}\n        onOpenAutoFocus={handleOpenAutoFocus}\n        {...props}\n      >\n        {children}\n        <DialogPrimitive.Close\n          data-slot=\"dialog-close\"\n          className=\"absolute end-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-ring\"\n          aria-label={t(\"close\")}\n        >\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n});\n\nexport function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 text-start\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport const DialogTitle = forwardRef<\n  ElementRef<typeof DialogPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(function DialogTitle({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Title\n      ref={ref}\n      data-slot=\"dialog-title\"\n      className={cn(\"text-title leading-none\", className)}\n      {...props}\n    />\n  );\n});\n\nexport const DialogDescription = forwardRef<\n  ElementRef<typeof DialogPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(function DialogDescription({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      data-slot=\"dialog-description\"\n      className={cn(\"text-body text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n});\n\nexport type DialogBodyProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * The dialog's scroll owner (#341).\n *\n * Placing a `DialogBody` between `DialogHeader` and `DialogFooter` switches\n * `DialogContent` into its fixed-header/footer regime (see\n * `dialogContentVariants`): the header and footer stay put and ONLY this region\n * scrolls, so the primary action never scrolls out of view. Without it a dialog\n * behaves exactly as before — the anatomy is the switch, there is no `scroll`\n * prop.\n *\n * `overscroll-contain` stops the scroll chaining to the page underneath\n * (`.claude/rules/interaction-guidelines.md`, Touch & overscroll).\n *\n * **The `p-1`/`-m-1`/`scroll-p-1` trio reserves a focus-ring gutter (#425).**\n * Per CSS Overflow 3, authoring only `overflow-y-auto` still makes this a\n * two-axis scroll container (the `visible` axis computes to `auto` too), and a\n * scroll container clips at its **padding box**. With no padding of its own,\n * that padding box IS the content box, so a full-width child's border box\n * lands exactly on the clip edge — leaving 0px for a focus ring, which is\n * `box-shadow` (ink overflow: never part of the scrollable region, so it is\n * simply cut, not merely scrolled out of reach). `p-1` moves the scrollport\n * 4px outward on every side — enough for the library's widest outward paint\n * (`ring-2 ring-offset-2` = 4px) — and `-m-1` pulls the border box back by the\n * same amount so body content stays flush with `DialogHeader`/`DialogFooter`\n * instead of indenting 4px against them. `scroll-p-1` keeps a keyboard-driven\n * scroll-into-view (Tab landing on a control currently outside the scrollport)\n * from placing that control flush against the scrollport edge again.\n *\n * Two consumer-facing consequences: a larger `className` padding (e.g. `p-6`)\n * still wins through `tailwind-merge`, with the border box remaining 4px\n * outward; but **`className=\"p-0\"` re-opens the bug** — the merge kills `p-1`\n * while `-m-1` survives — so a consumer who genuinely wants no gutter must\n * clear both sides with `className=\"m-0 p-0\"`.\n *\n * Known, accepted residual: at `data-density=\"compact\"`, `--spacing` is\n * `0.222rem` (`density.css:97`), so `p-1` is 3.55px against a 4px ring — a\n * 0.45px shortfall on the outermost edge of a 2px stroke. Do not \"fix\" this\n * with a fixed-px override; that would break the density dial's contract.\n */\nexport const DialogBody = forwardRef<HTMLDivElement, DialogBodyProps>(function DialogBody(\n  { className, tabIndex, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"dialog-body\"\n      // A scroll container must be keyboard-operable (WCAG 2.1.1; axe's\n      // `scrollable-region-focusable`). A body holding only text has no focusable\n      // child to scroll from, so the region itself takes the tab stop. Pass\n      // `tabIndex={-1}` to opt out when the body always contains its own\n      // focusable content.\n      tabIndex={tabIndex ?? 0}\n      className={cn(\n        \"-m-1 min-h-0 overflow-y-auto overscroll-contain p-1 scroll-p-1 focus-ring\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport interface DialogSectionProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** The section heading. States what the group of fields is for. */\n  title: ReactNode;\n  /** One line of supporting context under the heading. */\n  description?: ReactNode;\n  /**\n   * Semantic heading level. `DialogTitle` renders an `<h2>`, so a section is an\n   * `<h3>` by default and an `<h4>` when nested a rung deeper.\n   */\n  level?: 3 | 4;\n  /** Section-scoped actions, aligned to the inline end of the heading row. */\n  actions?: ReactNode;\n}\n\n/**\n * A real section heading inside a dialog (#341).\n *\n * The recurring downstream defect was section labels rendering at the same size\n * as the field labels beneath them, which flattens a long form into one\n * undifferentiated list. The rungs are distinct BY TOKEN, not by eye:\n * `DialogTitle` `text-title` (1.25rem) > `DialogSection` `text-subtitle` (1rem) >\n * `Label` `text-body` (0.875rem).\n *\n * Deliberately NOT `SectionHeader` (`../section-header`): that is the page-level\n * `<h2>` row with an eyebrow, one rung too loud and one level too high inside a\n * dialog whose title already owns the `<h2>`.\n */\nexport const DialogSection = forwardRef<HTMLElement, DialogSectionProps>(function DialogSection(\n  { className, title, description, level = 3, actions, children, ...props },\n  ref,\n) {\n  return (\n    <section\n      ref={ref}\n      data-slot=\"dialog-section\"\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex min-w-0 flex-col gap-1\">\n          <Heading level={level} size=\"subtitle\" data-slot=\"dialog-section-title\">\n            {title}\n          </Heading>\n          {description ? (\n            <Text variant=\"caption\" tone=\"muted\" data-slot=\"dialog-section-description\">\n              {description}\n            </Text>\n          ) : null}\n        </div>\n        {actions ? <div className=\"shrink-0\">{actions}</div> : null}\n      </div>\n      {children}\n    </section>\n  );\n});\n"],"mappings":"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","names":["DialogOverlay","DialogContent","DialogTitle","DialogDescription","DialogBody","DialogSection"]}

package/dist/chunk-FAOX6A5D.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-FAOX6A5D.js.map

package/dist/chunk-FAOX6A5D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-FBJ2JSRA.js

@@ -0,0 +1,47 @@
+"use client";
+
+// src/lib/use-copy-to-clipboard.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var COPY_FEEDBACK_MS = 1500;
+function useCopyToClipboard(options) {
+  const resetAfterMs = options?.resetAfterMs ?? COPY_FEEDBACK_MS;
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(
+    () => () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    },
+    []
+  );
+  const copy = useCallback(
+    async (text) => {
+      if (typeof navigator === "undefined" || !navigator.clipboard) {
+        return false;
+      }
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        return false;
+      }
+      setCopied(true);
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        setCopied(false);
+      }, resetAfterMs);
+      return true;
+    },
+    [resetAfterMs]
+  );
+  return { copied, copy };
+}
+
+export {
+  COPY_FEEDBACK_MS,
+  useCopyToClipboard
+};
+//# sourceMappingURL=chunk-FBJ2JSRA.js.map

package/dist/chunk-FBJ2JSRA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/use-copy-to-clipboard.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\n/** How long the transient \"copied\" state stays true before it resets. */\nexport const COPY_FEEDBACK_MS = 1500;\n\nexport interface UseCopyToClipboardOptions {\n  /** ms the `copied` flag stays true. Default: {@link COPY_FEEDBACK_MS}. */\n  resetAfterMs?: number;\n}\n\nexport interface CopyToClipboard {\n  /** True for `resetAfterMs` after a successful copy. */\n  copied: boolean;\n  /** Writes `text` to the clipboard. Resolves `false` when it could not. */\n  copy: (text: string) => Promise<boolean>;\n}\n\n/**\n * Copy-to-clipboard with a transient confirmation flag.\n *\n * One implementation for the whole library — the copy button in\n * `@elabs-ai/components-editor` and `CopyableValue` share it, so the\n * timing, the unmount cleanup and the \"no clipboard here\" answer are defined\n * once instead of re-derived per component.\n *\n * `navigator.clipboard` is absent under SSR, in jsdom, and in any insecure\n * (non-`https`, non-`localhost`) context. That is reported as `false` rather\n * than thrown: a copy affordance failing is a papercut, not a crash, and the\n * caller decides whether to say anything about it. The deprecated\n * `document.execCommand(\"copy\")` fallback is deliberately not used.\n */\nexport function useCopyToClipboard(options?: UseCopyToClipboardOptions): CopyToClipboard {\n  const resetAfterMs = options?.resetAfterMs ?? COPY_FEEDBACK_MS;\n  const [copied, setCopied] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // A component that unmounts inside the feedback window must not have its\n  // state set afterwards, and a second copy must restart the window, not race\n  // the first one's reset.\n  useEffect(\n    () => () => {\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current);\n      }\n    },\n    [],\n  );\n\n  const copy = useCallback(\n    async (text: string): Promise<boolean> => {\n      if (typeof navigator === \"undefined\" || !navigator.clipboard) {\n        return false;\n      }\n      try {\n        await navigator.clipboard.writeText(text);\n      } catch {\n        return false;\n      }\n      setCopied(true);\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current);\n      }\n      timerRef.current = setTimeout(() => {\n        timerRef.current = null;\n        setCopied(false);\n      }, resetAfterMs);\n      return true;\n    },\n    [resetAfterMs],\n  );\n\n  return { copied, copy };\n}\n"],"mappings":";;;AAEA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAGlD,IAAM,mBAAmB;AA4BzB,SAAS,mBAAmB,SAAsD;AACvF,QAAM,eAAe,SAAS,gBAAgB;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,WAAW,OAA6C,IAAI;AAKlE;AAAA,IACE,MAAM,MAAM;AACV,UAAI,SAAS,YAAY,MAAM;AAC7B,qBAAa,SAAS,OAAO;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,OAAO;AAAA,IACX,OAAO,SAAmC;AACxC,UAAI,OAAO,cAAc,eAAe,CAAC,UAAU,WAAW;AAC5D,eAAO;AAAA,MACT;AACA,UAAI;AACF,cAAM,UAAU,UAAU,UAAU,IAAI;AAAA,MAC1C,QAAQ;AACN,eAAO;AAAA,MACT;AACA,gBAAU,IAAI;AACd,UAAI,SAAS,YAAY,MAAM;AAC7B,qBAAa,SAAS,OAAO;AAAA,MAC/B;AACA,eAAS,UAAU,WAAW,MAAM;AAClC,iBAAS,UAAU;AACnB,kBAAU,KAAK;AAAA,MACjB,GAAG,YAAY;AACf,aAAO;AAAA,IACT;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SAAO,EAAE,QAAQ,KAAK;AACxB;","names":[]}

package/dist/chunk-FDJ77DTR.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-FDJ77DTR.js.map

package/dist/chunk-FDJ77DTR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}