@thewhatmatters/wmds 0.4.9 → 0.4.27

package/dist/components/molecules/Chip/chipStyles.js

@@ -1,23 +1,23 @@
 "use client";
-import { motionTransition as e } from "../../../lib/motion.js";
-import { clusterHeightClasses as t } from "../../../lib/clusterScale.js";
+import { clusterHeightClasses as e } from "../../../lib/clusterScale.js";
+import { motionTransition as t } from "../../../lib/motion.js";
 //#region src/components/molecules/Chip/chipStyles.ts
 var n = [
 	"sm",
 	"md",
 	"lg"
-], r = "inline-flex shrink-0 items-center justify-center rounded-full font-sans font-medium tracking-normal transition-[background-color,box-shadow,color] " + e("fast"), i = {
-	sm: `${t.sm} gap-1 px-2.5 text-xs leading-none`,
-	md: `${t.md} gap-1.5 px-3 text-sm leading-none`,
-	lg: `${t.lg} gap-2 px-4 text-sm leading-none`
+], r = "inline-flex shrink-0 items-center justify-center rounded-full font-sans font-medium tracking-normal transition-[background-color,box-shadow,color] " + t("fast"), i = {
+	sm: `${e.sm} gap-1 px-2.5 text-xs leading-none`,
+	md: `${e.md} gap-1.5 px-3 text-sm leading-none`,
+	lg: `${e.lg} gap-2 px-4 text-sm leading-none`
 }, a = {
 	sm: "gap-1",
 	md: "gap-1.5",
 	lg: "gap-2"
 }, o = "cursor-pointer bg-surface text-fg shadow-hairline", s = "cursor-pointer text-muted hover:bg-ghost-hover", c = "border border-border bg-secondary text-secondary-foreground", l = {
-	sm: `${t.sm} gap-0.5 pl-2.5 pr-1 text-xs leading-none`,
-	md: `${t.md} gap-1 pl-3 pr-2 text-sm leading-none`,
-	lg: `${t.lg} gap-1 pl-4 pr-2.5 text-sm leading-none`
+	sm: `${e.sm} gap-0.5 pl-2.5 pr-1 text-xs leading-none`,
+	md: `${e.md} gap-1 pl-3 pr-2 text-sm leading-none`,
+	lg: `${e.lg} gap-1 pl-4 pr-2.5 text-sm leading-none`
 };
 //#endregion
 export { r as chipBaseClasses, a as chipIconGapClasses, c as chipReadOnlyClasses, l as chipRemovableGapClasses, o as chipSelectedClasses, i as chipSizeClasses, n as chipSizes, s as chipUnselectedClasses };

package/dist/components/molecules/CopyField/CopyField.d.ts

@@ -0,0 +1,41 @@
+export declare const copyFieldStates: readonly ["idle", "copied", "fallback"];
+export type CopyFieldState = (typeof copyFieldStates)[number];
+/** Idle button label. */
+export declare const copyFieldCopyLabel = "Copy key";
+/** Confirmation label. Holds for {@link buttonStatusHoldMs}, then returns to idle. */
+export declare const copyFieldCopiedLabel = "Copied";
+/** Shown when the Clipboard API is missing or blocked. */
+export declare const copyFieldFallbackHint = "Press Cmd/Ctrl+C to copy.";
+/** Layout-only — width, margin, flex placement. Not for color or type. */
+export type CopyFieldLayoutClassName = string;
+export interface CopyFieldProps {
+    /** Read-only value to show and copy. Never logged. */
+    value: string;
+    /** Visible label. Provide this or `aria-label`. */
+    label?: string;
+    /** Accessible name when `label` is omitted. */
+    "aria-label"?: string;
+    /** Idle button label. @default "Copy key" */
+    copyLabel?: string;
+    /** Confirmation label. @default "Copied" */
+    copiedLabel?: string;
+    /**
+     * Hint when the Clipboard API is missing or blocked.
+     * @default "Press Cmd/Ctrl+C to copy."
+     */
+    fallbackHint?: string;
+    /**
+     * Pin the appearance. Omit so a click copies and "Copied" returns to idle
+     * after `buttonStatusHoldMs` (2s). `"copied"` and `"fallback"` are for specimens.
+     */
+    state?: CopyFieldState;
+    id?: string;
+    className?: CopyFieldLayoutClassName;
+}
+/**
+ * Read-only monospace value plus a button that copies it.
+ * The button sits inside the pill, at the trailing end, the way PromptBar seats send.
+ * The value is never written to the console.
+ */
+export declare const CopyField: import("react").ForwardRefExoticComponent<CopyFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=CopyField.d.ts.map

