@plitzi/sdk-dev-tools 0.33.2 → 0.34.0

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

@@ -4,32 +4,39 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { get as o } from "@plitzi/plitzi-ui/helpers";
 import s from "@plitzi/plitzi-ui/Input";
 //#region src/components/DevToolsPanel/tabs/ElementsViewer/ElementsList.tsx
-var c = ({ elements: c, elementSelected: l, onSelect: u }) => {
-	let [d, f] = r(""), p = n(() => (c ?? []).filter((e) => e.definition.label.toLowerCase().includes(d.toLowerCase())), [c, d]), m = t((e) => f(e), []);
+var c = 200, l = ({ elements: l, elementSelected: u, onSelect: d }) => {
+	let [f, p] = r(""), m = n(() => (l ?? []).filter((e) => e.definition.label.toLowerCase().includes(f.toLowerCase())), [l, f]), h = n(() => m.slice(0, c), [m]), g = m.length - h.length, _ = t((e) => p(e), []);
 	return /* @__PURE__ */ a("div", {
 		className: "flex h-full w-[280px] shrink-0 flex-col gap-2 border-r border-zinc-200 dark:border-zinc-700",
 		children: [/* @__PURE__ */ i("div", {
 			className: "px-2 pt-2",
 			children: /* @__PURE__ */ i(s, {
-				value: d,
-				onChange: m,
+				value: f,
+				onChange: _,
 				placeholder: "Search elements...",
 				size: "sm"
 			})
-		}), /* @__PURE__ */ i("div", {
+		}), /* @__PURE__ */ a("div", {
 			className: "flex flex-col overflow-y-auto text-xs text-zinc-700 dark:text-zinc-300",
-			children: p.length === 0 ? /* @__PURE__ */ i("div", {
-				className: "p-4 text-center text-zinc-400 dark:text-zinc-600",
-				children: "No elements"
-			}) : p.map((t, n) => /* @__PURE__ */ i(e, {
-				name: t.definition.label,
-				isSelected: l === t.id,
-				isVisible: o(t, "definition.initialState.visibility", !0),
-				id: t.id,
-				onSelect: u
-			}, n))
+			children: [
+				h.length === 0 && /* @__PURE__ */ i("div", {
+					className: "p-4 text-center text-zinc-400 dark:text-zinc-600",
+					children: "No elements"
+				}),
+				h.map((t) => /* @__PURE__ */ i(e, {
+					name: t.definition.label,
+					isSelected: u === t.id,
+					isVisible: o(t, "definition.initialState.visibility", !0),
+					id: t.id,
+					onSelect: d
+				}, t.id)),
+				g > 0 && /* @__PURE__ */ a("div", {
+					className: "p-3 text-center text-[11px] text-zinc-400 dark:text-zinc-600",
+					children: [g, " more — narrow the search to reach them"]
+				})
+			]
 		})]
 	});
 };
 //#endregion
-export { c as default };
+export { l as default };

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

@@ -2,11 +2,11 @@ import { matchesFilter as e } from "./helpers.mjs";
 import t from "./components/HistoryEntryItem/HistoryEntryItem.mjs";
 import n from "./components/HistoryToolbar/HistoryToolbar.mjs";
 import { useCallback as r, useMemo as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useStoreHistory as c } from "@plitzi/nexus/react";
+import { useStoreHistory as o } from "@plitzi/nexus/react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/HistoryViewer/HistoryViewer.tsx
 var l = () => {
-	let { entries: l, index: u, canUndo: d, canRedo: f, undo: p, redo: m, travelTo: h, clear: g } = c(), [_, v] = a(""), y = i(() => l.map((e, t) => ({
+	let { entries: l, index: u, canUndo: d, canRedo: f, undo: p, redo: m, travelTo: h, clear: g } = o(), [_, v] = a(""), y = i(() => l.map((e, t) => ({
 		entry: e,
 		originalIndex: t
 	})).filter(({ entry: t }) => e(t, _)).reverse(), [l, _]), b = r((e) => {
@@ -19,9 +19,9 @@ var l = () => {
 		u,
 		h
 	]);
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ c("div", {
 		className: "flex h-full w-full flex-col",
-		children: [/* @__PURE__ */ o(n, {
+		children: [/* @__PURE__ */ s(n, {
 			index: u,
 			total: l.length,
 			canUndo: d,
@@ -31,17 +31,17 @@ var l = () => {
 			onRedo: m,
 			onClear: g,
 			onFilterChange: v
-		}), /* @__PURE__ */ s("div", {
+		}), /* @__PURE__ */ c("div", {
 			tabIndex: 0,
 			onKeyDown: b,
 			className: "flex flex-1 flex-col overflow-y-auto outline-none",
-			children: [y.length === 0 && /* @__PURE__ */ s("div", {
+			children: [y.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__ */ o("i", { className: "fa-solid fa-clock-rotate-left text-3xl opacity-20" }), /* @__PURE__ */ o("span", {
+				children: [/* @__PURE__ */ s("i", { className: "fa-solid fa-clock-rotate-left text-3xl opacity-20" }), /* @__PURE__ */ s("span", {
 					className: "text-xs",
 					children: _ ? "No entries match the filter" : "No history yet"
 				})]
-			}), y.map(({ entry: e, originalIndex: n }) => /* @__PURE__ */ o(t, {
+			}), y.map(({ entry: e, originalIndex: n }) => /* @__PURE__ */ s(t, {
 				index: n,
 				path: e.path,
 				value: e.value,

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

@@ -1,30 +1,36 @@
-import e from "./categories/LogInteraction/index.mjs";
-import t from "./categories/LogNavigation/index.mjs";
-import n from "./categories/LogNetwork/index.mjs";
-import r from "./categories/LogStore/LogStore.mjs";
-import { memo as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-var c = i(({ category: i, message: c, time: l, params: u }) => /* @__PURE__ */ s(a, { children: [
-	i === "interactions" && /* @__PURE__ */ o(e, {
-		message: c,
-		params: u,
-		time: l
+import e from "./categories/LogAction/index.mjs";
+import t from "./categories/LogInteraction/index.mjs";
+import n from "./categories/LogNavigation/index.mjs";
+import r from "./categories/LogNetwork/index.mjs";
+import i from "./categories/LogStore/LogStore.mjs";
+import { memo as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+var l = a(({ category: a, message: l, time: u, params: d }) => /* @__PURE__ */ c(o, { children: [
+	a === "interactions" && /* @__PURE__ */ s(t, {
+		message: l,
+		params: d,
+		time: u
 	}),
-	i === "navigation" && /* @__PURE__ */ o(t, {
-		message: c,
-		params: u,
-		time: l
+	a === "navigation" && /* @__PURE__ */ s(n, {
+		message: l,
+		params: d,
+		time: u
 	}),
-	i === "store" && /* @__PURE__ */ o(r, {
-		message: c,
-		params: u,
-		time: l
+	a === "store" && /* @__PURE__ */ s(i, {
+		message: l,
+		params: d,
+		time: u
 	}),
-	i === "network" && /* @__PURE__ */ o(n, {
-		message: c,
-		params: u,
-		time: l
+	a === "network" && /* @__PURE__ */ s(r, {
+		message: l,
+		params: d,
+		time: u
+	}),
+	a === "actions" && /* @__PURE__ */ s(e, {
+		message: l,
+		params: d,
+		time: u
 	})
 ] }));
 //#endregion
-export { c as default };
+export { l as default };

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogAction/LogAction.d.ts

@@ -0,0 +1,11 @@
+import { LogAction as TLogAction } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type LogActionProps = {
+    className?: string;
+    time?: string;
+    message?: ReactNode;
+    params: TLogAction['params'];
+};
+/** Adds mode, server run id and refusal reason to the message line. */
+declare const LogAction: ({ className, time, message, params }: LogActionProps) => import("react").JSX.Element;
+export default LogAction;

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

@@ -0,0 +1,42 @@
+import e from "clsx";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogAction/LogAction.tsx
+var r = ({ className: r = "", time: i, message: a, params: o }) => {
+	let { actionId: s, mode: c, runId: l, status: u, reason: d, error: f } = o, p = !!(d ?? f);
+	return /* @__PURE__ */ n("div", {
+		className: e("flex flex-col border-b border-gray-100 px-2 py-1 dark:border-zinc-800", r),
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: "flex items-center gap-2",
+				children: [
+					i && /* @__PURE__ */ t("span", {
+						className: "text-gray-400",
+						children: i
+					}),
+					/* @__PURE__ */ t("span", {
+						className: "grow",
+						children: a ?? s
+					}),
+					c && /* @__PURE__ */ t("span", {
+						className: "rounded-sm bg-gray-100 px-1 text-[10px] uppercase dark:bg-zinc-800",
+						children: c
+					}),
+					/* @__PURE__ */ t("span", {
+						className: e(p ? "text-red-600 dark:text-red-400" : "text-gray-500 dark:text-zinc-400"),
+						children: d ?? u ?? ""
+					})
+				]
+			}),
+			l && /* @__PURE__ */ n("span", {
+				className: "font-mono text-[10px] text-gray-400",
+				children: ["run ", l]
+			}),
+			f && /* @__PURE__ */ t("span", {
+				className: "break-words text-red-600 dark:text-red-400",
+				children: f
+			})
+		]
+	});
+};
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogAction/index.d.ts

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

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogAction/index.mjs

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

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/BodyContent.d.ts

@@ -1,8 +1,8 @@
-import { LogInteraction } from '@plitzi/sdk-shared';
+import { InteractionFlowParams } from '@plitzi/sdk-shared';
 export type BodyContentProps = {
     className?: string;
-    node: LogInteraction['params']['node'];
-    nodes: LogInteraction['params']['nodes'];
+    node: InteractionFlowParams['node'];
+    nodes: InteractionFlowParams['nodes'];
 };
 declare const BodyContent: ({ className, node, nodes }: BodyContentProps) => import("react").JSX.Element;
 export default BodyContent;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/BodyHeader.d.ts

@@ -6,7 +6,7 @@ export type BodyHeaderProps = {
     endTime: number;
     duration?: string;
     elementId?: string;
-    elementRef?: string;
+    hostElementId?: string;
 };
-declare const BodyHeader: ({ triggerName, startTime, endTime, duration, elementId, elementRef }: BodyHeaderProps) => import("react").JSX.Element;
+declare const BodyHeader: ({ triggerName, startTime, endTime, duration, elementId, hostElementId }: BodyHeaderProps) => import("react").JSX.Element;
 export default BodyHeader;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/BodyHeader.mjs

@@ -4,7 +4,7 @@ import { useCommonStore as i } from "@plitzi/sdk-shared/store";
 import { get as a } from "@plitzi/plitzi-ui/helpers";
 import { formatDate as o } from "@plitzi/sdk-shared/helpers";
 //#region src/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/BodyHeader.tsx
-var s = ({ triggerName: s, startTime: c, endTime: l, duration: u, elementId: d, elementRef: f }) => {
+var s = ({ triggerName: s, startTime: c, endTime: l, duration: u, elementId: d, hostElementId: f }) => {
 	let [p] = i("schema.flat"), m = t(() => d ? a(p, d) : void 0, [d, p]), h = t(() => o(c, "HH:mm:ss.SSS"), [c]), g = t(() => o(l, "HH:mm:ss.SSS"), [l]), _ = t(() => {
 		if (!(typeof document > "u")) return document.querySelector(`[data-id="${d}"]`);
 	}, [d]), v = e(() => {

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/ExecutionTree/ExecutionTree.d.ts

@@ -1,5 +1,5 @@
-import { LogInteraction } from '@plitzi/sdk-shared';
-type Nodes = LogInteraction['params']['nodes'];
+import { InteractionFlowParams } from '@plitzi/sdk-shared';
+type Nodes = InteractionFlowParams['nodes'];
 export type ExecutionTreeProps = {
     className?: string;
     nodeId: string;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteraction.d.ts

@@ -1,10 +1,15 @@
-import { LogInteraction as TLogInteraction } from '@plitzi/sdk-shared';
+import { InteractionFlowParams, LogInteraction as TLogInteraction } from '@plitzi/sdk-shared';
 import { ReactNode } from 'react';
+export type LogInteractionFlowProps = {
+    message?: ReactNode;
+    params: InteractionFlowParams;
+    time?: string;
+};
 export type LogInteractionProps = {
     className?: string;
     message?: ReactNode;
     params: TLogInteraction['params'];
     time?: string;
 };
-declare const LogInteraction: ({ time, message, params: { elementId, elementRef, status, node, nodes, startTime, endTime } }: LogInteractionProps) => import("react").JSX.Element;
+declare const LogInteraction: ({ time, message, params }: LogInteractionProps) => import("react").JSX.Element;
 export default LogInteraction;

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

@@ -1,45 +1,54 @@
 import e from "./LogInteractionBody.mjs";
 import t from "./LogInteractionHeader.mjs";
-import n from "../../LogStatusIcon.mjs";
-import r from "clsx";
-import { useMemo as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "@plitzi/plitzi-ui/ContainerCollapsable";
-import { getDurationMs as c } from "@plitzi/sdk-shared";
+import n from "./LogInteractionNote.mjs";
+import r from "../../LogStatusIcon.mjs";
+import i from "clsx";
+import { useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@plitzi/plitzi-ui/ContainerCollapsable";
+import { getDurationMs as l } from "@plitzi/sdk-shared";
+import { isInteractionFlow as u } from "@plitzi/sdk-shared/devTools";
 //#region src/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteraction.tsx
-var l = /* @__PURE__ */ a("i", { className: "fa-solid fa-angle-right text-[10px]" }), u = /* @__PURE__ */ a("i", { className: "fa-solid fa-angle-down text-[10px]" }), d = ({ time: d, message: f, params: { elementId: p, elementRef: m, status: h, node: g, nodes: _, startTime: v = 0, endTime: y = 0 } }) => {
-	let b = i(() => `${c(v, y)}ms`, [v, y]), x = Object.values(_).filter((e) => e.status === "failed").length, S = Object.values(_).filter((e) => e.status === "skipped").length, C = Object.values(_).filter((e) => e.status === "disabled").length;
-	return /* @__PURE__ */ o(s, {
-		className: r("last:border-b-none w-full border-b border-l-2 border-b-zinc-200 px-2 py-1 transition-colors hover:bg-zinc-50 dark:border-b-zinc-700 dark:hover:bg-zinc-800/50", {
+var d = /* @__PURE__ */ o("i", { className: "fa-solid fa-angle-right text-[10px]" }), f = /* @__PURE__ */ o("i", { className: "fa-solid fa-angle-down text-[10px]" }), p = ({ time: n, message: u, params: { elementId: p, hostElementId: m, status: h, node: g, nodes: _, startTime: v = 0, endTime: y = 0 } }) => {
+	let b = a(() => `${l(v, y)}ms`, [v, y]), { failed: x, skipped: S, disabled: C } = a(() => {
+		let e = Object.values(_).map(({ status: e }) => e);
+		return {
+			failed: e.filter((e) => e === "failed").length,
+			skipped: e.filter((e) => e === "skipped").length,
+			disabled: e.filter((e) => e === "disabled").length
+		};
+	}, [_]);
+	return /* @__PURE__ */ s(c, {
+		className: i("last:border-b-none w-full border-b border-l-2 border-b-zinc-200 px-2 py-1 transition-colors hover:bg-zinc-50 dark:border-b-zinc-700 dark:hover:bg-zinc-800/50", {
 			"border-l-emerald-500": h === "completed",
 			"border-l-red-500": h === "failed",
 			"border-l-zinc-300 dark:border-l-zinc-600": h === "skipped"
 		}),
 		collapsed: !0,
-		children: [/* @__PURE__ */ a(s.Header, {
-			title: /* @__PURE__ */ a(t, {
+		children: [/* @__PURE__ */ o(c.Header, {
+			title: /* @__PURE__ */ o(t, {
 				status: h,
-				message: f,
-				time: d
+				message: u,
+				time: n
 			}),
 			placement: "left",
 			className: { headerTitle: "overflow-hidden" },
-			iconCollapsed: l,
-			iconExpanded: u,
-			children: /* @__PURE__ */ o("div", {
+			iconCollapsed: d,
+			iconExpanded: f,
+			children: /* @__PURE__ */ s("div", {
 				className: "flex gap-3 text-zinc-400 dark:text-zinc-500",
 				children: [
-					!!x && /* @__PURE__ */ a(n, {
+					!!x && /* @__PURE__ */ o(r, {
 						logType: "danger",
 						title: "Failed",
 						children: x
 					}),
-					h !== "skipped" && !!S && /* @__PURE__ */ a(n, {
+					h !== "skipped" && !!S && /* @__PURE__ */ o(r, {
 						logType: "warning",
 						title: "Skipped",
 						children: S
 					}),
-					h !== "skipped" && !!C && /* @__PURE__ */ a(n, {
+					h !== "skipped" && !!C && /* @__PURE__ */ o(r, {
 						logType: "custom",
 						iconClassName: "fa-solid fa-ban",
 						title: "Disabled",
@@ -48,9 +57,9 @@ var l = /* @__PURE__ */ a("i", { className: "fa-solid fa-angle-right text-[10px]
 					b
 				]
 			})
-		}), /* @__PURE__ */ a(s.Content, { children: /* @__PURE__ */ a(e, {
+		}), /* @__PURE__ */ o(c.Content, { children: /* @__PURE__ */ o(e, {
 			elementId: p,
-			elementRef: m,
+			hostElementId: m,
 			node: g,
 			nodes: _,
 			startTime: v,
@@ -58,6 +67,14 @@ var l = /* @__PURE__ */ a("i", { className: "fa-solid fa-angle-right text-[10px]
 			duration: b
 		}) })]
 	});
-};
+}, m = ({ time: e, message: t, params: r }) => u(r) ? /* @__PURE__ */ o(p, {
+	time: e,
+	message: t,
+	params: r
+}) : /* @__PURE__ */ o(n, {
+	time: e,
+	message: t,
+	params: r
+});
 //#endregion
-export { d as default };
+export { m as default };

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionBody.d.ts

@@ -1,13 +1,13 @@
-import { LogInteraction } from '@plitzi/sdk-shared';
+import { InteractionFlowParams } from '@plitzi/sdk-shared';
 export type LogInteractionBodyProps = {
     className?: string;
-    node: LogInteraction['params']['node'];
-    nodes: LogInteraction['params']['nodes'];
+    node: InteractionFlowParams['node'];
+    nodes: InteractionFlowParams['nodes'];
     startTime: number;
     endTime: number;
     duration?: string;
     elementId?: string;
-    elementRef?: string;
+    hostElementId?: string;
 };
-declare const LogInteractionBody: ({ node, nodes, startTime, endTime, duration, elementId, elementRef }: LogInteractionBodyProps) => import("react").JSX.Element;
+declare const LogInteractionBody: ({ node, nodes, startTime, endTime, duration, elementId, hostElementId }: LogInteractionBodyProps) => import("react").JSX.Element;
 export default LogInteractionBody;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionBody.mjs

@@ -2,7 +2,7 @@ import e from "./BodyContent.mjs";
 import t from "./BodyHeader.mjs";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionBody.tsx
-var i = ({ node: i, nodes: a, startTime: o, endTime: s, duration: c, elementId: l, elementRef: u }) => /* @__PURE__ */ r("div", {
+var i = ({ node: i, nodes: a, startTime: o, endTime: s, duration: c, elementId: l, hostElementId: u }) => /* @__PURE__ */ r("div", {
 	className: "mx-2 my-1.5 flex flex-col gap-2 overflow-hidden rounded border border-zinc-200 text-xs dark:border-zinc-800",
 	children: [/* @__PURE__ */ n("div", {
 		className: "bg-zinc-50 px-3 py-2 dark:bg-zinc-800/60",
@@ -12,7 +12,7 @@ var i = ({ node: i, nodes: a, startTime: o, endTime: s, duration: c, elementId:
 			endTime: s,
 			duration: c,
 			elementId: l,
-			elementRef: u
+			hostElementId: u
 		})
 	}), /* @__PURE__ */ n("div", {
 		className: "border-t border-zinc-200 dark:border-zinc-800",

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionNote.d.ts

@@ -0,0 +1,17 @@
+import { InteractionNoteParams } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type LogInteractionNoteProps = {
+    message?: ReactNode;
+    params: InteractionNoteParams;
+    time?: string;
+};
+/**
+ * Something a single step reported, on its way through a flow.
+ *
+ * A step wired to a name nobody registered, a token that would not resolve, a step that threw. None of these has
+ * the flow's summary — the flow has not finished — so none of them can be drawn as one. What they do have is the
+ * step itself and, usually, the one fact that explains it: what was thrown, or what names WERE registered where
+ * this one looked.
+ */
+declare const LogInteractionNote: ({ time, message, params }: LogInteractionNoteProps) => import("react").JSX.Element;
+export default LogInteractionNote;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionNote.mjs

@@ -0,0 +1,72 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import n from "@plitzi/plitzi-ui/ContainerCollapsable";
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/LogInteractionNote.tsx
+var r = /* @__PURE__ */ e("i", { className: "fa-solid fa-angle-right text-[10px]" }), i = /* @__PURE__ */ e("i", { className: "fa-solid fa-angle-down text-[10px]" }), a = (e) => typeof e == "string" ? e : JSON.stringify(e), o = ({ label: n, children: r }) => /* @__PURE__ */ t("div", {
+	className: "flex gap-2",
+	children: [/* @__PURE__ */ e("span", {
+		className: "w-24 shrink-0 text-zinc-400 dark:text-zinc-500",
+		children: n
+	}), /* @__PURE__ */ e("span", {
+		className: "min-w-0 grow break-words text-zinc-700 dark:text-zinc-300",
+		children: r
+	})]
+}), s = ({ time: s, message: c, params: l }) => {
+	let { node: u, error: d, available: f, param: p, value: m } = l;
+	return /* @__PURE__ */ t(n, {
+		className: "last:border-b-none w-full border-b border-l-2 border-b-zinc-200 border-l-amber-500 px-2 py-1 transition-colors hover:bg-zinc-50 dark:border-b-zinc-700 dark:hover:bg-zinc-800/50",
+		collapsed: !0,
+		children: [/* @__PURE__ */ e(n.Header, {
+			title: /* @__PURE__ */ t("div", {
+				className: "flex w-full items-center gap-2 overflow-hidden",
+				children: [/* @__PURE__ */ e("span", {
+					className: "shrink-0 font-mono text-zinc-400 tabular-nums dark:text-zinc-500",
+					children: s
+				}), /* @__PURE__ */ e("div", {
+					className: "grow basis-0 truncate text-zinc-700 dark:text-zinc-300",
+					children: c
+				})]
+			}),
+			placement: "left",
+			className: {
+				headerTitle: "overflow-hidden",
+				header: "hover:bg-transparent dark:hover:bg-transparent"
+			},
+			iconCollapsed: r,
+			iconExpanded: i
+		}), /* @__PURE__ */ e(n.Content, { children: /* @__PURE__ */ t("div", {
+			className: "mx-2 my-1.5 flex flex-col gap-1 rounded border border-zinc-200 px-3 py-2 text-xs dark:border-zinc-800",
+			children: [
+				u?.title && /* @__PURE__ */ e(o, {
+					label: "Step",
+					children: u.title
+				}),
+				u?.action && /* @__PURE__ */ e(o, {
+					label: "Action",
+					children: u.action
+				}),
+				u?.elementId && /* @__PURE__ */ e(o, {
+					label: "Element",
+					children: u.elementId
+				}),
+				p && /* @__PURE__ */ e(o, {
+					label: "Param",
+					children: p
+				}),
+				m !== void 0 && /* @__PURE__ */ e(o, {
+					label: "Value",
+					children: a(m)
+				}),
+				d && /* @__PURE__ */ e(o, {
+					label: "Error",
+					children: d
+				}),
+				f && /* @__PURE__ */ e(o, {
+					label: "Registered",
+					children: f.length > 0 ? f.join(", ") : "nothing on that element"
+				})
+			]
+		}) })]
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/DevToolsPanel/tabs/PluginsViewer/PluginDetails.d.ts

@@ -1,8 +1,15 @@
-export type PluginDetailsProps = {
-    label?: string;
+import { ComponentOrigin } from '@plitzi/sdk-shared';
+/** One element this page has that the SDK did not bring, however it got here. */
+export type PluginEntry = {
+    type: string;
+    origin: Exclude<ComponentOrigin, 'local'>;
+    /** Absent for a plugin nobody published: a file a deployment ships has no manifest to read a version off. */
     version?: string;
     author?: string;
     settings?: Record<string, unknown>;
 };
-declare const PluginDetails: ({ author, settings, label, version }: PluginDetailsProps) => import("react").JSX.Element;
+export type PluginDetailsProps = {
+    entry: PluginEntry;
+};
+declare const PluginDetails: ({ entry }: PluginDetailsProps) => import("react").JSX.Element;
 export default PluginDetails;

package/dist/components/DevToolsPanel/tabs/PluginsViewer/PluginDetails.mjs

@@ -2,8 +2,17 @@ import { useMemo as e } from "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import r from "@plitzi/sdk-shared/helpers/syntaxHighlight";
 //#region src/components/DevToolsPanel/tabs/PluginsViewer/PluginDetails.tsx
-var i = ({ author: i, settings: a, label: o, version: s }) => {
-	let c = e(() => !a || Object.keys(a).length === 0 ? null : r(JSON.stringify(a, null, 2)), [a]);
+var i = {
+	"local-custom": {
+		label: "Shipped with this space",
+		hint: "A file this deployment hands the server, compiled and rendered with everything else."
+	},
+	remote: {
+		label: "Installed",
+		hint: "A published bundle, described by the manifest it was published with."
+	}
+}, a = ({ entry: a }) => {
+	let { type: o, origin: s, version: c, author: l, settings: u } = a, d = e(() => !u || Object.keys(u).length === 0 ? null : r(JSON.stringify(u, null, 2)), [u]);
 	return /* @__PURE__ */ n("div", {
 		className: "flex h-full grow basis-0 flex-col overflow-y-auto p-4",
 		children: [/* @__PURE__ */ n("div", {
@@ -13,11 +22,21 @@ var i = ({ author: i, settings: a, label: o, version: s }) => {
 				children: o
 			}), /* @__PURE__ */ t("div", {
 				className: "text-xs text-zinc-400 dark:text-zinc-500",
-				children: "Plugin"
+				children: i[s].label
 			})]
 		}), /* @__PURE__ */ n("div", {
 			className: "flex flex-col gap-3",
 			children: [
+				/* @__PURE__ */ n("div", {
+					className: "flex flex-col gap-0.5",
+					children: [/* @__PURE__ */ t("span", {
+						className: "text-xs font-medium tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+						children: "Where it comes from"
+					}), /* @__PURE__ */ t("span", {
+						className: "text-xs text-zinc-800 dark:text-zinc-200",
+						children: i[s].hint
+					})]
+				}),
 				/* @__PURE__ */ n("div", {
 					className: "flex flex-col gap-0.5",
 					children: [/* @__PURE__ */ t("span", {
@@ -25,7 +44,7 @@ var i = ({ author: i, settings: a, label: o, version: s }) => {
 						children: "Version"
 					}), /* @__PURE__ */ t("span", {
 						className: "font-mono text-xs text-zinc-800 dark:text-zinc-200",
-						children: s ?? "—"
+						children: c ?? "—"
 					})]
 				}),
 				/* @__PURE__ */ n("div", {
@@ -35,7 +54,7 @@ var i = ({ author: i, settings: a, label: o, version: s }) => {
 						children: "Author"
 					}), /* @__PURE__ */ t("span", {
 						className: "text-xs text-zinc-800 dark:text-zinc-200",
-						children: i ?? "—"
+						children: l ?? "—"
 					})]
 				}),
 				/* @__PURE__ */ n("div", {
@@ -43,9 +62,9 @@ var i = ({ author: i, settings: a, label: o, version: s }) => {
 					children: [/* @__PURE__ */ t("span", {
 						className: "text-xs font-medium tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
 						children: "Settings"
-					}), c ? /* @__PURE__ */ t("pre", {
+					}), d ? /* @__PURE__ */ t("pre", {
 						className: "overflow-auto rounded bg-zinc-50 p-2 font-mono text-xs leading-5 dark:bg-zinc-800",
-						dangerouslySetInnerHTML: { __html: c }
+						dangerouslySetInnerHTML: { __html: d }
 					}) : /* @__PURE__ */ t("span", {
 						className: "text-xs text-zinc-400 italic dark:text-zinc-500",
 						children: "No settings"
@@ -56,4 +75,4 @@ var i = ({ author: i, settings: a, label: o, version: s }) => {
 	});
 };
 //#endregion
-export { i as default };
+export { a as default };

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

@@ -1,5 +1,6 @@
 export type PluginsViewerProps = {
     className?: string;
 };
+/** Plugins from both registers: installed bundles (PluginsContext) and space-shipped ones (component registry). */
 declare const PluginsViewer: ({ className }: PluginsViewerProps) => import("react").JSX.Element;
 export default PluginsViewer;