@plitzi/sdk-dev-tools 0.37.2 → 0.37.3

package/dist/DevToolsContainer.d.ts

@@ -9,6 +9,16 @@ export type DevToolsContainerProps = {
     devToolsStyle?: string;
     devToolsStyleLink?: string;
     renderMode?: 'default' | 'shadow';
+    /**
+     * What scrolls while the panel is folded away.
+     *
+     * `container` (the default) keeps the wrapped app in a box of its own, which is what an application shell that fills
+     * its window wants — the builder. `document` is for a PAGE: while the panel is collapsed the page lays out and
+     * scrolls exactly as it does without dev tools, so `position: sticky` and `fixed`, scroll restoration and a
+     * full-page screenshot mean in development what they mean in production. Opening the panel docks it beside the page
+     * either way; a docked panel needs the split.
+     */
+    scroll?: 'container' | 'document';
 };
-declare const DevToolsContainer: ({ children, className, innerClassName, enabled, instanceId, renderMode, devToolsStyle, devToolsStyleLink }: DevToolsContainerProps) => string | number | bigint | boolean | import('react').JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+declare const DevToolsContainer: ({ children, className, innerClassName, enabled, instanceId, renderMode, scroll, devToolsStyle, devToolsStyleLink }: DevToolsContainerProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import('react').JSX.Element | null | undefined;
 export default DevToolsContainer;

package/dist/DevToolsContainer.mjs

@@ -1,61 +1,69 @@
-import { useIsSelectedInstance as e } from "./instanceRegistry.mjs";
-import t from "./components/DevToolsOverlay/index.mjs";
-import n from "./DevToolsContextProvider.mjs";
-import r from "./DevToolsRoot.mjs";
-import i from "./useHydrated.mjs";
-import a from "./useRegisterQueriesStore.mjs";
-import o from "./useRegisterRootStore.mjs";
-import s from "@plitzi/plitzi-ui/ContainerShadow";
-import c from "@plitzi/plitzi-ui/hooks/useStorage";
-import l from "clsx";
-import { useCallback as u, useRef as d, useState as f } from "react";
-import { DevStoreScopeContext as p } from "@plitzi/nexus/react";
-import m from "@plitzi/sdk-shared/theme/useTheme";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import e from "./DevToolsContextProvider.mjs";
+import t from "./DevToolsRoot.mjs";
+import { useIsSelectedInstance as n } from "./instanceRegistry.mjs";
+import r from "./useHydrated.mjs";
+import i from "./useRegisterQueriesStore.mjs";
+import a from "./useRegisterRootStore.mjs";
+import o from "@plitzi/plitzi-ui/ContainerShadow";
+import s from "@plitzi/plitzi-ui/hooks/useStorage";
+import c from "clsx";
+import { Suspense as l, lazy as u, useCallback as d, useRef as f, useState as p } from "react";
+import { DevStoreScopeContext as m } from "@plitzi/nexus/react";
+import h from "@plitzi/sdk-shared/theme/useTheme";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/DevToolsContainer.tsx
-var _ = "horizontal", v = 0, y = ({ children: y, className: b, innerClassName: x, enabled: S = !1, instanceId: C, renderMode: w = "default", devToolsStyle: T = "", devToolsStyleLink: E = "" }) => {
-	let { resolvedTheme: D } = m(), [O, k] = c("plitzi-sdk.dev-tools.orientation", _), [A, j] = c("plitzi-sdk.dev-tools.collapsed", !0), [M, N] = c("plitzi-sdk.dev-tools.tab", "logs"), [P, F] = f(), I = d(void 0);
-	I.current ||= `sdk-instance-${++v}`;
-	let L = C || I.current, R = i(), z = R ? O : _, B = e(L, S);
-	o(S), a(B, L);
-	let V = u((e) => k(e), [k]), H = u((e) => {
-		e && N("logs"), F(e), j(!1);
-	}, [j, N]), U = u(() => j(!0), [j]), W = u((e) => {
-		F(void 0), N(e);
-	}, [N]);
-	return S ? /* @__PURE__ */ g("div", {
-		className: l("relative flex grow overflow-auto", {
-			"flex-col": z === "horizontal",
-			"h-screen": z === "vertical"
-		}, b),
-		children: [/* @__PURE__ */ h(p, {
-			value: L,
-			children: /* @__PURE__ */ h("div", {
-				className: l("grow basis-0 flex-col overflow-auto", x),
-				children: y
+var v = u(() => import("./components/DevToolsOverlay/index.mjs")), y = "horizontal", b = 0, x = ({ children: u, className: x, innerClassName: S, enabled: C = !1, instanceId: w, renderMode: T = "default", scroll: E = "container", devToolsStyle: D = "", devToolsStyleLink: O = "" }) => {
+	let { resolvedTheme: k } = h(), [A, j] = s("plitzi-sdk.dev-tools.orientation", y), [M, N] = s("plitzi-sdk.dev-tools.collapsed", !0), [P, F] = s("plitzi-sdk.dev-tools.tab", "logs"), [I, L] = p(), R = f(void 0);
+	R.current ||= `sdk-instance-${++b}`;
+	let z = w || R.current, B = r(), V = B ? A : y, H = n(z, C);
+	a(C), i(H, z);
+	let U = d((e) => j(e), [j]), W = d((e) => {
+		e && F("logs"), L(e), N(!1);
+	}, [N, F]), G = d(() => N(!0), [N]), K = d((e) => {
+		L(void 0), F(e);
+	}, [F]);
+	if (!C) return u;
+	let q = E === "document" && (!B || M), J = H && B && /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { children: /* @__PURE__ */ _(l, {
+		fallback: null,
+		children: [T === "default" && /* @__PURE__ */ g(v, {
+			className: c({ dark: k === "dark" }),
+			collapsed: M,
+			orientation: V,
+			tabSelected: P,
+			logTypeFilter: I,
+			onOpen: W,
+			onCollapse: G,
+			onTabSelect: K,
+			onChangeOrientation: U
+		}), T === "shadow" && /* @__PURE__ */ _(o, { children: [O && /* @__PURE__ */ g(o.Link, { href: O }), /* @__PURE__ */ _(o.Content, { children: [/* @__PURE__ */ g("style", { dangerouslySetInnerHTML: { __html: D } }), /* @__PURE__ */ g(v, {
+			className: c({ dark: k === "dark" }),
+			collapsed: M,
+			orientation: V,
+			tabSelected: P,
+			logTypeFilter: I,
+			onOpen: W,
+			onCollapse: G,
+			onTabSelect: K,
+			onChangeOrientation: U
+		})] })] })]
+	}) }) });
+	return /* @__PURE__ */ _("div", {
+		className: c("relative flex min-w-0 grow", {
+			"overflow-auto": !q,
+			"flex-col": q || V === "horizontal",
+			"h-screen": !q && V === "vertical"
+		}, x),
+		children: [/* @__PURE__ */ g(m, {
+			value: z,
+			children: /* @__PURE__ */ g("div", {
+				className: c("grow", { "basis-0 flex-col overflow-auto": !q }, S),
+				children: u
 			})
-		}), B && R && /* @__PURE__ */ h(r, { children: /* @__PURE__ */ g(n, { children: [w === "default" && /* @__PURE__ */ h(t, {
-			className: l({ dark: D === "dark" }),
-			collapsed: A,
-			orientation: z,
-			tabSelected: M,
-			logTypeFilter: P,
-			onOpen: H,
-			onCollapse: U,
-			onTabSelect: W,
-			onChangeOrientation: V
-		}), w === "shadow" && /* @__PURE__ */ g(s, { children: [E && /* @__PURE__ */ h(s.Link, { href: E }), /* @__PURE__ */ g(s.Content, { children: [/* @__PURE__ */ h("style", { dangerouslySetInnerHTML: { __html: T } }), /* @__PURE__ */ h(t, {
-			className: l({ dark: D === "dark" }),
-			collapsed: A,
-			orientation: z,
-			tabSelected: M,
-			logTypeFilter: P,
-			onOpen: H,
-			onCollapse: U,
-			onTabSelect: W,
-			onChangeOrientation: V
-		})] })] })] }) })]
-	}) : y;
+		}), q ? /* @__PURE__ */ g("div", {
+			className: "sticky bottom-0 h-0",
+			children: J
+		}) : J]
+	});
 };
 //#endregion
-export { y as default };
+export { x as default };

package/dist/DevToolsContextProvider.mjs

@@ -1,8 +1,8 @@
 import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
-import a from "@plitzi/sdk-shared/devTools/DevToolsContext";
-import { jsx as o } from "react/jsx-runtime";
-import { omit as s } from "@plitzi/plitzi-ui/helpers";
-import { pConsole as c } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
+import { omit as a } from "@plitzi/plitzi-ui/helpers";
+import o from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { pConsole as s } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/DevToolsContextProvider.tsx
 var l = ({ children: l }) => {
 	let [u, d] = i([]), [f, p] = i({}), m = r(!1), h = e((e, t, n, r, i) => {
@@ -16,11 +16,11 @@ var l = ({ children: l }) => {
 	}, [d]), g = e((e, t) => p((n) => ({
 		...n,
 		[e]: t
-	})), []), _ = e((e) => p((t) => s(t, [e])), []), v = e((e, ...t) => {
+	})), []), _ = e((e) => p((t) => a(t, [e])), []), v = e((e, ...t) => {
 		if (e && typeof f[e] == "function") return f[e](...t);
 	}, [f]), y = e(() => d([]), []);
-	m.current ||= (c.setCallback(h), c.setCallbackAddProvider(g), c.setCallbackRemoveProvider(_), !0), t(() => (c.setCallback(h), c.setCallbackAddProvider(g), c.setCallbackRemoveProvider(_), c.processPendingLogs(), () => {
-		c.setCallback(void 0), c.setCallbackAddProvider(void 0), c.setCallbackRemoveProvider(void 0), c.flush();
+	m.current ||= (s.setCallback(h), s.setCallbackAddProvider(g), s.setCallbackRemoveProvider(_), !0), t(() => (s.setCallback(h), s.setCallbackAddProvider(g), s.setCallbackRemoveProvider(_), s.processPendingLogs(), () => {
+		s.setCallback(void 0), s.setCallbackAddProvider(void 0), s.setCallbackRemoveProvider(void 0), s.flush();
 	}), [
 		h,
 		g,
@@ -39,7 +39,7 @@ var l = ({ children: l }) => {
 		y,
 		v
 	]);
-	return /* @__PURE__ */ o(a, {
+	return /* @__PURE__ */ c(o, {
 		value: b,
 		children: l
 	});

package/dist/DevToolsRoot.mjs

@@ -1,17 +1,17 @@
 import { use as e, useContext as t, useLayoutEffect as n, useRef as r } from "react";
 import { StoreContext as i } from "@plitzi/nexus/react";
 import { jsx as a } from "react/jsx-runtime";
-import o from "@plitzi/sdk-plugins/PluginsContext";
-import s from "@plitzi/sdk-shared/elements/ComponentContext";
-import { ThemeContext as c } from "@plitzi/plitzi-ui/Provider";
-import { createRoot as l } from "react-dom/client";
+import { ThemeContext as o } from "@plitzi/plitzi-ui/Provider";
+import { createRoot as s } from "react-dom/client";
+import c from "@plitzi/sdk-plugins/PluginsContext";
+import l from "@plitzi/sdk-shared/elements/ComponentContext";
 import u from "@plitzi/sdk-shared/theme/ThemeScope";
 //#region src/DevToolsRoot.tsx
 var d = { display: "contents" }, f = ({ children: f }) => {
-	let p = r(null), m = r(void 0), h = r(void 0), g = t(i), _ = e(u), v = e(o), y = e(s), b = e(c);
+	let p = r(null), m = r(void 0), h = r(void 0), g = t(i), _ = e(u), v = e(c), y = e(l), b = e(o);
 	return n(() => {
 		let e = p.current;
-		if (e) return clearTimeout(h.current), m.current ??= l(e), () => {
+		if (e) return clearTimeout(h.current), m.current ??= s(e), () => {
 			let e = m.current;
 			h.current = setTimeout(() => {
 				e?.unmount(), m.current === e && (m.current = void 0);
@@ -20,13 +20,13 @@ var d = { display: "contents" }, f = ({ children: f }) => {
 	}, []), n(() => {
 		m.current?.render(/* @__PURE__ */ a(i, {
 			value: g,
-			children: /* @__PURE__ */ a(c, {
+			children: /* @__PURE__ */ a(o, {
 				value: b,
 				children: /* @__PURE__ */ a(u, {
 					value: _,
-					children: /* @__PURE__ */ a(o, {
+					children: /* @__PURE__ */ a(c, {
 						value: v,
-						children: /* @__PURE__ */ a(s, {
+						children: /* @__PURE__ */ a(l, {
 							value: y,
 							children: f
 						})

package/dist/components/DevToolsPanel/DevToolsSubHeader.mjs

@@ -1,14 +1,14 @@
 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 { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { throttle as c } from "@plitzi/plitzi-ui/helpers";
+import { throttle as o } from "@plitzi/plitzi-ui/helpers";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/DevToolsSubHeader.tsx
 var l = ({ className: l, elementSelected: u, currentPageId: d, onSelectElement: f }) => {
 	let [p, m] = a(!1), h = n((e) => {
 		let { id: t } = e?.dataset ?? {};
 		f(t);
-	}, [f]), g = i(() => c(h, 100), [h]), _ = n((e) => {
+	}, [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));
@@ -35,22 +35,22 @@ var l = ({ className: l, elementSelected: u, currentPageId: d, onSelectElement:
 		v,
 		_,
 		p
-	]), /* @__PURE__ */ s("div", {
+	]), /* @__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__ */ s("div", {
+		children: [/* @__PURE__ */ c("div", {
 			className: "flex gap-1",
-			children: [/* @__PURE__ */ o(e, {
+			children: [/* @__PURE__ */ s(e, {
 				iconClassName: "fa-regular fa-hand-pointer",
 				title: "Select an element in the page to inspect it",
 				onClick: y,
 				isSelected: p
-			}), /* @__PURE__ */ o(e, {
+			}), /* @__PURE__ */ s(e, {
 				iconClassName: "fa-regular fa-file",
 				title: "Current Page",
 				onClick: b,
 				isSelected: u === d
 			})]
-		}), /* @__PURE__ */ o(e, {
+		}), /* @__PURE__ */ s(e, {
 			iconClassName: "fa-solid fa-ban",
 			onClick: x,
 			title: "Clear",

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

@@ -1,20 +1,20 @@
 import { useCallback as e, useMemo as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { useCommonStore as r } from "@plitzi/sdk-shared/store";
-import { get as i } from "@plitzi/plitzi-ui/helpers";
+import { get as n } from "@plitzi/plitzi-ui/helpers";
+import { jsx as r } from "react/jsx-runtime";
+import { useCommonStore as i } from "@plitzi/sdk-shared/store";
 //#region src/components/DevToolsPanel/tabs/ElementsViewer/DetailsValue.tsx
 var a = ({ attribute: a, value: o, isDefinition: s = !1, onSelectElement: c }) => {
-	let [l] = r("schema.flat"), u = e((e) => () => c?.(e), [c]), d = t(() => a === "items" && s && Array.isArray(o) ? /* @__PURE__ */ n("div", {
+	let [l] = i("schema.flat"), u = e((e) => () => c?.(e), [c]), d = t(() => a === "items" && s && Array.isArray(o) ? /* @__PURE__ */ r("div", {
 		className: "flex flex-col",
-		children: o.map((e, t) => /* @__PURE__ */ n("div", {
+		children: o.map((e, t) => /* @__PURE__ */ r("div", {
 			className: "cursor-pointer text-purple-400",
 			onClick: u(e),
-			children: i(l, `${e}.definition.label`, e)
+			children: n(l, `${e}.definition.label`, e)
 		}, t))
-	}) : a && ["rootId", "parentId"].includes(a) && s ? /* @__PURE__ */ n("div", {
+	}) : a && ["rootId", "parentId"].includes(a) && s ? /* @__PURE__ */ r("div", {
 		className: "cursor-pointer text-purple-400",
 		onClick: u(o),
-		children: i(l, `${o}.definition.label`, o)
+		children: n(l, `${o}.definition.label`, o)
 	}) : a === "styleSelectors" && s && o && typeof o == "object" ? Object.values(o).join(", ") : typeof o == "object" && o ? JSON.stringify(o) : typeof o == "boolean" ? o ? "True" : "False" : o, [
 		a,
 		s,
@@ -22,7 +22,7 @@ var a = ({ attribute: a, value: o, isDefinition: s = !1, onSelectElement: c }) =
 		u,
 		l
 	]);
-	return /* @__PURE__ */ n("div", {
+	return /* @__PURE__ */ r("div", {
 		className: "grow basis-0 truncate",
 		children: d
 	});

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

@@ -1,36 +1,36 @@
 import e from "./ElementsListItem.mjs";
 import { useCallback as t, useMemo as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { get as o } from "@plitzi/plitzi-ui/helpers";
+import { get as i } from "@plitzi/plitzi-ui/helpers";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import s from "@plitzi/plitzi-ui/Input";
 //#region src/components/DevToolsPanel/tabs/ElementsViewer/ElementsList.tsx
 var c = 200, l = ({ elements: l, elementSelected: u, onSelect: d }) => {
 	let [f, p] = r(""), m = n(() => (l ?? []).filter((e) => e.definition.label.toLowerCase().includes(f.toLowerCase())), [l, f]), h = n(() => m.slice(0, c), [m]), g = m.length - h.length, _ = t((e) => p(e), []);
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ o("div", {
 		className: "flex h-full w-[280px] shrink-0 flex-col gap-2 border-r border-zinc-200 dark:border-zinc-700",
-		children: [/* @__PURE__ */ i("div", {
+		children: [/* @__PURE__ */ a("div", {
 			className: "px-2 pt-2",
-			children: /* @__PURE__ */ i(s, {
+			children: /* @__PURE__ */ a(s, {
 				value: f,
 				onChange: _,
 				placeholder: "Search elements...",
 				size: "sm"
 			})
-		}), /* @__PURE__ */ a("div", {
+		}), /* @__PURE__ */ o("div", {
 			className: "flex flex-col overflow-y-auto text-xs text-zinc-700 dark:text-zinc-300",
 			children: [
-				h.length === 0 && /* @__PURE__ */ i("div", {
+				h.length === 0 && /* @__PURE__ */ a("div", {
 					className: "p-4 text-center text-zinc-400 dark:text-zinc-600",
 					children: "No elements"
 				}),
-				h.map((t) => /* @__PURE__ */ i(e, {
+				h.map((t) => /* @__PURE__ */ a(e, {
 					name: t.definition.label,
 					isSelected: u === t.id,
-					isVisible: o(t, "definition.initialState.visibility", !0),
+					isVisible: i(t, "definition.initialState.visibility", !0),
 					id: t.id,
 					onSelect: d
 				}, t.id)),
-				g > 0 && /* @__PURE__ */ a("div", {
+				g > 0 && /* @__PURE__ */ o("div", {
 					className: "p-3 text-center text-[11px] text-zinc-400 dark:text-zinc-600",
 					children: [g, " more — narrow the search to reach them"]
 				})

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/BodyContent.mjs

@@ -2,25 +2,25 @@ import e from "./ExecutionTree/index.mjs";
 import t from "./InteractionNode/index.mjs";
 import n from "clsx";
 import { useCallback as r, useMemo as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { get as c } from "@plitzi/plitzi-ui/helpers";
+import { get as o } from "@plitzi/plitzi-ui/helpers";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/BodyContent.tsx
 var l = ({ className: l, node: u, nodes: d }) => {
-	let [f, p] = a(u.id), m = i(() => c(d, `${f}`), [f, d]), h = r((e) => p(e), []);
-	return /* @__PURE__ */ s("div", {
+	let [f, p] = a(u.id), m = i(() => o(d, `${f}`), [f, d]), h = r((e) => p(e), []);
+	return /* @__PURE__ */ c("div", {
 		className: n("flex", l),
 		children: [
-			/* @__PURE__ */ o(e, {
+			/* @__PURE__ */ s(e, {
 				className: "grow basis-0",
 				nodeId: u.id,
 				nodes: d,
 				selected: f,
 				onSelect: h
 			}),
-			/* @__PURE__ */ o("div", { className: "mx-1 w-px shrink-0 bg-zinc-200 dark:bg-zinc-800" }),
-			f && /* @__PURE__ */ o("div", {
+			/* @__PURE__ */ s("div", { className: "mx-1 w-px shrink-0 bg-zinc-200 dark:bg-zinc-800" }),
+			f && /* @__PURE__ */ s("div", {
 				className: "flex min-w-0 grow basis-0",
-				children: /* @__PURE__ */ o(t, {
+				children: /* @__PURE__ */ s(t, {
 					whenParams: m.whenParams,
 					status: m.status,
 					name: m.node.title,

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/BodyHeader.mjs

@@ -1,11 +1,11 @@
 import { useCallback as e, useMemo as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useCommonStore as i } from "@plitzi/sdk-shared/store";
-import { get as a } from "@plitzi/plitzi-ui/helpers";
+import { get as n } from "@plitzi/plitzi-ui/helpers";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useCommonStore as a } from "@plitzi/sdk-shared/store";
 import { formatDate as o } from "@plitzi/sdk-shared/helpers";
 //#region src/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/BodyHeader.tsx
 var s = ({ triggerName: s, startTime: c, endTime: l, duration: u, elementId: d, hostElementId: f }) => {
-	let [p] = i("schema.flat"), m = t(() => d ? a(p, d) : void 0, [d, p]), h = t(() => o(c, "HH:mm:ss.SSS"), [c]), g = t(() => o(l, "HH:mm:ss.SSS"), [l]), _ = t(() => {
+	let [p] = a("schema.flat"), m = t(() => d ? n(p, d) : void 0, [d, p]), h = t(() => o(c, "HH:mm:ss.SSS"), [c]), g = t(() => o(l, "HH:mm:ss.SSS"), [l]), _ = t(() => {
 		if (typeof document < "u") return document.querySelector(`[data-id="${d}"]`);
 	}, [d]), v = e(() => {
 		_?.scrollIntoView({
@@ -18,34 +18,34 @@ var s = ({ triggerName: s, startTime: c, endTime: l, duration: u, elementId: d,
 	}, [_]), b = e(() => {
 		_?.classList.remove("devtools-element-hovered");
 	}, [_]);
-	return /* @__PURE__ */ r("div", {
+	return /* @__PURE__ */ i("div", {
 		className: "flex justify-around gap-3",
 		children: [
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ i("div", {
 				className: "flex min-w-0 grow basis-0 flex-col",
-				children: [/* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ i("div", {
 					className: "mb-1 flex items-center gap-1.5 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
-					children: [/* @__PURE__ */ n("i", { className: "fa-regular fa-clock" }), "Times"]
-				}), /* @__PURE__ */ r("div", {
+					children: [/* @__PURE__ */ r("i", { className: "fa-regular fa-clock" }), "Times"]
+				}), /* @__PURE__ */ i("div", {
 					className: "flex flex-col gap-0.5 font-mono text-zinc-700 dark:text-zinc-300",
 					children: [
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ r("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "Start"
 							}), h]
 						}),
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ r("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "End"
 							}), g]
 						}),
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ r("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "Duration"
 							}), u]
@@ -53,53 +53,53 @@ var s = ({ triggerName: s, startTime: c, endTime: l, duration: u, elementId: d,
 					]
 				})]
 			}),
-			/* @__PURE__ */ n("div", { className: "w-px shrink-0 bg-zinc-200 dark:bg-zinc-800" }),
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ r("div", { className: "w-px shrink-0 bg-zinc-200 dark:bg-zinc-800" }),
+			/* @__PURE__ */ i("div", {
 				className: "flex min-w-0 grow basis-0 flex-col",
-				children: [/* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ i("div", {
 					className: "mb-1 flex items-center gap-1.5 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
-					children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-circle-info" }), "Details"]
-				}), /* @__PURE__ */ r("div", {
+					children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-circle-info" }), "Details"]
+				}), /* @__PURE__ */ i("div", {
 					className: "flex flex-col gap-0.5 text-zinc-700 dark:text-zinc-300",
 					children: [
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ r("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "Type"
-							}), /* @__PURE__ */ n("span", { children: "Interaction" })]
+							}), /* @__PURE__ */ r("span", { children: "Interaction" })]
 						}),
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex min-w-0 gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ r("span", {
 								className: "shrink-0 text-zinc-400 dark:text-zinc-500",
 								children: "Trigger"
-							}), /* @__PURE__ */ n("span", {
+							}), /* @__PURE__ */ r("span", {
 								className: "truncate",
 								children: s
 							})]
 						}),
-						f && /* @__PURE__ */ r("div", {
+						f && /* @__PURE__ */ i("div", {
 							className: "flex min-w-0 gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ r("span", {
 								className: "shrink-0 text-zinc-400 dark:text-zinc-500",
 								children: "Fired on"
-							}), /* @__PURE__ */ n("span", {
+							}), /* @__PURE__ */ r("span", {
 								className: "truncate font-mono",
 								children: f
 							})]
 						}),
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex min-w-0 gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ r("span", {
 								className: "shrink-0 text-zinc-400 dark:text-zinc-500",
 								children: "Element"
-							}), /* @__PURE__ */ r("span", {
+							}), /* @__PURE__ */ i("span", {
 								className: "cursor-pointer truncate text-violet-600 hover:text-violet-500 dark:text-violet-400 dark:hover:text-violet-300",
 								onClick: v,
 								onMouseEnter: y,
 								onMouseLeave: b,
-								children: [m?.definition.label, d && /* @__PURE__ */ r("span", {
+								children: [m?.definition.label, d && /* @__PURE__ */ i("span", {
 									className: "ml-1 font-mono text-[10px] text-zinc-400 dark:text-zinc-500",
 									children: [
 										"[",

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/ExecutionTree/ExecutionTree.mjs

@@ -1,34 +1,34 @@
 import e from "./ExecutionTreeNode.mjs";
 import t from "clsx";
 import { useCallback as n, useMemo as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { get as o } from "@plitzi/plitzi-ui/helpers";
+import { get as i } from "@plitzi/plitzi-ui/helpers";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { getDurationMs as s } from "@plitzi/sdk-shared";
 //#region src/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/ExecutionTree/ExecutionTree.tsx
 var c = ({ className: c, nodeId: l, nodes: u, selected: d, onSelect: f }) => {
 	let p = r(() => {
-		let e = o(u, l), t = [];
+		let e = i(u, l), t = [];
 		for (; e;) {
-			let { node: n, startTime: r, endTime: i } = e, a = `${s(r, i)}ms`, c = n.id === l ? 0 : 1;
+			let { node: n, startTime: r, endTime: a } = e, o = `${s(r, a)}ms`, c = n.id === l ? 0 : 1;
 			t.push({
 				id: n.id,
 				action: n.action,
 				title: n.title,
 				status: e.status,
 				level: c,
-				duration: a
-			}), e = o(u, n.afterNode);
+				duration: o
+			}), e = i(u, n.afterNode);
 		}
 		return t;
 	}, [l, u]), m = n((e) => f?.(e), [f]);
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ o("div", {
 		className: t("flex flex-col gap-1.5", c),
-		children: [/* @__PURE__ */ a("div", {
+		children: [/* @__PURE__ */ o("div", {
 			className: "flex items-center gap-1.5 px-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
-			children: [/* @__PURE__ */ i("i", { className: "fa-solid fa-code-merge" }), "Execution Tree"]
-		}), /* @__PURE__ */ i("div", {
+			children: [/* @__PURE__ */ a("i", { className: "fa-solid fa-code-merge" }), "Execution Tree"]
+		}), /* @__PURE__ */ a("div", {
 			className: "flex flex-col",
-			children: p.map((t, n) => /* @__PURE__ */ i(e, {
+			children: p.map((t, n) => /* @__PURE__ */ a(e, {
 				id: t.id,
 				action: t.action,
 				title: t.title,