@dowel-ui/react 0.3.0 → 0.5.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/permission-matrix/index.d.ts

@@ -0,0 +1,3 @@
+import { CellState, Grants, GroupState, Permission, PermissionGroup, Role, cellState, countGranted, groupPermissions, groupState, inheritedFrom } from "./permission-model.js";
+import { PermissionMatrix, PermissionMatrixProps } from "./permission-matrix.js";
+export { type CellState, type Grants, type GroupState, type Permission, type PermissionGroup, PermissionMatrix, type PermissionMatrixProps, type Role, cellState, countGranted, groupPermissions, groupState, inheritedFrom };

package/dist/components/permission-matrix/index.js

@@ -0,0 +1,3 @@
+import { cellState, countGranted, groupPermissions, groupState, inheritedFrom } from "./permission-model.js";
+import { PermissionMatrix } from "./permission-matrix.js";
+export { PermissionMatrix, cellState, countGranted, groupPermissions, groupState, inheritedFrom };

package/dist/components/permission-matrix/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/permission-matrix/meta.ts
+const meta = defineMeta({
+	name: "permission-matrix",
+	title: "Permission Matrix",
+	description: "Roles across, permissions down, with inheritance, locked roles and one tab stop.",
+	category: "data",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: ["checkbox"],
+	files: ["permission-model.ts", "permission-matrix.tsx"],
+	a11y: "A grid in the WAI-ARIA sense: role=\"grid\" with one tab stop, arrow keys between cells, Home and End along a row and Ctrl with them across the whole matrix — the right call for a matrix that is operated, where it was the wrong one for a diff that is read. Every checkbox is named by both coordinates, \"Delete projects for Editor\", so a reader arriving by arrow key knows where they are without re-reading the headers. An inherited grant is a checked box that cannot be changed here, marked aria-disabled rather than disabled so it stays in the keyboard path, with the role it came from as its description. A locked role says in each cell's description that nothing can be changed. Group toggles are tri-state, and the column header counts each role's grants in text."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/permission-matrix/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/permission-matrix/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"permission-matrix\",\n  title: \"Permission Matrix\",\n  description:\n    \"Roles across, permissions down, with inheritance, locked roles and one tab stop.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"checkbox\"],\n  files: [\"permission-model.ts\", \"permission-matrix.tsx\"],\n  a11y:\n    'A grid in the WAI-ARIA sense: role=\"grid\" with one tab stop, arrow keys between cells, Home ' +\n    \"and End along a row and Ctrl with them across the whole matrix — the right call for a \" +\n    \"matrix that is operated, where it was the wrong one for a diff that is read. Every checkbox \" +\n    'is named by both coordinates, \"Delete projects for Editor\", so a reader arriving by arrow ' +\n    \"key knows where they are without re-reading the headers. An inherited grant is a checked \" +\n    \"box that cannot be changed here, marked aria-disabled rather than disabled so it stays in \" +\n    \"the keyboard path, with the role it came from as its description. A locked role says in \" +\n    \"each cell's description that nothing can be changed. Group toggles are tri-state, and the \" +\n    \"column header counts each role's grants in text.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,UAAU;CACjC,OAAO,CAAC,uBAAuB,uBAAuB;CACtD,MACE;AASJ,CAAC"}

package/dist/components/permission-matrix/permission-matrix.d.ts

@@ -0,0 +1,46 @@
+import { Grants, Permission, Role } from "./permission-model.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/permission-matrix/permission-matrix.d.ts
+/**
+ * Roles across, permissions down, a checkbox at every crossing.
+ *
+ * Every admin panel has one and every admin panel builds it, because the
+ * hard part is not the checkboxes. It is that a role can inherit from
+ * another, so a box can be ticked without anyone having ticked it; that an
+ * Owner has everything and none of it can be unticked; that a section of
+ * eight permissions wants one control for all of them; and that sixty
+ * checkboxes are sixty tab stops unless something is done about it.
+ *
+ * Something is done about it. This is a grid in the WAI-ARIA sense — one tab
+ * stop, arrow keys between cells, Home and End along a row — which is the
+ * right call here and was the wrong one for the diff viewer: a diff is read,
+ * a matrix is operated. Every checkbox is named by both coordinates, "Delete
+ * projects for Editor", so a reader arriving by arrow key knows where they
+ * are without re-reading the headers.
+ *
+ * A grant that arrived by inheritance is shown as a checked box that cannot
+ * be unchecked here, with the role it came from said beside it and in the
+ * box's description. A disabled control would be the obvious rendering, and
+ * it would take the box out of the tab order and the arrow-key path, so a
+ * keyboard user would step over the one cell whose state needs explaining.
+ *
+ * Changes are reported, never applied. A group toggle reports every
+ * permission it touched in one call, so an application can save it as one
+ * change rather than eight.
+ */
+interface PermissionMatrixProps extends Omit<ComponentPropsWithRef<"table">, "onChange"> {
+  /** Names the matrix: "Permissions for Acme". */
+  label: string;
+  roles: Role[];
+  permissions: Permission[];
+  grants: Grants;
+  /**
+   * A change to make. Several ids arrive together when a group toggle was
+   * used. Omit to render the matrix as a record.
+   */
+  onChange?: (roleId: string, permissionIds: string[], granted: boolean) => void;
+}
+declare function PermissionMatrix({ className, label, roles, permissions, grants, onChange, ...props }: PermissionMatrixProps): import("react").JSX.Element;
+//#endregion
+export { PermissionMatrix, PermissionMatrixProps };
+//# sourceMappingURL=permission-matrix.d.ts.map

package/dist/components/permission-matrix/permission-matrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"permission-matrix.d.ts","names":[],"sources":["../../../src/components/permission-matrix/permission-matrix.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAmDiB,8BAA8B,KAC7C;;EAIA;EACA,OAAO;EACP,aAAa;EACb,QAAQ;;;;;EAKR,YAAY,gBAAgB,yBAAyB;;iBAcvC,mBACd,WACA,OACA,OACA,aACA,QACA,aACG,SACF,wCAAqB,IAAA"}

package/dist/components/permission-matrix/permission-matrix.js

@@ -0,0 +1,199 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Checkbox } from "../checkbox/checkbox.js";
+import { cellState, countGranted, groupPermissions, groupState } from "./permission-model.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+//#region src/components/permission-matrix/permission-matrix.tsx
+const ARROWS = {
+	ArrowUp: [-1, 0],
+	ArrowDown: [1, 0],
+	ArrowLeft: [0, -1],
+	ArrowRight: [0, 1]
+};
+function PermissionMatrix({ className, label, roles, permissions, grants, onChange, ...props }) {
+	const uid = useId();
+	const rows = useMemo(() => groupPermissions(permissions).flatMap((group) => [...group.group !== void 0 ? [{
+		kind: "group",
+		label: group.group,
+		permissions: group.permissions
+	}] : [], ...group.permissions.map((permission) => ({
+		kind: "permission",
+		permission
+	}))]), [permissions]);
+	const [active, setActive] = useState([0, 0]);
+	const onKeyDown = (event) => {
+		const target = event.target;
+		const row = Number(target.dataset.row);
+		const col = Number(target.dataset.col);
+		if (Number.isNaN(row) || Number.isNaN(col)) return;
+		let next = null;
+		const arrow = ARROWS[event.key];
+		if (arrow) next = [row + arrow[0], col + arrow[1]];
+		else if (event.key === "Home") next = event.ctrlKey ? [0, 0] : [row, 0];
+		else if (event.key === "End") next = event.ctrlKey ? [rows.length - 1, roles.length - 1] : [row, roles.length - 1];
+		if (!next) return;
+		const [nextRow, nextCol] = next;
+		if (nextRow < 0 || nextRow >= rows.length || nextCol < 0 || nextCol >= roles.length) {
+			event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		event.currentTarget.querySelector(`[data-row="${String(nextRow)}"][data-col="${String(nextCol)}"]`)?.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative w-full overflow-x-auto",
+		children: /* @__PURE__ */ jsxs("table", {
+			"data-slot": "permission-matrix",
+			role: "grid",
+			"aria-label": label,
+			"aria-readonly": onChange ? void 0 : true,
+			onKeyDown,
+			className: cn("w-full border-collapse text-sm", className),
+			...props,
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+				role: "row",
+				className: "border-b border-border",
+				children: [/* @__PURE__ */ jsx("th", {
+					role: "columnheader",
+					scope: "col",
+					className: "px-3 py-2 text-left text-xs font-medium",
+					children: "Permission"
+				}), roles.map((role) => {
+					const granted = countGranted(roles, grants, role, permissions);
+					return /* @__PURE__ */ jsxs("th", {
+						role: "columnheader",
+						scope: "col",
+						className: "px-3 py-2 text-center text-xs font-medium",
+						children: [role.label, /* @__PURE__ */ jsx("span", {
+							className: "block font-normal text-muted-foreground",
+							children: role.locked ? "all, locked" : /* @__PURE__ */ jsxs(Fragment, { children: [
+								String(granted),
+								"/",
+								String(permissions.length),
+								/* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: " granted"
+								})
+							] })
+						})]
+					}, role.id);
+				})]
+			}) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => row.kind === "group" ? /* @__PURE__ */ jsxs("tr", {
+				role: "row",
+				className: "border-b border-border bg-muted/40",
+				children: [/* @__PURE__ */ jsxs("th", {
+					role: "rowheader",
+					scope: "row",
+					className: "px-3 py-1.5 text-left text-xs font-medium",
+					children: [row.label, /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: ", all"
+					})]
+				}), roles.map((role, colIndex) => /* @__PURE__ */ jsx(GroupCell, {
+					role,
+					roles,
+					grants,
+					group: row.label,
+					permissions: row.permissions,
+					position: [rowIndex, colIndex],
+					active: active[0] === rowIndex && active[1] === colIndex,
+					onActivate: setActive,
+					onChange
+				}, role.id))]
+			}, `group-${row.label}`) : /* @__PURE__ */ jsxs("tr", {
+				role: "row",
+				className: "border-b border-border last:border-0 hover:bg-muted/30",
+				children: [/* @__PURE__ */ jsxs("th", {
+					role: "rowheader",
+					scope: "row",
+					className: cn("px-3 py-2 text-left font-normal", row.permission.group !== void 0 && "pl-6"),
+					children: [row.permission.label, row.permission.description ? /* @__PURE__ */ jsx("span", {
+						className: "block text-xs text-muted-foreground",
+						children: row.permission.description
+					}) : null]
+				}), roles.map((role, colIndex) => /* @__PURE__ */ jsx(PermissionCell, {
+					id: `${uid}-${role.id}-${row.permission.id}`,
+					role,
+					roles,
+					grants,
+					permission: row.permission,
+					position: [rowIndex, colIndex],
+					active: active[0] === rowIndex && active[1] === colIndex,
+					onActivate: setActive,
+					onChange
+				}, role.id))]
+			}, row.permission.id)) })]
+		})
+	});
+}
+function PermissionCell({ id, role, roles, grants, permission, position, active, onActivate, onChange }) {
+	const state = cellState(roles, grants, role, permission.id);
+	const fixed = state.fixed || !onChange;
+	const noteId = `${id}-note`;
+	const note = role.locked ? `${role.label} has every permission; this cannot be changed.` : state.inheritedFrom ? `Inherited from ${state.inheritedFrom.label}.` : null;
+	return /* @__PURE__ */ jsxs("td", {
+		role: "gridcell",
+		"data-slot": "permission-cell",
+		"data-granted": state.granted || void 0,
+		"data-inherited": state.inheritedFrom ? "" : void 0,
+		className: "px-3 py-2 text-center align-middle",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			id,
+			checked: state.granted,
+			"aria-label": `${permission.label} for ${role.label}`,
+			"aria-describedby": note ? noteId : void 0,
+			"aria-disabled": fixed || void 0,
+			tabIndex: active ? 0 : -1,
+			"data-row": position[0],
+			"data-col": position[1],
+			className: cn(fixed && "opacity-55"),
+			onFocus: () => {
+				onActivate(position);
+			},
+			onCheckedChange: (next) => {
+				if (fixed) return;
+				onChange?.(role.id, [permission.id], next === true);
+			}
+		}), state.inheritedFrom ? /* @__PURE__ */ jsxs("span", {
+			id: noteId,
+			className: "mt-0.5 block text-2xs text-muted-foreground",
+			children: ["via ", state.inheritedFrom.label]
+		}) : note ? /* @__PURE__ */ jsx("span", {
+			id: noteId,
+			className: "sr-only",
+			children: note
+		}) : null]
+	});
+}
+function GroupCell({ role, roles, grants, group, permissions, position, active, onActivate, onChange }) {
+	const ids = permissions.map((permission) => permission.id);
+	const state = groupState(roles, grants, role, ids);
+	const changeable = permissions.filter((permission) => !cellState(roles, grants, role, permission.id).fixed).map((permission) => permission.id);
+	const fixed = role.locked || !onChange || changeable.length === 0;
+	return /* @__PURE__ */ jsx("td", {
+		role: "gridcell",
+		"data-slot": "permission-group-cell",
+		className: "px-3 py-1.5 text-center align-middle",
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked: state === "all" ? true : state === "some" ? "indeterminate" : false,
+			"aria-label": `All ${group} for ${role.label}`,
+			"aria-disabled": fixed || void 0,
+			tabIndex: active ? 0 : -1,
+			"data-row": position[0],
+			"data-col": position[1],
+			className: cn(fixed && "opacity-55"),
+			onFocus: () => {
+				onActivate(position);
+			},
+			onCheckedChange: (next) => {
+				if (fixed) return;
+				onChange?.(role.id, changeable, next === true);
+			}
+		})
+	});
+}
+//#endregion
+export { PermissionMatrix };
+
+//# sourceMappingURL=permission-matrix.js.map