@plitzi/sdk-dev-tools 0.33.1 → 0.34.0

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

@@ -4,23 +4,23 @@ var t = (e) => {
 	let t = 0, n = 0;
 	for (let r of e.elements) r.phase === "mount" ? t += 1 : n += 1;
 	return t > 0 && n === 0 ? "mount" : n > 0 && t === 0 ? "update" : "mixed";
-}, n = (e, n, r) => {
+}, n = 0, r = (e, n, r) => {
 	if (e.commitId === 0) return "ssr";
 	let i = t(e);
 	return i === "mount" ? n && r ? "hydration" : "mount" : i;
-}, r = {
+}, i = {
 	ssr: "SSR render (server)",
 	hydration: "Hydration (SSR)",
 	mount: "Mount",
 	mixed: "Mount + update",
 	update: "Update"
-}, i = {
+}, a = {
 	ssr: "S",
 	hydration: "H",
 	mount: "M",
 	mixed: "±",
 	update: "·"
-}, a = [
+}, o = [
 	{
 		origin: "ssr",
 		label: "SSR"
@@ -41,7 +41,7 @@ var t = (e) => {
 		origin: "update",
 		label: "Update"
 	}
-], o = (e) => e < .1 ? "<0.1ms" : `${e.toFixed(1)}ms`, s = (e) => `${Math.round(e * 100)}%`, c = (e) => e >= 50 ? "bg-red-500" : e >= 16 ? "bg-amber-500" : e >= 8 ? "bg-emerald-500" : "bg-sky-500", l = [
+], s = (e) => e < .1 ? "<0.1ms" : `${e.toFixed(1)}ms`, c = (e) => `${Math.round(e * 100)}%`, l = (e) => e >= 50 ? "bg-red-500" : e >= 16 ? "bg-amber-500" : e >= 8 ? "bg-emerald-500" : "bg-sky-500", u = [
 	{
 		color: "bg-sky-500",
 		label: "<8ms"
@@ -58,111 +58,133 @@ var t = (e) => {
 		color: "bg-red-500",
 		label: "≥50ms"
 	}
-], u = "bg-zinc-300 dark:bg-zinc-700", d = { backgroundImage: "repeating-linear-gradient(45deg, rgba(113,113,122,0.22) 0, rgba(113,113,122,0.22) 2px, transparent 2px, transparent 5px)" }, f = (e) => e.state === "rendered" ? c(e.selfDuration) : e.state === "bubbled" ? u : "bg-transparent", p = (e) => e.state === "bubbled" ? "text-zinc-600 dark:text-zinc-300" : e.state === "hatched" ? "text-zinc-400 dark:text-zinc-600" : c(e.selfDuration) === "bg-amber-500" ? "text-stone-900" : "text-white", m = (e, t) => {
+], d = "bg-zinc-300 dark:bg-zinc-700", f = { backgroundImage: "repeating-linear-gradient(45deg, rgba(113,113,122,0.22) 0, rgba(113,113,122,0.22) 2px, transparent 2px, transparent 5px)" }, p = (e) => e.state === "rendered" ? l(e.selfDuration) : e.state === "bubbled" ? d : "bg-transparent", m = (e) => e.state === "bubbled" ? "text-zinc-600 dark:text-zinc-300" : e.state === "hatched" ? "text-zinc-400 dark:text-zinc-600" : l(e.selfDuration) === "bg-amber-500" ? "text-stone-900" : "text-white", h = (e, t) => {
 	let n = t?.[e];
 	if (!n) return e;
 	let { label: r, type: i } = n.definition;
 	return r || i || e;
-}, h = (e, t) => t?.[e]?.definition.type ?? "unknown", g = (t, n) => {
+}, g = (e, t) => t?.[e]?.definition.type ?? "unknown", _ = (t, n) => {
 	let r = e(n?.[t], "definition.initialState.visibility", !0);
 	return r !== !1 && r !== "false";
-}, _ = (e, t) => t === "self" ? e.selfDuration : e.actualDuration, v = .01, y = 1e-6, b = (e, t) => {
-	let n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
-	for (let e of Object.keys(t)) n.set(e, t[e].parentId), r.set(e, t[e].baseDuration);
-	let i = new Map(e.elements.map((e) => [e.id, e])), a = /* @__PURE__ */ new Map();
-	for (let [e, t] of n) if (t !== void 0 && n.has(t)) {
-		let n = a.get(t);
-		n ? n.push(e) : a.set(t, [e]);
+}, v = (e, t) => t === "self" ? e.selfDuration : e.actualDuration, y = .01, b = 1e-6, x = (e) => {
+	let t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+	for (let i of Object.keys(e)) t.set(i, e[i].parentId), n.set(i, e[i].baseDuration), r.set(i, e[i].elementId);
+	let i = /* @__PURE__ */ new Map();
+	for (let [e, n] of t) if (n !== void 0 && t.has(n)) {
+		let t = i.get(n);
+		t ? t.push(e) : i.set(n, [e]);
+	}
+	return {
+		parent: t,
+		base: n,
+		children: i,
+		elementOf: r
+	};
+}, S = (e, t) => {
+	let { parent: n } = t, r = new Map(e.elements.map((e) => [e.id, e])), i = /* @__PURE__ */ new Map();
+	for (let t of e.elements) i.set(t.id, t.actualDuration);
+	for (let t of e.elements) {
+		let e = n.get(t.id);
+		for (; e !== void 0 && !r.has(e);) e = n.get(e);
+		e !== void 0 && i.set(e, (i.get(e) ?? 0) - t.actualDuration);
 	}
-	let o = /* @__PURE__ */ new Set();
-	for (let e of i.keys()) {
+	for (let [e, t] of i) t < 0 && i.set(e, 0);
+	let a = /* @__PURE__ */ new Set();
+	for (let e of r.keys()) {
 		let t = e, r = n.get(e);
 		for (; r !== void 0 && n.has(r);) t = r, r = n.get(r);
-		o.add(t);
+		a.add(t);
 	}
-	let s = (e) => {
-		let t = [], n = [...a.get(e) ?? []];
-		for (; n.length > 0;) {
-			let e = n.pop();
-			if (e === void 0) break;
-			i.has(e) ? t.push(e) : n.push(...a.get(e) ?? []);
-		}
-		return t;
-	}, c = (e) => {
-		let t = i.get(e);
-		if (!t) return 0;
-		let n = s(e).reduce((e, t) => e + (i.get(t)?.actualDuration ?? 0), 0);
-		return Math.max(0, t.actualDuration - n);
-	};
 	return {
-		rendered: i,
-		children: a,
-		base: r,
-		roots: [...o],
-		selfOf: c
+		rendered: r,
+		self: i,
+		roots: [...a]
 	};
-}, x = (e, t, n) => {
-	let { rendered: r, children: i, base: a, roots: o, selfOf: s } = b(e, t), c = (e) => {
+}, C = (e, t, n, r = x(t)) => {
+	let { children: i, base: a, elementOf: o } = r, { rendered: s, self: c, roots: l } = S(e, r), u = (e) => {
 		let t = a.get(e) ?? 0;
 		if (t > 0) return t;
-		let n = r.get(e)?.actualDuration ?? 0;
-		return n > 0 ? n : v;
-	}, l = [], u = [], d = 0, f = 0, p = 0, _ = (e, t, o, b, x, S) => {
-		let C = r.get(e), w = s(e), T = C ? w > y ? "rendered" : "bubbled" : "hatched", E = T === "rendered" && !S;
-		T === "rendered" && (f += w, p += 1), E && u.push(e), d = Math.max(d, x), l.push({
+		let n = s.get(e)?.actualDuration ?? 0;
+		return n > 0 ? n : y;
+	}, d = [], f = [], p = 0, m = 0, v = 0, C = [], w = l.map(u), T = w.reduce((e, t) => e + t, 0) || 1, E = 0;
+	for (l.forEach((e, t) => {
+		let n = (w[t] || y) / T;
+		C.push({
 			id: e,
-			name: m(e, n),
-			type: h(e, n),
-			state: T,
-			visible: g(e, n),
-			trigger: E,
-			phase: C?.phase,
-			actualDuration: C?.actualDuration ?? 0,
-			baseDuration: a.get(e) ?? C?.baseDuration ?? 0,
-			selfDuration: w,
-			depth: x,
-			parentId: t,
-			changedProps: C?.changedProps,
-			x: o,
-			width: b
+			parentId: void 0,
+			x: E,
+			width: n,
+			depth: 0,
+			ancestorRendered: !1
+		}), E += n;
+	}), C.reverse(); C.length > 0;) {
+		let e = C.pop();
+		if (e === void 0) break;
+		let { id: t, parentId: r, x: l, width: x, depth: S, ancestorRendered: w } = e, T = s.get(t), E = c.get(t) ?? 0, D = T ? E > b ? "rendered" : "bubbled" : "hatched", O = D === "rendered" && !w;
+		D === "rendered" && (m += E, v += 1), O && f.push(t), p = Math.max(p, S);
+		let k = o.get(t) ?? T?.elementId ?? t;
+		d.push({
+			id: t,
+			elementId: k,
+			name: h(k, n),
+			type: g(k, n),
+			state: D,
+			visible: _(k, n),
+			trigger: O,
+			phase: T?.phase,
+			actualDuration: T?.actualDuration ?? 0,
+			baseDuration: a.get(t) ?? T?.baseDuration ?? 0,
+			selfDuration: E,
+			depth: S,
+			parentId: r,
+			changedProps: T?.changedProps,
+			x: l,
+			width: x
 		});
-		let D = i.get(e) ?? [], O = D.map(c), k = O.reduce((e, t) => e + t, 0), A = Math.max(c(e), k) || 1, j = o;
-		D.forEach((t, n) => {
-			let r = (O[n] || v) / A * b;
-			_(t, e, j, r, x + 1, S || T === "rendered"), j += r;
+		let A = i.get(t) ?? [];
+		if (A.length === 0) continue;
+		let j = A.map(u), M = j.reduce((e, t) => e + t, 0), N = Math.max(u(t), M) || 1, P = l, F = [];
+		A.forEach((e, n) => {
+			let r = (j[n] || y) / N * x;
+			F.push({
+				id: e,
+				parentId: t,
+				x: P,
+				width: r,
+				depth: S + 1,
+				ancestorRendered: w || D === "rendered"
+			}), P += r;
 		});
-	}, x = o.map(c), S = x.reduce((e, t) => e + t, 0) || 1, C = 0;
-	return o.forEach((e, t) => {
-		let n = (x[t] || v) / S;
-		_(e, void 0, C, n, 0, !1), C += n;
-	}), {
-		nodes: l,
-		maxDepth: d,
-		totalSelf: f,
-		renderedCount: p,
-		triggers: u
+		for (let e = F.length - 1; e >= 0; --e) C.push(F[e]);
+	}
+	return {
+		nodes: d,
+		maxDepth: p,
+		totalSelf: m,
+		renderedCount: v,
+		triggers: f
 	};
-}, S = (e, t, n) => {
-	let r = /* @__PURE__ */ new Map();
-	for (let n of e) {
-		let { selfOf: e } = b(n, t);
-		for (let t of n.elements) {
-			let n = e(t.id);
-			if (n <= y) continue;
-			let i = r.get(t.id) ?? {
+}, w = (e, t, n) => {
+	let r = x(t), i = /* @__PURE__ */ new Map();
+	for (let t of e) {
+		let { self: e } = S(t, r);
+		for (let n of t.elements) {
+			let t = e.get(n.id) ?? 0;
+			if (t <= b) continue;
+			let a = r.elementOf.get(n.id) ?? n.elementId, o = i.get(a) ?? {
 				renders: 0,
 				mounts: 0,
 				totalSelf: 0,
 				maxSelf: 0,
 				lastSelf: 0
 			};
-			i.renders += 1, i.mounts += +(t.phase === "mount"), i.totalSelf += n, i.maxSelf = Math.max(i.maxSelf, n), i.lastSelf = n, r.set(t.id, i);
+			o.renders += 1, o.mounts += +(n.phase === "mount"), o.totalSelf += t, o.maxSelf = Math.max(o.maxSelf, t), o.lastSelf = t, i.set(a, o);
 		}
 	}
-	return [...r.entries()].map(([e, t]) => ({
+	return [...i.entries()].map(([e, t]) => ({
 		id: e,
-		name: m(e, n),
-		type: h(e, n),
+		name: h(e, n),
+		type: g(e, n),
 		renders: t.renders,
 		mounts: t.mounts,
 		totalSelf: t.totalSelf,
@@ -172,4 +194,4 @@ var t = (e) => {
 	}));
 };
 //#endregion
-export { u as BUBBLED_COLOR, i as COMMIT_ORIGIN_BADGE, r as COMMIT_ORIGIN_LABEL, a as COMMIT_ORIGIN_LEGEND, l as DURATION_LEGEND, d as HATCH_STYLE, x as buildFlameModel, S as buildHotspots, n as commitOrigin, c as durationColor, g as elementVisible, o as formatMs, s as formatPercent, f as frameColor, p as frameTextColor, _ as rowDuration };
+export { d as BUBBLED_COLOR, a as COMMIT_ORIGIN_BADGE, i as COMMIT_ORIGIN_LABEL, o as COMMIT_ORIGIN_LEGEND, u as DURATION_LEGEND, f as HATCH_STYLE, n as SSR_COMMIT_ID, C as buildFlameModel, w as buildHotspots, x as buildTreeIndex, r as commitOrigin, l as durationColor, _ as elementVisible, s as formatMs, c as formatPercent, p as frameColor, m as frameTextColor, v as rowDuration };

package/dist/components/List/List.mjs

@@ -21,7 +21,7 @@ var c = ({ items: c = [], className: l, value: u, onSelect: d }) => {
 			children: [!m.length && /* @__PURE__ */ a("div", {
 				className: "p-4 text-center text-zinc-400 dark:text-zinc-600",
 				children: "No items"
-			}), m.length && m.map((t, n) => /* @__PURE__ */ a(e, {
+			}), m.length > 0 && m.map((t, n) => /* @__PURE__ */ a(e, {
 				label: t.label,
 				name: t.name,
 				isSelected: h?.id === t.id,

package/dist/useHydrated.d.ts

@@ -0,0 +1,2 @@
+declare const useHydrated: () => boolean;
+export default useHydrated;

package/dist/useHydrated.mjs

@@ -0,0 +1,5 @@
+import { useSyncExternalStore as e } from "react";
+//#region src/useHydrated.ts
+var t = () => () => {}, n = () => e(t, () => !0, () => !1);
+//#endregion
+export { n as default };

package/dist/useRegisterRootStore.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Puts the store this container sits in — the app's root store — in the dev store registry.
+ *
+ * Nexus registers every provider itself in a dev build, but in a production build only the ones beneath a
+ * `DevStoreScopeContext`, and the container provides that context for what it wraps, never for the store above it.
+ * So a panel switched on in production listed every row and provider on the page and not the root, which is the store
+ * worth opening first. Registered untagged, so the panel labels it `root` and selects it by default. Nothing in dev:
+ * nexus already has it there, and a second registration of the same store would unregister both on unmount.
+ */
+declare const useRegisterRootStore: (enabled: boolean) => void;
+export default useRegisterRootStore;

package/dist/useRegisterRootStore.mjs

@@ -0,0 +1,13 @@
+import { useContext as e, useEffect as t } from "react";
+import { StoreContext as n } from "@plitzi/nexus/react";
+import { registerDevStore as r } from "@plitzi/nexus";
+import { isDev as i } from "@plitzi/nexus/env";
+//#region src/useRegisterRootStore.ts
+var a = (a) => {
+	let o = e(n);
+	t(() => {
+		if (a && !i && o) return r(o);
+	}, [a, o]);
+};
+//#endregion
+export { a as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-dev-tools",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -66,10 +66,26 @@
       "types": "./dist/components/DevToolsPanel/DevToolsSubHeader.d.ts",
       "import": "./dist/components/DevToolsPanel/DevToolsSubHeader.mjs"
     },
+    "./components/DevToolsPanel/ThemeControl": {
+      "types": "./dist/components/DevToolsPanel/ThemeControl.d.ts",
+      "import": "./dist/components/DevToolsPanel/ThemeControl.mjs"
+    },
     "./components/DevToolsPanel/index": {
       "types": "./dist/components/DevToolsPanel/index.d.ts",
       "import": "./dist/components/DevToolsPanel/index.mjs"
     },
+    "./components/DevToolsPanel/tabs/ActionsViewer": {
+      "types": "./dist/components/DevToolsPanel/tabs/ActionsViewer/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/ActionsViewer/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/ActionsViewer/ActionsViewer": {
+      "types": "./dist/components/DevToolsPanel/tabs/ActionsViewer/ActionsViewer.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/ActionsViewer/ActionsViewer.mjs"
+    },
+    "./components/DevToolsPanel/tabs/ActionsViewer/index": {
+      "types": "./dist/components/DevToolsPanel/tabs/ActionsViewer/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/ActionsViewer/index.mjs"
+    },
     "./components/DevToolsPanel/tabs/ElementsViewer": {
       "types": "./dist/components/DevToolsPanel/tabs/ElementsViewer/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/ElementsViewer/index.mjs"
@@ -182,6 +198,18 @@
       "types": "./dist/components/DevToolsPanel/tabs/Logs/LogsSummary/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/Logs/LogsSummary/index.mjs"
     },
+    "./components/DevToolsPanel/tabs/Logs/categories/LogAction": {
+      "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogAction/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogAction/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/Logs/categories/LogAction/LogAction": {
+      "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogAction/LogAction.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogAction/LogAction.mjs"
+    },
+    "./components/DevToolsPanel/tabs/Logs/categories/LogAction/index": {
+      "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogAction/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogAction/index.mjs"
+    },
     "./components/DevToolsPanel/tabs/Logs/categories/LogInteraction": {
       "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/index.mjs"
@@ -246,6 +274,10 @@
       "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionHeader.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionHeader.mjs"
     },
+    "./components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionNote": {
+      "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionNote.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionNote.mjs"
+    },
     "./components/DevToolsPanel/tabs/Logs/categories/LogInteraction/index": {
       "types": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/index.mjs"
@@ -519,6 +551,7 @@
       "import": "./dist/components/DevToolsPanel/tabs/TracingViewer/components/TracingToolbar/index.mjs"
     },
     "./components/DevToolsPanel/tabs/TracingViewer/helpers": {
+      "types": "./dist/components/DevToolsPanel/tabs/TracingViewer/helpers.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/TracingViewer/helpers.mjs"
     },
     "./components/DevToolsPanel/tabs/TracingViewer/index": {
@@ -600,6 +633,14 @@
     "./scope/useStoreState": {
       "types": "./dist/scope/useStoreState.d.ts",
       "import": "./dist/scope/useStoreState.mjs"
+    },
+    "./useHydrated": {
+      "types": "./dist/useHydrated.d.ts",
+      "import": "./dist/useHydrated.mjs"
+    },
+    "./useRegisterRootStore": {
+      "types": "./dist/useRegisterRootStore.d.ts",
+      "import": "./dist/useRegisterRootStore.mjs"
     }
   },
   "scripts": {
@@ -607,28 +648,33 @@
     "typecheck": "tsc -p tsconfig.app.json --noEmit",
     "build:dev": "vite build --mode development --minify false && node ../sdk-shared/scripts/generate-exports.mjs",
     "build:dev-watch": "vite build --mode development --watch --minify false",
-    "build:prod": "vite build && node ../sdk-shared/scripts/generate-exports.mjs"
+    "build:prod": "vite build && node ../sdk-shared/scripts/generate-exports.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "type": "module",
   "sideEffects": false,
   "devDependencies": {
+    "@testing-library/react": "^16.3.3",
     "eslint": "^9.39.5",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "jsdom": "^30.0.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "typescript": "^6.0.3",
-    "vite": "^8.2.1"
+    "vite": "^8.3.0",
+    "vitest": "^5.0.0"
   },
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19"
   },
   "dependencies": {
-    "@plitzi/nexus": "^1.1.0",
-    "@plitzi/plitzi-ui": "^1.6.19",
-    "@plitzi/sdk-navigation": "0.33.1",
-    "@plitzi/sdk-schema": "0.33.1",
-    "@plitzi/sdk-shared": "0.33.1",
-    "@plitzi/sdk-style": "0.33.1",
+    "@plitzi/nexus": "^1.1.4",
+    "@plitzi/plitzi-ui": "^1.6.21",
+    "@plitzi/sdk-navigation": "0.34.0",
+    "@plitzi/sdk-schema": "0.34.0",
+    "@plitzi/sdk-shared": "0.34.0",
+    "@plitzi/sdk-style": "0.34.0",
     "@uiw/react-json-view": "^2.0.0-alpha.43",
     "clsx": "^2.1.1"
   }