@ai-matrx/kit 0.5.0

package/dist/confirm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/confirm.ts","../src/confirm/opener.ts","../src/confirm/host.tsx","../src/confirm/cn.ts","../src/confirm/alert-dialog.tsx","../src/react-tree.ts","../src/confirm/confirm-dialog.tsx"],"sourcesContent":["/**\n * @ai-matrx/kit/confirm — the confirm-dialog system. Browser dialogs are\n * banned; this is the replacement, both shapes:\n *\n * - Imperative: mount `<ConfirmDialogHost />` ONCE at app root, then from\n *   anywhere: `if (!(await confirm({ title: \"Delete?\", variant: \"destructive\" }))) return;`\n *   Calls queue until the host mounts; concurrent calls present sequentially.\n * - Declarative: `<ConfirmDialog open onOpenChange onConfirm ... />` inline,\n *   when busy state is meaningful (a network delete holding the dialog open).\n *\n * Runtime deps of this subpath (and only this subpath's bundles):\n * `@radix-ui/react-alert-dialog` + `tailwind-merge`. Styling is the Matrx\n * Tailwind semantic-token vocabulary; hosts on other design systems override\n * via `className` / `contentClassName` (last-wins merge).\n */\nexport { confirm } from \"./confirm/opener\";\nexport type { ConfirmOptions } from \"./confirm/opener\";\nexport { ConfirmDialogHost } from \"./confirm/host\";\nexport { ConfirmDialog } from \"./confirm/confirm-dialog\";\nexport type { ConfirmDialogProps } from \"./confirm/confirm-dialog\";\n","/**\n * @ai-matrx/kit/confirm — imperative opener.\n *\n * Pure-TS imperative API for the global confirm dialog. Zero React, zero\n * dialog markup — this module is statically importable from anywhere\n * (hooks, utils, Redux thunks, async handlers, sync code, anything).\n *\n * The host (`ConfirmDialogHost`) registers a controller on mount and\n * unregisters on unmount. Calls made before the host has hydrated queue\n * up and resolve as soon as the host is alive — so a destructive action\n * triggered in the first ~50ms after page load still gets a real\n * confirmation, never a silent default-yes/no. With no host ever mounted,\n * a `confirm()` promise stays pending forever (the original's behavior —\n * it never resolves to a silent default).\n *\n * One dialog at a time: concurrent calls queue and present sequentially.\n *\n * Ported verbatim from matrx-frontend\n * `components/dialogs/confirm/confirmDialogOpener.ts`, with ONE structural\n * inversion: the host/queue state lives on `globalThis` under a\n * `Symbol.for` slot instead of module-level variables. With the package\n * built `splitting: false` in dual ESM/CJS format, this module is\n * duplicated into the root bundle and the `./confirm` bundle, and CJS/ESM\n * each instantiate their own module graph — a module-level variable would\n * silently split the host registration from the callers (the same hazard\n * `@ai-matrx/tap-target` documents for its link registry). Behavior is\n * unchanged; never \"clean this up\" into a module local.\n */\n\nimport type { ReactNode } from \"react\";\n\nexport interface ConfirmOptions {\n  title: ReactNode;\n  description?: ReactNode | undefined;\n  confirmLabel?: string | undefined;\n  /** `null` hides the cancel button (acknowledge-only dialogs). */\n  cancelLabel?: string | null | undefined;\n  variant?: \"default\" | \"destructive\" | undefined;\n}\n\ntype Resolver = (confirmed: boolean) => void;\n\ninterface PendingRequest {\n  opts: ConfirmOptions;\n  resolve: Resolver;\n}\n\ninterface HostController {\n  show: (opts: ConfirmOptions, resolve: Resolver) => void;\n}\n\ninterface OpenerState {\n  host: HostController | null;\n  queue: PendingRequest[];\n}\n\nconst STATE_SLOT = Symbol.for(\"ai-matrx.kit.confirm-opener-state\");\n\nfunction getState(): OpenerState {\n  const holder = globalThis as Record<symbol, OpenerState | undefined>;\n  let state = holder[STATE_SLOT];\n  if (!state) {\n    state = { host: null, queue: [] };\n    holder[STATE_SLOT] = state;\n  }\n  return state;\n}\n\n/** @internal Called by `ConfirmDialogHost` on mount. */\nexport function _registerHost(controller: HostController): void {\n  const state = getState();\n  state.host = controller;\n  while (state.queue.length > 0) {\n    const next = state.queue.shift()!;\n    controller.show(next.opts, next.resolve);\n  }\n}\n\n/** @internal Called by `ConfirmDialogHost` on unmount. */\nexport function _unregisterHost(controller: HostController): void {\n  const state = getState();\n  if (state.host === controller) state.host = null;\n}\n\n/** @internal Test-only: drop any registered host and pending queue. */\nexport function _resetConfirmOpenerState(): void {\n  const state = getState();\n  state.host = null;\n  state.queue.length = 0;\n}\n\n/**\n * Imperative confirm. Returns a Promise that resolves `true` if the user\n * confirms, `false` if they cancel/dismiss. Replaces `window.confirm`.\n *\n * @example\n *   const ok = await confirm({\n *     title: \"Delete sandbox\",\n *     description: \"This cannot be undone.\",\n *     variant: \"destructive\",\n *     confirmLabel: \"Delete\",\n *   });\n *   if (!ok) return;\n */\nexport function confirm(opts: ConfirmOptions): Promise<boolean> {\n  return new Promise<boolean>((resolve) => {\n    const state = getState();\n    if (state.host) {\n      state.host.show(opts, resolve);\n    } else {\n      state.queue.push({ opts, resolve });\n    }\n  });\n}\n","\"use client\";\n\n/**\n * `<ConfirmDialogHost />` — render ONCE, near the root of every provider\n * tree, so the imperative `confirm()` always has a live host to dispatch to.\n * Pre-mount calls queue inside `opener.ts` and resolve as soon as the host\n * registers.\n *\n * Ported from matrx-frontend `components/dialogs/confirm/\n * {ConfirmDialogHost,ConfirmDialogHostImpl}.tsx`, with the loading seam\n * inverted: the original split shell + impl and loaded the impl via\n * `next/dynamic({ ssr: false })` to keep radix out of route entry chunks.\n * A framework-agnostic package cannot use `next/dynamic`, so the host is\n * ONE directly-imported component; hosts that want the original's\n * code-splitting lazy-load the subpath themselves, e.g.\n * `dynamic(() => import(\"@ai-matrx/kit/confirm\").then(m => m.ConfirmDialogHost), { ssr: false })`.\n * The \"host renders `<ConfirmDialogHost/>` once\" contract is unchanged.\n *\n * Imperative model: calls to `confirm(...)` from anywhere push a request\n * into a ref-backed queue; this component drains the queue one item at a\n * time and renders a `<ConfirmDialog>` for the currently-active request.\n * Resolving Promise<boolean> happens on Confirm click (true), or on\n * dismiss/cancel (false). The dialog closes immediately on click — callers\n * that need an in-dialog busy spinner during async work should use the\n * inline `<ConfirmDialog>` with the `busy` prop instead.\n */\n\nimport * as React from \"react\";\n\nimport { ConfirmDialog } from \"./confirm-dialog\";\nimport {\n  _registerHost,\n  _unregisterHost,\n  type ConfirmOptions,\n} from \"./opener\";\n\ninterface ActiveRequest {\n  opts: ConfirmOptions;\n  resolve: (confirmed: boolean) => void;\n}\n\nexport function ConfirmDialogHost() {\n  const [active, setActive] = React.useState<ActiveRequest | null>(null);\n  const [tick, setTick] = React.useState(0);\n  const queueRef = React.useRef<ActiveRequest[]>([]);\n\n  // Register/unregister the controller exactly once. The controller's\n  // `show` always pushes onto the queue and bumps `tick`; the drain\n  // effect below picks up from there. This avoids stale-closure bugs\n  // around `active`.\n  React.useEffect(() => {\n    const controller = {\n      show: (opts: ConfirmOptions, resolve: (confirmed: boolean) => void) => {\n        queueRef.current.push({ opts, resolve });\n        setTick((n) => n + 1);\n      },\n    };\n    _registerHost(controller);\n    return () => _unregisterHost(controller);\n  }, []);\n\n  // Drain the queue whenever nothing is showing.\n  React.useEffect(() => {\n    if (active === null && queueRef.current.length > 0) {\n      setActive(queueRef.current.shift()!);\n    }\n  }, [active, tick]);\n\n  const handleConfirm = React.useCallback(() => {\n    if (!active) return;\n    active.resolve(true);\n    setActive(null);\n  }, [active]);\n\n  const handleOpenChange = React.useCallback(\n    (open: boolean) => {\n      if (!open && active) {\n        active.resolve(false);\n        setActive(null);\n      }\n    },\n    [active],\n  );\n\n  return (\n    <ConfirmDialog\n      open={!!active}\n      onOpenChange={handleOpenChange}\n      title={active?.opts.title ?? \"\"}\n      description={active?.opts.description}\n      confirmLabel={active?.opts.confirmLabel}\n      cancelLabel={active?.opts.cancelLabel}\n      variant={active?.opts.variant}\n      onConfirm={handleConfirm}\n    />\n  );\n}\n","import { twMerge } from \"tailwind-merge\";\n\n/**\n * Tailwind-aware className merge. The original app's `cn` is\n * `twMerge(clsx(inputs))`; here `clsx` is dropped (every call site passes\n * strings / false), but `tailwind-merge` is KEPT on purpose: the public\n * `className` / `contentClassName` overrides depend on last-wins conflict\n * resolution (e.g. a host's `max-w-3xl` must beat the built-in `max-w-lg`,\n * a destructive `bg-destructive` must beat the default `bg-primary`).\n * A naive join would leave both classes applied and let stylesheet order\n * decide — a real behavior divergence from the original.\n */\nexport function cn(\n  ...values: Array<string | null | undefined | false>\n): string {\n  return twMerge(values.filter(Boolean).join(\" \"));\n}\n","\"use client\";\n\n/**\n * Inlined shadcn-style wrapper over `@radix-ui/react-alert-dialog` — the one\n * real runtime dependency of the `./confirm` subpath (this subpath's product\n * IS the dialog). Ported from matrx-frontend `components/ui/alert-dialog.tsx`\n * with the host-shaped seams inverted:\n *\n * - `usePopoutContainer` (window-panels popout portal retargeting) is dropped:\n *   the portal targets the Radix default (`document.body`). Hosts with exotic\n *   portal needs pass `container` on `AlertDialogPortal` themselves.\n * - `buttonVariants` from the design system is inlined as the exact class\n *   strings the two footer buttons use (base + default + outline variants,\n *   design-system `button.tsx` as of this port). No cva dependency.\n * - Styling keeps the Tailwind semantic-token classes VERBATIM (`bg-background`,\n *   `text-muted-foreground`, `bg-primary`, `border-border`, ...) — the platform\n *   vocabulary. Hosts on other design systems override via the `className` /\n *   `contentClassName` props (classes merge last-wins via tailwind-merge).\n *\n * THE ROOT RENDERS UNCONDITIONALLY — no mount gate. Radix ids come from\n * React's SSR-stable `useId`, so there is no SSR/client id mismatch to hide\n * from (the original's D144 ruling).\n */\n\nimport * as React from \"react\";\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\n\nimport { cn } from \"./cn\";\nimport { treeContainsComponent } from \"../react-tree\";\n\n/**\n * Inlined design-system button classes (base + the two variants the alert\n * dialog footer uses). Source of truth while the originals live:\n * aidream `apps/shared/design-system/src/button.tsx`.\n */\nconst buttonBase =\n  \"inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-9 px-4 py-2\";\nconst buttonDefault =\n  \"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90\";\nconst buttonOutline =\n  \"border border-border bg-card shadow-sm hover:bg-accent hover:text-accent-foreground\";\n\nconst AlertDialog = AlertDialogPrimitive.Root;\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-[10000] bg-black/80 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    ref={ref}\n  />\n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\n/**\n * Unstyled, non-portalling Content for custom AlertDialog layouts. AlertDialog\n * is always modal, so this keeps its ARIA semantics explicit and consistent.\n */\nconst AlertDialogContentPrimitive = React.forwardRef<\n  React.ComponentRef<typeof AlertDialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ ...props }, ref) => (\n  <AlertDialogPrimitive.Content {...props} ref={ref} aria-modal=\"true\" />\n));\nAlertDialogContentPrimitive.displayName = \"AlertDialogContentPrimitive\";\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ComponentRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName;\n\nconst AlertDialogContent = React.forwardRef<\n  React.ComponentRef<typeof AlertDialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const hasDescription =\n    treeContainsComponent(children, AlertDialogDescription) ||\n    treeContainsComponent(children, AlertDialogPrimitive.Description);\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogContentPrimitive\n        ref={ref}\n        className={cn(\n          \"fixed left-[50%] top-[50%] z-[10000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n          className,\n        )}\n        {...props}\n      >\n        {!hasDescription && (\n          <AlertDialogPrimitive.Description className=\"sr-only\">\n            Please confirm the action described in this dialog.\n          </AlertDialogPrimitive.Description>\n        )}\n        {children}\n      </AlertDialogContentPrimitive>\n    </AlertDialogPortal>\n  );\n});\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nconst AlertDialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className,\n    )}\n    {...props}\n  />\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nconst AlertDialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className,\n    )}\n    {...props}\n  />\n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ComponentRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold\", className)}\n    {...props}\n  />\n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nconst AlertDialogAction = React.forwardRef<\n  React.ComponentRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(buttonBase, buttonDefault, className)}\n    {...props}\n  />\n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(buttonBase, buttonOutline, \"mt-2 sm:mt-0\", className)}\n    {...props}\n  />\n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogContentPrimitive,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n};\n","/**\n * @ai-matrx/kit/react-tree — safe React children-tree scanning.\n *\n * Ported from matrx-frontend `lib/react/treeContainsComponent.ts`; this\n * subpath is the ONE home of the scanner inside the kit (the `/confirm`\n * subpath's alert-dialog imports it from here — no duplicate bodies).\n *\n * Two deliberate divergences from the frontend original, both documented:\n * - the dev-mode scream checks `typeof process` first, since this package may\n *   load in an unbundled browser context where `process` is undefined;\n * - a React PORTAL child (`createPortal(...)` passed as a child) is a valid\n *   React child, but it is not an element, an iterable, or a primitive — the\n *   original fell through to the non-renderable branch, screamed a false\n *   positive in dev, and skipped the portal's content. Portals are now\n *   recognized and their children traversed.\n */\n\nimport * as React from \"react\";\n\nconst REACT_PORTAL_TYPE = Symbol.for(\"react.portal\");\n\n/**\n * Returns true if `Component` appears anywhere in the React element tree under\n * `node`. Used to detect optional a11y children (e.g. DialogDescription)\n * without rendering duplicates.\n *\n * DEFENSIVE + LOUD. A non-renderable node — a plain object or function passed\n * as a React child — is a real bug: React throws \"Objects are not valid as a\n * React child\" the instant it renders one. This a11y probe must NOT be the\n * crash site. `React.Children.toArray` would throw HERE, producing a trace that\n * points at the dialog primitive instead of the component that leaked the\n * object (this misdirection has burned real debugging hours). So we walk the\n * tree by hand, SKIP any non-renderable node, and scream in dev with its keys —\n * then let React report the defect at the true render site with the offending\n * component in the stack. For every VALID tree the result is identical to the\n * old `React.Children.toArray(node).some(...)`.\n */\nexport function treeContainsComponent(\n  node: React.ReactNode,\n  Component: React.ElementType,\n): boolean {\n  if (node == null || typeof node === \"boolean\") return false;\n\n  if (Array.isArray(node)) {\n    return node.some((child) => treeContainsComponent(child, Component));\n  }\n\n  if (React.isValidElement(node)) {\n    if (node.type === Component) return true;\n    const props = node.props as { children?: React.ReactNode };\n    return props.children != null\n      ? treeContainsComponent(props.children, Component)\n      : false;\n  }\n\n  // Strings / numbers are valid leaf children but never the Component.\n  if (typeof node === \"string\" || typeof node === \"number\") return false;\n\n  // A portal is a valid child that is NOT an element: traverse its content.\n  if (\n    typeof node === \"object\" &&\n    (node as { $$typeof?: unknown }).$$typeof === REACT_PORTAL_TYPE\n  ) {\n    return treeContainsComponent(\n      (node as { children?: React.ReactNode }).children,\n      Component,\n    );\n  }\n\n  // Non-array iterables (Set, Map, generator) are valid React children — React\n  // supports them — so traverse rather than reject.\n  if (typeof node === \"object\" && Symbol.iterator in node) {\n    return Array.from(node as Iterable<React.ReactNode>).some((child) =>\n      treeContainsComponent(child, Component),\n    );\n  }\n\n  // Anything else (a raw object, a function) is NOT a valid React child. React\n  // will throw when it renders this; we must not throw first and hide the cause.\n  if (\n    typeof process !== \"undefined\" &&\n    process.env.NODE_ENV !== \"production\"\n  ) {\n    const keys =\n      typeof node === \"object\"\n        ? ` with keys {${Object.keys(node).join(\", \")}}`\n        : \"\";\n    console.error(\n      `[treeContainsComponent] A non-renderable value${keys} is being passed as a React child. ` +\n        \"React will throw 'Objects are not valid as a React child' at the real render site. \" +\n        \"Stringify it (e.g. JSON.stringify) before rendering.\",\n      node,\n    );\n  }\n  return false;\n}\n","\"use client\";\n\n/**\n * Declarative `<ConfirmDialog />` — drop-in replacement for `window.confirm`.\n * Ported verbatim from matrx-frontend `components/ui/confirm-dialog.tsx`;\n * the only inversion is the busy spinner: `Loader2` from lucide-react is\n * inlined as a single SVG (the `@ai-matrx/tap-target` precedent — one icon\n * does not justify an icon dependency). Path annotated below.\n *\n * Pattern: hold the pending target in state, render <ConfirmDialog />\n * once at the bottom of the component, and open it by setting the target.\n * When busy state is meaningful (e.g. a network delete that should hold the\n * dialog open with a spinner), use THIS component inline; the imperative\n * `confirm()` closes immediately on click.\n */\n\nimport * as React from \"react\";\n\nimport { cn } from \"./cn\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from \"./alert-dialog\";\n\n/** lucide `loader-circle` (a.k.a. `Loader2`) v1.22.0, inlined. */\nfunction SpinnerIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={24}\n      height={24}\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      className={className}\n    >\n      <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n    </svg>\n  );\n}\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: React.ReactNode;\n  description?: React.ReactNode | undefined;\n  /**\n   * Rich body rendered between the header and the footer, OUTSIDE the\n   * description `<p>` — use for block-level content (diffs, previews, lists)\n   * that would be invalid HTML inside `description`.\n   */\n  content?: React.ReactNode | undefined;\n  /** Extra classes for the dialog content (e.g. a wider max-w for diffs). */\n  contentClassName?: string | undefined;\n  confirmLabel?: string | undefined;\n  /**\n   * `null` hides the cancel button entirely — for acknowledge-only dialogs\n   * where there is nothing to cancel. Anything else labels it.\n   */\n  cancelLabel?: string | null | undefined;\n  variant?: \"default\" | \"destructive\" | undefined;\n  busy?: boolean | undefined;\n  /**\n   * Blocks confirming without pretending work is in flight. For a dialog whose\n   * `content` asks the user something the action cannot proceed without — the\n   * choice is missing, not loading — `busy` would show a misleading spinner.\n   */\n  confirmDisabled?: boolean | undefined;\n  onConfirm: () => void | Promise<void>;\n}\n\n/**\n * Drop-in replacement for `window.confirm`. Use this anywhere you would\n * otherwise reach for a browser-level confirm dialog.\n */\nexport function ConfirmDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  content,\n  contentClassName,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  variant = \"default\",\n  busy = false,\n  confirmDisabled = false,\n  onConfirm,\n}: ConfirmDialogProps) {\n  return (\n    <AlertDialog open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent className={contentClassName}>\n        <AlertDialogHeader>\n          <AlertDialogTitle>{title}</AlertDialogTitle>\n          {description ? (\n            <AlertDialogDescription>{description}</AlertDialogDescription>\n          ) : null}\n        </AlertDialogHeader>\n        {content ?? null}\n        <AlertDialogFooter>\n          {cancelLabel === null ? null : (\n            <AlertDialogCancel className=\"max-lg:min-h-11\" disabled={busy}>\n              {cancelLabel}\n            </AlertDialogCancel>\n          )}\n          <AlertDialogAction\n            disabled={busy || confirmDisabled}\n            onClick={(event) => {\n              event.preventDefault();\n              void onConfirm();\n            }}\n            className={cn(\n              \"max-lg:min-h-11\",\n              variant === \"destructive\" &&\n                \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n            )}\n          >\n            {busy ? <SpinnerIcon className=\"mr-2 h-4 w-4 animate-spin\" /> : null}\n            {confirmLabel}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"],"mappings":"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","names":["React","React","import_jsx_runtime","import_jsx_runtime"]}

