@shadow-js/devtools 0.0.0-stage → 1.0.0

package/dist/dev/ui/state.d.ts

@@ -0,0 +1,192 @@
+import { ErrorRecord, HydrationRecord } from "../model.js";
+import { ComponentStat, Explanation, FlameFlush, GraphSnapshot, SnapshotNode } from "../inspector.js";
+import { Backend } from "../backend.js";
+import { TreeRow } from "./rows.js";
+import { Accessor } from "@shadow-js/core";
+//#region src/ui/state.d.ts
+/** The panel's tabs. @since 1.0.0 */
+export type TabId = "tree" | "timeline" | "state" | "issues";
+/**
+ * The panel's tabs in display order. Each entry has the tab's `id` and the label shown on it.
+ *
+ * @example
+ * import { TABS } from "@shadow-js/devtools";
+ * for (const tab of TABS) console.log(tab.id, tab.label);
+ * @since 1.0.0
+ */
+export declare const TABS: ReadonlyArray<{
+  id: TabId;
+  label: string;
+}>;
+/** Everything the panel's components read and write. All state is signals; the heavy views are memos. @since 1.0.0 */
+export interface PanelState {
+  /**
+   * The backend the panel reads from. The panel does not know whether it is local or remote.
+   */
+  readonly backend: Backend;
+  /**
+   * The active tab.
+   */
+  readonly tab: Accessor<TabId>;
+  /**
+   * Makes `tab` the active tab.
+   */
+  setTab(tab: TabId): void;
+  /**
+   * Id of the selected node. `0` when no node is selected, because `NO_ID` never names a node.
+   */
+  readonly selected: Accessor<number>;
+  /**
+   * Selects the node with this id.
+   */
+  select(id: number): void;
+  /**
+   * The tree's text filter.
+   */
+  readonly filter: Accessor<string>;
+  /**
+   * Sets the tree's text filter. Matching rows are shown with their ancestors.
+   */
+  setFilter(text: string): void;
+  /**
+   * Whether the tree shows components only.
+   */
+  readonly componentsOnly: Accessor<boolean>;
+  /**
+   * Shows components only when `on` is true, and every node otherwise.
+   */
+  setComponentsOnly(on: boolean): void;
+  /**
+   * Ids of the nodes the user collapsed.
+   */
+  readonly collapsed: Accessor<ReadonlySet<number>>;
+  /**
+   * Collapses the node when it is expanded, and expands it when it is collapsed.
+   */
+  toggleCollapsed(id: number): void;
+  /**
+   * The most tree rows shown at once.
+   */
+  readonly rowLimit: Accessor<number>;
+  /**
+   * Doubles the row limit. The tree's Show more button calls this.
+   */
+  showMoreRows(): void;
+  /**
+   * Whether components flash when they update.
+   */
+  readonly flash: Accessor<boolean>;
+  /**
+   * Switches flashing on or off, then calls `onFlash`.
+   */
+  setFlash(on: boolean): void;
+  /**
+   * Whether the user paused recording.
+   */
+  readonly paused: Accessor<boolean>;
+  /**
+   * Pauses or resumes recording. Sends `pause` or `resume` to the backend, then calls `onPause`.
+   */
+  setPaused(on: boolean): void;
+  /** Counter bumped each time the model changed; views depend on it. */
+  readonly version: Accessor<number>;
+  /** Re-reads the model now. */
+  refresh(): void;
+  /**
+   * The graph snapshot of the backend's model. Recomputed when `version` changes.
+   */
+  readonly snapshot: Accessor<GraphSnapshot>;
+  /**
+   * The nodes of {@link PanelState.snapshot}, by id.
+   */
+  readonly nodes: Accessor<ReadonlyMap<number, SnapshotNode>>;
+  /**
+   * The tree rows for the current filter, switches, collapse state and row limit, and how many matching
+   * rows the limit cut.
+   */
+  readonly rows: Accessor<{
+    rows: TreeRow[];
+    hidden: number;
+  }>;
+  /**
+   * The selected node, or `undefined` when it is not in the snapshot.
+   */
+  readonly selectedNode: Accessor<SnapshotNode | undefined>;
+  /**
+   * Why the selected memo or effect last ran, or `null` when the selected node is not a memo or effect.
+   */
+  readonly explanation: Accessor<Explanation | null>;
+  /**
+   * The newest 12 flushes, laid out as flame lanes.
+   */
+  readonly flames: Accessor<FlameFlush[]>;
+  /**
+   * Up to 10 components that re-ran, most re-runs first.
+   */
+  readonly hot: Accessor<ComponentStat[]>;
+  /**
+   * The errors the runtime reported, newest first.
+   */
+  readonly errors: Accessor<ErrorRecord[]>;
+  /**
+   * The hydration mismatches, newest first.
+   */
+  readonly hydration: Accessor<HydrationRecord[]>;
+  /** Highlights a component on the page. */
+  highlight(id: number | null): void;
+  /** The display name of a node, `#id` when it is gone. */
+  nameOf(id: number): string;
+}
+/**
+ * Options of {@link createPanelState}. Every field is optional.
+ *
+ * @since 1.0.0
+ */
+export interface PanelStateOptions {
+  /**
+   * Called when the user switches flashing on or off.
+   */
+  onFlash?(on: boolean): void;
+  /**
+   * Called with the pause state the user chose. The state also sends `pause` or `resume` to the backend,
+   * so the agent stops or resumes recording either way.
+   */
+  onPause?(paused: boolean): void;
+  /**
+   * Starting tab.
+   *
+   * @default "tree"
+   */
+  tab?: TabId;
+  /**
+   * Starting row limit of the tree.
+   *
+   * @default 300
+   */
+  rowLimit?: number;
+  /**
+   * Starting value of the flash switch.
+   *
+   * @default true
+   */
+  flash?: boolean;
+}
+/**
+ * Creates the panel's state. Call it inside the panel's reactive root, because the memos belong to the
+ * current owner. The heavy views (snapshot, rows, flame lanes) are memos of the `version` counter, so a
+ * burst of model changes costs one recomputation per refresh.
+ *
+ * @param backend The backend to read from.
+ * @param options Initial values and callbacks.
+ * @returns The state.
+ * @example
+ * import { createAgent, createLocalBackend, createPanelState } from "@shadow-js/devtools";
+ * const backend = createLocalBackend(createAgent());
+ * // Inside the panel's reactive root (the one render() creates):
+ * const state = createPanelState(backend, { tab: "timeline", flash: false });
+ * state.setTab("issues");
+ * @since 1.0.0
+ */
+export declare function createPanelState(backend: Backend, options?: PanelStateOptions): PanelState;
+//#endregion
+//# sourceMappingURL=state.d.ts.map

