@dowel-ui/react 0.4.0 → 0.7.0

package/dist/components/ai-extraction-review/ai-extraction-review.js

@@ -0,0 +1,249 @@
+"use client";
+import { disabledStyles, focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { evidenceOf, isSourced, segmentSource, summarizeReview } from "./extraction-model.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+//#region src/components/ai-extraction-review/ai-extraction-review.tsx
+function ExtractionReview({ className, source, sourceLabel = "Source", heading, fields, decisions = {}, onDecision, streaming = false, lowConfidenceBelow = .7, children, ...props }) {
+	const headingId = useId();
+	const [activeField, setActiveField] = useState(null);
+	const runs = useMemo(() => segmentSource(source, fields), [source, fields]);
+	const summary = useMemo(() => summarizeReview(source, fields, decisions), [
+		source,
+		fields,
+		decisions
+	]);
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "extraction-review",
+		"data-complete": summary.complete || void 0,
+		"aria-labelledby": headingId,
+		"aria-busy": streaming || void 0,
+		className: cn("flex flex-col gap-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-baseline justify-between gap-2",
+				children: [/* @__PURE__ */ jsx("h3", {
+					id: headingId,
+					className: "text-sm font-medium",
+					children: heading
+				}), /* @__PURE__ */ jsxs("p", {
+					"data-slot": "extraction-review-summary",
+					"aria-live": "polite",
+					className: "text-xs text-muted-foreground",
+					children: [streaming ? "Fields are still arriving" : `${String(summary.reviewed)} of ${String(summary.total)} reviewed`, summary.unsourced.length > 0 ? ` · ${String(summary.unsourced.length)} without evidence` : null]
+				})]
+			}),
+			children,
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-4 md:grid-cols-2",
+				children: [/* @__PURE__ */ jsx(SourcePanel, {
+					label: sourceLabel,
+					runs,
+					active: activeField,
+					decisions
+				}), /* @__PURE__ */ jsx("ol", {
+					"data-slot": "extraction-fields",
+					className: "m-0 flex list-none flex-col gap-3 p-0",
+					children: fields.map((field) => /* @__PURE__ */ jsx(ReviewField, {
+						field,
+						source,
+						decision: decisions[field.name],
+						streaming,
+						lowConfidenceBelow,
+						active: activeField === field.name,
+						onActivate: () => {
+							setActiveField(field.name);
+						},
+						onDecision
+					}, field.name))
+				})]
+			})
+		]
+	});
+}
+function SourcePanel({ label, runs, active, decisions }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (!active || !ref.current) return;
+		ref.current.querySelector(`mark[data-active]`)?.scrollIntoView({ block: "nearest" });
+	}, [active]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "extraction-source",
+		role: "region",
+		"aria-label": label,
+		tabIndex: 0,
+		className: cn("max-h-96 overflow-auto rounded-lg border border-border bg-muted/30 p-3 md:sticky md:top-0 md:self-start", focusRing),
+		children: runs.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-muted-foreground",
+			children: "No source text."
+		}) : /* @__PURE__ */ jsx("pre", {
+			className: "m-0 font-sans text-sm leading-relaxed break-words whitespace-pre-wrap",
+			children: runs.map((run, index) => run.fields.length === 0 ? /* @__PURE__ */ jsx("span", { children: run.text }, index) : /* @__PURE__ */ jsx("mark", {
+				"data-fields": run.fields.join(" "),
+				"data-active": active !== null && run.fields.includes(active) ? "" : void 0,
+				className: cn("rounded-[2px] text-inherit", run.fields.every((name) => decisions[name]?.kind === "rejected") ? "bg-muted line-through decoration-muted-foreground" : "bg-primary/15", active !== null && run.fields.includes(active) && "bg-primary/30 ring-1 ring-primary ring-inset"),
+				children: run.text
+			}, index))
+		})
+	});
+}
+/** Whitespace collapsed and cut short, for quoting evidence under a field. */
+function quote(text, limit = 80) {
+	const collapsed = text.replace(/\s+/g, " ").trim();
+	return collapsed.length > limit ? `${collapsed.slice(0, limit - 1)}…` : collapsed;
+}
+function ReviewField({ field, source, decision, streaming, lowConfidenceBelow, active, onActivate, onDecision }) {
+	const inputId = useId();
+	const evidenceId = useId();
+	const statusId = useId();
+	const confidenceId = useId();
+	const [draft, setDraft] = useState(null);
+	const proposed = field.value ?? "";
+	const decided = decision && decision.kind !== "rejected" ? decision.value : void 0;
+	const current = draft ?? decided ?? proposed;
+	const edited = current !== proposed;
+	const changedSince = decided !== void 0 && current !== decided;
+	const arriving = streaming && field.value === void 0;
+	const sourced = isSourced(source, field);
+	const evidence = sourced ? evidenceOf(source, field.span) : "";
+	const unsourced = !arriving && field.value !== void 0 && !sourced;
+	const accept = () => {
+		onDecision?.(field.name, edited ? {
+			kind: "corrected",
+			value: current,
+			proposed
+		} : {
+			kind: "accepted",
+			value: current
+		});
+	};
+	const onKeyDown = (event) => {
+		if (event.key !== "Enter") return;
+		if (event.nativeEvent.isComposing) return;
+		if (field.multiline && !(event.ctrlKey || event.metaKey)) return;
+		event.preventDefault();
+		accept();
+	};
+	const status = arriving ? "Arriving" : !decision ? "Not reviewed" : decision.kind === "rejected" ? "Rejected" : changedSince ? `Changed since it was ${decision.kind}` : decision.kind === "accepted" ? "Accepted" : decision.proposed ? `Corrected from “${quote(decision.proposed, 40)}”` : "Supplied by the reviewer";
+	const low = field.confidence !== void 0 && field.confidence < lowConfidenceBelow;
+	const percent = field.confidence === void 0 ? null : new Intl.NumberFormat(void 0, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}).format(field.confidence);
+	const describedBy = [
+		evidenceId,
+		statusId,
+		percent !== null ? confidenceId : null
+	].filter(Boolean).join(" ");
+	const controlClass = cn("w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm", edited && "border-warning", focusRing);
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "extraction-field",
+		"data-field": field.name,
+		"data-state": arriving ? "arriving" : decision?.kind ?? "undecided",
+		"data-active": active || void 0,
+		"data-unsourced": unsourced || void 0,
+		onFocus: onActivate,
+		className: cn("flex flex-col gap-1 rounded-lg border p-3", active ? "border-primary" : "border-border", decision?.kind === "rejected" && "bg-muted/40"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-baseline justify-between gap-2",
+				children: [onDecision && !arriving ? /* @__PURE__ */ jsx("label", {
+					htmlFor: inputId,
+					className: "text-xs font-medium text-muted-foreground",
+					children: field.label
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: field.label
+				}), /* @__PURE__ */ jsx("span", {
+					id: statusId,
+					"data-slot": "extraction-field-status",
+					className: cn("text-xs", decision?.kind === "rejected" ? "text-destructive" : "text-muted-foreground", changedSince && "text-warning"),
+					children: status
+				})]
+			}),
+			arriving ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "block h-8 w-full animate-pulse-soft rounded-md bg-muted"
+			}) : !onDecision ? /* @__PURE__ */ jsx("p", {
+				className: "rounded-md bg-muted px-2 py-1.5 text-sm break-words",
+				children: current || /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "Empty"
+				})
+			}) : field.multiline ? /* @__PURE__ */ jsx("textarea", {
+				id: inputId,
+				rows: 3,
+				value: current,
+				"aria-describedby": describedBy,
+				onChange: (event) => {
+					setDraft(event.target.value);
+				},
+				onKeyDown,
+				className: cn(controlClass, "resize-none")
+			}) : /* @__PURE__ */ jsx("input", {
+				id: inputId,
+				type: "text",
+				value: current,
+				"aria-describedby": describedBy,
+				onChange: (event) => {
+					setDraft(event.target.value);
+				},
+				onKeyDown,
+				className: controlClass
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: evidenceId,
+				"data-slot": "extraction-field-evidence",
+				className: cn("text-xs", unsourced ? "text-warning" : "text-muted-foreground"),
+				children: arriving ? "Waiting for the model" : sourced ? `In the source: “${quote(evidence)}”` : field.value === void 0 ? "The model found nothing for this field." : "Not in the source — the model supplied this without evidence."
+			}),
+			percent !== null ? /* @__PURE__ */ jsx("p", {
+				id: confidenceId,
+				"data-slot": "extraction-field-confidence",
+				"data-low": low || void 0,
+				className: cn("text-xs", low ? "text-warning" : "text-muted-foreground"),
+				children: low ? `Low confidence, ${percent} — worth checking` : `${percent} confidence`
+			}) : null,
+			onDecision && !arriving ? /* @__PURE__ */ jsxs("div", {
+				className: "mt-1 flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(FieldButton, {
+						variant: "primary",
+						"aria-label": `${edited ? "Accept correction" : "Accept"} — ${field.label}`,
+						"aria-pressed": decision !== void 0 && decision.kind !== "rejected" && !changedSince,
+						onClick: accept,
+						children: edited ? "Accept correction" : "Accept"
+					}),
+					/* @__PURE__ */ jsx(FieldButton, {
+						"aria-label": `Reject — ${field.label}`,
+						"aria-pressed": decision?.kind === "rejected",
+						onClick: () => {
+							onDecision(field.name, { kind: "rejected" });
+						},
+						children: "Reject"
+					}),
+					sourced ? /* @__PURE__ */ jsx(FieldButton, {
+						"aria-label": `Show in source — ${field.label}`,
+						className: "ms-auto",
+						onClick: onActivate,
+						children: "Show in source"
+					}) : null
+				]
+			}) : null
+		]
+	});
+}
+function FieldButton({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn("rounded-md border px-2.5 py-1 text-xs font-medium transition-colors", variant === "primary" && "border-primary bg-primary text-primary-foreground hover:bg-primary-hover aria-pressed:bg-primary-active", variant === "default" && "border-input bg-background hover:bg-accent hover:text-accent-foreground aria-pressed:bg-secondary aria-pressed:text-secondary-foreground", focusRing, disabledStyles, className),
+		...props
+	});
+}
+//#endregion
+export { ExtractionReview };
+
+//# sourceMappingURL=ai-extraction-review.js.map

