@dowel-ui/react 0.3.0 → 0.4.0

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

@@ -0,0 +1,42 @@
+import { DiffHunk } from "./diff-model.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/diff-viewer/diff-viewer.d.ts
+/**
+ * A diff, and a decision about it.
+ *
+ * The rendering half exists because every packaged viewer brings its own
+ * styling system — emotion, or HTML strings plus a stylesheet — which design
+ * tokens cannot reach and which is awkward under RSC. The deciding half exists
+ * because Dowel is for AI products, and an agent proposing a change to a file is
+ * the case that needs it: what every coding agent ships, and no component
+ * library does.
+ *
+ * Decisions are controlled. The component never mutates the diff or applies
+ * anything; it reports which hunks were accepted and rejected and leaves the
+ * consequences to the application, the same way ai-action-ledger does.
+ *
+ * Not a grid. A code listing is a table of text, and role="grid" would promise
+ * cell-by-cell arrow navigation that neither exists here nor makes sense for
+ * reading code. Line kind is carried in text, because a plus sign and a green
+ * background are not information.
+ */
+type HunkDecision = "accepted" | "rejected";
+interface DiffViewerProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  hunks: DiffHunk[];
+  /** Names the diff — usually the path of the file being changed. */
+  label: string;
+  view?: "unified" | "split";
+  /** Per-hunk decisions, keyed by hunk id. Controlled. */
+  decisions?: Record<string, HunkDecision>;
+  onDecision?: (hunkId: string, decision: HunkDecision) => void;
+  children?: ReactNode;
+}
+declare function DiffViewer({ className, hunks, label, view, decisions, onDecision, children, ...props }: DiffViewerProps): import("react").JSX.Element;
+/** Switches between unified and side-by-side. */
+declare function DiffViewerToolbar({ className, view, onViewChange, ...props }: Omit<ComponentPropsWithRef<"div">, "onChange"> & {
+  view: "unified" | "split";
+  onViewChange: (view: "unified" | "split") => void;
+}): import("react").JSX.Element;
+//#endregion
+export { DiffViewer, DiffViewerProps, DiffViewerToolbar, HunkDecision };
+//# sourceMappingURL=diff-viewer.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,212 @@
+"use client";
+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";
+//#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 counts = useMemo(() => countChanges(hunks), [hunks]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "diff-viewer",
+		"data-view": view,
+		className: cn("flex flex-col gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-baseline justify-between gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-mono text-sm font-medium",
+					children: label
+				}), /* @__PURE__ */ jsxs("span", {
+					"data-slot": "diff-viewer-summary",
+					className: "text-xs text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-success",
+							children: ["+", counts.added]
+						}),
+						" ",
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-destructive",
+							children: ["−", counts.removed]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: ` — ${String(counts.added)} lines added, ${String(counts.removed)} removed`
+						})
+					]
+				})]
+			}),
+			children,
+			hunks.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "rounded-lg border border-border bg-muted/30 p-3 text-sm text-muted-foreground",
+				children: "No changes."
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "overflow-hidden rounded-lg border border-border",
+				children: hunks.map((hunk) => /* @__PURE__ */ jsx(DiffHunkView, {
+					hunk,
+					label,
+					view,
+					decision: decisions?.[hunk.id],
+					onDecision
+				}, hunk.id))
+			})
+		]
+	});
+}
+function DiffHunkView({ hunk, label, view, decision, onDecision }) {
+	const splitRows = useMemo(() => view === "split" ? toSplitRows(hunk.rows) : [], [view, hunk.rows]);
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "diff-hunk",
+		"data-decision": decision,
+		"aria-label": `${label}, hunk ${hunk.id}`,
+		className: cn("border-b border-border last:border-b-0", decision === "rejected" && "opacity-55"),
+		children: [
+			hunk.skippedBefore > 0 ? /* @__PURE__ */ jsxs("p", {
+				"data-slot": "diff-hunk-skipped",
+				className: "border-b border-border bg-muted/40 px-3 py-1 font-mono text-2xs text-muted-foreground",
+				children: [
+					hunk.skippedBefore,
+					" unchanged ",
+					hunk.skippedBefore === 1 ? "line" : "lines",
+					" hidden"
+				]
+			}) : null,
+			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", {
+						className: "flex-1 text-xs text-muted-foreground",
+						children: decision === "accepted" ? "Accepted" : decision === "rejected" ? "Rejected" : "Not decided"
+					}),
+					/* @__PURE__ */ jsx(HunkButton, {
+						pressed: decision === "accepted",
+						onClick: () => {
+							onDecision(hunk.id, "accepted");
+						},
+						children: "Accept"
+					}),
+					/* @__PURE__ */ jsx(HunkButton, {
+						pressed: decision === "rejected",
+						onClick: () => {
+							onDecision(hunk.id, "rejected");
+						},
+						children: "Reject"
+					})
+				]
+			}) : 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)) })
+				})
+			})
+		]
+	});
+}
+const ROW_STYLES = {
+	added: "bg-success/10",
+	removed: "bg-destructive/10",
+	context: ""
+};
+function UnifiedRow({ row }) {
+	return /* @__PURE__ */ jsxs("tr", {
+		"data-slot": "diff-row",
+		"data-kind": row.kind,
+		className: ROW_STYLES[row.kind],
+		children: [
+			/* @__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",
+				"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",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "sr-only",
+					children: [KIND_LABEL[row.kind], ": "]
+				}), /* @__PURE__ */ jsx(RowContent, { row })]
+			})
+		]
+	});
+}
+function SplitCell({ row, side }) {
+	if (!row) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("td", {
+		"aria-hidden": "true",
+		className: "w-10 bg-muted/40"
+	}), /* @__PURE__ */ jsx("td", {
+		"aria-hidden": "true",
+		className: "w-1/2 bg-muted/20"
+	})] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LineNumber, { value: side === "before" ? row.before : row.after }), /* @__PURE__ */ jsxs("td", {
+		className: cn("w-1/2 py-0.5 pr-3 break-all whitespace-pre-wrap", ROW_STYLES[row.kind]),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [KIND_LABEL[row.kind], ": "]
+		}), /* @__PURE__ */ jsx(RowContent, { row })]
+	})] });
+}
+function RowContent({ row }) {
+	if (!row.segments) return /* @__PURE__ */ jsx(Fragment, { children: row.content });
+	return /* @__PURE__ */ jsx(Fragment, { children: row.segments.map((segment, index) => segment.changed ? /* @__PURE__ */ jsx("mark", {
+		className: cn("rounded-[2px] text-inherit", row.kind === "added" ? "bg-success/30" : "bg-destructive/30"),
+		children: segment.text
+	}, index) : /* @__PURE__ */ jsx("span", { children: segment.text }, index)) });
+}
+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",
+		children: value ?? ""
+	});
+}
+function HunkButton({ className, pressed, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-pressed": pressed,
+		className: cn("rounded-md border px-2 py-0.5 text-xs font-medium transition-colors", pressed ? "border-primary bg-primary text-primary-foreground" : "border-input bg-background hover:bg-accent hover:text-accent-foreground", focusRing, disabledStyles, className),
+		...props
+	});
+}
+/** Switches between unified and side-by-side. */
+function DiffViewerToolbar({ className, view, onViewChange, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "diff-viewer-toolbar",
+		role: "group",
+		"aria-label": "Diff layout",
+		className: cn("flex items-center gap-1", className),
+		...props,
+		children: ["unified", "split"].map((option) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-pressed": view === option,
+			onClick: () => {
+				onViewChange(option);
+			},
+			className: cn("rounded-md border px-2 py-0.5 text-xs font-medium capitalize transition-colors", view === option ? "border-transparent bg-secondary text-secondary-foreground" : "border-input bg-background text-muted-foreground hover:text-foreground", focusRing),
+			children: option
+		}, option))
+	});
+}
+//#endregion
+export { DiffViewer, DiffViewerToolbar };
+
+//# sourceMappingURL=diff-viewer.js.map

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

