@shadow-js/devtools 0.0.0-stage → 1.0.1

package/dist/dev/ui/panel.js

@@ -0,0 +1,160 @@
+import { IssuesTab } from "./issues.js";
+import { TABS } from "./state.js";
+import { StateTab } from "./state-tab.js";
+import { TimelineTab } from "./timeline.js";
+import { TreeTab } from "./tree.js";
+import { For, Match, Show, Switch, addEventListener, anchor, createComponent, effect, insert, setAttribute, style, template } from "@shadow-js/web";
+//#region src/ui/panel.tsx
+const _tmpl$ = /*#__PURE__*/ template("<span class=\"badge bad\"></span>");
+const _tmpl$2 = /*#__PURE__*/ template("<button type=\"button\" class=\"tab\" role=\"tab\"></button>");
+const _tmpl$3 = /*#__PURE__*/ template("<section class=\"panel\" role=\"dialog\" aria-label=\"ShadowJS devtools\"><header class=\"header\"><span class=\"title\">ShadowJS devtools</span><span class=\"spacer\"></span><button type=\"button\" class=\"btn\" title=\"Pause or resume recording\"></button><button type=\"button\" class=\"btn\" title=\"Flash components when they update\">Flash</button><button type=\"button\" class=\"btn\" title=\"Forget everything recorded\">Clear</button><button type=\"button\" class=\"btn\" aria-label=\"Close\">×</button></header><div class=\"tabs\" role=\"tablist\"></div><div class=\"body\"></div><footer class=\"footer\"><span> components</span><span> signals</span><span> computations</span><span> runs</span></footer></section>");
+/**
+* The devtools panel: a header with the drag handle and the Pause, Flash, Clear and close controls, the
+* tabs (Components, Timeline, State, Issues), the active view and a footer with counts. It only talks to
+* {@link PanelState}, so it works the same on a local agent and on a remote one.
+*
+* Development tool: `mountDevtools()` renders it in development builds only, and it never ships in
+* production builds.
+*
+* @example
+* import { createAgent, createLocalBackend, createPanelState, Panel } from "@shadow-js/devtools";
+* const backend = createLocalBackend(createAgent());
+* export const Devtools = () => {
+*   const state = createPanelState(backend);
+*   return <Panel state={state} open={true} x={16} y={16} onMove={() => undefined} onClose={() => undefined} />;
+* };
+* @since 1.0.0
+*/
+const Panel = (props) => {
+	let drag = null;
+	const begin = (event) => {
+		if (event.target instanceof HTMLElement && event.target.closest("button, input, label") !== null) return;
+		drag = {
+			pointer: event.pointerId,
+			x: event.clientX,
+			y: event.clientY,
+			left: props.x,
+			top: props.y
+		};
+		event.currentTarget.classList.add("dragging");
+		if (typeof event.currentTarget.setPointerCapture === "function") event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const move = (event) => {
+		if (drag === null || event.pointerId !== drag.pointer) return;
+		props.onMove(drag.left + event.clientX - drag.x, drag.top + event.clientY - drag.y);
+	};
+	const end = (event) => {
+		if (drag === null || event.pointerId !== drag.pointer) return;
+		drag = null;
+		event.currentTarget.classList.remove("dragging");
+		if (typeof event.currentTarget.releasePointerCapture === "function" && event.currentTarget.hasPointerCapture?.(event.pointerId) === true) event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	const clear = () => {
+		props.state.backend.request({ type: "clear" }).then(() => props.state.refresh());
+	};
+	{
+		const _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$6 = _el$2.firstChild.nextSibling.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$10 = _el$4.nextSibling.firstChild, _el$14 = _el$10.firstChild, _el$11 = _el$10.nextSibling, _el$15 = _el$11.firstChild, _el$12 = _el$11.nextSibling, _el$16 = _el$12.firstChild, _el$13 = _el$12.nextSibling, _el$17 = _el$13.firstChild;
+		effect(() => {
+			_el$.hidden = !props.open;
+		});
+		effect(() => ({
+			left: `${props.x}px`,
+			top: `${props.y}px`
+		}), (_v$, _p$) => {
+			style(_el$, _v$, _p$);
+		});
+		addEventListener(_el$2, "pointerdown", begin);
+		addEventListener(_el$2, "pointermove", move);
+		addEventListener(_el$2, "pointerup", end);
+		addEventListener(_el$2, "pointercancel", end);
+		effect(() => {
+			setAttribute(_el$6, "aria-pressed", props.state.paused());
+		});
+		addEventListener(_el$6, "click", () => props.state.setPaused(!props.state.paused()));
+		insert(_el$6, () => props.state.paused() ? "Resume" : "Pause");
+		effect(() => {
+			setAttribute(_el$7, "aria-pressed", props.state.flash());
+		});
+		addEventListener(_el$7, "click", () => props.state.setFlash(!props.state.flash()));
+		addEventListener(_el$8, "click", clear);
+		addEventListener(_el$9, "click", () => props.onClose());
+		insert(_el$3, createComponent(For, {
+			each: TABS,
+			children: (tab) => {
+				const _el$ = _tmpl$2(), _el$2 = anchor(_el$, null);
+				effect(() => {
+					setAttribute(_el$, "aria-selected", props.state.tab() === tab.id);
+				});
+				effect(() => {
+					setAttribute(_el$, "data-tab", tab.id);
+				});
+				addEventListener(_el$, "click", () => props.state.setTab(tab.id));
+				insert(_el$, () => tab.label, _el$2);
+				insert(_el$, createComponent(Show, {
+					get when() {
+						return tab.id === "issues" && props.state.snapshot().counts.errors + props.state.snapshot().counts.hydration > 0;
+					},
+					get children() {
+						const _el$ = _tmpl$();
+						insert(_el$, () => props.state.snapshot().counts.errors + props.state.snapshot().counts.hydration);
+						return _el$;
+					}
+				}, "Show"));
+				return _el$;
+			}
+		}, "For"));
+		insert(_el$4, createComponent(Switch, { get children() {
+			return [
+				createComponent(Match, {
+					get when() {
+						return props.state.tab() === "tree";
+					},
+					get children() {
+						return createComponent(TreeTab, { get state() {
+							return props.state;
+						} }, "TreeTab");
+					}
+				}, "Match"),
+				createComponent(Match, {
+					get when() {
+						return props.state.tab() === "timeline";
+					},
+					get children() {
+						return createComponent(TimelineTab, { get state() {
+							return props.state;
+						} }, "TimelineTab");
+					}
+				}, "Match"),
+				createComponent(Match, {
+					get when() {
+						return props.state.tab() === "state";
+					},
+					get children() {
+						return createComponent(StateTab, { get state() {
+							return props.state;
+						} }, "StateTab");
+					}
+				}, "Match"),
+				createComponent(Match, {
+					get when() {
+						return props.state.tab() === "issues";
+					},
+					get children() {
+						return createComponent(IssuesTab, { get state() {
+							return props.state;
+						} }, "IssuesTab");
+					}
+				}, "Match")
+			];
+		} }, "Switch"));
+		insert(_el$10, () => props.state.snapshot().counts.components, _el$14);
+		insert(_el$11, () => props.state.snapshot().counts.signals, _el$15);
+		insert(_el$12, () => props.state.snapshot().counts.memos + props.state.snapshot().counts.effects, _el$16);
+		insert(_el$13, () => props.state.snapshot().counts.runs, _el$17);
+		return _el$;
+	}
+};
+//#endregion
+export { Panel };
+
+//# sourceMappingURL=panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","names":["_$createComponent","_$anchor"],"sources":["../../../src/ui/panel.tsx"],"sourcesContent":["import { For, Match, Show, Switch } from \"@shadow-js/web\";\nimport type { Component } from \"@shadow-js/web/jsx-runtime\";\nimport { IssuesTab } from \"./issues\";\nimport { type PanelState, TABS } from \"./state\";\nimport { StateTab } from \"./state-tab\";\nimport { TimelineTab } from \"./timeline\";\nimport { TreeTab } from \"./tree\";\n\n/**\n * Props of {@link Panel}.\n *\n * @since 1.0.0\n */\nexport interface PanelProps {\n  /**\n   * The panel's state, from {@link createPanelState}.\n   */\n  state: PanelState;\n  /**\n   * Whether the panel is shown. A closed panel keeps its state and is hidden.\n   */\n  open: boolean;\n  /**\n   * Left edge of the panel in pixels.\n   */\n  x: number;\n  /**\n   * Top edge of the panel in pixels.\n   */\n  y: number;\n  /**\n   * Called while the header is dragged, with the new position in pixels. The panel does not move itself;\n   * the owner sets `x` and `y`.\n   */\n  onMove(x: number, y: number): void;\n  /**\n   * Called when the close button is pressed.\n   */\n  onClose(): void;\n}\n\ninterface DragStart {\n  pointer: number;\n  x: number;\n  y: number;\n  left: number;\n  top: number;\n}\n\n/**\n * The devtools panel: a header with the drag handle and the Pause, Flash, Clear and close controls, the\n * tabs (Components, Timeline, State, Issues), the active view and a footer with counts. It only talks to\n * {@link PanelState}, so it works the same on a local agent and on a remote one.\n *\n * Development tool: `mountDevtools()` renders it in development builds only, and it never ships in\n * production builds.\n *\n * @example\n * import { createAgent, createLocalBackend, createPanelState, Panel } from \"@shadow-js/devtools\";\n * const backend = createLocalBackend(createAgent());\n * export const Devtools = () => {\n *   const state = createPanelState(backend);\n *   return <Panel state={state} open={true} x={16} y={16} onMove={() => undefined} onClose={() => undefined} />;\n * };\n * @since 1.0.0\n */\nexport const Panel: Component<PanelProps> = (props) => {\n  let drag: DragStart | null = null;\n\n  const begin = (event: PointerEvent & { currentTarget: HTMLElement }): void => {\n    if (\n      event.target instanceof HTMLElement &&\n      event.target.closest(\"button, input, label\") !== null\n    )\n      return;\n    drag = {\n      pointer: event.pointerId,\n      x: event.clientX,\n      y: event.clientY,\n      left: props.x,\n      top: props.y,\n    };\n    event.currentTarget.classList.add(\"dragging\");\n    if (typeof event.currentTarget.setPointerCapture === \"function\") {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    }\n  };\n  const move = (event: PointerEvent): void => {\n    if (drag === null || event.pointerId !== drag.pointer) return;\n    props.onMove(drag.left + event.clientX - drag.x, drag.top + event.clientY - drag.y);\n  };\n  const end = (event: PointerEvent & { currentTarget: HTMLElement }): void => {\n    if (drag === null || event.pointerId !== drag.pointer) return;\n    drag = null;\n    event.currentTarget.classList.remove(\"dragging\");\n    if (\n      typeof event.currentTarget.releasePointerCapture === \"function\" &&\n      event.currentTarget.hasPointerCapture?.(event.pointerId) === true\n    ) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n  };\n\n  const clear = (): void => {\n    void props.state.backend.request({ type: \"clear\" }).then(() => props.state.refresh());\n  };\n\n  return (\n    <section\n      class=\"panel\"\n      role=\"dialog\"\n      aria-label=\"ShadowJS devtools\"\n      hidden={!props.open}\n      style={{ left: `${props.x}px`, top: `${props.y}px` }}\n    >\n      <header\n        class=\"header\"\n        on:pointerdown={begin}\n        on:pointermove={move}\n        on:pointerup={end}\n        on:pointercancel={end}\n      >\n        <span class=\"title\">ShadowJS devtools</span>\n        <span class=\"spacer\" />\n        <button\n          type=\"button\"\n          class=\"btn\"\n          aria-pressed={props.state.paused()}\n          title=\"Pause or resume recording\"\n          on:click={() => props.state.setPaused(!props.state.paused())}\n        >\n          {props.state.paused() ? \"Resume\" : \"Pause\"}\n        </button>\n        <button\n          type=\"button\"\n          class=\"btn\"\n          aria-pressed={props.state.flash()}\n          title=\"Flash components when they update\"\n          on:click={() => props.state.setFlash(!props.state.flash())}\n        >\n          Flash\n        </button>\n        <button type=\"button\" class=\"btn\" title=\"Forget everything recorded\" on:click={clear}>\n          Clear\n        </button>\n        <button type=\"button\" class=\"btn\" aria-label=\"Close\" on:click={() => props.onClose()}>\n          ×\n        </button>\n      </header>\n      <div class=\"tabs\" role=\"tablist\">\n        <For each={TABS}>\n          {(tab) => (\n            <button\n              type=\"button\"\n              class=\"tab\"\n              role=\"tab\"\n              aria-selected={props.state.tab() === tab.id}\n              data-tab={tab.id}\n              on:click={() => props.state.setTab(tab.id)}\n            >\n              {tab.label}\n              <Show\n                when={\n                  tab.id === \"issues\" &&\n                  props.state.snapshot().counts.errors + props.state.snapshot().counts.hydration > 0\n                }\n              >\n                <span class=\"badge bad\">\n                  {props.state.snapshot().counts.errors + props.state.snapshot().counts.hydration}\n                </span>\n              </Show>\n            </button>\n          )}\n        </For>\n      </div>\n      <div class=\"body\">\n        <Switch>\n          <Match when={props.state.tab() === \"tree\"}>\n            <TreeTab state={props.state} />\n          </Match>\n          <Match when={props.state.tab() === \"timeline\"}>\n            <TimelineTab state={props.state} />\n          </Match>\n          <Match when={props.state.tab() === \"state\"}>\n            <StateTab state={props.state} />\n          </Match>\n          <Match when={props.state.tab() === \"issues\"}>\n            <IssuesTab state={props.state} />\n          </Match>\n        </Switch>\n      </div>\n      <footer class=\"footer\">\n        <span>{props.state.snapshot().counts.components} components</span>\n        <span>{props.state.snapshot().counts.signals} signals</span>\n        <span>\n          {props.state.snapshot().counts.memos + props.state.snapshot().counts.effects} computations\n        </span>\n        <span>{props.state.snapshot().counts.runs} runs</span>\n      </footer>\n    </section>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+import { NodeType } from "../model.js";
+//#region src/ui/rows.d.ts
+/** One line of the tree view. @since 1.0.0 */
+export interface TreeRow {
+  /**
+   * Id of the node.
+   */
+  id: number;
+  /**
+   * Nesting level of the row: `0` for a root. With components only, a row sits one level below its
+   * nearest shown ancestor.
+   */
+  depth: number;
+  /**
+   * The kind of the node.
+   */
+  type: NodeType;
+  /**
+   * True for a component node.
+   */
+  isComponent: boolean;
+  /** Display name: `<Counter>`, `count`, `effect#12`. */
+  label: string;
+  /**
+   * Secondary text: a signal's value, a resource's state, or the run count of a memo or effect.
+   */
+  detail: string;
+  /**
+   * True when the node has children in the list. While a filter is set, only matching children count.
+   */
+  hasChildren: boolean;
+  /**
+   * True when the node's children are hidden. Always false while a filter is set.
+   */
+  collapsed: boolean;
+  /**
+   * Re-runs after the first, summed over the node and everything below it in the owners tree.
+   */
+  updates: number;
+  /** Id of the component that owns the node ({@link NO_ID} for none). */
+  component: number;
+}
+//#endregion
+//# sourceMappingURL=rows.d.ts.map

package/dist/dev/ui/rows.js

@@ -0,0 +1,132 @@
+import "../protocol.js";
+import { nodeLabel } from "../inspector.js";
+//#region src/ui/rows.ts
+function labelOf(node) {
+	if (node.isComponent) return `<${node.name ?? `component#${node.id}`}>`;
+	return nodeLabel(node);
+}
+function detailOf(node) {
+	switch (node.type) {
+		case "signal": return node.preview;
+		case "resource": return node.state;
+		case "memo":
+		case "effect": return node.runs === 0 ? "" : `${node.runs} run${node.runs === 1 ? "" : "s"}`;
+		default: return "";
+	}
+}
+/**
+* Flattens the owners tree into the rows the tree view shows: depth first, children in creation order,
+* honoring the collapse state, the text filter and the components-only switch. Iterative, so a deep or
+* large tree does not overflow the call stack.
+*
+* Internal to the panel: the package index does not export this function.
+*
+* @param snapshot A graph snapshot.
+* @param options Filter, switches and the row limit.
+* @returns The rows and how many matches were cut.
+* @internal
+*/
+function buildRows(snapshot, options) {
+	const byId = /* @__PURE__ */ new Map();
+	for (const node of snapshot.nodes) byId.set(node.id, node);
+	const filter = options.filter.trim().toLowerCase();
+	const filtering = filter !== "";
+	const rolled = /* @__PURE__ */ new Map();
+	for (const node of snapshot.nodes) {
+		if (node.updates === 0) continue;
+		let current = node;
+		let guard = 0;
+		while (current !== void 0 && guard < snapshot.nodes.length + 1) {
+			rolled.set(current.id, (rolled.get(current.id) ?? 0) + node.updates);
+			current = current.parent === 0 ? void 0 : byId.get(current.parent);
+			guard += 1;
+		}
+	}
+	let included = null;
+	if (filtering) {
+		const matches = /* @__PURE__ */ new Set();
+		for (const node of snapshot.nodes) {
+			if (!`${labelOf(node)} ${node.type} ${node.preview} ${node.state}`.toLowerCase().includes(filter)) continue;
+			let current = node;
+			while (current !== void 0 && !matches.has(current.id)) {
+				matches.add(current.id);
+				current = current.parent === 0 ? void 0 : byId.get(current.parent);
+			}
+		}
+		included = matches;
+	}
+	const limit = options.limit ?? 2e3;
+	const rows = [];
+	let hidden = 0;
+	const stack = [];
+	for (let i = snapshot.roots.length - 1; i >= 0; i -= 1) {
+		const id = snapshot.roots[i];
+		if (id !== void 0) stack.push({
+			id,
+			depth: 0
+		});
+	}
+	while (stack.length > 0) {
+		const entry = stack.pop();
+		if (entry === void 0) break;
+		const node = byId.get(entry.id);
+		if (node === void 0) continue;
+		if (included !== null && !included.has(node.id)) continue;
+		const shown = !options.componentsOnly || node.isComponent;
+		const children = node.children.filter((id) => included === null || included.has(id));
+		const collapsed = !filtering && options.collapsed.has(node.id);
+		if (shown) {
+			if (rows.length < limit) rows.push({
+				id: node.id,
+				depth: entry.depth,
+				type: node.type,
+				isComponent: node.isComponent,
+				label: labelOf(node),
+				detail: detailOf(node),
+				hasChildren: children.length > 0,
+				collapsed,
+				updates: rolled.get(node.id) ?? 0,
+				component: node.component
+			});
+			else hidden += 1;
+		}
+		if (collapsed) continue;
+		const childDepth = shown ? entry.depth + 1 : entry.depth;
+		for (let i = children.length - 1; i >= 0; i -= 1) {
+			const child = children[i];
+			if (child !== void 0) stack.push({
+				id: child,
+				depth: childDepth
+			});
+		}
+	}
+	return {
+		rows,
+		hidden
+	};
+}
+/**
+* One or two letters that name a row's kind in the tree: `C` for a component, `O` owner, `S` signal,
+* `M` memo, `E` effect, `R` resource and `ST` store.
+*
+* Internal to the panel: the package index does not export this function.
+*
+* @param row The row.
+* @returns The letters.
+* @internal
+*/
+function kindLetter(row) {
+	if (row.isComponent) return "C";
+	switch (row.type) {
+		case "owner": return "O";
+		case "signal": return "S";
+		case "memo": return "M";
+		case "effect": return "E";
+		case "resource": return "R";
+		case "store": return "ST";
+	}
+}
+//#endregion
+export { buildRows, kindLetter };
+
+//# sourceMappingURL=rows.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rows.js","names":[],"sources":["../../../src/ui/rows.ts"],"sourcesContent":["import { type GraphSnapshot, nodeLabel, type SnapshotNode } from \"../inspector\";\nimport type { NodeType } from \"../model\";\nimport { NO_ID } from \"../protocol\";\n\n/** One line of the tree view. @since 1.0.0 */\nexport interface TreeRow {\n  /**\n   * Id of the node.\n   */\n  id: number;\n  /**\n   * Nesting level of the row: `0` for a root. With components only, a row sits one level below its\n   * nearest shown ancestor.\n   */\n  depth: number;\n  /**\n   * The kind of the node.\n   */\n  type: NodeType;\n  /**\n   * True for a component node.\n   */\n  isComponent: boolean;\n  /** Display name: `<Counter>`, `count`, `effect#12`. */\n  label: string;\n  /**\n   * Secondary text: a signal's value, a resource's state, or the run count of a memo or effect.\n   */\n  detail: string;\n  /**\n   * True when the node has children in the list. While a filter is set, only matching children count.\n   */\n  hasChildren: boolean;\n  /**\n   * True when the node's children are hidden. Always false while a filter is set.\n   */\n  collapsed: boolean;\n  /**\n   * Re-runs after the first, summed over the node and everything below it in the owners tree.\n   */\n  updates: number;\n  /** Id of the component that owns the node ({@link NO_ID} for none). */\n  component: number;\n}\n\n/** What to show in the tree. @since 1.0.0 */\nexport interface RowOptions {\n  /** Case-insensitive text matched against names, kinds and values. Matches are shown with their ancestors. */\n  filter: string;\n  /** Show only components (their descendants are attached to the nearest shown ancestor). */\n  componentsOnly: boolean;\n  /**\n   * Ids the user collapsed. Everything else is expanded. Ignored while `filter` is set.\n   */\n  collapsed: ReadonlySet<number>;\n  /**\n   * Most rows returned.\n   *\n   * @default 2000\n   */\n  limit?: number;\n}\n\n/**\n * Result of {@link buildRows}.\n *\n * @since 1.0.0\n */\nexport interface RowsResult {\n  /**\n   * The visible rows, depth first.\n   */\n  rows: TreeRow[];\n  /** Rows that matched but were cut by `limit`. */\n  hidden: number;\n}\n\nfunction labelOf(node: SnapshotNode): string {\n  if (node.isComponent) return `<${node.name ?? `component#${node.id}`}>`;\n  return nodeLabel(node);\n}\n\nfunction detailOf(node: SnapshotNode): string {\n  switch (node.type) {\n    case \"signal\":\n      return node.preview;\n    case \"resource\":\n      return node.state;\n    case \"memo\":\n    case \"effect\":\n      return node.runs === 0 ? \"\" : `${node.runs} run${node.runs === 1 ? \"\" : \"s\"}`;\n    default:\n      return \"\";\n  }\n}\n\n/**\n * Flattens the owners tree into the rows the tree view shows: depth first, children in creation order,\n * honoring the collapse state, the text filter and the components-only switch. Iterative, so a deep or\n * large tree does not overflow the call stack.\n *\n * Internal to the panel: the package index does not export this function.\n *\n * @param snapshot A graph snapshot.\n * @param options Filter, switches and the row limit.\n * @returns The rows and how many matches were cut.\n * @internal\n */\nexport function buildRows(snapshot: GraphSnapshot, options: RowOptions): RowsResult {\n  const byId = new Map<number, SnapshotNode>();\n  for (const node of snapshot.nodes) byId.set(node.id, node);\n  const filter = options.filter.trim().toLowerCase();\n  const filtering = filter !== \"\";\n\n  // Updates roll up: a component shows the re-runs of everything below it.\n  const rolled = new Map<number, number>();\n  for (const node of snapshot.nodes) {\n    if (node.updates === 0) continue;\n    let current: SnapshotNode | undefined = node;\n    let guard = 0;\n    while (current !== undefined && guard < snapshot.nodes.length + 1) {\n      rolled.set(current.id, (rolled.get(current.id) ?? 0) + node.updates);\n      current = current.parent === NO_ID ? undefined : byId.get(current.parent);\n      guard += 1;\n    }\n  }\n\n  // With a filter, only matches and their ancestors take part.\n  let included: Set<number> | null = null;\n  if (filtering) {\n    const matches = new Set<number>();\n    for (const node of snapshot.nodes) {\n      const haystack = `${labelOf(node)} ${node.type} ${node.preview} ${node.state}`.toLowerCase();\n      if (!haystack.includes(filter)) continue;\n      let current: SnapshotNode | undefined = node;\n      while (current !== undefined && !matches.has(current.id)) {\n        matches.add(current.id);\n        current = current.parent === NO_ID ? undefined : byId.get(current.parent);\n      }\n    }\n    included = matches;\n  }\n\n  const limit = options.limit ?? 2000;\n  const rows: TreeRow[] = [];\n  let hidden = 0;\n  const stack: Array<{ id: number; depth: number }> = [];\n  for (let i = snapshot.roots.length - 1; i >= 0; i -= 1) {\n    const id = snapshot.roots[i];\n    if (id !== undefined) stack.push({ id, depth: 0 });\n  }\n  while (stack.length > 0) {\n    const entry = stack.pop();\n    if (entry === undefined) break;\n    const node = byId.get(entry.id);\n    if (node === undefined) continue;\n    if (included !== null && !included.has(node.id)) continue;\n    const shown = !options.componentsOnly || node.isComponent;\n    const children = node.children.filter((id) => included === null || included.has(id));\n    const collapsed = !filtering && options.collapsed.has(node.id);\n    if (shown) {\n      if (rows.length < limit) {\n        rows.push({\n          id: node.id,\n          depth: entry.depth,\n          type: node.type,\n          isComponent: node.isComponent,\n          label: labelOf(node),\n          detail: detailOf(node),\n          hasChildren: children.length > 0,\n          collapsed,\n          updates: rolled.get(node.id) ?? 0,\n          component: node.component,\n        });\n      } else {\n        hidden += 1;\n      }\n    }\n    if (collapsed) continue;\n    const childDepth = shown ? entry.depth + 1 : entry.depth;\n    for (let i = children.length - 1; i >= 0; i -= 1) {\n      const child = children[i];\n      if (child !== undefined) stack.push({ id: child, depth: childDepth });\n    }\n  }\n  return { rows, hidden };\n}\n\n/**\n * One or two letters that name a row's kind in the tree: `C` for a component, `O` owner, `S` signal,\n * `M` memo, `E` effect, `R` resource and `ST` store.\n *\n * Internal to the panel: the package index does not export this function.\n *\n * @param row The row.\n * @returns The letters.\n * @internal\n */\nexport function kindLetter(row: { type: NodeType; isComponent: boolean }): string {\n  if (row.isComponent) return \"C\";\n  switch (row.type) {\n    case \"owner\":\n      return \"O\";\n    case \"signal\":\n      return \"S\";\n    case \"memo\":\n      return \"M\";\n    case \"effect\":\n      return \"E\";\n    case \"resource\":\n      return \"R\";\n    case \"store\":\n      return \"ST\";\n  }\n}\n"],"mappings":";;;AA6EA,SAAS,QAAQ,MAA4B;CAC3C,IAAI,KAAK,aAAa,OAAO,IAAI,KAAK,QAAQ,aAAa,KAAK,KAAK;CACrE,OAAO,UAAU,IAAI;AACvB;AAEA,SAAS,SAAS,MAA4B;CAC5C,QAAQ,KAAK,MAAb;EACE,KAAK,UACH,OAAO,KAAK;EACd,KAAK,YACH,OAAO,KAAK;EACd,KAAK;EACL,KAAK,UACH,OAAO,KAAK,SAAS,IAAI,KAAK,GAAG,KAAK,KAAK,MAAM,KAAK,SAAS,IAAI,KAAK;EAC1E,SACE,OAAO;CACX;AACF;;;;;;;;;;;;;AAcA,SAAgB,UAAU,UAAyB,SAAiC;CAClF,MAAM,uBAAO,IAAI,IAA0B;CAC3C,KAAK,MAAM,QAAQ,SAAS,OAAO,KAAK,IAAI,KAAK,IAAI,IAAI;CACzD,MAAM,SAAS,QAAQ,OAAO,KAAK,CAAC,CAAC,YAAY;CACjD,MAAM,YAAY,WAAW;CAG7B,MAAM,yBAAS,IAAI,IAAoB;CACvC,KAAK,MAAM,QAAQ,SAAS,OAAO;EACjC,IAAI,KAAK,YAAY,GAAG;EACxB,IAAI,UAAoC;EACxC,IAAI,QAAQ;EACZ,OAAO,YAAY,KAAA,KAAa,QAAQ,SAAS,MAAM,SAAS,GAAG;GACjE,OAAO,IAAI,QAAQ,KAAK,OAAO,IAAI,QAAQ,EAAE,KAAK,KAAK,KAAK,OAAO;GACnE,UAAU,QAAQ,WAAA,IAAmB,KAAA,IAAY,KAAK,IAAI,QAAQ,MAAM;GACxE,SAAS;EACX;CACF;CAGA,IAAI,WAA+B;CACnC,IAAI,WAAW;EACb,MAAM,0BAAU,IAAI,IAAY;EAChC,KAAK,MAAM,QAAQ,SAAS,OAAO;GAEjC,IAAI,CADa,GAAG,QAAQ,IAAI,EAAE,GAAG,KAAK,KAAK,GAAG,KAAK,QAAQ,GAAG,KAAK,QAAQ,YACnE,CAAC,CAAC,SAAS,MAAM,GAAG;GAChC,IAAI,UAAoC;GACxC,OAAO,YAAY,KAAA,KAAa,CAAC,QAAQ,IAAI,QAAQ,EAAE,GAAG;IACxD,QAAQ,IAAI,QAAQ,EAAE;IACtB,UAAU,QAAQ,WAAA,IAAmB,KAAA,IAAY,KAAK,IAAI,QAAQ,MAAM;GAC1E;EACF;EACA,WAAW;CACb;CAEA,MAAM,QAAQ,QAAQ,SAAS;CAC/B,MAAM,OAAkB,CAAC;CACzB,IAAI,SAAS;CACb,MAAM,QAA8C,CAAC;CACrD,KAAK,IAAI,IAAI,SAAS,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG;EACtD,MAAM,KAAK,SAAS,MAAM;EAC1B,IAAI,OAAO,KAAA,GAAW,MAAM,KAAK;GAAE;GAAI,OAAO;EAAE,CAAC;CACnD;CACA,OAAO,MAAM,SAAS,GAAG;EACvB,MAAM,QAAQ,MAAM,IAAI;EACxB,IAAI,UAAU,KAAA,GAAW;EACzB,MAAM,OAAO,KAAK,IAAI,MAAM,EAAE;EAC9B,IAAI,SAAS,KAAA,GAAW;EACxB,IAAI,aAAa,QAAQ,CAAC,SAAS,IAAI,KAAK,EAAE,GAAG;EACjD,MAAM,QAAQ,CAAC,QAAQ,kBAAkB,KAAK;EAC9C,MAAM,WAAW,KAAK,SAAS,QAAQ,OAAO,aAAa,QAAQ,SAAS,IAAI,EAAE,CAAC;EACnF,MAAM,YAAY,CAAC,aAAa,QAAQ,UAAU,IAAI,KAAK,EAAE;EAC7D,IAAI,OAAO;GACT,IAAI,KAAK,SAAS,OAChB,KAAK,KAAK;IACR,IAAI,KAAK;IACT,OAAO,MAAM;IACb,MAAM,KAAK;IACX,aAAa,KAAK;IAClB,OAAO,QAAQ,IAAI;IACnB,QAAQ,SAAS,IAAI;IACrB,aAAa,SAAS,SAAS;IAC/B;IACA,SAAS,OAAO,IAAI,KAAK,EAAE,KAAK;IAChC,WAAW,KAAK;GAClB,CAAC;QAED,UAAU;EAEd;EACA,IAAI,WAAW;EACf,MAAM,aAAa,QAAQ,MAAM,QAAQ,IAAI,MAAM;EACnD,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG;GAChD,MAAM,QAAQ,SAAS;GACvB,IAAI,UAAU,KAAA,GAAW,MAAM,KAAK;IAAE,IAAI;IAAO,OAAO;GAAW,CAAC;EACtE;CACF;CACA,OAAO;EAAE;EAAM;CAAO;AACxB;;;;;;;;;;;AAYA,SAAgB,WAAW,KAAuD;CAChF,IAAI,IAAI,aAAa,OAAO;CAC5B,QAAQ,IAAI,MAAZ;EACE,KAAK,SACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,KAAK,YACH,OAAO;EACT,KAAK,SACH,OAAO;CACX;AACF"}

package/dist/dev/ui/state-tab.js

@@ -0,0 +1,88 @@
+import { Details } from "./details.js";
+import { For, Show, addEventListener, className, createComponent, effect, insert, setAttribute, template } from "@shadow-js/web";
+//#region src/ui/state-tab.tsx
+const _tmpl$ = /*#__PURE__*/ template("<div class=\"empty\">No signals or stores yet.</div>");
+const _tmpl$2 = /*#__PURE__*/ template("<span class=\"updates\" title=\"Writes\">×</span>");
+const _tmpl$3 = /*#__PURE__*/ template("<div class=\"row\" role=\"option\" tabindex=\"0\"><span></span><span class=\"name\"></span><span class=\"value\"></span></div>");
+const _tmpl$4 = /*#__PURE__*/ template("<div class=\"split\"><div class=\"list\" role=\"listbox\" aria-label=\"State\"></div></div>");
+/**
+* The State tab. Props: `state` is the panel's {@link PanelState}. It lists every signal, store and
+* resource with its current value (and its write count when it is above zero). Selecting a row (click, Enter or Space) shows its
+* details; for signals and stores the details include a value editor, where a change is applied like any
+* other write.
+*
+* Internal to the panel: the package index does not export this component. Used in development builds
+* only.
+*
+* @internal
+*/
+const StateTab = (props) => {
+	const items = () => props.state.snapshot().nodes.filter((node) => node.type === "signal" || node.type === "store" || node.type === "resource");
+	{
+		const _el$ = _tmpl$4(), _el$2 = _el$.firstChild;
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return items().length > 0;
+			},
+			get fallback() {
+				return _tmpl$();
+			},
+			get children() {
+				return createComponent(For, {
+					get each() {
+						return items();
+					},
+					key: (node) => node.id,
+					children: (node) => {
+						const _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+						effect(() => {
+							setAttribute(_el$, "data-id", node().id);
+						});
+						effect(() => {
+							setAttribute(_el$, "aria-selected", props.state.selected() === node().id);
+						});
+						addEventListener(_el$, "click", () => props.state.select(node().id));
+						addEventListener(_el$, "keydown", (event) => {
+							if (event.key === "Enter" || event.key === " ") {
+								event.preventDefault();
+								props.state.select(node().id);
+							}
+						});
+						effect(() => {
+							className(_el$2, `kind ${node().type}`);
+						});
+						insert(_el$2, () => node().type);
+						insert(_el$3, () => props.state.nameOf(node().id));
+						insert(_el$4, () => node().type === "resource" ? node().state : node().preview);
+						insert(_el$, createComponent(Show, {
+							get when() {
+								return node().writes > 0;
+							},
+							get children() {
+								const _el$ = _tmpl$2();
+								insert(_el$, () => node().writes);
+								return _el$;
+							}
+						}, "Show"));
+						return _el$;
+					}
+				}, "For");
+			}
+		}, "Show"));
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.state.selectedNode() !== void 0;
+			},
+			get children() {
+				return createComponent(Details, { get state() {
+					return props.state;
+				} }, "Details");
+			}
+		}, "Show"));
+		return _el$;
+	}
+};
+//#endregion
+export { StateTab };
+
+//# sourceMappingURL=state-tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"state-tab.js","names":["_$createComponent"],"sources":["../../../src/ui/state-tab.tsx"],"sourcesContent":["import { For, Show } from \"@shadow-js/web\";\nimport type { Component } from \"@shadow-js/web/jsx-runtime\";\nimport { Details } from \"./details\";\nimport type { TabProps } from \"./tree\";\n\n/**\n * The State tab. Props: `state` is the panel's {@link PanelState}. It lists every signal, store and\n * resource with its current value (and its write count when it is above zero). Selecting a row (click, Enter or Space) shows its\n * details; for signals and stores the details include a value editor, where a change is applied like any\n * other write.\n *\n * Internal to the panel: the package index does not export this component. Used in development builds\n * only.\n *\n * @internal\n */\nexport const StateTab: Component<TabProps> = (props) => {\n  const items = () =>\n    props.state\n      .snapshot()\n      .nodes.filter(\n        (node) => node.type === \"signal\" || node.type === \"store\" || node.type === \"resource\",\n      );\n  return (\n    <div class=\"split\">\n      <div class=\"list\" role=\"listbox\" aria-label=\"State\">\n        <Show\n          when={items().length > 0}\n          fallback={<div class=\"empty\">No signals or stores yet.</div>}\n        >\n          <For each={items()} key={(node) => node.id}>\n            {(node) => (\n              <div\n                class=\"row\"\n                role=\"option\"\n                data-id={node().id}\n                tabIndex={0}\n                aria-selected={props.state.selected() === node().id}\n                on:click={() => props.state.select(node().id)}\n                on:keydown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    props.state.select(node().id);\n                  }\n                }}\n              >\n                <span class={`kind ${node().type}`}>{node().type}</span>\n                <span class=\"name\">{props.state.nameOf(node().id)}</span>\n                <span class=\"value\">\n                  {node().type === \"resource\" ? node().state : node().preview}\n                </span>\n                <Show when={node().writes > 0}>\n                  <span class=\"updates\" title=\"Writes\">\n                    ×{node().writes}\n                  </span>\n                </Show>\n              </div>\n            )}\n          </For>\n        </Show>\n      </div>\n      <Show when={props.state.selectedNode() !== undefined}>\n        <Details state={props.state} />\n      </Show>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,MAAa,YAAiC,UAAU;CACtD,MAAM,cACJ,MAAM,MACH,SAAS,CAAA,CACT,MAAM,QACJ,SAAS,KAAK,SAAS,YAAY,KAAK,SAAS,WAAW,KAAK,SAAS,UAC7E;CACJ;EAAA,MAAA,OAAA,QAAA,GAAA,QAAA,KAAA;EAAA,OAAA,OAAAA,gBAAA,MAAA;GAAA,IAAA,OAAA;IAAA,OAAA,MAAA,CAAA,CAAA,SAAA;GAAA;GAAA,IAAA,WAAA;IAAA,OAAA,OAAA;GAAA;GAAA,IAAA,WAAA;IAAA,OAAAA,gBAAA,KAAA;KAAA,IAAA,OAAA;MAAA,OAAA,MAAA;KAAA;KAAA,MAAA,SAAA,KAAA;KAAA,WAAA,SAAA;MAAA,MAAA,OAAA,QAAA,GAAA,QAAA,KAAA,YAAA,QAAA,MAAA,aAAA,QAAA,MAAA;MAAA,aAAA;OAAA,aAAA,MAAA,WAAA,KAAA,CAAA,CAAA,EAAA;MAAA,CAAA;MAAA,aAAA;OAAA,aAAA,MAAA,iBAAA,MAAA,MAAA,SAAA,MAAA,KAAA,CAAA,CAAA,EAAA;MAAA,CAAA;MAAA,iBAAA,MAAA,eAAA,MAAA,MAAA,OAAA,KAAA,CAAA,CAAA,EAAA,CAAA;MAAA,iBAAA,MAAA,YAAA,UAAA;OAAA,IAAA,MAAA,QAAA,WAAA,MAAA,QAAA,KAAA;QAAA,MAAA,eAAA;QAAA,MAAA,MAAA,OAAA,KAAA,CAAA,CAAA,EAAA;OAAA;MAAA,CAAA;MAAA,aAAA;OAAA,UAAA,OAAA,QAAA,KAAA,CAAA,CAAA,MAAA;MAAA,CAAA;MAAA,OAAA,aAAA,KAAA,CAAA,CAAA,IAAA;MAAA,OAAA,aAAA,MAAA,MAAA,OAAA,KAAA,CAAA,CAAA,EAAA,CAAA;MAAA,OAAA,aAAA,KAAA,CAAA,CAAA,SAAA,aAAA,KAAA,CAAA,CAAA,QAAA,KAAA,CAAA,CAAA,OAAA;MAAA,OAAA,MAAAA,gBAAA,MAAA;OAAA,IAAA,OAAA;QAAA,OAAA,KAAA,CAAA,CAAA,SAAA;OAAA;OAAA,IAAA,WAAA;QAAA,MAAA,OAAA,QAAA;QAAA,OAAA,YAAA,KAAA,CAAA,CAAA,MAAA;QAAA,OAAA;OAAA;MAAA,GAAA,MAAA,CAAA;MAAA,OAAA;KAAA;IAAA,GAAA,KAAA;GAAA;EAAA,GAAA,MAAA,CAAA;EAAA,OAAA,MAAAA,gBAAA,MAAA;GAAA,IAAA,OAAA;IAAA,OAAA,MAAA,MAAA,aAAA,MAAA,KAAA;GAAA;GAAA,IAAA,WAAA;IAAA,OAAAA,gBAAA,SAAA,EAAA,IAAA,QAAA;KAAA,OAAA,MAAA;IAAA,EAAA,GAAA,SAAA;GAAA;EAAA,GAAA,MAAA,CAAA;EAAA,OAAA;CAAA;AA2CF"}