@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -3,14 +3,34 @@ import { disabledStyles, focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { countChanges, toSplitRows } from "./diff-model.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 //#region src/components/diff-viewer/diff-viewer.tsx
 const KIND_LABEL = {
 	added: "Added",
 	removed: "Removed",
 	context: "Unchanged"
 };
-function DiffViewer({ className, hunks, label, view = "unified", decisions, onDecision, children, ...props }) {
+const PREFIX = "dowel-diff-viewer";
+const STYLES = `
+@keyframes ${PREFIX}-wipe{from{clip-path:inset(0 100% 0 0)}}
+@keyframes ${PREFIX}-wipe-rtl{from{clip-path:inset(0 0 0 100%)}}
+@keyframes ${PREFIX}-flash-accepted{from{background-color:color-mix(in oklab,var(--color-success) 14%,transparent)}}
+@keyframes ${PREFIX}-flash-rejected{from{background-color:color-mix(in oklab,var(--color-destructive) 12%,transparent)}}
+.${PREFIX}-wipe{animation:${PREFIX}-wipe calc(280ms * var(--motion-scale,1)) var(--ease-out-quint) both;animation-delay:calc(var(--dowel-i,0) * 20ms * var(--motion-scale,1))}
+.${PREFIX}-wipe:dir(rtl){animation-name:${PREFIX}-wipe-rtl}
+[data-slot=diff-hunk][data-decision-changed=accepted]{animation:${PREFIX}-flash-accepted calc(350ms * var(--motion-scale,1)) var(--ease-out-quint)}
+[data-slot=diff-hunk][data-decision-changed=rejected]{animation:${PREFIX}-flash-rejected calc(350ms * var(--motion-scale,1)) var(--ease-out-quint)}
+`;
+/** Lines after this many in a hunk share the last one's delay. */
+const WIPE_STAGGER_CAP = 20;
+/** Props for the content cell of an added line under `entrance="wipe"`. */
+function wipe(index) {
+	return {
+		className: `${PREFIX}-wipe`,
+		style: { "--dowel-i": Math.min(index, WIPE_STAGGER_CAP) }
+	};
+}
+function DiffViewer({ className, hunks, label, view = "unified", decisions, onDecision, children, entrance = "none", collapseRejected = false, ...props }) {
 	const counts = useMemo(() => countChanges(hunks), [hunks]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "diff-viewer",
@@ -18,6 +38,11 @@ function DiffViewer({ className, hunks, label, view = "unified", decisions, onDe
 		className: cn("flex flex-col gap-2", className),
 		...props,
 		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-baseline justify-between gap-2",
 				children: [/* @__PURE__ */ jsx("span", {
@@ -54,17 +79,66 @@ function DiffViewer({ className, hunks, label, view = "unified", decisions, onDe
 					label,
 					view,
 					decision: decisions?.[hunk.id],
-					onDecision
+					onDecision,
+					entrance,
+					collapseRejected
 				}, hunk.id))
 			})
 		]
 	});
 }
-function DiffHunkView({ hunk, label, view, decision, onDecision }) {
+function DiffHunkView({ hunk, label, view, decision, onDecision, entrance, collapseRejected }) {
 	const splitRows = useMemo(() => view === "split" ? toSplitRows(hunk.rows) : [], [view, hunk.rows]);
+	const [previous, setPrevious] = useState(decision);
+	const [flash, setFlash] = useState(void 0);
+	if (decision !== previous) {
+		setPrevious(decision);
+		setFlash(decision);
+	}
+	const sectionRef = useRef(null);
+	useEffect(() => {
+		const section = sectionRef.current;
+		if (!section || !flash) return;
+		const clear = (event) => {
+			if (event.target === section) setFlash(void 0);
+		};
+		section.addEventListener("animationend", clear);
+		return () => {
+			section.removeEventListener("animationend", clear);
+		};
+	}, [flash]);
+	const wiping = entrance === "wipe";
+	const collapsed = collapseRejected && decision === "rejected";
+	const hiddenNote = collapsed ? /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: " — lines hidden"
+	}) : null;
+	const table = /* @__PURE__ */ jsx("div", {
+		className: "overflow-x-auto",
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "diff-table",
+			className: "w-full border-collapse font-mono text-xs",
+			children: /* @__PURE__ */ jsx("tbody", { children: view === "split" ? splitRows.map((pair, index) => /* @__PURE__ */ jsxs("tr", {
+				"data-slot": "diff-row",
+				children: [/* @__PURE__ */ jsx(SplitCell, {
+					row: pair.left,
+					side: "before"
+				}), /* @__PURE__ */ jsx(SplitCell, {
+					row: pair.right,
+					side: "after",
+					wipeIndex: wiping ? index : void 0
+				})]
+			}, index)) : hunk.rows.map((row, index) => /* @__PURE__ */ jsx(UnifiedRow, {
+				row,
+				wipeIndex: wiping ? index : void 0
+			}, index)) })
+		})
+	});
 	return /* @__PURE__ */ jsxs("section", {
 		"data-slot": "diff-hunk",
 		"data-decision": decision,
+		ref: sectionRef,
+		"data-decision-changed": flash,
 		"aria-label": `${label}, hunk ${hunk.id}`,
 		className: cn("border-b border-border last:border-b-0", decision === "rejected" && "opacity-55"),
 		children: [
@@ -81,9 +155,9 @@ function DiffHunkView({ hunk, label, view, decision, onDecision }) {
 			onDecision ? /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5",
 				children: [
-					/* @__PURE__ */ jsx("span", {
+					/* @__PURE__ */ jsxs("span", {
 						className: "flex-1 text-xs text-muted-foreground",
-						children: decision === "accepted" ? "Accepted" : decision === "rejected" ? "Rejected" : "Not decided"
+						children: [decision === "accepted" ? "Accepted" : decision === "rejected" ? "Rejected" : "Not decided", hiddenNote]
 					}),
 					/* @__PURE__ */ jsx(HunkButton, {
 						pressed: decision === "accepted",
@@ -101,23 +175,17 @@ function DiffHunkView({ hunk, label, view, decision, onDecision }) {
 					})
 				]
 			}) : null,
-			/* @__PURE__ */ jsx("div", {
-				className: "overflow-x-auto",
-				children: /* @__PURE__ */ jsx("table", {
-					"data-slot": "diff-table",
-					className: "w-full border-collapse font-mono text-xs",
-					children: /* @__PURE__ */ jsx("tbody", { children: view === "split" ? splitRows.map((pair, index) => /* @__PURE__ */ jsxs("tr", {
-						"data-slot": "diff-row",
-						children: [/* @__PURE__ */ jsx(SplitCell, {
-							row: pair.left,
-							side: "before"
-						}), /* @__PURE__ */ jsx(SplitCell, {
-							row: pair.right,
-							side: "after"
-						})]
-					}, index)) : hunk.rows.map((row, index) => /* @__PURE__ */ jsx(UnifiedRow, { row }, index)) })
+			!onDecision ? hiddenNote : null,
+			collapseRejected ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "diff-hunk-lines",
+				"data-collapsed": collapsed || void 0,
+				className: cn("grid transition-[grid-template-rows,opacity] duration-[calc(250ms*var(--motion-scale))] ease-[var(--ease-out-quint)]", collapsed ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr]"),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "min-h-0 overflow-hidden",
+					inert: collapsed || void 0,
+					children: table
 				})
-			})
+			}) : table
 		]
 	});
 }
