@dowel-ui/react 0.3.0 → 0.5.0

package/README.md

@@ -54,28 +54,33 @@ they want to change something.
 
 ## What is in it
 
-**56 components** and **8 blocks**, every one keyboard-operable and audited for
+**70 components** and **8 blocks**, every one keyboard-operable and audited for
 contrast.
 
 **AI** — the reason this library exists
 Conversation · Message · Response · Prompt Input · Tool Call · Reasoning ·
-Sources · Model Selector · Token Usage · Agent Status · **Agent Plan** ·
-**Approval Request** · **Action Ledger** · **Structured Output** ·
-**Inline Completion**
+Sources · Model Selector · Token Usage · Agent Status · Agent Plan ·
+Approval Request · Action Ledger · Structured Output · Inline Completion ·
+Disclosure · **Extraction Review** ·
+**Suggested Value**
 
 **Forms**
 Input · Label · Checkbox · Radio Group · Switch · Slider · Select · Combobox ·
-Form · Calendar · Date Picker · **Tags Input** · **File Upload**
+Form · Calendar · Date Picker · Tags Input · File Upload ·
+**Time Range Picker** · **Cron Editor** · **Secret Field** ·
+**Confirm Typed** · **Shortcut Recorder**
 
 **Overlays**
 Dialog · Sheet · Drawer · Popover · Tooltip · Dropdown Menu
 
 **Data**
-Table · Data Table · Accordion · Activity Feed · Code Block · **Metric Delta** ·
-**Record Diff**
+Table · Data Table · Accordion · Activity Feed · Code Block · Metric Delta ·
+Record Diff · **Log Viewer** · **Diff Viewer** · **Permission Matrix** ·
+**DNS Record**
 
 **Feedback**
-Alert · Toast · Progress · **Meter** · Skeleton · Spinner · Empty State
+Alert · Toast · Progress · Meter · Skeleton · Spinner · Empty State ·
+**Sync Status** · **Session Expiry**
 
 **Navigation & layout**
 Tabs · Command · Pagination · Card · Badge · Avatar · Button · Separator

package/dist/components/ai-disclosure/ai-disclosure.d.ts

