@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/diff-viewer/diff-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diff-viewer.d.ts","names":[],"sources":["../../../src/components/diff-viewer/diff-viewer.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;KA6BY;UAQK,wBAAwB,KAAK;EAC5C,OAAO;;EAEP;EACA;;EAEA,YAAY,eAAe;EAC3B,cAAc,gBAAgB,UAAU;EACxC,WAAW;;iBAGG,aACd,WACA,OACA,OACA,MACA,WACA,YACA,aACG,SACF,kCAAe,IAAA;;iBAmPF,oBACd,WACA,MACA,iBACG,SACF,KAAK;EACN;EACA,eAAe;oBAChB,IAAA"}
+{"version":3,"file":"diff-viewer.d.ts","names":[],"sources":["../../../src/components/diff-viewer/diff-viewer.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;KAsCY;UAQK,wBAAwB,KAAK;EAC5C,OAAO;;EAEP;EACA;;EAEA,YAAY,eAAe;EAC3B,cAAc,gBAAgB,UAAU;EACxC,WAAW;;;;;;EAMX;;;;;EAKA;;iBA8Bc,aACd,WACA,OACA,OACA,MACA,WACA,YACA,UACA,UACA,qBACG,SACF,kCAAe,IAAA;;iBA6UF,oBACd,WACA,MACA,iBACG,SACF,KAAK;EACN;EACA,eAAe;oBAChB,IAAA"}

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,
@@ -140,7 +209,8 @@ function UnifiedRow({ row }) {
 				children: row.kind === "added" ? "+" : row.kind === "removed" ? "−" : ""
 			}),
 			/* @__PURE__ */ jsxs("td", {
-				className: "w-full py-0.5 pe-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 pe-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], ": "]

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 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":";;;;;;;AA+BA,MAAM,aAA8C;CAClD,OAAO;CACP,SAAS;CACT,SAAS;AACX;AAaA,SAAgB,WAAW,EACzB,WACA,OACA,OACA,OAAO,WACP,WACA,YACA,UACA,GAAG,SACe;CAClB,MAAM,SAAS,cAAc,aAAa,KAAK,GAAG,CAAC,KAAK,CAAC;CAEzD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;EAJN,UAAA;GAME,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAAiC,UAAA;IAAY,CAAA,GAI7D,qBAAC,QAAD;KAAM,aAAU;KAAsB,WAAU;KAAhD,UAAA;MACE,qBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CAA+B,KAAE,OAAO,KAAY;;MAAE;MACtD,qBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CAAmC,KAAE,OAAO,OAAc;;MAC1D,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,MAAM,OAAO,OAAO,KAAK,EAAE,gBAAgB,OAAO,OAAO,OAAO,EAAE;MAC/D,CAAA;KACF;IACH,CAAA,CAAA;;GAEJ;GAEA,MAAM,WAAW,IAChB,oBAAC,KAAD;IAAG,WAAU;IAAgF,UAAA;GAE1F,CAAA,IAEH,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,SACV,oBAAC,cAAD;KAEQ;KACC;KACD;KACN,UAAU,YAAY,KAAK;KACf;IACb,GANM,KAAK,EAMX,CACF;GACE,CAAA;EAEJ;;AAET;AAEA,SAAS,aAAa,EACpB,MACA,OACA,MACA,UACA,cAOC;CACD,MAAM,YAAY,cACT,SAAS,UAAU,YAAY,KAAK,IAAI,IAAI,CAAC,GACpD,CAAC,MAAM,KAAK,IAAI,CAClB;CAEA,OACE,qBAAC,WAAD;EACE,aAAU;EACV,iBAAe;EACf,cAAY,GAAG,MAAM,SAAS,KAAK;EACnC,WAAW,GACT,0CACA,aAAa,cAAc,YAC7B;EAPF,UAAA;GASG,KAAK,gBAAgB,IACpB,qBAAC,KAAD;IACE,aAAU;IACV,WAAU;IAFZ,UAAA;KAIG,KAAK;KAAc;KAAY,KAAK,kBAAkB,IAAI,SAAS;KAAQ;IAC3E;GACD,CAAA,IAAA;GAEH,aACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,aAAa,aACV,aACA,aAAa,aACX,aACA;KACF,CAAA;KACN,oBAAC,YAAD;MACE,SAAS,aAAa;MACtB,eAAe;OACb,WAAW,KAAK,IAAI,UAAU;MAChC;MACD,UAAA;KAEW,CAAA;KACZ,oBAAC,YAAD;MACE,SAAS,aAAa;MACtB,eAAe;OACb,WAAW,KAAK,IAAI,UAAU;MAChC;MACD,UAAA;KAEW,CAAA;IACT;GACH,CAAA,IAAA;GAEJ,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,SAAD;KAAO,aAAU;KAAa,WAAU;KACtC,UAAA,oBAAC,SAAD,EAAA,UACG,SAAS,UACN,UAAU,KAAK,MAAM,UACnB,qBAAC,MAAD;MAAgB,aAAU;MAA1B,UAAA,CACE,oBAAC,WAAD;OAAW,KAAK,KAAK;OAAM,MAAK;MAAU,CAAA,GAC1C,oBAAC,WAAD;OAAW,KAAK,KAAK;OAAO,MAAK;MAAS,CAAA,CACxC;KAHK,GAAA,KAGL,CACL,IACD,KAAK,KAAK,KAAK,KAAK,UAAU,oBAAC,YAAD,EAA6B,IAAM,GAAlB,KAAkB,CAAC,EACjE,CAAA;IACF,CAAA;GACJ,CAAA;EACE;;AAEb;AAEA,MAAM,aAA8C;CAClD,OAAO;CACP,SAAS;CACT,SAAS;AACX;AAEA,SAAS,WAAW,EAAE,OAAyB;CAC7C,OACE,qBAAC,MAAD;EAAI,aAAU;EAAW,aAAW,IAAI;EAAM,WAAW,WAAW,IAAI;EAAxE,UAAA;GACE,oBAAC,YAAD,EAAY,OAAO,IAAI,OAAS,CAAA;GAChC,oBAAC,YAAD,EAAY,OAAO,IAAI,MAAQ,CAAA;GAC/B,oBAAC,MAAD;IAAI,WAAU;IAAyD,eAAY;IAChF,UAAA,IAAI,SAAS,UAAU,MAAM,IAAI,SAAS,YAAY,MAAM;GAC3D,CAAA;GACJ,qBAAC,MAAD;IAAI,WAAU;IAAd,UAAA,CAGE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAA2B,WAAW,IAAI,OAAM,IAAQ;IACxD,CAAA,GAAA,oBAAC,YAAD,EAAiB,IAAM,CAAA,CACrB;;EACF;;AAER;AAEA,SAAS,UAAU,EAAE,KAAK,QAA2D;CACnF,IAAI,CAAC,KAGH,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAI,eAAY;EAAO,WAAU;CAAoB,CAAA,GACrD,oBAAC,MAAD;EAAI,eAAY;EAAO,WAAU;CAAqB,CAAA,CACtD,EAAA,CAAA;CAIN,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,YAAD,EAAY,OAAO,SAAS,WAAW,IAAI,SAAS,IAAI,MAAQ,CAAA,GAChE,qBAAC,MAAD;EACE,WAAW,GAAG,mDAAmD,WAAW,IAAI,KAAK;EADvF,UAAA,CAGE,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CAA2B,WAAW,IAAI,OAAM,IAAQ;EACxD,CAAA,GAAA,oBAAC,YAAD,EAAiB,IAAM,CAAA,CACrB;CACJ,CAAA,CAAA,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAAE,OAAyB;CAC7C,IAAI,CAAC,IAAI,UAAU,OAAO,oBAAA,UAAA,EAAA,UAAG,IAAI,QAAU,CAAA;CAE3C,OACE,oBAAA,UAAA,EAAA,UACG,IAAI,SAAS,KAAK,SAAS,UAC1B,QAAQ,UAGN,oBAAC,QAAD;EAEE,WAAW,GACT,8BACA,IAAI,SAAS,UAAU,kBAAkB,mBAC3C;EAEC,UAAA,QAAQ;CACL,GAPC,KAOD,IAEN,oBAAC,QAAD,EAAA,UAAmB,QAAQ,KAAW,GAA3B,KAA2B,CAE1C,EACA,CAAA;AAEN;AAEA,SAAS,WAAW,EAAE,SAA6B;CACjD,OACE,oBAAC,MAAD;EAGE,eAAY;EACZ,WAAU;EAET,UAAA,SAAS;CACR,CAAA;AAER;AAEA,SAAS,WAAW,EAClB,WACA,SACA,GAAG,SACsD;CACzD,OACE,oBAAC,UAAD;EACE,MAAK;EACL,gBAAc;EACd,WAAW,GACT,uEACA,UACI,sDACA,2EACJ,WACA,gBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,kBAAkB,EAChC,WACA,MACA,cACA,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAW;EACX,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;EAEF,UAAA,CAAC,WAAW,OAAO,CAAC,CAAW,KAAK,WACpC,oBAAC,UAAD;GAEE,MAAK;GACL,gBAAc,SAAS;GACvB,eAAe;IACb,aAAa,MAAM;GACrB;GACA,WAAW,GACT,kFACA,SAAS,SACL,8DACA,0EACJ,SACF;GAEC,UAAA;EACK,GAfD,MAeC,CACT;CACE,CAAA;AAET"}
+{"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/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"}

package/dist/components/dither-area/dither-area.js

@@ -0,0 +1,186 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { createSprings, ditherFill, hash2, smoothstep } from "../dither-canvas/dither-engine.js";
+import { DitherCanvas, DitherTable, formatDitherValue } from "../dither-canvas/dither-canvas.js";
+import { makePath, tracePolyline, valueAt } from "../dither-canvas/dither-geometry.js";
+import { DitherCursor, useDitherScrubber } from "../dither-canvas/dither-scrubber.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef } from "react";
+//#region src/components/dither-area/dither-area.tsx
+const ditherAreaVariants = cva("flex flex-col gap-2", {
+	variants: { size: {
+		sm: "[--dither-area-height:7.5rem]",
+		md: "[--dither-area-height:11.25rem]",
+		lg: "[--dither-area-height:16rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Space kept above the tallest value, as a fraction of the plot height. */
+const AREA_HEADROOM = .16;
+/** Distance from the top of the plot, 0..1, for a value against `max`. */
+function areaY(value, max) {
+	return 1 - .84 * (max > 0 ? Math.max(0, value) / max : 0);
+}
+/** Position across the plot, 0..1, of point `index` of `count`. */
+function pointX(index, count) {
+	return count <= 1 ? .5 : index / (count - 1);
+}
+function DitherArea({ data, label, description, max, size, formatValue = formatDitherValue, color = "primary", showAxis = true, showTable = false, animate = true, cell, index, defaultIndex, onIndexChange, categoryLabel = "Point", valueLabel = "Value", className, ...props }) {
+	const count = data.length;
+	const scrubber = useDitherScrubber({
+		count,
+		index,
+		defaultIndex,
+		onIndexChange
+	});
+	const values = data.map((datum) => Number.isFinite(datum.value) ? Math.max(0, datum.value) : 0);
+	const top = max ?? Math.max(1, ...values);
+	const shape = useRef(createSprings(values.map(() => 0)));
+	const cursor = scrubber.index;
+	const draw = (ctx, frame) => {
+		const { width, height, time, animated } = frame;
+		const step = frame.cell;
+		shape.current.set(values.map((value) => value / top));
+		const moving = shape.current.step(frame.delta, frame.reducedMotion);
+		const current = shape.current.values;
+		const points = current.map((fraction, i) => ({
+			x: pointX(i, current.length) * width,
+			y: areaY(fraction, 1) * height
+		}));
+		if (points.length === 1 && points[0]) points.unshift({
+			x: 0,
+			y: points[0].y
+		});
+		if (points.length === 2 && current.length === 1 && points[1]) points[1].x = width;
+		ditherFill(ctx, {
+			bounds: {
+				x: 0,
+				y: 0,
+				width,
+				height
+			},
+			cell: step,
+			color: frame.color("foreground"),
+			alpha: .05,
+			density: () => .78
+		});
+		const focus = cursor !== null ? {
+			x: pointX(cursor, current.length) * width,
+			y: areaY(valueAt(current, cursor), 1) * height
+		} : null;
+		const radius = height * .35;
+		ditherFill(ctx, {
+			clip: makePath((sink) => {
+				tracePolyline(sink, points, height);
+			}),
+			bounds: {
+				x: 0,
+				y: 0,
+				width,
+				height
+			},
+			cell: step,
+			color: frame.color(color),
+			alpha: .8,
+			density: (cx, cy) => {
+				const glow = focus ? 1 - smoothstep(0, radius, Math.hypot(cx - focus.x, cy - focus.y)) : 0;
+				return .62 + (animated ? Math.sin(cy * .1 - time * 3.6) * .07 : 0) + glow * .34 + (hash2(cx, cy) - .5) * .08;
+			}
+		});
+		return moving;
+	};
+	const format = (i) => {
+		const datum = data[i];
+		return datum ? `${datum.label}: ${formatValue(datum.value)}` : "";
+	};
+	const peak = values.reduce((best, value, i) => value > (values[best] ?? -Infinity) ? i : best, 0);
+	const summary = description ?? (count === 0 ? "No data." : `${String(count)} points from ${data[0]?.label ?? ""} to ${data[count - 1]?.label ?? ""}. Starts at ${formatValue(values[0] ?? 0)}, ends at ${formatValue(values[count - 1] ?? 0)}; peak ${formatValue(values[peak] ?? 0)} on ${data[peak]?.label ?? ""}.`);
+	const ticks = [
+		top,
+		top * .66,
+		top * .33,
+		0
+	];
+	const axisLabels = count > 0 ? [
+		0,
+		.25,
+		.5,
+		.75,
+		1
+	].map((t) => Math.round(t * (count - 1))).filter((i, n, all) => all.indexOf(i) === n) : [];
+	const shown = scrubber.valueIndex;
+	const datum = data[shown];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-area",
+		...props,
+		className: cn(ditherAreaVariants({ size }), className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-3",
+			style: { direction: "ltr" },
+			children: [showAxis && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				"data-slot": "dither-area-ticks",
+				className: "relative h-[var(--dither-area-height)] w-8 shrink-0",
+				children: ticks.map((tick, i) => /* @__PURE__ */ jsx("span", {
+					className: "absolute end-0 -translate-y-1/2 font-mono text-2xs text-muted-foreground tabular-nums",
+					style: { top: `${String(areaY(tick, top) * 100)}%` },
+					children: formatValue(Math.round(tick))
+				}, i))
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					"data-slot": "dither-area-plot",
+					className: "relative h-[var(--dither-area-height)]",
+					children: [/* @__PURE__ */ jsx("div", {
+						role: "img",
+						"aria-label": `${label}: ${summary}`,
+						className: "size-full",
+						children: /* @__PURE__ */ jsx(DitherCanvas, {
+							draw,
+							animate,
+							cell
+						})
+					}), count > 0 && /* @__PURE__ */ jsx(DitherCursor, {
+						scrubber,
+						label,
+						valueText: format(shown),
+						x: pointX(shown, count),
+						y: areaY(values[shown] ?? 0, top),
+						readout: datum && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							className: "block text-2xs text-muted-foreground uppercase",
+							children: datum.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-medium tabular-nums",
+							children: formatValue(datum.value)
+						})] })
+					})]
+				}), showAxis && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					"data-slot": "dither-area-labels",
+					className: "relative h-4 font-mono text-2xs text-muted-foreground",
+					children: axisLabels.map((i) => {
+						const x = pointX(i, count);
+						return /* @__PURE__ */ jsx("span", {
+							className: "absolute top-0 whitespace-nowrap",
+							style: {
+								left: `${String(x * 100)}%`,
+								transform: `translateX(${String(-x * 100)}%)`
+							},
+							children: data[i]?.label
+						}, i);
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(DitherTable, {
+			caption: label,
+			columns: [categoryLabel, valueLabel],
+			rows: data.map((entry) => [entry.label, formatValue(entry.value)]),
+			visible: showTable
+		})]
+	});
+}
+//#endregion
+export { AREA_HEADROOM, DitherArea, areaY, ditherAreaVariants, pointX };
+
+//# sourceMappingURL=dither-area.js.map

