@dowel-ui/react 0.3.0 → 0.5.0

package/dist/components/dns-record/dns-record.js

@@ -0,0 +1,227 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Spinner } from "../spinner/spinner.js";
+import { Button } from "../button/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/components/dns-record/dns-record.tsx
+/**
+* The host both ways a provider might want it. Accepts either form and a
+* trailing dot, so the record can be declared however the backend has it.
+*/
+function dnsHostForms(name, zone) {
+	const cleanZone = zone.replace(/\.$/, "");
+	const cleanName = name.replace(/\.$/, "");
+	if (cleanName === "@" || cleanName === "" || cleanName === cleanZone) return {
+		relative: "@",
+		full: cleanZone
+	};
+	if (cleanName.endsWith(`.${cleanZone}`)) return {
+		relative: cleanName.slice(0, -cleanZone.length - 1),
+		full: cleanName
+	};
+	return {
+		relative: cleanName,
+		full: `${cleanName}.${cleanZone}`
+	};
+}
+function DnsRecord({ className, type, name, value, zone, ttl, priority, purpose, status = "pending", found, checkedAt, locale, onCheck, children, ...props }) {
+	const id = useId();
+	const forms = zone ? dnsHostForms(name, zone) : null;
+	const host = forms ? forms.relative : name;
+	const [copy, setCopy] = useState(null);
+	const timer = useRef(null);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const copyPart = (part, text) => {
+		const settle = (state) => {
+			setCopy({
+				part,
+				state
+			});
+			if (timer.current) clearTimeout(timer.current);
+			timer.current = setTimeout(() => {
+				setCopy(null);
+			}, 2e3);
+		};
+		Promise.resolve().then(() => navigator.clipboard.writeText(text)).then(() => {
+			settle("copied");
+		}, () => {
+			settle("error");
+		});
+	};
+	const statusText = status === "verified" ? "Verified" : status === "checking" ? "Checking…" : status === "failed" ? found && found.length > 0 ? "Not verified. Something else was found." : "Not verified. Nothing found yet — DNS changes can take up to 48 hours to appear." : "Not checked yet";
+	const checked = checkedAt !== void 0 ? new Intl.DateTimeFormat(locale, {
+		dateStyle: "medium",
+		timeStyle: "short"
+	}).format(checkedAt) : null;
+	const parts = [
+		{
+			key: "type",
+			label: "Type",
+			text: type
+		},
+		{
+			key: "name",
+			label: "Name",
+			text: host,
+			note: forms ? forms.relative === "@" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Some providers want ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: forms.full
+				}),
+				" or leave it blank instead of ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: "@"
+				}),
+				"."
+			] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Some providers want the full name, ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: forms.full
+				}),
+				". If the field already ends in ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: zone
+				}),
+				", enter just the part shown."
+			] }) : void 0
+		},
+		{
+			key: "value",
+			label: "Value",
+			text: value,
+			note: type.toUpperCase() === "TXT" ? "Enter without quotes; your provider adds them if it needs to." : void 0
+		},
+		...priority !== void 0 ? [{
+			key: "priority",
+			label: "Priority",
+			text: String(priority)
+		}] : [],
+		...ttl !== void 0 ? [{
+			key: "ttl",
+			label: "TTL",
+			text: String(ttl)
+		}] : []
+	];
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "dns-record",
+		"data-status": status,
+		"aria-labelledby": `${id}-heading`,
+		"aria-busy": status === "checking" || void 0,
+		className: cn("flex flex-col gap-3 rounded-lg border border-border bg-card p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-baseline justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("h3", {
+					id: `${id}-heading`,
+					className: "text-sm font-medium",
+					children: [
+						type,
+						" record",
+						purpose ? /* @__PURE__ */ jsxs("span", {
+							className: "font-normal text-muted-foreground",
+							children: [" · ", purpose]
+						}) : null
+					]
+				}), /* @__PURE__ */ jsxs("p", {
+					"data-slot": "dns-record-status",
+					role: "status",
+					"aria-live": "polite",
+					className: cn("flex items-center gap-1.5 text-xs", status === "verified" && "text-success", status === "failed" && "text-destructive", (status === "pending" || status === "checking") && "text-muted-foreground"),
+					children: [
+						status === "checking" ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null,
+						statusText,
+						checked && status !== "checking" ? /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [" · checked ", checked]
+						}) : null
+					]
+				})]
+			}),
+			children,
+			/* @__PURE__ */ jsx("dl", {
+				className: "m-0 grid gap-x-4 gap-y-2 sm:grid-cols-[auto_1fr]",
+				children: parts.map((part) => /* @__PURE__ */ jsxs("div", {
+					className: "contents",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-xs font-medium text-muted-foreground sm:pt-1.5",
+						children: part.label
+					}), /* @__PURE__ */ jsxs("dd", {
+						className: "m-0 flex flex-col gap-1",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx("code", {
+									"data-slot": "dns-record-part",
+									"data-part": part.key,
+									className: "min-w-0 flex-1 rounded-md bg-muted px-2 py-1 font-mono text-xs break-all",
+									children: part.text
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": `Copy ${part.label.toLowerCase()}`,
+									"data-state": copy?.part === part.key ? copy.state : "idle",
+									className: cn("shrink-0 rounded-md border border-input bg-background px-2 py-1 text-xs font-medium", "hover:bg-accent hover:text-accent-foreground", focusRing),
+									onClick: () => {
+										copyPart(part.key, part.text);
+									},
+									children: copy?.part === part.key && copy.state === "copied" ? "Copied" : "Copy"
+								})]
+							}),
+							copy?.part === part.key && copy.state === "error" ? /* @__PURE__ */ jsx("p", {
+								"data-slot": "dns-record-copy-error",
+								className: "text-xs text-destructive",
+								children: "Could not copy. Select it and copy by hand."
+							}) : null,
+							part.note ? /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-muted-foreground",
+								children: part.note
+							}) : null
+						]
+					})]
+				}, part.key))
+			}),
+			status === "failed" && found && found.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "dns-record-found",
+				className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-xs",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "font-medium text-destructive",
+					children: "Found instead:"
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "m-0 mt-1 list-none p-0",
+					children: found.map((entry) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", {
+						className: "font-mono break-all",
+						children: entry
+					}) }, entry))
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: copy?.state === "copied" ? `Copied ${copy.part}` : copy?.state === "error" ? `Could not copy ${copy.part}. Select it and copy by hand.` : ""
+			}),
+			onCheck ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					loading: status === "checking",
+					onClick: onCheck,
+					children: status === "verified" ? "Check again" : "Check now"
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { DnsRecord, dnsHostForms };
+
+//# sourceMappingURL=dns-record.js.map