@@ -0,0 +1,92 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/ai-disclosure/ai-disclosure.d.ts
+/**
+ * Telling someone they are looking at AI.
+ *
+ * Not one registry ships this — not AI Elements, assistant-ui, prompt-kit,
+ * CopilotKit or shadcn — while every one of them ships the chat surface that
+ * needs it. The gap is the reason this exists.
+ *
+ * The four `kind`s are not invented. They are the four human-visible situations
+ * the EU AI Act's Article 50 actually creates, which has applied since 2 August
+ * 2026: you are talking to a machine (50(1)); this media was generated or
+ * manipulated and resembles something real (50(4), "deep fakes"); this text was
+ * published to inform the public (50(4)); and the assisted case, which the same
+ * paragraph exempts where there is human review or editorial control — worth
+ * saying out loud rather than leaving to inference.
+ *
+ * What this cannot do, and what no React component can: Article 50(2) requires
+ * synthetic output to be marked *in a machine-readable format*, in the artifact
+ * itself, by whoever generated it. Rendering a badge does not do that, and a
+ * component that let you believe otherwise would be worse than none. Read the
+ * accessibility note and the docs page: this is a disclosure control, not a
+ * compliance product, and nothing here is legal advice.
+ */
+type DisclosureKind = "interaction" | "generated" | "manipulated" | "assisted";
+declare const disclosureVariants: (props?: ({
+  variant?: "banner" | "inline" | "overlay" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface AIDisclosureProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof disclosureVariants> {
+  kind: DisclosureKind;
+  /** Replaces the default wording. The default is a starting point, not a rule. */
+  label?: ReactNode;
+  /**
+   * Replaces the mark. The Commission publishes three icons for this and lets
+   * anyone use them without attribution — they are deliberately not bundled
+   * here, because an official mark shipped inside a component library ends up
+   * on content nobody checked. Bring your own, and the Commission's own words
+   * apply: using them "does not establish legal compliance by itself".
+   */
+  icon?: ReactNode;
+  /** A provenance panel, or anything else that belongs after the label. */
+  children?: ReactNode;
+}
+/**
+ * A disclosure, in words.
+ *
+ * The icon is decorative and the text is the disclosure. A sparkle alone is not
+ * a notice — it is a decoration that a sighted reader may or may not decode and
+ * that a screen reader passes over in silence, which is the failure mode the
+ * whole component exists to avoid.
+ */
+declare function AIDisclosure({ className, kind, variant, label, icon, children, ...props }: AIDisclosureProps): import("react").JSX.Element;
+interface ProvenanceClaim {
+  label: string;
+  value: ReactNode;
+}
+interface AIDisclosureProvenanceProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /**
+   * What is being claimed about this content, and by whom.
+   *
+   * Claims, not findings. They arrive as data — from a C2PA manifest your
+   * server read, from your own pipeline, from a vendor — and this renders them.
+   */
+  claims: ProvenanceClaim[];
+  /** Who asserts the claims. Named, because an unattributed claim is a rumour. */
+  source?: string;
+  /**
+   * Whether something you trust checked the claims, and said so.
+   *
+   * Supplied, never computed. Verifying a C2PA manifest means parsing signed
+   * COSE and walking a certificate chain; doing that in the browser would mean
+   * a wasm blob you cannot read, and "you own the source" would stop being
+   * true. It also cannot be trusted client-side even when it succeeds, because
+   * the page doing the checking is the page making the claim. Verify on a
+   * server and pass the answer down. Left undefined, this says so.
+   */
+  verified?: boolean;
+  triggerLabel?: string;
+}
+/**
+ * The metadata behind a disclosure, presented as claims rather than proof.
+ *
+ * The distinction is the entire point. "Made with Model X on 3 September" looks
+ * like a fact and is a string somebody put in a file. Rendering it beside a
+ * checkmark would launder an assertion into evidence, so the panel names who is
+ * asserting and states plainly whether anyone checked.
+ */
+declare function AIDisclosureProvenance({ className, claims, source, verified, triggerLabel, ...props }: AIDisclosureProvenanceProps): import("react").JSX.Element;
+//#endregion
+export { AIDisclosure, AIDisclosureProps, AIDisclosureProvenance, AIDisclosureProvenanceProps, DisclosureKind, ProvenanceClaim, disclosureVariants };
+//# sourceMappingURL=ai-disclosure.d.ts.map

package/dist/components/ai-disclosure/ai-disclosure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-disclosure.d.ts","names":[],"sources":["../../../src/components/ai-disclosure/ai-disclosure.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;KAgCY;cAgBN,qBAAkB;;6CAyBvB;UAegB,0BAEb,KAAK,2CACL,oBAAoB;EACtB,MAAM;;EAEN,QAAQ;;;;;;;;EAQR,OAAO;;EAEP,WAAW;;;;;;;;;;iBAWG,eACd,WACA,MACA,SACA,OACA,MACA,aACG,SACF,oCAAiB,IAAA;UAmBH;EACf;EACA,OAAO;;UAGQ,oCAAoC,KACnD;;;;;;;EASA,QAAQ;;EAER;;;;;;;;;;;EAWA;EACA;;;;;;;;;;iBAoBc,yBACd,WACA,QACA,QACA,UACA,iBACG,SACF,8CAA2B,IAAA"}

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

@@ -0,0 +1,122 @@
+"use client";
+import { focusRing, iconSlot } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ai-disclosure/ai-disclosure.tsx
+/**
+* What each kind says by default.
+*
+* Phrased for a reader rather than for a lawyer, and every one of them is
+* overridable — the Act says the disclosure must be clear, not that it must use
+* these words, and the right words depend on the product.
+*/
+const DEFAULT_LABEL = {
+	interaction: "You are chatting with an AI assistant",
+	generated: "Generated by AI",
+	manipulated: "This media was altered by AI",
+	assisted: "AI-assisted, reviewed by a person"
+};
+const disclosureVariants = cva(cn("inline-flex w-fit items-center gap-1.5 font-medium", "[&_svg:not([class*='size-'])]:size-3.5", iconSlot), {
+	variants: { variant: {
+		/** Sits beside the thing it describes. */
+		inline: "rounded-full border border-border-strong px-2 py-0.5 text-xs",
+		/** Above a conversation, where Article 50(1) usually belongs. */
+		banner: "w-full rounded-lg border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground",
+		/**
+		* Over the corner of an image or video. `--overlay` is a dark scrim in
+		* every shipped theme, so the text is white on purpose rather than
+		* following the theme — a label that inverts over a photograph is
+		* unreadable on half of them.
+		*/
+		overlay: "rounded-md bg-overlay px-2 py-1 text-2xs text-white backdrop-blur-sm"
+	} },
+	defaultVariants: { variant: "inline" }
+});
+function SparkIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Z",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinejoin: "round"
+		})
+	});
+}
+/**
+* A disclosure, in words.
+*
+* The icon is decorative and the text is the disclosure. A sparkle alone is not
+* a notice — it is a decoration that a sighted reader may or may not decode and
+* that a screen reader passes over in silence, which is the failure mode the
+* whole component exists to avoid.
+*/
+function AIDisclosure({ className, kind, variant, label, icon, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "ai-disclosure",
+		"data-kind": kind,
+		className: cn(disclosureVariants({ variant }), className),
+		...props,
+		children: [
+			icon ?? /* @__PURE__ */ jsx(SparkIcon, {}),
+			/* @__PURE__ */ jsx("span", { children: label ?? DEFAULT_LABEL[kind] }),
+			children
+		]
+	});
+}
+function statusText(status, source) {
+	const by = source ? ` by ${source}` : "";
+	if (status === "verified") return `Checked${by} and the claims matched.`;
+	if (status === "failed") return `Checked${by} and the claims did not match.`;
+	return "Not checked. These are claims made about the content, not findings.";
+}
+/**
+* The metadata behind a disclosure, presented as claims rather than proof.
+*
+* The distinction is the entire point. "Made with Model X on 3 September" looks
+* like a fact and is a string somebody put in a file. Rendering it beside a
+* checkmark would launder an assertion into evidence, so the panel names who is
+* asserting and states plainly whether anyone checked.
+*/
+function AIDisclosureProvenance({ className, claims, source, verified, triggerLabel = "Content details", ...props }) {
+	const status = verified === void 0 ? "unchecked" : verified ? "verified" : "failed";
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "ai-disclosure-provenance-trigger",
+			className: cn("rounded-sm underline decoration-dotted underline-offset-2 hover:decoration-solid", focusRing, className),
+			...props,
+			children: triggerLabel
+		})
+	}), /* @__PURE__ */ jsxs(PopoverContent, {
+		"aria-label": triggerLabel,
+		className: "w-80 text-xs",
+		children: [/* @__PURE__ */ jsx("dl", {
+			className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5",
+			children: claims.map((claim) => /* @__PURE__ */ jsxs("div", {
+				className: "contents",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: "text-muted-foreground",
+					children: claim.label
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "break-words",
+					children: claim.value
+				})]
+			}, claim.label))
+		}), /* @__PURE__ */ jsx("p", {
+			"data-slot": "ai-disclosure-provenance-status",
+			"data-status": status,
+			className: cn("mt-3 border-t border-border pt-2", status === "failed" ? "text-destructive" : "text-muted-foreground"),
+			children: statusText(status, source)
+		})]
+	})] });
+}
+//#endregion
+export { AIDisclosure, AIDisclosureProvenance, disclosureVariants };
+
+//# sourceMappingURL=ai-disclosure.js.map