package/dist/components/ai-extraction-review/ai-extraction-review.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-extraction-review.js","names":[],"sources":["../../../src/components/ai-extraction-review/ai-extraction-review.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  evidenceOf,\n  isSourced,\n  segmentSource,\n  summarizeReview,\n  type ExtractionField,\n  type FieldDecision,\n  type SourceRun,\n} from \"./extraction-model\";\n\n/**\n * The check after extraction: the document on one side, what the model read\n * out of it on the other, and a decision about every field.\n *\n * Every extraction demo shows the filled object and stops. The products that\n * run extraction for a living — invoice capture, KYC onboarding, claims intake —\n * all have this screen, each built from scratch, because a value that cannot\n * be checked can only be trusted, and nobody who is paying an invoice trusts a\n * model that far. No component library ships it.\n *\n * The link is the component. Each field carries where in the source it was\n * read from, quoted in text under the value as well as highlighted in the\n * document, so a reviewer who cannot see the highlight still has the evidence.\n * And a value with no evidence is said outright — \"the model supplied this\n * without evidence\" — because that is the case a review exists to catch, and\n * the one every filled-object view renders identically to a good value.\n *\n * Evidence is a text offset, not a bounding box. A language model reads text,\n * and a text layer with offsets is what every OCR pipeline already yields.\n * Boxes over a rendered page need page rendering, zoom and geometry, and are a\n * different component; this one does not pretend at them.\n *\n * Decisions are controlled and the component writes nothing. It reports that\n * a field was accepted as proposed, corrected from what was proposed, or\n * rejected — a richer record than a form's submitted values, and the one an\n * audit later needs — and leaves what to do with it to the application.\n */\n\nexport interface ExtractionReviewProps extends Omit<\n  ComponentPropsWithRef<\"section\">,\n  \"children\"\n> {\n  /** What the model read. Every span indexes into it. */\n  source: string;\n  /** Names the source — \"Invoice 4471.pdf, page 1\". */\n  sourceLabel?: string;\n  /** What is being reviewed, as the heading. */\n  heading: string;\n  fields: ExtractionField[];\n  /** Per-field decisions, keyed by field name. Controlled. */\n  decisions?: Record<string, FieldDecision>;\n  /** Omit to render the review as a record rather than something to operate. */\n  onDecision?: (name: string, decision: FieldDecision) => void;\n  /** True while fields are still arriving. Missing values wait instead of reading as not found. */\n  streaming?: boolean;\n  /** Confidence below this is called low, in words. */\n  lowConfidenceBelow?: number;\n  children?: ReactNode;\n}\n\nexport function ExtractionReview({\n  className,\n  source,\n  sourceLabel = \"Source\",\n  heading,\n  fields,\n  decisions = {},\n  onDecision,\n  streaming = false,\n  lowConfidenceBelow = 0.7,\n  children,\n  ...props\n}: ExtractionReviewProps) {\n  const headingId = useId();\n  const [activeField, setActiveField] = useState<string | null>(null);\n\n  const runs = useMemo(() => segmentSource(source, fields), [source, fields]);\n  const summary = useMemo(\n    () => summarizeReview(source, fields, decisions),\n    [source, fields, decisions],\n  );\n\n  return (\n    <section\n      data-slot=\"extraction-review\"\n      data-complete={summary.complete || undefined}\n      aria-labelledby={headingId}\n      aria-busy={streaming || undefined}\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <h3 id={headingId} className=\"text-sm font-medium\">\n          {heading}\n        </h3>\n        {/* Live from the start and short, so each decision is followed by\n            where the review stands rather than by silence. Evidence gaps are\n            counted here too: they are the reason to read carefully, and worth\n            knowing before starting rather than discovering on field six. */}\n        <p\n          data-slot=\"extraction-review-summary\"\n          aria-live=\"polite\"\n          className=\"text-xs text-muted-foreground\"\n        >\n          {streaming\n            ? \"Fields are still arriving\"\n            : `${String(summary.reviewed)} of ${String(summary.total)} reviewed`}\n          {summary.unsourced.length > 0\n            ? ` · ${String(summary.unsourced.length)} without evidence`\n            : null}\n        </p>\n      </div>\n\n      {children}\n\n      <div className=\"grid gap-4 md:grid-cols-2\">\n        <SourcePanel\n          label={sourceLabel}\n          runs={runs}\n          active={activeField}\n          decisions={decisions}\n        />\n\n        <ol data-slot=\"extraction-fields\" className=\"m-0 flex list-none flex-col gap-3 p-0\">\n          {fields.map((field) => (\n            <ReviewField\n              key={field.name}\n              field={field}\n              source={source}\n              decision={decisions[field.name]}\n              streaming={streaming}\n              lowConfidenceBelow={lowConfidenceBelow}\n              active={activeField === field.name}\n              onActivate={() => {\n                setActiveField(field.name);\n              }}\n              onDecision={onDecision}\n            />\n          ))}\n        </ol>\n      </div>\n    </section>\n  );\n}\n\nfunction SourcePanel({\n  label,\n  runs,\n  active,\n  decisions,\n}: {\n  label: string;\n  runs: SourceRun[];\n  active: string | null;\n  decisions: Record<string, FieldDecision>;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  // Bring the active field's evidence into view. Focus stays where it is —\n  // in the field — so a keyboard user is shown the source without being\n  // moved into it.\n  useEffect(() => {\n    if (!active || !ref.current) return;\n    const mark = ref.current.querySelector(`mark[data-active]`);\n    mark?.scrollIntoView({ block: \"nearest\" });\n  }, [active]);\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"extraction-source\"\n      // A scrolling box has to be focusable to be scrolled by keyboard, and a\n      // focusable box needs a name.\n      role=\"region\"\n      aria-label={label}\n      tabIndex={0}\n      // Sticks beside the fields on a wide screen, so the evidence for field\n      // nine is still in view when the reviewer reaches it.\n      className={cn(\n        \"max-h-96 overflow-auto rounded-lg border border-border bg-muted/30 p-3 md:sticky md:top-0 md:self-start\",\n        focusRing,\n      )}\n    >\n      {runs.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground\">No source text.</p>\n      ) : (\n        <pre className=\"m-0 font-sans text-sm leading-relaxed break-words whitespace-pre-wrap\">\n          {runs.map((run, index) =>\n            run.fields.length === 0 ? (\n              <span key={index}>{run.text}</span>\n            ) : (\n              // A mark element, so the evidence survives as structure rather\n              // than only as a tint. No label is inserted into the text: a\n              // document read aloud with field names spliced into it is not\n              // the document, and the field already quotes its evidence.\n              <mark\n                key={index}\n                data-fields={run.fields.join(\" \")}\n                data-active={active !== null && run.fields.includes(active) ? \"\" : undefined}\n                className={cn(\n                  \"rounded-[2px] text-inherit\",\n                  run.fields.every((name) => decisions[name]?.kind === \"rejected\")\n                    ? \"bg-muted line-through decoration-muted-foreground\"\n                    : \"bg-primary/15\",\n                  active !== null &&\n                    run.fields.includes(active) &&\n                    \"bg-primary/30 ring-1 ring-primary ring-inset\",\n                )}\n              >\n                {run.text}\n              </mark>\n            ),\n          )}\n        </pre>\n      )}\n    </div>\n  );\n}\n\n/** Whitespace collapsed and cut short, for quoting evidence under a field. */\nfunction quote(text: string, limit = 80): string {\n  const collapsed = text.replace(/\\s+/g, \" \").trim();\n  return collapsed.length > limit ? `${collapsed.slice(0, limit - 1)}…` : collapsed;\n}\n\nfunction ReviewField({\n  field,\n  source,\n  decision,\n  streaming,\n  lowConfidenceBelow,\n  active,\n  onActivate,\n  onDecision,\n}: {\n  field: ExtractionField;\n  source: string;\n  decision?: FieldDecision;\n  streaming: boolean;\n  lowConfidenceBelow: number;\n  active: boolean;\n  onActivate: () => void;\n  onDecision?: (name: string, decision: FieldDecision) => void;\n}) {\n  const inputId = useId();\n  const evidenceId = useId();\n  const statusId = useId();\n  const confidenceId = useId();\n\n  // The reviewer's typing, kept apart from the model's value so the decision\n  // can say which is which.\n  const [draft, setDraft] = useState<string | null>(null);\n\n  const proposed = field.value ?? \"\";\n  const decided = decision && decision.kind !== \"rejected\" ? decision.value : undefined;\n  const current = draft ?? decided ?? proposed;\n  const edited = current !== proposed;\n  const changedSince = decided !== undefined && current !== decided;\n\n  const arriving = streaming && field.value === undefined;\n  const sourced = isSourced(source, field);\n  const evidence = sourced ? evidenceOf(source, field.span) : \"\";\n  const unsourced = !arriving && field.value !== undefined && !sourced;\n\n  const accept = () => {\n    onDecision?.(\n      field.name,\n      edited\n        ? { kind: \"corrected\", value: current, proposed }\n        : { kind: \"accepted\", value: current },\n    );\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (event.key !== \"Enter\") return;\n    // Enter confirms an IME candidate before it means anything else. Without\n    // this, a reviewer typing a Japanese correction accepts a fragment of it.\n    if (event.nativeEvent.isComposing) return;\n    if (field.multiline && !(event.ctrlKey || event.metaKey)) return;\n    event.preventDefault();\n    accept();\n  };\n\n  const status = arriving\n    ? \"Arriving\"\n    : !decision\n      ? \"Not reviewed\"\n      : decision.kind === \"rejected\"\n        ? \"Rejected\"\n        : changedSince\n          ? `Changed since it was ${decision.kind}`\n          : decision.kind === \"accepted\"\n            ? \"Accepted\"\n            : decision.proposed\n              ? `Corrected from “${quote(decision.proposed, 40)}”`\n              : \"Supplied by the reviewer\";\n\n  const low = field.confidence !== undefined && field.confidence < lowConfidenceBelow;\n  const percent =\n    field.confidence === undefined\n      ? null\n      : new Intl.NumberFormat(undefined, { style: \"percent\", maximumFractionDigits: 0 }).format(\n          field.confidence,\n        );\n\n  const describedBy = [evidenceId, statusId, percent !== null ? confidenceId : null]\n    .filter(Boolean)\n    .join(\" \");\n\n  const controlClass = cn(\n    \"w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm\",\n    edited && \"border-warning\",\n    focusRing,\n  );\n\n  return (\n    <li\n      data-slot=\"extraction-field\"\n      data-field={field.name}\n      data-state={arriving ? \"arriving\" : (decision?.kind ?? \"undecided\")}\n      data-active={active || undefined}\n      data-unsourced={unsourced || undefined}\n      // Focus anywhere in the field — value, either button — is the reviewer\n      // looking at it, so the source follows without a separate step.\n      onFocus={onActivate}\n      className={cn(\n        \"flex flex-col gap-1 rounded-lg border p-3\",\n        active ? \"border-primary\" : \"border-border\",\n        decision?.kind === \"rejected\" && \"bg-muted/40\",\n      )}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        {onDecision && !arriving ? (\n          <label htmlFor={inputId} className=\"text-xs font-medium text-muted-foreground\">\n            {field.label}\n          </label>\n        ) : (\n          <span className=\"text-xs font-medium text-muted-foreground\">{field.label}</span>\n        )}\n        {/* Status as a word, outside the label so editing never renames the\n            control under a screen reader user. */}\n        <span\n          id={statusId}\n          data-slot=\"extraction-field-status\"\n          className={cn(\n            \"text-xs\",\n            decision?.kind === \"rejected\" ? \"text-destructive\" : \"text-muted-foreground\",\n            changedSince && \"text-warning\",\n          )}\n        >\n          {status}\n        </span>\n      </div>\n\n      {arriving ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"block h-8 w-full animate-pulse-soft rounded-md bg-muted\"\n        />\n      ) : !onDecision ? (\n        <p className=\"rounded-md bg-muted px-2 py-1.5 text-sm break-words\">\n          {current || <span className=\"text-muted-foreground\">Empty</span>}\n        </p>\n      ) : field.multiline ? (\n        <textarea\n          id={inputId}\n          rows={3}\n          value={current}\n          aria-describedby={describedBy}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={onKeyDown}\n          className={cn(controlClass, \"resize-none\")}\n        />\n      ) : (\n        <input\n          id={inputId}\n          type=\"text\"\n          value={current}\n          aria-describedby={describedBy}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={onKeyDown}\n          className={controlClass}\n        />\n      )}\n\n      {/* The evidence in text. This is the accessible path to the source, and\n          for a sighted reviewer it is the comparison itself — \"1 March 2026\"\n          beside \"2026-03-01\" is a normalisation, not an error, and only reads\n          that way with both in view. */}\n      <p\n        id={evidenceId}\n        data-slot=\"extraction-field-evidence\"\n        className={cn(\"text-xs\", unsourced ? \"text-warning\" : \"text-muted-foreground\")}\n      >\n        {arriving\n          ? \"Waiting for the model\"\n          : sourced\n            ? `In the source: “${quote(evidence)}”`\n            : field.value === undefined\n              ? \"The model found nothing for this field.\"\n              : \"Not in the source — the model supplied this without evidence.\"}\n      </p>\n\n      {percent !== null ? (\n        <p\n          id={confidenceId}\n          data-slot=\"extraction-field-confidence\"\n          data-low={low || undefined}\n          className={cn(\"text-xs\", low ? \"text-warning\" : \"text-muted-foreground\")}\n        >\n          {low ? `Low confidence, ${percent} — worth checking` : `${percent} confidence`}\n        </p>\n      ) : null}\n\n      {onDecision && !arriving ? (\n        <div className=\"mt-1 flex flex-wrap items-center gap-2\">\n          <FieldButton\n            variant=\"primary\"\n            aria-label={`${edited ? \"Accept correction\" : \"Accept\"} — ${field.label}`}\n            aria-pressed={\n              decision !== undefined && decision.kind !== \"rejected\" && !changedSince\n            }\n            onClick={accept}\n          >\n            {edited ? \"Accept correction\" : \"Accept\"}\n          </FieldButton>\n          <FieldButton\n            aria-label={`Reject — ${field.label}`}\n            aria-pressed={decision?.kind === \"rejected\"}\n            onClick={() => {\n              onDecision(field.name, { kind: \"rejected\" });\n            }}\n          >\n            Reject\n          </FieldButton>\n          {sourced ? (\n            <FieldButton\n              aria-label={`Show in source — ${field.label}`}\n              className=\"ms-auto\"\n              onClick={onActivate}\n            >\n              Show in source\n            </FieldButton>\n          ) : null}\n        </div>\n      ) : null}\n    </li>\n  );\n}\n\nfunction FieldButton({\n  className,\n  variant = \"default\",\n  ...props\n}: ComponentPropsWithRef<\"button\"> & { variant?: \"default\" | \"primary\" }) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border px-2.5 py-1 text-xs font-medium transition-colors\",\n        variant === \"primary\" &&\n          \"border-primary bg-primary text-primary-foreground hover:bg-primary-hover aria-pressed:bg-primary-active\",\n        variant === \"default\" &&\n          \"border-input bg-background hover:bg-accent hover:text-accent-foreground aria-pressed:bg-secondary aria-pressed:text-secondary-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/ai-extraction-review/extraction-model.d.ts

