@plitzi/sdk-dev-tools 0.30.19

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

@@ -0,0 +1,24 @@
+import e from "clsx";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/ElementsListItem.tsx
+var i = ({ name: i, id: a, isSelected: o, isVisible: s = !0, onSelect: c }) => {
+	let l = t(() => c?.(a), [c, a]);
+	return /* @__PURE__ */ r("div", {
+		className: e("flex w-full cursor-pointer items-center justify-between gap-2 border-l-2 px-2 py-1.5 transition-colors", {
+			"border-l-violet-500 bg-violet-50 text-violet-700 dark:border-l-violet-500 dark:bg-violet-500/15 dark:text-violet-300": o,
+			"border-l-transparent text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:border-l-transparent dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-100": !o
+		}),
+		onClick: l,
+		children: [/* @__PURE__ */ n("div", {
+			className: "truncate",
+			title: i,
+			children: i
+		}), /* @__PURE__ */ n("i", { className: e("shrink-0 text-[10px]", {
+			"fa-solid fa-eye text-zinc-400 dark:text-zinc-500": s,
+			"fa-solid fa-eye-slash text-zinc-300 dark:text-zinc-700": !s
+		}) })]
+	});
+};
+//#endregion
+export { i as default };

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

@@ -0,0 +1,7 @@
+export type ElementsViewerProps = {
+    className?: string;
+    elementSelected?: string;
+    onSelectElement: (id?: string) => void;
+};
+declare const ElementsViewer: ({ className, elementSelected, onSelectElement }: ElementsViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default ElementsViewer;

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

@@ -0,0 +1,25 @@
+import e from "./ElementDetails.mjs";
+import t from "./ElementsList.mjs";
+import n from "clsx";
+import { use as r, useCallback as i, useMemo as a } from "react";
+import o from "@plitzi/sdk-navigation/NavigationContext";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createStoreHook as l } from "@plitzi/sdk-store/createStore";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/ElementsViewer.tsx
+var u = ({ className: u, elementSelected: d, onSelectElement: f }) => {
+	let { currentPageId: p } = r(o), { useStore: m } = l(), [h] = m("schema.flat"), g = a(() => Object.values(h).filter((e) => e.definition.rootId === p), [h, p]), _ = a(() => g.find((e) => e.id === d), [g, d]), v = i((e) => f(e), [f]);
+	return /* @__PURE__ */ c("div", {
+		className: n("flex h-full w-full", u),
+		children: [/* @__PURE__ */ s(t, {
+			elements: g,
+			elementSelected: d,
+			onSelect: v
+		}), d && /* @__PURE__ */ s(e, {
+			definition: _?.definition,
+			attributes: _?.attributes,
+			onSelectElement: f
+		})]
+	});
+};
+//#endregion
+export { u as default };

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

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

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

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

package/dist/components/DevToolsPanel/tabs/Logs/Log.d.ts

