@plitzi/sdk-dev-tools 0.37.9 → 0.37.10

package/dist/components/DevToolsPanel/DevToolsPanel.mjs

@@ -4,51 +4,53 @@ import n from "./DevToolsSubHeader.mjs";
 import r from "@plitzi/plitzi-ui/hooks/useStorage";
 import i from "clsx";
 import { useCallback as a, useMemo as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "@plitzi/plitzi-ui/ContainerResizable";
-import { useCommonStore as f } from "@plitzi/sdk-shared/store";
+import { useCommonStore as l } from "@plitzi/sdk-shared/store";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "@plitzi/plitzi-ui/ContainerResizable";
 //#region src/components/DevToolsPanel/DevToolsPanel.tsx
-var p = "vertical", m = "horizontal", h = ({ className: p, orientation: m = "vertical", tabSelected: h, logTypeFilter: g, onCollapse: _, onTabSelect: v, onChangeOrientation: y }) => {
-	let [b, x] = r("plitzi-sdk.dev-tools.size", {
+var p = "vertical", m = "horizontal", h = ({ className: p, orientation: m = "vertical", tabSelected: h, logTypeFilter: g, onCollapse: _, onTabSelect: v, onChangeOrientation: y, qa: b = !1 }) => {
+	let [x, S] = r("plitzi-sdk.dev-tools.size", {
 		width: 500,
 		height: 200
-	}), [S] = f("navigation.currentPageId"), [C, w] = c(), T = o(() => m === "vertical" ? ["w"] : ["n"], [m]), E = s(typeof document < "u" ? document.querySelector(".plitzi-sdk") : null), D = a((e) => w(e), [w]), O = a((e, t) => x((n) => ({
+	}), [C] = l("navigation.currentPageId"), [w, T] = c(), E = o(() => m === "vertical" ? ["w"] : ["n"], [m]), D = s(typeof document < "u" ? document.querySelector(".plitzi-sdk") : null), O = a((e) => T(e), [T]), k = a((e, t) => S((n) => ({
 		width: Number.isFinite(e) ? e : n.width,
 		height: Number.isFinite(t) ? t : n.height
-	})), [x]);
-	return /* @__PURE__ */ l(d, {
+	})), [S]);
+	return /* @__PURE__ */ u(f, {
 		className: i("component__container-resizable-sidebar relative z-[1000000] text-xs", p, { "h-full": m === "vertical" }),
 		minConstraintsX: m === "vertical" ? 500 : Infinity,
 		maxConstraintsX: m === "vertical" ? 1e3 : Infinity,
 		minConstraintsY: m === "vertical" ? Infinity : 34,
 		maxConstraintsY: m === "vertical" ? Infinity : 600,
-		width: m === "vertical" ? b.width : Infinity,
-		height: m === "vertical" ? Infinity : b.height,
-		resizeHandles: T,
-		parentRef: E,
+		width: m === "vertical" ? x.width : Infinity,
+		height: m === "vertical" ? Infinity : x.height,
+		resizeHandles: E,
+		parentRef: D,
 		autoGrow: !1,
-		onChange: O,
-		children: /* @__PURE__ */ u("div", {
+		onChange: k,
+		children: /* @__PURE__ */ d("div", {
 			className: "flex h-full w-full flex-col bg-white text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200",
 			children: [
-				/* @__PURE__ */ l(t, {
+				/* @__PURE__ */ u(t, {
 					orientation: m,
 					onChangeOrientation: y,
 					onCollapse: _,
 					onTabSelect: v,
-					tabSelected: h
+					tabSelected: h,
+					qa: b
 				}),
-				["store", "elements"].includes(h) && /* @__PURE__ */ l(n, {
-					elementSelected: C,
-					onSelectElement: D,
-					currentPageId: S
+				["store", "elements"].includes(h) && /* @__PURE__ */ u(n, {
+					elementSelected: w,
+					onSelectElement: O,
+					currentPageId: C
 				}),
-				/* @__PURE__ */ l(e, {
+				/* @__PURE__ */ u(e, {
 					orientation: m,
 					tabSelected: h,
 					logTypeFilter: g,
-					elementSelected: C,
-					onSelectElement: D
+					elementSelected: w,
+					onSelectElement: O,
+					qa: b
 				})
 			]
 		})

package/dist/components/DevToolsPanel/DevToolsSubHeader.mjs

@@ -1,62 +1,58 @@
-import e from "./DevToolsButton.mjs";
-import t from "clsx";
-import { useCallback as n, useEffect as r, useMemo as i, useState as a } from "react";
-import { throttle as o } from "@plitzi/plitzi-ui/helpers";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import e from "../../highlight/index.mjs";
+import t from "./DevToolsButton.mjs";
+import n from "clsx";
+import { useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
+import { throttle as s } from "@plitzi/plitzi-ui/helpers";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { elementOf as u } from "@plitzi/sdk-shared/helpers/eventTarget";
 //#region src/components/DevToolsPanel/DevToolsSubHeader.tsx
-var l = ({ className: l, elementSelected: u, currentPageId: d, onSelectElement: f }) => {
-	let [p, m] = a(!1), h = n((e) => {
+var d = ({ className: d, elementSelected: f, currentPageId: p, onSelectElement: m }) => {
+	let [h, g] = o(!1), _ = r((e) => {
 		let { id: t } = e?.dataset ?? {};
-		f(t);
-	}, [f]), g = i(() => o(h, 100), [h]), _ = n((e) => {
-		e.target.closest(".plitzi-sdk") && g(e.target.closest("[data-id]"));
-	}, [g]), v = n((e) => {
-		e.target.closest(".plitzi-sdk") && (e.stopPropagation(), e.preventDefault(), m(!1));
-	}, []), y = n((e) => {
-		e.stopPropagation(), e.preventDefault(), m(!0);
-	}, [m]), b = n(() => {
-		m(!1), f(d);
-	}, [d, f]), x = n(() => {
-		m(!1), f("");
-	}, [f]);
-	return r(() => {
-		if (typeof document > "u") return;
-		let e = document.querySelectorAll(`[data-id="${u}"]`);
-		return e.forEach((e) => e.classList.add("devtools-element-hovered")), () => {
-			e.forEach((e) => e.classList.remove("devtools-element-hovered"));
-		};
-	}, [u]), r(() => {
-		if (!p || typeof document > "u") return;
+		m(t);
+	}, [m]), v = a(() => s(_, 100), [_]), y = r((e) => {
+		u(e.target)?.closest(".plitzi-sdk") && v(u(e.target)?.closest("[data-id]") ?? void 0);
+	}, [v]), b = r((e) => {
+		u(e.target)?.closest(".plitzi-sdk") && (e.stopPropagation(), e.preventDefault(), g(!1));
+	}, []), x = r((e) => {
+		e.stopPropagation(), e.preventDefault(), g(!0);
+	}, [g]), S = r(() => {
+		g(!1), m(p);
+	}, [p, m]), C = r(() => {
+		g(!1), m("");
+	}, [m]);
+	return e(f), i(() => {
+		if (!h || typeof document > "u") return;
 		let e = document.getElementsByClassName("plitzi-sdk")[0];
-		if (e) return e.addEventListener("click", v), e.addEventListener("mousemove", _), () => {
-			e.removeEventListener("click", v), e.removeEventListener("mousemove", _);
+		if (e) return e.addEventListener("click", b), e.addEventListener("mousemove", y), () => {
+			e.removeEventListener("click", b), e.removeEventListener("mousemove", y);
 		};
 	}, [
-		v,
-		_,
-		p
-	]), /* @__PURE__ */ c("div", {
-		className: t("flex shrink-0 items-center justify-between gap-2 border-b border-zinc-200 bg-zinc-50 px-2 py-1 dark:border-zinc-700 dark:bg-zinc-800", l),
-		children: [/* @__PURE__ */ c("div", {
+		b,
+		y,
+		h
+	]), /* @__PURE__ */ l("div", {
+		className: n("flex shrink-0 items-center justify-between gap-2 border-b border-zinc-200 bg-zinc-50 px-2 py-1 dark:border-zinc-700 dark:bg-zinc-800", d),
+		children: [/* @__PURE__ */ l("div", {
 			className: "flex gap-1",
-			children: [/* @__PURE__ */ s(e, {
+			children: [/* @__PURE__ */ c(t, {
 				iconClassName: "fa-regular fa-hand-pointer",
 				title: "Select an element in the page to inspect it",
-				onClick: y,
-				isSelected: p
-			}), /* @__PURE__ */ s(e, {
+				onClick: x,
+				isSelected: h
+			}), /* @__PURE__ */ c(t, {
 				iconClassName: "fa-regular fa-file",
 				title: "Current Page",
-				onClick: b,
-				isSelected: u === d
+				onClick: S,
+				isSelected: f === p
 			})]
-		}), /* @__PURE__ */ s(e, {
+		}), /* @__PURE__ */ c(t, {
 			iconClassName: "fa-solid fa-ban",
-			onClick: x,
+			onClick: C,
 			title: "Clear",
-			isSelected: !!u
+			isSelected: !!f
 		})]
 	});
 };
 //#endregion
-export { l as default };
+export { d as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/ActionsViewer.mjs

@@ -5,11 +5,11 @@ import i from "./components/RunDetail/index.mjs";
 import a from "./components/RunList/index.mjs";
 import o from "@plitzi/plitzi-ui/hooks/useStorage";
 import { useCallback as s, useMemo as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { cancelActionRun as f, useActionRuns as p, useCommonStore as m } from "@plitzi/sdk-shared/store";
+import { cancelActionRun as u, useActionRuns as d, useCommonStore as f } from "@plitzi/sdk-shared/store";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/ActionsViewer/ActionsViewer.tsx
 var h = "This page is served without a Plitzi server: every action step is inert", g = () => {
-	let { runs: g, clear: _ } = p(), [v] = m("actions.endpoint"), [y, b] = o("plitzi-sdk.dev-tools.actions.filter", "all"), [x, S] = l(""), [C, w] = l(), [T, E] = l(), D = c(() => n(g, y, x), [
+	let { runs: g, clear: _ } = d(), [v] = f("actions.endpoint"), [y, b] = o("plitzi-sdk.dev-tools.actions.filter", "all"), [x, S] = l(""), [C, w] = l(), [T, E] = l(), D = c(() => n(g, y, x), [
 		g,
 		y,
 		x
@@ -17,13 +17,13 @@ var h = "This page is served without a Plitzi server: every action step is inert
 		w((t) => t === e ? void 0 : e), E(void 0);
 	}, []), j = s((e) => {
 		E((t) => t === e ? void 0 : e);
-	}, []), M = s((e) => f(e), []), N = s(() => {
+	}, []), M = s((e) => u(e), []), N = s(() => {
 		_(), w(void 0), E(void 0);
 	}, [_]);
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ m("div", {
 		className: "flex h-full w-full flex-col",
 		children: [
-			/* @__PURE__ */ u(e, {
+			/* @__PURE__ */ p(e, {
 				filter: y,
 				query: x,
 				liveCount: O,
@@ -32,19 +32,19 @@ var h = "This page is served without a Plitzi server: every action step is inert
 				onQueryChange: S,
 				onClear: N
 			}),
-			v === void 0 && /* @__PURE__ */ u("div", {
+			v === void 0 && /* @__PURE__ */ p("div", {
 				className: "shrink-0 border-b border-amber-200 bg-amber-50 px-2 py-1 text-[10px] text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400",
 				children: h
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ m("div", {
 				className: "flex min-h-0 grow",
-				children: [/* @__PURE__ */ u(a, {
+				children: [/* @__PURE__ */ p(a, {
 					runs: D,
 					total: g.length,
 					selectedRunId: C,
 					onSelect: A,
 					onCancel: M
-				}), k !== void 0 && /* @__PURE__ */ u(t, { children: /* @__PURE__ */ u(i, {
+				}), k !== void 0 && /* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(i, {
 					run: k,
 					selectedStepId: T,
 					onSelectStep: j

package/dist/components/DevToolsPanel/tabs/ElementsViewer/ElementsViewer.d.ts

@@ -3,5 +3,9 @@ export type ElementsViewerProps = {
     elementSelected?: string;
     onSelectElement: (id?: string) => void;
 };
+/**
+ * What is on screen, element by element: the layouts around the page, the page, and the components it places — each
+ * element outlined on the page while it is pointed at, and, selected, how it is doing and what the document says.
+ */
 declare const ElementsViewer: ({ className, elementSelected, onSelectElement }: ElementsViewerProps) => import('react').JSX.Element;
 export default ElementsViewer;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/ElementsViewer.mjs

@@ -1,24 +1,39 @@
-import e from "./ElementDetails.mjs";
-import t from "./ElementsList.mjs";
-import n from "clsx";
-import { useCallback as r, useMemo as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import e from "./components/ElementDetails/index.mjs";
+import { renderTree as t } from "./helpers/renderTree.mjs";
+import n from "./components/ElementsTree/index.mjs";
+import r from "../../../../highlight/index.mjs";
+import i from "clsx";
+import { useMemo as a, useState as o } from "react";
 import { useCommonStore as s } from "@plitzi/sdk-shared/store";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/ElementsViewer/ElementsViewer.tsx
-var c = ({ className: c, elementSelected: l, onSelectElement: u }) => {
-	let [[d, f]] = s(["schema.flat", "navigation.currentPageId"]), p = i(() => Object.values(d).filter((e) => e.definition.rootId === f), [d, f]), m = i(() => p.find((e) => e.id === l), [p, l]), h = r((e) => u(e), [u]);
-	return /* @__PURE__ */ o("div", {
-		className: n("flex h-full w-full", c),
-		children: [/* @__PURE__ */ a(t, {
-			elements: p,
-			elementSelected: l,
-			onSelect: h
-		}), l && /* @__PURE__ */ a(e, {
-			definition: m?.definition,
-			attributes: m?.attributes,
-			onSelectElement: u
+var u = ({ className: u, elementSelected: d, onSelectElement: f }) => {
+	let [[p, m, h]] = s([
+		"schema.flat",
+		"schema.components",
+		"navigation.currentPageId"
+	]), [g, _] = o(""), [v, y] = o(), b = a(() => t({
+		flat: p,
+		components: m
+	}, h), [
+		p,
+		m,
+		h
+	]);
+	return r(v), /* @__PURE__ */ l("div", {
+		className: i("flex h-full w-full", u),
+		children: [/* @__PURE__ */ c(n, {
+			sections: b,
+			filter: g,
+			selected: d,
+			onFilter: _,
+			onSelect: f,
+			onHover: y
+		}), d && /* @__PURE__ */ c(e, {
+			id: d,
+			onSelectElement: f
 		})]
 	});
 };
 //#endregion
-export { c as default };
+export { u as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsAttributes/DetailsAttributes.mjs

@@ -0,0 +1,16 @@
+import e from "../DetailsRow/index.mjs";
+import t from "../DetailsValue/index.mjs";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsAttributes/DetailsAttributes.tsx
+var r = ({ attributes: r = {} }) => /* @__PURE__ */ n("div", {
+	className: "w-full text-sm",
+	children: Object.entries(r).map(([r, i]) => /* @__PURE__ */ n(e, {
+		name: r,
+		children: /* @__PURE__ */ n(t, {
+			attribute: r,
+			value: i
+		})
+	}, r))
+});
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsAttributes/index.d.ts

@@ -0,0 +1,3 @@
+import { default as DetailsAttributes } from './DetailsAttributes';
+export * from './DetailsAttributes';
+export default DetailsAttributes;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsAttributes/index.mjs

@@ -0,0 +1,5 @@
+import e from "./DetailsAttributes.mjs";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsAttributes/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsDefinition/DetailsDefinition.mjs

@@ -0,0 +1,18 @@
+import e from "../DetailsRow/index.mjs";
+import t from "../DetailsValue/index.mjs";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsDefinition/DetailsDefinition.tsx
+var r = ({ definition: r, onSelectElement: i }) => /* @__PURE__ */ n("div", {
+	className: "w-full text-sm",
+	children: Object.entries(r ?? {}).map(([r, a]) => /* @__PURE__ */ n(e, {
+		name: r,
+		children: /* @__PURE__ */ n(t, {
+			isDefinition: !0,
+			attribute: r,
+			value: a,
+			onSelectElement: i
+		})
+	}, r))
+});
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsDefinition/index.d.ts

@@ -0,0 +1,3 @@
+import { default as DetailsDefinition } from './DetailsDefinition';
+export * from './DetailsDefinition';
+export default DetailsDefinition;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsDefinition/index.mjs

@@ -0,0 +1,5 @@
+import e from "./DetailsDefinition.mjs";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsDefinition/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRow/DetailsRow.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type DetailsRowProps = {
+    name: string;
+    children?: ReactNode;
+};
+/** One line of a details table: a name, and what it holds. */
+declare const DetailsRow: ({ name, children }: DetailsRowProps) => import('react').JSX.Element;
+export default DetailsRow;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRow/DetailsRow.mjs

@@ -0,0 +1,14 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRow/DetailsRow.tsx
+var n = ({ name: n, children: r }) => /* @__PURE__ */ t("div", {
+	className: "flex gap-4 border-zinc-200 py-1 dark:border-zinc-700 [&:not(:first-child)]:border-t",
+	children: [/* @__PURE__ */ e("div", {
+		className: "grow basis-0 text-zinc-500 dark:text-zinc-400",
+		children: n
+	}), /* @__PURE__ */ e("div", {
+		className: "grow basis-0 truncate text-zinc-800 dark:text-zinc-200",
+		children: r
+	})]
+});
+//#endregion
+export { n as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRow/index.d.ts

@@ -0,0 +1,3 @@
+import { default as DetailsRow } from './DetailsRow';
+export * from './DetailsRow';
+export default DetailsRow;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRow/index.mjs

@@ -0,0 +1,5 @@
+import e from "./DetailsRow.mjs";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRow/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRuntime/DetailsRuntime.d.ts

@@ -0,0 +1,9 @@
+export type DetailsRuntimeProps = {
+    id: string;
+};
+/**
+ * The element as the page has it now — the same report `window.__plitzi.element()` and `plitzi check --element` give:
+ * its own state, what it binds to, how many copies are on the page and where. Read again every second.
+ */
+declare const DetailsRuntime: ({ id }: DetailsRuntimeProps) => import('react').JSX.Element;
+export default DetailsRuntime;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRuntime/DetailsRuntime.mjs

@@ -0,0 +1,54 @@
+import { elementReport as e } from "../../../../../../agentInspector/report.mjs";
+import t from "../../../../../../freshness/useSecondsClock.mjs";
+import n from "../DetailsRow/index.mjs";
+import { useContext as r } from "react";
+import { StoreContext as i } from "@plitzi/nexus/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRuntime/DetailsRuntime.tsx
+var s = ({ visible: e, box: t }) => `${e ? "Yes" : "No"}${t ? ` · ${String(t.width)}×${String(t.height)} at ${String(t.x)}, ${String(t.y)}` : ""}`, c = ({ category: e, to: t, source: n, template: r }) => `${e === "attributes" ? "" : `${e} · `}${t} ← ${n}${r ? ` · ${r}` : ""}`, l = ({ id: l }) => {
+	let u = r(i);
+	t(!0);
+	let d = u && typeof document < "u" ? e(u.getState(), l, document) : void 0;
+	return d ? /* @__PURE__ */ o("div", {
+		className: "w-full text-sm",
+		children: [
+			/* @__PURE__ */ a(n, {
+				name: "Type",
+				children: d.type
+			}),
+			d.inComponent && /* @__PURE__ */ a(n, {
+				name: "In component",
+				children: d.inComponent
+			}),
+			d.instanceOf && /* @__PURE__ */ a(n, {
+				name: "Places component",
+				children: d.instanceOf
+			}),
+			/* @__PURE__ */ a(n, {
+				name: "Copies on the page",
+				children: d.copies
+			}),
+			/* @__PURE__ */ a(n, {
+				name: "On screen",
+				children: s(d)
+			}),
+			d.state !== void 0 && /* @__PURE__ */ a(n, {
+				name: "Own state",
+				children: JSON.stringify(d.state)
+			}),
+			(d.bindings ?? []).map((e) => /* @__PURE__ */ a(n, {
+				name: "Reads",
+				children: c(e)
+			}, `${e.category}-${e.to}`))
+		]
+	}) : /* @__PURE__ */ o("div", {
+		className: "text-sm text-zinc-400 dark:text-zinc-500",
+		children: [
+			"Neither the document nor the page has “",
+			l,
+			"”."
+		]
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRuntime/index.d.ts

@@ -0,0 +1,3 @@
+import { default as DetailsRuntime } from './DetailsRuntime';
+export * from './DetailsRuntime';
+export default DetailsRuntime;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRuntime/index.mjs

@@ -0,0 +1,5 @@
+import e from "./DetailsRuntime.mjs";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsRuntime/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsValue/DetailsValue.d.ts

@@ -0,0 +1,9 @@
+export type DetailsValueProps = {
+    attribute: string;
+    value: unknown;
+    isDefinition?: boolean;
+    onSelectElement?: (id: string) => void;
+};
+/** A value of a definition or an attribute as one line: the elements it names as links, anything else as text. */
+declare const DetailsValue: ({ attribute, value, isDefinition, onSelectElement }: DetailsValueProps) => import('react').JSX.Element;
+export default DetailsValue;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsValue/DetailsValue.mjs

@@ -0,0 +1,15 @@
+import e from "../ElementLink/index.mjs";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsValue/DetailsValue.tsx
+var r = /* @__PURE__ */ new Set(["rootId", "parentId"]), i = (e, t, n) => typeof t == "object" && t ? n && e === "styleSelectors" ? Object.values(t).join(", ") : JSON.stringify(t) : typeof t == "boolean" ? t ? "True" : "False" : typeof t == "string" || typeof t == "number" ? String(t) : "", a = ({ attribute: a, value: o, isDefinition: s = !1, onSelectElement: c }) => s && a === "items" && Array.isArray(o) ? /* @__PURE__ */ n("div", {
+	className: "flex flex-col",
+	children: o.filter((e) => typeof e == "string").map((t) => /* @__PURE__ */ n(e, {
+		id: t,
+		onSelect: c
+	}, t))
+}) : s && r.has(a) && typeof o == "string" ? /* @__PURE__ */ n(e, {
+	id: o,
+	onSelect: c
+}) : /* @__PURE__ */ n(t, { children: i(a, o, s) });
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsValue/index.d.ts

@@ -0,0 +1,3 @@
+import { default as DetailsValue } from './DetailsValue';
+export * from './DetailsValue';
+export default DetailsValue;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsValue/index.mjs

@@ -0,0 +1,5 @@
+import e from "./DetailsValue.mjs";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/DetailsValue/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementDetails/ElementDetails.d.ts

@@ -0,0 +1,7 @@
+export type ElementDetailsProps = {
+    id: string;
+    onSelectElement: (id: string) => void;
+};
+/** One element: how it is doing on the page, and what the document says it is — wherever it is, a page or a component. */
+declare const ElementDetails: ({ id, onSelectElement }: ElementDetailsProps) => import('react').JSX.Element;
+export default ElementDetails;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementDetails/ElementDetails.mjs

@@ -0,0 +1,46 @@
+import e from "../DetailsAttributes/index.mjs";
+import t from "../DetailsDefinition/index.mjs";
+import n from "../DetailsRuntime/index.mjs";
+import { useMemo as r } from "react";
+import { useCommonStore as i } from "@plitzi/sdk-shared/store";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@plitzi/plitzi-ui/ContainerTabs";
+import { treeOf as c } from "@plitzi/sdk-schema/helpers/components";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/ElementDetails/ElementDetails.tsx
+var l = [
+	{ label: "Runtime" },
+	{ label: "Definition" },
+	{ label: "Attributes" }
+], u = ({ id: u, onSelectElement: d }) => {
+	let [[f, p]] = i(["schema.flat", "schema.components"]), m = r(() => c({
+		flat: f,
+		components: p
+	}, u)?.flat[u], [
+		f,
+		p,
+		u
+	]);
+	return /* @__PURE__ */ o(s, {
+		className: "w-full grow gap-4 overflow-hidden p-4",
+		children: [
+			/* @__PURE__ */ a(s.Tabs, { items: l }),
+			/* @__PURE__ */ a(s.TabContent, {
+				className: "flex-col overflow-y-auto",
+				children: /* @__PURE__ */ a(n, { id: u })
+			}),
+			/* @__PURE__ */ a(s.TabContent, {
+				className: "flex-col overflow-y-auto",
+				children: /* @__PURE__ */ a(t, {
+					definition: m?.definition,
+					onSelectElement: d
+				})
+			}),
+			/* @__PURE__ */ a(s.TabContent, {
+				className: "overflow-y-auto",
+				children: /* @__PURE__ */ a(e, { attributes: m?.attributes })
+			})
+		]
+	});
+};
+//#endregion
+export { u as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementDetails/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ElementDetails } from './ElementDetails';
+export * from './ElementDetails';
+export default ElementDetails;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementDetails/index.mjs

@@ -0,0 +1,5 @@
+import e from "./ElementDetails.mjs";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/ElementDetails/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementLink/ElementLink.d.ts

@@ -0,0 +1,7 @@
+export type ElementLinkProps = {
+    id: string;
+    onSelect?: (id: string) => void;
+};
+/** Another element named by a value — a child, the parent, the root — by its label, and selected on a click. */
+declare const ElementLink: ({ id, onSelect }: ElementLinkProps) => import('react').JSX.Element;
+export default ElementLink;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementLink/ElementLink.mjs

@@ -0,0 +1,14 @@
+import { useCallback as e } from "react";
+import { useCommonStore as t } from "@plitzi/sdk-shared/store";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/ElementLink/ElementLink.tsx
+var r = ({ id: r, onSelect: i }) => {
+	let [a] = t("schema.flat"), o = Object.hasOwn(a, r) ? a[r].definition.label : r, s = e(() => i?.(r), [i, r]);
+	return /* @__PURE__ */ n("span", {
+		className: "cursor-pointer text-violet-600 hover:underline dark:text-violet-400",
+		onClick: s,
+		children: o
+	});
+};
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementLink/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ElementLink } from './ElementLink';
+export * from './ElementLink';
+export default ElementLink;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementLink/index.mjs

@@ -0,0 +1,5 @@
+import e from "./ElementLink.mjs";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/ElementLink/index.ts
+var t = e;
+//#endregion
+export { t as default };