@plitzi/sdk-dev-tools 0.32.5 → 0.32.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @plitzi/sdk-dev-tools
 
+## 0.32.6
+
+### Patch Changes
+
+- v0.32.6
+- Updated dependencies
+  - @plitzi/nexus@0.32.6
+  - @plitzi/sdk-navigation@0.32.6
+  - @plitzi/sdk-schema@0.32.6
+  - @plitzi/sdk-shared@0.32.6
+  - @plitzi/sdk-style@0.32.6
+
 ## 0.32.5
 
 ### Patch Changes

package/dist/DevToolsContainer.d.ts

@@ -5,9 +5,10 @@ export type DevToolsContainerProps = {
     className?: string;
     innerClassName?: string;
     enabled?: boolean;
+    instanceId?: string;
     devToolsStyle?: string;
     devToolsStyleLink?: string;
     renderMode?: 'default' | 'shadow';
 };
-declare const DevToolsContainer: ({ children, className, innerClassName, enabled, 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, 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;
 export default DevToolsContainer;

package/dist/DevToolsContainer.mjs

@@ -1,34 +1,38 @@
-import e from "./components/DevToolsPanel/index.mjs";
-import t from "./DevToolsContextProvider.mjs";
-import n from "clsx";
-import { use as r, useCallback as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { ThemeContext as c } from "@plitzi/sdk-shared";
-import l from "@plitzi/plitzi-ui/ContainerShadow";
+import { useIsSelectedInstance as e } from "./instanceRegistry.mjs";
+import t from "./components/DevToolsPanel/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 { 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";
 //#region src/DevToolsContainer.tsx
-var u = ({ children: u, className: d, innerClassName: f, enabled: p = !1, renderMode: m = "default", devToolsStyle: h = "", devToolsStyleLink: g = "" }) => {
-	let { theme: _ } = r(c), [v, y] = a("horizontal"), b = i((e) => y(e), []);
-	return p ? /* @__PURE__ */ o(t, { children: /* @__PURE__ */ s("div", {
-		className: n("flex grow overflow-auto", {
-			"flex-col": v === "horizontal",
-			"h-screen": v === "vertical"
-		}, d),
-		children: [
-			/* @__PURE__ */ o("div", {
-				className: n("grow basis-0 flex-col overflow-auto", f),
-				children: u
-			}),
-			m === "default" && /* @__PURE__ */ o(e, {
-				orientation: v,
-				onChangeOrientation: b
-			}),
-			m === "shadow" && /* @__PURE__ */ s(l, { children: [g && /* @__PURE__ */ o(l.Link, { href: g }), /* @__PURE__ */ s(l.Content, { children: [/* @__PURE__ */ o("style", { dangerouslySetInnerHTML: { __html: h } }), /* @__PURE__ */ o(e, {
-				className: n({ dark: _ === "dark" }),
-				orientation: v,
-				onChangeOrientation: b
-			})] })] })
-		]
-	}) }) : u;
+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,
+			children: /* @__PURE__ */ c("div", {
+				className: i("grow basis-0 flex-col overflow-auto", g),
+				children: m
+			})
+		}), 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
+		})] })] })] })]
+	}) : m;
 };
 //#endregion
-export { u as default };
+export { m as default };

package/dist/components/DevToolsPanel/DevToolsHeader.mjs