package/dist/components/ai-disclosure/ai-disclosure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-disclosure.js","names":[],"sources":["../../../src/components/ai-disclosure/ai-disclosure.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\";\nimport { focusRing, iconSlot } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Telling someone they are looking at AI.\n *\n * Not one registry ships this — not AI Elements, assistant-ui, prompt-kit,\n * CopilotKit or shadcn — while every one of them ships the chat surface that\n * needs it. The gap is the reason this exists.\n *\n * The four `kind`s are not invented. They are the four human-visible situations\n * the EU AI Act's Article 50 actually creates, which has applied since 2 August\n * 2026: you are talking to a machine (50(1)); this media was generated or\n * manipulated and resembles something real (50(4), \"deep fakes\"); this text was\n * published to inform the public (50(4)); and the assisted case, which the same\n * paragraph exempts where there is human review or editorial control — worth\n * saying out loud rather than leaving to inference.\n *\n * What this cannot do, and what no React component can: Article 50(2) requires\n * synthetic output to be marked *in a machine-readable format*, in the artifact\n * itself, by whoever generated it. Rendering a badge does not do that, and a\n * component that let you believe otherwise would be worse than none. Read the\n * accessibility note and the docs page: this is a disclosure control, not a\n * compliance product, and nothing here is legal advice.\n */\n\nexport type DisclosureKind = \"interaction\" | \"generated\" | \"manipulated\" | \"assisted\";\n\n/**\n * What each kind says by default.\n *\n * Phrased for a reader rather than for a lawyer, and every one of them is\n * overridable — the Act says the disclosure must be clear, not that it must use\n * these words, and the right words depend on the product.\n */\nconst DEFAULT_LABEL: Record<DisclosureKind, string> = {\n  interaction: \"You are chatting with an AI assistant\",\n  generated: \"Generated by AI\",\n  manipulated: \"This media was altered by AI\",\n  assisted: \"AI-assisted, reviewed by a person\",\n};\n\nconst disclosureVariants = cva(\n  cn(\n    \"inline-flex w-fit items-center gap-1.5 font-medium\",\n    \"[&_svg:not([class*='size-'])]:size-3.5\",\n    iconSlot,\n  ),\n  {\n    variants: {\n      variant: {\n        /** Sits beside the thing it describes. */\n        inline: \"rounded-full border border-border-strong px-2 py-0.5 text-xs\",\n        /** Above a conversation, where Article 50(1) usually belongs. */\n        banner:\n          \"w-full rounded-lg border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground\",\n        /**\n         * Over the corner of an image or video. `--overlay` is a dark scrim in\n         * every shipped theme, so the text is white on purpose rather than\n         * following the theme — a label that inverts over a photograph is\n         * unreadable on half of them.\n         */\n        overlay: \"rounded-md bg-overlay px-2 py-1 text-2xs text-white backdrop-blur-sm\",\n      },\n    },\n    defaultVariants: { variant: \"inline\" },\n  },\n);\n\nfunction SparkIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Z\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nexport interface AIDisclosureProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof disclosureVariants> {\n  kind: DisclosureKind;\n  /** Replaces the default wording. The default is a starting point, not a rule. */\n  label?: ReactNode;\n  /**\n   * Replaces the mark. The Commission publishes three icons for this and lets\n   * anyone use them without attribution — they are deliberately not bundled\n   * here, because an official mark shipped inside a component library ends up\n   * on content nobody checked. Bring your own, and the Commission's own words\n   * apply: using them \"does not establish legal compliance by itself\".\n   */\n  icon?: ReactNode;\n  /** A provenance panel, or anything else that belongs after the label. */\n  children?: ReactNode;\n}\n\n/**\n * A disclosure, in words.\n *\n * The icon is decorative and the text is the disclosure. A sparkle alone is not\n * a notice — it is a decoration that a sighted reader may or may not decode and\n * that a screen reader passes over in silence, which is the failure mode the\n * whole component exists to avoid.\n */\nexport function AIDisclosure({\n  className,\n  kind,\n  variant,\n  label,\n  icon,\n  children,\n  ...props\n}: AIDisclosureProps) {\n  return (\n    <div\n      data-slot=\"ai-disclosure\"\n      data-kind={kind}\n      className={cn(disclosureVariants({ variant }), className)}\n      {...props}\n    >\n      {icon ?? <SparkIcon />}\n      <span>{label ?? DEFAULT_LABEL[kind]}</span>\n      {children}\n    </div>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/*  Provenance                                                         */\n/* ------------------------------------------------------------------ */\n\nexport interface ProvenanceClaim {\n  label: string;\n  value: ReactNode;\n}\n\nexport interface AIDisclosureProvenanceProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"children\"\n> {\n  /**\n   * What is being claimed about this content, and by whom.\n   *\n   * Claims, not findings. They arrive as data — from a C2PA manifest your\n   * server read, from your own pipeline, from a vendor — and this renders them.\n   */\n  claims: ProvenanceClaim[];\n  /** Who asserts the claims. Named, because an unattributed claim is a rumour. */\n  source?: string;\n  /**\n   * Whether something you trust checked the claims, and said so.\n   *\n   * Supplied, never computed. Verifying a C2PA manifest means parsing signed\n   * COSE and walking a certificate chain; doing that in the browser would mean\n   * a wasm blob you cannot read, and \"you own the source\" would stop being\n   * true. It also cannot be trusted client-side even when it succeeds, because\n   * the page doing the checking is the page making the claim. Verify on a\n   * server and pass the answer down. Left undefined, this says so.\n   */\n  verified?: boolean;\n  triggerLabel?: string;\n}\n\ntype CheckStatus = \"verified\" | \"failed\" | \"unchecked\";\n\nfunction statusText(status: CheckStatus, source?: string): string {\n  const by = source ? ` by ${source}` : \"\";\n  if (status === \"verified\") return `Checked${by} and the claims matched.`;\n  if (status === \"failed\") return `Checked${by} and the claims did not match.`;\n  return \"Not checked. These are claims made about the content, not findings.\";\n}\n\n/**\n * The metadata behind a disclosure, presented as claims rather than proof.\n *\n * The distinction is the entire point. \"Made with Model X on 3 September\" looks\n * like a fact and is a string somebody put in a file. Rendering it beside a\n * checkmark would launder an assertion into evidence, so the panel names who is\n * asserting and states plainly whether anyone checked.\n */\nexport function AIDisclosureProvenance({\n  className,\n  claims,\n  source,\n  verified,\n  triggerLabel = \"Content details\",\n  ...props\n}: AIDisclosureProvenanceProps) {\n  const status = verified === undefined ? \"unchecked\" : verified ? \"verified\" : \"failed\";\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          data-slot=\"ai-disclosure-provenance-trigger\"\n          className={cn(\n            \"rounded-sm underline decoration-dotted underline-offset-2 hover:decoration-solid\",\n            focusRing,\n            className,\n          )}\n          {...props}\n        >\n          {triggerLabel}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent aria-label={triggerLabel} className=\"w-80 text-xs\">\n        <dl className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5\">\n          {claims.map((claim) => (\n            <div key={claim.label} className=\"contents\">\n              <dt className=\"text-muted-foreground\">{claim.label}</dt>\n              <dd className=\"break-words\">{claim.value}</dd>\n            </div>\n          ))}\n        </dl>\n        {/* Said in text, and last, so it qualifies everything above it rather\n            than being a tick a reader has to interpret. */}\n        <p\n          data-slot=\"ai-disclosure-provenance-status\"\n          data-status={status}\n          className={cn(\n            \"mt-3 border-t border-border pt-2\",\n            status === \"failed\" ? \"text-destructive\" : \"text-muted-foreground\",\n          )}\n        >\n          {statusText(status, source)}\n        </p>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { disclosureVariants };\n"],"mappings":";;;;;;;;;;;;;;AAyCA,MAAM,gBAAgD;CACpD,aAAa;CACb,WAAW;CACX,aAAa;CACb,UAAU;AACZ;AAEA,MAAM,qBAAqB,IACzB,GACE,sDACA,0CACA,QACF,GACA;CACE,UAAU,EACR,SAAS;;EAEP,QAAQ;;EAER,QACE;;;;;;;EAOF,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,SAAS;AACvC,CACF;AAEA,SAAS,YAAY;CACnB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAY;EAC/C,UAAA,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,gBAAe;EAChB,CAAA;CACE,CAAA;AAET;;;;;;;;;AA6BA,SAAgB,aAAa,EAC3B,WACA,MACA,SACA,OACA,MACA,UACA,GAAG,SACiB;CACpB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,mBAAmB,EAAE,QAAQ,CAAC,GAAG,SAAS;EACxD,GAAI;EAJN,UAAA;GAMG,QAAQ,oBAAC,WAAD,CAAY,CAAA;GACrB,oBAAC,QAAD,EAAA,UAAO,SAAS,cAAc,MAAY,CAAA;GACzC;EACE;;AAET;AAwCA,SAAS,WAAW,QAAqB,QAAyB;CAChE,MAAM,KAAK,SAAS,OAAO,WAAW;CACtC,IAAI,WAAW,YAAY,OAAO,UAAU,GAAG;CAC/C,IAAI,WAAW,UAAU,OAAO,UAAU,GAAG;CAC7C,OAAO;AACT;;;;;;;;;AAUA,SAAgB,uBAAuB,EACrC,WACA,QACA,QACA,UACA,eAAe,mBACf,GAAG,SAC2B;CAC9B,MAAM,SAAS,aAAa,KAAA,IAAY,cAAc,WAAW,aAAa;CAE9E,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAA;EACd,UAAA,oBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,WAAW,GACT,oFACA,WACA,SACF;GACA,GAAI;GAEH,UAAA;EACK,CAAA;CACM,CAAA,GAChB,qBAAC,gBAAD;EAAgB,cAAY;EAAc,WAAU;EAApD,UAAA,CACE,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,OAAO,KAAK,UACX,qBAAC,OAAD;IAAuB,WAAU;IAAjC,UAAA,CACE,oBAAC,MAAD;KAAI,WAAU;KAAyB,UAAA,MAAM;IAAU,CAAA,GACvD,oBAAC,MAAD;KAAI,WAAU;KAAe,UAAA,MAAM;IAAU,CAAA,CAC1C;GAHK,GAAA,MAAM,KAGX,CACN;EACC,CAAA,GAGJ,oBAAC,KAAD;GACE,aAAU;GACV,eAAa;GACb,WAAW,GACT,oCACA,WAAW,WAAW,qBAAqB,uBAC7C;GAEC,UAAA,WAAW,QAAQ,MAAM;EACzB,CAAA,CACW;CACT,CAAA,CAAA,EAAA,CAAA;AAEb"}

