@plitzi/sdk-dev-tools 0.32.24 → 0.33.0

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/HotspotsList/HotspotsList.mjs

@@ -1,10 +1,10 @@
 import { buildHotspots as e, durationColor as t, formatMs as n } from "../../helpers.mjs";
 import r from "../DurationLegend/DurationLegend.mjs";
 import i from "../HotspotSidebar/HotspotSidebar.mjs";
-import a from "@plitzi/plitzi-ui/hooks/useStorage";
-import o from "clsx";
-import { useCallback as s, useEffect as c, useMemo as l, useRef as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import a from "clsx";
+import { useCallback as o, useEffect as s, useMemo as c, useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "@plitzi/plitzi-ui/hooks/useStorage";
 //#region src/components/DevToolsPanel/tabs/TracingViewer/components/HotspotsList/HotspotsList.tsx
 var p = [
 	{
@@ -24,14 +24,14 @@ var p = [
 		label: "Max"
 	}
 ], m = (e, t) => t === "renders" ? e.renders : t === "avg" ? e.avgSelf : t === "max" ? e.maxSelf : e.totalSelf, h = ({ commits: h, tree: g, flat: _, selectedId: v, onSelectElement: y }) => {
-	let [b, x] = a("plitzi-sdk.dev-tools.tracing.sort", "total"), S = u(null), C = l(() => e(h, g, _).sort((e, t) => m(t, b) - m(e, b)), [
+	let [b, x] = f("plitzi-sdk.dev-tools.tracing.sort", "total"), S = l(null), C = c(() => e(h, g, _).sort((e, t) => m(t, b) - m(e, b)), [
 		h,
 		g,
 		_,
 		b
-	]), w = l(() => C.reduce((e, t) => Math.max(e, m(t, b)), 0) || 1, [C, b]), T = l(() => C.reduce((e, t) => e + t.totalSelf, 0), [C]), E = l(() => C.find((e) => e.id === v), [C, v]), D = l(() => C.findIndex((e) => e.id === v), [C, v]);
-	c(() => S.current?.scrollIntoView({ block: "nearest" }), [v]);
-	let O = s((e) => () => x(e), [x]), k = s((e) => {
+	]), w = c(() => C.reduce((e, t) => Math.max(e, m(t, b)), 0) || 1, [C, b]), T = c(() => C.reduce((e, t) => e + t.totalSelf, 0), [C]), E = c(() => C.find((e) => e.id === v), [C, v]), D = c(() => C.findIndex((e) => e.id === v), [C, v]);
+	s(() => S.current?.scrollIntoView({ block: "nearest" }), [v]);
+	let O = o((e) => () => x(e), [x]), k = o((e) => {
 		if (e.key !== "ArrowUp" && e.key !== "ArrowDown" || C.length === 0) return;
 		e.preventDefault();
 		let t = D === -1 ? 0 : D, n = Math.max(0, Math.min(C.length - 1, t + (e.key === "ArrowUp" ? -1 : 1)));
@@ -41,29 +41,29 @@ var p = [
 		D,
 		y
 	]);
-	return /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ d("div", {
 		className: "flex min-h-0 flex-1 flex-col overflow-hidden",
 		children: [
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ d("div", {
 				className: "flex shrink-0 items-center gap-2 border-b border-zinc-200 px-2 py-1.5 text-[10px] text-zinc-500 dark:border-zinc-800 dark:text-zinc-400",
 				children: [
-					/* @__PURE__ */ d("span", {
+					/* @__PURE__ */ u("span", {
 						className: "font-medium text-zinc-700 dark:text-zinc-200",
 						children: "Session hotspots"
 					}),
-					/* @__PURE__ */ f("span", { children: [
+					/* @__PURE__ */ d("span", { children: [
 						"· ",
 						C.length,
 						" elements · ",
 						h.length,
 						" commits"
 					] }),
-					/* @__PURE__ */ f("div", {
+					/* @__PURE__ */ d("div", {
 						className: "ml-auto flex items-center gap-1",
-						children: [/* @__PURE__ */ d("span", { children: "sort" }), p.map((e) => /* @__PURE__ */ d("button", {
+						children: [/* @__PURE__ */ u("span", { children: "sort" }), p.map((e) => /* @__PURE__ */ u("button", {
 							onClick: O(e.id),
 							"aria-pressed": b === e.id,
-							className: o("rounded px-1.5 py-0.5 text-[10px] font-medium", {
+							className: a("rounded px-1.5 py-0.5 text-[10px] font-medium", {
 								"bg-violet-500 text-white": b === e.id,
 								"text-zinc-600 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700": b !== e.id
 							}),
@@ -72,66 +72,66 @@ var p = [
 					})
 				]
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ d("div", {
 				className: "flex min-h-0 flex-1 overflow-hidden",
-				children: [/* @__PURE__ */ f("div", {
+				children: [/* @__PURE__ */ d("div", {
 					role: "listbox",
 					"aria-label": "Session hotspots",
 					tabIndex: 0,
 					onKeyDown: k,
 					className: "min-h-0 flex-1 overflow-auto outline-none focus-visible:ring-1 focus-visible:ring-violet-400",
-					children: [C.length === 0 && /* @__PURE__ */ d("div", {
+					children: [C.length === 0 && /* @__PURE__ */ u("div", {
 						className: "px-2 py-3 text-center text-[10px] text-zinc-400 dark:text-zinc-500",
 						children: "No renders recorded yet"
 					}), C.map((e) => {
-						let r = e.id === v, i = m(e, b), a = b === "renders" ? e.renders / w : i / w;
-						return /* @__PURE__ */ f("button", {
+						let r = e.id === v, i = m(e, b), o = b === "renders" ? e.renders / w : i / w;
+						return /* @__PURE__ */ d("button", {
 							ref: r ? S : void 0,
 							role: "option",
 							"aria-selected": r,
 							onClick: () => y(r ? void 0 : e.id),
 							title: `${e.name} (${e.type})\n${e.renders} renders (${e.mounts} mount)\ntotal ${n(e.totalSelf)} · avg ${n(e.avgSelf)} · max ${n(e.maxSelf)} · last ${n(e.lastSelf)}`,
-							className: o("flex w-full items-center gap-2 px-2 py-0.5 text-left", {
+							className: a("flex w-full items-center gap-2 px-2 py-0.5 text-left", {
 								"bg-violet-500/10": r,
 								"hover:bg-zinc-50 dark:hover:bg-zinc-800/50": !r
 							}),
 							children: [
-								/* @__PURE__ */ f("span", {
+								/* @__PURE__ */ d("span", {
 									className: "flex w-40 shrink-0 flex-col",
-									children: [/* @__PURE__ */ d("span", {
+									children: [/* @__PURE__ */ u("span", {
 										className: "truncate text-zinc-700 dark:text-zinc-200",
 										children: e.name
-									}), /* @__PURE__ */ d("span", {
+									}), /* @__PURE__ */ u("span", {
 										className: "truncate text-[9px] text-zinc-400 dark:text-zinc-500",
 										children: e.type
 									})]
 								}),
-								/* @__PURE__ */ f("span", {
+								/* @__PURE__ */ d("span", {
 									className: "w-12 shrink-0 text-right text-[10px] text-zinc-400 tabular-nums dark:text-zinc-500",
 									title: "Times this element rendered itself",
 									children: [e.renders, "×"]
 								}),
-								/* @__PURE__ */ d("div", {
+								/* @__PURE__ */ u("div", {
 									className: "h-2 flex-1 overflow-hidden rounded-sm bg-zinc-100 dark:bg-zinc-800",
-									children: /* @__PURE__ */ d("div", {
-										style: { width: `${Math.max(2, Math.round(a * 100))}%` },
-										className: o("h-full rounded-sm", t(e.maxSelf))
+									children: /* @__PURE__ */ u("div", {
+										style: { width: `${Math.max(2, Math.round(o * 100))}%` },
+										className: a("h-full rounded-sm", t(e.maxSelf))
 									})
 								}),
-								/* @__PURE__ */ d("span", {
+								/* @__PURE__ */ u("span", {
 									className: "w-14 shrink-0 text-right text-zinc-500 tabular-nums dark:text-zinc-400",
 									children: b === "renders" ? `${e.renders}×` : n(i)
 								})
 							]
 						}, e.id);
 					})]
-				}), E && /* @__PURE__ */ d(i, {
+				}), E && /* @__PURE__ */ u(i, {
 					row: E,
 					flat: _,
 					sessionSelf: T
 				})]
 			}),
-			/* @__PURE__ */ d(r, {})
+			/* @__PURE__ */ u(r, {})
 		]
 	});
 };

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/RankedList/RankedList.mjs

@@ -6,15 +6,15 @@ import c from "../SidebarShell/SidebarShell.mjs";
 import l from "../SidebarShell/SidebarEmpty.mjs";
 import u from "../SidebarToggle/SidebarToggle.mjs";
 import d from "../MetricToggle/MetricToggle.mjs";
-import f from "@plitzi/plitzi-ui/hooks/useStorage";
-import p from "clsx";
-import { useCallback as m, useEffect as h, useMemo as g, useRef as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import f from "clsx";
+import { useCallback as p, useEffect as m, useMemo as h, useRef as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import y from "@plitzi/plitzi-ui/hooks/useStorage";
 //#region src/components/DevToolsPanel/tabs/TracingViewer/components/RankedList/RankedList.tsx
 var b = ({ commit: b, model: x, active: S, origin: C, sidebarOpen: w, onSelectElement: T, onToggleSidebar: E }) => {
-	let [D, O] = f("plitzi-sdk.dev-tools.tracing.metric", "self"), k = _(null), A = g(() => x.nodes.filter((e) => e.state === "rendered").sort((e, t) => i(t, D) - i(e, D)), [x, D]), j = g(() => A.reduce((e, t) => Math.max(e, i(t, D)), 0) || 1, [A, D]), M = g(() => A.findIndex((e) => e.id === S?.id), [A, S]);
-	h(() => k.current?.scrollIntoView({ block: "nearest" }), [S]);
-	let N = m((e) => {
+	let [D, O] = y("plitzi-sdk.dev-tools.tracing.metric", "self"), k = g(null), A = h(() => x.nodes.filter((e) => e.state === "rendered").sort((e, t) => i(t, D) - i(e, D)), [x, D]), j = h(() => A.reduce((e, t) => Math.max(e, i(t, D)), 0) || 1, [A, D]), M = h(() => A.findIndex((e) => e.id === S?.id), [A, S]);
+	m(() => k.current?.scrollIntoView({ block: "nearest" }), [S]);
+	let N = p((e) => {
 		if (e.key !== "ArrowUp" && e.key !== "ArrowDown" || A.length === 0) return;
 		e.preventDefault();
 		let t = M === -1 ? 0 : M, n = Math.max(0, Math.min(A.length - 1, t + (e.key === "ArrowUp" ? -1 : 1)));
@@ -24,22 +24,22 @@ var b = ({ commit: b, model: x, active: S, origin: C, sidebarOpen: w, onSelectEl
 		M,
 		T
 	]);
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ v("div", {
 		className: "flex min-h-0 flex-1 flex-col overflow-hidden",
 		children: [
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex shrink-0 flex-wrap items-center gap-x-2 gap-y-1 border-b border-zinc-200 px-2 py-1.5 text-[10px] text-zinc-500 dark:border-zinc-800 dark:text-zinc-400",
 				children: [
-					/* @__PURE__ */ y("span", {
+					/* @__PURE__ */ v("span", {
 						className: "font-medium text-zinc-700 dark:text-zinc-200",
 						children: ["Commit #", b.commitId]
 					}),
-					C !== "update" && /* @__PURE__ */ v("span", {
+					C !== "update" && /* @__PURE__ */ _("span", {
 						className: "rounded bg-violet-100 px-1 text-[9px] font-medium text-violet-700 uppercase dark:bg-violet-500/20 dark:text-violet-300",
 						children: e[C]
 					}),
-					/* @__PURE__ */ y("span", { children: [n(b.duration), " total"] }),
-					/* @__PURE__ */ y("span", {
+					/* @__PURE__ */ v("span", { children: [n(b.duration), " total"] }),
+					/* @__PURE__ */ v("span", {
 						title: "Elements that re-rendered, of all in this commit's subtree",
 						children: [
 							"· ",
@@ -49,107 +49,107 @@ var b = ({ commit: b, model: x, active: S, origin: C, sidebarOpen: w, onSelectEl
 							" rendered"
 						]
 					}),
-					/* @__PURE__ */ v(a, {
+					/* @__PURE__ */ _(a, {
 						commit: b,
 						model: x,
 						active: S,
 						onSelectElement: T
 					}),
-					/* @__PURE__ */ v(d, {
+					/* @__PURE__ */ _(d, {
 						className: "ml-auto",
 						metric: D,
 						onChange: O
 					}),
-					/* @__PURE__ */ v(u, {
+					/* @__PURE__ */ _(u, {
 						open: w,
 						onToggle: E
 					})
 				]
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex min-h-0 flex-1 overflow-hidden",
-				children: [/* @__PURE__ */ y("div", {
+				children: [/* @__PURE__ */ v("div", {
 					role: "listbox",
 					"aria-label": "Rendered elements, ranked",
 					tabIndex: 0,
 					onKeyDown: N,
 					className: "min-h-0 flex-1 overflow-auto outline-none focus-visible:ring-1 focus-visible:ring-violet-400",
-					children: [A.length === 0 && /* @__PURE__ */ v("div", {
+					children: [A.length === 0 && /* @__PURE__ */ _("div", {
 						className: "px-2 py-3 text-center text-[10px] text-zinc-400 dark:text-zinc-500",
 						children: "No element re-rendered in this commit"
 					}), A.map((e) => {
-						let a = i(e, D), o = e.id === S?.id, s = x.totalSelf > 0 ? e.selfDuration / x.totalSelf : 0, c = e.phase !== "mount", l = c && (e.changedProps === void 0 || e.changedProps.length === 0 && e.trigger), u = c && e.changedProps?.length === 0 && !e.trigger, d = !!e.changedProps?.length && e.changedProps.every((e) => e.ref), f = e.changedProps?.map((e) => e.key).join(", "), m = f || (l ? "internal state / hook" : e.type);
-						return /* @__PURE__ */ y("button", {
+						let a = i(e, D), o = e.id === S?.id, s = x.totalSelf > 0 ? e.selfDuration / x.totalSelf : 0, c = e.phase !== "mount", l = c && (e.changedProps === void 0 || e.changedProps.length === 0 && e.trigger), u = c && e.changedProps?.length === 0 && !e.trigger, d = !!e.changedProps?.length && e.changedProps.every((e) => e.ref), p = e.changedProps?.map((e) => e.key).join(", "), m = p || (l ? "internal state / hook" : e.type);
+						return /* @__PURE__ */ v("button", {
 							ref: o ? k : void 0,
 							role: "option",
 							"aria-selected": o,
 							onClick: () => T(e.id === S?.id ? void 0 : e.id),
-							title: `${e.name} (${e.type})\n${n(e.selfDuration)} self · ${n(e.actualDuration)} total · ${n(e.baseDuration)} base\nphase: ${e.phase ?? "update"} · ${r(s)} of render work${u ? "\nno input changed — re-rendered by an ancestor" : l ? "\nno input changed — internal state/hook/context" : d ? `\nreference-only change (missing memo): ${f}` : f ? `\nchanged: ${f}` : ""}`,
-							className: p("flex w-full items-center gap-2 px-2 py-0.5 text-left", {
+							title: `${e.name} (${e.type})\n${n(e.selfDuration)} self · ${n(e.actualDuration)} total · ${n(e.baseDuration)} base\nphase: ${e.phase ?? "update"} · ${r(s)} of render work${u ? "\nno input changed — re-rendered by an ancestor" : l ? "\nno input changed — internal state/hook/context" : d ? `\nreference-only change (missing memo): ${p}` : p ? `\nchanged: ${p}` : ""}`,
+							className: f("flex w-full items-center gap-2 px-2 py-0.5 text-left", {
 								"bg-violet-500/10": o,
 								"hover:bg-zinc-50 dark:hover:bg-zinc-800/50": !o
 							}),
 							children: [
-								/* @__PURE__ */ y("span", {
+								/* @__PURE__ */ v("span", {
 									className: "flex w-40 shrink-0 flex-col",
-									children: [/* @__PURE__ */ y("span", {
+									children: [/* @__PURE__ */ v("span", {
 										className: "flex items-center gap-1 text-zinc-700 dark:text-zinc-200",
 										children: [
-											e.trigger && /* @__PURE__ */ v("i", {
+											e.trigger && /* @__PURE__ */ _("i", {
 												className: "fa-solid fa-bolt shrink-0 text-[9px] text-violet-500",
 												title: "Trigger — a root cause of this commit"
 											}),
-											(u || d) && /* @__PURE__ */ v("i", {
+											(u || d) && /* @__PURE__ */ _("i", {
 												className: "fa-solid fa-triangle-exclamation shrink-0 text-[9px] text-amber-500",
 												title: u ? "Re-rendered without any input change — possible unnecessary re-render" : "Only reference-changed props (shallow-equal content) — likely a missing memo"
 											}),
-											!e.visible && /* @__PURE__ */ v("i", {
+											!e.visible && /* @__PURE__ */ _("i", {
 												className: "fa-solid fa-eye-slash shrink-0 text-[9px] text-amber-500",
 												title: "Hidden (visibility)"
 											}),
-											/* @__PURE__ */ v("span", {
+											/* @__PURE__ */ _("span", {
 												className: "truncate",
 												children: e.name
 											})
 										]
-									}), /* @__PURE__ */ v("span", {
+									}), /* @__PURE__ */ _("span", {
 										className: "truncate text-[9px] text-zinc-400 dark:text-zinc-500",
 										children: m
 									})]
 								}),
-								/* @__PURE__ */ v("span", {
-									className: p("rounded px-1 text-[9px] uppercase", {
+								/* @__PURE__ */ _("span", {
+									className: f("rounded px-1 text-[9px] uppercase", {
 										"bg-sky-500/15 text-sky-600 dark:text-sky-400": e.phase === "mount",
 										"bg-amber-500/15 text-amber-600 dark:text-amber-400": e.phase !== "mount"
 									}),
 									children: e.phase === "mount" ? "mount" : "update"
 								}),
-								/* @__PURE__ */ v("div", {
+								/* @__PURE__ */ _("div", {
 									className: "h-2 flex-1 overflow-hidden rounded-sm bg-zinc-100 dark:bg-zinc-800",
-									children: /* @__PURE__ */ v("div", {
+									children: /* @__PURE__ */ _("div", {
 										style: { width: `${Math.max(2, Math.round(a / j * 100))}%` },
-										className: p("h-full rounded-sm", t(a))
+										className: f("h-full rounded-sm", t(a))
 									})
 								}),
-								/* @__PURE__ */ v("span", {
+								/* @__PURE__ */ _("span", {
 									className: "w-10 shrink-0 text-right text-[10px] text-zinc-400 tabular-nums dark:text-zinc-500",
 									title: "Share of this commit's total render work",
 									children: r(s)
 								}),
-								/* @__PURE__ */ v("span", {
+								/* @__PURE__ */ _("span", {
 									className: "w-12 shrink-0 text-right text-zinc-500 tabular-nums dark:text-zinc-400",
 									children: n(a)
 								})
 							]
 						}, e.id);
 					})]
-				}), w && /* @__PURE__ */ v(c, { children: S ? /* @__PURE__ */ v(o, {
+				}), w && /* @__PURE__ */ _(c, { children: S ? /* @__PURE__ */ _(o, {
 					node: S,
 					commit: b,
 					model: x
-				}) : /* @__PURE__ */ v(l, {}) })]
+				}) : /* @__PURE__ */ _(l, {}) })]
 			}),
-			/* @__PURE__ */ v(s, {})
+			/* @__PURE__ */ _(s, {})
 		]
 	});
 };

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/SidebarShell/SidebarShell.mjs

@@ -1,13 +1,13 @@
-import e from "@plitzi/plitzi-ui/ContainerResizable";
-import t from "@plitzi/plitzi-ui/hooks/useStorage";
-import { useCallback as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
+import { useCallback as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@plitzi/plitzi-ui/ContainerResizable";
+import r from "@plitzi/plitzi-ui/hooks/useStorage";
 //#region src/components/DevToolsPanel/tabs/TracingViewer/components/SidebarShell/SidebarShell.tsx
 var i = 180, a = 480, o = 224, s = ({ children: s }) => {
-	let [c, l] = t("plitzi-sdk.dev-tools.tracing.sidebar-width", o), u = n((e) => {
+	let [c, l] = r("plitzi-sdk.dev-tools.tracing.sidebar-width", o), u = e((e) => {
 		Number.isFinite(e) && l(e);
 	}, [l]);
-	return /* @__PURE__ */ r(e, {
+	return /* @__PURE__ */ t(n, {
 		className: "shrink-0 border-l border-zinc-200 dark:border-zinc-800",
 		resizeHandles: ["w"],
 		axis: "x",
@@ -16,7 +16,7 @@ var i = 180, a = 480, o = 224, s = ({ children: s }) => {
 		minConstraintsX: i,
 		maxConstraintsX: a,
 		onChange: u,
-		children: /* @__PURE__ */ r("aside", {
+		children: /* @__PURE__ */ t("aside", {
 			className: "flex h-full w-full flex-col gap-1.5 overflow-auto bg-zinc-50 px-3 py-2 text-[10px] dark:bg-zinc-900/50",
 			children: s
 		})

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

@@ -1,31 +1,31 @@
 import e from "./VariablesList.mjs";
 import t from "./VariablesStyleList.mjs";
-import { useCommonStore as n } from "@plitzi/sdk-shared/store";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useCommonStore as i } from "@plitzi/sdk-shared/store";
 //#region src/components/DevToolsPanel/tabs/VariablesViewer/VariablesViewer.tsx
 var a = () => {
-	let [[a, o, s]] = n([
+	let [[a, o, s]] = i([
 		"schema.variables",
 		"style.variables",
 		"runtime.sources.variables"
 	]);
-	return /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ r("div", {
 		className: "flex w-full flex-col gap-4 overflow-y-auto p-3",
-		children: [/* @__PURE__ */ i("section", {
+		children: [/* @__PURE__ */ r("section", {
 			className: "flex flex-col gap-1.5",
-			children: [/* @__PURE__ */ i("div", {
+			children: [/* @__PURE__ */ r("div", {
 				className: "flex items-center gap-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
-				children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-code" }), "Schema Variables"]
-			}), /* @__PURE__ */ r(e, {
+				children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-code" }), "Schema Variables"]
+			}), /* @__PURE__ */ n(e, {
 				variables: a,
 				variablesParsed: s
 			})]
-		}), /* @__PURE__ */ i("section", {
+		}), /* @__PURE__ */ r("section", {
 			className: "flex flex-col gap-1.5",
-			children: [/* @__PURE__ */ i("div", {
+			children: [/* @__PURE__ */ r("div", {
 				className: "flex items-center gap-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
-				children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-palette" }), "Style Variables"]
-			}), /* @__PURE__ */ r(t, { variables: o })]
+				children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-palette" }), "Style Variables"]
+			}), /* @__PURE__ */ n(t, { variables: o })]
 		})]
 	});
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-dev-tools",
-  "version": "0.32.24",
+  "version": "0.33.0",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -18,6 +18,30 @@
       "types": "./dist/DevToolsContextProvider.d.ts",
       "import": "./dist/DevToolsContextProvider.mjs"
     },
+    "./components/DevToolsIndicator": {
+      "types": "./dist/components/DevToolsIndicator/index.d.ts",
+      "import": "./dist/components/DevToolsIndicator/index.mjs"
+    },
+    "./components/DevToolsIndicator/DevToolsIndicator": {
+      "types": "./dist/components/DevToolsIndicator/DevToolsIndicator.d.ts",
+      "import": "./dist/components/DevToolsIndicator/DevToolsIndicator.mjs"
+    },
+    "./components/DevToolsIndicator/index": {
+      "types": "./dist/components/DevToolsIndicator/index.d.ts",
+      "import": "./dist/components/DevToolsIndicator/index.mjs"
+    },
+    "./components/DevToolsOverlay": {
+      "types": "./dist/components/DevToolsOverlay/index.d.ts",
+      "import": "./dist/components/DevToolsOverlay/index.mjs"
+    },
+    "./components/DevToolsOverlay/DevToolsOverlay": {
+      "types": "./dist/components/DevToolsOverlay/DevToolsOverlay.d.ts",
+      "import": "./dist/components/DevToolsOverlay/DevToolsOverlay.mjs"
+    },
+    "./components/DevToolsOverlay/index": {
+      "types": "./dist/components/DevToolsOverlay/index.d.ts",
+      "import": "./dist/components/DevToolsOverlay/index.mjs"
+    },
     "./components/DevToolsPanel": {
       "types": "./dist/components/DevToolsPanel/index.d.ts",
       "import": "./dist/components/DevToolsPanel/index.mjs"
@@ -246,6 +270,18 @@
       "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogNavigation/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogNavigation/index.mjs"
     },
+    "./components/DevToolsPanel/tabs/Logs/categories/LogNetwork": {
+      "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/Logs/categories/LogNetwork/LogNetwork": {
+      "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/LogNetwork.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/LogNetwork.mjs"
+    },
+    "./components/DevToolsPanel/tabs/Logs/categories/LogNetwork/index": {
+      "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/index.mjs"
+    },
     "./components/DevToolsPanel/tabs/Logs/categories/LogStore": {
       "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/index.mjs"
@@ -310,6 +346,14 @@
       "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.mjs"
     },
+    "./components/DevToolsPanel/tabs/StoreViewer/helpers/mapFunctionValues": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/helpers/mapFunctionValues.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/helpers/mapFunctionValues.mjs"
+    },
+    "./components/DevToolsPanel/tabs/StoreViewer/helpers/renderFunctionValue": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/helpers/renderFunctionValue.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/helpers/renderFunctionValue.mjs"
+    },
     "./components/DevToolsPanel/tabs/StoreViewer/index": {
       "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/index.mjs"
@@ -572,19 +616,19 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "typescript": "^6.0.3",
-    "vite": "^8.2.0"
+    "vite": "^8.2.1"
   },
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19"
   },
   "dependencies": {
-    "@plitzi/nexus": "^1.0.0",
-    "@plitzi/plitzi-ui": "^1.6.18",
-    "@plitzi/sdk-navigation": "0.32.24",
-    "@plitzi/sdk-schema": "0.32.24",
-    "@plitzi/sdk-shared": "0.32.24",
-    "@plitzi/sdk-style": "0.32.24",
+    "@plitzi/nexus": "^1.1.0",
+    "@plitzi/plitzi-ui": "^1.6.19",
+    "@plitzi/sdk-navigation": "0.33.0",
+    "@plitzi/sdk-schema": "0.33.0",
+    "@plitzi/sdk-shared": "0.33.0",
+    "@plitzi/sdk-style": "0.33.0",
     "@uiw/react-json-view": "^2.0.0-alpha.43",
     "clsx": "^2.1.1"
   }