@shadow-js/devtools 0.0.0-stage → 1.0.1

package/dist/dev/ui/details.js

@@ -0,0 +1,294 @@
+import { For, Show, addEventListener, anchor, className, createComponent, effect, insert, memo, setAttribute, template } from "@shadow-js/web";
+import { untrack, useEffect, useSignal } from "@shadow-js/core";
+//#region src/ui/details.tsx
+const _tmpl$ = /*#__PURE__*/ template("<button type=\"button\" class=\"btn\">Apply</button>");
+const _tmpl$2 = /*#__PURE__*/ template("<button type=\"button\" class=\"btn\">Revert</button>");
+const _tmpl$3 = /*#__PURE__*/ template("<div class=\"section\"><h4>Value</h4><textarea class=\"textarea\" aria-label=\"Value\"></textarea><div><span role=\"status\"></span></div></div>");
+const _tmpl$4 = /*#__PURE__*/ template("<span><button type=\"button\" class=\"link\"></button> </span>");
+const _tmpl$5 = /*#__PURE__*/ template("<li><strong></strong></li>");
+const _tmpl$6 = /*#__PURE__*/ template("<div class=\"status\">Also changed: </div>");
+const _tmpl$7 = /*#__PURE__*/ template("<div class=\"status\">Older history was dropped.</div>");
+const _tmpl$8 = /*#__PURE__*/ template("<div class=\"section\" data-why><h4>Why did it run?</h4><ol class=\"chain\"></ol></div>");
+const _tmpl$9 = /*#__PURE__*/ template("<div class=\"status\"> runs ·  updates · last  ms · total  ms</div>");
+const _tmpl$10 = /*#__PURE__*/ template("<div class=\"section\"><h4>Reads</h4></div>");
+const _tmpl$11 = /*#__PURE__*/ template("<div class=\"section\"><h4>Read by</h4></div>");
+const _tmpl$12 = /*#__PURE__*/ template("<section class=\"detail\" aria-label=\"Details\"><div class=\"section\"><strong></strong> <span class=\"status\"> #</span></div></section>");
+/**
+* Shows the value of a signal or store as indented JSON, and edits it. Props: `state` is the panel's
+* {@link PanelState} and `node` is the selected node. Apply writes the text back through the agent, and a
+* successful write re-renders the app like any other write. Revert discards the edit. While the text is
+* being edited, the view does not overwrite it. A resource or a memo has no editor here.
+*
+* Internal to the panel: the package index does not export this component. Used in development builds
+* only.
+*
+* @internal
+*/
+const ValueEditor = (props) => {
+	const [text, setText] = useSignal("");
+	const [dirty, setDirty] = useSignal(false);
+	const [editable, setEditable] = useSignal(false);
+	const [status, setStatus] = useSignal({
+		kind: "idle",
+		text: ""
+	});
+	useEffect(() => {
+		props.state.version();
+		const id = props.node.id;
+		const store = props.node.type === "store";
+		if (dirty()) return;
+		untrack(() => props.state.backend.request(store ? {
+			type: "store",
+			id
+		} : {
+			type: "value",
+			id
+		})).then((response) => {
+			if (!response.ok) {
+				setStatus({
+					kind: "bad",
+					text: response.error
+				});
+				return;
+			}
+			const result = response.result;
+			setText(result.text);
+			setEditable(result.editable);
+		});
+	});
+	const apply = () => {
+		const id = props.node.id;
+		const request = props.node.type === "store" ? {
+			type: "store-set",
+			id,
+			path: [],
+			text: text()
+		} : {
+			type: "write",
+			id,
+			text: text()
+		};
+		props.state.backend.request(request).then((response) => {
+			if (response.ok) {
+				setDirty(false);
+				setStatus({
+					kind: "good",
+					text: "Applied."
+				});
+				props.state.refresh();
+			} else setStatus({
+				kind: "bad",
+				text: response.error
+			});
+		});
+	};
+	{
+		const _el$ = _tmpl$3(), _el$2 = _el$.firstChild.nextSibling, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = anchor(_el$3, _el$4);
+		effect(() => {
+			setAttribute(_el$, "data-editor", props.node.type);
+		});
+		setAttribute(_el$2, "spellcheck", false);
+		effect(() => {
+			_el$2.readOnly = !editable();
+		});
+		addEventListener(_el$2, "input", (event) => {
+			setText(event.currentTarget.value);
+			setDirty(true);
+			setStatus({
+				kind: "idle",
+				text: ""
+			});
+		});
+		effect(() => {
+			_el$2.value = text() ?? "";
+		});
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return editable();
+			},
+			get children() {
+				return [(() => {
+					const _el$ = _tmpl$();
+					effect(() => {
+						_el$.disabled = !dirty();
+					});
+					addEventListener(_el$, "click", apply);
+					return _el$;
+				})(), " "];
+			}
+		}, "Show"), _el$5);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return dirty();
+			},
+			get children() {
+				return [(() => {
+					const _el$ = _tmpl$2();
+					addEventListener(_el$, "click", () => {
+						setDirty(false);
+						props.state.refresh();
+					});
+					return _el$;
+				})(), " "];
+			}
+		}, "Show"), _el$4);
+		effect(() => {
+			className(_el$4, `status ${status().kind}`);
+		});
+		insert(_el$4, () => status().text);
+		return _el$;
+	}
+};
+/**
+* The selected node: its name and kind, its counters (runs, updates and durations for memos and effects),
+* what it reads, who reads it, why it last ran (memos and effects), and a {@link ValueEditor} for signals
+* and stores. Props: `state` is the panel's {@link PanelState}. It renders nothing when no node is
+* selected.
+*
+* Internal to the panel: the package index does not export this component. Used in development builds
+* only.
+*
+* @internal
+*/
+const Details = (props) => createComponent(Show, {
+	get when() {
+		return props.state.selectedNode();
+	},
+	children: (node) => {
+		const _el$ = _tmpl$12(), _el$2 = _el$.firstChild, _el$6 = _el$2.firstChild, _el$7 = _el$6.nextSibling.nextSibling, _el$8 = _el$7.firstChild, _el$3 = anchor(_el$, null), _el$4 = anchor(_el$, null), _el$5 = anchor(_el$, null);
+		insert(_el$6, () => props.state.nameOf(node().id));
+		insert(_el$7, () => node().type, _el$8);
+		insert(_el$7, () => node().id);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return node().type === "memo" || node().type === "effect";
+			},
+			get children() {
+				const _el$ = _tmpl$9(), _el$2 = _el$.firstChild, _el$3 = _el$2.splitText(8), _el$4 = _el$3.splitText(16), _el$5 = _el$4.splitText(12);
+				insert(_el$, () => node().runs, _el$2);
+				insert(_el$, () => node().updates, _el$3);
+				insert(_el$, () => node().lastDuration.toFixed(2), _el$4);
+				insert(_el$, () => node().totalDuration.toFixed(2), _el$5);
+				return _el$;
+			}
+		}, "Show"));
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return node().sources.length > 0;
+			},
+			get children() {
+				const _el$ = _tmpl$10();
+				insert(_el$, createComponent(For, {
+					get each() {
+						return node().sources;
+					},
+					children: (id) => {
+						const _el$ = _tmpl$4(), _el$2 = _el$.firstChild;
+						addEventListener(_el$2, "click", () => props.state.select(id));
+						insert(_el$2, () => props.state.nameOf(id));
+						return _el$;
+					}
+				}, "For"));
+				return _el$;
+			}
+		}, "Show"), _el$3);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return node().observers.length > 0;
+			},
+			get children() {
+				const _el$ = _tmpl$11();
+				insert(_el$, createComponent(For, {
+					get each() {
+						return node().observers;
+					},
+					children: (id) => {
+						const _el$ = _tmpl$4(), _el$2 = _el$.firstChild;
+						addEventListener(_el$2, "click", () => props.state.select(id));
+						insert(_el$2, () => props.state.nameOf(id));
+						return _el$;
+					}
+				}, "For"));
+				return _el$;
+			}
+		}, "Show"), _el$4);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.state.explanation();
+			},
+			children: (why) => {
+				const _el$ = _tmpl$8(), _el$2 = _el$.firstChild.nextSibling, _el$3 = anchor(_el$, null);
+				insert(_el$2, createComponent(For, {
+					get each() {
+						return why().chain;
+					},
+					children: (step) => {
+						const _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = anchor(_el$, null);
+						insert(_el$, () => step.kind === "write" ? "write " : step.kind === "run" ? "ran " : "", _el$2);
+						insert(_el$2, () => step.label);
+						insert(_el$, createComponent(Show, {
+							get when() {
+								return step.preview !== void 0;
+							},
+							get children() {
+								return [" = ", memo(() => step.preview)];
+							}
+						}, "Show"), _el$3);
+						insert(_el$, createComponent(Show, {
+							get when() {
+								return step.writer !== void 0;
+							},
+							get children() {
+								return [
+									" (written by ",
+									memo(() => step.writer),
+									")"
+								];
+							}
+						}, "Show"));
+						return _el$;
+					}
+				}, "For"));
+				insert(_el$, createComponent(Show, {
+					get when() {
+						return why().alsoCausedBy.length > 0;
+					},
+					get children() {
+						const _el$ = _tmpl$6();
+						insert(_el$, () => why().alsoCausedBy.map((step) => step.label).join(", "));
+						return _el$;
+					}
+				}, "Show"), _el$3);
+				insert(_el$, createComponent(Show, {
+					get when() {
+						return why().truncated;
+					},
+					get children() {
+						return _tmpl$7();
+					}
+				}, "Show"));
+				return _el$;
+			}
+		}, "Show"), _el$5);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return node().type === "signal" || node().type === "store";
+			},
+			get children() {
+				return createComponent(ValueEditor, {
+					get state() {
+						return props.state;
+					},
+					get node() {
+						return node();
+					}
+				}, "ValueEditor");
+			}
+		}, "Show"));
+		return _el$;
+	}
+}, "Show");
+//#endregion
+export { Details, ValueEditor };
+
+//# sourceMappingURL=details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"details.js","names":["_$anchor","_$createComponent","_$memo"],"sources":["../../../src/ui/details.tsx"],"sourcesContent":["import { untrack, useEffect, useSignal } from \"@shadow-js/core\";\nimport { For, Show } from \"@shadow-js/web\";\nimport type { Component } from \"@shadow-js/web/jsx-runtime\";\nimport type { AgentRequest } from \"../agent\";\nimport type { SnapshotNode } from \"../inspector\";\nimport type { PanelState } from \"./state\";\n\ninterface NodeProps {\n  state: PanelState;\n  node: SnapshotNode;\n}\n\n/**\n * Shows the value of a signal or store as indented JSON, and edits it. Props: `state` is the panel's\n * {@link PanelState} and `node` is the selected node. Apply writes the text back through the agent, and a\n * successful write re-renders the app like any other write. Revert discards the edit. While the text is\n * being edited, the view does not overwrite it. A resource or a memo has no editor here.\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 ValueEditor: Component<NodeProps> = (props) => {\n  const [text, setText] = useSignal(\"\");\n  const [dirty, setDirty] = useSignal(false);\n  const [editable, setEditable] = useSignal(false);\n  const [status, setStatus] = useSignal({ kind: \"idle\", text: \"\" });\n\n  useEffect(() => {\n    // Follow the value while it changes, unless the user is typing.\n    props.state.version();\n    const id = props.node.id;\n    const store = props.node.type === \"store\";\n    if (dirty()) return;\n    // The request reads the value through the agent; the reads above are the only dependencies.\n    const request = untrack(() =>\n      props.state.backend.request(store ? { type: \"store\", id } : { type: \"value\", id }),\n    );\n    void request.then((response) => {\n      if (!response.ok) {\n        setStatus({ kind: \"bad\", text: response.error });\n        return;\n      }\n      const result = response.result as { text: string; editable: boolean };\n      setText(result.text);\n      setEditable(result.editable);\n    });\n  });\n\n  const apply = (): void => {\n    const id = props.node.id;\n    const request: AgentRequest =\n      props.node.type === \"store\"\n        ? { type: \"store-set\", id, path: [], text: text() }\n        : { type: \"write\", id, text: text() };\n    void props.state.backend.request(request).then((response) => {\n      if (response.ok) {\n        setDirty(false);\n        setStatus({ kind: \"good\", text: \"Applied.\" });\n        props.state.refresh();\n      } else {\n        setStatus({ kind: \"bad\", text: response.error });\n      }\n    });\n  };\n\n  return (\n    <div class=\"section\" data-editor={props.node.type}>\n      <h4>Value</h4>\n      <textarea\n        class=\"textarea\"\n        aria-label=\"Value\"\n        spellcheck={false}\n        readOnly={!editable()}\n        value={text()}\n        on:input={(event) => {\n          setText(event.currentTarget.value);\n          setDirty(true);\n          setStatus({ kind: \"idle\", text: \"\" });\n        }}\n      />\n      <div>\n        <Show when={editable()}>\n          <button type=\"button\" class=\"btn\" disabled={!dirty()} on:click={apply}>\n            Apply\n          </button>{\" \"}\n        </Show>\n        <Show when={dirty()}>\n          <button\n            type=\"button\"\n            class=\"btn\"\n            on:click={() => {\n              setDirty(false);\n              props.state.refresh();\n            }}\n          >\n            Revert\n          </button>{\" \"}\n        </Show>\n        <span class={`status ${status().kind}`} role=\"status\">\n          {status().text}\n        </span>\n      </div>\n    </div>\n  );\n};\n\n/** Props of {@link Details}. */\ninterface DetailsProps {\n  state: PanelState;\n}\n\n/**\n * The selected node: its name and kind, its counters (runs, updates and durations for memos and effects),\n * what it reads, who reads it, why it last ran (memos and effects), and a {@link ValueEditor} for signals\n * and stores. Props: `state` is the panel's {@link PanelState}. It renders nothing when no node is\n * selected.\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 Details: Component<DetailsProps> = (props) => (\n  <Show when={props.state.selectedNode()}>\n    {(node) => (\n      <section class=\"detail\" aria-label=\"Details\">\n        <div class=\"section\">\n          <strong>{props.state.nameOf(node().id)}</strong>{\" \"}\n          <span class=\"status\">\n            {node().type} #{node().id}\n          </span>\n          <Show when={node().type === \"memo\" || node().type === \"effect\"}>\n            <div class=\"status\">\n              {node().runs} runs · {node().updates} updates · last {node().lastDuration.toFixed(2)}{\" \"}\n              ms · total {node().totalDuration.toFixed(2)} ms\n            </div>\n          </Show>\n        </div>\n        <Show when={node().sources.length > 0}>\n          <div class=\"section\">\n            <h4>Reads</h4>\n            <For each={node().sources}>\n              {(id) => (\n                <span>\n                  <button type=\"button\" class=\"link\" on:click={() => props.state.select(id)}>\n                    {props.state.nameOf(id)}\n                  </button>{\" \"}\n                </span>\n              )}\n            </For>\n          </div>\n        </Show>\n        <Show when={node().observers.length > 0}>\n          <div class=\"section\">\n            <h4>Read by</h4>\n            <For each={node().observers}>\n              {(id) => (\n                <span>\n                  <button type=\"button\" class=\"link\" on:click={() => props.state.select(id)}>\n                    {props.state.nameOf(id)}\n                  </button>{\" \"}\n                </span>\n              )}\n            </For>\n          </div>\n        </Show>\n        <Show when={props.state.explanation()}>\n          {(why) => (\n            <div class=\"section\" data-why>\n              <h4>Why did it run?</h4>\n              <ol class=\"chain\">\n                <For each={why().chain}>\n                  {(step) => (\n                    <li>\n                      {step.kind === \"write\" ? \"write \" : step.kind === \"run\" ? \"ran \" : \"\"}\n                      <strong>{step.label}</strong>\n                      <Show when={step.preview !== undefined}> = {step.preview}</Show>\n                      <Show when={step.writer !== undefined}> (written by {step.writer})</Show>\n                    </li>\n                  )}\n                </For>\n              </ol>\n              <Show when={why().alsoCausedBy.length > 0}>\n                <div class=\"status\">\n                  Also changed:{\" \"}\n                  {why()\n                    .alsoCausedBy.map((step) => step.label)\n                    .join(\", \")}\n                </div>\n              </Show>\n              <Show when={why().truncated}>\n                <div class=\"status\">Older history was dropped.</div>\n              </Show>\n            </div>\n          )}\n        </Show>\n        <Show when={node().type === \"signal\" || node().type === \"store\"}>\n          <ValueEditor state={props.state} node={node()} />\n        </Show>\n      </section>\n    )}\n  </Show>\n);\n"],"mappings":"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"}

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