package/dist/dev/ui/state.js

@@ -0,0 +1,147 @@
+import { componentStats, explainRun, flameTimeline, nodeLabel, snapshotOf } from "../inspector.js";
+import { buildRows } from "./rows.js";
+import { useMemo, useSignal } from "@shadow-js/core";
+//#region src/ui/state.ts
+/**
+* The panel's tabs in display order. Each entry has the tab's `id` and the label shown on it.
+*
+* @example
+* import { TABS } from "@shadow-js/devtools";
+* for (const tab of TABS) console.log(tab.id, tab.label);
+* @since 1.0.0
+*/
+const TABS = [
+	{
+		id: "tree",
+		label: "Components"
+	},
+	{
+		id: "timeline",
+		label: "Timeline"
+	},
+	{
+		id: "state",
+		label: "State"
+	},
+	{
+		id: "issues",
+		label: "Issues"
+	}
+];
+/**
+* Creates the panel's state. Call it inside the panel's reactive root, because the memos belong to the
+* current owner. The heavy views (snapshot, rows, flame lanes) are memos of the `version` counter, so a
+* burst of model changes costs one recomputation per refresh.
+*
+* @param backend The backend to read from.
+* @param options Initial values and callbacks.
+* @returns The state.
+* @example
+* import { createAgent, createLocalBackend, createPanelState } from "@shadow-js/devtools";
+* const backend = createLocalBackend(createAgent());
+* // Inside the panel's reactive root (the one render() creates):
+* const state = createPanelState(backend, { tab: "timeline", flash: false });
+* state.setTab("issues");
+* @since 1.0.0
+*/
+function createPanelState(backend, options = {}) {
+	const [tab, setTab] = useSignal(options.tab ?? "tree");
+	const [selected, setSelected] = useSignal(0);
+	const [filter, setFilter] = useSignal("");
+	const [componentsOnly, setComponentsOnly] = useSignal(false);
+	const [collapsed, setCollapsed] = useSignal(/* @__PURE__ */ new Set());
+	const [rowLimit, setRowLimit] = useSignal(options.rowLimit ?? 300);
+	const [flash, setFlashSignal] = useSignal(options.flash !== false);
+	const [paused, setPausedSignal] = useSignal(false);
+	const [version, setVersion] = useSignal(0);
+	const snapshot = useMemo(() => {
+		version();
+		return snapshotOf(backend.model);
+	});
+	const nodes = useMemo(() => new Map(snapshot().nodes.map((node) => [node.id, node])));
+	const rows = useMemo(() => buildRows(snapshot(), {
+		filter: filter(),
+		componentsOnly: componentsOnly(),
+		collapsed: collapsed(),
+		limit: rowLimit()
+	}));
+	const selectedNode = useMemo(() => nodes().get(selected()));
+	return {
+		backend,
+		tab,
+		setTab,
+		selected,
+		select: setSelected,
+		filter,
+		setFilter,
+		componentsOnly,
+		setComponentsOnly,
+		collapsed,
+		toggleCollapsed(id) {
+			setCollapsed((current) => {
+				const next = new Set(current);
+				if (!next.delete(id)) next.add(id);
+				return next;
+			});
+		},
+		rowLimit,
+		showMoreRows() {
+			setRowLimit((limit) => limit * 2);
+		},
+		flash,
+		setFlash(on) {
+			setFlashSignal(on);
+			options.onFlash?.(on);
+		},
+		paused,
+		setPaused(on) {
+			setPausedSignal(on);
+			backend.request({ type: on ? "pause" : "resume" });
+			options.onPause?.(on);
+		},
+		version,
+		refresh() {
+			setVersion((current) => current + 1);
+		},
+		snapshot,
+		nodes,
+		rows,
+		selectedNode,
+		explanation: useMemo(() => {
+			version();
+			const node = selectedNode();
+			if (node === void 0 || node.type !== "memo" && node.type !== "effect") return null;
+			return explainRun(backend.model, node.id);
+		}),
+		flames: useMemo(() => {
+			version();
+			return flameTimeline(backend.model, { last: 12 });
+		}),
+		hot: useMemo(() => {
+			version();
+			return componentStats(backend.model).filter((stat) => stat.updates > 0).slice(0, 10);
+		}),
+		errors: useMemo(() => {
+			version();
+			return backend.model.errors.toArray().reverse();
+		}),
+		hydration: useMemo(() => {
+			version();
+			return backend.model.hydration.toArray().reverse();
+		}),
+		highlight(id) {
+			backend.request({
+				type: "highlight",
+				id
+			});
+		},
+		nameOf(id) {
+			const node = nodes().get(id) ?? backend.model.node(id);
+			return node === void 0 ? `#${id}` : nodeLabel(node);
+		}
+	};
+}
+//#endregion
+export { TABS, createPanelState };
+
+//# sourceMappingURL=state.js.map