@@ -0,0 +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":";;;;;;;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"}

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

@@ -0,0 +1,3 @@
+import { BuildDiffOptions, DiffHunk, DiffRow, RowKind, WordSegment, buildDiff, countChanges, groupIntoHunks, toSplitRows } from "./diff-model.js";
+import { DiffViewer, DiffViewerProps, DiffViewerToolbar, HunkDecision } from "./diff-viewer.js";
+export { type BuildDiffOptions, type DiffHunk, type DiffRow, DiffViewer, type DiffViewerProps, DiffViewerToolbar, type HunkDecision, type RowKind, type WordSegment, buildDiff, countChanges, groupIntoHunks, toSplitRows };

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

@@ -0,0 +1,3 @@
+import { buildDiff, countChanges, groupIntoHunks, toSplitRows } from "./diff-model.js";
+import { DiffViewer, DiffViewerToolbar } from "./diff-viewer.js";
+export { DiffViewer, DiffViewerToolbar, buildDiff, countChanges, groupIntoHunks, toSplitRows };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/diff-viewer/meta.ts
+const meta = defineMeta({
+	name: "diff-viewer",
+	title: "Diff Viewer",
+	description: "A diff you can style, and accept or reject hunk by hunk.",
+	category: "data",
+	status: "stable",
+	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."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +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"}

package/dist/components/log-viewer/index.d.ts

@@ -0,0 +1,3 @@
+import { FilterState, LOG_LEVELS, LogLevel, LogLine, MatchRange, UseLogStreamOptions, VisibleLine, compileQuery, findMatches, segment, useLogStream } from "./log-stream.js";
+import { LogViewer, LogViewerProps, LogViewerRow, LogViewerRowProps, LogViewerToolbar, LogViewerToolbarProps } from "./log-viewer.js";
+export { type FilterState, LOG_LEVELS, type LogLevel, type LogLine, LogViewer, type LogViewerProps, LogViewerRow, type LogViewerRowProps, LogViewerToolbar, type LogViewerToolbarProps, type MatchRange, type UseLogStreamOptions, type VisibleLine, compileQuery, findMatches, segment, useLogStream };

package/dist/components/log-viewer/index.js

@@ -0,0 +1,3 @@
+import { LOG_LEVELS, compileQuery, findMatches, segment, useLogStream } from "./log-stream.js";
+import { LogViewer, LogViewerRow, LogViewerToolbar } from "./log-viewer.js";
+export { LOG_LEVELS, LogViewer, LogViewerRow, LogViewerToolbar, compileQuery, findMatches, segment, useLogStream };

package/dist/components/log-viewer/log-stream.d.ts

@@ -0,0 +1,68 @@
+//#region src/components/log-viewer/log-stream.d.ts
+/**
+ * Filtering and match-finding for a log stream.
+ *
+ * Separate from the view because it is pure and worth testing without a DOM,
+ * and because the awkward parts are here rather than in the rendering: a bad
+ * regex must not throw while someone is halfway through typing it, and a match
+ * has to be located precisely enough to highlight rather than merely detected.
+ */
+type LogLevel = "trace" | "debug" | "info" | "warn" | "error" | "fatal";
+declare const LOG_LEVELS: readonly LogLevel[];
+interface LogLine {
+  id: string;
+  message: string;
+  level?: LogLevel;
+  /** ISO timestamp, or anything the consumer wants shown in the gutter. */
+  timestamp?: string;
+  /** Structured fields, revealed when the row is expanded. */
+  fields?: Record<string, unknown>;
+}
+/** A [start, end) slice of a message that matched the filter. */
+type MatchRange = readonly [number, number];
+interface FilterState {
+  /** Substring, or a pattern when `regex` is on. */
+  query: string;
+  regex: boolean;
+  /** Levels to show. Empty means all of them. */
+  levels: Set<LogLevel>;
+}
+/**
+ * Compiles the query.
+ *
+ * Returns null for an invalid pattern rather than throwing: the query is being
+ * typed, so it spends most of its life syntactically incomplete, and a viewer
+ * that crashes on "(" is unusable.
+ */
+declare function compileQuery(query: string, regex: boolean): RegExp | null;
+/** Every match in a line, so each can be highlighted rather than just the first. */
+declare function findMatches(message: string, pattern: RegExp | null): MatchRange[];
+/** Splits a message into alternating plain and matched segments. */
+declare function segment(message: string, ranges: MatchRange[]): {
+  text: string;
+  match: boolean;
+}[];
+interface VisibleLine extends LogLine {
+  matches: MatchRange[];
+}
+interface UseLogStreamOptions {
+  lines: LogLine[];
+  /** Levels present but unchecked are hidden. Empty shows everything. */
+  initialLevels?: Set<LogLevel>;
+}
+declare function useLogStream({ lines, initialLevels }: UseLogStreamOptions): {
+  query: string;
+  setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
+  regex: boolean;
+  setRegex: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+  levels: Set<LogLevel>;
+  toggleLevel: (level: LogLevel) => void;
+  setLevels: import("react").Dispatch<import("react").SetStateAction<Set<LogLevel>>>;
+  visible: VisibleLine[];
+  counts: Map<LogLevel, number>;
+  invalidPattern: boolean;
+  total: number;
+};
+//#endregion
+export { FilterState, LOG_LEVELS, LogLevel, LogLine, MatchRange, UseLogStreamOptions, VisibleLine, compileQuery, findMatches, segment, useLogStream };
+//# sourceMappingURL=log-stream.d.ts.map

package/dist/components/log-viewer/log-stream.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-stream.d.ts","names":[],"sources":["../../../src/components/log-viewer/log-stream.ts"],"mappings":";;;;;;;;;KAaY;cAEC,qBAAqB;UASjB;EACf;EACA;EACA,QAAQ;;EAER;;EAEA,SAAS;;;KAIC;UAEK;;EAEf;EACA;;EAEA,QAAQ,IAAI;;;;;;;;;iBAUE,aAAa,eAAe,iBAAiB;;iBAY7C,YAAY,iBAAiB,SAAS,gBAAgB;;iBAuBtD,QACd,iBACA,QAAQ;EACL;EAAc;;UAgBF,oBAAoB;EACnC,SAAS;;UAGM;EACf,OAAO;;EAEP,gBAAgB,IAAI;;iBAGN,eAAe,OAAO,iBAAiB;;;;;;EAqCb,cAAA,OAAA"}

package/dist/components/log-viewer/log-stream.js

@@ -0,0 +1,120 @@
+"use client";
+import { useCallback, useMemo, useState } from "react";
+//#region src/components/log-viewer/log-stream.ts
+const LOG_LEVELS = [
+	"trace",
+	"debug",
+	"info",
+	"warn",
+	"error",
+	"fatal"
+];
+/**
+* Compiles the query.
+*
+* Returns null for an invalid pattern rather than throwing: the query is being
+* typed, so it spends most of its life syntactically incomplete, and a viewer
+* that crashes on "(" is unusable.
+*/
+function compileQuery(query, regex) {
+	if (query.length === 0) return null;
+	try {
+		return regex ? new RegExp(query, "gi") : new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
+	} catch {
+		return null;
+	}
+}
+/** Every match in a line, so each can be highlighted rather than just the first. */
+function findMatches(message, pattern) {
+	if (!pattern) return [];
+	const ranges = [];
+	pattern.lastIndex = 0;
+	let match = pattern.exec(message);
+	while (match !== null) {
+		if (match[0].length === 0) pattern.lastIndex += 1;
+		else ranges.push([match.index, match.index + match[0].length]);
+		match = pattern.exec(message);
+	}
+	return ranges;
+}
+/** Splits a message into alternating plain and matched segments. */
+function segment(message, ranges) {
+	if (ranges.length === 0) return [{
+		text: message,
+		match: false
+	}];
+	const parts = [];
+	let cursor = 0;
+	for (const [start, end] of ranges) {
+		if (start > cursor) parts.push({
+			text: message.slice(cursor, start),
+			match: false
+		});
+		parts.push({
+			text: message.slice(start, end),
+			match: true
+		});
+		cursor = end;
+	}
+	if (cursor < message.length) parts.push({
+		text: message.slice(cursor),
+		match: false
+	});
+	return parts;
+}
+function useLogStream({ lines, initialLevels }) {
+	const [query, setQuery] = useState("");
+	const [regex, setRegex] = useState(false);
+	const [levels, setLevels] = useState(initialLevels ?? /* @__PURE__ */ new Set());
+	const pattern = useMemo(() => compileQuery(query, regex), [query, regex]);
+	const invalidPattern = regex && query.length > 0 && pattern === null;
+	const visible = useMemo(() => {
+		const result = [];
+		for (const line of lines) {
+			if (levels.size > 0 && line.level && !levels.has(line.level)) continue;
+			const matches = findMatches(line.message, pattern);
+			if (pattern && matches.length === 0) continue;
+			result.push({
+				...line,
+				matches
+			});
+		}
+		return result;
+	}, [
+		lines,
+		levels,
+		pattern
+	]);
+	const counts = useMemo(() => {
+		const byLevel = /* @__PURE__ */ new Map();
+		for (const line of lines) {
+			if (!line.level) continue;
+			byLevel.set(line.level, (byLevel.get(line.level) ?? 0) + 1);
+		}
+		return byLevel;
+	}, [lines]);
+	return {
+		query,
+		setQuery,
+		regex,
+		setRegex,
+		levels,
+		toggleLevel: useCallback((level) => {
+			setLevels((current) => {
+				const next = new Set(current);
+				if (next.has(level)) next.delete(level);
+				else next.add(level);
+				return next;
+			});
+		}, []),
+		setLevels,
+		visible,
+		counts,
+		invalidPattern,
+		total: lines.length
+	};
+}
+//#endregion
+export { LOG_LEVELS, compileQuery, findMatches, segment, useLogStream };
+
+//# sourceMappingURL=log-stream.js.map

package/dist/components/log-viewer/log-stream.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-stream.js","names":[],"sources":["../../../src/components/log-viewer/log-stream.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useState } from \"react\";\n\n/**\n * Filtering and match-finding for a log stream.\n *\n * Separate from the view because it is pure and worth testing without a DOM,\n * and because the awkward parts are here rather than in the rendering: a bad\n * regex must not throw while someone is halfway through typing it, and a match\n * has to be located precisely enough to highlight rather than merely detected.\n */\n\nexport type LogLevel = \"trace\" | \"debug\" | \"info\" | \"warn\" | \"error\" | \"fatal\";\n\nexport const LOG_LEVELS: readonly LogLevel[] = [\n  \"trace\",\n  \"debug\",\n  \"info\",\n  \"warn\",\n  \"error\",\n  \"fatal\",\n];\n\nexport interface LogLine {\n  id: string;\n  message: string;\n  level?: LogLevel;\n  /** ISO timestamp, or anything the consumer wants shown in the gutter. */\n  timestamp?: string;\n  /** Structured fields, revealed when the row is expanded. */\n  fields?: Record<string, unknown>;\n}\n\n/** A [start, end) slice of a message that matched the filter. */\nexport type MatchRange = readonly [number, number];\n\nexport interface FilterState {\n  /** Substring, or a pattern when `regex` is on. */\n  query: string;\n  regex: boolean;\n  /** Levels to show. Empty means all of them. */\n  levels: Set<LogLevel>;\n}\n\n/**\n * Compiles the query.\n *\n * Returns null for an invalid pattern rather than throwing: the query is being\n * typed, so it spends most of its life syntactically incomplete, and a viewer\n * that crashes on \"(\" is unusable.\n */\nexport function compileQuery(query: string, regex: boolean): RegExp | null {\n  if (query.length === 0) return null;\n  try {\n    return regex\n      ? new RegExp(query, \"gi\")\n      : new RegExp(query.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gi\");\n  } catch {\n    return null;\n  }\n}\n\n/** Every match in a line, so each can be highlighted rather than just the first. */\nexport function findMatches(message: string, pattern: RegExp | null): MatchRange[] {\n  if (!pattern) return [];\n\n  const ranges: MatchRange[] = [];\n  // Fresh lastIndex: the pattern is reused across lines and a global regex\n  // carries position between calls, which would skip matches in later lines.\n  pattern.lastIndex = 0;\n\n  let match = pattern.exec(message);\n  while (match !== null) {\n    // A pattern that can match empty — \"a*\" — would loop forever otherwise.\n    if (match[0].length === 0) {\n      pattern.lastIndex += 1;\n    } else {\n      ranges.push([match.index, match.index + match[0].length]);\n    }\n    match = pattern.exec(message);\n  }\n\n  return ranges;\n}\n\n/** Splits a message into alternating plain and matched segments. */\nexport function segment(\n  message: string,\n  ranges: MatchRange[],\n): { text: string; match: boolean }[] {\n  if (ranges.length === 0) return [{ text: message, match: false }];\n\n  const parts: { text: string; match: boolean }[] = [];\n  let cursor = 0;\n\n  for (const [start, end] of ranges) {\n    if (start > cursor) parts.push({ text: message.slice(cursor, start), match: false });\n    parts.push({ text: message.slice(start, end), match: true });\n    cursor = end;\n  }\n  if (cursor < message.length) parts.push({ text: message.slice(cursor), match: false });\n\n  return parts;\n}\n\nexport interface VisibleLine extends LogLine {\n  matches: MatchRange[];\n}\n\nexport interface UseLogStreamOptions {\n  lines: LogLine[];\n  /** Levels present but unchecked are hidden. Empty shows everything. */\n  initialLevels?: Set<LogLevel>;\n}\n\nexport function useLogStream({ lines, initialLevels }: UseLogStreamOptions) {\n  const [query, setQuery] = useState(\"\");\n  const [regex, setRegex] = useState(false);\n  const [levels, setLevels] = useState<Set<LogLevel>>(initialLevels ?? new Set());\n\n  const pattern = useMemo(() => compileQuery(query, regex), [query, regex]);\n\n  // An invalid pattern is reported, not swallowed: with no feedback the reader\n  // sees an empty log and concludes nothing matched.\n  const invalidPattern = regex && query.length > 0 && pattern === null;\n\n  const visible = useMemo<VisibleLine[]>(() => {\n    const result: VisibleLine[] = [];\n\n    for (const line of lines) {\n      if (levels.size > 0 && line.level && !levels.has(line.level)) continue;\n\n      const matches = findMatches(line.message, pattern);\n      // A query with no match hides the line; an invalid pattern hides nothing,\n      // because the reader has not finished saying what they want yet.\n      if (pattern && matches.length === 0) continue;\n\n      result.push({ ...line, matches });\n    }\n\n    return result;\n  }, [lines, levels, pattern]);\n\n  const counts = useMemo(() => {\n    const byLevel = new Map<LogLevel, number>();\n    for (const line of lines) {\n      if (!line.level) continue;\n      byLevel.set(line.level, (byLevel.get(line.level) ?? 0) + 1);\n    }\n    return byLevel;\n  }, [lines]);\n\n  const toggleLevel = useCallback((level: LogLevel) => {\n    setLevels((current) => {\n      const next = new Set(current);\n      if (next.has(level)) next.delete(level);\n      else next.add(level);\n      return next;\n    });\n  }, []);\n\n  return {\n    query,\n    setQuery,\n    regex,\n    setRegex,\n    levels,\n    toggleLevel,\n    setLevels,\n    visible,\n    counts,\n    invalidPattern,\n    total: lines.length,\n  };\n}\n"],"mappings":";;;AAeA,MAAa,aAAkC;CAC7C;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;AA8BA,SAAgB,aAAa,OAAe,OAA+B;CACzE,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,IAAI;EACF,OAAO,QACH,IAAI,OAAO,OAAO,IAAI,IACtB,IAAI,OAAO,MAAM,QAAQ,uBAAuB,MAAM,GAAG,IAAI;CACnE,QAAQ;EACN,OAAO;CACT;AACF;;AAGA,SAAgB,YAAY,SAAiB,SAAsC;CACjF,IAAI,CAAC,SAAS,OAAO,CAAC;CAEtB,MAAM,SAAuB,CAAC;CAG9B,QAAQ,YAAY;CAEpB,IAAI,QAAQ,QAAQ,KAAK,OAAO;CAChC,OAAO,UAAU,MAAM;EAErB,IAAI,MAAM,EAAE,CAAC,WAAW,GACtB,QAAQ,aAAa;OAErB,OAAO,KAAK,CAAC,MAAM,OAAO,MAAM,QAAQ,MAAM,EAAE,CAAC,MAAM,CAAC;EAE1D,QAAQ,QAAQ,KAAK,OAAO;CAC9B;CAEA,OAAO;AACT;;AAGA,SAAgB,QACd,SACA,QACoC;CACpC,IAAI,OAAO,WAAW,GAAG,OAAO,CAAC;EAAE,MAAM;EAAS,OAAO;CAAM,CAAC;CAEhE,MAAM,QAA4C,CAAC;CACnD,IAAI,SAAS;CAEb,KAAK,MAAM,CAAC,OAAO,QAAQ,QAAQ;EACjC,IAAI,QAAQ,QAAQ,MAAM,KAAK;GAAE,MAAM,QAAQ,MAAM,QAAQ,KAAK;GAAG,OAAO;EAAM,CAAC;EACnF,MAAM,KAAK;GAAE,MAAM,QAAQ,MAAM,OAAO,GAAG;GAAG,OAAO;EAAK,CAAC;EAC3D,SAAS;CACX;CACA,IAAI,SAAS,QAAQ,QAAQ,MAAM,KAAK;EAAE,MAAM,QAAQ,MAAM,MAAM;EAAG,OAAO;CAAM,CAAC;CAErF,OAAO;AACT;AAYA,SAAgB,aAAa,EAAE,OAAO,iBAAsC;CAC1E,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,CAAC,QAAQ,aAAa,SAAwB,iCAAiB,IAAI,IAAI,CAAC;CAE9E,MAAM,UAAU,cAAc,aAAa,OAAO,KAAK,GAAG,CAAC,OAAO,KAAK,CAAC;CAIxE,MAAM,iBAAiB,SAAS,MAAM,SAAS,KAAK,YAAY;CAEhE,MAAM,UAAU,cAA6B;EAC3C,MAAM,SAAwB,CAAC;EAE/B,KAAK,MAAM,QAAQ,OAAO;GACxB,IAAI,OAAO,OAAO,KAAK,KAAK,SAAS,CAAC,OAAO,IAAI,KAAK,KAAK,GAAG;GAE9D,MAAM,UAAU,YAAY,KAAK,SAAS,OAAO;GAGjD,IAAI,WAAW,QAAQ,WAAW,GAAG;GAErC,OAAO,KAAK;IAAE,GAAG;IAAM;GAAQ,CAAC;EAClC;EAEA,OAAO;CACT,GAAG;EAAC;EAAO;EAAQ;CAAO,CAAC;CAE3B,MAAM,SAAS,cAAc;EAC3B,MAAM,0BAAU,IAAI,IAAsB;EAC1C,KAAK,MAAM,QAAQ,OAAO;GACxB,IAAI,CAAC,KAAK,OAAO;GACjB,QAAQ,IAAI,KAAK,QAAQ,QAAQ,IAAI,KAAK,KAAK,KAAK,KAAK,CAAC;EAC5D;EACA,OAAO;CACT,GAAG,CAAC,KAAK,CAAC;CAWV,OAAO;EACL;EACA;EACA;EACA;EACA;EACA,aAfkB,aAAa,UAAoB;GACnD,WAAW,YAAY;IACrB,MAAM,OAAO,IAAI,IAAI,OAAO;IAC5B,IAAI,KAAK,IAAI,KAAK,GAAG,KAAK,OAAO,KAAK;SACjC,KAAK,IAAI,KAAK;IACnB,OAAO;GACT,CAAC;EACH,GAAG,CAAC,CAQQ;EACV;EACA;EACA;EACA;EACA,OAAO,MAAM;CACf;AACF"}