package/dist/components/dither-area/dither-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-area.js","names":[],"sources":["../../../src/components/dither-area/dither-area.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Dither Area Growth\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useRef, type ComponentPropsWithRef } from \"react\";\n\nimport {\n  createSprings,\n  DitherCanvas,\n  DitherCursor,\n  ditherFill,\n  DitherTable,\n  formatDitherValue,\n  hash2,\n  makePath,\n  smoothstep,\n  tracePolyline,\n  useDitherScrubber,\n  valueAt,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * An area chart filled with dithered cells over a faint cell grid, with a date\n * scrubber. The cursor follows the pointer as in amicro, cells swell around it,\n * and it is also an APG slider: Tab to the plot, then arrows step a point, Page\n * keys jump a tenth, Home/End go to the ends, Escape hides it. The readout is\n * real text and the slider announces the same thing through aria-valuetext.\n * Values are springs in the engine, so switching range morphs the curve — a\n * different point count is resampled rather than dropped to zero.\n */\n\nexport const ditherAreaVariants = cva(\"flex flex-col gap-2\", {\n  variants: {\n    size: {\n      sm: \"[--dither-area-height:7.5rem]\",\n      md: \"[--dither-area-height:11.25rem]\",\n      lg: \"[--dither-area-height:16rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherAreaDatum {\n  /** The point's name on the axis, e.g. a date. */\n  label: string;\n  value: number;\n}\n\nexport interface DitherAreaProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherAreaVariants> {\n  data: readonly DitherAreaDatum[];\n  /** What the chart shows. Names the image, the scrubber and the data table. */\n  label: string;\n  /** Replaces the generated summary in the image's accessible name. */\n  description?: string;\n  /** Axis maximum. Defaults to the largest value. */\n  max?: number;\n  formatValue?: (value: number) => string;\n  /** Colour token or CSS colour expression for the fill. Default \"primary\". */\n  color?: string;\n  /** Show value ticks and point labels. */\n  showAxis?: boolean;\n  /** Show the data table. It is always present for assistive technology. */\n  showTable?: boolean;\n  animate?: boolean;\n  cell?: number;\n  /** Cursor point (controlled); null hides it. */\n  index?: number | null;\n  defaultIndex?: number | null;\n  onIndexChange?: (index: number | null) => void;\n  /** Data table headers. */\n  categoryLabel?: string;\n  valueLabel?: string;\n}\n\n/** Space kept above the tallest value, as a fraction of the plot height. */\nexport const AREA_HEADROOM = 0.16;\n\n/** Distance from the top of the plot, 0..1, for a value against `max`. */\nexport function areaY(value: number, max: number): number {\n  return 1 - (1 - AREA_HEADROOM) * (max > 0 ? Math.max(0, value) / max : 0);\n}\n\n/** Position across the plot, 0..1, of point `index` of `count`. */\nexport function pointX(index: number, count: number): number {\n  return count <= 1 ? 0.5 : index / (count - 1);\n}\n\nexport function DitherArea({\n  data,\n  label,\n  description,\n  max,\n  size,\n  formatValue = formatDitherValue,\n  color = \"primary\",\n  showAxis = true,\n  showTable = false,\n  animate = true,\n  cell,\n  index,\n  defaultIndex,\n  onIndexChange,\n  categoryLabel = \"Point\",\n  valueLabel = \"Value\",\n  className,\n  ...props\n}: DitherAreaProps) {\n  const count = data.length;\n  const scrubber = useDitherScrubber({ count, index, defaultIndex, onIndexChange });\n  const values = data.map((datum) =>\n    Number.isFinite(datum.value) ? Math.max(0, datum.value) : 0,\n  );\n  const top = max ?? Math.max(1, ...values);\n  const shape = useRef(createSprings(values.map(() => 0)));\n  const cursor = scrubber.index;\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time, animated } = frame;\n    const step = frame.cell;\n    shape.current.set(values.map((value) => value / top));\n    const moving = shape.current.step(frame.delta, frame.reducedMotion);\n    const current = shape.current.values;\n    const points = current.map((fraction, i) => ({\n      x: pointX(i, current.length) * width,\n      y: areaY(fraction, 1) * height,\n    }));\n    if (points.length === 1 && points[0]) points.unshift({ x: 0, y: points[0].y });\n    if (points.length === 2 && current.length === 1 && points[1]) points[1].x = width;\n\n    // The faint cell grid the area sits on.\n    ditherFill(ctx, {\n      bounds: { x: 0, y: 0, width, height },\n      cell: step,\n      color: frame.color(\"foreground\"),\n      alpha: 0.05,\n      density: () => 0.78,\n    });\n\n    const focus =\n      cursor !== null\n        ? {\n            x: pointX(cursor, current.length) * width,\n            y: areaY(valueAt(current, cursor), 1) * height,\n          }\n        : null;\n    const radius = height * 0.35;\n    ditherFill(ctx, {\n      clip: makePath((sink) => {\n        tracePolyline(sink, points, height);\n      }),\n      bounds: { x: 0, y: 0, width, height },\n      cell: step,\n      color: frame.color(color),\n      alpha: 0.8,\n      density: (cx, cy) => {\n        const glow = focus\n          ? 1 - smoothstep(0, radius, Math.hypot(cx - focus.x, cy - focus.y))\n          : 0;\n        const wave = animated ? Math.sin(cy * 0.1 - time * 3.6) * 0.07 : 0;\n        return 0.62 + wave + glow * 0.34 + (hash2(cx, cy) - 0.5) * 0.08;\n      },\n    });\n    return moving;\n  };\n\n  const format = (i: number) => {\n    const datum = data[i];\n    return datum ? `${datum.label}: ${formatValue(datum.value)}` : \"\";\n  };\n  const peak = values.reduce(\n    (best, value, i) => (value > (values[best] ?? -Infinity) ? i : best),\n    0,\n  );\n  const summary =\n    description ??\n    (count === 0\n      ? \"No data.\"\n      : `${String(count)} points from ${data[0]?.label ?? \"\"} to ${data[count - 1]?.label ?? \"\"}. ` +\n        `Starts at ${formatValue(values[0] ?? 0)}, ends at ${formatValue(values[count - 1] ?? 0)}; ` +\n        `peak ${formatValue(values[peak] ?? 0)} on ${data[peak]?.label ?? \"\"}.`);\n  const ticks = [top, top * 0.66, top * 0.33, 0];\n  const axisLabels =\n    count > 0\n      ? [0, 0.25, 0.5, 0.75, 1]\n          .map((t) => Math.round(t * (count - 1)))\n          .filter((i, n, all) => all.indexOf(i) === n)\n      : [];\n  const shown = scrubber.valueIndex;\n  const datum = data[shown];\n\n  return (\n    <div\n      data-slot=\"dither-area\"\n      {...props}\n      className={cn(ditherAreaVariants({ size }), className)}\n    >\n      <div className=\"flex gap-3\" style={{ direction: \"ltr\" }}>\n        {showAxis && (\n          <div\n            aria-hidden\n            data-slot=\"dither-area-ticks\"\n            className=\"relative h-[var(--dither-area-height)] w-8 shrink-0\"\n          >\n            {ticks.map((tick, i) => (\n              <span\n                key={i}\n                className=\"absolute end-0 -translate-y-1/2 font-mono text-2xs text-muted-foreground tabular-nums\"\n                style={{ top: `${String(areaY(tick, top) * 100)}%` }}\n              >\n                {formatValue(Math.round(tick))}\n              </span>\n            ))}\n          </div>\n        )}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n          <div data-slot=\"dither-area-plot\" className=\"relative h-[var(--dither-area-height)]\">\n            <div role=\"img\" aria-label={`${label}: ${summary}`} className=\"size-full\">\n              <DitherCanvas draw={draw} animate={animate} cell={cell} />\n            </div>\n            {count > 0 && (\n              <DitherCursor\n                scrubber={scrubber}\n                label={label}\n                valueText={format(shown)}\n                x={pointX(shown, count)}\n                y={areaY(values[shown] ?? 0, top)}\n                readout={\n                  datum && (\n                    <>\n                      <span className=\"block text-2xs text-muted-foreground uppercase\">\n                        {datum.label}\n                      </span>\n                      <span className=\"font-medium tabular-nums\">\n                        {formatValue(datum.value)}\n                      </span>\n                    </>\n                  )\n                }\n              />\n            )}\n          </div>\n          {showAxis && (\n            <div\n              aria-hidden\n              data-slot=\"dither-area-labels\"\n              className=\"relative h-4 font-mono text-2xs text-muted-foreground\"\n            >\n              {axisLabels.map((i) => {\n                const x = pointX(i, count);\n                return (\n                  <span\n                    key={i}\n                    className=\"absolute top-0 whitespace-nowrap\"\n                    style={{\n                      left: `${String(x * 100)}%`,\n                      transform: `translateX(${String(-x * 100)}%)`,\n                    }}\n                  >\n                    {data[i]?.label}\n                  </span>\n                );\n              })}\n            </div>\n          )}\n        </div>\n      </div>\n      <DitherTable\n        caption={label}\n        columns={[categoryLabel, valueLabel]}\n        rows={data.map((entry) => [entry.label, formatValue(entry.value)])}\n        visible={showTable}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { AREA_HEADROOM, DitherArea, DitherAreaDatum, DitherAreaProps, areaY, ditherAreaVariants, pointX } from "./dither-area.js";
+export { AREA_HEADROOM, DitherArea, type DitherAreaDatum, type DitherAreaProps, areaY, ditherAreaVariants, pointX };