@@ -126,7 +194,8 @@ const ROW_STYLES = {
 	removed: "bg-destructive/10",
 	context: ""
 };
-function UnifiedRow({ row }) {
+function UnifiedRow({ row, wipeIndex }) {
+	const motion = wipeIndex !== void 0 && row.kind === "added" ? wipe(wipeIndex) : void 0;
 	return /* @__PURE__ */ jsxs("tr", {
 		"data-slot": "diff-row",
 		"data-kind": row.kind,
@@ -135,12 +204,13 @@ 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: cn("w-full py-0.5 pe-3 break-all whitespace-pre-wrap", motion?.className),
+				style: motion?.style,
 				children: [/* @__PURE__ */ jsxs("span", {
 					className: "sr-only",
 					children: [KIND_LABEL[row.kind], ": "]
@@ -149,7 +219,7 @@ function UnifiedRow({ row }) {
 		]
 	});
 }
-function SplitCell({ row, side }) {
+function SplitCell({ row, side, wipeIndex }) {
 	if (!row) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("td", {
 		"aria-hidden": "true",
 		className: "w-10 bg-muted/40"
@@ -157,8 +227,10 @@ function SplitCell({ row, side }) {
 		"aria-hidden": "true",
 		className: "w-1/2 bg-muted/20"
 	})] });
+	const motion = wipeIndex !== void 0 && row.kind === "added" ? wipe(wipeIndex) : void 0;
 	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], motion?.className),
+		style: motion?.style,
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "sr-only",
 			children: [KIND_LABEL[row.kind], ": "]
@@ -175,7 +247,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\n// Motion from SmoothUI AI Diff (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} 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   * Entrance for added lines. `wipe` draws each one in along the reading\n   * direction, a line after the other; context and removed lines were already\n   * there and do not move.\n   */\n  entrance?: \"none\" | \"wipe\";\n  /**\n   * Collapse a rejected hunk's lines. Its header and controls stay, so the\n   * decision can still be reversed, and the header says the lines are hidden.\n   */\n  collapseRejected?: boolean;\n}\n\nconst PREFIX = \"dowel-diff-viewer\";\n\n/* The wipe reveals an added line's code (never its line numbers) in reading\n * order; its stagger is capped so a long diff does not take seconds to appear.\n * The flash is a one-shot tint when a hunk's decision changes. */\nconst STYLES = `\n@keyframes ${PREFIX}-wipe{from{clip-path:inset(0 100% 0 0)}}\n@keyframes ${PREFIX}-wipe-rtl{from{clip-path:inset(0 0 0 100%)}}\n@keyframes ${PREFIX}-flash-accepted{from{background-color:color-mix(in oklab,var(--color-success) 14%,transparent)}}\n@keyframes ${PREFIX}-flash-rejected{from{background-color:color-mix(in oklab,var(--color-destructive) 12%,transparent)}}\n.${PREFIX}-wipe{animation:${PREFIX}-wipe calc(280ms * var(--motion-scale,1)) var(--ease-out-quint) both;animation-delay:calc(var(--dowel-i,0) * 20ms * var(--motion-scale,1))}\n.${PREFIX}-wipe:dir(rtl){animation-name:${PREFIX}-wipe-rtl}\n[data-slot=diff-hunk][data-decision-changed=accepted]{animation:${PREFIX}-flash-accepted calc(350ms * var(--motion-scale,1)) var(--ease-out-quint)}\n[data-slot=diff-hunk][data-decision-changed=rejected]{animation:${PREFIX}-flash-rejected calc(350ms * var(--motion-scale,1)) var(--ease-out-quint)}\n`;\n\n/** Lines after this many in a hunk share the last one's delay. */\nconst WIPE_STAGGER_CAP = 20;\n\n/** Props for the content cell of an added line under `entrance=\"wipe\"`. */\nfunction wipe(index: number): { className: string; style: CSSProperties } {\n  return {\n    className: `${PREFIX}-wipe`,\n    style: { \"--dowel-i\": Math.min(index, WIPE_STAGGER_CAP) } as CSSProperties,\n  };\n}\n\nexport function DiffViewer({\n  className,\n  hunks,\n  label,\n  view = \"unified\",\n  decisions,\n  onDecision,\n  children,\n  entrance = \"none\",\n  collapseRejected = false,\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      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\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              entrance={entrance}\n              collapseRejected={collapseRejected}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction DiffHunkView({\n  hunk,\n  label,\n  view,\n  decision,\n  onDecision,\n  entrance,\n  collapseRejected,\n}: {\n  hunk: DiffHunk;\n  label: string;\n  view: \"unified\" | \"split\";\n  decision?: HunkDecision;\n  onDecision?: (hunkId: string, decision: HunkDecision) => void;\n  entrance: \"none\" | \"wipe\";\n  collapseRejected: boolean;\n}) {\n  const splitRows = useMemo(\n    () => (view === \"split\" ? toSplitRows(hunk.rows) : []),\n    [view, hunk.rows],\n  );\n\n  // A decision that changes after mount flashes once. Tracked during render,\n  // so a decision present on first render (a replay) does not flash.\n  const [previous, setPrevious] = useState(decision);\n  const [flash, setFlash] = useState<HunkDecision | undefined>(undefined);\n  if (decision !== previous) {\n    setPrevious(decision);\n    setFlash(decision);\n  }\n\n  // A native listener rather than onAnimationEnd: React picks a vendor-prefixed\n  // event name wherever AnimationEvent is missing, and would never hear it.\n  const sectionRef = useRef<HTMLElement | null>(null);\n  useEffect(() => {\n    const section = sectionRef.current;\n    if (!section || !flash) return;\n    const clear = (event: Event) => {\n      // Wiped lines end their own animations inside the hunk; only the\n      // hunk's flash clears the flag.\n      if (event.target === section) setFlash(undefined);\n    };\n    section.addEventListener(\"animationend\", clear);\n    return () => {\n      section.removeEventListener(\"animationend\", clear);\n    };\n  }, [flash]);\n\n  const wiping = entrance === \"wipe\";\n  const collapsed = collapseRejected && decision === \"rejected\";\n  const hiddenNote = collapsed ? <span className=\"sr-only\"> — lines hidden</span> : null;\n\n  const table = (\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\n                    row={pair.right}\n                    side=\"after\"\n                    wipeIndex={wiping ? index : undefined}\n                  />\n                </tr>\n              ))\n            : hunk.rows.map((row, index) => (\n                <UnifiedRow key={index} row={row} wipeIndex={wiping ? index : undefined} />\n              ))}\n        </tbody>\n      </table>\n    </div>\n  );\n\n  return (\n    <section\n      data-slot=\"diff-hunk\"\n      data-decision={decision}\n      ref={sectionRef}\n      data-decision-changed={flash}\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            {hiddenNote}\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      {!onDecision ? hiddenNote : null}\n\n      {collapseRejected ? (\n        // Grid rows animate between 1fr and 0fr, which is a height transition\n        // CSS can do. Collapsed lines are inert: hidden, and out of reach.\n        <div\n          data-slot=\"diff-hunk-lines\"\n          data-collapsed={collapsed || undefined}\n          className={cn(\n            \"grid transition-[grid-template-rows,opacity] duration-[calc(250ms*var(--motion-scale))] ease-[var(--ease-out-quint)]\",\n            collapsed ? \"grid-rows-[0fr] opacity-0\" : \"grid-rows-[1fr]\",\n          )}\n        >\n          <div className=\"min-h-0 overflow-hidden\" inert={collapsed || undefined}>\n            {table}\n          </div>\n        </div>\n      ) : (\n        table\n      )}\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, wipeIndex }: { row: DiffRow; wipeIndex?: number }) {\n  const motion = wipeIndex !== undefined && row.kind === \"added\" ? wipe(wipeIndex) : undefined;\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\n        className={cn(\"w-full py-0.5 pe-3 break-all whitespace-pre-wrap\", motion?.className)}\n        style={motion?.style}\n      >\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({\n  row,\n  side,\n  wipeIndex,\n}: {\n  row: DiffRow | null;\n  side: \"before\" | \"after\";\n  wipeIndex?: number;\n}) {\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  const motion = wipeIndex !== undefined && row.kind === \"added\" ? wipe(wipeIndex) : undefined;\n\n  return (\n    <>\n      <LineNumber value={side === \"before\" ? row.before : row.after} />\n      <td\n        className={cn(\n          \"w-1/2 py-0.5 pe-3 break-all whitespace-pre-wrap\",\n          ROW_STYLES[row.kind],\n          motion?.className,\n        )}\n        style={motion?.style}\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/diff-viewer/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["diff"],
 	registryDependencies: [],
 	files: ["diff-model.ts", "diff-viewer.tsx"],
-	a11y: "A semantic table, not a grid. role=\"grid\" would promise cell-by-cell arrow navigation that does not exist here and makes no sense for reading code. Every row states added, removed or unchanged in text, because a plus sign and a green tint are not information — a diff read aloud without it is just the same file twice. Line numbers are aria-hidden: they orient a sighted reader, and announcing two numbers before every line makes the diff unlistenable. Changed words are marked with mark elements so they survive as structure, and the empty half of a split pair is hidden rather than read as a blank line of code."
+	a11y: "A semantic table, not a grid. role=\"grid\" would promise cell-by-cell arrow navigation that does not exist here and makes no sense for reading code. Every row states added, removed or unchanged in text, because a plus sign and a green tint are not information — a diff read aloud without it is just the same file twice. Line numbers are aria-hidden: they orient a sighted reader, and announcing two numbers before every line makes the diff unlistenable. Changed words are marked with mark elements so they survive as structure, and the empty half of a split pair is hidden rather than read as a blank line of code. The optional wipe entrance is visual only — every row is in the DOM and its kind text is never clipped from assistive technology. With collapseRejected, a rejected hunk's lines are inert and hidden, its header says so in words, and Accept stays available so the decision can be reversed."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/diff-viewer/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"diff-viewer\",\n  title: \"Diff Viewer\",\n  description: \"A diff you can style, and accept or reject hunk by hunk.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [\"diff\"],\n  registryDependencies: [],\n  files: [\"diff-model.ts\", \"diff-viewer.tsx\"],\n  a11y:\n    'A semantic table, not a grid. role=\"grid\" would promise cell-by-cell arrow navigation that ' +\n    \"does not exist here and makes no sense for reading code. Every row states added, removed or \" +\n    \"unchanged in text, because a plus sign and a green tint are not information — a diff read \" +\n    \"aloud without it is just the same file twice. Line numbers are aria-hidden: they orient a \" +\n    \"sighted reader, and announcing two numbers before every line makes the diff unlistenable. \" +\n    \"Changed words are marked with mark elements so they survive as structure, and the empty half \" +\n    \"of a split pair is hidden rather than read as a blank line of code.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,MAAM;CACrB,sBAAsB,CAAC;CACvB,OAAO,CAAC,iBAAiB,iBAAiB;CAC1C,MACE;AAOJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/diff-viewer/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"diff-viewer\",\n  title: \"Diff Viewer\",\n  description: \"A diff you can style, and accept or reject hunk by hunk.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [\"diff\"],\n  registryDependencies: [],\n  files: [\"diff-model.ts\", \"diff-viewer.tsx\"],\n  a11y:\n    'A semantic table, not a grid. role=\"grid\" would promise cell-by-cell arrow navigation that ' +\n    \"does not exist here and makes no sense for reading code. Every row states added, removed or \" +\n    \"unchanged in text, because a plus sign and a green tint are not information — a diff read \" +\n    \"aloud without it is just the same file twice. Line numbers are aria-hidden: they orient a \" +\n    \"sighted reader, and announcing two numbers before every line makes the diff unlistenable. \" +\n    \"Changed words are marked with mark elements so they survive as structure, and the empty half \" +\n    \"of a split pair is hidden rather than read as a blank line of code. The optional wipe entrance \" +\n    \"is visual only — every row is in the DOM and its kind text is never clipped from assistive \" +\n    \"technology. With collapseRejected, a rejected hunk's lines are inert and hidden, its header \" +\n    \"says so in words, and Accept stays available so the decision can be reversed.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,MAAM;CACrB,sBAAsB,CAAC;CACvB,OAAO,CAAC,iBAAiB,iBAAiB;CAC1C,MACE;AAUJ,CAAC"}

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/dither-area/dither-area.d.ts

@@ -0,0 +1,46 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/dither-area/dither-area.d.ts
+declare const ditherAreaVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherAreaDatum {
+  /** The point's name on the axis, e.g. a date. */
+  label: string;
+  value: number;
+}
+interface DitherAreaProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherAreaVariants> {
+  data: readonly DitherAreaDatum[];
+  /** What the chart shows. Names the image, the scrubber and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Axis maximum. Defaults to the largest value. */
+  max?: number;
+  formatValue?: (value: number) => string;
+  /** Colour token or CSS colour expression for the fill. Default "primary". */
+  color?: string;
+  /** Show value ticks and point labels. */
+  showAxis?: boolean;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  cell?: number;
+  /** Cursor point (controlled); null hides it. */
+  index?: number | null;
+  defaultIndex?: number | null;
+  onIndexChange?: (index: number | null) => void;
+  /** Data table headers. */
+  categoryLabel?: string;
+  valueLabel?: string;
+}
+/** Space kept above the tallest value, as a fraction of the plot height. */
+declare const AREA_HEADROOM = 0.16;
+/** Distance from the top of the plot, 0..1, for a value against `max`. */
+declare function areaY(value: number, max: number): number;
+/** Position across the plot, 0..1, of point `index` of `count`. */
+declare function pointX(index: number, count: number): number;
+declare function DitherArea({ data, label, description, max, size, formatValue, color, showAxis, showTable, animate, cell, index, defaultIndex, onIndexChange, categoryLabel, valueLabel, className, ...props }: DitherAreaProps): import("react").JSX.Element;
+//#endregion
+export { AREA_HEADROOM, DitherArea, DitherAreaDatum, DitherAreaProps, areaY, ditherAreaVariants, pointX };
+//# sourceMappingURL=dither-area.d.ts.map

package/dist/components/dither-area/dither-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-area.d.ts","names":[],"sources":["../../../src/components/dither-area/dither-area.tsx"],"mappings":";;;cAiCa,qBAAkB;;6CAS7B;UAEe;;EAEf;EACA;;UAGe,wBAEb,KAAK,2CACL,oBAAoB;EACtB,eAAe;;EAEf;;EAEA;;EAEA;EACA,eAAe;;EAEf;;EAEA;;EAEA;EACA;EACA;;EAEA;EACA;EACA,iBAAiB;;EAEjB;EACA;;;cAIW;;iBAGG,MAAM,eAAe;;iBAKrB,OAAO,eAAe;iBAItB,aACd,MACA,OACA,aACA,KACA,MACA,aACA,OACA,UACA,WACA,SACA,MACA,OACA,cACA,eACA,eACA,YACA,cACG,SACF,kCAAe,IAAA"}