@dowel-ui/react 0.4.0 → 0.7.0

package/dist/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A modal window that interrupts the user to gather a response.\n *\n * Focus is trapped while open, restored to the trigger on close, and the rest\n * of the page is hidden from assistive technology — all handled by the\n * underlying primitive rather than reimplemented here.\n */\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport type DialogOverlayProps = ComponentPropsWithRef<typeof DialogPrimitive.Overlay>;\n\nexport function DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-[2px]\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface DialogContentProps extends ComponentPropsWithRef<\n  typeof DialogPrimitive.Content\n> {\n  /** Renders the built-in close button. Turn off to supply your own. */\n  showCloseButton?: boolean;\n}\n\nexport function DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2\",\n          \"grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl\",\n          \"data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            aria-label=\"Close\"\n            className={cn(\n              \"absolute top-4 right-4 grid size-7 place-items-center rounded-md text-muted-foreground\",\n              \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n              \"[&_svg]:size-4\",\n              focusRing,\n            )}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m6 6 12 12M18 6 6 18\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 pr-8 text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\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 type DialogTitleProps = ComponentPropsWithRef<typeof DialogPrimitive.Title>;\n\nexport function DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogDescriptionProps = ComponentPropsWithRef<typeof DialogPrimitive.Description>;\n\nexport function DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAaA,WAASC,OAAgB;AACtC,MAAa,gBAAgBA,OAAgB;AAC7C,MAAa,eAAeA,OAAgB;AAC5C,MAAa,cAAcA,OAAgB;AAI3C,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,OACE,oBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,qEACA,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAgB,cAAc,EAC5B,WACA,UACA,kBAAkB,MAClB,GAAG,SACkB;CACrB,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4GACA,yFACA,8EACA,SACF;EACA,GAAI;EARN,UAAA,CAUG,UACA,kBACC,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,cAAW;GACX,WAAW,GACT,0FACA,2FACA,kBACA,SACF;GAEA,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAC/C,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA;GACE,CAAA;EACgB,CAAA,IACrB,IACmB;CACb,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CACjF,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A modal window that interrupts the user to gather a response.\n *\n * Focus is trapped while open, restored to the trigger on close, and the rest\n * of the page is hidden from assistive technology — all handled by the\n * underlying primitive rather than reimplemented here.\n */\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport type DialogOverlayProps = ComponentPropsWithRef<typeof DialogPrimitive.Overlay>;\n\nexport function DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-[2px]\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface DialogContentProps extends ComponentPropsWithRef<\n  typeof DialogPrimitive.Content\n> {\n  /** Renders the built-in close button. Turn off to supply your own. */\n  showCloseButton?: boolean;\n}\n\nexport function DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2\",\n          \"grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl\",\n          \"data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            aria-label=\"Close\"\n            className={cn(\n              \"absolute end-4 top-4 grid size-7 place-items-center rounded-md text-muted-foreground\",\n              \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n              \"[&_svg]:size-4\",\n              focusRing,\n            )}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m6 6 12 12M18 6 6 18\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 pe-8 text-start\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\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 type DialogTitleProps = ComponentPropsWithRef<typeof DialogPrimitive.Title>;\n\nexport function DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogDescriptionProps = ComponentPropsWithRef<typeof DialogPrimitive.Description>;\n\nexport function DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAaA,WAASC,OAAgB;AACtC,MAAa,gBAAgBA,OAAgB;AAC7C,MAAa,eAAeA,OAAgB;AAC5C,MAAa,cAAcA,OAAgB;AAI3C,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,OACE,oBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,qEACA,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAgB,cAAc,EAC5B,WACA,UACA,kBAAkB,MAClB,GAAG,SACkB;CACrB,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4GACA,yFACA,8EACA,SACF;EACA,GAAI;EARN,UAAA,CAUG,UACA,kBACC,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,cAAW;GACX,WAAW,GACT,wFACA,2FACA,kBACA,SACF;GAEA,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAC/C,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA;GACE,CAAA;EACgB,CAAA,IACrB,IACmB;CACb,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CACjF,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/diff-viewer/diff-viewer.js