package/dist/components/dither-area/index.js

@@ -0,0 +1,2 @@
+import { AREA_HEADROOM, DitherArea, areaY, ditherAreaVariants, pointX } from "./dither-area.js";
+export { AREA_HEADROOM, DitherArea, areaY, ditherAreaVariants, pointX };

package/dist/components/dither-area/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-area/meta.ts
+const meta = defineMeta({
+	name: "dither-area",
+	title: "Dither Area",
+	description: "An area chart filled with dithered cells over a cell grid, with a date scrubber that swells the cells around it.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["dither-area.tsx"],
+	a11y: "The plot is role=\"img\" with an aria-label giving the range, start, end and peak. The scrubber over it is a slider: arrow keys step a point, Page keys jump a tenth, Home/End go to the ends, Escape hides the cursor, and aria-valuetext announces the date and value shown in the readout. Axis ticks are aria-hidden; the data is always in a table, visually hidden unless showTable is set."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dither-area/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-area/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-area\",\n  title: \"Dither Area\",\n  description:\n    \"An area chart filled with dithered cells over a cell grid, with a date scrubber that swells the cells around it.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"dither-area.tsx\"],\n  a11y:\n    'The plot is role=\"img\" with an aria-label giving the range, start, end and peak. The scrubber ' +\n    \"over it is a slider: arrow keys step a point, Page keys jump a tenth, Home/End go to the ends, \" +\n    \"Escape hides the cursor, and aria-valuetext announces the date and value shown in the readout. \" +\n    \"Axis ticks are aria-hidden; the data is always in a table, visually hidden unless showTable is set.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,eAAe;CACtC,OAAO,CAAC,iBAAiB;CACzB,MACE;AAIJ,CAAC"}