package/dist/components/log-viewer/log-viewer.d.ts

@@ -0,0 +1,51 @@
+import { LogLevel, VisibleLine } from "./log-stream.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/log-viewer/log-viewer.d.ts
+interface LogViewerProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  lines: VisibleLine[];
+  /** Names the region. */
+  label: string;
+  /** Row height in pixels. Rows are one line; expansion is measured. */
+  rowHeight?: number;
+  height?: number | string;
+  /**
+   * Read new lines aloud. Off by default — a console that announces every line
+   * makes a screen reader useless for anything else.
+   */
+  announce?: boolean;
+  /** The way out of the virtual window, for anyone who needs the whole log. */
+  onDownload?: () => void;
+  children?: ReactNode;
+}
+declare function LogViewer({ className, lines, label, rowHeight, height, announce, onDownload, children, ...props }: LogViewerProps): import("react").JSX.Element;
+interface LogViewerRowProps {
+  line: VisibleLine;
+  expanded?: boolean;
+  onToggle?: () => void;
+}
+/**
+ * One line.
+ *
+ * Exported because the virtualized container cannot be measured outside a real
+ * browser — jsdom reports every box as zero — so the row's behaviour would
+ * otherwise be untestable. It is also genuinely useful on its own for anyone
+ * rendering a short log without virtualization.
+ */
+declare function LogViewerRow({ line, expanded, onToggle }: LogViewerRowProps): import("react").JSX.Element;
+interface LogViewerToolbarProps extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
+  query: string;
+  onQueryChange: (query: string) => void;
+  regex: boolean;
+  onRegexChange: (regex: boolean) => void;
+  levels: Set<LogLevel>;
+  onToggleLevel: (level: LogLevel) => void;
+  counts: Map<LogLevel, number>;
+  invalidPattern?: boolean;
+  /** Shown as "N of M lines". */
+  showing: number;
+  total: number;
+}
+declare function LogViewerToolbar({ className, query, onQueryChange, regex, onRegexChange, levels, onToggleLevel, counts, invalidPattern, showing, total, ...props }: LogViewerToolbarProps): import("react").JSX.Element;
+//#endregion
+export { LogViewer, LogViewerProps, LogViewerRow, LogViewerRowProps, LogViewerToolbar, LogViewerToolbarProps };
+//# sourceMappingURL=log-viewer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"log-viewer.d.ts","names":[],"sources":["../../../src/components/log-viewer/log-viewer.tsx"],"mappings":";;;UAmDiB,uBAAuB,KAAK;EAC3C,OAAO;;EAEP;;EAEA;EACA;;;;;EAKA;;EAEA;EACA,WAAW;;iBAGG,YACd,WACA,OACA,OACA,WACA,QACA,UACA,YACA,aACG,SACF,iCAAc,IAAA;UAmJA;EACf,MAAM;EACN;EACA;;;;;;;;;;iBAWc,eAAe,MAAM,UAAkB,YAAY,oCAAiB,IAAA;UA2EnE,8BAA8B,KAAK;EAClD;EACA,gBAAgB;EAChB;EACA,gBAAgB;EAChB,QAAQ,IAAI;EACZ,gBAAgB,OAAO;EACvB,QAAQ,IAAI;EACZ;;EAEA;EACA;;iBAGc,mBACd,WACA,OACA,eACA,OACA,eACA,QACA,eACA,QACA,gBACA,SACA,UACG,SACF,wCAAqB,IAAA"}