@@ -0,0 +1,94 @@
+//#region src/components/ai-extraction-review/extraction-model.d.ts
+/**
+ * The model behind a review of extracted fields: where each value was read
+ * from, what the reviewer decided about it, and how far through the review
+ * they are.
+ *
+ * Pure, so overlap handling and the completion rule are tested without
+ * rendering anything — and so an application can answer "is this review
+ * finished" on the server from the same decisions the component reports,
+ * rather than trusting a flag the client sent.
+ */
+interface SourceSpan {
+  /** Offset into the source text in UTF-16 code units. Inclusive. */
+  start: number;
+  /** Exclusive. */
+  end: number;
+}
+interface ExtractionField {
+  /** Key in the extracted object. */
+  name: string;
+  label: string;
+  /**
+   * What the model extracted. Absent while streaming means it has not arrived;
+   * absent once streaming has ended means the model found nothing.
+   */
+  value?: string;
+  /**
+   * Where in the source the value was read from. Absent means the model
+   * supplied the value without evidence, which the review says outright.
+   */
+  span?: SourceSpan;
+  /** 0 to 1. Shown as a number, never only as a colour. */
+  confidence?: number;
+  /** A textarea instead of a single line. For addresses and descriptions. */
+  multiline?: boolean;
+}
+type FieldDecision =
+/** The model's value, taken as it was. */
+{
+  kind: "accepted";
+  value: string;
+} |
+/** The reviewer's value, with the model's kept so a record can tell them apart. */
+{
+  kind: "corrected";
+  value: string;
+  proposed: string;
+} |
+/** Wrong and not corrected — the field does not apply, or cannot be known. */
+{
+  kind: "rejected";
+};
+/** A run of source text and the fields whose evidence covers it. */
+interface SourceRun {
+  text: string;
+  /** Field names, in declaration order. Empty for text nobody cites. */
+  fields: string[];
+}
+/**
+ * A span brought within the source, or null if nothing of it is.
+ *
+ * Offsets come from a model or an OCR layer and are wrong often enough that
+ * refusing to render on a bad one would leave the whole review blank. A span
+ * past the end is clamped; an inverted or empty one is treated as no evidence,
+ * which is what it is.
+ */
+declare function clampSpan(span: SourceSpan, length: number): SourceSpan | null;
+/** The text a span points at, or an empty string if it points at nothing. */
+declare function evidenceOf(source: string, span: SourceSpan | undefined): string;
+/** Whether a field's value can be checked against the source at all. */
+declare function isSourced(source: string, field: ExtractionField): boolean;
+/**
+ * Cuts the source into runs at every span boundary, so overlapping evidence —
+ * a total that sits inside the line that contains it — renders as nested
+ * coverage rather than as two marks fighting over the same characters.
+ */
+declare function segmentSource(source: string, fields: ExtractionField[]): SourceRun[];
+interface ReviewSummary {
+  total: number;
+  reviewed: number;
+  accepted: number;
+  corrected: number;
+  rejected: number;
+  /** Fields with a value the model could not point to in the source. */
+  unsourced: string[];
+  /** Fields still awaiting a decision. */
+  remaining: string[];
+  /** Every field has a decision. The only completion signal worth trusting. */
+  complete: boolean;
+}
+declare function summarizeReview(source: string, fields: ExtractionField[], decisions?: Record<string, FieldDecision>): ReviewSummary;
+//#endregion
+export { ExtractionField, FieldDecision, ReviewSummary, SourceRun, SourceSpan, clampSpan, evidenceOf, isSourced, segmentSource, summarizeReview };
+//# sourceMappingURL=extraction-model.d.ts.map

