@hansenexus/hud 0.2.0 → 0.4.0

package/dist/plugins/design.js

@@ -0,0 +1,619 @@
+import { i as definePlugin } from "../plugins-DVy_vaYr.js";
+import { a as getForceStateSnapshot, c as subscribeForceState, i as formatForceStateParam, n as FORCE_STATE_MARKER, o as getForceStateStore, r as FORCE_STATE_PARAM, s as resolveForcedState, t as FORCED_STATES } from "../force-state-BaqWsmrf.js";
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/design/styles.ts
+/**
+* Design plugin styles. Each panel renders them in a `<style>` inside the
+* HUD's shadow root, so the core stylesheet carries nothing for an app that
+* omits the plugin. Built on the shell's `--hud-*` tokens.
+*/
+const DESIGN_CSS = `
+.design { display: flex; flex-direction: column; gap: 12px; }
+.design-section { display: flex; flex-direction: column; gap: 6px; }
+.design-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--hud-fg-muted);
+}
+.design-muted { color: var(--hud-fg-muted); }
+.design-hint { color: var(--hud-fg-muted); font-size: 11px; }
+.design-mono { font-family: var(--hud-mono); }
+.hud .design-link {
+  color: var(--hud-accent);
+  text-decoration: none;
+  cursor: pointer;
+}
+.hud .design-link:hover { text-decoration: underline; }
+
+.design-swatches {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 6px;
+}
+.hud .design-swatch {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--hud-border);
+  border-radius: 6px;
+  text-align: left;
+}
+.hud .design-swatch:hover { border-color: var(--hud-accent); }
+.design-chip {
+  display: block;
+  height: 28px;
+  border-bottom: 1px solid var(--hud-border);
+  background-image: repeating-linear-gradient(
+    45deg, var(--hud-bg-subtle) 0 4px, transparent 4px 8px
+  );
+}
+.design-swatch-text {
+  display: flex;
+  flex-direction: column;
+  padding: 3px 6px;
+  min-width: 0;
+  font-family: var(--hud-mono);
+  font-size: 10px;
+}
+.design-swatch-text span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.design-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.design-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.design-badge {
+  padding: 0 6px;
+  border: 1px solid var(--hud-border);
+  border-radius: 999px;
+  font-family: var(--hud-mono);
+  font-size: 10px;
+  white-space: nowrap;
+}
+.design-badge[data-tone="active"] { color: var(--hud-good); border-color: currentColor; }
+.design-badge[data-tone="forced"] {
+  color: var(--hud-bg);
+  background: var(--hud-warn);
+  border-color: var(--hud-warn);
+}
+
+.design-boundary { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
+.design-segments { display: flex; gap: 2px; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
+.hud .design-segment {
+  flex: 1;
+  padding: 2px 4px;
+  border: 1px solid var(--hud-border);
+  border-radius: 4px;
+  font-family: var(--hud-mono);
+  font-size: 10px;
+  text-align: center;
+}
+.hud .design-segment:hover { background: var(--hud-bg-subtle); }
+.hud .design-segment[aria-pressed="true"] {
+  background: var(--hud-accent);
+  border-color: var(--hud-accent);
+  color: var(--hud-bg);
+}
+
+.hud .design-button {
+  align-self: flex-start;
+  padding: 2px 10px;
+  border: 1px solid var(--hud-border);
+  border-radius: 4px;
+}
+.hud .design-button:hover:not(:disabled) { background: var(--hud-bg-subtle); }
+.hud .design-button:disabled { opacity: 0.5; cursor: default; }
+
+.design-field {
+  width: 100%;
+  padding: 4px 6px;
+  border: 1px solid var(--hud-border);
+  border-radius: 4px;
+  background: var(--hud-bg-subtle);
+  color: var(--hud-fg);
+  font-family: var(--hud-mono);
+  font-size: 11px;
+}
+textarea.design-field { min-height: 44px; resize: vertical; }
+.design-result[data-ok="true"] { color: var(--hud-good); }
+.design-result[data-ok="false"] { color: var(--hud-poor); }
+`;
+//#endregion
+//#region src/plugins/design/force-state-panel.tsx
+const CHOICES = [null, ...FORCED_STATES];
+function useForceState() {
+	return useSyncExternalStore(subscribeForceState, getForceStateSnapshot, getForceStateSnapshot);
+}
+/**
+* Pill content: how many boundaries are forced, by toggle or param. Uses the
+* core `.dot`, since the plugin stylesheet only loads with the panel.
+*/
+function ForceStatePill() {
+	const snapshot = useForceState();
+	const forced = snapshot.boundaries.filter((b) => resolveForcedState(snapshot, b)).length;
+	if (forced === 0) return /* @__PURE__ */ jsx(Fragment, { children: "States" });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "dot",
+			"data-rating": "needs-improvement"
+		}),
+		"States ",
+		forced
+	] });
+}
+/**
+* Toggles every mounted `StateBoundary` between its real state and a forced
+* loading, empty or error. Toggles live in memory: a reload returns every
+* boundary to auto, so a forgotten toggle cannot outlive the page.
+*/
+function ForceStatePanel() {
+	const store = getForceStateStore();
+	const snapshot = useForceState();
+	const hasOverrides = Object.keys(snapshot.overrides).length > 0;
+	useEffect(() => store.syncSearch(window.location.search), [store]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "design",
+		"data-hud-force-state": "",
+		children: [
+			/* @__PURE__ */ jsx("style", { children: DESIGN_CSS }),
+			/* @__PURE__ */ jsxs("section", {
+				className: "design-section",
+				"aria-label": "State boundaries",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "design-heading",
+					children: [/* @__PURE__ */ jsx("span", { children: "State boundaries" }), hasOverrides && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "design-link",
+						onClick: () => store.clearOverrides(),
+						children: "reset all"
+					})]
+				}), snapshot.boundaries.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "design-hint",
+					children: "No state boundary on this page. Wrap a query branch in StateBoundary from @hansenexus/hud/state-boundary to list it here."
+				}) : snapshot.boundaries.map((boundary) => {
+					const override = snapshot.overrides[boundary.id] ?? null;
+					const effective = resolveForcedState(snapshot, boundary);
+					return /* @__PURE__ */ jsxs("div", {
+						className: "design-boundary",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "design-row",
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "design-grow design-mono",
+								children: [boundary.parentId ? "↳ " : "", boundary.id]
+							}), /* @__PURE__ */ jsx("span", {
+								className: "design-badge",
+								"data-tone": effective ? "forced" : void 0,
+								children: effective ?? "real"
+							})]
+						}), /* @__PURE__ */ jsx("fieldset", {
+							className: "design-segments",
+							"aria-label": `${boundary.id} state`,
+							children: CHOICES.map((choice) => /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "design-segment",
+								"aria-pressed": override === choice,
+								onClick: () => store.force(boundary.id, choice),
+								children: choice ?? "auto"
+							}, choice ?? "auto"))
+						})]
+					}, boundary.id);
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "design-section",
+				"aria-label": "URL param",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "design-row",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "design-grow design-mono",
+						children: [
+							"?",
+							FORCE_STATE_PARAM,
+							"="
+						]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "design-mono",
+						children: snapshot.param ? formatForceStateParam(snapshot.param) : "not set"
+					})]
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "design-hint",
+					children: [
+						"?",
+						FORCE_STATE_PARAM,
+						"=loading|empty|error forces the top-level boundaries; ?",
+						FORCE_STATE_PARAM,
+						"=<id>:error targets one. A toggle here wins over the param."
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/plugins/design/tokens.ts
+function describe(token) {
+	return typeof token === "string" ? { cssVar: token } : token;
+}
+/**
+* Reads every token's computed value from the host document.
+*
+* The HUD renders in a shadow root, and host selectors such as
+* `[data-theme="brand"]` never match inside it, so painting `var(--x)` there
+* shows the wrong value for scoped tokens. Instead each group gets a hidden
+* probe element in the host `<body>`, carrying the group's scope attribute,
+* and the panel paints the probe's resolved values.
+*/
+function readTokens(adapter, doc = document) {
+	const view = doc.defaultView;
+	if (!view) return [];
+	return adapter.groups.map((group) => {
+		const probe = doc.createElement("div");
+		probe.setAttribute("data-hud-token-probe", "");
+		probe.setAttribute("aria-hidden", "true");
+		probe.style.setProperty("display", "none", "important");
+		if (group.scope) probe.setAttribute(group.scope.attribute, group.scope.value ?? "");
+		doc.body.appendChild(probe);
+		try {
+			const style = view.getComputedStyle(probe);
+			return {
+				label: group.label,
+				tokens: group.tokens.map(describe).map(({ cssVar, label }) => ({
+					cssVar,
+					label: label ?? cssVar.replace(/^--/, ""),
+					value: style.getPropertyValue(cssVar).trim()
+				}))
+			};
+		} finally {
+			probe.remove();
+		}
+	});
+}
+/**
+* The value as a paintable color, or null. shadcn-style themes store bare HSL
+* channels (`222 47% 11%`), which paint once wrapped in `hsl()`.
+*/
+function tokenColor(value) {
+	if (!value || typeof CSS === "undefined" || typeof CSS.supports !== "function") return null;
+	if (CSS.supports("color", value)) return value;
+	const hsl = `hsl(${value})`;
+	return CSS.supports("color", hsl) ? hsl : null;
+}
+/**
+* Calls `onChange` whenever the host's resolved tokens may have changed: a
+* theme class or attribute flips on `<html>` or `<body>`, a stylesheet is
+* added or removed (HMR), or the OS color scheme changes.
+*/
+function watchTokens(onChange, doc = document) {
+	const observer = new MutationObserver((records) => {
+		if (records.some((record) => record.type === "attributes" || [...record.addedNodes, ...record.removedNodes].some((node) => node.nodeName === "STYLE" || node.nodeName === "LINK"))) onChange();
+	});
+	observer.observe(doc.documentElement, { attributes: true });
+	observer.observe(doc.head, { childList: true });
+	observer.observe(doc.body, { attributes: true });
+	const media = doc.defaultView?.matchMedia?.("(prefers-color-scheme: dark)");
+	media?.addEventListener("change", onChange);
+	return () => {
+		observer.disconnect();
+		media?.removeEventListener("change", onChange);
+	};
+}
+//#endregion
+//#region src/plugins/design/tokens-panel.tsx
+/**
+* Live design-token swatches. Values are read from the host document (see
+* `readTokens`), re-read when the host's theme changes, and painted as
+* resolved literals. Click copies `var(<token>)`.
+*/
+function TokensPanel({ adapter }) {
+	const [groups, setGroups] = useState(() => readTokens(adapter));
+	const [copied, setCopied] = useState(null);
+	const refresh = useCallback(() => setGroups(readTokens(adapter)), [adapter]);
+	useEffect(() => {
+		refresh();
+		return watchTokens(refresh);
+	}, [refresh]);
+	useEffect(() => {
+		if (copied === null) return;
+		const timer = window.setTimeout(() => setCopied(null), 1200);
+		return () => window.clearTimeout(timer);
+	}, [copied]);
+	const copy = (cssVar) => {
+		navigator.clipboard?.writeText(`var(${cssVar})`).catch(() => {});
+		setCopied(cssVar);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "design",
+		children: [
+			/* @__PURE__ */ jsx("style", { children: DESIGN_CSS }),
+			groups.map((group) => /* @__PURE__ */ jsxs("section", {
+				className: "design-section",
+				"aria-label": group.label,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "design-heading",
+					children: [/* @__PURE__ */ jsx("span", { children: group.label }), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "design-link",
+						onClick: refresh,
+						children: "refresh"
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "design-swatches",
+					children: group.tokens.map((token) => {
+						const color = tokenColor(token.value);
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: "design-swatch",
+							title: `var(${token.cssVar}) = ${token.value || "unset"} (click to copy)`,
+							onClick: () => copy(token.cssVar),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "design-chip",
+								"data-token-chip": token.cssVar,
+								style: color ? { background: color } : void 0
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "design-swatch-text",
+								children: [/* @__PURE__ */ jsx("span", { children: copied === token.cssVar ? "copied" : token.label }), /* @__PURE__ */ jsx("span", {
+									className: "design-muted",
+									children: token.value || "unset"
+								})]
+							})]
+						}, token.cssVar);
+					})
+				})]
+			}, group.label)),
+			adapter.sourceHint && /* @__PURE__ */ jsx("p", {
+				className: "design-hint design-mono",
+				children: adapter.sourceHint
+			})
+		]
+	});
+}
+//#endregion
+//#region src/plugins/design/variants-panel.tsx
+function errorMessage(error, fallback) {
+	return error instanceof Error ? error.message : fallback;
+}
+function useCategories(source) {
+	const [loaded, setLoaded] = useState(() => typeof source === "function" ? { state: "loading" } : {
+		state: "ready",
+		categories: source
+	});
+	useEffect(() => {
+		if (typeof source !== "function") {
+			setLoaded({
+				state: "ready",
+				categories: source
+			});
+			return;
+		}
+		let live = true;
+		setLoaded({ state: "loading" });
+		source().then((categories) => live && setLoaded({
+			state: "ready",
+			categories
+		}), (error) => live && setLoaded({
+			state: "failed",
+			error: errorMessage(error, "loading failed")
+		}));
+		return () => {
+			live = false;
+		};
+	}, [source]);
+	return loaded;
+}
+function groupByDomain(categories) {
+	const grouped = /* @__PURE__ */ new Map();
+	for (const category of categories) {
+		const key = category.domain ?? "shared";
+		grouped.set(key, [...grouped.get(key) ?? [], category]);
+	}
+	return [...grouped];
+}
+/**
+* Variant overview over an app-provided adapter: registered categories with
+* status, drill-in links (or the in-page preview), and the generate-brief
+* queue. Voting stays on the review dashboard; it needs the showcase.
+*/
+function VariantsPanel({ adapter, ctx }) {
+	const loaded = useCategories(adapter.categories);
+	const { reviewHref, categoryHref, openPreview, generate } = adapter;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "design",
+		children: [
+			/* @__PURE__ */ jsx("style", { children: DESIGN_CSS }),
+			/* @__PURE__ */ jsxs("section", {
+				className: "design-section",
+				"aria-label": "Categories",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "design-heading",
+						children: [/* @__PURE__ */ jsxs("span", { children: ["Categories", loaded.state === "ready" ? ` (${loaded.categories.length})` : ""] }), reviewHref && /* @__PURE__ */ jsx("a", {
+							className: "design-link",
+							href: reviewHref,
+							children: "review ↗"
+						})]
+					}),
+					loaded.state === "loading" && /* @__PURE__ */ jsx("p", {
+						className: "design-hint",
+						children: "Loading…"
+					}),
+					loaded.state === "failed" && /* @__PURE__ */ jsx("p", {
+						className: "design-result",
+						"data-ok": "false",
+						children: loaded.error
+					}),
+					loaded.state === "ready" && loaded.categories.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: "design-hint",
+						children: "No variant categories registered for this app."
+					}),
+					loaded.state === "ready" && groupByDomain(loaded.categories).map(([domain, list]) => /* @__PURE__ */ jsxs("div", {
+						className: "design-section",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "design-heading",
+							children: domain
+						}), list.map((category) => /* @__PURE__ */ jsxs("div", {
+							className: "design-row",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "design-badge",
+									"data-tone": category.status === "active" ? "active" : void 0,
+									children: category.status
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "design-grow",
+									children: category.name
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "design-muted",
+									children: [
+										category.alternativeCount,
+										" alt",
+										category.alternativeCount === 1 ? "" : "s"
+									]
+								}),
+								openPreview ? /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "design-link",
+									onClick: () => openPreview(category.id),
+									children: "open"
+								}) : categoryHref ? /* @__PURE__ */ jsx("a", {
+									className: "design-link",
+									href: categoryHref(category.id),
+									children: "open ↗"
+								}) : null
+							]
+						}, category.id))]
+					}, domain))
+				]
+			}),
+			generate && ctx.can("variants.generate") && /* @__PURE__ */ jsx(GenerateForm, { generate })
+		]
+	});
+}
+function GenerateForm({ generate }) {
+	const [path, setPath] = useState("");
+	const [brief, setBrief] = useState("");
+	const [sending, setSending] = useState(false);
+	const [result, setResult] = useState(null);
+	const submit = async () => {
+		if (!path.trim()) return;
+		setSending(true);
+		setResult(null);
+		try {
+			setResult(await generate({
+				path: path.trim(),
+				brief: brief.trim(),
+				count: 3
+			}));
+		} catch (error) {
+			setResult({
+				ok: false,
+				error: errorMessage(error, "generate failed")
+			});
+		} finally {
+			setSending(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: "design-section",
+		"aria-label": "Generate variants",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "design-heading",
+				children: "Generate variants"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				className: "design-field",
+				"aria-label": "Component path",
+				placeholder: "src/components/… (repo-relative)",
+				value: path,
+				onChange: (e) => setPath(e.target.value)
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				className: "design-field",
+				"aria-label": "Brief",
+				placeholder: "Brief, e.g. three denser table treatments",
+				value: brief,
+				onChange: (e) => setBrief(e.target.value)
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "design-button",
+				disabled: sending || !path.trim(),
+				onClick: submit,
+				children: "Queue 3 variants"
+			}),
+			result && /* @__PURE__ */ jsx("p", {
+				className: "design-result design-mono",
+				"data-ok": result.ok,
+				children: result.ok ? `queued → ${result.markerPath ?? "ok"}` : result.error ?? "failed"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/plugins/design/index.tsx
+/**
+* Live swatches of the host app's design tokens. Values are read from the
+* host document, outside the HUD's shadow root, so scoped and themed tokens
+* show what the page actually renders. Client only.
+*/
+function tokens(adapter) {
+	function Panel() {
+		return /* @__PURE__ */ jsx(TokensPanel, { adapter });
+	}
+	return definePlugin({
+		id: "tokens",
+		title: "Tokens",
+		panel: Panel
+	});
+}
+/**
+* The app's variant categories and the generate-brief queue, over an adapter
+* onto the app's own registry. Generating needs `variants.generate`. Client only.
+*/
+function variants(adapter) {
+	function Panel({ ctx }) {
+		return /* @__PURE__ */ jsx(VariantsPanel, {
+			adapter,
+			ctx
+		});
+	}
+	return definePlugin({
+		id: "variants",
+		title: "Variants",
+		panel: Panel
+	});
+}
+/**
+* Forces the page's `StateBoundary`s (`@hansenexus/hud/state-boundary`) to
+* loading, empty or error. The pill shows how many are forced. Client only.
+*/
+function forceState() {
+	return definePlugin({
+		id: "states",
+		title: "States",
+		capability: "state.force",
+		pill: ForceStatePill,
+		panel: ForceStatePanel,
+		commands: [{
+			id: "reset",
+			title: "Reset forced states",
+			run: () => getForceStateStore().clearOverrides()
+		}]
+	});
+}
+//#endregion
+export { FORCED_STATES, FORCE_STATE_MARKER, FORCE_STATE_PARAM, forceState, tokens, variants };

package/dist/plugins/observe.d.ts

@@ -0,0 +1,64 @@
+import { c as HudPluginProps } from "../plugins-CQ_0w1ot.js";
+//#region src/plugins/observe/capture.d.ts
+/**
+ * Browser-side capture into the shared ring buffer: console.log/warn/error,
+ * uncaught errors and rejections, fetch timing, and long tasks. The observe
+ * pill installs it when the HUD mounts, so whatever happens before the panel
+ * is first opened is already there.
+ */
+interface CaptureOptions {
+  /** Requests to leave out of the log. Default: the HUD's own `/api/hud/` calls. */
+  ignore?: (url: string) => boolean;
+}
+//#endregion
+//#region src/plugins/observe/info-tab.d.ts
+/** The signed-in user as the app knows it. Every field is optional. */
+interface HudUserInfo {
+  name?: string;
+  email?: string;
+  id?: string;
+  role?: string;
+  /** App-specific extras (organization, tier, locale ...). */
+  extra?: Record<string, string>;
+}
+//#endregion
+//#region src/plugins/observe/capture-buffer.d.ts
+type CaptureKind = "log" | "warn" | "error" | "fetch" | "longtask";
+interface CaptureEntry {
+  id: number;
+  ts: number;
+  kind: CaptureKind;
+  text: string;
+  status?: number;
+  durationMs?: number;
+}
+//#endregion
+//#region src/plugins/observe/index.d.ts
+export interface ObserveOptions extends CaptureOptions {
+  /**
+   * Values for the Info tab, read at the app's import site so Next can inline
+   * them: `{ NODE_ENV: process.env.NODE_ENV, CONVEX_URL: process.env.NEXT_PUBLIC_CONVEX_URL }`.
+   * `undefined` shows as "not set".
+   */
+  env?: Readonly<Record<string, string | undefined>>;
+  /** A hook returning the signed-in user, called inside the Info tab. */
+  useUser?: () => HudUserInfo | null | undefined;
+}
+/**
+ * Console and network capture, an app/build/browser/user snapshot and the
+ * page's Web Vitals. The pill counts errors; opening the panel while there are
+ * any lands on the console filtered to them.
+ */
+export declare function observe({ env, useUser, ignore }?: ObserveOptions): {
+  readonly id: "observe";
+  readonly title: "Observe";
+  readonly pill: () => import("react").JSX.Element;
+  readonly panel: ({ ctx }: HudPluginProps) => import("react").JSX.Element;
+  readonly commands: readonly [{
+    readonly id: "clear";
+    readonly title: "Clear console capture";
+    readonly run: () => void;
+  }];
+};
+//#endregion
+export type { CaptureEntry, CaptureKind, CaptureOptions, HudUserInfo };