package/dist/dev/ui/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","names":[],"sources":["../../../src/ui/state.ts"],"sourcesContent":["import { type Accessor, useMemo, useSignal } from \"@shadow-js/core\";\nimport type { Backend } from \"../backend\";\nimport {\n  type ComponentStat,\n  componentStats,\n  type Explanation,\n  explainRun,\n  type FlameFlush,\n  flameTimeline,\n  type GraphSnapshot,\n  nodeLabel,\n  type SnapshotNode,\n  snapshotOf,\n} from \"../inspector\";\nimport type { ErrorRecord, HydrationRecord } from \"../model\";\nimport { buildRows, type TreeRow } from \"./rows\";\n\n/** The panel's tabs. @since 1.0.0 */\nexport type TabId = \"tree\" | \"timeline\" | \"state\" | \"issues\";\n\n/**\n * The panel's tabs in display order. Each entry has the tab's `id` and the label shown on it.\n *\n * @example\n * import { TABS } from \"@shadow-js/devtools\";\n * for (const tab of TABS) console.log(tab.id, tab.label);\n * @since 1.0.0\n */\nexport const TABS: ReadonlyArray<{ id: TabId; label: string }> = [\n  { id: \"tree\", label: \"Components\" },\n  { id: \"timeline\", label: \"Timeline\" },\n  { id: \"state\", label: \"State\" },\n  { id: \"issues\", label: \"Issues\" },\n];\n\n/** Everything the panel's components read and write. All state is signals; the heavy views are memos. @since 1.0.0 */\nexport interface PanelState {\n  /**\n   * The backend the panel reads from. The panel does not know whether it is local or remote.\n   */\n  readonly backend: Backend;\n  /**\n   * The active tab.\n   */\n  readonly tab: Accessor<TabId>;\n  /**\n   * Makes `tab` the active tab.\n   */\n  setTab(tab: TabId): void;\n  /**\n   * Id of the selected node. `0` when no node is selected, because `NO_ID` never names a node.\n   */\n  readonly selected: Accessor<number>;\n  /**\n   * Selects the node with this id.\n   */\n  select(id: number): void;\n  /**\n   * The tree's text filter.\n   */\n  readonly filter: Accessor<string>;\n  /**\n   * Sets the tree's text filter. Matching rows are shown with their ancestors.\n   */\n  setFilter(text: string): void;\n  /**\n   * Whether the tree shows components only.\n   */\n  readonly componentsOnly: Accessor<boolean>;\n  /**\n   * Shows components only when `on` is true, and every node otherwise.\n   */\n  setComponentsOnly(on: boolean): void;\n  /**\n   * Ids of the nodes the user collapsed.\n   */\n  readonly collapsed: Accessor<ReadonlySet<number>>;\n  /**\n   * Collapses the node when it is expanded, and expands it when it is collapsed.\n   */\n  toggleCollapsed(id: number): void;\n  /**\n   * The most tree rows shown at once.\n   */\n  readonly rowLimit: Accessor<number>;\n  /**\n   * Doubles the row limit. The tree's Show more button calls this.\n   */\n  showMoreRows(): void;\n  /**\n   * Whether components flash when they update.\n   */\n  readonly flash: Accessor<boolean>;\n  /**\n   * Switches flashing on or off, then calls `onFlash`.\n   */\n  setFlash(on: boolean): void;\n  /**\n   * Whether the user paused recording.\n   */\n  readonly paused: Accessor<boolean>;\n  /**\n   * Pauses or resumes recording. Sends `pause` or `resume` to the backend, then calls `onPause`.\n   */\n  setPaused(on: boolean): void;\n  /** Counter bumped each time the model changed; views depend on it. */\n  readonly version: Accessor<number>;\n  /** Re-reads the model now. */\n  refresh(): void;\n  /**\n   * The graph snapshot of the backend's model. Recomputed when `version` changes.\n   */\n  readonly snapshot: Accessor<GraphSnapshot>;\n  /**\n   * The nodes of {@link PanelState.snapshot}, by id.\n   */\n  readonly nodes: Accessor<ReadonlyMap<number, SnapshotNode>>;\n  /**\n   * The tree rows for the current filter, switches, collapse state and row limit, and how many matching\n   * rows the limit cut.\n   */\n  readonly rows: Accessor<{ rows: TreeRow[]; hidden: number }>;\n  /**\n   * The selected node, or `undefined` when it is not in the snapshot.\n   */\n  readonly selectedNode: Accessor<SnapshotNode | undefined>;\n  /**\n   * Why the selected memo or effect last ran, or `null` when the selected node is not a memo or effect.\n   */\n  readonly explanation: Accessor<Explanation | null>;\n  /**\n   * The newest 12 flushes, laid out as flame lanes.\n   */\n  readonly flames: Accessor<FlameFlush[]>;\n  /**\n   * Up to 10 components that re-ran, most re-runs first.\n   */\n  readonly hot: Accessor<ComponentStat[]>;\n  /**\n   * The errors the runtime reported, newest first.\n   */\n  readonly errors: Accessor<ErrorRecord[]>;\n  /**\n   * The hydration mismatches, newest first.\n   */\n  readonly hydration: Accessor<HydrationRecord[]>;\n  /** Highlights a component on the page. */\n  highlight(id: number | null): void;\n  /** The display name of a node, `#id` when it is gone. */\n  nameOf(id: number): string;\n}\n\n/**\n * Options of {@link createPanelState}. Every field is optional.\n *\n * @since 1.0.0\n */\nexport interface PanelStateOptions {\n  /**\n   * Called when the user switches flashing on or off.\n   */\n  onFlash?(on: boolean): void;\n  /**\n   * Called with the pause state the user chose. The state also sends `pause` or `resume` to the backend,\n   * so the agent stops or resumes recording either way.\n   */\n  onPause?(paused: boolean): void;\n  /**\n   * Starting tab.\n   *\n   * @default \"tree\"\n   */\n  tab?: TabId;\n  /**\n   * Starting row limit of the tree.\n   *\n   * @default 300\n   */\n  rowLimit?: number;\n  /**\n   * Starting value of the flash switch.\n   *\n   * @default true\n   */\n  flash?: boolean;\n}\n\n/**\n * Creates the panel's state. Call it inside the panel's reactive root, because the memos belong to the\n * current owner. The heavy views (snapshot, rows, flame lanes) are memos of the `version` counter, so a\n * burst of model changes costs one recomputation per refresh.\n *\n * @param backend The backend to read from.\n * @param options Initial values and callbacks.\n * @returns The state.\n * @example\n * import { createAgent, createLocalBackend, createPanelState } from \"@shadow-js/devtools\";\n * const backend = createLocalBackend(createAgent());\n * // Inside the panel's reactive root (the one render() creates):\n * const state = createPanelState(backend, { tab: \"timeline\", flash: false });\n * state.setTab(\"issues\");\n * @since 1.0.0\n */\nexport function createPanelState(backend: Backend, options: PanelStateOptions = {}): PanelState {\n  const [tab, setTab] = useSignal<TabId>(options.tab ?? \"tree\");\n  const [selected, setSelected] = useSignal(0);\n  const [filter, setFilter] = useSignal(\"\");\n  const [componentsOnly, setComponentsOnly] = useSignal(false);\n  const [collapsed, setCollapsed] = useSignal<ReadonlySet<number>>(new Set());\n  const [rowLimit, setRowLimit] = useSignal(options.rowLimit ?? 300);\n  const [flash, setFlashSignal] = useSignal(options.flash !== false);\n  const [paused, setPausedSignal] = useSignal(false);\n  const [version, setVersion] = useSignal(0);\n\n  const snapshot = useMemo(() => {\n    version();\n    return snapshotOf(backend.model);\n  });\n  const nodes = useMemo(() => new Map(snapshot().nodes.map((node) => [node.id, node] as const)));\n  const rows = useMemo(() =>\n    buildRows(snapshot(), {\n      filter: filter(),\n      componentsOnly: componentsOnly(),\n      collapsed: collapsed(),\n      limit: rowLimit(),\n    }),\n  );\n  const selectedNode = useMemo(() => nodes().get(selected()));\n  const explanation = useMemo(() => {\n    version();\n    const node = selectedNode();\n    if (node === undefined || (node.type !== \"memo\" && node.type !== \"effect\")) return null;\n    return explainRun(backend.model, node.id);\n  });\n  const flames = useMemo(() => {\n    version();\n    return flameTimeline(backend.model, { last: 12 });\n  });\n  const hot = useMemo(() => {\n    version();\n    return componentStats(backend.model)\n      .filter((stat) => stat.updates > 0)\n      .slice(0, 10);\n  });\n  const errors = useMemo(() => {\n    version();\n    return backend.model.errors.toArray().reverse();\n  });\n  const hydration = useMemo(() => {\n    version();\n    return backend.model.hydration.toArray().reverse();\n  });\n\n  return {\n    backend,\n    tab,\n    setTab,\n    selected,\n    select: setSelected,\n    filter,\n    setFilter,\n    componentsOnly,\n    setComponentsOnly,\n    collapsed,\n    toggleCollapsed(id): void {\n      setCollapsed((current) => {\n        const next = new Set(current);\n        if (!next.delete(id)) next.add(id);\n        return next;\n      });\n    },\n    rowLimit,\n    showMoreRows(): void {\n      setRowLimit((limit) => limit * 2);\n    },\n    flash,\n    setFlash(on): void {\n      setFlashSignal(on);\n      options.onFlash?.(on);\n    },\n    paused,\n    setPaused(on): void {\n      setPausedSignal(on);\n      // Through the backend, so a remote agent pauses too; the callback is for page-side hooks.\n      void backend.request({ type: on ? \"pause\" : \"resume\" });\n      options.onPause?.(on);\n    },\n    version,\n    refresh(): void {\n      setVersion((current) => current + 1);\n    },\n    snapshot,\n    nodes,\n    rows,\n    selectedNode,\n    explanation,\n    flames,\n    hot,\n    errors,\n    hydration,\n    highlight(id): void {\n      void backend.request({ type: \"highlight\", id });\n    },\n    nameOf(id): string {\n      const node = nodes().get(id) ?? backend.model.node(id);\n      return node === undefined ? `#${id}` : nodeLabel(node);\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/dev/ui/styles.d.ts

