@dowel-ui/react 0.2.0 → 0.4.0

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"}

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

@@ -0,0 +1,284 @@
+"use client";
+import { disabledStyles, focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { LOG_LEVELS, segment } from "./log-stream.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/log-viewer/log-viewer.tsx
+/**
+* A streaming console: filter, follow, expand.
+*
+* The incumbent is react-lazylog, which was last published in 2022, is built on
+* react-virtualized, and cannot run on React 19 — while still taking about
+* 15,000 downloads a week. This is for those people.
+*
+* Two accessibility decisions worth stating rather than discovering.
+*
+* `role="log"` implies `aria-live="polite"`, which is right for a handful of
+* events and catastrophic for a console: a screen reader would read every line
+* of a build as it scrolls past, and nothing else would be audible. Announcing
+* is therefore off by default and opt-in through `announce`. The role stays,
+* because it still describes what the region is.
+*
+* And virtualization means most rows are not in the DOM. That is a real trade,
+* not an implementation detail: assistive technology cannot reach what is not
+* rendered, so a reader who needs the whole log needs an escape — which is what
+* `onDownload` is for. A log viewer with no way out of the virtual window is
+* not accessible however good its ARIA is.
+*/
+const LEVEL_STYLES = {
+	trace: "text-muted-foreground",
+	debug: "text-muted-foreground",
+	info: "text-foreground",
+	warn: "text-warning",
+	error: "text-destructive",
+	fatal: "text-destructive font-semibold"
+};
+/** Distance from the bottom, in pixels, that still counts as "at the end". */
+const FOLLOW_THRESHOLD = 24;
+function LogViewer({ className, lines, label, rowHeight = 22, height = 360, announce = false, onDownload, children, ...props }) {
+	const scrollRef = useRef(null);
+	const [following, setFollowing] = useState(true);
+	const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+	const labelId = useId();
+	const virtualizer = useVirtualizer({
+		count: lines.length,
+		getScrollElement: () => scrollRef.current,
+		estimateSize: () => rowHeight,
+		overscan: 12,
+		initialRect: {
+			width: 0,
+			height: typeof height === "number" ? height : 360
+		}
+	});
+	useEffect(() => {
+		if (!following || lines.length === 0) return;
+		virtualizer.scrollToIndex(lines.length - 1, { align: "end" });
+	}, [
+		following,
+		lines.length,
+		virtualizer
+	]);
+	function handleScroll() {
+		const element = scrollRef.current;
+		if (!element) return;
+		const distance = element.scrollHeight - element.scrollTop - element.clientHeight;
+		setFollowing(distance <= FOLLOW_THRESHOLD);
+	}
+	function toggleExpanded(id) {
+		setExpanded((current) => {
+			const next = new Set(current);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}
+	const items = virtualizer.getVirtualItems();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "log-viewer",
+		className: cn("flex flex-col gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: labelId,
+					className: "text-sm font-medium",
+					children: label
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [!following ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-slot": "log-viewer-jump",
+						onClick: () => {
+							setFollowing(true);
+						},
+						className: cn("rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium", "transition-colors hover:bg-accent hover:text-accent-foreground", focusRing),
+						children: "Jump to latest"
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: "Following"
+					}), onDownload ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-slot": "log-viewer-download",
+						onClick: onDownload,
+						className: cn("rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium", "transition-colors hover:bg-accent hover:text-accent-foreground", focusRing),
+						children: "Download full log"
+					}) : null]
+				})]
+			}),
+			children,
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollRef,
+				onScroll: handleScroll,
+				role: "log",
+				"aria-labelledby": labelId,
+				"aria-live": announce ? "polite" : "off",
+				tabIndex: 0,
+				style: { height },
+				className: cn("overflow-auto rounded-lg border border-border bg-muted/30 font-mono text-xs", focusRing),
+				children: lines.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "p-3 text-muted-foreground",
+					children: "No lines match the current filter."
+				}) : /* @__PURE__ */ jsx("div", {
+					style: {
+						height: virtualizer.getTotalSize(),
+						position: "relative"
+					},
+					children: items.map((item) => {
+						const line = lines[item.index];
+						if (!line) return null;
+						return /* @__PURE__ */ jsx("div", {
+							ref: virtualizer.measureElement,
+							"data-index": item.index,
+							"data-slot": "log-viewer-row",
+							"data-level": line.level,
+							className: "absolute top-0 left-0 w-full",
+							style: { transform: `translateY(${String(item.start)}px)` },
+							children: /* @__PURE__ */ jsx(LogViewerRow, {
+								line,
+								expanded: expanded.has(line.id),
+								onToggle: () => {
+									toggleExpanded(line.id);
+								}
+							})
+						}, line.id);
+					})
+				})
+			})
+		]
+	});
+}
+/**
+* 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.
+*/
+function LogViewerRow({ line, expanded = false, onToggle }) {
+	const hasFields = line.fields !== void 0 && Object.keys(line.fields).length > 0;
+	const parts = segment(line.message, line.matches);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "px-3 py-0.5 hover:bg-accent/40",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline gap-2",
+			children: [
+				line.timestamp ? /* @__PURE__ */ jsx("time", {
+					className: "shrink-0 text-muted-foreground tabular-nums",
+					children: line.timestamp
+				}) : null,
+				line.level ? /* @__PURE__ */ jsx("span", {
+					className: cn("w-11 shrink-0 uppercase", LEVEL_STYLES[line.level]),
+					children: line.level
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: cn("min-w-0 flex-1 break-all whitespace-pre-wrap", line.level && LEVEL_STYLES[line.level]),
+					children: parts.map((part, index) => part.match ? /* @__PURE__ */ jsx("mark", {
+						className: "rounded-[2px] bg-warning/35 text-inherit",
+						children: part.text
+					}, index) : /* @__PURE__ */ jsx("span", { children: part.text }, index))
+				}),
+				hasFields ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-slot": "log-viewer-expand",
+					"aria-expanded": expanded,
+					onClick: onToggle,
+					className: cn("shrink-0 rounded px-1 text-2xs text-muted-foreground", "transition-colors hover:text-foreground", focusRing, disabledStyles),
+					children: expanded ? "Hide fields" : "Fields"
+				}) : null
+			]
+		}), expanded && line.fields ? /* @__PURE__ */ jsx("dl", {
+			"data-slot": "log-viewer-fields",
+			className: "mt-1 mb-1 ml-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-l border-border pl-3",
+			children: Object.entries(line.fields).map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+				className: "contents",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: "text-muted-foreground",
+					children: key
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "m-0 break-all",
+					children: typeof value === "string" ? value : JSON.stringify(value)
+				})]
+			}, key))
+		}) : null]
+	});
+}
+function LogViewerToolbar({ className, query, onQueryChange, regex, onRegexChange, levels, onToggleLevel, counts, invalidPattern = false, showing, total, ...props }) {
+	const filterId = useId();
+	const errorId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "log-viewer-toolbar",
+		className: cn("flex flex-wrap items-center gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: filterId,
+						className: "sr-only",
+						children: "Filter log"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id: filterId,
+						type: "search",
+						value: query,
+						placeholder: regex ? "Pattern…" : "Filter…",
+						"aria-invalid": invalidPattern || void 0,
+						"aria-describedby": invalidPattern ? errorId : void 0,
+						onChange: (event) => {
+							onQueryChange(event.target.value);
+						},
+						className: cn("min-w-32 flex-1 rounded-md border border-input bg-background px-2 py-1 text-sm", invalidPattern && "border-destructive", focusRing)
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex shrink-0 items-center gap-1 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							checked: regex,
+							onChange: (event) => {
+								onRegexChange(event.target.checked);
+							},
+							className: cn("size-3.5 rounded border-input", focusRing)
+						}), "Regex"]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-1",
+				children: LOG_LEVELS.filter((level) => counts.has(level)).map((level) => {
+					const on = levels.size === 0 || levels.has(level);
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"data-slot": "log-viewer-facet",
+						"aria-pressed": on,
+						onClick: () => {
+							onToggleLevel(level);
+						},
+						className: cn("rounded-md border px-1.5 py-0.5 font-mono text-2xs uppercase transition-colors", on ? "border-transparent bg-secondary text-secondary-foreground" : "border-input bg-background text-muted-foreground line-through", focusRing),
+						children: [
+							level,
+							" ",
+							counts.get(level) ?? 0
+						]
+					}, level);
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "w-full text-xs text-muted-foreground tabular-nums",
+				children: invalidPattern ? /* @__PURE__ */ jsx("span", {
+					id: errorId,
+					className: "text-destructive",
+					children: "Incomplete pattern — showing everything until it is valid"
+				}) : `${String(showing)} of ${String(total)} lines`
+			})
+		]
+	});
+}
+//#endregion
+export { LogViewer, LogViewerRow, LogViewerToolbar };
+
+//# sourceMappingURL=log-viewer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"log-viewer.js","names":[],"sources":["../../../src/components/log-viewer/log-viewer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { LOG_LEVELS, segment, type LogLevel, type VisibleLine } from \"./log-stream\";\n\n/**\n * A streaming console: filter, follow, expand.\n *\n * The incumbent is react-lazylog, which was last published in 2022, is built on\n * react-virtualized, and cannot run on React 19 — while still taking about\n * 15,000 downloads a week. This is for those people.\n *\n * Two accessibility decisions worth stating rather than discovering.\n *\n * `role=\"log\"` implies `aria-live=\"polite\"`, which is right for a handful of\n * events and catastrophic for a console: a screen reader would read every line\n * of a build as it scrolls past, and nothing else would be audible. Announcing\n * is therefore off by default and opt-in through `announce`. The role stays,\n * because it still describes what the region is.\n *\n * And virtualization means most rows are not in the DOM. That is a real trade,\n * not an implementation detail: assistive technology cannot reach what is not\n * rendered, so a reader who needs the whole log needs an escape — which is what\n * `onDownload` is for. A log viewer with no way out of the virtual window is\n * not accessible however good its ARIA is.\n */\n\nconst LEVEL_STYLES: Record<LogLevel, string> = {\n  trace: \"text-muted-foreground\",\n  debug: \"text-muted-foreground\",\n  info: \"text-foreground\",\n  warn: \"text-warning\",\n  error: \"text-destructive\",\n  fatal: \"text-destructive font-semibold\",\n};\n\n/** Distance from the bottom, in pixels, that still counts as \"at the end\". */\nconst FOLLOW_THRESHOLD = 24;\n\nexport interface LogViewerProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  lines: VisibleLine[];\n  /** Names the region. */\n  label: string;\n  /** Row height in pixels. Rows are one line; expansion is measured. */\n  rowHeight?: number;\n  height?: number | string;\n  /**\n   * Read new lines aloud. Off by default — a console that announces every line\n   * makes a screen reader useless for anything else.\n   */\n  announce?: boolean;\n  /** The way out of the virtual window, for anyone who needs the whole log. */\n  onDownload?: () => void;\n  children?: ReactNode;\n}\n\nexport function LogViewer({\n  className,\n  lines,\n  label,\n  rowHeight = 22,\n  height = 360,\n  announce = false,\n  onDownload,\n  children,\n  ...props\n}: LogViewerProps) {\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const [following, setFollowing] = useState(true);\n  const [expanded, setExpanded] = useState<Set<string>>(new Set());\n  const labelId = useId();\n\n  const virtualizer = useVirtualizer({\n    count: lines.length,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => rowHeight,\n    overscan: 12,\n    // Without a starting rect the virtualizer renders nothing until a\n    // ResizeObserver fires, so the first paint is an empty box. Seeding it from\n    // the declared height means rows are there immediately, and it is measured\n    // properly a moment later.\n    initialRect: { width: 0, height: typeof height === \"number\" ? height : 360 },\n  });\n\n  // Follow mode, hand-written rather than delegated. A spring-anchoring library\n  // wants to own the scroll container and so does the virtualizer, and the two\n  // fight; this is scrollToIndex on append plus a proximity check.\n  useEffect(() => {\n    if (!following || lines.length === 0) return;\n    virtualizer.scrollToIndex(lines.length - 1, { align: \"end\" });\n  }, [following, lines.length, virtualizer]);\n\n  function handleScroll() {\n    const element = scrollRef.current;\n    if (!element) return;\n\n    const distance = element.scrollHeight - element.scrollTop - element.clientHeight;\n    // Scrolling up detaches, because the reader is looking at something and\n    // yanking them back to the tail would lose it. Returning to the bottom\n    // re-attaches, which is the gesture people already expect.\n    setFollowing(distance <= FOLLOW_THRESHOLD);\n  }\n\n  function toggleExpanded(id: string) {\n    setExpanded((current) => {\n      const next = new Set(current);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n  }\n\n  const items = virtualizer.getVirtualItems();\n\n  return (\n    <div data-slot=\"log-viewer\" className={cn(\"flex flex-col gap-2\", className)} {...props}>\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <span id={labelId} className=\"text-sm font-medium\">\n          {label}\n        </span>\n        <div className=\"flex items-center gap-2\">\n          {!following ? (\n            <button\n              type=\"button\"\n              data-slot=\"log-viewer-jump\"\n              onClick={() => {\n                setFollowing(true);\n              }}\n              className={cn(\n                \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n                \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n                focusRing,\n              )}\n            >\n              Jump to latest\n            </button>\n          ) : (\n            <span className=\"text-xs text-muted-foreground\">Following</span>\n          )}\n          {onDownload ? (\n            <button\n              type=\"button\"\n              data-slot=\"log-viewer-download\"\n              onClick={onDownload}\n              className={cn(\n                \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n                \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n                focusRing,\n              )}\n            >\n              Download full log\n            </button>\n          ) : null}\n        </div>\n      </div>\n\n      {children}\n\n      <div\n        ref={scrollRef}\n        onScroll={handleScroll}\n        role=\"log\"\n        aria-labelledby={labelId}\n        // Explicitly off unless asked for: role=\"log\" implies polite, and a\n        // console that reads every line aloud drowns out everything else.\n        aria-live={announce ? \"polite\" : \"off\"}\n        // A scrollable region must be focusable, or its content is unreachable\n        // without a pointer — WCAG 2.1.1, and axe's scrollable-region-focusable\n        // requires exactly this. jsx-a11y's heuristic cannot see that this\n        // element scrolls, so here the requirement outranks the rule.\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        style={{ height }}\n        className={cn(\n          \"overflow-auto rounded-lg border border-border bg-muted/30 font-mono text-xs\",\n          focusRing,\n        )}\n      >\n        {lines.length === 0 ? (\n          <p className=\"p-3 text-muted-foreground\">No lines match the current filter.</p>\n        ) : (\n          <div style={{ height: virtualizer.getTotalSize(), position: \"relative\" }}>\n            {items.map((item) => {\n              const line = lines[item.index];\n              if (!line) return null;\n\n              return (\n                <div\n                  key={line.id}\n                  ref={virtualizer.measureElement}\n                  data-index={item.index}\n                  data-slot=\"log-viewer-row\"\n                  data-level={line.level}\n                  className=\"absolute top-0 left-0 w-full\"\n                  style={{ transform: `translateY(${String(item.start)}px)` }}\n                >\n                  <LogViewerRow\n                    line={line}\n                    expanded={expanded.has(line.id)}\n                    onToggle={() => {\n                      toggleExpanded(line.id);\n                    }}\n                  />\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport interface LogViewerRowProps {\n  line: VisibleLine;\n  expanded?: boolean;\n  onToggle?: () => void;\n}\n\n/**\n * One line.\n *\n * Exported because the virtualized container cannot be measured outside a real\n * browser — jsdom reports every box as zero — so the row's behaviour would\n * otherwise be untestable. It is also genuinely useful on its own for anyone\n * rendering a short log without virtualization.\n */\nexport function LogViewerRow({ line, expanded = false, onToggle }: LogViewerRowProps) {\n  const hasFields = line.fields !== undefined && Object.keys(line.fields).length > 0;\n  const parts = segment(line.message, line.matches);\n\n  return (\n    <div className=\"px-3 py-0.5 hover:bg-accent/40\">\n      <div className=\"flex items-baseline gap-2\">\n        {line.timestamp ? (\n          <time className=\"shrink-0 text-muted-foreground tabular-nums\">{line.timestamp}</time>\n        ) : null}\n\n        {line.level ? (\n          // The level in text, not a coloured bar. Colour alone cannot\n          // distinguish warn from error for everyone reading.\n          <span className={cn(\"w-11 shrink-0 uppercase\", LEVEL_STYLES[line.level])}>\n            {line.level}\n          </span>\n        ) : null}\n\n        <span\n          className={cn(\n            \"min-w-0 flex-1 break-all whitespace-pre-wrap\",\n            line.level && LEVEL_STYLES[line.level],\n          )}\n        >\n          {parts.map((part, index) =>\n            part.match ? (\n              // A mark element, so the match is conveyed structurally rather\n              // than only as a background colour.\n              <mark key={index} className=\"rounded-[2px] bg-warning/35 text-inherit\">\n                {part.text}\n              </mark>\n            ) : (\n              <span key={index}>{part.text}</span>\n            ),\n          )}\n        </span>\n\n        {hasFields ? (\n          <button\n            type=\"button\"\n            data-slot=\"log-viewer-expand\"\n            aria-expanded={expanded}\n            onClick={onToggle}\n            className={cn(\n              \"shrink-0 rounded px-1 text-2xs text-muted-foreground\",\n              \"transition-colors hover:text-foreground\",\n              focusRing,\n              disabledStyles,\n            )}\n          >\n            {expanded ? \"Hide fields\" : \"Fields\"}\n          </button>\n        ) : null}\n      </div>\n\n      {expanded && line.fields ? (\n        <dl\n          data-slot=\"log-viewer-fields\"\n          className=\"mt-1 mb-1 ml-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-l border-border pl-3\"\n        >\n          {Object.entries(line.fields).map(([key, value]) => (\n            <div key={key} className=\"contents\">\n              <dt className=\"text-muted-foreground\">{key}</dt>\n              <dd className=\"m-0 break-all\">\n                {typeof value === \"string\" ? value : JSON.stringify(value)}\n              </dd>\n            </div>\n          ))}\n        </dl>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface LogViewerToolbarProps extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> {\n  query: string;\n  onQueryChange: (query: string) => void;\n  regex: boolean;\n  onRegexChange: (regex: boolean) => void;\n  levels: Set<LogLevel>;\n  onToggleLevel: (level: LogLevel) => void;\n  counts: Map<LogLevel, number>;\n  invalidPattern?: boolean;\n  /** Shown as \"N of M lines\". */\n  showing: number;\n  total: number;\n}\n\nexport function LogViewerToolbar({\n  className,\n  query,\n  onQueryChange,\n  regex,\n  onRegexChange,\n  levels,\n  onToggleLevel,\n  counts,\n  invalidPattern = false,\n  showing,\n  total,\n  ...props\n}: LogViewerToolbarProps) {\n  const filterId = useId();\n  const errorId = useId();\n\n  return (\n    <div\n      data-slot=\"log-viewer-toolbar\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n        <label htmlFor={filterId} className=\"sr-only\">\n          Filter log\n        </label>\n        <input\n          id={filterId}\n          type=\"search\"\n          value={query}\n          placeholder={regex ? \"Pattern…\" : \"Filter…\"}\n          aria-invalid={invalidPattern || undefined}\n          aria-describedby={invalidPattern ? errorId : undefined}\n          onChange={(event) => {\n            onQueryChange(event.target.value);\n          }}\n          className={cn(\n            \"min-w-32 flex-1 rounded-md border border-input bg-background px-2 py-1 text-sm\",\n            invalidPattern && \"border-destructive\",\n            focusRing,\n          )}\n        />\n        <label className=\"flex shrink-0 items-center gap-1 text-xs text-muted-foreground\">\n          <input\n            type=\"checkbox\"\n            checked={regex}\n            onChange={(event) => {\n              onRegexChange(event.target.checked);\n            }}\n            className={cn(\"size-3.5 rounded border-input\", focusRing)}\n          />\n          Regex\n        </label>\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-1\">\n        {LOG_LEVELS.filter((level) => counts.has(level)).map((level) => {\n          const on = levels.size === 0 || levels.has(level);\n          return (\n            <button\n              key={level}\n              type=\"button\"\n              data-slot=\"log-viewer-facet\"\n              aria-pressed={on}\n              onClick={() => {\n                onToggleLevel(level);\n              }}\n              className={cn(\n                \"rounded-md border px-1.5 py-0.5 font-mono text-2xs uppercase transition-colors\",\n                on\n                  ? \"border-transparent bg-secondary text-secondary-foreground\"\n                  : \"border-input bg-background text-muted-foreground line-through\",\n                focusRing,\n              )}\n            >\n              {level} {counts.get(level) ?? 0}\n            </button>\n          );\n        })}\n      </div>\n\n      <p className=\"w-full text-xs text-muted-foreground tabular-nums\">\n        {invalidPattern ? (\n          // Said out loud rather than shown as an empty log, which reads as\n          // \"nothing matched\" and sends the reader looking for the wrong thing.\n          <span id={errorId} className=\"text-destructive\">\n            Incomplete pattern — showing everything until it is valid\n          </span>\n        ) : (\n          `${String(showing)} of ${String(total)} lines`\n        )}\n      </p>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/log-viewer/meta.ts
+const meta = defineMeta({
+	name: "log-viewer",
+	title: "Log Viewer",
+	description: "A streaming console with filtering, level facets and follow mode.",
+	category: "data",
+	status: "stable",
+	dependencies: ["@tanstack/react-virtual"],
+	registryDependencies: [],
+	files: ["log-stream.ts", "log-viewer.tsx"],
+	a11y: "role=\"log\" implies aria-live=\"polite\", which is right for a few events and unusable for a console — a screen reader would read every line of a build and nothing else would be audible. Announcing is off by default and opt-in. Virtualization is the harder trade: most rows are not in the DOM, so assistive technology cannot reach them, which is why the component takes an onDownload escape rather than pretending the virtual window is the whole log. Levels are written in text as well as coloured, matches use mark elements rather than a background colour, and an invalid pattern is announced instead of silently showing an empty log that reads as \"nothing matched\"."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/log-viewer/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"log-viewer\",\n  title: \"Log Viewer\",\n  description: \"A streaming console with filtering, level facets and follow mode.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [\"@tanstack/react-virtual\"],\n  registryDependencies: [],\n  files: [\"log-stream.ts\", \"log-viewer.tsx\"],\n  a11y:\n    'role=\"log\" implies aria-live=\"polite\", which is right for a few events and unusable for a ' +\n    \"console — a screen reader would read every line of a build and nothing else would be \" +\n    \"audible. Announcing is off by default and opt-in. Virtualization is the harder trade: most \" +\n    \"rows are not in the DOM, so assistive technology cannot reach them, which is why the \" +\n    \"component takes an onDownload escape rather than pretending the virtual window is the whole \" +\n    \"log. Levels are written in text as well as coloured, matches use mark elements rather than \" +\n    \"a background colour, and an invalid pattern is announced instead of silently showing an \" +\n    'empty log that reads as \"nothing matched\".',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,yBAAyB;CACxC,sBAAsB,CAAC;CACvB,OAAO,CAAC,iBAAiB,gBAAgB;CACzC,MACE;AAQJ,CAAC"}

package/dist/components/progress/progress.d.ts

@@ -4,7 +4,7 @@ import { ComponentPropsWithRef } from "react";
 //#region src/components/progress/progress.d.ts
 declare const progressVariants: (props?: ({
   size?: "sm" | "md" | "lg" | null | undefined;
-  tone?: "primary" | "destructive" | "success" | "warning" | null | undefined;
+  tone?: "destructive" | "success" | "warning" | "primary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ProgressProps extends ComponentPropsWithRef<typeof Progress.Root>, VariantProps<typeof progressVariants> {}
 /**

package/dist/components/progress/progress.js

@@ -44,6 +44,7 @@ function Progress$1({ className, size, tone, value, ...props }) {
 		...props,
 		children: /* @__PURE__ */ jsx(Progress.Indicator, {
 			"data-slot": "progress-indicator",
+			"data-motion": indeterminate ? "indicator" : void 0,
 			className: cn("h-full w-full flex-1 rounded-full bg-[var(--progress-fill)]", "transition-transform duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", indeterminate && "animate-pulse-soft"),
 			style: indeterminate ? void 0 : { transform: `translateX(-${String(100 - percent)}%)` }
 		})