@@ -0,0 +1,43 @@
+import { InspectionSnapshot } from "../inspection.js";
+import { Backend } from "../backend.js";
+import { Accessor } from "@shadow-js/core";
+//#region src/ui/inspection-state.d.ts
+/**
+ * What the inspection views of a remote panel read and write: the registered sources, the one on
+ * screen, and the state of the last request. Built by {@link createInspectionState}.
+ *
+ * @since 1.0.0
+ */
+export interface InspectionState {
+  /** The sources the page answered with at the last refresh (empty before the first one). */
+  readonly sources: Accessor<readonly InspectionSnapshot[]>;
+  /** The name of the source on screen, or `""` when there is none. */
+  readonly active: Accessor<string>;
+  /** The reason the last refresh failed, or `""` when it did not. */
+  readonly error: Accessor<string>;
+  /** True while a refresh is waiting for the page. */
+  readonly loading: Accessor<boolean>;
+  /** Shows the source registered as `name`. Ignored when no source has that name. */
+  select(name: string): void;
+  /** Asks the page for its sources now. Resolves when the answer arrived (or failed). */
+  refresh(): Promise<void>;
+}
+/**
+ * The state of the inspection views of a panel (the router and query tabs): it asks the agent for the
+ * registered sources, keeps the answer, and remembers which source is shown. It talks only to a
+ * {@link Backend}, so it works for a local agent and for a remote one. An answer that does not have
+ * the expected shape is refused and reported as an error; the previous sources stay.
+ *
+ * @param backend The backend to ask.
+ * @returns The inspection state.
+ * @example
+ * import { createInspectionState, createLocalBackend, createAgent } from "@shadow-js/devtools";
+ *
+ * const state = createInspectionState(createLocalBackend(createAgent()));
+ * await state.refresh();
+ * state.sources(); // the registered sources
+ * @since 1.0.0
+ */
+export declare function createInspectionState(backend: Backend): InspectionState;
+//#endregion
+//# sourceMappingURL=inspection-state.d.ts.map

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