package/dist/components/molecules/CopyField/CopyField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyField.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CopyField/CopyField.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,eAAe,yCAA0C,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,yBAAyB;AACzB,eAAO,MAAM,kBAAkB,aAAa,CAAC;AAE7C,sFAAsF;AACtF,eAAO,MAAM,oBAAoB,WAAW,CAAC;AAE7C,0DAA0D;AAC1D,eAAO,MAAM,qBAAqB,8BAA8B,CAAC;AAEjE,0EAA0E;AAC1E,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAmBD;;;;GAIG;AACH,eAAO,MAAM,SAAS,6GAwJpB,CAAC"}

package/dist/components/molecules/CopyField/CopyField.js

@@ -0,0 +1,120 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { buttonStatusHoldMs as t } from "../../atoms/Button/buttonStatusStyles.js";
+import { Button as n } from "../../atoms/Button/Button.js";
+import { Input as r } from "../../atoms/Input/Input.js";
+import { copyFieldButtonClasses as i, copyFieldClasses as a, copyFieldHintClasses as o, copyFieldLabelClasses as s, copyFieldShellClasses as c, copyFieldValueClasses as l } from "./copyFieldStyles.js";
+import { forwardRef as u, useCallback as d, useEffect as f, useId as p, useRef as m, useState as h } from "react";
+import { Copy as g } from "lucide-react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/molecules/CopyField/CopyField.tsx
+var y = [
+	"idle",
+	"copied",
+	"fallback"
+], b = "Copy key", x = "Copied", S = "Press Cmd/Ctrl+C to copy.";
+function C() {
+	if (typeof navigator > "u") return null;
+	let e = navigator.clipboard;
+	return e == null || typeof e.writeText != "function" ? null : (t) => e.writeText(t);
+}
+function w(e) {
+	e.select();
+	let t = e.value.length;
+	try {
+		e.setSelectionRange(0, t);
+	} catch {}
+}
+var T = u(function({ value: u, label: y, "aria-label": T, copyLabel: E = b, copiedLabel: D = x, fallbackHint: O = S, state: k, id: A, className: j }, M) {
+	let N = p(), P = p(), F = p(), I = A ?? F, L = m(null), R = m(!0), [z, B] = h("idle"), V = k !== void 0, H = k ?? z, U = d((e) => {
+		L.current = e, typeof M == "function" ? M(e) : M != null && (M.current = e);
+	}, [M]);
+	f(() => (R.current = !0, () => {
+		R.current = !1;
+	}), []), f(() => {
+		if (V || z !== "copied") return;
+		let e = window.setTimeout(() => B("idle"), t);
+		return () => window.clearTimeout(e);
+	}, [V, z]), f(() => {
+		if (H !== "fallback") return;
+		let e = L.current;
+		e != null && (e.focus(), w(e));
+	}, [H]);
+	let W = H === "copied" ? "success" : "idle";
+	async function G() {
+		let e = C();
+		if (e != null) try {
+			if (await e(u), !R.current || V) return;
+			B("copied");
+			return;
+		} catch {}
+		if (!R.current) return;
+		let t = L.current;
+		if (t != null) {
+			t.focus(), w(t);
+			try {
+				document.execCommand("copy");
+			} catch {}
+		}
+		!R.current || V || B("fallback");
+	}
+	return /* @__PURE__ */ v("div", {
+		className: e(a, j),
+		children: [
+			y == null ? null : /* @__PURE__ */ _("label", {
+				id: P,
+				htmlFor: I,
+				className: s,
+				children: y
+			}),
+			/* @__PURE__ */ v("div", {
+				className: c,
+				children: [/* @__PURE__ */ _(r, {
+					ref: U,
+					id: I,
+					inline: !0,
+					mono: !0,
+					readOnly: !0,
+					value: u,
+					"aria-labelledby": y == null ? void 0 : P,
+					"aria-label": y == null ? T : void 0,
+					spellCheck: !1,
+					autoComplete: "off",
+					"aria-describedby": H === "fallback" ? N : void 0,
+					className: l,
+					onFocus: () => {
+						let e = L.current;
+						e != null && w(e);
+					},
+					onMouseUp: (e) => {
+						e.preventDefault();
+					}
+				}), /* @__PURE__ */ _(n, {
+					type: "button",
+					role: "secondary",
+					size: "sm",
+					icon: /* @__PURE__ */ _(g, { strokeWidth: 2 }),
+					status: W,
+					statusLabels: { success: D },
+					className: i,
+					onKeyDown: (e) => {
+						e.repeat || (e.key === "Enter" || e.key === " ") && (e.metaKey || e.ctrlKey || e.altKey || (e.preventDefault(), e.currentTarget.click()));
+					},
+					onClick: () => {
+						G();
+					},
+					children: E
+				})]
+			}),
+			/* @__PURE__ */ _("p", {
+				id: N,
+				role: "status",
+				"aria-live": "polite",
+				className: e(o, H !== "fallback" && "sr-only"),
+				children: H === "fallback" ? O : ""
+			})
+		]
+	});
+});
+//#endregion
+export { T as CopyField, x as copyFieldCopiedLabel, b as copyFieldCopyLabel, S as copyFieldFallbackHint, y as copyFieldStates };