@@ -0,0 +1,11 @@
+import { LogParams } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type LogProps = {
+    className?: string;
+    category: string;
+    time?: string;
+    message?: ReactNode;
+    params: LogParams;
+};
+declare const _default: import('react').MemoExoticComponent<({ category, message, time, params }: LogProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

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

package/dist/components/DevToolsPanel/tabs/Logs/LogStatus.d.ts

@@ -0,0 +1,10 @@
+import { LogType } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type LogStatusProps = {
+    children?: ReactNode;
+    iconClassName?: string;
+    className?: string;
+    logType: LogType | 'custom';
+};
+declare const LogStatus: ({ className, logType, iconClassName, children }: LogStatusProps) => import("react/jsx-runtime").JSX.Element;
+export default LogStatus;

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

@@ -0,0 +1,30 @@
+import e from "clsx";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/Logs/LogStatus.tsx
+var r = {
+	danger: "fa-regular fa-circle-xmark",
+	warning: "fa-solid fa-triangle-exclamation",
+	info: "fa-solid fa-circle-info",
+	success: "fa-solid fa-check"
+}, i = {
+	danger: "Error",
+	warning: "Warning",
+	info: "Info",
+	success: "Success"
+}, a = ({ className: a, logType: o = "info", iconClassName: s, children: c }) => /* @__PURE__ */ n("div", {
+	className: e("flex items-center gap-1 rounded px-1.5 py-0.5 font-medium", {
+		"bg-red-50 text-red-600 dark:bg-red-500/15 dark:text-red-400": o === "danger",
+		"bg-amber-50 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400": o === "warning",
+		"bg-violet-50 text-violet-700 dark:bg-violet-500/15 dark:text-violet-400": o === "info",
+		"bg-emerald-50 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400": o === "success",
+		"bg-zinc-100 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300": ![
+			"danger",
+			"warning",
+			"info",
+			"success"
+		].includes(o)
+	}, a),
+	children: [/* @__PURE__ */ t("i", { className: e(s ?? r[o], "text-[10px]") }), c ?? i[o]]
+});
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/Logs/LogStatusIcon.d.ts

@@ -0,0 +1,11 @@
+import { LogType } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type LogStatusIconProps = {
+    children?: ReactNode;
+    className?: string;
+    iconClassName?: string;
+    logType: LogType | 'custom';
+    title?: string;
+};
+declare const LogStatusIcon: ({ className, logType, iconClassName, title, children }: LogStatusIconProps) => import("react/jsx-runtime").JSX.Element;
+export default LogStatusIcon;

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

@@ -0,0 +1,24 @@
+import e from "clsx";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/Logs/LogStatusIcon.tsx
+var r = ({ className: r, logType: i = "info", iconClassName: a, title: o, children: s }) => {
+	let c = i === "danger" ? "fa-regular fa-circle-xmark" : i === "warning" ? "fa-solid fa-triangle-exclamation" : i === "info" ? "fa-solid fa-circle-info" : i === "success" ? "fa-solid fa-check" : "fa-solid fa-circle";
+	return /* @__PURE__ */ n("div", {
+		className: e("flex items-center gap-1", r),
+		title: o,
+		children: [/* @__PURE__ */ t("i", { className: e(a ?? c, {
+			"text-red-500 dark:text-red-400": i === "danger",
+			"text-amber-500 dark:text-amber-400": i === "warning",
+			"text-violet-500 dark:text-violet-400": i === "info",
+			"text-emerald-500 dark:text-emerald-400": i === "success",
+			"text-zinc-500 dark:text-zinc-400": ![
+				"danger",
+				"warning",
+				"info",
+				"success"
+			].includes(i)
+		}, "text-xs") }), s]
+	});
+};
+//#endregion
+export { r as default };

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

@@ -0,0 +1,10 @@
+import { Orientation } from '../../../../DevToolsContainer';
+import { Log as TLog } from '@plitzi/sdk-shared';
+export type LogsProps = {
+    items: TLog[];
+    autoScrollOffset?: number;
+    orientation: Orientation;
+    onClear?: () => void;
+};
+declare const Logs: ({ items, autoScrollOffset, orientation, onClear }: LogsProps) => import("react/jsx-runtime").JSX.Element;
+export default Logs;

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

@@ -0,0 +1,61 @@
+import e from "./Log.mjs";
+import t from "./LogsSummary/index.mjs";
+import n from "clsx";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/Logs/Logs.tsx
+var l = ({ items: l = [], autoScrollOffset: u = 40, orientation: d = "horizontal", onClear: f }) => {
+	let [p, m] = o(), h = a(null), g = a(!0);
+	i(() => {
+		let e = h.current;
+		e && g.current && (e.scrollTop = e.scrollHeight);
+	}, [l]);
+	let _ = r(() => {
+		let e = h.current;
+		e && (g.current = e.scrollHeight - e.scrollTop - e.clientHeight <= u);
+	}, [u]), v = r((e) => {
+		m(e);
+	}, []);
+	return /* @__PURE__ */ c("div", {
+		className: "flex h-full w-full flex-col",
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex shrink-0 items-center justify-between border-b border-zinc-200 bg-zinc-50 px-2 py-1 dark:border-zinc-700 dark:bg-zinc-800",
+			children: [/* @__PURE__ */ c("span", {
+				className: "font-mono text-zinc-400 dark:text-zinc-500",
+				children: [
+					l.length,
+					" ",
+					l.length === 1 ? "entry" : "entries"
+				]
+			}), /* @__PURE__ */ c("button", {
+				className: "rounded px-2 py-0.5 text-xs text-zinc-500 transition-colors hover:bg-zinc-200 hover:text-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200",
+				onClick: f,
+				children: [/* @__PURE__ */ s("i", { className: "fa-solid fa-trash-can mr-1" }), "Clear"]
+			})]
+		}), /* @__PURE__ */ c("div", {
+			className: n("flex h-full w-full overflow-hidden", { "grow basis-0 flex-col": d === "vertical" }),
+			children: [/* @__PURE__ */ s(t, {
+				className: n({ "h-full": d === "horizontal" }),
+				logTypeSelected: p,
+				items: l,
+				orientation: d,
+				onClick: v
+			}), /* @__PURE__ */ s("div", {
+				ref: h,
+				onScroll: _,
+				className: "flex grow basis-0 flex-col overflow-y-auto",
+				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, {
+					category: t.category,
+					time: t.time,
+					params: t.params,
+					message: t.message
+				}, n))
+			})]
+		})]
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/DevToolsPanel/tabs/Logs/LogsSummary/LogsSummary.d.ts

