@dowel-ui/react 0.3.0 → 0.4.0

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/spinner/spinner.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/spinner/spinner.d.ts
 declare const spinnerVariants: (props?: ({
-  size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+  size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<ComponentPropsWithRef<"svg">, "children">, VariantProps<typeof spinnerVariants> {
   /**

package/dist/components/time-range-picker/index.d.ts

@@ -0,0 +1,3 @@
+import { DEFAULT_PRESETS, ResolveOptions, ResolvedRange, TimeExpressionError, TimeRangePreset, TimeUnit, absoluteExpression, describeTimeRange, formatResolvedRange, isValidTimeRange, resolveExpression, resolveTimeRange } from "./time-expression.js";
+import { TimeRange, TimeRangeCalendar, TimeRangeContent, TimeRangeContentProps, TimeRangeExpression, TimeRangePresets, TimeRangeProps, TimeRangeTrigger, TimeRangeTriggerProps } from "./time-range-picker.js";
+export { DEFAULT_PRESETS, type ResolveOptions, type ResolvedRange, TimeExpressionError, TimeRange, TimeRangeCalendar, TimeRangeContent, type TimeRangeContentProps, TimeRangeExpression, type TimeRangePreset, TimeRangePresets, type TimeRangeProps, TimeRangeTrigger, type TimeRangeTriggerProps, type TimeUnit, absoluteExpression, describeTimeRange, formatResolvedRange, isValidTimeRange, resolveExpression, resolveTimeRange };

package/dist/components/time-range-picker/index.js

@@ -0,0 +1,3 @@
+import { DEFAULT_PRESETS, TimeExpressionError, absoluteExpression, describeTimeRange, formatResolvedRange, isValidTimeRange, resolveExpression, resolveTimeRange } from "./time-expression.js";
+import { TimeRange, TimeRangeCalendar, TimeRangeContent, TimeRangeExpression, TimeRangePresets, TimeRangeTrigger } from "./time-range-picker.js";
+export { DEFAULT_PRESETS, TimeExpressionError, TimeRange, TimeRangeCalendar, TimeRangeContent, TimeRangeExpression, TimeRangePresets, TimeRangeTrigger, absoluteExpression, describeTimeRange, formatResolvedRange, isValidTimeRange, resolveExpression, resolveTimeRange };

package/dist/components/time-range-picker/meta.js

@@ -0,0 +1,22 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/time-range-picker/meta.ts
+const meta = defineMeta({
+	name: "time-range-picker",
+	title: "Time Range Picker",
+	description: "A time range whose value is an expression, so it stays relative across a reload.",
+	category: "form",
+	status: "stable",
+	dependencies: ["react-day-picker"],
+	registryDependencies: [
+		"button",
+		"calendar",
+		"input",
+		"popover"
+	],
+	files: ["time-expression.ts", "time-range-picker.tsx"],
+	a11y: "The trigger is named by the range it holds — \"Last 6 hours\" — and the window that resolves to is read after it, so the relative choice is not replaced by two timestamps. The popover carries role=\"dialog\" and is named. Presets are buttons rather than radios because choosing one both selects and dismisses, with aria-pressed carrying which matches the current expression. The expression field reports why an unparseable entry is invalid through one aria-describedby element that the preview and the error share, so a reader hears the error replace the preview rather than both at once; an invalid expression is never applied, because a chart silently re-scoping itself is worse than one that refuses."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/time-range-picker/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/time-range-picker/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"time-range-picker\",\n  title: \"Time Range Picker\",\n  description:\n    \"A time range whose value is an expression, so it stays relative across a reload.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"react-day-picker\"],\n  registryDependencies: [\"button\", \"calendar\", \"input\", \"popover\"],\n  files: [\"time-expression.ts\", \"time-range-picker.tsx\"],\n  a11y:\n    'The trigger is named by the range it holds — \"Last 6 hours\" — and the window that ' +\n    \"resolves to is read after it, so the relative choice is not replaced by two timestamps. \" +\n    'The popover carries role=\"dialog\" and is named. Presets are buttons rather than radios ' +\n    \"because choosing one both selects and dismisses, with aria-pressed carrying which matches \" +\n    \"the current expression. The expression field reports why an unparseable entry is invalid \" +\n    \"through one aria-describedby element that the preview and the error share, so a reader \" +\n    \"hears the error replace the preview rather than both at once; an invalid expression is \" +\n    \"never applied, because a chart silently re-scoping itself is worse than one that refuses.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,kBAAkB;CACjC,sBAAsB;EAAC;EAAU;EAAY;EAAS;CAAS;CAC/D,OAAO,CAAC,sBAAsB,uBAAuB;CACrD,MACE;AAQJ,CAAC"}

package/dist/components/time-range-picker/time-expression.d.ts

@@ -0,0 +1,88 @@
+//#region src/components/time-range-picker/time-expression.d.ts
+/**
+ * Time ranges as expressions, not as two frozen timestamps.
+ *
+ * `now-6h` is still the last six hours tomorrow; a resolved pair is six hours
+ * of last Tuesday forever. Storing the expression is what lets a dashboard URL
+ * survive being bookmarked and reloaded.
+ *
+ * The grammar is a deliberate subset of the one Grafana, Datadog and Kibana
+ * converged on, so the strings are already familiar:
+ *
+ *   range  := expr ".." expr
+ *   expr   := "now" offset* snap? | ISO-8601
+ *   offset := ("-" | "+") digits unit
+ *   snap   := "/" unit
+ *   unit   := s | m | h | d | w | M | y
+ *
+ *   now-6h..now          the last six hours
+ *   now-6h/h..now        the last six hours, starting on the hour
+ *   now/d..now/d         today, all of it
+ *   now-1d/d..now-1d/d   yesterday
+ *   2026-01-01..now      since a fixed instant
+ *
+ * Everything here is pure and takes `now` as an argument: reading the clock
+ * during render would disagree between the server and the browser.
+ */
+type TimeUnit = "s" | "m" | "h" | "d" | "w" | "M" | "y";
+interface ResolveOptions {
+  /** The instant `now` refers to. Required, so nothing here reads the clock. */
+  now: Date;
+  /**
+   * IANA zone the snapping happens in — "start of day" is a different instant
+   * in Auckland than in Denver. Defaults to the runtime zone.
+   */
+  timeZone?: string;
+}
+interface ResolvedRange {
+  from: Date;
+  to: Date;
+}
+/** Why an expression could not be resolved. Shown to the user verbatim. */
+declare class TimeExpressionError extends Error {
+  /** The part of the input at fault, for pointing at it. */
+  readonly input: string;
+  constructor(message: string,
+  /** The part of the input at fault, for pointing at it. */
+  input: string);
+}
+/** Resolves a single side of a range. Exported for the input's live feedback. */
+declare function resolveExpression(expression: string, edge: "start" | "end", options: ResolveOptions): Date;
+/**
+ * Turns a range expression into the two instants a query needs.
+ *
+ * Throws `TimeExpressionError` rather than returning a fallback range: a chart
+ * silently showing the wrong window is worse than one that says it cannot.
+ */
+declare function resolveTimeRange(expression: string, options: ResolveOptions): ResolvedRange;
+/** Whether an expression resolves, without the caller writing a try/catch. */
+declare function isValidTimeRange(expression: string, options: ResolveOptions): boolean;
+interface TimeRangePreset {
+  expression: string;
+  label: string;
+  /** Groups presets under a heading in the picker. */
+  group: string;
+}
+/** Relative windows first, for debugging; calendar periods after, for reporting. */
+declare const DEFAULT_PRESETS: TimeRangePreset[];
+/**
+ * A sentence for the trigger.
+ *
+ * An unnamed relative range is described in its own terms — "Last 90 minutes" —
+ * because showing it as two timestamps throws away what the user chose. Only an
+ * absolute range, which has no relative meaning left, is shown as dates.
+ */
+declare function describeTimeRange(expression: string, options: ResolveOptions & {
+  locale?: string;
+  presets?: TimeRangePreset[];
+}): string;
+/** The resolved window, spelled out. Pairs with the relative label, not replaces it. */
+declare function formatResolvedRange(range: ResolvedRange, options?: {
+  locale?: string;
+  timeZone?: string;
+}): string;
+/** Builds the expression for an absolute range chosen on a calendar. */
+declare function absoluteExpression(from: Date, to: Date): string;
+//#endregion
+export { DEFAULT_PRESETS, ResolveOptions, ResolvedRange, TimeExpressionError, TimeRangePreset, TimeUnit, absoluteExpression, describeTimeRange, formatResolvedRange, isValidTimeRange, resolveExpression, resolveTimeRange };
+//# sourceMappingURL=time-expression.d.ts.map

package/dist/components/time-range-picker/time-expression.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-expression.d.ts","names":[],"sources":["../../../src/components/time-range-picker/time-expression.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;KA0BY;UAEK;;EAEf,KAAK;;;;;EAKL;;UAGe;EACf,MAAM;EACN,IAAI;;;cAIO,4BAA4B;;WAI5B;EAFT,YAAA,iBAES;;EAAA;;;iBAwOG,kBACd,oBACA,uBACA,SAAS,iBACR;;;;;;;iBAwFa,iBAAiB,oBAAoB,SAAS,iBAAiB;;iBAoB/D,iBAAiB,oBAAoB,SAAS;UAa7C;EACf;EACA;;EAEA;;;cAIW,iBAAiB;;;;;;;;iBAyBd,kBACd,oBACA,SAAS;EAAmB;EAAiB,UAAU;;;iBA2BzC,oBACd,OAAO,eACP;EAAW;EAAiB;;;iBAWd,mBAAmB,MAAM,MAAM,IAAI"}