@@ -1,8 +1,9 @@
-import e from "clsx";
-import { useCallback as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useScopeSelector as e } from "../../scope/useScope.mjs";
+import t from "clsx";
+import { useCallback as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/DevToolsHeader.tsx
-var i = [
+var a = [
 	{
 		id: "logs",
 		label: "Logs",
@@ -38,35 +39,47 @@ var i = [
 		label: "Tracing",
 		icon: "fa-solid fa-gauge-high"
 	}
-], a = ({ tabSelected: a, orientation: o = "vertical", onChangeOrientation: s, onTabSelect: c }) => {
-	let l = t(() => {
-		s?.(o === "horizontal" ? "vertical" : "horizontal");
-	}, [o, s]), u = t((e) => () => c?.(e), [c]);
-	return /* @__PURE__ */ r("div", {
+], o = ({ tabSelected: o, orientation: s = "vertical", onChangeOrientation: c, onTabSelect: l }) => {
+	let { options: u, value: d, onSelect: f } = e(), p = n(() => {
+		c?.(s === "horizontal" ? "vertical" : "horizontal");
+	}, [s, c]), m = n((e) => () => l?.(e), [l]), h = n((e) => f(e.target.value), [f]);
+	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__ */ n("div", {
+		children: [/* @__PURE__ */ r("div", {
 			className: "flex items-stretch overflow-x-auto",
-			children: i.map((t) => {
-				let i = a === t.id;
-				return /* @__PURE__ */ r("button", {
-					onClick: u(t.id),
-					className: e("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": i,
-						"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": !i
+			children: a.map((e) => {
+				let n = o === e.id;
+				return /* @__PURE__ */ i("button", {
+					onClick: m(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
 					}),
-					children: [/* @__PURE__ */ n("i", { className: e(t.icon, "text-[10px]") }), t.label]
-				}, t.id);
+					children: [/* @__PURE__ */ r("i", { className: t(e.icon, "text-[10px]") }), e.label]
+				}, e.id);
 			})
-		}), /* @__PURE__ */ n("div", {
+		}), /* @__PURE__ */ i("div", {
 			className: "flex shrink-0 items-center gap-1 border-l border-zinc-200 px-2 dark:border-zinc-700",
-			children: /* @__PURE__ */ n("button", {
+			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: o === "horizontal" ? "Switch to side panel" : "Switch to bottom panel",
-				onClick: l,
-				children: /* @__PURE__ */ n("i", { className: e("fa-solid fa-table-columns text-xs", { "rotate-90": o === "vertical" }) })
-			})
+				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" }) })
+			})]
 		})]
 	});
 };
 //#endregion
-export { a as default };
+export { o as default };

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

@@ -8,13 +8,11 @@ var l = ({ items: l = [], autoScrollOffset: u = 40, orientation: d = "horizontal
 	let [p, m] = o(), h = a(null), g = a(!0);
 	i(() => {
 		let e = h.current;
-		e && g.current && (e.scrollTop = e.scrollHeight);
+		e && g.current && (e.scrollTop = 0);
 	}, [l]);
 	let _ = r(() => {
 		let e = h.current;
-		if (!e) return;
-		let t = e.scrollHeight - e.scrollTop - e.clientHeight <= u;
-		g.current = t;
+		e && (g.current = e.scrollTop <= u);
 	}, [u]), v = r((e) => {
 		m(e);
 	}, []);
@@ -49,7 +47,10 @@ var l = ({ items: l = [], autoScrollOffset: u = 40, orientation: d = "horizontal
 				children: l.length === 0 ? /* @__PURE__ */ c("div", {
 					className: "flex grow flex-col items-center justify-center gap-2 text-zinc-400 dark:text-zinc-500",
 					children: [/* @__PURE__ */ s("i", { className: "fa-solid fa-terminal text-3xl opacity-20" }), /* @__PURE__ */ s("span", { children: "No logs yet" })]
-				}) : l.filter((e) => !p || e.logType === p).map((t, n) => /* @__PURE__ */ s(e, {
+				}) : l.map((e, t) => ({
+					item: e,
+					key: t
+				})).filter(({ item: e }) => !p || e.logType === p).reverse().map(({ item: t, key: n }) => /* @__PURE__ */ s(e, {
 					category: t.category,
 					time: t.time,
 					params: t.params,

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

@@ -1,32 +1,55 @@
-import { use as e } from "react";
-import t from "@plitzi/sdk-shared/devTools/DevToolsContext";
-import { useCommonStore as n } from "@plitzi/sdk-shared/store";
-import { jsx as r } from "react/jsx-runtime";
-import i from "@uiw/react-json-view";
-import * as a from "@uiw/react-json-view/vscode";
-import { emptyObject as o } from "@plitzi/sdk-shared/helpers/utils";
+import { useSelectedStore as e } from "../../../../scope/useScope.mjs";
+import t from "../../../../scope/useStoreState.mjs";
+import n from "@plitzi/plitzi-ui/hooks/useStorage";
+import r from "clsx";
+import { use as i, useCallback as a } from "react";
+import o from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@uiw/react-json-view";
+import * as u from "@uiw/react-json-view/vscode";
+import { emptyObject as d } from "@plitzi/sdk-shared/helpers/utils";
 //#region src/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.tsx
-var s = {
-	...a.vscodeTheme,
+var f = {
+	...u.vscodeTheme,
 	width: "100%",
 	height: "100%",
 	overflow: "auto",
 	padding: "8px",
 	fontSize: "14px"
-}, c = ({ elementSelected: a }) => {
-	let { getData: c } = e(t), [l] = n();
-	return /* @__PURE__ */ r("div", {
+}, p = (e) => r("cursor-pointer rounded px-2 py-0.5 font-medium transition-colors", e ? "bg-violet-500/15 text-violet-600 dark:text-violet-300" : "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"), m = ({ elementSelected: r }) => {
+	let { getData: u } = i(o), m = e(), [h, g] = n("plitzi-sdk.dev-tools.store.view", "own"), _ = t(r ? void 0 : m, h === "merged"), v = a(() => g("own"), [g]), y = a(() => g("merged"), [g]), b = r ? u?.(`getElementDataSource-${r}`) : _;
+	return /* @__PURE__ */ c("div", {
 		className: "flex h-full w-full flex-col",
-		children: /* @__PURE__ */ r(i, {
-			value: (a ? c?.(`getElementDataSource-${a}`) : l) ?? o,
-			style: s,
+		children: [!r && /* @__PURE__ */ c("div", {
+			className: "flex shrink-0 items-center gap-1 border-b border-zinc-200 px-2 py-1 text-[11px] dark:border-zinc-800",
+			children: [
+				/* @__PURE__ */ s("span", {
+					className: "mr-1 text-zinc-400 dark:text-zinc-500",
+					children: "View"
+				}),
+				/* @__PURE__ */ s("button", {
+					className: p(h === "own"),
+					onClick: v,
+					title: "Only this scope's own layer",
+					children: "Own"
+				}),
+				/* @__PURE__ */ s("button", {
+					className: p(h === "merged"),
+					onClick: y,
+					title: "Own layer merged over the parent scope chain",
+					children: "Merged"
+				})
+			]
+		}), /* @__PURE__ */ s(l, {
+			value: b ?? d,
+			style: f,
 			enableClipboard: !1,
 			indentWidth: 15,
 			collapsed: 2,
 			displayObjectSize: !1,
 			displayDataTypes: !1
-		})
+		})]
 	});
 };
 //#endregion
-export { c as default };
+export { m as default };

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

@@ -6,100 +6,92 @@ import i from "../SidebarShell/SidebarShell.mjs";
 import a from "../SidebarShell/SidebarEmpty.mjs";
 import o from "../SidebarToggle/SidebarToggle.mjs";
 import s from "./FlameFrame.mjs";
-import { useCallback as c, useEffect as l, useMemo as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useCallback as c, useMemo as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/TracingViewer/components/Flamegraph/Flamegraph.tsx
-var m = 1e-6, h = ({ commit: h, model: g, active: _, origin: v, sidebarOpen: y, onSelectElement: b, onToggleSidebar: x }) => {
-	let [S, C] = d();
-	l(() => C(void 0), [h.commitId, g]);
-	let w = u(() => {
+var f = 1e-6, p = ({ commit: p, model: m, active: h, origin: g, sidebarOpen: _, onSelectElement: v, onToggleSidebar: y }) => {
+	let b = l(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of g.nodes) e.set(t.id, t);
+		for (let t of m.nodes) e.set(t.id, t);
 		return e;
-	}, [g]), T = S ? w.get(S) : void 0, E = T ? T.x : 0, D = T ? T.width : 1, O = T ? T.depth : 0, k = u(() => {
-		if (!T) return [];
-		let e = [], t = T.parentId;
+	}, [m]), x = h, S = x ? x.x : 0, C = x ? x.width : 1, w = x ? x.depth : 0, T = l(() => {
+		if (!x) return [];
+		let e = [], t = x.parentId;
 		for (; t !== void 0;) {
-			let n = w.get(t);
+			let n = b.get(t);
 			if (!n) break;
 			e.push(n), t = n.parentId;
 		}
 		return e.reverse();
-	}, [T, w]), A = u(() => g.nodes.filter((e) => e.depth >= O && e.x >= E - m && e.x + e.width <= E + D + m), [
-		g,
-		E,
-		D,
-		O
-	]), j = u(() => A.reduce((e, t) => Math.max(e, t.depth), O), [A, O]), M = c((e) => {
-		let t = e.id === _?.id;
-		b(t ? void 0 : e.id), C(t ? void 0 : e.id);
-	}, [_, b]), N = c((e) => {
-		let t = e.id === _?.id;
-		b(t ? void 0 : e.id), C(t ? void 0 : e.id);
-	}, [_, b]);
-	return /* @__PURE__ */ p("div", {
+	}, [x, b]), E = l(() => m.nodes.filter((e) => e.depth >= w && e.x >= S - f && e.x + e.width <= S + C + f), [
+		m,
+		S,
+		C,
+		w
+	]), D = l(() => E.reduce((e, t) => Math.max(e, t.depth), w), [E, w]), O = c((e) => v(e.id === h?.id ? void 0 : e.id), [h, v]);
+	return /* @__PURE__ */ d("div", {
 		className: "flex min-h-0 flex-1 flex-col overflow-hidden",
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ d("div", {
 				className: "flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 border-b border-zinc-200 px-2 py-1 text-[10px] text-zinc-500 dark:border-zinc-800 dark:text-zinc-400",
 				children: [
-					/* @__PURE__ */ p("span", {
+					/* @__PURE__ */ d("span", {
 						className: "font-medium text-zinc-700 dark:text-zinc-200",
-						children: ["Commit #", h.commitId]
+						children: ["Commit #", p.commitId]
 					}),
-					v !== "update" && /* @__PURE__ */ f("span", {
+					g !== "update" && /* @__PURE__ */ u("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[v]
+						children: e[g]
 					}),
-					/* @__PURE__ */ f("span", {
+					/* @__PURE__ */ u("span", {
 						className: "opacity-60",
 						children: "click a frame to zoom · click the focused frame to zoom out"
 					}),
-					/* @__PURE__ */ f(t, {
-						commit: h,
-						model: g,
-						active: _,
-						onSelectElement: b
+					/* @__PURE__ */ u(t, {
+						commit: p,
+						model: m,
+						active: h,
+						onSelectElement: v
 					}),
-					/* @__PURE__ */ f(o, {
+					/* @__PURE__ */ u(o, {
 						className: "ml-auto",
-						open: y,
-						onToggle: x
+						open: _,
+						onToggle: y
 					})
 				]
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ d("div", {
 				className: "flex min-h-0 flex-1 overflow-hidden",
-				children: [/* @__PURE__ */ f("div", {
+				children: [/* @__PURE__ */ u("div", {
 					className: "min-h-0 flex-1 overflow-auto p-1",
-					children: /* @__PURE__ */ p("div", {
+					children: /* @__PURE__ */ d("div", {
 						className: "relative w-full",
-						style: { height: (j + 1) * 18 },
-						children: [k.map((e) => /* @__PURE__ */ f(s, {
+						style: { height: (D + 1) * 18 },
+						children: [T.map((e) => /* @__PURE__ */ u(s, {
 							node: e,
 							left: 0,
 							width: 100,
 							top: e.depth * 18,
-							selected: e.id === _?.id,
-							onClick: N
-						}, e.id)), A.map((e) => /* @__PURE__ */ f(s, {
+							selected: e.id === h?.id,
+							onClick: O
+						}, e.id)), E.map((e) => /* @__PURE__ */ u(s, {
 							node: e,
-							left: (e.x - E) / D * 100,
-							width: e.width / D * 100,
+							left: (e.x - S) / C * 100,
+							width: e.width / C * 100,
 							top: e.depth * 18,
-							selected: e.id === _?.id,
-							onClick: M
+							selected: e.id === h?.id,
+							onClick: O
 						}, e.id))]
 					})
-				}), y && /* @__PURE__ */ f(i, { children: _ ? /* @__PURE__ */ f(n, {
-					node: _,
-					commit: h,
-					model: g
-				}) : /* @__PURE__ */ f(a, {}) })]
+				}), _ && /* @__PURE__ */ u(i, { children: h ? /* @__PURE__ */ u(n, {
+					node: h,
+					commit: p,
+					model: m
+				}) : /* @__PURE__ */ u(a, {}) })]
 			}),
-			/* @__PURE__ */ f(r, {})
+			/* @__PURE__ */ u(r, {})
 		]
 	});
 };
 //#endregion
-export { h as default };
+export { p as default };

package/dist/instanceRegistry.d.ts

@@ -0,0 +1,6 @@
+export declare const selectInstance: (instanceId: string) => void;
+export declare const useIsSelectedInstance: (instanceId: string, enabled: boolean) => boolean;
+export declare const useDevInstances: () => {
+    instanceIds: ReadonlyArray<string>;
+    selectedId: string | undefined;
+};

package/dist/instanceRegistry.mjs

@@ -0,0 +1,24 @@
+import { useEffect as e, useSyncExternalStore as t } from "react";
+//#region src/instanceRegistry.ts
+var n = [], r = /* @__PURE__ */ new Set(), i, a = [], o = () => {
+	a = [...n];
+	for (let e of r) e();
+}, s = (e) => (n.push(e), i === void 0 && (i = e), o(), () => {
+	let t = n.indexOf(e);
+	t !== -1 && n.splice(t, 1), i === e && (i = n[0]), o();
+}), c = (e) => (r.add(e), () => {
+	r.delete(e);
+}), l = () => a, u = () => i, d = (e) => {
+	i !== e && (i = e, o());
+}, f = (n, r) => {
+	e(() => {
+		if (r) return s(n);
+	}, [r, n]);
+	let i = t(c, u, u);
+	return r && i === n;
+}, p = () => ({
+	instanceIds: t(c, l, l),
+	selectedId: t(c, u, u)
+});
+//#endregion
+export { d as selectInstance, p as useDevInstances, f as useIsSelectedInstance };

package/dist/scope/helpers.d.ts

@@ -0,0 +1,13 @@
+import { DevStoreEntry } from '@plitzi/nexus';
+export type ScopeOption = {
+    label: string;
+    value: string;
+};
+export type ScopeOptionGroup = {
+    label: string;
+    options: ScopeOption[];
+};
+export declare const storeLabel: (entry: DevStoreEntry, rootKeys?: ReadonlySet<string>) => string;
+export declare const rootKeysOf: (entries: ReadonlyArray<DevStoreEntry>) => ReadonlySet<string> | undefined;
+export declare const buildScopeOptions: (entries: ReadonlyArray<DevStoreEntry>, instanceIds: ReadonlyArray<string>, activeInstanceId: string | undefined) => ScopeOptionGroup[];
+export declare const resolveSelectedUid: (entries: ReadonlyArray<DevStoreEntry>, selectedUid: string | undefined) => string | undefined;

package/dist/scope/helpers.mjs

@@ -0,0 +1,23 @@
+//#region src/scope/helpers.ts
+var e = (e, t) => {
+	if (!t) return;
+	let n = Object.keys(e.getState()).filter((e) => !t.has(e));
+	return n.length > 0 ? `{ ${n.slice(0, 4).join(", ")} }` : void 0;
+}, t = (t, n) => {
+	let { store: r, name: i, scopeId: a } = t;
+	return i ? r.scopePath ? `${i} · ${r.scopePath}` : i : r.scopePath ? r.scopePath : r.id ? r.id : a === void 0 ? "root" : e(r, n) ?? "scope";
+}, n = (e) => {
+	let t = e.find((e) => e.scopeId === void 0);
+	return t ? new Set(Object.keys(t.store.getState())) : void 0;
+}, r = (e, r, i) => {
+	let a = n(e);
+	return r.map((n) => ({
+		label: n,
+		options: e.filter((e) => e.scopeId === n || e.scopeId === void 0 && n === i).map((e) => ({
+			label: t(e, a),
+			value: e.uid
+		}))
+	}));
+}, i = (e, t) => t && e.some((e) => e.uid === t) ? t : (e.find((e) => e.scopeId === void 0) ?? e.at(0))?.uid;
+//#endregion
+export { r as buildScopeOptions, i as resolveSelectedUid, n as rootKeysOf, t as storeLabel };

package/dist/scope/storeSelection.d.ts

@@ -0,0 +1,2 @@
+export declare const selectStore: (uid: string | undefined) => void;
+export declare const useSelectedStoreUid: () => string | undefined;

package/dist/scope/storeSelection.mjs

@@ -0,0 +1,11 @@
+import { useSyncExternalStore as e } from "react";
+//#region src/scope/storeSelection.ts
+var t, n = /* @__PURE__ */ new Set(), r = () => {
+	for (let e of n) e();
+}, i = (e) => (n.add(e), () => {
+	n.delete(e);
+}), a = () => t, o = (e) => {
+	t !== e && (t = e, r());
+}, s = () => e(i, a, a);
+//#endregion
+export { o as selectStore, s as useSelectedStoreUid };

package/dist/scope/useDevStores.d.ts

@@ -0,0 +1,3 @@
+import { DevStoreEntry } from '@plitzi/nexus';
+declare const useDevStores: () => ReadonlyArray<DevStoreEntry>;
+export default useDevStores;

package/dist/scope/useDevStores.mjs

@@ -0,0 +1,6 @@
+import { useSyncExternalStore as e } from "react";
+import { getDevStoresSnapshot as t, subscribeDevStores as n } from "@plitzi/nexus";
+//#region src/scope/useDevStores.ts
+var r = () => e(n, t, t);
+//#endregion
+export { r as default };

package/dist/scope/useScope.d.ts

@@ -0,0 +1,9 @@
+import { ScopeOptionGroup } from './helpers';
+import { DevStore } from '@plitzi/nexus';
+export type ScopeSelector = {
+    options: ScopeOptionGroup[];
+    value: string | undefined;
+    onSelect: (uid: string) => void;
+};
+export declare const useScopeSelector: () => ScopeSelector;
+export declare const useSelectedStore: () => DevStore | undefined;

package/dist/scope/useScope.mjs

@@ -0,0 +1,26 @@
+import { selectInstance as e, useDevInstances as t } from "../instanceRegistry.mjs";
+import { buildScopeOptions as n, resolveSelectedUid as r } from "./helpers.mjs";
+import { selectStore as i, useSelectedStoreUid as a } from "./storeSelection.mjs";
+import o from "./useDevStores.mjs";
+import { useCallback as s, useMemo as c } from "react";
+//#region src/scope/useScope.ts
+var l = () => {
+	let l = o(), { instanceIds: u, selectedId: d } = t(), f = a();
+	return {
+		options: c(() => n(l, u, d), [
+			l,
+			u,
+			d
+		]),
+		value: c(() => r(l, f), [l, f]),
+		onSelect: s((t) => {
+			let n = l.find((e) => e.uid === t);
+			n?.scopeId && e(n.scopeId), i(t);
+		}, [l])
+	};
+}, u = () => {
+	let e = o(), t = a(), n = c(() => r(e, t), [e, t]);
+	return c(() => e.find((e) => e.uid === n)?.store, [e, n]);
+};
+//#endregion
+export { l as useScopeSelector, u as useSelectedStore };

package/dist/scope/useStoreState.d.ts

@@ -0,0 +1,3 @@
+import { DevStore } from '@plitzi/nexus';
+declare const useStoreState: (store: DevStore | undefined, merged: boolean) => Record<string, unknown>;
+export default useStoreState;

package/dist/scope/useStoreState.mjs

@@ -0,0 +1,8 @@
+import { useCallback as e, useSyncExternalStore as t } from "react";
+//#region src/scope/useStoreState.ts
+var n = {}, r = () => () => {}, i = (i, a) => {
+	let o = e((e) => i ? i.subscribe(e) : r(), [i]), s = e(() => i ? a ? i.getState() : i.getOwnState() : n, [i, a]);
+	return t(o, s, s);
+};
+//#endregion
+export { i as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-dev-tools",
-  "version": "0.32.5",
+  "version": "0.32.6",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -532,6 +532,30 @@
     "./index": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
+    },
+    "./instanceRegistry": {
+      "types": "./dist/instanceRegistry.d.ts",
+      "import": "./dist/instanceRegistry.mjs"
+    },
+    "./scope/helpers": {
+      "types": "./dist/scope/helpers.d.ts",
+      "import": "./dist/scope/helpers.mjs"
+    },
+    "./scope/storeSelection": {
+      "types": "./dist/scope/storeSelection.d.ts",
+      "import": "./dist/scope/storeSelection.mjs"
+    },
+    "./scope/useDevStores": {
+      "types": "./dist/scope/useDevStores.d.ts",
+      "import": "./dist/scope/useDevStores.mjs"
+    },
+    "./scope/useScope": {
+      "types": "./dist/scope/useScope.d.ts",
+      "import": "./dist/scope/useScope.mjs"
+    },
+    "./scope/useStoreState": {
+      "types": "./dist/scope/useStoreState.d.ts",
+      "import": "./dist/scope/useStoreState.mjs"
     }
   },
   "scripts": {
@@ -544,23 +568,23 @@
   "type": "module",
   "sideEffects": false,
   "devDependencies": {
-    "eslint": "^9.39.4",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "eslint": "^9.39.5",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "typescript": "^6.0.3",
-    "vite": "^8.1.4"
+    "vite": "^8.1.5"
   },
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19"
   },
   "dependencies": {
-    "@plitzi/nexus": "0.32.5",
-    "@plitzi/plitzi-ui": "^1.6.13",
-    "@plitzi/sdk-navigation": "0.32.5",
-    "@plitzi/sdk-schema": "0.32.5",
-    "@plitzi/sdk-shared": "0.32.5",
-    "@plitzi/sdk-style": "0.32.5",
+    "@plitzi/nexus": "0.32.6",
+    "@plitzi/plitzi-ui": "^1.6.17",
+    "@plitzi/sdk-navigation": "0.32.6",
+    "@plitzi/sdk-schema": "0.32.6",
+    "@plitzi/sdk-shared": "0.32.6",
+    "@plitzi/sdk-style": "0.32.6",
     "@uiw/react-json-view": "^2.0.0-alpha.43",
     "clsx": "^2.1.1"
   }