package/dist/components/ai-extraction-review/extraction-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extraction-model.d.ts","names":[],"sources":["../../../src/components/ai-extraction-review/extraction-model.ts"],"mappings":";;;;;;;;;;;UAWiB;;EAEf;;EAEA;;UAGe;;EAEf;EACA;;;;;EAKA;;;;;EAKA,OAAO;;EAEP;;EAEA;;KAGU;;;EAEN;EAAkB;;;;EAElB;EAAmB;EAAe;;;;EAElC;;;UAGW;EACf;;EAEA;;;;;;;;;;iBAWc,UAAU,MAAM,YAAY,iBAAiB;;iBAO7C,WAAW,gBAAgB,MAAM;;iBAOjC,UAAU,gBAAgB,OAAO;;;;;;iBASjC,cAAc,gBAAgB,QAAQ,oBAAoB;UA6BzD;EACf;EACA;EACA;EACA;EACA;;EAEA;;EAEA;;EAEA;;iBAGc,gBACd,gBACA,QAAQ,mBACR,YAAW,eAAe,iBACzB"}

package/dist/components/ai-extraction-review/extraction-model.js

@@ -0,0 +1,91 @@
+//#region src/components/ai-extraction-review/extraction-model.ts
+/**
+* A span brought within the source, or null if nothing of it is.
+*
+* Offsets come from a model or an OCR layer and are wrong often enough that
+* refusing to render on a bad one would leave the whole review blank. A span
+* past the end is clamped; an inverted or empty one is treated as no evidence,
+* which is what it is.
+*/
+function clampSpan(span, length) {
+	const start = Math.max(0, Math.min(span.start, length));
+	const end = Math.max(0, Math.min(span.end, length));
+	return end > start ? {
+		start,
+		end
+	} : null;
+}
+/** The text a span points at, or an empty string if it points at nothing. */
+function evidenceOf(source, span) {
+	if (!span) return "";
+	const clamped = clampSpan(span, source.length);
+	return clamped ? source.slice(clamped.start, clamped.end) : "";
+}
+/** Whether a field's value can be checked against the source at all. */
+function isSourced(source, field) {
+	return field.span !== void 0 && clampSpan(field.span, source.length) !== null;
+}
+/**
+* Cuts the source into runs at every span boundary, so overlapping evidence —
+* a total that sits inside the line that contains it — renders as nested
+* coverage rather than as two marks fighting over the same characters.
+*/
+function segmentSource(source, fields) {
+	const spans = fields.flatMap((field) => {
+		const clamped = field.span ? clampSpan(field.span, source.length) : null;
+		return clamped ? [{
+			name: field.name,
+			...clamped
+		}] : [];
+	});
+	if (source.length === 0) return [];
+	if (spans.length === 0) return [{
+		text: source,
+		fields: []
+	}];
+	const cuts = /* @__PURE__ */ new Set([0, source.length]);
+	for (const span of spans) {
+		cuts.add(span.start);
+		cuts.add(span.end);
+	}
+	const points = [...cuts].sort((a, b) => a - b);
+	const runs = [];
+	for (let index = 0; index < points.length - 1; index += 1) {
+		const start = points[index] ?? 0;
+		const end = points[index + 1] ?? start;
+		if (end <= start) continue;
+		runs.push({
+			text: source.slice(start, end),
+			fields: spans.filter((span) => span.start <= start && span.end >= end).map((s) => s.name)
+		});
+	}
+	return runs;
+}
+function summarizeReview(source, fields, decisions = {}) {
+	const summary = {
+		total: fields.length,
+		reviewed: 0,
+		accepted: 0,
+		corrected: 0,
+		rejected: 0,
+		unsourced: [],
+		remaining: [],
+		complete: false
+	};
+	for (const field of fields) {
+		if (field.value !== void 0 && !isSourced(source, field)) summary.unsourced.push(field.name);
+		const decision = decisions[field.name];
+		if (!decision) {
+			summary.remaining.push(field.name);
+			continue;
+		}
+		summary.reviewed += 1;
+		summary[decision.kind] += 1;
+	}
+	summary.complete = fields.length > 0 && summary.remaining.length === 0;
+	return summary;
+}
+//#endregion
+export { clampSpan, evidenceOf, isSourced, segmentSource, summarizeReview };
+
+//# sourceMappingURL=extraction-model.js.map