@@ -135,12 +135,12 @@ function UnifiedRow({ row }) {
 			/* @__PURE__ */ jsx(LineNumber, { value: row.before }),
 			/* @__PURE__ */ jsx(LineNumber, { value: row.after }),
 			/* @__PURE__ */ jsx("td", {
-				className: "w-4 pr-1 text-center text-muted-foreground select-none",
+				className: "w-4 pe-1 text-center text-muted-foreground select-none",
 				"aria-hidden": "true",
 				children: row.kind === "added" ? "+" : row.kind === "removed" ? "−" : ""
 			}),
 			/* @__PURE__ */ jsxs("td", {
-				className: "w-full py-0.5 pr-3 break-all whitespace-pre-wrap",
+				className: "w-full py-0.5 pe-3 break-all whitespace-pre-wrap",
 				children: [/* @__PURE__ */ jsxs("span", {
 					className: "sr-only",
 					children: [KIND_LABEL[row.kind], ": "]
@@ -158,7 +158,7 @@ function SplitCell({ row, side }) {
 		className: "w-1/2 bg-muted/20"
 	})] });
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LineNumber, { value: side === "before" ? row.before : row.after }), /* @__PURE__ */ jsxs("td", {
-		className: cn("w-1/2 py-0.5 pr-3 break-all whitespace-pre-wrap", ROW_STYLES[row.kind]),
+		className: cn("w-1/2 py-0.5 pe-3 break-all whitespace-pre-wrap", ROW_STYLES[row.kind]),
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "sr-only",
 			children: [KIND_LABEL[row.kind], ": "]
@@ -175,7 +175,7 @@ function RowContent({ row }) {
 function LineNumber({ value }) {
 	return /* @__PURE__ */ jsx("td", {
 		"aria-hidden": "true",
-		className: "w-10 border-r border-border bg-muted/40 px-2 py-0.5 text-right text-muted-foreground tabular-nums select-none",
+		className: "w-10 border-e border-border bg-muted/40 px-2 py-0.5 text-end text-muted-foreground tabular-nums select-none",
 		children: value ?? ""
 	});
 }

package/dist/components/diff-viewer/diff-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"diff-viewer.js","names":[],"sources":["../../../src/components/diff-viewer/diff-viewer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { countChanges, toSplitRows, type DiffHunk, type DiffRow } from \"./diff-model\";\n\n/**\n * A diff, and a decision about it.\n *\n * The rendering half exists because every packaged viewer brings its own\n * styling system — emotion, or HTML strings plus a stylesheet — which design\n * tokens cannot reach and which is awkward under RSC. The deciding half exists\n * because Dowel is for AI products, and an agent proposing a change to a file is\n * the case that needs it: what every coding agent ships, and no component\n * library does.\n *\n * Decisions are controlled. The component never mutates the diff or applies\n * anything; it reports which hunks were accepted and rejected and leaves the\n * consequences to the application, the same way ai-action-ledger does.\n *\n * Not a grid. A code listing is a table of text, and role=\"grid\" would promise\n * cell-by-cell arrow navigation that neither exists here nor makes sense for\n * reading code. Line kind is carried in text, because a plus sign and a green\n * background are not information.\n */\n\nexport type HunkDecision = \"accepted\" | \"rejected\";\n\nconst KIND_LABEL: Record<DiffRow[\"kind\"], string> = {\n  added: \"Added\",\n  removed: \"Removed\",\n  context: \"Unchanged\",\n};\n\nexport interface DiffViewerProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  hunks: DiffHunk[];\n  /** Names the diff — usually the path of the file being changed. */\n  label: string;\n  view?: \"unified\" | \"split\";\n  /** Per-hunk decisions, keyed by hunk id. Controlled. */\n  decisions?: Record<string, HunkDecision>;\n  onDecision?: (hunkId: string, decision: HunkDecision) => void;\n  children?: ReactNode;\n}\n\nexport function DiffViewer({\n  className,\n  hunks,\n  label,\n  view = \"unified\",\n  decisions,\n  onDecision,\n  children,\n  ...props\n}: DiffViewerProps) {\n  const counts = useMemo(() => countChanges(hunks), [hunks]);\n\n  return (\n    <div\n      data-slot=\"diff-viewer\"\n      data-view={view}\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <span className=\"font-mono text-sm font-medium\">{label}</span>\n        {/* Said in words as well as coloured, and before the diff rather than\n            after it: a reader deserves to know the size of the change before\n            they start reading it. */}\n        <span data-slot=\"diff-viewer-summary\" className=\"text-xs text-muted-foreground\">\n          <span className=\"text-success\">+{counts.added}</span>{\" \"}\n          <span className=\"text-destructive\">−{counts.removed}</span>\n          <span className=\"sr-only\">\n            {` — ${String(counts.added)} lines added, ${String(counts.removed)} removed`}\n          </span>\n        </span>\n      </div>\n\n      {children}\n\n      {hunks.length === 0 ? (\n        <p className=\"rounded-lg border border-border bg-muted/30 p-3 text-sm text-muted-foreground\">\n          No changes.\n        </p>\n      ) : (\n        <div className=\"overflow-hidden rounded-lg border border-border\">\n          {hunks.map((hunk) => (\n            <DiffHunkView\n              key={hunk.id}\n              hunk={hunk}\n              label={label}\n              view={view}\n              decision={decisions?.[hunk.id]}\n              onDecision={onDecision}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction DiffHunkView({\n  hunk,\n  label,\n  view,\n  decision,\n  onDecision,\n}: {\n  hunk: DiffHunk;\n  label: string;\n  view: \"unified\" | \"split\";\n  decision?: HunkDecision;\n  onDecision?: (hunkId: string, decision: HunkDecision) => void;\n}) {\n  const splitRows = useMemo(\n    () => (view === \"split\" ? toSplitRows(hunk.rows) : []),\n    [view, hunk.rows],\n  );\n\n  return (\n    <section\n      data-slot=\"diff-hunk\"\n      data-decision={decision}\n      aria-label={`${label}, hunk ${hunk.id}`}\n      className={cn(\n        \"border-b border-border last:border-b-0\",\n        decision === \"rejected\" && \"opacity-55\",\n      )}\n    >\n      {hunk.skippedBefore > 0 ? (\n        <p\n          data-slot=\"diff-hunk-skipped\"\n          className=\"border-b border-border bg-muted/40 px-3 py-1 font-mono text-2xs text-muted-foreground\"\n        >\n          {hunk.skippedBefore} unchanged {hunk.skippedBefore === 1 ? \"line\" : \"lines\"} hidden\n        </p>\n      ) : null}\n\n      {onDecision ? (\n        <div className=\"flex flex-wrap items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5\">\n          <span className=\"flex-1 text-xs text-muted-foreground\">\n            {decision === \"accepted\"\n              ? \"Accepted\"\n              : decision === \"rejected\"\n                ? \"Rejected\"\n                : \"Not decided\"}\n          </span>\n          <HunkButton\n            pressed={decision === \"accepted\"}\n            onClick={() => {\n              onDecision(hunk.id, \"accepted\");\n            }}\n          >\n            Accept\n          </HunkButton>\n          <HunkButton\n            pressed={decision === \"rejected\"}\n            onClick={() => {\n              onDecision(hunk.id, \"rejected\");\n            }}\n          >\n            Reject\n          </HunkButton>\n        </div>\n      ) : null}\n\n      <div className=\"overflow-x-auto\">\n        <table data-slot=\"diff-table\" className=\"w-full border-collapse font-mono text-xs\">\n          <tbody>\n            {view === \"split\"\n              ? splitRows.map((pair, index) => (\n                  <tr key={index} data-slot=\"diff-row\">\n                    <SplitCell row={pair.left} side=\"before\" />\n                    <SplitCell row={pair.right} side=\"after\" />\n                  </tr>\n                ))\n              : hunk.rows.map((row, index) => <UnifiedRow key={index} row={row} />)}\n          </tbody>\n        </table>\n      </div>\n    </section>\n  );\n}\n\nconst ROW_STYLES: Record<DiffRow[\"kind\"], string> = {\n  added: \"bg-success/10\",\n  removed: \"bg-destructive/10\",\n  context: \"\",\n};\n\nfunction UnifiedRow({ row }: { row: DiffRow }) {\n  return (\n    <tr data-slot=\"diff-row\" data-kind={row.kind} className={ROW_STYLES[row.kind]}>\n      <LineNumber value={row.before} />\n      <LineNumber value={row.after} />\n      <td className=\"w-4 pr-1 text-center text-muted-foreground select-none\" aria-hidden=\"true\">\n        {row.kind === \"added\" ? \"+\" : row.kind === \"removed\" ? \"−\" : \"\"}\n      </td>\n      <td className=\"w-full py-0.5 pr-3 break-all whitespace-pre-wrap\">\n        {/* The kind, for anyone who cannot see the sign or the tint. Reading a\n            diff aloud without it is reading the same file twice. */}\n        <span className=\"sr-only\">{KIND_LABEL[row.kind]}: </span>\n        <RowContent row={row} />\n      </td>\n    </tr>\n  );\n}\n\nfunction SplitCell({ row, side }: { row: DiffRow | null; side: \"before\" | \"after\" }) {\n  if (!row) {\n    // An empty half of a pair, not a blank line of code. Hidden from assistive\n    // technology so a reader is not read padding.\n    return (\n      <>\n        <td aria-hidden=\"true\" className=\"w-10 bg-muted/40\" />\n        <td aria-hidden=\"true\" className=\"w-1/2 bg-muted/20\" />\n      </>\n    );\n  }\n\n  return (\n    <>\n      <LineNumber value={side === \"before\" ? row.before : row.after} />\n      <td\n        className={cn(\"w-1/2 py-0.5 pr-3 break-all whitespace-pre-wrap\", ROW_STYLES[row.kind])}\n      >\n        <span className=\"sr-only\">{KIND_LABEL[row.kind]}: </span>\n        <RowContent row={row} />\n      </td>\n    </>\n  );\n}\n\nfunction RowContent({ row }: { row: DiffRow }) {\n  if (!row.segments) return <>{row.content}</>;\n\n  return (\n    <>\n      {row.segments.map((segment, index) =>\n        segment.changed ? (\n          // A mark element, so the changed words survive as structure rather\n          // than existing only as a slightly stronger background.\n          <mark\n            key={index}\n            className={cn(\n              \"rounded-[2px] text-inherit\",\n              row.kind === \"added\" ? \"bg-success/30\" : \"bg-destructive/30\",\n            )}\n          >\n            {segment.text}\n          </mark>\n        ) : (\n          <span key={index}>{segment.text}</span>\n        ),\n      )}\n    </>\n  );\n}\n\nfunction LineNumber({ value }: { value?: number }) {\n  return (\n    <td\n      // Decorative: the line number is orientation for a sighted reader, and\n      // announcing two numbers before every line makes the diff unlistenable.\n      aria-hidden=\"true\"\n      className=\"w-10 border-r border-border bg-muted/40 px-2 py-0.5 text-right text-muted-foreground tabular-nums select-none\"\n    >\n      {value ?? \"\"}\n    </td>\n  );\n}\n\nfunction HunkButton({\n  className,\n  pressed,\n  ...props\n}: ComponentPropsWithRef<\"button\"> & { pressed: boolean }) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={pressed}\n      className={cn(\n        \"rounded-md border px-2 py-0.5 text-xs font-medium transition-colors\",\n        pressed\n          ? \"border-primary bg-primary text-primary-foreground\"\n          : \"border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Switches between unified and side-by-side. */\nexport function DiffViewerToolbar({\n  className,\n  view,\n  onViewChange,\n  ...props\n}: Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> & {\n  view: \"unified\" | \"split\";\n  onViewChange: (view: \"unified\" | \"split\") => void;\n}) {\n  return (\n    <div\n      data-slot=\"diff-viewer-toolbar\"\n      role=\"group\"\n      aria-label=\"Diff layout\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    >\n      {([\"unified\", \"split\"] as const).map((option) => (\n        <button\n          key={option}\n          type=\"button\"\n          aria-pressed={view === option}\n          onClick={() => {\n            onViewChange(option);\n          }}\n          className={cn(\n            \"rounded-md border px-2 py-0.5 text-xs font-medium capitalize transition-colors\",\n            view === option\n              ? \"border-transparent bg-secondary text-secondary-foreground\"\n              : \"border-input bg-background text-muted-foreground hover:text-foreground\",\n            focusRing,\n          )}\n        >\n          {option}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"diff-viewer.js","names":[],"sources":["../../../src/components/diff-viewer/diff-viewer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { countChanges, toSplitRows, type DiffHunk, type DiffRow } from \"./diff-model\";\n\n/**\n * A diff, and a decision about it.\n *\n * The rendering half exists because every packaged viewer brings its own\n * styling system — emotion, or HTML strings plus a stylesheet — which design\n * tokens cannot reach and which is awkward under RSC. The deciding half exists\n * because Dowel is for AI products, and an agent proposing a change to a file is\n * the case that needs it: what every coding agent ships, and no component\n * library does.\n *\n * Decisions are controlled. The component never mutates the diff or applies\n * anything; it reports which hunks were accepted and rejected and leaves the\n * consequences to the application, the same way ai-action-ledger does.\n *\n * Not a grid. A code listing is a table of text, and role=\"grid\" would promise\n * cell-by-cell arrow navigation that neither exists here nor makes sense for\n * reading code. Line kind is carried in text, because a plus sign and a green\n * background are not information.\n */\n\nexport type HunkDecision = \"accepted\" | \"rejected\";\n\nconst KIND_LABEL: Record<DiffRow[\"kind\"], string> = {\n  added: \"Added\",\n  removed: \"Removed\",\n  context: \"Unchanged\",\n};\n\nexport interface DiffViewerProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  hunks: DiffHunk[];\n  /** Names the diff — usually the path of the file being changed. */\n  label: string;\n  view?: \"unified\" | \"split\";\n  /** Per-hunk decisions, keyed by hunk id. Controlled. */\n  decisions?: Record<string, HunkDecision>;\n  onDecision?: (hunkId: string, decision: HunkDecision) => void;\n  children?: ReactNode;\n}\n\nexport function DiffViewer({\n  className,\n  hunks,\n  label,\n  view = \"unified\",\n  decisions,\n  onDecision,\n  children,\n  ...props\n}: DiffViewerProps) {\n  const counts = useMemo(() => countChanges(hunks), [hunks]);\n\n  return (\n    <div\n      data-slot=\"diff-viewer\"\n      data-view={view}\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <span className=\"font-mono text-sm font-medium\">{label}</span>\n        {/* Said in words as well as coloured, and before the diff rather than\n            after it: a reader deserves to know the size of the change before\n            they start reading it. */}\n        <span data-slot=\"diff-viewer-summary\" className=\"text-xs text-muted-foreground\">\n          <span className=\"text-success\">+{counts.added}</span>{\" \"}\n          <span className=\"text-destructive\">−{counts.removed}</span>\n          <span className=\"sr-only\">\n            {` — ${String(counts.added)} lines added, ${String(counts.removed)} removed`}\n          </span>\n        </span>\n      </div>\n\n      {children}\n\n      {hunks.length === 0 ? (\n        <p className=\"rounded-lg border border-border bg-muted/30 p-3 text-sm text-muted-foreground\">\n          No changes.\n        </p>\n      ) : (\n        <div className=\"overflow-hidden rounded-lg border border-border\">\n          {hunks.map((hunk) => (\n            <DiffHunkView\n              key={hunk.id}\n              hunk={hunk}\n              label={label}\n              view={view}\n              decision={decisions?.[hunk.id]}\n              onDecision={onDecision}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction DiffHunkView({\n  hunk,\n  label,\n  view,\n  decision,\n  onDecision,\n}: {\n  hunk: DiffHunk;\n  label: string;\n  view: \"unified\" | \"split\";\n  decision?: HunkDecision;\n  onDecision?: (hunkId: string, decision: HunkDecision) => void;\n}) {\n  const splitRows = useMemo(\n    () => (view === \"split\" ? toSplitRows(hunk.rows) : []),\n    [view, hunk.rows],\n  );\n\n  return (\n    <section\n      data-slot=\"diff-hunk\"\n      data-decision={decision}\n      aria-label={`${label}, hunk ${hunk.id}`}\n      className={cn(\n        \"border-b border-border last:border-b-0\",\n        decision === \"rejected\" && \"opacity-55\",\n      )}\n    >\n      {hunk.skippedBefore > 0 ? (\n        <p\n          data-slot=\"diff-hunk-skipped\"\n          className=\"border-b border-border bg-muted/40 px-3 py-1 font-mono text-2xs text-muted-foreground\"\n        >\n          {hunk.skippedBefore} unchanged {hunk.skippedBefore === 1 ? \"line\" : \"lines\"} hidden\n        </p>\n      ) : null}\n\n      {onDecision ? (\n        <div className=\"flex flex-wrap items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5\">\n          <span className=\"flex-1 text-xs text-muted-foreground\">\n            {decision === \"accepted\"\n              ? \"Accepted\"\n              : decision === \"rejected\"\n                ? \"Rejected\"\n                : \"Not decided\"}\n          </span>\n          <HunkButton\n            pressed={decision === \"accepted\"}\n            onClick={() => {\n              onDecision(hunk.id, \"accepted\");\n            }}\n          >\n            Accept\n          </HunkButton>\n          <HunkButton\n            pressed={decision === \"rejected\"}\n            onClick={() => {\n              onDecision(hunk.id, \"rejected\");\n            }}\n          >\n            Reject\n          </HunkButton>\n        </div>\n      ) : null}\n\n      <div className=\"overflow-x-auto\">\n        <table data-slot=\"diff-table\" className=\"w-full border-collapse font-mono text-xs\">\n          <tbody>\n            {view === \"split\"\n              ? splitRows.map((pair, index) => (\n                  <tr key={index} data-slot=\"diff-row\">\n                    <SplitCell row={pair.left} side=\"before\" />\n                    <SplitCell row={pair.right} side=\"after\" />\n                  </tr>\n                ))\n              : hunk.rows.map((row, index) => <UnifiedRow key={index} row={row} />)}\n          </tbody>\n        </table>\n      </div>\n    </section>\n  );\n}\n\nconst ROW_STYLES: Record<DiffRow[\"kind\"], string> = {\n  added: \"bg-success/10\",\n  removed: \"bg-destructive/10\",\n  context: \"\",\n};\n\nfunction UnifiedRow({ row }: { row: DiffRow }) {\n  return (\n    <tr data-slot=\"diff-row\" data-kind={row.kind} className={ROW_STYLES[row.kind]}>\n      <LineNumber value={row.before} />\n      <LineNumber value={row.after} />\n      <td className=\"w-4 pe-1 text-center text-muted-foreground select-none\" aria-hidden=\"true\">\n        {row.kind === \"added\" ? \"+\" : row.kind === \"removed\" ? \"−\" : \"\"}\n      </td>\n      <td className=\"w-full py-0.5 pe-3 break-all whitespace-pre-wrap\">\n        {/* The kind, for anyone who cannot see the sign or the tint. Reading a\n            diff aloud without it is reading the same file twice. */}\n        <span className=\"sr-only\">{KIND_LABEL[row.kind]}: </span>\n        <RowContent row={row} />\n      </td>\n    </tr>\n  );\n}\n\nfunction SplitCell({ row, side }: { row: DiffRow | null; side: \"before\" | \"after\" }) {\n  if (!row) {\n    // An empty half of a pair, not a blank line of code. Hidden from assistive\n    // technology so a reader is not read padding.\n    return (\n      <>\n        <td aria-hidden=\"true\" className=\"w-10 bg-muted/40\" />\n        <td aria-hidden=\"true\" className=\"w-1/2 bg-muted/20\" />\n      </>\n    );\n  }\n\n  return (\n    <>\n      <LineNumber value={side === \"before\" ? row.before : row.after} />\n      <td\n        className={cn(\"w-1/2 py-0.5 pe-3 break-all whitespace-pre-wrap\", ROW_STYLES[row.kind])}\n      >\n        <span className=\"sr-only\">{KIND_LABEL[row.kind]}: </span>\n        <RowContent row={row} />\n      </td>\n    </>\n  );\n}\n\nfunction RowContent({ row }: { row: DiffRow }) {\n  if (!row.segments) return <>{row.content}</>;\n\n  return (\n    <>\n      {row.segments.map((segment, index) =>\n        segment.changed ? (\n          // A mark element, so the changed words survive as structure rather\n          // than existing only as a slightly stronger background.\n          <mark\n            key={index}\n            className={cn(\n              \"rounded-[2px] text-inherit\",\n              row.kind === \"added\" ? \"bg-success/30\" : \"bg-destructive/30\",\n            )}\n          >\n            {segment.text}\n          </mark>\n        ) : (\n          <span key={index}>{segment.text}</span>\n        ),\n      )}\n    </>\n  );\n}\n\nfunction LineNumber({ value }: { value?: number }) {\n  return (\n    <td\n      // Decorative: the line number is orientation for a sighted reader, and\n      // announcing two numbers before every line makes the diff unlistenable.\n      aria-hidden=\"true\"\n      className=\"w-10 border-e border-border bg-muted/40 px-2 py-0.5 text-end text-muted-foreground tabular-nums select-none\"\n    >\n      {value ?? \"\"}\n    </td>\n  );\n}\n\nfunction HunkButton({\n  className,\n  pressed,\n  ...props\n}: ComponentPropsWithRef<\"button\"> & { pressed: boolean }) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={pressed}\n      className={cn(\n        \"rounded-md border px-2 py-0.5 text-xs font-medium transition-colors\",\n        pressed\n          ? \"border-primary bg-primary text-primary-foreground\"\n          : \"border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Switches between unified and side-by-side. */\nexport function DiffViewerToolbar({\n  className,\n  view,\n  onViewChange,\n  ...props\n}: Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> & {\n  view: \"unified\" | \"split\";\n  onViewChange: (view: \"unified\" | \"split\") => void;\n}) {\n  return (\n    <div\n      data-slot=\"diff-viewer-toolbar\"\n      role=\"group\"\n      aria-label=\"Diff layout\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    >\n      {([\"unified\", \"split\"] as const).map((option) => (\n        <button\n          key={option}\n          type=\"button\"\n          aria-pressed={view === option}\n          onClick={() => {\n            onViewChange(option);\n          }}\n          className={cn(\n            \"rounded-md border px-2 py-0.5 text-xs font-medium capitalize transition-colors\",\n            view === option\n              ? \"border-transparent bg-secondary text-secondary-foreground\"\n              : \"border-input bg-background text-muted-foreground hover:text-foreground\",\n            focusRing,\n          )}\n        >\n          {option}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/direction/direction.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+//#region src/components/direction/direction.d.ts
+/**
+ * Tells the component set which way the writing runs.
+ *
+ * Every direction-dependent style in this library is written logically —
+ * `ps-`, `me-`, `text-end` — so the CSS follows `dir` on its own. The
+ * primitives underneath do not: several of them read direction from React
+ * context rather than from the document, and with no provider they assume
+ * left-to-right and set `dir="ltr"` on their own elements. The result is a page
+ * that mirrors correctly except for its menus, selects and sliders, which is
+ * worse than one that does not mirror at all, because it looks deliberate.
+ *
+ * So an RTL application needs both: `dir` on the document for the CSS, and this
+ * for the primitives.
+ *
+ * ```tsx
+ * <html dir="rtl" lang="ar">
+ *   <body>
+ *     <DirectionProvider dir="rtl">{children}</DirectionProvider>
+ *   </body>
+ * </html>
+ * ```
+ *
+ * A left-to-right application needs neither. Nothing here is required to render
+ * English correctly, which is why it is easy to ship without it and never know.
+ */
+interface DirectionProviderProps {
+  dir: "ltr" | "rtl";
+  children?: ReactNode;
+}
+declare function DirectionProvider({ dir, children }: DirectionProviderProps): import("react").JSX.Element;
+//#endregion
+export { DirectionProvider, DirectionProviderProps };
+//# sourceMappingURL=direction.d.ts.map

package/dist/components/direction/direction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"direction.d.ts","names":[],"sources":["../../../src/components/direction/direction.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;UA8BiB;EACf;EACA,WAAW;;iBAGG,oBAAoB,KAAK,YAAY,yCAAsB,IAAA"}

package/dist/components/direction/direction.js

@@ -0,0 +1,14 @@
+"use client";
+import { Direction } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/direction/direction.tsx
+function DirectionProvider({ dir, children }) {
+	return /* @__PURE__ */ jsx(Direction.Provider, {
+		dir,
+		children
+	});
+}
+//#endregion
+export { DirectionProvider };
+
+//# sourceMappingURL=direction.js.map

package/dist/components/direction/direction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"direction.js","names":["DirectionPrimitive"],"sources":["../../../src/components/direction/direction.tsx"],"sourcesContent":["\"use client\";\n\nimport { Direction as DirectionPrimitive } from \"radix-ui\";\nimport type { ReactNode } from \"react\";\n\n/**\n * Tells the component set which way the writing runs.\n *\n * Every direction-dependent style in this library is written logically —\n * `ps-`, `me-`, `text-end` — so the CSS follows `dir` on its own. The\n * primitives underneath do not: several of them read direction from React\n * context rather than from the document, and with no provider they assume\n * left-to-right and set `dir=\"ltr\"` on their own elements. The result is a page\n * that mirrors correctly except for its menus, selects and sliders, which is\n * worse than one that does not mirror at all, because it looks deliberate.\n *\n * So an RTL application needs both: `dir` on the document for the CSS, and this\n * for the primitives.\n *\n * ```tsx\n * <html dir=\"rtl\" lang=\"ar\">\n *   <body>\n *     <DirectionProvider dir=\"rtl\">{children}</DirectionProvider>\n *   </body>\n * </html>\n * ```\n *\n * A left-to-right application needs neither. Nothing here is required to render\n * English correctly, which is why it is easy to ship without it and never know.\n */\nexport interface DirectionProviderProps {\n  dir: \"ltr\" | \"rtl\";\n  children?: ReactNode;\n}\n\nexport function DirectionProvider({ dir, children }: DirectionProviderProps) {\n  return <DirectionPrimitive.Provider dir={dir}>{children}</DirectionPrimitive.Provider>;\n}\n"],"mappings":";;;;AAmCA,SAAgB,kBAAkB,EAAE,KAAK,YAAoC;CAC3E,OAAO,oBAACA,UAAmB,UAApB;EAAkC;EAAM;CAAsC,CAAA;AACvF"}

package/dist/components/direction/index.d.ts

@@ -0,0 +1,2 @@
+import { DirectionProvider, DirectionProviderProps } from "./direction.js";
+export { DirectionProvider, type DirectionProviderProps };

package/dist/components/direction/index.js

@@ -0,0 +1,2 @@
+import { DirectionProvider } from "./direction.js";
+export { DirectionProvider };

package/dist/components/direction/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/direction/meta.ts
+const meta = defineMeta({
+	name: "direction",
+	title: "Direction Provider",
+	description: "Tells the component primitives which way the writing runs, so menus and sliders mirror with the rest of the page.",
+	category: "foundation",
+	status: "stable",
+	dependencies: ["radix-ui"],
+	registryDependencies: [],
+	files: ["direction.tsx"],
+	a11y: "Needed only for right-to-left languages, and needed in addition to `dir` on the document rather than instead of it. The styling here is written with logical properties and follows `dir` by itself; the primitives underneath read direction from React context and assume left-to-right without a provider, which mirrors a page correctly except for its menus, selects and sliders — worse than not mirroring at all, because it looks deliberate."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/direction/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/direction/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"direction\",\n  title: \"Direction Provider\",\n  description:\n    \"Tells the component primitives which way the writing runs, so menus and sliders mirror with the rest of the page.\",\n  category: \"foundation\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"direction.tsx\"],\n  a11y:\n    \"Needed only for right-to-left languages, and needed in addition to `dir` on the document \" +\n    \"rather than instead of it. The styling here is written with logical properties and follows \" +\n    \"`dir` by itself; the primitives underneath read direction from React context and assume \" +\n    \"left-to-right without a provider, which mirrors a page correctly except for its menus, \" +\n    \"selects and sliders — worse than not mirroring at all, because it looks deliberate.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,eAAe;CACvB,MACE;AAKJ,CAAC"}

package/dist/components/dns-record/dns-record.d.ts

@@ -0,0 +1,61 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/dns-record/dns-record.d.ts
+/**
+ * "Add this record at your DNS provider."
+ *
+ * Vercel, Resend, Cloudflare, Postmark, Google Workspace and every product
+ * that verifies a domain or routes its mail draws this card by hand, and
+ * they all learn the same three things the hard way.
+ *
+ * The parts are copied separately. A provider's form has a Name field, a
+ * Type field and a Value field, so one button that copies the whole line
+ * copies something nobody can paste anywhere.
+ *
+ * The Name field is a trap. Some providers want the host relative to the
+ * zone, `_dmarc`; some want the full name, `_dmarc.acme.com`; and some take
+ * the relative form and append the zone themselves, so a full name pasted
+ * in becomes `_dmarc.acme.com.acme.com` and the check fails for a reason
+ * nobody can see. So the host is shown both ways, with the sentence that
+ * explains which to use.
+ *
+ * A failed check says what was found. "Not verified" sends people back to
+ * their provider to stare at a record that is correct and has not
+ * propagated yet; "found v=spf1 -all, expected v=spf1 include:…" sends them
+ * to the typo. And nothing found at all is said as nothing found, with how
+ * long that can take, because it is not the same as wrong.
+ */
+type DnsRecordStatus = "pending" | "checking" | "verified" | "failed";
+interface DnsHostForms {
+  /** Relative to the zone: `_dmarc`, or `@` for the zone itself. */
+  relative: string;
+  /** Fully qualified: `_dmarc.acme.com`. */
+  full: string;
+}
+/**
+ * The host both ways a provider might want it. Accepts either form and a
+ * trailing dot, so the record can be declared however the backend has it.
+ */
+declare function dnsHostForms(name: string, zone: string): DnsHostForms;
+interface DnsRecordProps extends Omit<ComponentPropsWithRef<"section">, "children"> {
+  type: string;
+  /** The host, relative or fully qualified. */
+  name: string;
+  value: string;
+  /** The zone the record belongs to. Enables the host to be shown both ways. */
+  zone?: string;
+  ttl?: number | string;
+  priority?: number;
+  /** What the record is for, in the reader's language: "Proves you own acme.com". */
+  purpose?: string;
+  status?: DnsRecordStatus;
+  /** What the check found instead, when it failed. The useful part. */
+  found?: string[];
+  checkedAt?: Date;
+  locale?: string;
+  onCheck?: () => void;
+  children?: ReactNode;
+}
+declare function DnsRecord({ className, type, name, value, zone, ttl, priority, purpose, status, found, checkedAt, locale, onCheck, children, ...props }: DnsRecordProps): import("react").JSX.Element;
+//#endregion
+export { DnsHostForms, DnsRecord, DnsRecordProps, DnsRecordStatus, dnsHostForms };
+//# sourceMappingURL=dns-record.d.ts.map

package/dist/components/dns-record/dns-record.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dns-record.d.ts","names":[],"sources":["../../../src/components/dns-record/dns-record.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;KAyCY;UAEK;;EAEf;;EAEA;;;;;;iBAOc,aAAa,cAAc,eAAe;UAYzC,uBAAuB,KAAK;EAC3C;;EAEA;EACA;;EAEA;EACA;EACA;;EAEA;EACA,SAAS;;EAET;EACA,YAAY;EACZ;EACA;EACA,WAAW;;iBAKG,YACd,WACA,MACA,MACA,OACA,MACA,KACA,UACA,SACA,QACA,OACA,WACA,QACA,SACA,aACG,SACF,iCAAc,IAAA"}

package/dist/components/dns-record/dns-record.js

@@ -0,0 +1,227 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Spinner } from "../spinner/spinner.js";
+import { Button } from "../button/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/components/dns-record/dns-record.tsx
+/**
+* The host both ways a provider might want it. Accepts either form and a
+* trailing dot, so the record can be declared however the backend has it.
+*/
+function dnsHostForms(name, zone) {
+	const cleanZone = zone.replace(/\.$/, "");
+	const cleanName = name.replace(/\.$/, "");
+	if (cleanName === "@" || cleanName === "" || cleanName === cleanZone) return {
+		relative: "@",
+		full: cleanZone
+	};
+	if (cleanName.endsWith(`.${cleanZone}`)) return {
+		relative: cleanName.slice(0, -cleanZone.length - 1),
+		full: cleanName
+	};
+	return {
+		relative: cleanName,
+		full: `${cleanName}.${cleanZone}`
+	};
+}
+function DnsRecord({ className, type, name, value, zone, ttl, priority, purpose, status = "pending", found, checkedAt, locale, onCheck, children, ...props }) {
+	const id = useId();
+	const forms = zone ? dnsHostForms(name, zone) : null;
+	const host = forms ? forms.relative : name;
+	const [copy, setCopy] = useState(null);
+	const timer = useRef(null);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const copyPart = (part, text) => {
+		const settle = (state) => {
+			setCopy({
+				part,
+				state
+			});
+			if (timer.current) clearTimeout(timer.current);
+			timer.current = setTimeout(() => {
+				setCopy(null);
+			}, 2e3);
+		};
+		Promise.resolve().then(() => navigator.clipboard.writeText(text)).then(() => {
+			settle("copied");
+		}, () => {
+			settle("error");
+		});
+	};
+	const statusText = status === "verified" ? "Verified" : status === "checking" ? "Checking…" : status === "failed" ? found && found.length > 0 ? "Not verified. Something else was found." : "Not verified. Nothing found yet — DNS changes can take up to 48 hours to appear." : "Not checked yet";
+	const checked = checkedAt !== void 0 ? new Intl.DateTimeFormat(locale, {
+		dateStyle: "medium",
+		timeStyle: "short"
+	}).format(checkedAt) : null;
+	const parts = [
+		{
+			key: "type",
+			label: "Type",
+			text: type
+		},
+		{
+			key: "name",
+			label: "Name",
+			text: host,
+			note: forms ? forms.relative === "@" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Some providers want ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: forms.full
+				}),
+				" or leave it blank instead of ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: "@"
+				}),
+				"."
+			] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Some providers want the full name, ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: forms.full
+				}),
+				". If the field already ends in ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: zone
+				}),
+				", enter just the part shown."
+			] }) : void 0
+		},
+		{
+			key: "value",
+			label: "Value",
+			text: value,
+			note: type.toUpperCase() === "TXT" ? "Enter without quotes; your provider adds them if it needs to." : void 0
+		},
+		...priority !== void 0 ? [{
+			key: "priority",
+			label: "Priority",
+			text: String(priority)
+		}] : [],
+		...ttl !== void 0 ? [{
+			key: "ttl",
+			label: "TTL",
+			text: String(ttl)
+		}] : []
+	];
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "dns-record",
+		"data-status": status,
+		"aria-labelledby": `${id}-heading`,
+		"aria-busy": status === "checking" || void 0,
+		className: cn("flex flex-col gap-3 rounded-lg border border-border bg-card p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-baseline justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("h3", {
+					id: `${id}-heading`,
+					className: "text-sm font-medium",
+					children: [
+						type,
+						" record",
+						purpose ? /* @__PURE__ */ jsxs("span", {
+							className: "font-normal text-muted-foreground",
+							children: [" · ", purpose]
+						}) : null
+					]
+				}), /* @__PURE__ */ jsxs("p", {
+					"data-slot": "dns-record-status",
+					role: "status",
+					"aria-live": "polite",
+					className: cn("flex items-center gap-1.5 text-xs", status === "verified" && "text-success", status === "failed" && "text-destructive", (status === "pending" || status === "checking") && "text-muted-foreground"),
+					children: [
+						status === "checking" ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null,
+						statusText,
+						checked && status !== "checking" ? /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [" · checked ", checked]
+						}) : null
+					]
+				})]
+			}),
+			children,
+			/* @__PURE__ */ jsx("dl", {
+				className: "m-0 grid gap-x-4 gap-y-2 sm:grid-cols-[auto_1fr]",
+				children: parts.map((part) => /* @__PURE__ */ jsxs("div", {
+					className: "contents",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-xs font-medium text-muted-foreground sm:pt-1.5",
+						children: part.label
+					}), /* @__PURE__ */ jsxs("dd", {
+						className: "m-0 flex flex-col gap-1",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx("code", {
+									"data-slot": "dns-record-part",
+									"data-part": part.key,
+									className: "min-w-0 flex-1 rounded-md bg-muted px-2 py-1 font-mono text-xs break-all",
+									children: part.text
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": `Copy ${part.label.toLowerCase()}`,
+									"data-state": copy?.part === part.key ? copy.state : "idle",
+									className: cn("shrink-0 rounded-md border border-input bg-background px-2 py-1 text-xs font-medium", "hover:bg-accent hover:text-accent-foreground", focusRing),
+									onClick: () => {
+										copyPart(part.key, part.text);
+									},
+									children: copy?.part === part.key && copy.state === "copied" ? "Copied" : "Copy"
+								})]
+							}),
+							copy?.part === part.key && copy.state === "error" ? /* @__PURE__ */ jsx("p", {
+								"data-slot": "dns-record-copy-error",
+								className: "text-xs text-destructive",
+								children: "Could not copy. Select it and copy by hand."
+							}) : null,
+							part.note ? /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-muted-foreground",
+								children: part.note
+							}) : null
+						]
+					})]
+				}, part.key))
+			}),
+			status === "failed" && found && found.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "dns-record-found",
+				className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-xs",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "font-medium text-destructive",
+					children: "Found instead:"
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "m-0 mt-1 list-none p-0",
+					children: found.map((entry) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", {
+						className: "font-mono break-all",
+						children: entry
+					}) }, entry))
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: copy?.state === "copied" ? `Copied ${copy.part}` : copy?.state === "error" ? `Could not copy ${copy.part}. Select it and copy by hand.` : ""
+			}),
+			onCheck ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					loading: status === "checking",
+					onClick: onCheck,
+					children: status === "verified" ? "Check again" : "Check now"
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { DnsRecord, dnsHostForms };
+
+//# sourceMappingURL=dns-record.js.map