package/dist/components/molecules/CopyField/copyFieldStyles.d.ts

@@ -0,0 +1,28 @@
+/** Label, pill, and the blocked-clipboard hint. */
+export declare const copyFieldClasses = "flex w-full min-w-0 flex-col gap-2";
+/**
+ * Same type step as an Input label (`type-label`). Color is inherited, not `text-fg`,
+ * so a parent `text-on-brand` paints the label on a navy field.
+ */
+export declare const copyFieldLabelClasses = "type-label";
+/**
+ * PromptBar's pill. The shell owns the border, radius, and the one inset focus ring.
+ * `pl-5` is the same leading inset as a PromptBar with no start slot.
+ */
+export declare const copyFieldShellClasses: string;
+/**
+ * Value track inside the shell. `min-w-0` + `truncate` keep a long key in the track
+ * so it never runs under the button, including at 390px.
+ */
+export declare const copyFieldValueClasses = "h-9 min-h-9 w-full min-w-0 flex-1 truncate px-0 py-0";
+/**
+ * Trailing seat — PromptBar's send control. `shrink-0` holds the button's width.
+ * The shell owns the focus ring, so the button drops its own.
+ */
+export declare const copyFieldButtonClasses: string;
+/**
+ * Blocked-clipboard hint. Supporting type, color inherited (same reason as the label).
+ * Hidden from layout until shown.
+ */
+export declare const copyFieldHintClasses = "type-supporting";
+//# sourceMappingURL=copyFieldStyles.d.ts.map

package/dist/components/molecules/CopyField/copyFieldStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyFieldStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CopyField/copyFieldStyles.ts"],"names":[],"mappings":"AAOA,mDAAmD;AACnD,eAAO,MAAM,gBAAgB,uCAAuC,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,qBAAqB,eAAe,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAAiE,CAAC;AAEpG;;;GAGG;AACH,eAAO,MAAM,qBAAqB,yDAAyD,CAAC;AAE5F;;;GAGG;AACH,eAAO,MAAM,sBAAsB,QAAuC,CAAC;AAE3E;;;GAGG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC"}

package/dist/components/molecules/CopyField/copyFieldStyles.js

@@ -0,0 +1,7 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { promptBarSendClasses as t, promptBarShellClasses as n, promptBarShellStartPadClasses as r } from "../PromptBar/promptBarStyles.js";
+//#region src/components/molecules/CopyField/copyFieldStyles.ts
+var i = "flex w-full min-w-0 flex-col gap-2", a = "type-label", o = e(n, r.field), s = "h-9 min-h-9 w-full min-w-0 flex-1 truncate px-0 py-0", c = e(t, "shrink-0"), l = "type-supporting";
+//#endregion
+export { c as copyFieldButtonClasses, i as copyFieldClasses, l as copyFieldHintClasses, a as copyFieldLabelClasses, o as copyFieldShellClasses, s as copyFieldValueClasses };

package/dist/components/molecules/DisplayControls/DisplayControls.d.ts

@@ -1,5 +1,5 @@
 import { type DisplayControlThemeMode } from "./displayControlsState";