@@ -0,0 +1,31 @@
+//#region src/ui/styles.d.ts
+/**
+ * The panel's stylesheet. It lives inside the shadow root, so page styles cannot reach the panel and the
+ * panel's styles cannot leak out. Colors follow `prefers-color-scheme`. Development tool: `mountDevtools()`
+ * inserts it in development builds only.
+ *
+ * @example
+ * import { LAUNCHER_CSS, PANEL_CSS } from "@shadow-js/devtools";
+ * const host = document.createElement("div");
+ * const root = host.attachShadow({ mode: "open" });
+ * const style = document.createElement("style");
+ * style.textContent = `${PANEL_CSS}${LAUNCHER_CSS}`;
+ * root.append(style);
+ * document.body.append(host);
+ * @since 1.0.0
+ */
+export declare const PANEL_CSS: string;
+/**
+ * Styles of the small button that opens the panel. Like {@link PANEL_CSS}, it is inserted into the shadow
+ * root by `mountDevtools()` in development builds only.
+ *
+ * @example
+ * import { LAUNCHER_CSS } from "@shadow-js/devtools";
+ * const style = document.createElement("style");
+ * style.textContent = LAUNCHER_CSS;
+ * document.head.append(style);
+ * @since 1.0.0
+ */
+export declare const LAUNCHER_CSS: string;
+//#endregion
+//# sourceMappingURL=styles.d.ts.map