package/dist/components/dns-record/dns-record.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dns-record.js","names":[],"sources":["../../../src/components/dns-record/dns-record.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { Spinner } from \"@/components/spinner\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * \"Add this record at your DNS provider.\"\n *\n * Vercel, Resend, Cloudflare, Postmark, Google Workspace and every product\n * that verifies a domain or routes its mail draws this card by hand, and\n * they all learn the same three things the hard way.\n *\n * The parts are copied separately. A provider's form has a Name field, a\n * Type field and a Value field, so one button that copies the whole line\n * copies something nobody can paste anywhere.\n *\n * The Name field is a trap. Some providers want the host relative to the\n * zone, `_dmarc`; some want the full name, `_dmarc.acme.com`; and some take\n * the relative form and append the zone themselves, so a full name pasted\n * in becomes `_dmarc.acme.com.acme.com` and the check fails for a reason\n * nobody can see. So the host is shown both ways, with the sentence that\n * explains which to use.\n *\n * A failed check says what was found. \"Not verified\" sends people back to\n * their provider to stare at a record that is correct and has not\n * propagated yet; \"found v=spf1 -all, expected v=spf1 include:…\" sends them\n * to the typo. And nothing found at all is said as nothing found, with how\n * long that can take, because it is not the same as wrong.\n */\n\nexport type DnsRecordStatus = \"pending\" | \"checking\" | \"verified\" | \"failed\";\n\nexport interface DnsHostForms {\n  /** Relative to the zone: `_dmarc`, or `@` for the zone itself. */\n  relative: string;\n  /** Fully qualified: `_dmarc.acme.com`. */\n  full: string;\n}\n\n/**\n * The host both ways a provider might want it. Accepts either form and a\n * trailing dot, so the record can be declared however the backend has it.\n */\nexport function dnsHostForms(name: string, zone: string): DnsHostForms {\n  const cleanZone = zone.replace(/\\.$/, \"\");\n  const cleanName = name.replace(/\\.$/, \"\");\n  if (cleanName === \"@\" || cleanName === \"\" || cleanName === cleanZone) {\n    return { relative: \"@\", full: cleanZone };\n  }\n  if (cleanName.endsWith(`.${cleanZone}`)) {\n    return { relative: cleanName.slice(0, -cleanZone.length - 1), full: cleanName };\n  }\n  return { relative: cleanName, full: `${cleanName}.${cleanZone}` };\n}\n\nexport interface DnsRecordProps extends Omit<ComponentPropsWithRef<\"section\">, \"children\"> {\n  type: string;\n  /** The host, relative or fully qualified. */\n  name: string;\n  value: string;\n  /** The zone the record belongs to. Enables the host to be shown both ways. */\n  zone?: string;\n  ttl?: number | string;\n  priority?: number;\n  /** What the record is for, in the reader's language: \"Proves you own acme.com\". */\n  purpose?: string;\n  status?: DnsRecordStatus;\n  /** What the check found instead, when it failed. The useful part. */\n  found?: string[];\n  checkedAt?: Date;\n  locale?: string;\n  onCheck?: () => void;\n  children?: ReactNode;\n}\n\ntype CopyState = \"idle\" | \"copied\" | \"error\";\n\nexport function DnsRecord({\n  className,\n  type,\n  name,\n  value,\n  zone,\n  ttl,\n  priority,\n  purpose,\n  status = \"pending\",\n  found,\n  checkedAt,\n  locale,\n  onCheck,\n  children,\n  ...props\n}: DnsRecordProps) {\n  const id = useId();\n  const forms = zone ? dnsHostForms(name, zone) : null;\n  const host = forms ? forms.relative : name;\n\n  // Which part was copied, and whether it worked, so the button that was\n  // pressed is the one that says so.\n  const [copy, setCopy] = useState<{ part: string; state: CopyState } | null>(null);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const copyPart = (part: string, text: string) => {\n    const settle = (state: CopyState) => {\n      setCopy({ part, state });\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setCopy(null);\n      }, 2000);\n    };\n    Promise.resolve()\n      .then(() => navigator.clipboard.writeText(text))\n      .then(\n        () => {\n          settle(\"copied\");\n        },\n        () => {\n          settle(\"error\");\n        },\n      );\n  };\n\n  const statusText =\n    status === \"verified\"\n      ? \"Verified\"\n      : status === \"checking\"\n        ? \"Checking…\"\n        : status === \"failed\"\n          ? found && found.length > 0\n            ? \"Not verified. Something else was found.\"\n            : \"Not verified. Nothing found yet — DNS changes can take up to 48 hours to appear.\"\n          : \"Not checked yet\";\n\n  const checked =\n    checkedAt !== undefined\n      ? new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeStyle: \"short\" }).format(\n          checkedAt,\n        )\n      : null;\n\n  const parts: { key: string; label: string; text: string; note?: ReactNode }[] = [\n    { key: \"type\", label: \"Type\", text: type },\n    {\n      key: \"name\",\n      label: \"Name\",\n      text: host,\n      note: forms ? (\n        forms.relative === \"@\" ? (\n          <>\n            Some providers want <code className=\"font-mono\">{forms.full}</code> or leave it\n            blank instead of <code className=\"font-mono\">@</code>.\n          </>\n        ) : (\n          <>\n            Some providers want the full name, <code className=\"font-mono\">{forms.full}</code>.\n            If the field already ends in <code className=\"font-mono\">{zone}</code>, enter just\n            the part shown.\n          </>\n        )\n      ) : undefined,\n    },\n    {\n      key: \"value\",\n      label: \"Value\",\n      text: value,\n      note:\n        type.toUpperCase() === \"TXT\"\n          ? \"Enter without quotes; your provider adds them if it needs to.\"\n          : undefined,\n    },\n    ...(priority !== undefined\n      ? [{ key: \"priority\", label: \"Priority\", text: String(priority) }]\n      : []),\n    ...(ttl !== undefined ? [{ key: \"ttl\", label: \"TTL\", text: String(ttl) }] : []),\n  ];\n\n  return (\n    <section\n      data-slot=\"dns-record\"\n      data-status={status}\n      aria-labelledby={`${id}-heading`}\n      aria-busy={status === \"checking\" || undefined}\n      className={cn(\n        \"flex flex-col gap-3 rounded-lg border border-border bg-card p-4\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <h3 id={`${id}-heading`} className=\"text-sm font-medium\">\n          {type} record\n          {purpose ? (\n            <span className=\"font-normal text-muted-foreground\"> · {purpose}</span>\n          ) : null}\n        </h3>\n        {/* Status as a word, and announced when it changes: a check was asked\n            for, and the answer should arrive where the asker is. */}\n        <p\n          data-slot=\"dns-record-status\"\n          role=\"status\"\n          aria-live=\"polite\"\n          className={cn(\n            \"flex items-center gap-1.5 text-xs\",\n            status === \"verified\" && \"text-success\",\n            status === \"failed\" && \"text-destructive\",\n            (status === \"pending\" || status === \"checking\") && \"text-muted-foreground\",\n          )}\n        >\n          {status === \"checking\" ? <Spinner size=\"sm\" /> : null}\n          {statusText}\n          {checked && status !== \"checking\" ? (\n            <span className=\"text-muted-foreground\"> · checked {checked}</span>\n          ) : null}\n        </p>\n      </div>\n\n      {children}\n\n      <dl className=\"m-0 grid gap-x-4 gap-y-2 sm:grid-cols-[auto_1fr]\">\n        {parts.map((part) => (\n          <div key={part.key} className=\"contents\">\n            <dt className=\"text-xs font-medium text-muted-foreground sm:pt-1.5\">\n              {part.label}\n            </dt>\n            <dd className=\"m-0 flex flex-col gap-1\">\n              <div className=\"flex items-start gap-2\">\n                <code\n                  data-slot=\"dns-record-part\"\n                  data-part={part.key}\n                  className=\"min-w-0 flex-1 rounded-md bg-muted px-2 py-1 font-mono text-xs break-all\"\n                >\n                  {part.text}\n                </code>\n                <button\n                  type=\"button\"\n                  aria-label={`Copy ${part.label.toLowerCase()}`}\n                  data-state={copy?.part === part.key ? copy.state : \"idle\"}\n                  className={cn(\n                    \"shrink-0 rounded-md border border-input bg-background px-2 py-1 text-xs font-medium\",\n                    \"hover:bg-accent hover:text-accent-foreground\",\n                    focusRing,\n                  )}\n                  onClick={() => {\n                    copyPart(part.key, part.text);\n                  }}\n                >\n                  {copy?.part === part.key && copy.state === \"copied\" ? \"Copied\" : \"Copy\"}\n                </button>\n              </div>\n              {copy?.part === part.key && copy.state === \"error\" ? (\n                <p data-slot=\"dns-record-copy-error\" className=\"text-xs text-destructive\">\n                  Could not copy. Select it and copy by hand.\n                </p>\n              ) : null}\n              {part.note ? <p className=\"text-xs text-muted-foreground\">{part.note}</p> : null}\n            </dd>\n          </div>\n        ))}\n      </dl>\n\n      {status === \"failed\" && found && found.length > 0 ? (\n        <div\n          data-slot=\"dns-record-found\"\n          className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-xs\"\n        >\n          <p className=\"font-medium text-destructive\">Found instead:</p>\n          <ul className=\"m-0 mt-1 list-none p-0\">\n            {found.map((entry) => (\n              <li key={entry}>\n                <code className=\"font-mono break-all\">{entry}</code>\n              </li>\n            ))}\n          </ul>\n        </div>\n      ) : null}\n\n      {/* A separate region from the verification status, so \"Copied name\"\n          never replaces or interrupts a check result that is being read.\n          Present from the start, so the first copy is heard. */}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {copy?.state === \"copied\"\n          ? `Copied ${copy.part}`\n          : copy?.state === \"error\"\n            ? `Could not copy ${copy.part}. Select it and copy by hand.`\n            : \"\"}\n      </span>\n\n      {onCheck ? (\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"sm\" loading={status === \"checking\"} onClick={onCheck}>\n            {status === \"verified\" ? \"Check again\" : \"Check now\"}\n          </Button>\n        </div>\n      ) : null}\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/components/dns-record/index.d.ts