package/dist/components/dns-record/dns-record.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dns-record.js","names":[],"sources":["../../../src/components/dns-record/dns-record.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { Spinner } from \"@/components/spinner\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * \"Add this record at your DNS provider.\"\n *\n * Vercel, Resend, Cloudflare, Postmark, Google Workspace and every product\n * that verifies a domain or routes its mail draws this card by hand, and\n * they all learn the same three things the hard way.\n *\n * The parts are copied separately. A provider's form has a Name field, a\n * Type field and a Value field, so one button that copies the whole line\n * copies something nobody can paste anywhere.\n *\n * The Name field is a trap. Some providers want the host relative to the\n * zone, `_dmarc`; some want the full name, `_dmarc.acme.com`; and some take\n * the relative form and append the zone themselves, so a full name pasted\n * in becomes `_dmarc.acme.com.acme.com` and the check fails for a reason\n * nobody can see. So the host is shown both ways, with the sentence that\n * explains which to use.\n *\n * A failed check says what was found. \"Not verified\" sends people back to\n * their provider to stare at a record that is correct and has not\n * propagated yet; \"found v=spf1 -all, expected v=spf1 include:…\" sends them\n * to the typo. And nothing found at all is said as nothing found, with how\n * long that can take, because it is not the same as wrong.\n */\n\nexport type DnsRecordStatus = \"pending\" | \"checking\" | \"verified\" | \"failed\";\n\nexport interface DnsHostForms {\n  /** Relative to the zone: `_dmarc`, or `@` for the zone itself. */\n  relative: string;\n  /** Fully qualified: `_dmarc.acme.com`. */\n  full: string;\n}\n\n/**\n * The host both ways a provider might want it. Accepts either form and a\n * trailing dot, so the record can be declared however the backend has it.\n */\nexport function dnsHostForms(name: string, zone: string): DnsHostForms {\n  const cleanZone = zone.replace(/\\.$/, \"\");\n  const cleanName = name.replace(/\\.$/, \"\");\n  if (cleanName === \"@\" || cleanName === \"\" || cleanName === cleanZone) {\n    return { relative: \"@\", full: cleanZone };\n  }\n  if (cleanName.endsWith(`.${cleanZone}`)) {\n    return { relative: cleanName.slice(0, -cleanZone.length - 1), full: cleanName };\n  }\n  return { relative: cleanName, full: `${cleanName}.${cleanZone}` };\n}\n\nexport interface DnsRecordProps extends Omit<ComponentPropsWithRef<\"section\">, \"children\"> {\n  type: string;\n  /** The host, relative or fully qualified. */\n  name: string;\n  value: string;\n  /** The zone the record belongs to. Enables the host to be shown both ways. */\n  zone?: string;\n  ttl?: number | string;\n  priority?: number;\n  /** What the record is for, in the reader's language: \"Proves you own acme.com\". */\n  purpose?: string;\n  status?: DnsRecordStatus;\n  /** What the check found instead, when it failed. The useful part. */\n  found?: string[];\n  checkedAt?: Date;\n  locale?: string;\n  onCheck?: () => void;\n  children?: ReactNode;\n}\n\ntype CopyState = \"idle\" | \"copied\" | \"error\";\n\nexport function DnsRecord({\n  className,\n  type,\n  name,\n  value,\n  zone,\n  ttl,\n  priority,\n  purpose,\n  status = \"pending\",\n  found,\n  checkedAt,\n  locale,\n  onCheck,\n  children,\n  ...props\n}: DnsRecordProps) {\n  const id = useId();\n  const forms = zone ? dnsHostForms(name, zone) : null;\n  const host = forms ? forms.relative : name;\n\n  // Which part was copied, and whether it worked, so the button that was\n  // pressed is the one that says so.\n  const [copy, setCopy] = useState<{ part: string; state: CopyState } | null>(null);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const copyPart = (part: string, text: string) => {\n    const settle = (state: CopyState) => {\n      setCopy({ part, state });\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setCopy(null);\n      }, 2000);\n    };\n    Promise.resolve()\n      .then(() => navigator.clipboard.writeText(text))\n      .then(\n        () => {\n          settle(\"copied\");\n        },\n        () => {\n          settle(\"error\");\n        },\n      );\n  };\n\n  const statusText =\n    status === \"verified\"\n      ? \"Verified\"\n      : status === \"checking\"\n        ? \"Checking…\"\n        : status === \"failed\"\n          ? found && found.length > 0\n            ? \"Not verified. Something else was found.\"\n            : \"Not verified. Nothing found yet — DNS changes can take up to 48 hours to appear.\"\n          : \"Not checked yet\";\n\n  const checked =\n    checkedAt !== undefined\n      ? new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeStyle: \"short\" }).format(\n          checkedAt,\n        )\n      : null;\n\n  const parts: { key: string; label: string; text: string; note?: ReactNode }[] = [\n    { key: \"type\", label: \"Type\", text: type },\n    {\n      key: \"name\",\n      label: \"Name\",\n      text: host,\n      note: forms ? (\n        forms.relative === \"@\" ? (\n          <>\n            Some providers want <code className=\"font-mono\">{forms.full}</code> or leave it\n            blank instead of <code className=\"font-mono\">@</code>.\n          </>\n        ) : (\n          <>\n            Some providers want the full name, <code className=\"font-mono\">{forms.full}</code>.\n            If the field already ends in <code className=\"font-mono\">{zone}</code>, enter just\n            the part shown.\n          </>\n        )\n      ) : undefined,\n    },\n    {\n      key: \"value\",\n      label: \"Value\",\n      text: value,\n      note:\n        type.toUpperCase() === \"TXT\"\n          ? \"Enter without quotes; your provider adds them if it needs to.\"\n          : undefined,\n    },\n    ...(priority !== undefined\n      ? [{ key: \"priority\", label: \"Priority\", text: String(priority) }]\n      : []),\n    ...(ttl !== undefined ? [{ key: \"ttl\", label: \"TTL\", text: String(ttl) }] : []),\n  ];\n\n  return (\n    <section\n      data-slot=\"dns-record\"\n      data-status={status}\n      aria-labelledby={`${id}-heading`}\n      aria-busy={status === \"checking\" || undefined}\n      className={cn(\n        \"flex flex-col gap-3 rounded-lg border border-border bg-card p-4\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <h3 id={`${id}-heading`} className=\"text-sm font-medium\">\n          {type} record\n          {purpose ? (\n            <span className=\"font-normal text-muted-foreground\"> · {purpose}</span>\n          ) : null}\n        </h3>\n        {/* Status as a word, and announced when it changes: a check was asked\n            for, and the answer should arrive where the asker is. */}\n        <p\n          data-slot=\"dns-record-status\"\n          role=\"status\"\n          aria-live=\"polite\"\n          className={cn(\n            \"flex items-center gap-1.5 text-xs\",\n            status === \"verified\" && \"text-success\",\n            status === \"failed\" && \"text-destructive\",\n            (status === \"pending\" || status === \"checking\") && \"text-muted-foreground\",\n          )}\n        >\n          {status === \"checking\" ? <Spinner size=\"sm\" /> : null}\n          {statusText}\n          {checked && status !== \"checking\" ? (\n            <span className=\"text-muted-foreground\"> · checked {checked}</span>\n          ) : null}\n        </p>\n      </div>\n\n      {children}\n\n      <dl className=\"m-0 grid gap-x-4 gap-y-2 sm:grid-cols-[auto_1fr]\">\n        {parts.map((part) => (\n          <div key={part.key} className=\"contents\">\n            <dt className=\"text-xs font-medium text-muted-foreground sm:pt-1.5\">\n              {part.label}\n            </dt>\n            <dd className=\"m-0 flex flex-col gap-1\">\n              <div className=\"flex items-start gap-2\">\n                <code\n                  data-slot=\"dns-record-part\"\n                  data-part={part.key}\n                  className=\"min-w-0 flex-1 rounded-md bg-muted px-2 py-1 font-mono text-xs break-all\"\n                >\n                  {part.text}\n                </code>\n                <button\n                  type=\"button\"\n                  aria-label={`Copy ${part.label.toLowerCase()}`}\n                  data-state={copy?.part === part.key ? copy.state : \"idle\"}\n                  className={cn(\n                    \"shrink-0 rounded-md border border-input bg-background px-2 py-1 text-xs font-medium\",\n                    \"hover:bg-accent hover:text-accent-foreground\",\n                    focusRing,\n                  )}\n                  onClick={() => {\n                    copyPart(part.key, part.text);\n                  }}\n                >\n                  {copy?.part === part.key && copy.state === \"copied\" ? \"Copied\" : \"Copy\"}\n                </button>\n              </div>\n              {copy?.part === part.key && copy.state === \"error\" ? (\n                <p data-slot=\"dns-record-copy-error\" className=\"text-xs text-destructive\">\n                  Could not copy. Select it and copy by hand.\n                </p>\n              ) : null}\n              {part.note ? <p className=\"text-xs text-muted-foreground\">{part.note}</p> : null}\n            </dd>\n          </div>\n        ))}\n      </dl>\n\n      {status === \"failed\" && found && found.length > 0 ? (\n        <div\n          data-slot=\"dns-record-found\"\n          className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-xs\"\n        >\n          <p className=\"font-medium text-destructive\">Found instead:</p>\n          <ul className=\"m-0 mt-1 list-none p-0\">\n            {found.map((entry) => (\n              <li key={entry}>\n                <code className=\"font-mono break-all\">{entry}</code>\n              </li>\n            ))}\n          </ul>\n        </div>\n      ) : null}\n\n      {/* A separate region from the verification status, so \"Copied name\"\n          never replaces or interrupts a check result that is being read.\n          Present from the start, so the first copy is heard. */}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {copy?.state === \"copied\"\n          ? `Copied ${copy.part}`\n          : copy?.state === \"error\"\n            ? `Could not copy ${copy.part}. Select it and copy by hand.`\n            : \"\"}\n      </span>\n\n      {onCheck ? (\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"sm\" loading={status === \"checking\"} onClick={onCheck}>\n            {status === \"verified\" ? \"Check again\" : \"Check now\"}\n          </Button>\n        </div>\n      ) : null}\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/components/dns-record/index.d.ts