package/dist/dev/ui/styles.js

@@ -0,0 +1,113 @@
+//#region src/ui/styles.ts
+/**
+* The panel's stylesheet. It lives inside the shadow root, so page styles cannot reach the panel and the
+* panel's styles cannot leak out. Colors follow `prefers-color-scheme`. Development tool: `mountDevtools()`
+* inserts it in development builds only.
+*
+* @example
+* import { LAUNCHER_CSS, PANEL_CSS } from "@shadow-js/devtools";
+* const host = document.createElement("div");
+* const root = host.attachShadow({ mode: "open" });
+* const style = document.createElement("style");
+* style.textContent = `${PANEL_CSS}${LAUNCHER_CSS}`;
+* root.append(style);
+* document.body.append(host);
+* @since 1.0.0
+*/
+const PANEL_CSS = `
+:host { all: initial; }
+*, *::before, *::after { box-sizing: border-box; }
+.panel {
+  --bg: #1e1f22; --bg2: #26282c; --bg3: #2f3237; --fg: #d7dae0; --muted: #8d939c; --line: #3a3d42;
+  --accent: #4da3ff; --good: #6bcb77; --warn: #ffc107; --bad: #ff6b6b; --select: #254a73;
+  position: fixed; z-index: 2147483647; width: 460px; height: 380px; min-width: 300px; min-height: 200px;
+  display: flex; flex-direction: column; overflow: hidden; resize: both;
+  background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px;
+  box-shadow: 0 8px 30px rgba(0,0,0,.45); font: 12px/1.45 ui-sans-serif, system-ui, sans-serif;
+}
+@media (prefers-color-scheme: light) {
+  .panel { --bg: #fbfbfc; --bg2: #f0f1f3; --bg3: #e4e6ea; --fg: #22252a; --muted: #6b717b; --line: #cfd3d9;
+    --accent: #0b6bcb; --good: #1f8a3b; --warn: #a66b00; --bad: #c62828; --select: #cfe3fb; }
+}
+.panel[hidden] { display: none; }
+.header { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg2); border-bottom: 1px solid var(--line); cursor: grab; user-select: none; touch-action: none; }
+.header.dragging { cursor: grabbing; }
+.title { font-weight: 600; letter-spacing: .02em; }
+.spacer { flex: 1; }
+.tabs { display: flex; gap: 2px; padding: 4px 6px 0; background: var(--bg2); border-bottom: 1px solid var(--line); }
+.tab { border: 0; background: transparent; color: var(--muted); padding: 5px 10px; border-radius: 6px 6px 0 0; cursor: pointer; font: inherit; }
+.tab[aria-selected="true"] { color: var(--fg); background: var(--bg); box-shadow: inset 0 -2px 0 var(--accent); }
+.badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 8px; background: var(--bg3); color: var(--fg); text-align: center; font-size: 10px; }
+.badge.bad { background: var(--bad); color: #fff; }
+.btn { border: 1px solid var(--line); background: var(--bg3); color: var(--fg); border-radius: 5px; padding: 2px 8px; cursor: pointer; font: inherit; }
+.btn:hover { border-color: var(--accent); }
+.btn[aria-pressed="true"] { background: var(--select); border-color: var(--accent); }
+.body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
+.input, .textarea { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; font: inherit; }
+.input { flex: 1; min-width: 0; }
+.textarea { width: 100%; min-height: 70px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
+.split { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.list { flex: 1; min-height: 60px; overflow: auto; }
+.detail { max-height: 45%; overflow: auto; border-top: 1px solid var(--line); padding: 8px; background: var(--bg2); }
+.row { display: flex; align-items: center; gap: 4px; padding: 1px 8px; cursor: default; white-space: nowrap; }
+.row:hover { background: var(--bg3); }
+.row[aria-selected="true"] { background: var(--select); }
+.twisty { width: 14px; padding: 0; border: 0; background: none; text-align: center; color: var(--muted); cursor: pointer; flex: none; font: inherit; }
+.twisty[hidden] { display: none; }
+.row:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
+.kind { font-size: 10px; padding: 0 4px; border-radius: 3px; background: var(--bg3); color: var(--muted); flex: none; }
+.kind.component { color: var(--accent); }
+.kind.signal { color: var(--good); }
+.kind.memo { color: var(--warn); }
+.name { overflow: hidden; text-overflow: ellipsis; }
+.name.component { color: var(--accent); font-weight: 600; }
+.value { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
+.updates { margin-left: auto; color: var(--warn); font-variant-numeric: tabular-nums; flex: none; }
+.more { padding: 6px 8px; }
+.section { margin-bottom: 8px; }
+.section h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
+.chain { list-style: none; margin: 0; padding: 0; }
+.chain li { padding: 1px 0; }
+.chain li::before { content: "→ "; color: var(--muted); }
+.chain li:first-child::before { content: ""; }
+.link { color: var(--accent); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; }
+.flush { padding: 6px 8px; border-bottom: 1px solid var(--line); }
+.flush-head { display: flex; gap: 8px; color: var(--muted); margin-bottom: 4px; }
+.lanes { position: relative; background: var(--bg2); border-radius: 4px; overflow: hidden; }
+.bar { position: absolute; height: 14px; overflow: hidden; white-space: nowrap; font-size: 10px; line-height: 14px; padding: 0 2px; border-radius: 2px; background: var(--accent); color: #fff; cursor: pointer; }
+.bar.memo { background: var(--warn); color: #000; }
+.bar.unchanged { opacity: .55; }
+.table { width: 100%; border-collapse: collapse; }
+.table th, .table td { text-align: left; padding: 2px 8px; border-bottom: 1px solid var(--line); }
+.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
+.empty { padding: 16px; color: var(--muted); text-align: center; }
+.status { color: var(--muted); }
+.status.bad { color: var(--bad); }
+.status.good { color: var(--good); }
+.issue { padding: 6px 8px; border-bottom: 1px solid var(--line); }
+.issue code { color: var(--bad); }
+.footer { display: flex; gap: 12px; padding: 4px 8px; border-top: 1px solid var(--line); background: var(--bg2); color: var(--muted); }
+`;
+/**
+* Styles of the small button that opens the panel. Like {@link PANEL_CSS}, it is inserted into the shadow
+* root by `mountDevtools()` in development builds only.
+*
+* @example
+* import { LAUNCHER_CSS } from "@shadow-js/devtools";
+* const style = document.createElement("style");
+* style.textContent = LAUNCHER_CSS;
+* document.head.append(style);
+* @since 1.0.0
+*/
+const LAUNCHER_CSS = `
+.launcher { position: fixed; right: 12px; bottom: 12px; z-index: 2147483647; width: 36px; height: 36px; border-radius: 50%;
+  border: 1px solid #3a3d42; background: #1e1f22; color: #4da3ff; font: 600 14px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0,0,0,.4); }
+.launcher:hover { border-color: #4da3ff; }
+.launcher[hidden] { display: none; }
+`;
+//#endregion
+export { LAUNCHER_CSS, PANEL_CSS };
+
+//# sourceMappingURL=styles.js.map