package/dist/components/ai-disclosure/index.d.ts

@@ -0,0 +1,2 @@
+import { AIDisclosure, AIDisclosureProps, AIDisclosureProvenance, AIDisclosureProvenanceProps, DisclosureKind, ProvenanceClaim, disclosureVariants } from "./ai-disclosure.js";
+export { AIDisclosure, type AIDisclosureProps, AIDisclosureProvenance, type AIDisclosureProvenanceProps, type DisclosureKind, type ProvenanceClaim, disclosureVariants };

package/dist/components/ai-disclosure/index.js

@@ -0,0 +1,2 @@
+import { AIDisclosure, AIDisclosureProvenance, disclosureVariants } from "./ai-disclosure.js";
+export { AIDisclosure, AIDisclosureProvenance, disclosureVariants };

package/dist/components/ai-disclosure/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ai-disclosure/meta.ts
+const meta = defineMeta({
+	name: "ai-disclosure",
+	title: "AI Disclosure",
+	description: "Tells a reader they are looking at AI, and what is actually known about it.",
+	category: "ai",
+	status: "stable",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["popover"],
+	files: ["ai-disclosure.tsx"],
+	a11y: "The text is the disclosure and the icon is decoration, marked aria-hidden — a sparkle alone is a mark a sighted reader may not decode and a screen reader passes over in silence, which is the exact failure this component exists to prevent. Each of the four kinds carries wording of its own, so the distinction between generated, manipulated and human-reviewed survives for anyone who cannot see the styling. The provenance panel states in words whether anyone checked the claims and who, rather than implying it with a tick, and its three states are told apart by their sentences rather than by colour. Scope: this renders the human-visible disclosures of EU AI Act Article 50(1) and 50(4). It cannot satisfy 50(2), which requires machine-readable marking inside the artifact by whoever generated it, and no React component can. Not legal advice."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/ai-disclosure/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-disclosure/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-disclosure\",\n  title: \"AI Disclosure\",\n  description: \"Tells a reader they are looking at AI, and what is actually known about it.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"popover\"],\n  files: [\"ai-disclosure.tsx\"],\n  a11y:\n    \"The text is the disclosure and the icon is decoration, marked aria-hidden — a sparkle alone \" +\n    \"is a mark a sighted reader may not decode and a screen reader passes over in silence, which \" +\n    \"is the exact failure this component exists to prevent. Each of the four kinds carries \" +\n    \"wording of its own, so the distinction between generated, manipulated and human-reviewed \" +\n    \"survives for anyone who cannot see the styling. The provenance panel states in words \" +\n    \"whether anyone checked the claims and who, rather than implying it with a tick, and its \" +\n    \"three states are told apart by their sentences rather than by colour. \" +\n    \"Scope: this renders the human-visible disclosures of EU AI Act Article 50(1) and 50(4). \" +\n    \"It cannot satisfy 50(2), which requires machine-readable marking inside the artifact by \" +\n    \"whoever generated it, and no React component can. Not legal advice.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,SAAS;CAChC,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAUJ,CAAC"}

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

@@ -0,0 +1,52 @@
+import { ExtractionField, FieldDecision } from "./extraction-model.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/ai-extraction-review/ai-extraction-review.d.ts
+/**
+ * The check after extraction: the document on one side, what the model read
+ * out of it on the other, and a decision about every field.
+ *
+ * Every extraction demo shows the filled object and stops. The products that
+ * run extraction for a living — invoice capture, KYC onboarding, claims intake —
+ * all have this screen, each built from scratch, because a value that cannot
+ * be checked can only be trusted, and nobody who is paying an invoice trusts a
+ * model that far. No component library ships it.
+ *
+ * The link is the component. Each field carries where in the source it was
+ * read from, quoted in text under the value as well as highlighted in the
+ * document, so a reviewer who cannot see the highlight still has the evidence.
+ * And a value with no evidence is said outright — "the model supplied this
+ * without evidence" — because that is the case a review exists to catch, and
+ * the one every filled-object view renders identically to a good value.
+ *
+ * Evidence is a text offset, not a bounding box. A language model reads text,
+ * and a text layer with offsets is what every OCR pipeline already yields.
+ * Boxes over a rendered page need page rendering, zoom and geometry, and are a
+ * different component; this one does not pretend at them.
+ *
+ * Decisions are controlled and the component writes nothing. It reports that
+ * a field was accepted as proposed, corrected from what was proposed, or
+ * rejected — a richer record than a form's submitted values, and the one an
+ * audit later needs — and leaves what to do with it to the application.
+ */
+interface ExtractionReviewProps extends Omit<ComponentPropsWithRef<"section">, "children"> {
+  /** What the model read. Every span indexes into it. */
+  source: string;
+  /** Names the source — "Invoice 4471.pdf, page 1". */
+  sourceLabel?: string;
+  /** What is being reviewed, as the heading. */
+  heading: string;
+  fields: ExtractionField[];
+  /** Per-field decisions, keyed by field name. Controlled. */
+  decisions?: Record<string, FieldDecision>;
+  /** Omit to render the review as a record rather than something to operate. */
+  onDecision?: (name: string, decision: FieldDecision) => void;
+  /** True while fields are still arriving. Missing values wait instead of reading as not found. */
+  streaming?: boolean;
+  /** Confidence below this is called low, in words. */
+  lowConfidenceBelow?: number;
+  children?: ReactNode;
+}
+declare function ExtractionReview({ className, source, sourceLabel, heading, fields, decisions, onDecision, streaming, lowConfidenceBelow, children, ...props }: ExtractionReviewProps): import("react").JSX.Element;
+//#endregion
+export { ExtractionReview, ExtractionReviewProps };
+//# sourceMappingURL=ai-extraction-review.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-extraction-review.d.ts","names":[],"sources":["../../../src/components/ai-extraction-review/ai-extraction-review.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAsDiB,8BAA8B,KAC7C;;EAIA;;EAEA;;EAEA;EACA,QAAQ;;EAER,YAAY,eAAe;;EAE3B,cAAc,cAAc,UAAU;;EAEtC;;EAEA;EACA,WAAW;;iBAGG,mBACd,WACA,QACA,aACA,SACA,QACA,WACA,YACA,WACA,oBACA,aACG,SACF,wCAAqB,IAAA"}

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: "ml-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