package/dist/components/ai-extraction-review/extraction-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extraction-model.js","names":[],"sources":["../../../src/components/ai-extraction-review/extraction-model.ts"],"sourcesContent":["/**\n * The model behind a review of extracted fields: where each value was read\n * from, what the reviewer decided about it, and how far through the review\n * they are.\n *\n * Pure, so overlap handling and the completion rule are tested without\n * rendering anything — and so an application can answer \"is this review\n * finished\" on the server from the same decisions the component reports,\n * rather than trusting a flag the client sent.\n */\n\nexport interface SourceSpan {\n  /** Offset into the source text in UTF-16 code units. Inclusive. */\n  start: number;\n  /** Exclusive. */\n  end: number;\n}\n\nexport interface ExtractionField {\n  /** Key in the extracted object. */\n  name: string;\n  label: string;\n  /**\n   * What the model extracted. Absent while streaming means it has not arrived;\n   * absent once streaming has ended means the model found nothing.\n   */\n  value?: string;\n  /**\n   * Where in the source the value was read from. Absent means the model\n   * supplied the value without evidence, which the review says outright.\n   */\n  span?: SourceSpan;\n  /** 0 to 1. Shown as a number, never only as a colour. */\n  confidence?: number;\n  /** A textarea instead of a single line. For addresses and descriptions. */\n  multiline?: boolean;\n}\n\nexport type FieldDecision =\n  /** The model's value, taken as it was. */\n  | { kind: \"accepted\"; value: string }\n  /** The reviewer's value, with the model's kept so a record can tell them apart. */\n  | { kind: \"corrected\"; value: string; proposed: string }\n  /** Wrong and not corrected — the field does not apply, or cannot be known. */\n  | { kind: \"rejected\" };\n\n/** A run of source text and the fields whose evidence covers it. */\nexport interface SourceRun {\n  text: string;\n  /** Field names, in declaration order. Empty for text nobody cites. */\n  fields: string[];\n}\n\n/**\n * A span brought within the source, or null if nothing of it is.\n *\n * Offsets come from a model or an OCR layer and are wrong often enough that\n * refusing to render on a bad one would leave the whole review blank. A span\n * past the end is clamped; an inverted or empty one is treated as no evidence,\n * which is what it is.\n */\nexport function clampSpan(span: SourceSpan, length: number): SourceSpan | null {\n  const start = Math.max(0, Math.min(span.start, length));\n  const end = Math.max(0, Math.min(span.end, length));\n  return end > start ? { start, end } : null;\n}\n\n/** The text a span points at, or an empty string if it points at nothing. */\nexport function evidenceOf(source: string, span: SourceSpan | undefined): string {\n  if (!span) return \"\";\n  const clamped = clampSpan(span, source.length);\n  return clamped ? source.slice(clamped.start, clamped.end) : \"\";\n}\n\n/** Whether a field's value can be checked against the source at all. */\nexport function isSourced(source: string, field: ExtractionField): boolean {\n  return field.span !== undefined && clampSpan(field.span, source.length) !== null;\n}\n\n/**\n * Cuts the source into runs at every span boundary, so overlapping evidence —\n * a total that sits inside the line that contains it — renders as nested\n * coverage rather than as two marks fighting over the same characters.\n */\nexport function segmentSource(source: string, fields: ExtractionField[]): SourceRun[] {\n  const spans = fields.flatMap((field) => {\n    const clamped = field.span ? clampSpan(field.span, source.length) : null;\n    return clamped ? [{ name: field.name, ...clamped }] : [];\n  });\n\n  if (source.length === 0) return [];\n  if (spans.length === 0) return [{ text: source, fields: [] }];\n\n  const cuts = new Set<number>([0, source.length]);\n  for (const span of spans) {\n    cuts.add(span.start);\n    cuts.add(span.end);\n  }\n  const points = [...cuts].sort((a, b) => a - b);\n\n  const runs: SourceRun[] = [];\n  for (let index = 0; index < points.length - 1; index += 1) {\n    const start = points[index] ?? 0;\n    const end = points[index + 1] ?? start;\n    if (end <= start) continue;\n    runs.push({\n      text: source.slice(start, end),\n      fields: spans.filter((span) => span.start <= start && span.end >= end).map((s) => s.name),\n    });\n  }\n  return runs;\n}\n\nexport interface ReviewSummary {\n  total: number;\n  reviewed: number;\n  accepted: number;\n  corrected: number;\n  rejected: number;\n  /** Fields with a value the model could not point to in the source. */\n  unsourced: string[];\n  /** Fields still awaiting a decision. */\n  remaining: string[];\n  /** Every field has a decision. The only completion signal worth trusting. */\n  complete: boolean;\n}\n\nexport function summarizeReview(\n  source: string,\n  fields: ExtractionField[],\n  decisions: Record<string, FieldDecision> = {},\n): ReviewSummary {\n  const summary: ReviewSummary = {\n    total: fields.length,\n    reviewed: 0,\n    accepted: 0,\n    corrected: 0,\n    rejected: 0,\n    unsourced: [],\n    remaining: [],\n    complete: false,\n  };\n\n  for (const field of fields) {\n    if (field.value !== undefined && !isSourced(source, field)) {\n      summary.unsourced.push(field.name);\n    }\n    const decision = decisions[field.name];\n    if (!decision) {\n      summary.remaining.push(field.name);\n      continue;\n    }\n    summary.reviewed += 1;\n    summary[decision.kind] += 1;\n  }\n\n  summary.complete = fields.length > 0 && summary.remaining.length === 0;\n  return summary;\n}\n"],"mappings":";;;;;;;;;AA6DA,SAAgB,UAAU,MAAkB,QAAmC;CAC7E,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,OAAO,MAAM,CAAC;CACtD,MAAM,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;CAClD,OAAO,MAAM,QAAQ;EAAE;EAAO;CAAI,IAAI;AACxC;;AAGA,SAAgB,WAAW,QAAgB,MAAsC;CAC/E,IAAI,CAAC,MAAM,OAAO;CAClB,MAAM,UAAU,UAAU,MAAM,OAAO,MAAM;CAC7C,OAAO,UAAU,OAAO,MAAM,QAAQ,OAAO,QAAQ,GAAG,IAAI;AAC9D;;AAGA,SAAgB,UAAU,QAAgB,OAAiC;CACzE,OAAO,MAAM,SAAS,KAAA,KAAa,UAAU,MAAM,MAAM,OAAO,MAAM,MAAM;AAC9E;;;;;;AAOA,SAAgB,cAAc,QAAgB,QAAwC;CACpF,MAAM,QAAQ,OAAO,SAAS,UAAU;EACtC,MAAM,UAAU,MAAM,OAAO,UAAU,MAAM,MAAM,OAAO,MAAM,IAAI;EACpE,OAAO,UAAU,CAAC;GAAE,MAAM,MAAM;GAAM,GAAG;EAAQ,CAAC,IAAI,CAAC;CACzD,CAAC;CAED,IAAI,OAAO,WAAW,GAAG,OAAO,CAAC;CACjC,IAAI,MAAM,WAAW,GAAG,OAAO,CAAC;EAAE,MAAM;EAAQ,QAAQ,CAAC;CAAE,CAAC;CAE5D,MAAM,uBAAO,IAAI,IAAY,CAAC,GAAG,OAAO,MAAM,CAAC;CAC/C,KAAK,MAAM,QAAQ,OAAO;EACxB,KAAK,IAAI,KAAK,KAAK;EACnB,KAAK,IAAI,KAAK,GAAG;CACnB;CACA,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CAE7C,MAAM,OAAoB,CAAC;CAC3B,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,GAAG,SAAS,GAAG;EACzD,MAAM,QAAQ,OAAO,UAAU;EAC/B,MAAM,MAAM,OAAO,QAAQ,MAAM;EACjC,IAAI,OAAO,OAAO;EAClB,KAAK,KAAK;GACR,MAAM,OAAO,MAAM,OAAO,GAAG;GAC7B,QAAQ,MAAM,QAAQ,SAAS,KAAK,SAAS,SAAS,KAAK,OAAO,GAAG,CAAC,CAAC,KAAK,MAAM,EAAE,IAAI;EAC1F,CAAC;CACH;CACA,OAAO;AACT;AAgBA,SAAgB,gBACd,QACA,QACA,YAA2C,CAAC,GAC7B;CACf,MAAM,UAAyB;EAC7B,OAAO,OAAO;EACd,UAAU;EACV,UAAU;EACV,WAAW;EACX,UAAU;EACV,WAAW,CAAC;EACZ,WAAW,CAAC;EACZ,UAAU;CACZ;CAEA,KAAK,MAAM,SAAS,QAAQ;EAC1B,IAAI,MAAM,UAAU,KAAA,KAAa,CAAC,UAAU,QAAQ,KAAK,GACvD,QAAQ,UAAU,KAAK,MAAM,IAAI;EAEnC,MAAM,WAAW,UAAU,MAAM;EACjC,IAAI,CAAC,UAAU;GACb,QAAQ,UAAU,KAAK,MAAM,IAAI;GACjC;EACF;EACA,QAAQ,YAAY;EACpB,QAAQ,SAAS,SAAS;CAC5B;CAEA,QAAQ,WAAW,OAAO,SAAS,KAAK,QAAQ,UAAU,WAAW;CACrE,OAAO;AACT"}

