@plitzi/sdk-dev-tools 0.33.2 → 0.34.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @plitzi/sdk-dev-tools
 
+## 0.34.0
+
+### Minor Changes
+
+- v0.34.0
+
+### Patch Changes
+
+- Updated dependencies [5aceda0]
+- Updated dependencies
+- Updated dependencies [5aceda0]
+  - @plitzi/sdk-shared@0.34.0
+  - @plitzi/sdk-navigation@0.34.0
+  - @plitzi/sdk-schema@0.34.0
+  - @plitzi/sdk-style@0.34.0
+
 ## 0.33.2
 
 ### Patch Changes

package/dist/DevToolsContainer.mjs

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

package/dist/DevToolsContextProvider.mjs

@@ -17,7 +17,7 @@ var l = ({ children: l }) => {
 		...n,
 		[e]: t
 	})), []), _ = e((e) => p((t) => s(t, [e])), []), v = e((e, ...t) => {
-		if (!(!e || typeof f[e] != "function")) return f[e](...t);
+		if (e && typeof f[e] == "function") return f[e](...t);
 	}, [f]), y = e(() => d([]), []);
 	m.current ||= (c.setCallback(h), c.setCallbackAddProvider(g), c.setCallbackRemoveProvider(_), !0), t(() => (c.setCallback(h), c.setCallbackAddProvider(g), c.setCallbackRemoveProvider(_), c.processPendingLogs(), () => {
 		c.setCallback(void 0), c.setCallbackAddProvider(void 0), c.setCallbackRemoveProvider(void 0), c.flush();

package/dist/components/DevToolsIndicator/DevToolsIndicator.mjs

@@ -26,7 +26,7 @@ var s = ({ className: s, onOpen: c }) => {
 		c
 	]);
 	return /* @__PURE__ */ a("div", {
-		className: e("fixed bottom-3 left-3 z-[1000000]", s),
+		className: e("absolute 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",

package/dist/components/DevToolsPanel/DevToolsBody.mjs

@@ -1,40 +1,42 @@
-import e from "./tabs/ElementsViewer/index.mjs";
-import t from "./tabs/HistoryViewer/index.mjs";
-import n from "./tabs/Logs/index.mjs";
-import r from "./tabs/PluginsViewer/PluginsViewer.mjs";
-import i from "./tabs/StoreViewer/index.mjs";
-import a from "./tabs/TracingViewer/TracingViewer.mjs";
-import o from "./tabs/VariablesViewer/index.mjs";
-import s from "clsx";
-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";
+import e from "./tabs/ActionsViewer/index.mjs";
+import t from "./tabs/ElementsViewer/index.mjs";
+import n from "./tabs/HistoryViewer/index.mjs";
+import r from "./tabs/Logs/index.mjs";
+import i from "./tabs/PluginsViewer/PluginsViewer.mjs";
+import a from "./tabs/StoreViewer/index.mjs";
+import o from "./tabs/TracingViewer/TracingViewer.mjs";
+import s from "./tabs/VariablesViewer/index.mjs";
+import c from "clsx";
+import { use as l } from "react";
+import u from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/DevToolsBody.tsx
-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", {
+var p = ({ className: p, tabSelected: m, orientation: h, logTypeFilter: g, elementSelected: _, onSelectElement: v }) => {
+	let { logs: y, clearLogs: b } = l(u);
+	return /* @__PURE__ */ d("div", {
+		className: c("flex h-full w-full grow overflow-auto bg-white dark:bg-zinc-900", p),
+		children: /* @__PURE__ */ f("div", {
 			className: "flex w-full flex-col",
 			children: [
-				p === "logs" && /* @__PURE__ */ u(n, {
-					items: v,
-					orientation: m,
-					logTypeFilter: h,
-					onClear: y
+				m === "logs" && /* @__PURE__ */ d(r, {
+					items: y,
+					orientation: h,
+					logTypeFilter: g,
+					onClear: b
 				}),
-				p === "store" && /* @__PURE__ */ u(i, { elementSelected: g }),
-				p === "history" && /* @__PURE__ */ u(t, {}),
-				p === "variables" && /* @__PURE__ */ u(o, {}),
-				p === "elements" && /* @__PURE__ */ u(e, {
-					elementSelected: g,
-					onSelectElement: _
+				m === "store" && /* @__PURE__ */ d(a, { elementSelected: _ }),
+				m === "history" && /* @__PURE__ */ d(n, {}),
+				m === "variables" && /* @__PURE__ */ d(s, {}),
+				m === "elements" && /* @__PURE__ */ d(t, {
+					elementSelected: _,
+					onSelectElement: v
 				}),
-				p === "plugins" && /* @__PURE__ */ u(r, {}),
-				p === "tracing" && /* @__PURE__ */ u(a, {})
+				m === "plugins" && /* @__PURE__ */ d(i, {}),
+				m === "tracing" && /* @__PURE__ */ d(o, {}),
+				m === "actions" && /* @__PURE__ */ d(e, {})
 			]
 		})
 	});
 };
 //#endregion
-export { f as default };
+export { p as default };

package/dist/components/DevToolsPanel/DevToolsHeader.mjs

@@ -1,9 +1,11 @@
 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";
+import t from "./DevToolsButton.mjs";
+import n from "./ThemeControl.mjs";
+import r from "clsx";
+import { useCallback as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/DevToolsHeader.tsx
-var a = [
+var s = [
 	{
 		id: "logs",
 		label: "Logs",
@@ -38,57 +40,61 @@ var a = [
 		id: "tracing",
 		label: "Tracing",
 		icon: "fa-solid fa-gauge-high"
+	},
+	{
+		id: "actions",
+		label: "Actions",
+		icon: "fa-solid fa-bolt"
 	}
-], 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]), h = n((e) => () => u?.(e), [u]), g = n((e) => p(e.target.value), [p]);
-	return /* @__PURE__ */ i("div", {
+], c = ({ tabSelected: c, orientation: l = "vertical", onChangeOrientation: u, onCollapse: d, onTabSelect: f }) => {
+	let { options: p, value: m, onSelect: h } = e(), g = i(() => {
+		u?.(l === "horizontal" ? "vertical" : "horizontal");
+	}, [l, u]), _ = i((e) => () => f?.(e), [f]), v = i((e) => h(e.target.value), [h]);
+	return /* @__PURE__ */ o("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", {
+		children: [/* @__PURE__ */ a("div", {
 			className: "flex items-stretch overflow-x-auto",
-			children: a.map((e) => {
-				let n = o === e.id;
-				return /* @__PURE__ */ i("button", {
-					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
+			children: s.map((e) => {
+				let t = c === e.id;
+				return /* @__PURE__ */ o("button", {
+					onClick: _(e.id),
+					className: r("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": t,
+						"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": !t
 					}),
-					children: [/* @__PURE__ */ r("i", { className: t(e.icon, "text-[10px]") }), e.label]
+					children: [/* @__PURE__ */ a("i", { className: r(e.icon, "text-[10px]") }), e.label]
 				}, e.id);
 			})
-		}), /* @__PURE__ */ i("div", {
+		}), /* @__PURE__ */ o("div", {
 			className: "flex shrink-0 items-center gap-1 border-l border-zinc-200 px-2 dark:border-zinc-700",
 			children: [
-				d.length > 0 && /* @__PURE__ */ r("select", {
-					value: f ?? "",
-					onChange: g,
+				p.length > 0 && /* @__PURE__ */ a("select", {
+					value: m ?? "",
+					onChange: v,
 					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", {
+					children: p.map((e) => /* @__PURE__ */ a("optgroup", {
 						label: e.label,
-						children: e.options.map((e) => /* @__PURE__ */ r("option", {
+						children: e.options.map((e) => /* @__PURE__ */ a("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__ */ a(n, {}),
+				/* @__PURE__ */ a(t, {
+					iconClassName: r("fa-solid fa-table-columns", { "rotate-90": l === "vertical" }),
+					title: l === "horizontal" ? "Switch to side panel" : "Switch to bottom panel",
+					onClick: g
 				}),
-				/* @__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",
+				/* @__PURE__ */ a(t, {
+					iconClassName: "fa-solid fa-xmark",
 					title: "Collapse to the indicator",
-					onClick: l,
-					children: /* @__PURE__ */ r("i", { className: "fa-solid fa-xmark text-xs" })
+					onClick: d
 				})
 			]
 		})]
 	});
 };
 //#endregion
-export { o as default };
+export { c as default };

package/dist/components/DevToolsPanel/DevToolsPanel.mjs

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

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

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

package/dist/components/DevToolsPanel/ThemeControl.mjs

@@ -0,0 +1,27 @@
+import e from "./DevToolsButton.mjs";
+import { useCallback as t } from "react";
+import n from "@plitzi/sdk-shared/theme/useTheme";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/ThemeControl.tsx
+var i = {
+	system: "light",
+	light: "dark",
+	dark: "system"
+}, a = {
+	system: "fa-solid fa-desktop",
+	light: "fa-solid fa-sun",
+	dark: "fa-solid fa-moon"
+}, o = {
+	system: "System",
+	light: "Light",
+	dark: "Dark"
+}, s = () => {
+	let { theme: s, setTheme: c } = n(), l = t(() => c(i[s]), [s, c]);
+	return /* @__PURE__ */ r(e, {
+		iconClassName: a[s],
+		title: `Theme: ${o[s]} — click for ${o[i[s]]}`,
+		onClick: l
+	});
+};
+//#endregion
+export { s as default };

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

@@ -0,0 +1,3 @@
+/** Server action runs; `detached` and `stream` modes leave no other trace in the UI. */
+declare const ActionsViewer: () => import("react").JSX.Element;
+export default ActionsViewer;

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

@@ -0,0 +1,147 @@
+import e from "clsx";
+import { useCallback as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { cancelActionRun as a, useActionRuns as o, useCommonStore as s } from "@plitzi/sdk-shared/store";
+import c from "@plitzi/plitzi-ui/Button";
+//#region src/components/DevToolsPanel/tabs/ActionsViewer/ActionsViewer.tsx
+var l = {
+	running: "text-blue-600 dark:text-blue-400",
+	streaming: "text-blue-600 dark:text-blue-400",
+	accepted: "text-blue-600 dark:text-blue-400",
+	completed: "text-green-700 dark:text-green-400",
+	failed: "text-red-600 dark:text-red-400",
+	aborted: "text-amber-600 dark:text-amber-400",
+	skipped: "text-zinc-500"
+}, u = (e) => new Date(e).toLocaleTimeString(), d = (e) => e.endedAt ? `${e.endedAt - e.startedAt}ms` : "…", f = (e) => e.endedAt === void 0, p = () => {
+	let { runs: p, clear: m } = o(), [h] = s("actions.endpoint"), [g, _] = n(), v = p.filter(f), y = t((e) => () => _((t) => t === e ? void 0 : e), []), b = t((e) => () => a(e), []);
+	return /* @__PURE__ */ i("div", {
+		className: "flex h-full w-full flex-col overflow-auto",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex items-center justify-between border-b border-zinc-200 px-2 py-1 dark:border-zinc-700",
+				children: [/* @__PURE__ */ i("div", {
+					className: "flex items-center gap-2",
+					children: [v.length > 0 && /* @__PURE__ */ i("span", {
+						className: "flex items-center gap-1 text-blue-600 dark:text-blue-400",
+						children: [
+							/* @__PURE__ */ r("i", { className: "fa-solid fa-circle-notch fa-spin" }),
+							v.length,
+							" running"
+						]
+					}), /* @__PURE__ */ r("span", {
+						className: "text-xs text-zinc-500 dark:text-zinc-400",
+						children: h ? `Server actions run at ${h}` : "This page is served without a Plitzi server: every action step is inert"
+					})]
+				}), /* @__PURE__ */ r(c, {
+					size: "xs",
+					disabled: p.length === 0,
+					onClick: m,
+					children: "Clear"
+				})]
+			}),
+			p.length === 0 && /* @__PURE__ */ r("div", {
+				className: "p-3 text-xs text-zinc-500 dark:text-zinc-400",
+				children: "No server action has run on this page yet. A run appears the moment one is SENT — including the ones that never come back."
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "flex flex-col",
+				children: p.map((t) => /* @__PURE__ */ i("div", {
+					className: "border-b border-zinc-100 dark:border-zinc-800",
+					children: [/* @__PURE__ */ i("div", {
+						className: "flex w-full items-center gap-2 px-2 hover:bg-zinc-50 dark:hover:bg-zinc-800",
+						children: [/* @__PURE__ */ i("button", {
+							type: "button",
+							className: "flex grow items-center gap-2 py-1 text-left text-xs",
+							onClick: y(t.id),
+							children: [
+								/* @__PURE__ */ r("span", {
+									className: "text-zinc-400 dark:text-zinc-500",
+									children: u(t.startedAt)
+								}),
+								/* @__PURE__ */ r("span", {
+									className: "font-medium",
+									children: t.actionId || "(no action named)"
+								}),
+								/* @__PURE__ */ r("span", {
+									className: "rounded-sm bg-zinc-100 px-1 text-[10px] uppercase dark:bg-zinc-800",
+									children: t.mode
+								}),
+								/* @__PURE__ */ r("span", {
+									className: e("ml-auto", l[t.status] ?? ""),
+									children: t.reason ?? t.status
+								}),
+								/* @__PURE__ */ r("span", {
+									className: "text-zinc-400 dark:text-zinc-500",
+									children: d(t)
+								})
+							]
+						}), f(t) && t.cancellable && /* @__PURE__ */ r(c, {
+							size: "xs",
+							intent: "secondary",
+							onClick: b(t.id),
+							children: "Cancel"
+						})]
+					}), g === t.id && /* @__PURE__ */ i("div", {
+						className: "flex flex-col gap-2 bg-zinc-50 px-3 py-2 text-xs dark:bg-zinc-800/50",
+						children: [
+							t.runId && /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("span", {
+								className: "text-zinc-500 dark:text-zinc-400",
+								children: "Run id: "
+							}), /* @__PURE__ */ r("span", {
+								className: "font-mono",
+								children: t.runId
+							})] }),
+							t.error && /* @__PURE__ */ r("div", {
+								className: "break-words text-red-600 dark:text-red-400",
+								children: t.error
+							}),
+							/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("div", {
+								className: "text-zinc-500 dark:text-zinc-400",
+								children: "Input"
+							}), /* @__PURE__ */ r("pre", {
+								className: "overflow-auto whitespace-pre-wrap",
+								children: JSON.stringify(t.input ?? {}, null, 2)
+							})] }),
+							t.output && /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("div", {
+								className: "text-zinc-500 dark:text-zinc-400",
+								children: "Output"
+							}), /* @__PURE__ */ r("pre", {
+								className: "overflow-auto whitespace-pre-wrap",
+								children: JSON.stringify(t.output, null, 2)
+							})] }),
+							t.progress.length > 0 && /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ i("div", {
+								className: "text-zinc-500 dark:text-zinc-400",
+								children: [
+									"Progress (",
+									t.progress.length,
+									")"
+								]
+							}), /* @__PURE__ */ r("pre", {
+								className: "overflow-auto whitespace-pre-wrap",
+								children: JSON.stringify(t.progress, null, 2)
+							})] }),
+							t.trace && /* @__PURE__ */ i("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ r("div", {
+									className: "text-zinc-500 dark:text-zinc-400",
+									children: "Server steps"
+								}), t.trace.map((t, n) => {
+									let a = t.node, o = typeof t.status == "string" ? t.status : "";
+									return /* @__PURE__ */ i("div", {
+										className: "flex items-center justify-between rounded-sm border border-zinc-200 px-2 py-1 dark:border-zinc-700",
+										children: [/* @__PURE__ */ r("span", { children: a?.title ?? a?.action ?? "step" }), /* @__PURE__ */ r("span", {
+											className: e(l[o === "success" ? "completed" : "failed"]),
+											children: o
+										})]
+									}, `${String(a?.action)}-${n}`);
+								})]
+							})
+						]
+					})]
+				}, t.id))
+			})
+		]
+	});
+};
+//#endregion
+export { p as default };

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

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

package/dist/components/DevToolsPanel/tabs/ActionsViewer/index.mjs

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