@plitzi/sdk-dev-tools 0.37.1 → 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.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 export type DevToolsContextProviderProps = {
     children?: ReactNode;
 };
-declare const DevToolsContextProvider: ({ children }: DevToolsContextProviderProps) => import("react").JSX.Element;
+declare const DevToolsContextProvider: ({ children }: DevToolsContextProviderProps) => import('react').JSX.Element;
 export default DevToolsContextProvider;

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.d.ts

@@ -14,5 +14,5 @@ export type DevToolsRootProps = {
  * the page's providers is carried over: the root store, plitzi-ui's theme, the theme scope, and the two plugin
  * registries.
  */
-declare const DevToolsRoot: ({ children }: DevToolsRootProps) => import("react").JSX.Element;
+declare const DevToolsRoot: ({ children }: DevToolsRootProps) => import('react').JSX.Element;
 export default DevToolsRoot;

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/DevToolsIndicator/DevToolsIndicator.d.ts

@@ -3,5 +3,5 @@ export type DevToolsIndicatorProps = {
     className?: string;
     onOpen: (logType?: LogType) => void;
 };
-declare const DevToolsIndicator: ({ className, onOpen }: DevToolsIndicatorProps) => import("react").JSX.Element;
+declare const DevToolsIndicator: ({ className, onOpen }: DevToolsIndicatorProps) => import('react').JSX.Element;
 export default DevToolsIndicator;

package/dist/components/DevToolsOverlay/DevToolsOverlay.d.ts

@@ -11,5 +11,5 @@ export type DevToolsOverlayProps = {
     onTabSelect: (tabSelected: string) => void;
     onChangeOrientation: (orientation: Orientation) => void;
 };
-declare const DevToolsOverlay: ({ className, collapsed, orientation, tabSelected, logTypeFilter, onOpen, onCollapse, onTabSelect, onChangeOrientation }: DevToolsOverlayProps) => import("react").JSX.Element;
+declare const DevToolsOverlay: ({ className, collapsed, orientation, tabSelected, logTypeFilter, onOpen, onCollapse, onTabSelect, onChangeOrientation }: DevToolsOverlayProps) => import('react').JSX.Element;
 export default DevToolsOverlay;

package/dist/components/DevToolsPanel/DevToolsBody.d.ts

@@ -7,5 +7,5 @@ export type DevToolsBodyProps = {
     elementSelected?: string;
     onSelectElement: (id?: string) => void;
 };
-declare const DevToolsBody: ({ className, tabSelected, orientation, logTypeFilter, elementSelected, onSelectElement }: DevToolsBodyProps) => import("react").JSX.Element;
+declare const DevToolsBody: ({ className, tabSelected, orientation, logTypeFilter, elementSelected, onSelectElement }: DevToolsBodyProps) => import('react').JSX.Element;
 export default DevToolsBody;

package/dist/components/DevToolsPanel/DevToolsButton.d.ts

@@ -6,5 +6,5 @@ export type DevToolsButtonProps = {
     title?: string;
     onClick?: (e: MouseEvent) => void;
 };
-declare const DevToolsButton: ({ className, iconClassName, title, isSelected, onClick }: DevToolsButtonProps) => import("react").JSX.Element;
+declare const DevToolsButton: ({ className, iconClassName, title, isSelected, onClick }: DevToolsButtonProps) => import('react').JSX.Element;
 export default DevToolsButton;

package/dist/components/DevToolsPanel/DevToolsHeader.d.ts

@@ -7,5 +7,5 @@ export type DevToolsHeaderProps = {
     onCollapse?: () => void;
     onTabSelect?: (tabIndex: string) => void;
 };
-declare const DevToolsHeader: ({ tabSelected, orientation, onChangeOrientation, onCollapse, onTabSelect }: DevToolsHeaderProps) => import("react").JSX.Element;
+declare const DevToolsHeader: ({ tabSelected, orientation, onChangeOrientation, onCollapse, onTabSelect }: DevToolsHeaderProps) => import('react').JSX.Element;
 export default DevToolsHeader;

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

@@ -12,5 +12,5 @@ export type DevToolsPanelProps = {
     onTabSelect: (tabSelected: string) => void;
     onChangeOrientation?: (orientation: Orientation) => void;
 };
-declare const DevToolsPanel: ({ className, orientation, tabSelected, logTypeFilter, onCollapse, onTabSelect, onChangeOrientation }: DevToolsPanelProps) => import("react").JSX.Element;
+declare const DevToolsPanel: ({ className, orientation, tabSelected, logTypeFilter, onCollapse, onTabSelect, onChangeOrientation }: DevToolsPanelProps) => import('react').JSX.Element;
 export default DevToolsPanel;

package/dist/components/DevToolsPanel/DevToolsSubHeader.d.ts

@@ -6,5 +6,5 @@ export type DevToolsSubHeaderProps = {
     elementSelected?: string;
     onSelectElement: (id?: string) => void;
 };
-declare const DevToolsSubHeader: ({ className, elementSelected, currentPageId, onSelectElement }: DevToolsSubHeaderProps) => import("react").JSX.Element;
+declare const DevToolsSubHeader: ({ className, elementSelected, currentPageId, onSelectElement }: DevToolsSubHeaderProps) => import('react').JSX.Element;
 export default DevToolsSubHeader;

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/ThemeControl.d.ts

@@ -1,2 +1,2 @@
-declare const ThemeControl: () => import("react").JSX.Element;
+declare const ThemeControl: () => import('react').JSX.Element;
 export default ThemeControl;

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

@@ -6,5 +6,5 @@
  * outcome is what the server was willing to send — the steps to a page allowed to debug them, and what those steps
  * read and answered only to an authoring session or a dev server.
  */
-declare const ActionsViewer: () => import("react").JSX.Element;
+declare const ActionsViewer: () => import('react').JSX.Element;
 export default ActionsViewer;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/ActionsToolbar/ActionsToolbar.d.ts

@@ -8,5 +8,5 @@ export type ActionsToolbarProps = {
     onQueryChange: (query: string) => void;
     onClear: () => void;
 };
-declare const ActionsToolbar: ({ filter, query, liveCount, runCount, onFilterChange, onQueryChange, onClear }: ActionsToolbarProps) => import("react").JSX.Element;
+declare const ActionsToolbar: ({ filter, query, liveCount, runCount, onFilterChange, onQueryChange, onClear }: ActionsToolbarProps) => import('react').JSX.Element;
 export default ActionsToolbar;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/DetailShell/DetailShell.d.ts

@@ -3,5 +3,5 @@ export type DetailShellProps = {
     children: ReactNode;
 };
 /** The resizable column the selected run is inspected in; its width is remembered across sessions. */
-declare const DetailShell: ({ children }: DetailShellProps) => import("react").JSX.Element;
+declare const DetailShell: ({ children }: DetailShellProps) => import('react').JSX.Element;
 export default DetailShell;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/FlowTimeline/FlowTimeline.d.ts

@@ -11,5 +11,5 @@ export type FlowTimelineProps = {
  * already did. Drawn in the same list they read as a flow that carried on after the failure, which is the opposite
  * of what happened.
  */
-declare const FlowTimeline: ({ steps, selectedStepId, onSelectStep }: FlowTimelineProps) => import("react").JSX.Element;
+declare const FlowTimeline: ({ steps, selectedStepId, onSelectStep }: FlowTimelineProps) => import('react').JSX.Element;
 export default FlowTimeline;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/RunDetail/RunDetail.d.ts

@@ -5,5 +5,5 @@ export type RunDetailProps = {
     onSelectStep: (stepId: string) => void;
 };
 /** Everything known about one run: how it ended, what it did step by step, and what it carried. */
-declare const RunDetail: ({ run, selectedStepId, onSelectStep }: RunDetailProps) => import("react").JSX.Element;
+declare const RunDetail: ({ run, selectedStepId, onSelectStep }: RunDetailProps) => import('react').JSX.Element;
 export default RunDetail;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/RunList/RunList.d.ts

@@ -7,5 +7,5 @@ export type RunListProps = {
     onSelect: (runId: string) => void;
     onCancel: (runId: string) => void;
 };
-declare const RunList: ({ runs, total, selectedRunId, onSelect, onCancel }: RunListProps) => import("react").JSX.Element;
+declare const RunList: ({ runs, total, selectedRunId, onSelect, onCancel }: RunListProps) => import('react').JSX.Element;
 export default RunList;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/RunRow/RunRow.d.ts

@@ -6,5 +6,5 @@ export type RunRowProps = {
     onCancel: (runId: string) => void;
 };
 /** One run in the log: enough to recognise it, and enough to tell a healthy one from the one to open. */
-declare const RunRow: ({ run, selected, onSelect, onCancel }: RunRowProps) => import("react").JSX.Element;
+declare const RunRow: ({ run, selected, onSelect, onCancel }: RunRowProps) => import('react').JSX.Element;
 export default RunRow;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/StepRow/StepRow.d.ts

@@ -5,5 +5,5 @@ export type StepRowProps = {
     onSelect: (stepId: string) => void;
 };
 /** One step of a flow: what it was, how it ended, and how much of the run it took. */
-declare const StepRow: ({ bar, selected, onSelect }: StepRowProps) => import("react").JSX.Element;
+declare const StepRow: ({ bar, selected, onSelect }: StepRowProps) => import('react').JSX.Element;
 export default StepRow;

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

@@ -8,5 +8,5 @@
  * Everything a row says is on screen: no tooltips, a bar for what is left of the life it was given, and the value it
  * holds one click away, so checking a cache never means going somewhere else to look at it.
  */
-declare const CacheViewer: () => import("react").JSX.Element;
+declare const CacheViewer: () => import('react').JSX.Element;
 export default CacheViewer;

package/dist/components/DevToolsPanel/tabs/CacheViewer/components/CacheRow/CacheRow.d.ts

@@ -12,5 +12,5 @@ export type CacheRowProps = {
  * One cached path, said in full and on screen: which store it is in, what it stands for, how long it has left and how
  * much of its life that is. Nothing here is a tooltip — the whole point of the tab is that a glance answers it.
  */
-declare const CacheRow: ({ row, isOpen, value, onToggle, onExpire, onForget }: CacheRowProps) => import("react").JSX.Element;
+declare const CacheRow: ({ row, isOpen, value, onToggle, onExpire, onForget }: CacheRowProps) => import('react').JSX.Element;
 export default CacheRow;

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

@@ -2,5 +2,5 @@ import { Element } from '@plitzi/sdk-shared';
 export type DetailsAttributesProps = {
     attributes?: Element['attributes'];
 };
-declare const DetailsAttributes: ({ attributes }: DetailsAttributesProps) => import("react").JSX.Element;
+declare const DetailsAttributes: ({ attributes }: DetailsAttributesProps) => import('react').JSX.Element;
 export default DetailsAttributes;

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

@@ -3,5 +3,5 @@ export type DetailsDefinitionProps = {
     definition?: Element['definition'];
     onSelectElement: (id: string) => void;
 };
-declare const DetailsDefinition: ({ definition, onSelectElement }: DetailsDefinitionProps) => import("react").JSX.Element;
+declare const DetailsDefinition: ({ definition, onSelectElement }: DetailsDefinitionProps) => import('react').JSX.Element;
 export default DetailsDefinition;

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

@@ -6,5 +6,5 @@ export type DetailsValue = {
     isStyle?: boolean;
     onSelectElement?: (id: string) => void;
 };
-declare const DetailsValue: ({ attribute, value, isDefinition, onSelectElement }: DetailsValue) => import("react").JSX.Element;
+declare const DetailsValue: ({ attribute, value, isDefinition, onSelectElement }: DetailsValue) => import('react').JSX.Element;
 export default DetailsValue;

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/ElementDetails.d.ts

@@ -4,5 +4,5 @@ export type ElementDetailsProps = {
     attributes?: Element['attributes'];
     onSelectElement: (id: string) => void;
 };
-declare const ElementDetails: ({ definition, attributes, onSelectElement }: ElementDetailsProps) => import("react").JSX.Element;
+declare const ElementDetails: ({ definition, attributes, onSelectElement }: ElementDetailsProps) => import('react').JSX.Element;
 export default ElementDetails;

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

@@ -4,5 +4,5 @@ export type ElementsListProps = {
     elementSelected?: string;
     onSelect?: (id?: string) => void;
 };
-declare const ElementsList: ({ elements, elementSelected, onSelect }: ElementsListProps) => import("react").JSX.Element;
+declare const ElementsList: ({ elements, elementSelected, onSelect }: ElementsListProps) => import('react').JSX.Element;
 export default ElementsList;

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/ElementsViewer/ElementsListItem.d.ts

@@ -5,5 +5,5 @@ export type ElementsListItemProps = {
     isVisible?: boolean;
     onSelect?: (id?: string) => void;
 };
-declare const ElementsListItem: ({ name, id, isSelected, isVisible, onSelect }: ElementsListItemProps) => import("react").JSX.Element;
+declare const ElementsListItem: ({ name, id, isSelected, isVisible, onSelect }: ElementsListItemProps) => import('react').JSX.Element;
 export default ElementsListItem;

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

@@ -3,5 +3,5 @@ export type ElementsViewerProps = {
     elementSelected?: string;
     onSelectElement: (id?: string) => void;
 };
-declare const ElementsViewer: ({ className, elementSelected, onSelectElement }: ElementsViewerProps) => import("react").JSX.Element;
+declare const ElementsViewer: ({ className, elementSelected, onSelectElement }: ElementsViewerProps) => import('react').JSX.Element;
 export default ElementsViewer;

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

@@ -1,2 +1,2 @@
-declare const HistoryViewer: () => import("react").JSX.Element;
+declare const HistoryViewer: () => import('react').JSX.Element;
 export default HistoryViewer;

package/dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/HistoryEntryItem.d.ts

@@ -8,5 +8,5 @@ export type HistoryEntryItemProps = {
     isFuture: boolean;
     onSelect: (index: number) => void;
 };
-declare const HistoryEntryItem: ({ index, path, value, timestamp, isSelected, isFuture, onSelect }: HistoryEntryItemProps) => import("react").JSX.Element;
+declare const HistoryEntryItem: ({ index, path, value, timestamp, isSelected, isFuture, onSelect }: HistoryEntryItemProps) => import('react').JSX.Element;
 export default HistoryEntryItem;

package/dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/HistoryToolbar.d.ts

@@ -9,5 +9,5 @@ export type HistoryToolbarProps = {
     onClear: () => void;
     onFilterChange: (value: string) => void;
 };
-declare const HistoryToolbar: ({ index, total, canUndo, canRedo, filter, onUndo, onRedo, onClear, onFilterChange }: HistoryToolbarProps) => import("react").JSX.Element;
+declare const HistoryToolbar: ({ index, total, canUndo, canRedo, filter, onUndo, onRedo, onClear, onFilterChange }: HistoryToolbarProps) => import('react').JSX.Element;
 export default HistoryToolbar;