package/dist/dev/ui/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../../src/ui/styles.ts"],"sourcesContent":["/**\n * The panel's stylesheet. It lives inside the shadow root, so page styles cannot reach the panel and the\n * panel's styles cannot leak out. Colors follow `prefers-color-scheme`. Development tool: `mountDevtools()`\n * inserts it in development builds only.\n *\n * @example\n * import { LAUNCHER_CSS, PANEL_CSS } from \"@shadow-js/devtools\";\n * const host = document.createElement(\"div\");\n * const root = host.attachShadow({ mode: \"open\" });\n * const style = document.createElement(\"style\");\n * style.textContent = `${PANEL_CSS}${LAUNCHER_CSS}`;\n * root.append(style);\n * document.body.append(host);\n * @since 1.0.0\n */\nexport const PANEL_CSS: string = `\n:host { all: initial; }\n*, *::before, *::after { box-sizing: border-box; }\n.panel {\n  --bg: #1e1f22; --bg2: #26282c; --bg3: #2f3237; --fg: #d7dae0; --muted: #8d939c; --line: #3a3d42;\n  --accent: #4da3ff; --good: #6bcb77; --warn: #ffc107; --bad: #ff6b6b; --select: #254a73;\n  position: fixed; z-index: 2147483647; width: 460px; height: 380px; min-width: 300px; min-height: 200px;\n  display: flex; flex-direction: column; overflow: hidden; resize: both;\n  background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px;\n  box-shadow: 0 8px 30px rgba(0,0,0,.45); font: 12px/1.45 ui-sans-serif, system-ui, sans-serif;\n}\n@media (prefers-color-scheme: light) {\n  .panel { --bg: #fbfbfc; --bg2: #f0f1f3; --bg3: #e4e6ea; --fg: #22252a; --muted: #6b717b; --line: #cfd3d9;\n    --accent: #0b6bcb; --good: #1f8a3b; --warn: #a66b00; --bad: #c62828; --select: #cfe3fb; }\n}\n.panel[hidden] { display: none; }\n.header { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg2); border-bottom: 1px solid var(--line); cursor: grab; user-select: none; touch-action: none; }\n.header.dragging { cursor: grabbing; }\n.title { font-weight: 600; letter-spacing: .02em; }\n.spacer { flex: 1; }\n.tabs { display: flex; gap: 2px; padding: 4px 6px 0; background: var(--bg2); border-bottom: 1px solid var(--line); }\n.tab { border: 0; background: transparent; color: var(--muted); padding: 5px 10px; border-radius: 6px 6px 0 0; cursor: pointer; font: inherit; }\n.tab[aria-selected=\"true\"] { color: var(--fg); background: var(--bg); box-shadow: inset 0 -2px 0 var(--accent); }\n.badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 8px; background: var(--bg3); color: var(--fg); text-align: center; font-size: 10px; }\n.badge.bad { background: var(--bad); color: #fff; }\n.btn { border: 1px solid var(--line); background: var(--bg3); color: var(--fg); border-radius: 5px; padding: 2px 8px; cursor: pointer; font: inherit; }\n.btn:hover { border-color: var(--accent); }\n.btn[aria-pressed=\"true\"] { background: var(--select); border-color: var(--accent); }\n.body { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n.toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); }\n.input, .textarea { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; font: inherit; }\n.input { flex: 1; min-width: 0; }\n.textarea { width: 100%; min-height: 70px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }\n.split { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n.list { flex: 1; min-height: 60px; overflow: auto; }\n.detail { max-height: 45%; overflow: auto; border-top: 1px solid var(--line); padding: 8px; background: var(--bg2); }\n.row { display: flex; align-items: center; gap: 4px; padding: 1px 8px; cursor: default; white-space: nowrap; }\n.row:hover { background: var(--bg3); }\n.row[aria-selected=\"true\"] { background: var(--select); }\n.twisty { width: 14px; padding: 0; border: 0; background: none; text-align: center; color: var(--muted); cursor: pointer; flex: none; font: inherit; }\n.twisty[hidden] { display: none; }\n.row:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }\n.kind { font-size: 10px; padding: 0 4px; border-radius: 3px; background: var(--bg3); color: var(--muted); flex: none; }\n.kind.component { color: var(--accent); }\n.kind.signal { color: var(--good); }\n.kind.memo { color: var(--warn); }\n.name { overflow: hidden; text-overflow: ellipsis; }\n.name.component { color: var(--accent); font-weight: 600; }\n.value { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }\n.updates { margin-left: auto; color: var(--warn); font-variant-numeric: tabular-nums; flex: none; }\n.more { padding: 6px 8px; }\n.section { margin-bottom: 8px; }\n.section h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }\n.chain { list-style: none; margin: 0; padding: 0; }\n.chain li { padding: 1px 0; }\n.chain li::before { content: \"→ \"; color: var(--muted); }\n.chain li:first-child::before { content: \"\"; }\n.link { color: var(--accent); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; }\n.flush { padding: 6px 8px; border-bottom: 1px solid var(--line); }\n.flush-head { display: flex; gap: 8px; color: var(--muted); margin-bottom: 4px; }\n.lanes { position: relative; background: var(--bg2); border-radius: 4px; overflow: hidden; }\n.bar { position: absolute; height: 14px; overflow: hidden; white-space: nowrap; font-size: 10px; line-height: 14px; padding: 0 2px; border-radius: 2px; background: var(--accent); color: #fff; cursor: pointer; }\n.bar.memo { background: var(--warn); color: #000; }\n.bar.unchanged { opacity: .55; }\n.table { width: 100%; border-collapse: collapse; }\n.table th, .table td { text-align: left; padding: 2px 8px; border-bottom: 1px solid var(--line); }\n.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }\n.empty { padding: 16px; color: var(--muted); text-align: center; }\n.status { color: var(--muted); }\n.status.bad { color: var(--bad); }\n.status.good { color: var(--good); }\n.issue { padding: 6px 8px; border-bottom: 1px solid var(--line); }\n.issue code { color: var(--bad); }\n.footer { display: flex; gap: 12px; padding: 4px 8px; border-top: 1px solid var(--line); background: var(--bg2); color: var(--muted); }\n`;\n\n/**\n * Styles of the small button that opens the panel. Like {@link PANEL_CSS}, it is inserted into the shadow\n * root by `mountDevtools()` in development builds only.\n *\n * @example\n * import { LAUNCHER_CSS } from \"@shadow-js/devtools\";\n * const style = document.createElement(\"style\");\n * style.textContent = LAUNCHER_CSS;\n * document.head.append(style);\n * @since 1.0.0\n */\nexport const LAUNCHER_CSS: string = `\n.launcher { position: fixed; right: 12px; bottom: 12px; z-index: 2147483647; width: 36px; height: 36px; border-radius: 50%;\n  border: 1px solid #3a3d42; background: #1e1f22; color: #4da3ff; font: 600 14px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer;\n  box-shadow: 0 4px 14px rgba(0,0,0,.4); }\n.launcher:hover { border-color: #4da3ff; }\n.launcher[hidden] { display: none; }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAa,YAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFjC,MAAa,eAAuB"}

package/dist/dev/ui/timeline.js

@@ -0,0 +1,135 @@
+import { For, Show, addEventListener, anchor, className, createComponent, effect, insert, setAttribute, style, template } from "@shadow-js/web";
+//#region src/ui/timeline.tsx
+const _tmpl$ = /*#__PURE__*/ template("<div></div>");
+const _tmpl$2 = /*#__PURE__*/ template("<div class=\"empty\">No flushes recorded yet.</div>");
+const _tmpl$3 = /*#__PURE__*/ template("<span>queue:  render /  user</span>");
+const _tmpl$4 = /*#__PURE__*/ template("<div class=\"flush\"><div class=\"flush-head\"><strong></strong><span> runs</span><span> ms</span></div><div class=\"lanes\"></div></div>");
+const _tmpl$5 = /*#__PURE__*/ template("<tr><td><button type=\"button\" class=\"link\"></button></td><td class=\"num\"></td><td class=\"num\"></td></tr>");
+const _tmpl$6 = /*#__PURE__*/ template("<div class=\"flush\"><div class=\"flush-head\"><strong>Components that re-ran most</strong></div><table class=\"table\" aria-label=\"Component update counts\"><thead><tr><th>Component</th><th class=\"num\">Updates</th><th class=\"num\">Total ms</th></tr></thead><tbody></tbody></table></div>");
+const _tmpl$7 = /*#__PURE__*/ template("<section class=\"list\" aria-label=\"Timeline\"></section>");
+const LANE_HEIGHT = 16;
+/** One bar of the flame graph: positioned by time inside its flush, one lane per nesting level. */
+const Bar = (props) => {
+	const _el$ = _tmpl$();
+	effect(() => {
+		className(_el$, `bar ${props.span.kind}${props.span.changed ? "" : " unchanged"}`);
+	});
+	effect(() => {
+		setAttribute(_el$, "data-span", props.span.seq);
+	});
+	effect(() => {
+		setAttribute(_el$, "title", `${props.span.label}: ${props.span.duration.toFixed(2)} ms${props.span.changed ? "" : " (value unchanged)"}`);
+	});
+	effect(() => ({
+		left: `${props.flush.duration <= 0 ? 0 : (props.span.start - props.flush.start) / props.flush.duration * 100}%`,
+		width: `${props.flush.duration <= 0 ? 100 : Math.max(props.span.duration / props.flush.duration * 100, 1)}%`,
+		top: `${props.span.depth * LANE_HEIGHT}px`
+	}), (_v$, _p$) => {
+		style(_el$, _v$, _p$);
+	});
+	addEventListener(_el$, "click", () => props.state.select(props.span.id));
+	insert(_el$, () => props.span.label);
+	return _el$;
+};
+/**
+* The Timeline tab. Props: `state` is the panel's {@link PanelState}. It shows the newest 12 flushes, each
+* with its run count and duration (flushes also show their queue sizes), and its runs laid out as flame lanes (a
+* memo pulled by an effect sits one lane below the effect). Clicking a bar selects its node. Below the
+* flushes it lists up to 10 components that re-ran most, with their update counts and total time.
+*
+* Internal to the panel: the package index does not export this component. Used in development builds
+* only.
+*
+* @internal
+*/
+const TimelineTab = (props) => {
+	const _el$ = _tmpl$7(), _el$2 = anchor(_el$, null);
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return props.state.flames().length > 0;
+		},
+		get fallback() {
+			return _tmpl$2();
+		},
+		get children() {
+			return createComponent(For, {
+				get each() {
+					return props.state.flames().slice().reverse();
+				},
+				key: (flush) => flush.flush,
+				children: (flush) => {
+					const _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.firstChild, _el$6 = _el$5.nextSibling, _el$8 = _el$6.firstChild, _el$3 = _el$2.nextSibling;
+					effect(() => {
+						setAttribute(_el$, "data-flush", flush().flush);
+					});
+					insert(_el$4, () => flush().flush === 0 ? "outside a flush" : `flush #${flush().flush}`);
+					insert(_el$5, () => flush().spans.length, _el$7);
+					insert(_el$6, () => flush().duration.toFixed(2), _el$8);
+					insert(_el$2, createComponent(Show, {
+						get when() {
+							return flush().flush !== 0;
+						},
+						get children() {
+							const _el$ = _tmpl$3(), _el$3 = _el$.firstChild.splitText(7), _el$4 = _el$3.splitText(10);
+							insert(_el$, () => flush().render, _el$3);
+							insert(_el$, () => flush().user, _el$4);
+							return _el$;
+						}
+					}, "Show"));
+					effect(() => ({ height: `${Math.max(flush().lanes, 1) * LANE_HEIGHT}px` }), (_v$, _p$) => {
+						style(_el$3, _v$, _p$);
+					});
+					insert(_el$3, createComponent(For, {
+						get each() {
+							return flush().spans;
+						},
+						key: (span) => span.seq,
+						children: (span) => createComponent(Bar, {
+							get state() {
+								return props.state;
+							},
+							get flush() {
+								return flush();
+							},
+							get span() {
+								return span();
+							}
+						}, "Bar")
+					}, "For"));
+					return _el$;
+				}
+			}, "For");
+		}
+	}, "Show"), _el$2);
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return props.state.hot().length > 0;
+		},
+		get children() {
+			const _el$ = _tmpl$6(), _el$3 = _el$.firstChild.nextSibling.firstChild.nextSibling;
+			insert(_el$3, createComponent(For, {
+				get each() {
+					return props.state.hot();
+				},
+				key: (stat) => stat.id,
+				children: (stat) => {
+					const _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$5 = _el$2.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+					effect(() => {
+						setAttribute(_el$, "data-component", stat().id);
+					});
+					addEventListener(_el$5, "click", () => props.state.select(stat().id));
+					insert(_el$5, () => stat().name);
+					insert(_el$3, () => stat().updates);
+					insert(_el$4, () => stat().totalDuration.toFixed(2));
+					return _el$;
+				}
+			}, "For"));
+			return _el$;
+		}
+	}, "Show"));
+	return _el$;
+};
+//#endregion
+export { TimelineTab };
+
+//# sourceMappingURL=timeline.js.map