@@ -0,0 +1,62 @@
+import { parseInspectResult } from "../inspection.js";
+import { useSignal } from "@shadow-js/core";
+//#region src/ui/inspection-state.ts
+/**
+* The state of the inspection views of a panel (the router and query tabs): it asks the agent for the
+* registered sources, keeps the answer, and remembers which source is shown. It talks only to a
+* {@link Backend}, so it works for a local agent and for a remote one. An answer that does not have
+* the expected shape is refused and reported as an error; the previous sources stay.
+*
+* @param backend The backend to ask.
+* @returns The inspection state.
+* @example
+* import { createInspectionState, createLocalBackend, createAgent } from "@shadow-js/devtools";
+*
+* const state = createInspectionState(createLocalBackend(createAgent()));
+* await state.refresh();
+* state.sources(); // the registered sources
+* @since 1.0.0
+*/
+function createInspectionState(backend) {
+	const [sources, setSources] = useSignal([]);
+	const [active, setActive] = useSignal("");
+	const [error, setError] = useSignal("");
+	const [loading, setLoading] = useSignal(false);
+	const select = (name) => {
+		if (sources().some((source) => source.name === name)) setActive(name);
+	};
+	const refresh = async () => {
+		setLoading(true);
+		try {
+			const response = await backend.request({ type: "inspect" });
+			if (!response.ok) {
+				setError(response.error);
+				return;
+			}
+			const parsed = parseInspectResult(response.result);
+			if (parsed === null) {
+				setError("The page answered the inspect request with an unexpected value.");
+				return;
+			}
+			setSources(parsed);
+			setError("");
+			if (!parsed.some((source) => source.name === active())) setActive(parsed[0]?.name ?? "");
+		} catch (failure) {
+			setError(failure instanceof Error ? failure.message : "The request failed.");
+		} finally {
+			setLoading(false);
+		}
+	};
+	return {
+		sources,
+		active,
+		error,
+		loading,
+		select,
+		refresh
+	};
+}
+//#endregion
+export { createInspectionState };
+
+//# sourceMappingURL=inspection-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inspection-state.js","names":[],"sources":["../../../src/ui/inspection-state.ts"],"sourcesContent":["import { type Accessor, useSignal } from \"@shadow-js/core\";\nimport type { Backend } from \"../backend\";\nimport { type InspectionSnapshot, parseInspectResult } from \"../inspection\";\n\n/**\n * What the inspection views of a remote panel read and write: the registered sources, the one on\n * screen, and the state of the last request. Built by {@link createInspectionState}.\n *\n * @since 1.0.0\n */\nexport interface InspectionState {\n  /** The sources the page answered with at the last refresh (empty before the first one). */\n  readonly sources: Accessor<readonly InspectionSnapshot[]>;\n  /** The name of the source on screen, or `\"\"` when there is none. */\n  readonly active: Accessor<string>;\n  /** The reason the last refresh failed, or `\"\"` when it did not. */\n  readonly error: Accessor<string>;\n  /** True while a refresh is waiting for the page. */\n  readonly loading: Accessor<boolean>;\n  /** Shows the source registered as `name`. Ignored when no source has that name. */\n  select(name: string): void;\n  /** Asks the page for its sources now. Resolves when the answer arrived (or failed). */\n  refresh(): Promise<void>;\n}\n\n/**\n * The state of the inspection views of a panel (the router and query tabs): it asks the agent for the\n * registered sources, keeps the answer, and remembers which source is shown. It talks only to a\n * {@link Backend}, so it works for a local agent and for a remote one. An answer that does not have\n * the expected shape is refused and reported as an error; the previous sources stay.\n *\n * @param backend The backend to ask.\n * @returns The inspection state.\n * @example\n * import { createInspectionState, createLocalBackend, createAgent } from \"@shadow-js/devtools\";\n *\n * const state = createInspectionState(createLocalBackend(createAgent()));\n * await state.refresh();\n * state.sources(); // the registered sources\n * @since 1.0.0\n */\nexport function createInspectionState(backend: Backend): InspectionState {\n  const [sources, setSources] = useSignal<readonly InspectionSnapshot[]>([]);\n  const [active, setActive] = useSignal(\"\");\n  const [error, setError] = useSignal(\"\");\n  const [loading, setLoading] = useSignal(false);\n\n  const select = (name: string): void => {\n    if (sources().some((source) => source.name === name)) setActive(name);\n  };\n\n  const refresh = async (): Promise<void> => {\n    setLoading(true);\n    try {\n      const response = await backend.request({ type: \"inspect\" });\n      if (!response.ok) {\n        setError(response.error);\n        return;\n      }\n      const parsed = parseInspectResult(response.result);\n      if (parsed === null) {\n        setError(\"The page answered the inspect request with an unexpected value.\");\n        return;\n      }\n      setSources(parsed);\n      setError(\"\");\n      if (!parsed.some((source) => source.name === active())) {\n        setActive(parsed[0]?.name ?? \"\");\n      }\n    } catch (failure) {\n      setError(failure instanceof Error ? failure.message : \"The request failed.\");\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return { sources, active, error, loading, select, refresh };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,sBAAsB,SAAmC;CACvE,MAAM,CAAC,SAAS,cAAc,UAAyC,CAAC,CAAC;CACzE,MAAM,CAAC,QAAQ,aAAa,UAAU,EAAE;CACxC,MAAM,CAAC,OAAO,YAAY,UAAU,EAAE;CACtC,MAAM,CAAC,SAAS,cAAc,UAAU,KAAK;CAE7C,MAAM,UAAU,SAAuB;EACrC,IAAI,QAAQ,CAAC,CAAC,MAAM,WAAW,OAAO,SAAS,IAAI,GAAG,UAAU,IAAI;CACtE;CAEA,MAAM,UAAU,YAA2B;EACzC,WAAW,IAAI;EACf,IAAI;GACF,MAAM,WAAW,MAAM,QAAQ,QAAQ,EAAE,MAAM,UAAU,CAAC;GAC1D,IAAI,CAAC,SAAS,IAAI;IAChB,SAAS,SAAS,KAAK;IACvB;GACF;GACA,MAAM,SAAS,mBAAmB,SAAS,MAAM;GACjD,IAAI,WAAW,MAAM;IACnB,SAAS,iEAAiE;IAC1E;GACF;GACA,WAAW,MAAM;GACjB,SAAS,EAAE;GACX,IAAI,CAAC,OAAO,MAAM,WAAW,OAAO,SAAS,OAAO,CAAC,GACnD,UAAU,OAAO,EAAE,EAAE,QAAQ,EAAE;EAEnC,SAAS,SAAS;GAChB,SAAS,mBAAmB,QAAQ,QAAQ,UAAU,qBAAqB;EAC7E,UAAU;GACR,WAAW,KAAK;EAClB;CACF;CAEA,OAAO;EAAE;EAAS;EAAQ;EAAO;EAAS;EAAQ;CAAQ;AAC5D"}