package/dist/confirm.d.cts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * @ai-matrx/kit/confirm — imperative opener.
+ *
+ * Pure-TS imperative API for the global confirm dialog. Zero React, zero
+ * dialog markup — this module is statically importable from anywhere
+ * (hooks, utils, Redux thunks, async handlers, sync code, anything).
+ *
+ * The host (`ConfirmDialogHost`) registers a controller on mount and
+ * unregisters on unmount. Calls made before the host has hydrated queue
+ * up and resolve as soon as the host is alive — so a destructive action
+ * triggered in the first ~50ms after page load still gets a real
+ * confirmation, never a silent default-yes/no. With no host ever mounted,
+ * a `confirm()` promise stays pending forever (the original's behavior —
+ * it never resolves to a silent default).
+ *
+ * One dialog at a time: concurrent calls queue and present sequentially.
+ *
+ * Ported verbatim from matrx-frontend
+ * `components/dialogs/confirm/confirmDialogOpener.ts`, with ONE structural
+ * inversion: the host/queue state lives on `globalThis` under a
+ * `Symbol.for` slot instead of module-level variables. With the package
+ * built `splitting: false` in dual ESM/CJS format, this module is
+ * duplicated into the root bundle and the `./confirm` bundle, and CJS/ESM
+ * each instantiate their own module graph — a module-level variable would
+ * silently split the host registration from the callers (the same hazard
+ * `@ai-matrx/tap-target` documents for its link registry). Behavior is
+ * unchanged; never "clean this up" into a module local.
+ */
+
+interface ConfirmOptions {
+    title: ReactNode;
+    description?: ReactNode | undefined;
+    confirmLabel?: string | undefined;
+    /** `null` hides the cancel button (acknowledge-only dialogs). */
+    cancelLabel?: string | null | undefined;
+    variant?: "default" | "destructive" | undefined;
+}
+/**
+ * Imperative confirm. Returns a Promise that resolves `true` if the user
+ * confirms, `false` if they cancel/dismiss. Replaces `window.confirm`.
+ *
+ * @example
+ *   const ok = await confirm({
+ *     title: "Delete sandbox",
+ *     description: "This cannot be undone.",
+ *     variant: "destructive",
+ *     confirmLabel: "Delete",
+ *   });
+ *   if (!ok) return;
+ */
+declare function confirm(opts: ConfirmOptions): Promise<boolean>;
+
+/**
+ * `<ConfirmDialogHost />` — render ONCE, near the root of every provider
+ * tree, so the imperative `confirm()` always has a live host to dispatch to.
+ * Pre-mount calls queue inside `opener.ts` and resolve as soon as the host
+ * registers.
+ *
+ * Ported from matrx-frontend `components/dialogs/confirm/
+ * {ConfirmDialogHost,ConfirmDialogHostImpl}.tsx`, with the loading seam
+ * inverted: the original split shell + impl and loaded the impl via
+ * `next/dynamic({ ssr: false })` to keep radix out of route entry chunks.
+ * A framework-agnostic package cannot use `next/dynamic`, so the host is
+ * ONE directly-imported component; hosts that want the original's
+ * code-splitting lazy-load the subpath themselves, e.g.
+ * `dynamic(() => import("@ai-matrx/kit/confirm").then(m => m.ConfirmDialogHost), { ssr: false })`.
+ * The "host renders `<ConfirmDialogHost/>` once" contract is unchanged.
+ *
+ * Imperative model: calls to `confirm(...)` from anywhere push a request
+ * into a ref-backed queue; this component drains the queue one item at a
+ * time and renders a `<ConfirmDialog>` for the currently-active request.
+ * Resolving Promise<boolean> happens on Confirm click (true), or on
+ * dismiss/cancel (false). The dialog closes immediately on click — callers
+ * that need an in-dialog busy spinner during async work should use the
+ * inline `<ConfirmDialog>` with the `busy` prop instead.
+ */
+
+declare function ConfirmDialogHost(): React.JSX.Element;
+
+/**
+ * Declarative `<ConfirmDialog />` — drop-in replacement for `window.confirm`.
+ * Ported verbatim from matrx-frontend `components/ui/confirm-dialog.tsx`;
+ * the only inversion is the busy spinner: `Loader2` from lucide-react is
+ * inlined as a single SVG (the `@ai-matrx/tap-target` precedent — one icon
+ * does not justify an icon dependency). Path annotated below.
+ *
+ * Pattern: hold the pending target in state, render <ConfirmDialog />
+ * once at the bottom of the component, and open it by setting the target.
+ * When busy state is meaningful (e.g. a network delete that should hold the
+ * dialog open with a spinner), use THIS component inline; the imperative
+ * `confirm()` closes immediately on click.
+ */
+
+interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    description?: React.ReactNode | undefined;
+    /**
+     * Rich body rendered between the header and the footer, OUTSIDE the
+     * description `<p>` — use for block-level content (diffs, previews, lists)
+     * that would be invalid HTML inside `description`.
+     */
+    content?: React.ReactNode | undefined;
+    /** Extra classes for the dialog content (e.g. a wider max-w for diffs). */
+    contentClassName?: string | undefined;
+    confirmLabel?: string | undefined;
+    /**
+     * `null` hides the cancel button entirely — for acknowledge-only dialogs
+     * where there is nothing to cancel. Anything else labels it.
+     */
+    cancelLabel?: string | null | undefined;
+    variant?: "default" | "destructive" | undefined;
+    busy?: boolean | undefined;
+    /**
+     * Blocks confirming without pretending work is in flight. For a dialog whose
+     * `content` asks the user something the action cannot proceed without — the
+     * choice is missing, not loading — `busy` would show a misleading spinner.
+     */
+    confirmDisabled?: boolean | undefined;
+    onConfirm: () => void | Promise<void>;
+}
+/**
+ * Drop-in replacement for `window.confirm`. Use this anywhere you would
+ * otherwise reach for a browser-level confirm dialog.
+ */
+declare function ConfirmDialog({ open, onOpenChange, title, description, content, contentClassName, confirmLabel, cancelLabel, variant, busy, confirmDisabled, onConfirm, }: ConfirmDialogProps): React.JSX.Element;
+
+export { ConfirmDialog, ConfirmDialogHost, type ConfirmDialogProps, type ConfirmOptions, confirm };