package/dist/components/ai-extraction-review/index.d.ts

@@ -0,0 +1,3 @@
+import { ExtractionField, FieldDecision, ReviewSummary, SourceRun, SourceSpan, clampSpan, evidenceOf, isSourced, segmentSource, summarizeReview } from "./extraction-model.js";
+import { ExtractionReview, ExtractionReviewProps } from "./ai-extraction-review.js";
+export { type ExtractionField, ExtractionReview, type ExtractionReviewProps, type FieldDecision, type ReviewSummary, type SourceRun, type SourceSpan, clampSpan, evidenceOf, isSourced, segmentSource, summarizeReview };

package/dist/components/ai-extraction-review/index.js

@@ -0,0 +1,3 @@
+import { clampSpan, evidenceOf, isSourced, segmentSource, summarizeReview } from "./extraction-model.js";
+import { ExtractionReview } from "./ai-extraction-review.js";
+export { ExtractionReview, clampSpan, evidenceOf, isSourced, segmentSource, summarizeReview };

package/dist/components/ai-extraction-review/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ai-extraction-review/meta.ts
+const meta = defineMeta({
+	name: "ai-extraction-review",
+	title: "AI Extraction Review",
+	description: "Check extracted fields against the document they came from, and decide each one.",
+	category: "ai",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["extraction-model.ts", "ai-extraction-review.tsx"],
+	a11y: "Every field quotes its evidence in text under the value, so a reviewer who cannot see the highlight in the source still has what the model read. A value with no evidence is said in words — never left to look like a good one. The source is a focusable named region because it scrolls, and its highlights are mark elements with nothing spliced into the text, since a document read aloud with field names inserted is no longer the document. Focus anywhere in a field brings its evidence into view without moving focus, so a keyboard user is shown the source rather than sent into it. Each control's name carries the field it belongs to, so ten Accept buttons are ten different buttons. Status is a word, outside the label so editing never renames the control, and the running count is a polite live region present from the start. Enter accepts, except while an IME is composing."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/ai-extraction-review/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-extraction-review/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-extraction-review\",\n  title: \"AI Extraction Review\",\n  description:\n    \"Check extracted fields against the document they came from, and decide each one.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"extraction-model.ts\", \"ai-extraction-review.tsx\"],\n  a11y:\n    \"Every field quotes its evidence in text under the value, so a reviewer who cannot see the \" +\n    \"highlight in the source still has what the model read. A value with no evidence is said in \" +\n    \"words — never left to look like a good one. The source is a focusable named region because \" +\n    \"it scrolls, and its highlights are mark elements with nothing spliced into the text, since a \" +\n    \"document read aloud with field names inserted is no longer the document. Focus anywhere in a \" +\n    \"field brings its evidence into view without moving focus, so a keyboard user is shown the \" +\n    \"source rather than sent into it. Each control's name carries the field it belongs to, so \" +\n    \"ten Accept buttons are ten different buttons. Status is a word, outside the label so editing \" +\n    \"never renames the control, and the running count is a polite live region present from the \" +\n    \"start. Enter accepts, except while an IME is composing.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,uBAAuB,0BAA0B;CACzD,MACE;AAUJ,CAAC"}

package/dist/components/ai-prompt-input/ai-prompt-input.js

@@ -101,7 +101,7 @@ function PromptInputSubmit({ className, label = "Send message", stopLabel = "Sto
 		"aria-label": busy ? stopLabel : label,
 		disabled,
 		onClick: busy ? onStop : void 0,
-		className: cn("ml-auto grid size-8 shrink-0 place-items-center rounded-lg", "bg-primary text-primary-foreground transition-colors duration-[var(--duration-fast)]", "hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-55", focusRing, className),
+		className: cn("ms-auto grid size-8 shrink-0 place-items-center rounded-lg", "bg-primary text-primary-foreground transition-colors duration-[var(--duration-fast)]", "hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-55", focusRing, className),
 		...props,
 		children: busy ? /* @__PURE__ */ jsx("svg", {
 			viewBox: "0 0 24 24",

package/dist/components/ai-prompt-input/ai-prompt-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-prompt-input.js","names":[],"sources":["../../../src/components/ai-prompt-input/ai-prompt-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type FormEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from \"react\";\n\nimport { focusRing, focusRingInset } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The composer.\n *\n * Handles the parts of a chat input that are easy to get subtly wrong:\n * auto-growing to fit the text up to a ceiling, sending on Enter without\n * breaking multi-line input, and — the one almost everybody misses —\n * not sending mid-composition when someone is typing with an IME.\n */\n\ninterface PromptInputContextValue {\n  textareaId: string;\n  submit: () => void;\n  disabled: boolean;\n  busy: boolean;\n}\n\nconst PromptInputContext = createContext<PromptInputContextValue | null>(null);\n\nfunction usePromptInput(component: string): PromptInputContextValue {\n  const context = useContext(PromptInputContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <PromptInput>.`);\n  }\n  return context;\n}\n\nexport interface PromptInputProps extends Omit<ComponentPropsWithRef<\"form\">, \"onSubmit\"> {\n  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;\n  /** Blocks submission and dims the composer. */\n  disabled?: boolean;\n  /** A response is in flight: submission is blocked and Stop is shown instead. */\n  busy?: boolean;\n}\n\nexport function PromptInput({\n  className,\n  onSubmit,\n  disabled = false,\n  busy = false,\n  children,\n  ...props\n}: PromptInputProps) {\n  const uid = useId();\n  const formRef = useRef<HTMLFormElement | null>(null);\n\n  const context = useMemo<PromptInputContextValue>(\n    () => ({\n      textareaId: `${uid}-textarea`,\n      disabled,\n      busy,\n      submit: () => {\n        formRef.current?.requestSubmit();\n      },\n    }),\n    [uid, disabled, busy],\n  );\n\n  return (\n    <PromptInputContext.Provider value={context}>\n      <form\n        ref={formRef}\n        data-slot=\"prompt-input\"\n        data-busy={busy || undefined}\n        onSubmit={(event) => {\n          if (disabled || busy) {\n            event.preventDefault();\n            return;\n          }\n          onSubmit?.(event);\n        }}\n        className={cn(\n          \"rounded-xl border border-input bg-background shadow-xs\",\n          \"transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n          \"focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/55\",\n          disabled && \"opacity-60\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </form>\n    </PromptInputContext.Provider>\n  );\n}\n\n/** Rows the textarea will grow to before it starts scrolling. */\nconst DEFAULT_MAX_ROWS = 8;\n\nexport interface PromptInputTextareaProps extends Omit<\n  ComponentPropsWithRef<\"textarea\">,\n  \"rows\"\n> {\n  maxRows?: number;\n  /**\n   * Send on Enter, newline on Shift+Enter.\n   *\n   * Turn it off for a composer where Enter should always insert a newline and\n   * sending is only ever an explicit button press.\n   */\n  submitOnEnter?: boolean;\n}\n\nexport function PromptInputTextarea({\n  className,\n  maxRows = DEFAULT_MAX_ROWS,\n  submitOnEnter = true,\n  onKeyDown,\n  onChange,\n  ...props\n}: PromptInputTextareaProps) {\n  const { textareaId, submit, disabled, busy } = usePromptInput(\"PromptInputTextarea\");\n  const ref = useRef<HTMLTextAreaElement | null>(null);\n\n  // Grows with the content up to maxRows, then scrolls. Measured after layout\n  // so the height is right on the first paint rather than one frame late.\n  useLayoutEffect(() => {\n    const textarea = ref.current;\n    if (!textarea) return;\n\n    textarea.style.height = \"auto\";\n    const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight) || 20;\n    const maxHeight = lineHeight * maxRows;\n    textarea.style.height = `${String(Math.min(textarea.scrollHeight, maxHeight))}px`;\n    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? \"auto\" : \"hidden\";\n  });\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLTextAreaElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || !submitOnEnter) return;\n    if (event.key !== \"Enter\" || event.shiftKey) return;\n\n    // Mid-composition Enter confirms the candidate an IME is offering — for\n    // Japanese, Chinese, Korean and others it is part of typing a word, not a\n    // request to send. Sending here truncates the sentence and is the single\n    // most common way a chat composer breaks for those users.\n    if (event.nativeEvent.isComposing) return;\n\n    event.preventDefault();\n    submit();\n  }\n\n  return (\n    <textarea\n      ref={ref}\n      id={textareaId}\n      data-slot=\"prompt-input-textarea\"\n      rows={1}\n      disabled={disabled}\n      aria-disabled={busy || undefined}\n      onKeyDown={handleKeyDown}\n      onChange={onChange}\n      className={cn(\n        \"block w-full resize-none bg-transparent px-4 py-3 text-sm outline-none\",\n        \"placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n        focusRingInset,\n        \"focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The row beneath the textarea: attachments, model picker, send. */\nexport function PromptInputToolbar({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"prompt-input-toolbar\"\n      className={cn(\"flex items-center gap-2 px-2 pb-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface PromptInputSubmitProps extends ComponentPropsWithRef<\"button\"> {\n  /** Label while idle. */\n  label?: string;\n  /** Label while a response is streaming. */\n  stopLabel?: string;\n  /** Called instead of submitting when busy. */\n  onStop?: () => void;\n}\n\n/**\n * Send, or stop.\n *\n * One control with two jobs, because that is what the space affords and what\n * people expect. The accessible name changes with the state, so it is never\n * \"Send\" while it actually stops.\n */\nexport function PromptInputSubmit({\n  className,\n  label = \"Send message\",\n  stopLabel = \"Stop generating\",\n  onStop,\n  ...props\n}: PromptInputSubmitProps) {\n  const { busy, disabled } = usePromptInput(\"PromptInputSubmit\");\n\n  return (\n    <button\n      type={busy ? \"button\" : \"submit\"}\n      data-slot=\"prompt-input-submit\"\n      aria-label={busy ? stopLabel : label}\n      disabled={disabled}\n      onClick={busy ? onStop : undefined}\n      className={cn(\n        \"ml-auto grid size-8 shrink-0 place-items-center rounded-lg\",\n        \"bg-primary text-primary-foreground transition-colors duration-[var(--duration-fast)]\",\n        \"hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-55\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {busy ? (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n          <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\" />\n        </svg>\n      ) : (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4\">\n          <path\n            d=\"M12 19V5m0 0-6 6m6-6 6 6\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n}\n\nexport interface PromptInputCounterProps extends ComponentPropsWithRef<\"div\"> {\n  value: number;\n  max: number;\n  /** Fraction of the limit past which the counter starts warning. */\n  warnAt?: number;\n}\n\n/**\n * Characters used against a limit.\n *\n * The visible count updates on every keystroke; the live region does not.\n *\n * The naive version toggles `aria-live` on once the count matters, but a region\n * only announces changes that happen *while* it is live — switching it on at\n * the same moment the content changes means the one update worth hearing is the\n * one that is missed. So the region is live from the start and simply has\n * nothing in it until the limit is close, which is also what keeps ordinary\n * typing silent.\n */\nexport function PromptInputCounter({\n  className,\n  value,\n  max,\n  warnAt = 0.9,\n  ...props\n}: PromptInputCounterProps) {\n  const warning = value >= max * warnAt;\n  const over = value > max;\n  const remaining = max - value;\n\n  return (\n    <div\n      data-slot=\"prompt-input-counter\"\n      data-warning={warning || undefined}\n      data-over={over || undefined}\n      className={cn(\n        \"text-xs tabular-nums\",\n        over ? \"text-destructive\" : warning ? \"text-warning\" : \"text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\">\n        {warning ? `${String(value)} / ${String(max)}` : String(value)}\n      </span>\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {over\n          ? `Over the limit by ${String(-remaining)} characters`\n          : warning\n            ? `${String(remaining)} characters remaining`\n            : \"\"}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ai-prompt-input.js","names":[],"sources":["../../../src/components/ai-prompt-input/ai-prompt-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type FormEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from \"react\";\n\nimport { focusRing, focusRingInset } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The composer.\n *\n * Handles the parts of a chat input that are easy to get subtly wrong:\n * auto-growing to fit the text up to a ceiling, sending on Enter without\n * breaking multi-line input, and — the one almost everybody misses —\n * not sending mid-composition when someone is typing with an IME.\n */\n\ninterface PromptInputContextValue {\n  textareaId: string;\n  submit: () => void;\n  disabled: boolean;\n  busy: boolean;\n}\n\nconst PromptInputContext = createContext<PromptInputContextValue | null>(null);\n\nfunction usePromptInput(component: string): PromptInputContextValue {\n  const context = useContext(PromptInputContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <PromptInput>.`);\n  }\n  return context;\n}\n\nexport interface PromptInputProps extends Omit<ComponentPropsWithRef<\"form\">, \"onSubmit\"> {\n  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;\n  /** Blocks submission and dims the composer. */\n  disabled?: boolean;\n  /** A response is in flight: submission is blocked and Stop is shown instead. */\n  busy?: boolean;\n}\n\nexport function PromptInput({\n  className,\n  onSubmit,\n  disabled = false,\n  busy = false,\n  children,\n  ...props\n}: PromptInputProps) {\n  const uid = useId();\n  const formRef = useRef<HTMLFormElement | null>(null);\n\n  const context = useMemo<PromptInputContextValue>(\n    () => ({\n      textareaId: `${uid}-textarea`,\n      disabled,\n      busy,\n      submit: () => {\n        formRef.current?.requestSubmit();\n      },\n    }),\n    [uid, disabled, busy],\n  );\n\n  return (\n    <PromptInputContext.Provider value={context}>\n      <form\n        ref={formRef}\n        data-slot=\"prompt-input\"\n        data-busy={busy || undefined}\n        onSubmit={(event) => {\n          if (disabled || busy) {\n            event.preventDefault();\n            return;\n          }\n          onSubmit?.(event);\n        }}\n        className={cn(\n          \"rounded-xl border border-input bg-background shadow-xs\",\n          \"transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n          \"focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/55\",\n          disabled && \"opacity-60\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </form>\n    </PromptInputContext.Provider>\n  );\n}\n\n/** Rows the textarea will grow to before it starts scrolling. */\nconst DEFAULT_MAX_ROWS = 8;\n\nexport interface PromptInputTextareaProps extends Omit<\n  ComponentPropsWithRef<\"textarea\">,\n  \"rows\"\n> {\n  maxRows?: number;\n  /**\n   * Send on Enter, newline on Shift+Enter.\n   *\n   * Turn it off for a composer where Enter should always insert a newline and\n   * sending is only ever an explicit button press.\n   */\n  submitOnEnter?: boolean;\n}\n\nexport function PromptInputTextarea({\n  className,\n  maxRows = DEFAULT_MAX_ROWS,\n  submitOnEnter = true,\n  onKeyDown,\n  onChange,\n  ...props\n}: PromptInputTextareaProps) {\n  const { textareaId, submit, disabled, busy } = usePromptInput(\"PromptInputTextarea\");\n  const ref = useRef<HTMLTextAreaElement | null>(null);\n\n  // Grows with the content up to maxRows, then scrolls. Measured after layout\n  // so the height is right on the first paint rather than one frame late.\n  useLayoutEffect(() => {\n    const textarea = ref.current;\n    if (!textarea) return;\n\n    textarea.style.height = \"auto\";\n    const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight) || 20;\n    const maxHeight = lineHeight * maxRows;\n    textarea.style.height = `${String(Math.min(textarea.scrollHeight, maxHeight))}px`;\n    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? \"auto\" : \"hidden\";\n  });\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLTextAreaElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || !submitOnEnter) return;\n    if (event.key !== \"Enter\" || event.shiftKey) return;\n\n    // Mid-composition Enter confirms the candidate an IME is offering — for\n    // Japanese, Chinese, Korean and others it is part of typing a word, not a\n    // request to send. Sending here truncates the sentence and is the single\n    // most common way a chat composer breaks for those users.\n    if (event.nativeEvent.isComposing) return;\n\n    event.preventDefault();\n    submit();\n  }\n\n  return (\n    <textarea\n      ref={ref}\n      id={textareaId}\n      data-slot=\"prompt-input-textarea\"\n      rows={1}\n      disabled={disabled}\n      aria-disabled={busy || undefined}\n      onKeyDown={handleKeyDown}\n      onChange={onChange}\n      className={cn(\n        \"block w-full resize-none bg-transparent px-4 py-3 text-sm outline-none\",\n        \"placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n        focusRingInset,\n        \"focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The row beneath the textarea: attachments, model picker, send. */\nexport function PromptInputToolbar({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"prompt-input-toolbar\"\n      className={cn(\"flex items-center gap-2 px-2 pb-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface PromptInputSubmitProps extends ComponentPropsWithRef<\"button\"> {\n  /** Label while idle. */\n  label?: string;\n  /** Label while a response is streaming. */\n  stopLabel?: string;\n  /** Called instead of submitting when busy. */\n  onStop?: () => void;\n}\n\n/**\n * Send, or stop.\n *\n * One control with two jobs, because that is what the space affords and what\n * people expect. The accessible name changes with the state, so it is never\n * \"Send\" while it actually stops.\n */\nexport function PromptInputSubmit({\n  className,\n  label = \"Send message\",\n  stopLabel = \"Stop generating\",\n  onStop,\n  ...props\n}: PromptInputSubmitProps) {\n  const { busy, disabled } = usePromptInput(\"PromptInputSubmit\");\n\n  return (\n    <button\n      type={busy ? \"button\" : \"submit\"}\n      data-slot=\"prompt-input-submit\"\n      aria-label={busy ? stopLabel : label}\n      disabled={disabled}\n      onClick={busy ? onStop : undefined}\n      className={cn(\n        \"ms-auto grid size-8 shrink-0 place-items-center rounded-lg\",\n        \"bg-primary text-primary-foreground transition-colors duration-[var(--duration-fast)]\",\n        \"hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-55\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {busy ? (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n          <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\" />\n        </svg>\n      ) : (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4\">\n          <path\n            d=\"M12 19V5m0 0-6 6m6-6 6 6\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n}\n\nexport interface PromptInputCounterProps extends ComponentPropsWithRef<\"div\"> {\n  value: number;\n  max: number;\n  /** Fraction of the limit past which the counter starts warning. */\n  warnAt?: number;\n}\n\n/**\n * Characters used against a limit.\n *\n * The visible count updates on every keystroke; the live region does not.\n *\n * The naive version toggles `aria-live` on once the count matters, but a region\n * only announces changes that happen *while* it is live — switching it on at\n * the same moment the content changes means the one update worth hearing is the\n * one that is missed. So the region is live from the start and simply has\n * nothing in it until the limit is close, which is also what keeps ordinary\n * typing silent.\n */\nexport function PromptInputCounter({\n  className,\n  value,\n  max,\n  warnAt = 0.9,\n  ...props\n}: PromptInputCounterProps) {\n  const warning = value >= max * warnAt;\n  const over = value > max;\n  const remaining = max - value;\n\n  return (\n    <div\n      data-slot=\"prompt-input-counter\"\n      data-warning={warning || undefined}\n      data-over={over || undefined}\n      className={cn(\n        \"text-xs tabular-nums\",\n        over ? \"text-destructive\" : warning ? \"text-warning\" : \"text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\">\n        {warning ? `${String(value)} / ${String(max)}` : String(value)}\n      </span>\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {over\n          ? `Over the limit by ${String(-remaining)} characters`\n          : warning\n            ? `${String(remaining)} characters remaining`\n            : \"\"}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/ai-reasoning/ai-reasoning.js

@@ -53,7 +53,7 @@ function ReasoningContent({ className, children, ...props }) {
 		className: cn("overflow-hidden", "data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open", className),
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "mt-2 border-l-2 border-border pl-3 text-sm whitespace-pre-wrap text-muted-foreground",
+			className: "mt-2 border-s-2 border-border ps-3 text-sm whitespace-pre-wrap text-muted-foreground",
 			children
 		})
 	});