@plitzi/sdk-dev-tools 0.32.24 → 0.33.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @plitzi/sdk-dev-tools
 
+## 0.33.0
+
+### Minor Changes
+
+- v0.33.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @plitzi/sdk-navigation@0.33.0
+  - @plitzi/sdk-schema@0.33.0
+  - @plitzi/sdk-shared@0.33.0
+  - @plitzi/sdk-style@0.33.0
+
+## 0.32.25
+
+### Patch Changes
+
+- v0.32.25
+- Updated dependencies
+  - @plitzi/sdk-navigation@0.32.25
+  - @plitzi/sdk-schema@0.32.25
+  - @plitzi/sdk-shared@0.32.25
+  - @plitzi/sdk-style@0.32.25
+
 ## 0.32.24
 
 ### Patch Changes

package/dist/DevToolsContainer.mjs

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

package/dist/DevToolsContextProvider.mjs

@@ -1,7 +1,7 @@
 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 { omit as o } from "@plitzi/plitzi-ui/helpers";
-import { jsx as s } from "react/jsx-runtime";
+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";
 //#region src/DevToolsContextProvider.tsx
 var l = ({ children: l }) => {
@@ -16,7 +16,7 @@ var l = ({ children: l }) => {
 	}, [d]), g = e((e, t) => p((n) => ({
 		...n,
 		[e]: t
-	})), []), _ = e((e) => p((t) => o(t, [e])), []), v = e((e, ...t) => {
+	})), []), _ = e((e) => p((t) => s(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(), () => {
@@ -39,7 +39,7 @@ var l = ({ children: l }) => {
 		y,
 		v
 	]);
-	return /* @__PURE__ */ s(a, {
+	return /* @__PURE__ */ o(a, {
 		value: b,
 		children: l
 	});

package/dist/components/DevToolsIndicator/DevToolsIndicator.d.ts

@@ -0,0 +1,7 @@
+import { LogType } from '@plitzi/sdk-shared';
+export type DevToolsIndicatorProps = {
+    className?: string;
+    onOpen: (logType?: LogType) => void;
+};
+declare const DevToolsIndicator: ({ className, onOpen }: DevToolsIndicatorProps) => import("react").JSX.Element;
+export default DevToolsIndicator;

package/dist/components/DevToolsIndicator/DevToolsIndicator.mjs

@@ -0,0 +1,50 @@
+import e from "clsx";
+import { use as t, useCallback as n, useMemo as r } from "react";
+import i from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/DevToolsIndicator/DevToolsIndicator.tsx
+var s = ({ className: s, onOpen: c }) => {
+	let { logs: l } = t(i), { errors: u, warnings: d } = r(() => l.reduce((e, { logType: t }) => ({
+		errors: t === "danger" ? e.errors + 1 : e.errors,
+		warnings: t === "warning" ? e.warnings + 1 : e.warnings
+	}), {
+		errors: 0,
+		warnings: 0
+	}), [l]), f = n(() => {
+		if (u > 0) {
+			c("danger");
+			return;
+		}
+		if (d > 0) {
+			c("warning");
+			return;
+		}
+		c();
+	}, [
+		u,
+		d,
+		c
+	]);
+	return /* @__PURE__ */ a("div", {
+		className: e("fixed bottom-3 left-3 z-[1000000]", s),
+		children: /* @__PURE__ */ o("button", {
+			className: e("flex cursor-pointer items-center gap-2 rounded border border-zinc-200 bg-white px-2 py-1.5 text-[12px]/[16px]", "font-bold text-zinc-600 shadow-md transition-colors select-none hover:bg-zinc-50", "dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800"),
+			title: "Plitzi dev tools",
+			onClick: f,
+			children: [
+				"Plitzi",
+				u > 0 && /* @__PURE__ */ o("span", {
+					className: "flex items-center gap-1 text-red-600 dark:text-red-400",
+					children: [/* @__PURE__ */ a("i", { className: "fa-regular fa-circle-xmark text-[11px]" }), u]
+				}),
+				d > 0 && /* @__PURE__ */ o("span", {
+					className: "flex items-center gap-1 text-amber-600 dark:text-amber-400",
+					children: [/* @__PURE__ */ a("i", { className: "fa-solid fa-triangle-exclamation text-[11px]" }), d]
+				}),
+				u === 0 && d === 0 && /* @__PURE__ */ a("i", { className: "fa-solid fa-terminal text-[11px] text-zinc-400" })
+			]
+		})
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/DevToolsIndicator/index.d.ts

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

package/dist/components/DevToolsIndicator/index.mjs

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

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

@@ -0,0 +1,15 @@
+import { Orientation } from '../../DevToolsContainer';
+import { LogType } from '@plitzi/sdk-shared';
+export type DevToolsOverlayProps = {
+    className?: string;
+    collapsed: boolean;
+    orientation: Orientation;
+    tabSelected: string;
+    logTypeFilter?: LogType;
+    onOpen: (logType?: LogType) => void;
+    onCollapse: () => void;
+    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;
+export default DevToolsOverlay;

package/dist/components/DevToolsOverlay/DevToolsOverlay.mjs

@@ -0,0 +1,18 @@
+import e from "../DevToolsIndicator/index.mjs";
+import t from "../DevToolsPanel/index.mjs";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/DevToolsOverlay/DevToolsOverlay.tsx
+var a = ({ className: a, collapsed: o, orientation: s, tabSelected: c, logTypeFilter: l, onOpen: u, onCollapse: d, onTabSelect: f, onChangeOrientation: p }) => /* @__PURE__ */ i(n, { children: [o && /* @__PURE__ */ r(e, {
+	className: a,
+	onOpen: u
+}), !o && /* @__PURE__ */ r(t, {
+	className: a,
+	orientation: s,
+	tabSelected: c,
+	logTypeFilter: l,
+	onCollapse: d,
+	onTabSelect: f,
+	onChangeOrientation: p
+})] });
+//#endregion
+export { a as default };

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

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

package/dist/components/DevToolsOverlay/index.mjs

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

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

@@ -1,9 +1,11 @@
+import { LogType } from '@plitzi/sdk-shared';
 export type DevToolsBodyProps = {
     className?: string;
     tabSelected?: string;
     orientation: 'horizontal' | 'vertical';
+    logTypeFilter?: LogType;
     elementSelected?: string;
     onSelectElement: (id?: string) => void;
 };
-declare const DevToolsBody: ({ className, tabSelected, orientation, 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/DevToolsBody.mjs

@@ -10,24 +10,25 @@ import { use as c } from "react";
 import l from "@plitzi/sdk-shared/devTools/DevToolsContext";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/DevToolsBody.tsx
-var f = ({ className: f, tabSelected: p, orientation: m, elementSelected: h, onSelectElement: g }) => {
-	let { logs: _, clearLogs: v } = c(l);
+var f = ({ className: f, tabSelected: p, orientation: m, logTypeFilter: h, elementSelected: g, onSelectElement: _ }) => {
+	let { logs: v, clearLogs: y } = c(l);
 	return /* @__PURE__ */ u("div", {
 		className: s("flex h-full w-full grow overflow-auto bg-white dark:bg-zinc-900", f),
 		children: /* @__PURE__ */ d("div", {
 			className: "flex w-full flex-col",
 			children: [
 				p === "logs" && /* @__PURE__ */ u(n, {
-					items: _,
+					items: v,
 					orientation: m,
-					onClear: v
+					logTypeFilter: h,
+					onClear: y
 				}),
-				p === "store" && /* @__PURE__ */ u(i, { elementSelected: h }),
+				p === "store" && /* @__PURE__ */ u(i, { elementSelected: g }),
 				p === "history" && /* @__PURE__ */ u(t, {}),
 				p === "variables" && /* @__PURE__ */ u(o, {}),
 				p === "elements" && /* @__PURE__ */ u(e, {
-					elementSelected: h,
-					onSelectElement: g
+					elementSelected: g,
+					onSelectElement: _
 				}),
 				p === "plugins" && /* @__PURE__ */ u(r, {}),
 				p === "tracing" && /* @__PURE__ */ u(a, {})

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

@@ -4,7 +4,8 @@ export type DevToolsHeaderProps = {
     tabSelected?: string;
     orientation: Orientation;
     onChangeOrientation?: (orientation: Orientation) => void;
+    onCollapse?: () => void;
     onTabSelect?: (tabIndex: string) => void;
 };
-declare const DevToolsHeader: ({ tabSelected, orientation, onChangeOrientation, 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/DevToolsHeader.mjs

@@ -39,10 +39,10 @@ var a = [
 		label: "Tracing",
 		icon: "fa-solid fa-gauge-high"
 	}
-], o = ({ tabSelected: o, orientation: s = "vertical", onChangeOrientation: c, onTabSelect: l }) => {
-	let { options: u, value: d, onSelect: f } = e(), p = n(() => {
+], o = ({ tabSelected: o, orientation: s = "vertical", onChangeOrientation: c, onCollapse: l, onTabSelect: u }) => {
+	let { options: d, value: f, onSelect: p } = e(), m = n(() => {
 		c?.(s === "horizontal" ? "vertical" : "horizontal");
-	}, [s, c]), m = n((e) => () => l?.(e), [l]), h = n((e) => f(e.target.value), [f]);
+	}, [s, c]), h = n((e) => () => u?.(e), [u]), g = n((e) => p(e.target.value), [p]);
 	return /* @__PURE__ */ i("div", {
 		className: "flex shrink-0 items-stretch justify-between border-b border-zinc-200 bg-zinc-100 select-none dark:border-zinc-700 dark:bg-zinc-800",
 		children: [/* @__PURE__ */ r("div", {
@@ -50,7 +50,7 @@ var a = [
 			children: a.map((e) => {
 				let n = o === e.id;
 				return /* @__PURE__ */ i("button", {
-					onClick: m(e.id),
+					onClick: h(e.id),
 					className: t("flex cursor-pointer items-center gap-1.5 border-b-2 px-3 py-2 font-medium transition-colors", {
 						"border-violet-500 text-violet-600 dark:text-violet-400": n,
 						"border-transparent text-zinc-500 hover:bg-zinc-200/70 hover:text-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-100": !n
@@ -60,24 +60,33 @@ var a = [
 			})
 		}), /* @__PURE__ */ i("div", {
 			className: "flex shrink-0 items-center gap-1 border-l border-zinc-200 px-2 dark:border-zinc-700",
-			children: [u.length > 0 && /* @__PURE__ */ r("select", {
-				value: d ?? "",
-				onChange: h,
-				title: "Instance / StoreProvider driving the panel",
-				className: "max-w-52 rounded border border-zinc-300 bg-white px-1 py-0.5 text-[11px] text-zinc-700 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-200",
-				children: u.map((e) => /* @__PURE__ */ r("optgroup", {
-					label: e.label,
-					children: e.options.map((e) => /* @__PURE__ */ r("option", {
-						value: e.value,
-						children: e.label
-					}, e.value))
-				}, e.label))
-			}), /* @__PURE__ */ r("button", {
-				className: "flex h-6 w-6 items-center justify-center rounded text-zinc-500 transition-colors hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100",
-				title: s === "horizontal" ? "Switch to side panel" : "Switch to bottom panel",
-				onClick: p,
-				children: /* @__PURE__ */ r("i", { className: t("fa-solid fa-table-columns text-xs", { "rotate-90": s === "vertical" }) })
-			})]
+			children: [
+				d.length > 0 && /* @__PURE__ */ r("select", {
+					value: f ?? "",
+					onChange: g,
+					title: "Instance / StoreProvider driving the panel",
+					className: "max-w-52 rounded border border-zinc-300 bg-white px-1 py-0.5 text-[11px] text-zinc-700 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-200",
+					children: d.map((e) => /* @__PURE__ */ r("optgroup", {
+						label: e.label,
+						children: e.options.map((e) => /* @__PURE__ */ r("option", {
+							value: e.value,
+							children: e.label
+						}, e.value))
+					}, e.label))
+				}),
+				/* @__PURE__ */ r("button", {
+					className: "flex h-6 w-6 items-center justify-center rounded text-zinc-500 transition-colors hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100",
+					title: s === "horizontal" ? "Switch to side panel" : "Switch to bottom panel",
+					onClick: m,
+					children: /* @__PURE__ */ r("i", { className: t("fa-solid fa-table-columns text-xs", { "rotate-90": s === "vertical" }) })
+				}),
+				/* @__PURE__ */ r("button", {
+					className: "flex h-6 w-6 cursor-pointer items-center justify-center rounded text-zinc-500 transition-colors hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100",
+					title: "Collapse to the indicator",
+					onClick: l,
+					children: /* @__PURE__ */ r("i", { className: "fa-solid fa-xmark text-xs" })
+				})
+			]
 		})]
 	});
 };

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

@@ -1,10 +1,16 @@
 import { Orientation } from '../../DevToolsContainer';
+import { LogType } from '@plitzi/sdk-shared';
 export declare const ORIENTATION_VERTICAL = "vertical";
 export declare const ORIENTATION_HORIZONTAL = "horizontal";
 export type DevToolsPanelProps = {
     className?: string;
     orientation?: Orientation;
+    tabSelected: string;
+    /** Seeds the Logs filter when the panel is opened from the indicator, so a badge counting errors lands on them. */
+    logTypeFilter?: LogType;
+    onCollapse?: () => void;
+    onTabSelect: (tabSelected: string) => void;
     onChangeOrientation?: (orientation: Orientation) => void;
 };
-declare const DevToolsPanel: ({ className, orientation, 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/DevToolsPanel.mjs

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

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 { throttle as o } from "@plitzi/plitzi-ui/helpers";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { throttle as c } from "@plitzi/plitzi-ui/helpers";
 //#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(() => o(h, 100), [h]), _ = n((e) => {
+	}, [f]), g = i(() => c(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__ */ c("div", {
+	]), /* @__PURE__ */ s("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", {
+		children: [/* @__PURE__ */ s("div", {
 			className: "flex gap-1",
-			children: [/* @__PURE__ */ s(e, {
+			children: [/* @__PURE__ */ o(e, {
 				iconClassName: "fa-regular fa-hand-pointer",
 				title: "Select an element in the page to inspect it",
 				onClick: y,
 				isSelected: p
-			}), /* @__PURE__ */ s(e, {
+			}), /* @__PURE__ */ o(e, {
 				iconClassName: "fa-regular fa-file",
 				title: "Current Page",
 				onClick: b,
 				isSelected: u === d
 			})]
-		}), /* @__PURE__ */ s(e, {
+		}), /* @__PURE__ */ o(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 { useCommonStore as n } from "@plitzi/sdk-shared/store";
-import { get as r } from "@plitzi/plitzi-ui/helpers";
-import { jsx as i } from "react/jsx-runtime";
+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";
 //#region src/components/DevToolsPanel/tabs/ElementsViewer/DetailsValue.tsx
 var a = ({ attribute: a, value: o, isDefinition: s = !1, onSelectElement: c }) => {
-	let [l] = n("schema.flat"), u = e((e) => () => c?.(e), [c]), d = t(() => a === "items" && s && Array.isArray(o) ? /* @__PURE__ */ i("div", {
+	let [l] = r("schema.flat"), u = e((e) => () => c?.(e), [c]), d = t(() => a === "items" && s && Array.isArray(o) ? /* @__PURE__ */ n("div", {
 		className: "flex flex-col",
-		children: o.map((e, t) => /* @__PURE__ */ i("div", {
+		children: o.map((e, t) => /* @__PURE__ */ n("div", {
 			className: "cursor-pointer text-purple-400",
 			onClick: u(e),
-			children: r(l, `${e}.definition.label`, e)
+			children: i(l, `${e}.definition.label`, e)
 		}, t))
-	}) : a && ["rootId", "parentId"].includes(a) && s ? /* @__PURE__ */ i("div", {
+	}) : a && ["rootId", "parentId"].includes(a) && s ? /* @__PURE__ */ n("div", {
 		className: "cursor-pointer text-purple-400",
 		onClick: u(o),
-		children: r(l, `${o}.definition.label`, o)
+		children: i(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__ */ i("div", {
+	return /* @__PURE__ */ n("div", {
 		className: "grow basis-0 truncate",
 		children: d
 	});

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

@@ -1,20 +1,20 @@
 import e from "./DetailsAttributes.mjs";
 import t from "./DetailsDefinition.mjs";
-import n from "@plitzi/plitzi-ui/ContainerTabs";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/ContainerTabs";
 //#region src/components/DevToolsPanel/tabs/ElementsViewer/ElementDetails.tsx
-var a = [{ label: "Definition" }, { label: "Attributes" }], o = ({ definition: o, attributes: s, onSelectElement: c }) => /* @__PURE__ */ i(n, {
+var a = [{ label: "Definition" }, { label: "Attributes" }], o = ({ definition: o, attributes: s, onSelectElement: c }) => /* @__PURE__ */ r(i, {
 	className: "w-full grow gap-4 overflow-hidden p-4",
 	children: [
-		/* @__PURE__ */ r(n.Tabs, { items: a }),
-		/* @__PURE__ */ r(n.TabContent, {
+		/* @__PURE__ */ n(i.Tabs, { items: a }),
+		/* @__PURE__ */ n(i.TabContent, {
 			className: "flex-col",
-			children: /* @__PURE__ */ r(t, {
+			children: /* @__PURE__ */ n(t, {
 				definition: o,
 				onSelectElement: c
 			})
 		}),
-		/* @__PURE__ */ r(n.TabContent, { children: /* @__PURE__ */ r(e, { attributes: s }) })
+		/* @__PURE__ */ n(i.TabContent, { children: /* @__PURE__ */ n(e, { attributes: s }) })
 	]
 });
 //#endregion