package/dist/confirm.d.ts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * @ai-matrx/kit/confirm — imperative opener.
+ *
+ * Pure-TS imperative API for the global confirm dialog. Zero React, zero
+ * dialog markup — this module is statically importable from anywhere
+ * (hooks, utils, Redux thunks, async handlers, sync code, anything).
+ *
+ * The host (`ConfirmDialogHost`) registers a controller on mount and
+ * unregisters on unmount. Calls made before the host has hydrated queue
+ * up and resolve as soon as the host is alive — so a destructive action
+ * triggered in the first ~50ms after page load still gets a real
+ * confirmation, never a silent default-yes/no. With no host ever mounted,
+ * a `confirm()` promise stays pending forever (the original's behavior —
+ * it never resolves to a silent default).
+ *
+ * One dialog at a time: concurrent calls queue and present sequentially.
+ *
+ * Ported verbatim from matrx-frontend
+ * `components/dialogs/confirm/confirmDialogOpener.ts`, with ONE structural
+ * inversion: the host/queue state lives on `globalThis` under a
+ * `Symbol.for` slot instead of module-level variables. With the package
+ * built `splitting: false` in dual ESM/CJS format, this module is
+ * duplicated into the root bundle and the `./confirm` bundle, and CJS/ESM
+ * each instantiate their own module graph — a module-level variable would
+ * silently split the host registration from the callers (the same hazard
+ * `@ai-matrx/tap-target` documents for its link registry). Behavior is
+ * unchanged; never "clean this up" into a module local.
+ */
+
+interface ConfirmOptions {
+    title: ReactNode;
+    description?: ReactNode | undefined;
+    confirmLabel?: string | undefined;
+    /** `null` hides the cancel button (acknowledge-only dialogs). */
+    cancelLabel?: string | null | undefined;
+    variant?: "default" | "destructive" | undefined;
+}
+/**
+ * Imperative confirm. Returns a Promise that resolves `true` if the user
+ * confirms, `false` if they cancel/dismiss. Replaces `window.confirm`.
+ *
+ * @example
+ *   const ok = await confirm({
+ *     title: "Delete sandbox",
+ *     description: "This cannot be undone.",
+ *     variant: "destructive",
+ *     confirmLabel: "Delete",
+ *   });
+ *   if (!ok) return;
+ */
+declare function confirm(opts: ConfirmOptions): Promise<boolean>;
+
+/**
+ * `<ConfirmDialogHost />` — render ONCE, near the root of every provider
+ * tree, so the imperative `confirm()` always has a live host to dispatch to.
+ * Pre-mount calls queue inside `opener.ts` and resolve as soon as the host
+ * registers.
+ *
+ * Ported from matrx-frontend `components/dialogs/confirm/
+ * {ConfirmDialogHost,ConfirmDialogHostImpl}.tsx`, with the loading seam
+ * inverted: the original split shell + impl and loaded the impl via
+ * `next/dynamic({ ssr: false })` to keep radix out of route entry chunks.
+ * A framework-agnostic package cannot use `next/dynamic`, so the host is
+ * ONE directly-imported component; hosts that want the original's
+ * code-splitting lazy-load the subpath themselves, e.g.
+ * `dynamic(() => import("@ai-matrx/kit/confirm").then(m => m.ConfirmDialogHost), { ssr: false })`.
+ * The "host renders `<ConfirmDialogHost/>` once" contract is unchanged.
+ *
+ * Imperative model: calls to `confirm(...)` from anywhere push a request
+ * into a ref-backed queue; this component drains the queue one item at a
+ * time and renders a `<ConfirmDialog>` for the currently-active request.
+ * Resolving Promise<boolean> happens on Confirm click (true), or on
+ * dismiss/cancel (false). The dialog closes immediately on click — callers
+ * that need an in-dialog busy spinner during async work should use the
+ * inline `<ConfirmDialog>` with the `busy` prop instead.
+ */
+
+declare function ConfirmDialogHost(): React.JSX.Element;
+
+/**
+ * Declarative `<ConfirmDialog />` — drop-in replacement for `window.confirm`.
+ * Ported verbatim from matrx-frontend `components/ui/confirm-dialog.tsx`;
+ * the only inversion is the busy spinner: `Loader2` from lucide-react is
+ * inlined as a single SVG (the `@ai-matrx/tap-target` precedent — one icon
+ * does not justify an icon dependency). Path annotated below.
+ *
+ * Pattern: hold the pending target in state, render <ConfirmDialog />
+ * once at the bottom of the component, and open it by setting the target.
+ * When busy state is meaningful (e.g. a network delete that should hold the
+ * dialog open with a spinner), use THIS component inline; the imperative
+ * `confirm()` closes immediately on click.
+ */
+
+interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    description?: React.ReactNode | undefined;
+    /**
+     * Rich body rendered between the header and the footer, OUTSIDE the
+     * description `<p>` — use for block-level content (diffs, previews, lists)
+     * that would be invalid HTML inside `description`.
+     */
+    content?: React.ReactNode | undefined;
+    /** Extra classes for the dialog content (e.g. a wider max-w for diffs). */
+    contentClassName?: string | undefined;
+    confirmLabel?: string | undefined;
+    /**
+     * `null` hides the cancel button entirely — for acknowledge-only dialogs
+     * where there is nothing to cancel. Anything else labels it.
+     */
+    cancelLabel?: string | null | undefined;
+    variant?: "default" | "destructive" | undefined;
+    busy?: boolean | undefined;
+    /**
+     * Blocks confirming without pretending work is in flight. For a dialog whose
+     * `content` asks the user something the action cannot proceed without — the
+     * choice is missing, not loading — `busy` would show a misleading spinner.
+     */
+    confirmDisabled?: boolean | undefined;
+    onConfirm: () => void | Promise<void>;
+}
+/**
+ * Drop-in replacement for `window.confirm`. Use this anywhere you would
+ * otherwise reach for a browser-level confirm dialog.
+ */
+declare function ConfirmDialog({ open, onOpenChange, title, description, content, contentClassName, confirmLabel, cancelLabel, variant, busy, confirmDisabled, onConfirm, }: ConfirmDialogProps): React.JSX.Element;
+
+export { ConfirmDialog, ConfirmDialogHost, type ConfirmDialogProps, type ConfirmOptions, confirm };