-export { displayControlThemeModes, nextDisplayControlThemeMode, type DisplayControlThemeMode, } from "./displayControlsState";
+export { applyDisplayTheme, commitDisplayTheme, displayControlThemeModes, displayThemeNoFlashScript, displayThemeStorageKey, nextDisplayControlThemeMode, persistDisplayTheme, readDisplayTheme, subscribeDisplayTheme, type DisplayControlThemeMode, } from "./displayControlsState";
 /** Layout-only — fixed/absolute placement and margin; not for re-theming. */
 export type DisplayControlsLayoutClassName = string;
 export interface DisplayControlsLabels {
@@ -11,17 +11,26 @@ export interface DisplayControlsLabels {
     light: string;
     dark: string;
 }
-export interface DisplayControlsProps {
-    gridVisible: boolean;
-    onGridVisibleChange: (visible: boolean) => void;
+type DisplayControlsSharedProps = {
     theme: DisplayControlThemeMode;
     onThemeChange: (theme: DisplayControlThemeMode) => void;
-    /** Enables global `g` and `t` shortcuts. Default: true. */
+    /** Enables global shortcuts. Default: true. `G` is only active for `controls="display"`. */
     keyboardShortcuts?: boolean;
     labels?: Partial<DisplayControlsLabels>;
     "aria-label"?: string;
     /** Layout-only: fixed/absolute placement and margin. */
     className?: DisplayControlsLayoutClassName;
-}
-export declare function DisplayControls({ gridVisible, onGridVisibleChange, theme, onThemeChange, keyboardShortcuts, labels: labelsProp, "aria-label": ariaLabel, className, }: DisplayControlsProps): import("react").JSX.Element;
+};
+export type DisplayControlsProps = DisplayControlsSharedProps & ({
+    /** Grid guide plus theme. Default. */
+    controls?: "display";
+    gridVisible: boolean;
+    onGridVisibleChange: (visible: boolean) => void;
+} | {
+    /** Theme only — appearance in a sidebar footer. No grid button, no `G`. */
+    controls: "theme";
+    gridVisible?: boolean;
+    onGridVisibleChange?: (visible: boolean) => void;
+});
+export declare function DisplayControls({ controls, gridVisible, onGridVisibleChange, theme, onThemeChange, keyboardShortcuts, labels: labelsProp, "aria-label": ariaLabel, className, }: DisplayControlsProps): import("react").JSX.Element;
 //# sourceMappingURL=DisplayControls.d.ts.map

package/dist/components/molecules/DisplayControls/DisplayControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DisplayControls.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DisplayControls/DisplayControls.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,uBAAuB,EAC7B,MAAM,wBAAwB,CAAC;AAOhC,OAAO,EACL,wBAAwB,EACxB,2BAA2B,EAC3B,KAAK,uBAAuB,GAC7B,MAAM,wBAAwB,CAAC;AAEhC,6EAA6E;AAC7E,MAAM,MAAM,8BAA8B,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,uBAAuB,CAAC;IAC/B,aAAa,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACxD,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,SAAS,CAAC,EAAE,8BAA8B,CAAC;CAC5C;AAYD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,mBAAmB,EACnB,KAAK,EACL,aAAa,EACb,iBAAwB,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,SAA8B,EAC5C,SAAS,GACV,EAAE,oBAAoB,+BA+DtB"}
+{"version":3,"file":"DisplayControls.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DisplayControls/DisplayControls.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,uBAAuB,EAC7B,MAAM,wBAAwB,CAAC;AAOhC,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,2BAA2B,EAC3B,mBAAmB,EACnB,gBAAgB,EAChB,qBAAqB,EACrB,KAAK,uBAAuB,GAC7B,MAAM,wBAAwB,CAAC;AAEhC,6EAA6E;AAC7E,MAAM,MAAM,8BAA8B,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,KAAK,0BAA0B,GAAG;IAChC,KAAK,EAAE,uBAAuB,CAAC;IAC/B,aAAa,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACxD,4FAA4F;IAC5F,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,SAAS,CAAC,EAAE,8BAA8B,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,0BAA0B,GAC3D,CACI;IACE,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD,GACD;IACE,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD,CACJ,CAAC;AAYJ,wBAAgB,eAAe,CAAC,EAC9B,QAAoB,EACpB,WAAmB,EACnB,mBAAmB,EACnB,KAAK,EACL,aAAa,EACb,iBAAwB,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,SAA8B,EAC5C,SAAS,GACV,EAAE,oBAAoB,+BAoEtB"}

package/dist/components/molecules/DisplayControls/DisplayControls.js

@@ -2,12 +2,12 @@
 import { cn as e } from "../../../lib/cn.js";
 import { Button as t } from "../../atoms/Button/Button.js";
 import { Kbd as n } from "../../atoms/Kbd/Kbd.js";
-import { displayControlShortcutFromEvent as r, displayControlThemeModes as i, nextDisplayControlThemeMode as a } from "./displayControlsState.js";
-import { displayControlsButtonContentClasses as o, displayControlsLabelClasses as s, displayControlsRootClasses as c } from "./displayControlsStyles.js";
-import { useEffect as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { applyDisplayTheme as r, commitDisplayTheme as i, displayControlShortcutFromEvent as a, displayControlThemeModes as o, displayThemeNoFlashScript as s, displayThemeStorageKey as c, nextDisplayControlThemeMode as l, persistDisplayTheme as u, readDisplayTheme as d, subscribeDisplayTheme as f } from "./displayControlsState.js";
+import { displayControlsButtonContentClasses as p, displayControlsLabelClasses as m, displayControlsRootClasses as h } from "./displayControlsStyles.js";
+import { useEffect as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/molecules/DisplayControls/DisplayControls.tsx
-var f = {
+var y = {
 	grid: "Grid",
 	showGrid: "Show grid",
 	hideGrid: "Hide grid",
@@ -16,61 +16,63 @@ var f = {
 	light: "Light",
 	dark: "Dark"
 };
-function p({ gridVisible: i, onGridVisibleChange: p, theme: m, onThemeChange: h, keyboardShortcuts: g = !0, labels: _, "aria-label": v = "Display controls", className: y }) {
-	let b = {
-		...f,
-		..._
-	};
-	return l(() => {
-		if (!g) return;
+function b({ controls: r = "display", gridVisible: i = !1, onGridVisibleChange: o, theme: s, onThemeChange: c, keyboardShortcuts: u = !0, labels: d, "aria-label": f = "Display controls", className: b }) {
+	let x = {
+		...y,
+		...d
+	}, S = r === "theme";
+	return g(() => {
+		if (!u) return;
 		let e = (e) => {
-			let t = r(e);
+			let t = a(e);
 			if (t != null) {
-				if (e.preventDefault(), t === "grid") {
-					p(!i);
+				if (t === "grid") {
+					if (S || o == null) return;
+					e.preventDefault(), o(!i);
 					return;
 				}
-				h(a(m));
+				e.preventDefault(), c(l(s));
 			}
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
 		i,
-		g,
-		p,
-		h,
-		m
-	]), /* @__PURE__ */ d("div", {
+		u,
+		o,
+		c,
+		s,
+		S
+	]), /* @__PURE__ */ v("div", {
 		role: "group",
-		"aria-label": v,
-		className: e(c, y),
-		"data-theme-mode": m,
-		children: [/* @__PURE__ */ u(t, {
+		"aria-label": f,
+		className: e(h, b),
+		"data-theme-mode": s,
+		children: [S ? null : /* @__PURE__ */ _(t, {
 			role: "secondary",
 			size: "sm",
-			"aria-label": i ? b.hideGrid : b.showGrid,
+			"aria-label": i ? x.hideGrid : x.showGrid,
 			"aria-pressed": i,
 			"aria-keyshortcuts": "G",
-			onClick: () => p(!i),
-			children: /* @__PURE__ */ d("span", {
-				className: o,
-				children: [/* @__PURE__ */ u(n, { children: "G" }), /* @__PURE__ */ u("span", { children: b.grid })]
+			onClick: () => o?.(!i),
+			children: /* @__PURE__ */ v("span", {
+				className: p,
+				children: [/* @__PURE__ */ _(n, { children: "G" }), /* @__PURE__ */ _("span", { children: x.grid })]
 			})
-		}), /* @__PURE__ */ u(t, {
+		}), /* @__PURE__ */ _(t, {
 			role: "secondary",
 			size: "sm",
-			"aria-label": `${b.theme}: ${b[m]}`,
+			"aria-label": `${x.theme}: ${x[s]}`,
 			"aria-keyshortcuts": "T",
-			onClick: () => h(a(m)),
-			children: /* @__PURE__ */ d("span", {
-				className: o,
-				children: [/* @__PURE__ */ u(n, { children: "T" }), /* @__PURE__ */ u("span", {
-					className: s,
-					children: b[m]
+			onClick: () => c(l(s)),
+			children: /* @__PURE__ */ v("span", {
+				className: p,
+				children: [/* @__PURE__ */ _(n, { children: "T" }), /* @__PURE__ */ _("span", {
+					className: m,
+					children: x[s]
 				})]
 			})
 		})]
 	});
 }
 //#endregion
-export { p as DisplayControls, i as displayControlThemeModes, a as nextDisplayControlThemeMode };
+export { b as DisplayControls, r as applyDisplayTheme, i as commitDisplayTheme, o as displayControlThemeModes, s as displayThemeNoFlashScript, c as displayThemeStorageKey, l as nextDisplayControlThemeMode, u as persistDisplayTheme, d as readDisplayTheme, f as subscribeDisplayTheme };

package/dist/components/molecules/DisplayControls/displayControlsState.d.ts

@@ -1,5 +1,26 @@
 export declare const displayControlThemeModes: readonly ["auto", "light", "dark"];
 export type DisplayControlThemeMode = (typeof displayControlThemeModes)[number];
+/** `localStorage` key for the appearance choice. The no-flash snippet reads the same key. */
+export declare const displayThemeStorageKey = "wmds-theme";
+/**
+ * Paste into `<head>` before the stylesheet so the first paint matches the saved
+ * appearance. `auto` and a missing key follow `prefers-color-scheme`. `light` clears
+ * `data-theme`. `dark` sets it. No new color — the attribute swaps the existing tokens.
+ */
+export declare const displayThemeNoFlashScript = "(function(){try{var t=localStorage.getItem(\"wmds-theme\");var dark=t===\"dark\"||(t!==\"light\"&&window.matchMedia(\"(prefers-color-scheme: dark)\").matches);var root=document.documentElement;if(dark)root.setAttribute(\"data-theme\",\"dark\");else root.removeAttribute(\"data-theme\");}catch(e){}})();";
+/** Saved appearance. `auto` when nothing valid is stored or storage is blocked. */
+export declare function readDisplayTheme(): DisplayControlThemeMode;
+/** Remembers the appearance. Storage failures leave the attribute change intact. */
+export declare function persistDisplayTheme(mode: DisplayControlThemeMode): void;
+/**
+ * Sets or clears `data-theme` on `<html>`. `light` clears it (the default tokens).
+ * `dark` sets it. `auto` follows the system and keeps listening until the next call.
+ */
+export declare function applyDisplayTheme(mode: DisplayControlThemeMode): void;
+/** Subscribe to `commitDisplayTheme`. Pair with `useSyncExternalStore`. */
+export declare function subscribeDisplayTheme(listener: () => void): () => void;
+/** Saves the choice, applies it, and notifies subscribers. One call from a theme control. */
+export declare function commitDisplayTheme(mode: DisplayControlThemeMode): void;
 export type DisplayControlShortcut = "grid" | "theme";
 export declare function nextDisplayControlThemeMode(current: DisplayControlThemeMode): DisplayControlThemeMode;
 export declare function displayControlShortcutFromEvent(event: Pick<KeyboardEvent, "key" | "metaKey" | "ctrlKey" | "altKey" | "target">): DisplayControlShortcut | null;

package/dist/components/molecules/DisplayControls/displayControlsState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"displayControlsState.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DisplayControls/displayControlsState.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,oCAAqC,CAAC;AAE3E,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;AAChF,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtD,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,uBAAuB,GAC/B,uBAAuB,CAKzB;AAED,wBAAgB,+BAA+B,CAC7C,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC,GAC9E,sBAAsB,GAAG,IAAI,CAQ/B"}
+{"version":3,"file":"displayControlsState.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DisplayControls/displayControlsState.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,oCAAqC,CAAC;AAE3E,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhF,6FAA6F;AAC7F,eAAO,MAAM,sBAAsB,eAAe,CAAC;AAEnD;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,mTAC8P,CAAC;AAMrS,mFAAmF;AACnF,wBAAgB,gBAAgB,IAAI,uBAAuB,CAQ1D;AAED,oFAAoF;AACpF,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,uBAAuB,GAAG,IAAI,CAMvE;AAID;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,uBAAuB,GAAG,IAAI,CAuBrE;AAID,2EAA2E;AAC3E,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAKtE;AAED,6FAA6F;AAC7F,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,uBAAuB,GAAG,IAAI,CAItE;AAED,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtD,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,uBAAuB,GAC/B,uBAAuB,CAKzB;AAED,wBAAgB,+BAA+B,CAC7C,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC,GAC9E,sBAAsB,GAAG,IAAI,CAQ/B"}

package/dist/components/molecules/DisplayControls/displayControlsState.js

@@ -5,14 +5,56 @@ var t = [
 	"auto",
 	"light",
 	"dark"
-];
-function n(e) {
+], n = "wmds-theme", r = "(function(){try{var t=localStorage.getItem(\"wmds-theme\");var dark=t===\"dark\"||(t!==\"light\"&&window.matchMedia(\"(prefers-color-scheme: dark)\").matches);var root=document.documentElement;if(dark)root.setAttribute(\"data-theme\",\"dark\");else root.removeAttribute(\"data-theme\");}catch(e){}})();";
+function i(e) {
+	return e === "auto" || e === "light" || e === "dark";
+}
+function a() {
+	try {
+		let e = localStorage.getItem(n);
+		if (i(e)) return e;
+	} catch {}
+	return "auto";
+}
+function o(e) {
+	try {
+		localStorage.setItem(n, e);
+	} catch {}
+}
+var s = null;
+function c(e) {
+	if (s?.(), s = null, typeof document > "u") return;
+	let t = document.documentElement;
+	if (e === "dark") {
+		t.setAttribute("data-theme", "dark");
+		return;
+	}
+	if (e === "light") {
+		t.removeAttribute("data-theme");
+		return;
+	}
+	let n = window.matchMedia("(prefers-color-scheme: dark)"), r = () => {
+		n.matches ? t.setAttribute("data-theme", "dark") : t.removeAttribute("data-theme");
+	};
+	r(), n.addEventListener("change", r), s = () => n.removeEventListener("change", r);
+}
+var l = /* @__PURE__ */ new Set();
+function u(e) {
+	return l.add(e), () => {
+		l.delete(e);
+	};
+}
+function d(e) {
+	o(e), c(e);
+	for (let e of l) e();
+}
+function f(e) {
 	return t[(t.indexOf(e) + 1) % t.length];
 }
-function r(t) {
+function p(t) {
 	if (t.metaKey || t.ctrlKey || t.altKey || e(t.target)) return null;
 	let n = t.key.toLowerCase();
 	return n === "g" ? "grid" : n === "t" ? "theme" : null;
 }
 //#endregion
-export { r as displayControlShortcutFromEvent, t as displayControlThemeModes, n as nextDisplayControlThemeMode };
+export { c as applyDisplayTheme, d as commitDisplayTheme, p as displayControlShortcutFromEvent, t as displayControlThemeModes, r as displayThemeNoFlashScript, n as displayThemeStorageKey, f as nextDisplayControlThemeMode, o as persistDisplayTheme, a as readDisplayTheme, u as subscribeDisplayTheme };

package/dist/components/molecules/LogView/LogView.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+/** Layout-only — height and margin. Not for re-theming the log. */
+export type LogViewLayoutClassName = string;
+export interface LogViewLabels {
+    copy: string;
+    copied: string;
+    follow: string;
+    following: string;
+    empty: string;
+}
+export interface LogViewProps {
+    /** Log text, one entry per line. */
+    lines: readonly string[];
+    /** Accessible name of the log, for example "Scan log". */
+    label: string;
+    /** When true, the scroller stays on the last line. */
+    follow?: boolean;
+    onFollowChange?: (follow: boolean) => void;
+    /** Skeleton in the scroller. The line count stays hidden. */
+    loading?: boolean;
+    /** Replaces the lines when there are none. Default: "No log lines". */
+    empty?: ReactNode;
+    labels?: Partial<LogViewLabels>;
+    className?: LogViewLayoutClassName;
+}
+/**
+ * Scrolling log — line numbers, a tabular count, Copy, and Follow.
+ * Compose it inside a dark detail pane. The pane owns `data-theme`.
+ */
+export declare function LogView({ lines, label, follow, onFollowChange, loading, empty, labels: labelsProp, className, }: LogViewProps): import("react").JSX.Element;
+//# sourceMappingURL=LogView.d.ts.map

package/dist/components/molecules/LogView/LogView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogView.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LogView/LogView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiB1E,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,MAAM,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,oCAAoC;IACpC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,sBAAsB,CAAC;CACpC;AAcD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,MAAc,EACd,cAAc,EACd,OAAe,EACf,KAAK,EACL,MAAM,EAAE,UAAU,EAClB,SAAS,GACV,EAAE,YAAY,+BAsFd"}

package/dist/components/molecules/LogView/LogView.js

@@ -0,0 +1,109 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { buttonStatusHoldMs as t } from "../../atoms/Button/buttonStatusStyles.js";
+import { Button as n } from "../../atoms/Button/Button.js";
+import { Skeleton as r } from "../../atoms/Skeleton/Skeleton.js";
+import { logViewActionsClasses as i, logViewCountClasses as a, logViewEmptyClasses as o, logViewLineClasses as s, logViewNumberClasses as c, logViewRootClasses as l, logViewScrollerClasses as u, logViewTextClasses as d, logViewToolbarClasses as f } from "./logViewStyles.js";
+import { useLayoutEffect as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/molecules/LogView/LogView.tsx
+var v = {
+	copy: "Copy",
+	copied: "Copied",
+	follow: "Follow",
+	following: "Following",
+	empty: "No log lines"
+};
+function y(e) {
+	return e === 1 ? "1 line" : `${e} lines`;
+}
+function b({ lines: b, label: x, follow: S = !1, onFollowChange: C, loading: w = !1, empty: T, labels: E, className: D }) {
+	let O = {
+		...v,
+		...E
+	}, k = m(null), [A, j] = h(!1), M = b.length, N = !w && M > 0;
+	p(() => {
+		if (!S || !N) return;
+		let e = k.current;
+		e != null && (e.scrollTop = e.scrollHeight);
+	}, [
+		S,
+		b,
+		N
+	]), p(() => {
+		if (!A) return;
+		let e = window.setTimeout(() => j(!1), t);
+		return () => window.clearTimeout(e);
+	}, [A]);
+	async function P() {
+		let e = b.join("\n");
+		try {
+			await navigator.clipboard.writeText(e), j(!0);
+		} catch {
+			j(!1);
+		}
+	}
+	return /* @__PURE__ */ _("div", {
+		className: e(l, D),
+		"data-follow": S ? "" : void 0,
+		children: [/* @__PURE__ */ _("div", {
+			className: f,
+			children: [w ? null : /* @__PURE__ */ g("span", {
+				className: a,
+				children: y(M)
+			}), /* @__PURE__ */ _("div", {
+				className: i,
+				children: [/* @__PURE__ */ g(n, {
+					role: "secondary",
+					size: "xs",
+					type: "button",
+					disabled: w || M === 0,
+					onClick: () => {
+						P();
+					},
+					children: A ? O.copied : O.copy
+				}), /* @__PURE__ */ g(n, {
+					role: "ghost",
+					size: "xs",
+					type: "button",
+					"aria-pressed": S,
+					disabled: w,
+					onClick: () => C?.(!S),
+					children: S ? O.following : O.follow
+				})]
+			})]
+		}), /* @__PURE__ */ _("div", {
+			ref: k,
+			className: u,
+			role: "log",
+			"aria-label": x,
+			"aria-busy": w || void 0,
+			children: [
+				w ? /* @__PURE__ */ g(r, {
+					className: "m-3",
+					width: "100%",
+					height: 96,
+					radius: "inner"
+				}) : null,
+				!w && M === 0 ? /* @__PURE__ */ g("p", {
+					className: o,
+					role: "status",
+					children: T ?? O.empty
+				}) : null,
+				N ? b.map((e, t) => /* @__PURE__ */ _("div", {
+					className: s,
+					children: [/* @__PURE__ */ g("span", {
+						className: c,
+						"aria-hidden": "true",
+						children: t + 1
+					}), /* @__PURE__ */ g("span", {
+						className: d,
+						children: e
+					})]
+				}, `${t}-${e}`)) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { b as LogView };