@@ -0,0 +1,11 @@
+import { Orientation } from '../../../../../DevToolsContainer';
+import { Log, LogType } from '@plitzi/sdk-shared';
+export type LogsSummaryProps = {
+    className?: string;
+    items: Log[];
+    logTypeSelected?: LogType;
+    orientation: Orientation;
+    onClick?: (logType?: LogType) => void;
+};
+declare const LogsSummary: ({ className, orientation, items, logTypeSelected, onClick }: LogsSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export default LogsSummary;

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

@@ -0,0 +1,47 @@
+import e from "./LogsSummaryItem.mjs";
+import t from "clsx";
+import { useCallback as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/Logs/LogsSummary/LogsSummary.tsx
+var o = ({ className: o, orientation: s = "horizontal", items: c, logTypeSelected: l, onClick: u }) => {
+	let d = r(() => c.reduce((e, t) => {
+		let { logType: n } = t;
+		return e[n] || (e[n] = 0), {
+			...e,
+			[n]: ++e[n]
+		};
+	}, {}), [c]), f = n((e) => u?.(e), [u]);
+	return /* @__PURE__ */ a("div", {
+		className: t("flex shrink-0 border-zinc-200 select-none dark:border-zinc-700", s === "horizontal" ? "flex-col border-r" : "border-b", o),
+		children: [
+			/* @__PURE__ */ i(e, {
+				onClick: f,
+				amount: c.length,
+				selected: !l
+			}),
+			/* @__PURE__ */ i(e, {
+				onClick: f,
+				amount: d.danger ?? 0,
+				suffix: "Errors",
+				logType: "danger",
+				selected: l === "danger"
+			}),
+			/* @__PURE__ */ i(e, {
+				onClick: f,
+				amount: d.warning ?? 0,
+				suffix: "Warnings",
+				logType: "warning",
+				selected: l === "warning"
+			}),
+			/* @__PURE__ */ i(e, {
+				onClick: f,
+				amount: d.info ?? 0,
+				suffix: "Info",
+				logType: "info",
+				selected: l === "info"
+			})
+		]
+	});
+};
+//#endregion
+export { o as default };

package/dist/components/DevToolsPanel/tabs/Logs/LogsSummary/LogsSummaryItem.d.ts

@@ -0,0 +1,11 @@
+import { LogType } from '@plitzi/sdk-shared';
+export type LogsSummaryItemProps = {
+    className?: string;
+    amount: number;
+    selected: boolean;
+    logType?: LogType;
+    suffix?: string;
+    onClick?: (logType?: LogType) => void;
+};
+declare const LogsSummaryItem: ({ className, amount, suffix, selected, logType, onClick }: LogsSummaryItemProps) => import("react/jsx-runtime").JSX.Element;
+export default LogsSummaryItem;

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

@@ -0,0 +1,35 @@
+import e from "clsx";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/Logs/LogsSummary/LogsSummaryItem.tsx
+var i = ({ className: i, amount: a, suffix: o = "All", selected: s, logType: c, onClick: l }) => {
+	let u = t(() => l?.(c), [l, c]);
+	return /* @__PURE__ */ r("div", {
+		className: e("flex cursor-pointer items-center gap-2 px-2 py-1.5 transition-colors", s ? "bg-zinc-200 dark:bg-zinc-700" : "hover:bg-zinc-100 dark:hover:bg-zinc-800", i),
+		onClick: u,
+		children: [
+			/* @__PURE__ */ n("i", { className: e("text-xs", {
+				"fa-regular fa-circle-xmark text-red-500 dark:text-red-400": c === "danger",
+				"fa-solid fa-triangle-exclamation text-amber-500 dark:text-amber-400": c === "warning",
+				"fa-solid fa-circle-info text-violet-500 dark:text-violet-400": c === "info",
+				"fa-solid fa-check text-emerald-500 dark:text-emerald-400": c === "success",
+				"fa-solid fa-list text-zinc-500 dark:text-zinc-400": !c || ![
+					"danger",
+					"warning",
+					"info",
+					"success"
+				].includes(c)
+			}) }),
+			/* @__PURE__ */ n("span", {
+				className: "font-medium text-zinc-700 tabular-nums dark:text-zinc-200",
+				children: a
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "text-xs text-zinc-400 dark:text-zinc-500",
+				children: o
+			})
+		]
+	});
+};
+//#endregion
+export { i as default };

package/dist/components/DevToolsPanel/tabs/Logs/LogsSummary/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+import e from "./ExecutionTree/index.mjs";
+import t from "./InteractionNode/index.mjs";
+import n from "clsx";
+import { useCallback as r, useMemo as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { get as c } from "@plitzi/plitzi-ui/helpers";
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/BodyContent.tsx
+var l = ({ className: l, node: u, nodes: d }) => {
+	let [f, p] = a(u.id), m = i(() => c(d, `${f}`), [f, d]), h = r((e) => p(e), []);
+	return /* @__PURE__ */ s("div", {
+		className: n("flex", l),
+		children: [
+			/* @__PURE__ */ o(e, {
+				className: "grow basis-0",
+				nodeId: u.id,
+				nodes: d,
+				selected: f,
+				onSelect: h
+			}),
+			/* @__PURE__ */ o("div", { className: "mx-1 w-px shrink-0 bg-zinc-200 dark:bg-zinc-800" }),
+			f && /* @__PURE__ */ o("div", {
+				className: "flex min-w-0 grow basis-0",
+				children: /* @__PURE__ */ o(t, {
+					whenParams: m.whenParams,
+					status: m.status,
+					name: m.node.title,
+					startTime: m.startTime,
+					endTime: m.endTime,
+					when: m.node.when,
+					type: m.node.type,
+					action: m.node.action
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { l as default };

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type BodyHeaderProps = {
+    className?: string;
+    triggerName: ReactNode;
+    startTime: number;
+    endTime: number;
+    duration?: string;
+    elementId?: string;
+};
+declare const BodyHeader: ({ triggerName, startTime, endTime, duration, elementId }: BodyHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default BodyHeader;

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

@@ -0,0 +1,109 @@
+import { useCallback as e, useMemo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createStoreHook as i } from "@plitzi/sdk-store/createStore";
+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 }) => {
+	let { useStore: f } = i(), [p] = f("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(() => {
+		_?.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [_]), y = e(() => {
+		_?.classList.add("devtools-element-hovered");
+	}, [_]), b = e(() => {
+		_?.classList.remove("devtools-element-hovered");
+	}, [_]);
+	return /* @__PURE__ */ r("div", {
+		className: "flex justify-around gap-3",
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "flex min-w-0 grow basis-0 flex-col",
+				children: [/* @__PURE__ */ r("div", {
+					className: "mb-1 flex items-center gap-1.5 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+					children: [/* @__PURE__ */ n("i", { className: "fa-regular fa-clock" }), "Times"]
+				}), /* @__PURE__ */ r("div", {
+					className: "flex flex-col gap-0.5 font-mono text-zinc-700 dark:text-zinc-300",
+					children: [
+						/* @__PURE__ */ r("div", {
+							className: "flex gap-1",
+							children: [/* @__PURE__ */ n("span", {
+								className: "text-zinc-400 dark:text-zinc-500",
+								children: "Start"
+							}), h]
+						}),
+						/* @__PURE__ */ r("div", {
+							className: "flex gap-1",
+							children: [/* @__PURE__ */ n("span", {
+								className: "text-zinc-400 dark:text-zinc-500",
+								children: "End"
+							}), g]
+						}),
+						/* @__PURE__ */ r("div", {
+							className: "flex gap-1",
+							children: [/* @__PURE__ */ n("span", {
+								className: "text-zinc-400 dark:text-zinc-500",
+								children: "Duration"
+							}), u]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ n("div", { className: "w-px shrink-0 bg-zinc-200 dark:bg-zinc-800" }),
+			/* @__PURE__ */ r("div", {
+				className: "flex min-w-0 grow basis-0 flex-col",
+				children: [/* @__PURE__ */ r("div", {
+					className: "mb-1 flex items-center gap-1.5 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+					children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-circle-info" }), "Details"]
+				}), /* @__PURE__ */ r("div", {
+					className: "flex flex-col gap-0.5 text-zinc-700 dark:text-zinc-300",
+					children: [
+						/* @__PURE__ */ r("div", {
+							className: "flex gap-1",
+							children: [/* @__PURE__ */ n("span", {
+								className: "text-zinc-400 dark:text-zinc-500",
+								children: "Type"
+							}), /* @__PURE__ */ n("span", { children: "Interaction" })]
+						}),
+						/* @__PURE__ */ r("div", {
+							className: "flex min-w-0 gap-1",
+							children: [/* @__PURE__ */ n("span", {
+								className: "shrink-0 text-zinc-400 dark:text-zinc-500",
+								children: "Trigger"
+							}), /* @__PURE__ */ n("span", {
+								className: "truncate",
+								children: s
+							})]
+						}),
+						/* @__PURE__ */ r("div", {
+							className: "flex min-w-0 gap-1",
+							children: [/* @__PURE__ */ n("span", {
+								className: "shrink-0 text-zinc-400 dark:text-zinc-500",
+								children: "Element"
+							}), /* @__PURE__ */ r("span", {
+								className: "cursor-pointer truncate text-violet-600 hover:text-violet-500 dark:text-violet-400 dark:hover:text-violet-300",
+								onClick: v,
+								onMouseEnter: y,
+								onMouseLeave: b,
+								children: [m?.definition.label, d && /* @__PURE__ */ r("span", {
+									className: "ml-1 font-mono text-[10px] text-zinc-400 dark:text-zinc-500",
+									children: [
+										"[",
+										d,
+										"]"
+									]
+								})]
+							})]
+						})
+					]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { s as default };

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

@@ -0,0 +1,11 @@
+import { LogInteraction } from '@plitzi/sdk-shared';
+type Nodes = LogInteraction['params']['nodes'];
+export type ExecutionTreeProps = {
+    className?: string;
+    nodeId: string;
+    selected?: string;
+    nodes: Nodes;
+    onSelect?: (id?: string) => void;
+};
+declare const ExecutionTree: ({ className, nodeId, nodes, selected, onSelect }: ExecutionTreeProps) => import("react/jsx-runtime").JSX.Element;
+export default ExecutionTree;

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

@@ -0,0 +1,45 @@
+import e from "./ExecutionTreeNode.mjs";
+import t from "clsx";
+import { useCallback as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { get as o } from "@plitzi/plitzi-ui/helpers";
+import { getDurationMs as s } from "@plitzi/sdk-shared";
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogInteraction/ExecutionTree/ExecutionTree.tsx
+var c = ({ className: c, nodeId: l, nodes: u, selected: d, onSelect: f }) => {
+	let p = r(() => {
+		let e = o(u, l), t = [];
+		for (; e;) {
+			let { node: n, startTime: r, endTime: i } = e, a = `${s(r, i)}ms`, c = n.id === l ? 0 : 1;
+			t.push({
+				id: n.id,
+				action: n.action,
+				title: n.title,
+				status: e.status,
+				level: c,
+				duration: a
+			}), e = o(u, n.afterNode);
+		}
+		return t;
+	}, [l, u]), m = n((e) => f?.(e), [f]);
+	return /* @__PURE__ */ a("div", {
+		className: t("flex flex-col gap-1.5", c),
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex items-center gap-1.5 px-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+			children: [/* @__PURE__ */ i("i", { className: "fa-solid fa-code-merge" }), "Execution Tree"]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex flex-col",
+			children: p.map((t, n) => /* @__PURE__ */ i(e, {
+				id: t.id,
+				action: t.action,
+				title: t.title,
+				duration: t.duration,
+				status: t.status,
+				level: t.level,
+				isSelected: t.id === d,
+				onClick: m
+			}, n))
+		})]
+	});
+};
+//#endregion
+export { c as default };

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

@@ -0,0 +1,13 @@
+import { InteractionNodeStatus } from '@plitzi/sdk-shared';
+export type ExecutionTreeNodeProps = {
+    id: string;
+    action?: string;
+    title: string;
+    duration: string;
+    level: number;
+    isSelected?: boolean;
+    status?: InteractionNodeStatus;
+    onClick: (id: string) => void;
+};
+declare const ExecutionTreeNode: ({ title, action, duration, status, level, id, isSelected, onClick }: ExecutionTreeNodeProps) => import("react/jsx-runtime").JSX.Element;
+export default ExecutionTreeNode;