package/dist/confirm.js

@@ -0,0 +1,312 @@
+"use client";
+
+// src/confirm/opener.ts
+var STATE_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.kit.confirm-opener-state");
+function getState() {
+  const holder = globalThis;
+  let state = holder[STATE_SLOT];
+  if (!state) {
+    state = { host: null, queue: [] };
+    holder[STATE_SLOT] = state;
+  }
+  return state;
+}
+function _registerHost(controller) {
+  const state = getState();
+  state.host = controller;
+  while (state.queue.length > 0) {
+    const next = state.queue.shift();
+    controller.show(next.opts, next.resolve);
+  }
+}
+function _unregisterHost(controller) {
+  const state = getState();
+  if (state.host === controller) state.host = null;
+}
+function confirm(opts) {
+  return new Promise((resolve) => {
+    const state = getState();
+    if (state.host) {
+      state.host.show(opts, resolve);
+    } else {
+      state.queue.push({ opts, resolve });
+    }
+  });
+}
+
+// src/confirm/host.tsx
+import * as React3 from "react";
+
+// src/confirm/cn.ts
+import { twMerge } from "tailwind-merge";
+function cn(...values) {
+  return twMerge(values.filter(Boolean).join(" "));
+}
+
+// src/confirm/alert-dialog.tsx
+import * as React2 from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+// src/react-tree.ts
+import * as React from "react";
+var REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal");
+function treeContainsComponent(node, Component) {
+  if (node == null || typeof node === "boolean") return false;
+  if (Array.isArray(node)) {
+    return node.some((child) => treeContainsComponent(child, Component));
+  }
+  if (React.isValidElement(node)) {
+    if (node.type === Component) return true;
+    const props = node.props;
+    return props.children != null ? treeContainsComponent(props.children, Component) : false;
+  }
+  if (typeof node === "string" || typeof node === "number") return false;
+  if (typeof node === "object" && node.$$typeof === REACT_PORTAL_TYPE) {
+    return treeContainsComponent(
+      node.children,
+      Component
+    );
+  }
+  if (typeof node === "object" && Symbol.iterator in node) {
+    return Array.from(node).some(
+      (child) => treeContainsComponent(child, Component)
+    );
+  }
+  if (typeof process !== "undefined" && true) {
+    const keys = typeof node === "object" ? ` with keys {${Object.keys(node).join(", ")}}` : "";
+    console.error(
+      `[treeContainsComponent] A non-renderable value${keys} is being passed as a React child. React will throw 'Objects are not valid as a React child' at the real render site. Stringify it (e.g. JSON.stringify) before rendering.`,
+      node
+    );
+  }
+  return false;
+}
+
+// src/confirm/alert-dialog.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonBase = "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-9 px-4 py-2";
+var buttonDefault = "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90";
+var buttonOutline = "border border-border bg-card shadow-sm hover:bg-accent hover:text-accent-foreground";
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogPortal = AlertDialogPrimitive.Portal;
+var AlertDialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-[10000] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+var AlertDialogContentPrimitive = React2.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, { ...props, ref, "aria-modal": "true" }));
+AlertDialogContentPrimitive.displayName = "AlertDialogContentPrimitive";
+var AlertDialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+var AlertDialogContent = React2.forwardRef(({ className, children, ...props }, ref) => {
+  const hasDescription = treeContainsComponent(children, AlertDialogDescription) || treeContainsComponent(children, AlertDialogPrimitive.Description);
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      AlertDialogContentPrimitive,
+      {
+        ref,
+        className: cn(
+          "fixed left-[50%] top-[50%] z-[10000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className
+        ),
+        ...props,
+        children: [
+          !hasDescription && /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { className: "sr-only", children: "Please confirm the action described in this dialog." }),
+          children
+        ]
+      }
+    )
+  ] });
+});
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+var AlertDialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogAction = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Action,
+  {
+    ref,
+    className: cn(buttonBase, buttonDefault, className),
+    ...props
+  }
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+var AlertDialogCancel = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    className: cn(buttonBase, buttonOutline, "mt-2 sm:mt-0", className),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+// src/confirm/confirm-dialog.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SpinnerIcon({ className }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children: /* @__PURE__ */ jsx2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  );
+}
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  content,
+  contentClassName,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  busy = false,
+  confirmDisabled = false,
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsx2(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(AlertDialogContent, { className: contentClassName, children: [
+    /* @__PURE__ */ jsxs2(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx2(AlertDialogTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx2(AlertDialogDescription, { children: description }) : null
+    ] }),
+    content ?? null,
+    /* @__PURE__ */ jsxs2(AlertDialogFooter, { children: [
+      cancelLabel === null ? null : /* @__PURE__ */ jsx2(AlertDialogCancel, { className: "max-lg:min-h-11", disabled: busy, children: cancelLabel }),
+      /* @__PURE__ */ jsxs2(
+        AlertDialogAction,
+        {
+          disabled: busy || confirmDisabled,
+          onClick: (event) => {
+            event.preventDefault();
+            void onConfirm();
+          },
+          className: cn(
+            "max-lg:min-h-11",
+            variant === "destructive" && "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          ),
+          children: [
+            busy ? /* @__PURE__ */ jsx2(SpinnerIcon, { className: "mr-2 h-4 w-4 animate-spin" }) : null,
+            confirmLabel
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/confirm/host.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ConfirmDialogHost() {
+  const [active, setActive] = React3.useState(null);
+  const [tick, setTick] = React3.useState(0);
+  const queueRef = React3.useRef([]);
+  React3.useEffect(() => {
+    const controller = {
+      show: (opts, resolve) => {
+        queueRef.current.push({ opts, resolve });
+        setTick((n) => n + 1);
+      }
+    };
+    _registerHost(controller);
+    return () => _unregisterHost(controller);
+  }, []);
+  React3.useEffect(() => {
+    if (active === null && queueRef.current.length > 0) {
+      setActive(queueRef.current.shift());
+    }
+  }, [active, tick]);
+  const handleConfirm = React3.useCallback(() => {
+    if (!active) return;
+    active.resolve(true);
+    setActive(null);
+  }, [active]);
+  const handleOpenChange = React3.useCallback(
+    (open) => {
+      if (!open && active) {
+        active.resolve(false);
+        setActive(null);
+      }
+    },
+    [active]
+  );
+  return /* @__PURE__ */ jsx3(
+    ConfirmDialog,
+    {
+      open: !!active,
+      onOpenChange: handleOpenChange,
+      title: active?.opts.title ?? "",
+      description: active?.opts.description,
+      confirmLabel: active?.opts.confirmLabel,
+      cancelLabel: active?.opts.cancelLabel,
+      variant: active?.opts.variant,
+      onConfirm: handleConfirm
+    }
+  );
+}
+export {
+  ConfirmDialog,
+  ConfirmDialogHost,
+  confirm
+};
+//# sourceMappingURL=confirm.js.map