package/dist/dev/ui/issues.js

@@ -0,0 +1,85 @@
+import { For, Show, addEventListener, anchor, createComponent, insert, template } from "@shadow-js/web";
+//#region src/ui/issues.tsx
+const _tmpl$ = /*#__PURE__*/ template("<div class=\"empty\">No errors or hydration mismatches.</div>");
+const _tmpl$2 = /*#__PURE__*/ template("<code></code>");
+const _tmpl$3 = /*#__PURE__*/ template("<button type=\"button\" class=\"link\"></button>");
+const _tmpl$4 = /*#__PURE__*/ template("<div class=\"issue\" data-issue=\"error\"></div>");
+const _tmpl$5 = /*#__PURE__*/ template("<div class=\"issue\" data-issue=\"hydration\"><strong>Hydration mismatch:</strong> <div class=\"status\">server: </div><div class=\"status\">client: </div></div>");
+const _tmpl$6 = /*#__PURE__*/ template("<section class=\"list\" aria-label=\"Issues\"></section>");
+/**
+* The Issues tab. Props: `state` is the panel's {@link PanelState}. It lists the errors the runtime reported,
+* with their diagnostic code when there is one and a link to the node they belong to, then the hydration
+* mismatches: the runtime's message, the expected value (labeled server) and the actual value (labeled
+* client).
+*
+* Internal to the panel: the package index does not export this component. Used in development builds
+* only.
+*
+* @internal
+*/
+const IssuesTab = (props) => {
+	const _el$ = _tmpl$6();
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return props.state.errors().length + props.state.hydration().length > 0;
+		},
+		get fallback() {
+			return _tmpl$();
+		},
+		get children() {
+			return [createComponent(For, {
+				get each() {
+					return props.state.errors();
+				},
+				key: (error) => error.seq,
+				children: (error) => {
+					const _el$ = _tmpl$4(), _el$2 = anchor(_el$, null), _el$3 = anchor(_el$, null);
+					insert(_el$, createComponent(Show, {
+						get when() {
+							return error().code !== void 0;
+						},
+						get children() {
+							return [(() => {
+								const _el$ = _tmpl$2();
+								insert(_el$, () => error().code);
+								return _el$;
+							})(), " "];
+						}
+					}, "Show"), _el$2);
+					insert(_el$, () => error().message, _el$3);
+					insert(_el$, createComponent(Show, {
+						get when() {
+							return error().id !== 0;
+						},
+						get children() {
+							return [" ", (() => {
+								const _el$ = _tmpl$3();
+								addEventListener(_el$, "click", () => props.state.select(error().id));
+								insert(_el$, () => props.state.nameOf(error().id));
+								return _el$;
+							})()];
+						}
+					}, "Show"));
+					return _el$;
+				}
+			}, "For"), createComponent(For, {
+				get each() {
+					return props.state.hydration();
+				},
+				key: (mismatch) => mismatch.seq,
+				children: (mismatch) => {
+					const _el$ = _tmpl$5(), _el$2 = _el$.firstChild.nextSibling.nextSibling, _el$3 = _el$2.nextSibling;
+					insert(_el$, () => mismatch().message, _el$2);
+					insert(_el$2, () => mismatch().expected);
+					insert(_el$3, () => mismatch().actual);
+					return _el$;
+				}
+			}, "For")];
+		}
+	}, "Show"));
+	return _el$;
+};
+//#endregion
+export { IssuesTab };
+
+//# sourceMappingURL=issues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"issues.js","names":["_$createComponent","_$anchor"],"sources":["../../../src/ui/issues.tsx"],"sourcesContent":["import { For, Show } from \"@shadow-js/web\";\nimport type { Component } from \"@shadow-js/web/jsx-runtime\";\nimport type { TabProps } from \"./tree\";\n\n/**\n * The Issues tab. Props: `state` is the panel's {@link PanelState}. It lists the errors the runtime reported,\n * with their diagnostic code when there is one and a link to the node they belong to, then the hydration\n * mismatches: the runtime's message, the expected value (labeled server) and the actual value (labeled\n * client).\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 IssuesTab: Component<TabProps> = (props) => (\n  <section class=\"list\" aria-label=\"Issues\">\n    <Show\n      when={props.state.errors().length + props.state.hydration().length > 0}\n      fallback={<div class=\"empty\">No errors or hydration mismatches.</div>}\n    >\n      <For each={props.state.errors()} key={(error) => error.seq}>\n        {(error) => (\n          <div class=\"issue\" data-issue=\"error\">\n            <Show when={error().code !== undefined}>\n              <code>{error().code}</code>{\" \"}\n            </Show>\n            {error().message}\n            <Show when={error().id !== 0}>\n              {\" \"}\n              <button type=\"button\" class=\"link\" on:click={() => props.state.select(error().id)}>\n                {props.state.nameOf(error().id)}\n              </button>\n            </Show>\n          </div>\n        )}\n      </For>\n      <For each={props.state.hydration()} key={(mismatch) => mismatch.seq}>\n        {(mismatch) => (\n          <div class=\"issue\" data-issue=\"hydration\">\n            <strong>Hydration mismatch:</strong> {mismatch().message}\n            <div class=\"status\">server: {mismatch().expected}</div>\n            <div class=\"status\">client: {mismatch().actual}</div>\n          </div>\n        )}\n      </For>\n    </Show>\n  </section>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAeA,MAAa,aAAkC,UAAU;CAAA,MAAA,OAAA,QAAA;CAAA,OAAA,MAAAA,gBAAA,MAAA;EAAA,IAAA,OAAA;GAAA,OAAA,MAAA,MAAA,OAAA,CAAA,CAAA,SAAA,MAAA,MAAA,UAAA,CAAA,CAAA,SAAA;EAAA;EAAA,IAAA,WAAA;GAAA,OAAA,OAAA;EAAA;EAAA,IAAA,WAAA;GAAA,OAAA,CAAAA,gBAAA,KAAA;IAAA,IAAA,OAAA;KAAA,OAAA,MAAA,MAAA,OAAA;IAAA;IAAA,MAAA,UAAA,MAAA;IAAA,WAAA,UAAA;KAAA,MAAA,OAAA,QAAA,GAAA,QAAAC,OAAA,MAAA,IAAA,GAAA,QAAAA,OAAA,MAAA,IAAA;KAAA,OAAA,MAAAD,gBAAA,MAAA;MAAA,IAAA,OAAA;OAAA,OAAA,MAAA,CAAA,CAAA,SAAA,KAAA;MAAA;MAAA,IAAA,WAAA;OAAA,OAAA,QAAA;QAAA,MAAA,OAAA,QAAA;QAAA,OAAA,YAAA,MAAA,CAAA,CAAA,IAAA;QAAA,OAAA;OAAA,EAAA,CAAA,GAAA,GAAA;MAAA;KAAA,GAAA,MAAA,GAAA,KAAA;KAAA,OAAA,YAAA,MAAA,CAAA,CAAA,SAAA,KAAA;KAAA,OAAA,MAAAA,gBAAA,MAAA;MAAA,IAAA,OAAA;OAAA,OAAA,MAAA,CAAA,CAAA,OAAA;MAAA;MAAA,IAAA,WAAA;OAAA,OAAA,CAAA,YAAA;QAAA,MAAA,OAAA,QAAA;QAAA,iBAAA,MAAA,eAAA,MAAA,MAAA,OAAA,MAAA,CAAA,CAAA,EAAA,CAAA;QAAA,OAAA,YAAA,MAAA,MAAA,OAAA,MAAA,CAAA,CAAA,EAAA,CAAA;QAAA,OAAA;OAAA,EAAA,CAAA,CAAA;MAAA;KAAA,GAAA,MAAA,CAAA;KAAA,OAAA;IAAA;GAAA,GAAA,KAAA,GAAAA,gBAAA,KAAA;IAAA,IAAA,OAAA;KAAA,OAAA,MAAA,MAAA,UAAA;IAAA;IAAA,MAAA,aAAA,SAAA;IAAA,WAAA,aAAA;KAAA,MAAA,OAAA,QAAA,GAAA,QAAA,KAAA,WAAA,YAAA,aAAA,QAAA,MAAA;KAAA,OAAA,YAAA,SAAA,CAAA,CAAA,SAAA,KAAA;KAAA,OAAA,aAAA,SAAA,CAAA,CAAA,QAAA;KAAA,OAAA,aAAA,SAAA,CAAA,CAAA,MAAA;KAAA,OAAA;IAAA;GAAA,GAAA,KAAA,CAAA;EAAA;CAAA,GAAA,MAAA,CAAA;CAAA,OAAA;AAAA"}

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

@@ -0,0 +1,55 @@
+import { PanelState } from "./state.js";
+import { Component } from "@shadow-js/web/jsx-runtime";
+//#region src/ui/panel.d.ts
+/**
+ * Props of {@link Panel}.
+ *
+ * @since 1.0.0
+ */
+export interface PanelProps {
+  /**
+   * The panel's state, from {@link createPanelState}.
+   */
+  state: PanelState;
+  /**
+   * Whether the panel is shown. A closed panel keeps its state and is hidden.
+   */
+  open: boolean;
+  /**
+   * Left edge of the panel in pixels.
+   */
+  x: number;
+  /**
+   * Top edge of the panel in pixels.
+   */
+  y: number;
+  /**
+   * Called while the header is dragged, with the new position in pixels. The panel does not move itself;
+   * the owner sets `x` and `y`.
+   */
+  onMove(x: number, y: number): void;
+  /**
+   * Called when the close button is pressed.
+   */
+  onClose(): void;
+}
+/**
+ * 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
+ */
+export declare const Panel: Component<PanelProps>;
+//#endregion
+//# sourceMappingURL=panel.d.ts.map