@@ -0,0 +1,2 @@
+import { DnsHostForms, DnsRecord, DnsRecordProps, DnsRecordStatus, dnsHostForms } from "./dns-record.js";
+export { type DnsHostForms, DnsRecord, type DnsRecordProps, type DnsRecordStatus, dnsHostForms };

package/dist/components/dns-record/index.js

@@ -0,0 +1,2 @@
+import { DnsRecord, dnsHostForms } from "./dns-record.js";
+export { DnsRecord, dnsHostForms };

package/dist/components/dns-record/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dns-record/meta.ts
+const meta = defineMeta({
+	name: "dns-record",
+	title: "DNS Record",
+	description: "Add this record at your provider: parts copied separately, checked with what was found.",
+	category: "data",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: ["button", "spinner"],
+	files: ["dns-record.tsx"],
+	a11y: "The card is a region named by the record's type and purpose. Each part is a definition with its own copy button, named by the part it copies, so five Copy buttons are five different buttons. Verification status is a word in a polite live region, so the answer to a check arrives where it was asked for, and the card is aria-busy while checking. Copy results are announced in a separate region, present from the start, so a copy never replaces a check result mid-sentence; failure is announced with what to do instead. What the check found is a list, not a colour."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dns-record/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dns-record/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dns-record\",\n  title: \"DNS Record\",\n  description:\n    \"Add this record at your provider: parts copied separately, checked with what was found.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"button\", \"spinner\"],\n  files: [\"dns-record.tsx\"],\n  a11y:\n    \"The card is a region named by the record's type and purpose. Each part is a definition \" +\n    \"with its own copy button, named by the part it copies, so five Copy buttons are five \" +\n    \"different buttons. Verification status is a word in a polite live region, so the answer to \" +\n    \"a check arrives where it was asked for, and the card is aria-busy while checking. Copy \" +\n    \"results are announced in a separate region, present from the start, so a copy never \" +\n    \"replaces a check result mid-sentence; failure is announced with what to do instead. What \" +\n    \"the check found is a list, not a colour.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,UAAU,SAAS;CAC1C,OAAO,CAAC,gBAAgB;CACxB,MACE;AAOJ,CAAC"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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