@@ -0,0 +1,2 @@
+import { DnsHostForms, DnsRecord, DnsRecordProps, DnsRecordStatus, dnsHostForms } from "./dns-record.js";
+export { type DnsHostForms, DnsRecord, type DnsRecordProps, type DnsRecordStatus, dnsHostForms };

package/dist/components/dns-record/index.js

@@ -0,0 +1,2 @@
+import { DnsRecord, dnsHostForms } from "./dns-record.js";
+export { DnsRecord, dnsHostForms };

package/dist/components/dns-record/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dns-record/meta.ts
+const meta = defineMeta({
+	name: "dns-record",
+	title: "DNS Record",
+	description: "Add this record at your provider: parts copied separately, checked with what was found.",
+	category: "data",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: ["button", "spinner"],
+	files: ["dns-record.tsx"],
+	a11y: "The card is a region named by the record's type and purpose. Each part is a definition with its own copy button, named by the part it copies, so five Copy buttons are five different buttons. Verification status is a word in a polite live region, so the answer to a check arrives where it was asked for, and the card is aria-busy while checking. Copy results are announced in a separate region, present from the start, so a copy never replaces a check result mid-sentence; failure is announced with what to do instead. What the check found is a list, not a colour."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dns-record/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dns-record/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dns-record\",\n  title: \"DNS Record\",\n  description:\n    \"Add this record at your provider: parts copied separately, checked with what was found.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"button\", \"spinner\"],\n  files: [\"dns-record.tsx\"],\n  a11y:\n    \"The card is a region named by the record's type and purpose. Each part is a definition \" +\n    \"with its own copy button, named by the part it copies, so five Copy buttons are five \" +\n    \"different buttons. Verification status is a word in a polite live region, so the answer to \" +\n    \"a check arrives where it was asked for, and the card is aria-busy while checking. Copy \" +\n    \"results are announced in a separate region, present from the start, so a copy never \" +\n    \"replaces a check result mid-sentence; failure is announced with what to do instead. What \" +\n    \"the check found is a list, not a colour.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,UAAU,SAAS;CAC1C,OAAO,CAAC,gBAAgB;CACxB,MACE;AAOJ,CAAC"}

package/dist/components/drawer/drawer.js

@@ -107,7 +107,7 @@ function DrawerContent({ className, children, showHandle = true, ...props }) {
 function DrawerHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "drawer-header",
-		className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-4 pb-2 text-left", className),
+		className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-4 pb-2 text-start", className),
 		...props
 	});
 }