@plitzi/sdk-dev-tools 0.32.24 → 0.33.0

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

@@ -1,30 +1,30 @@
 import e from "./ElementsListItem.mjs";
 import { useCallback as t, useMemo as n, useState as r } from "react";
-import { get as i } from "@plitzi/plitzi-ui/helpers";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+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), []);
-	return /* @__PURE__ */ o("div", {
+	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__ */ a("div", {
+		children: [/* @__PURE__ */ i("div", {
 			className: "px-2 pt-2",
-			children: /* @__PURE__ */ a(s, {
+			children: /* @__PURE__ */ i(s, {
 				value: d,
 				onChange: m,
 				placeholder: "Search elements...",
 				size: "sm"
 			})
-		}), /* @__PURE__ */ a("div", {
+		}), /* @__PURE__ */ i("div", {
 			className: "flex flex-col overflow-y-auto text-xs text-zinc-700 dark:text-zinc-300",
-			children: p.length === 0 ? /* @__PURE__ */ a("div", {
+			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__ */ a(e, {
+			}) : p.map((t, n) => /* @__PURE__ */ i(e, {
 				name: t.definition.label,
 				isSelected: l === t.id,
-				isVisible: i(t, "definition.initialState.visibility", !0),
+				isVisible: o(t, "definition.initialState.visibility", !0),
 				id: t.id,
 				onSelect: u
 			}, n))

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

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

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

@@ -1,24 +1,30 @@
 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
+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
 	}),
-	r === "navigation" && /* @__PURE__ */ a(t, {
-		message: s,
-		params: l,
-		time: c
+	i === "navigation" && /* @__PURE__ */ o(t, {
+		message: c,
+		params: u,
+		time: l
 	}),
-	r === "store" && /* @__PURE__ */ a(n, {
-		message: s,
-		params: l,
-		time: c
+	i === "store" && /* @__PURE__ */ o(r, {
+		message: c,
+		params: u,
+		time: l
+	}),
+	i === "network" && /* @__PURE__ */ o(n, {
+		message: c,
+		params: u,
+		time: l
 	})
 ] }));
 //#endregion
-export { s as default };
+export { c as default };

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

@@ -1,10 +1,12 @@
 import { Orientation } from '../../../../DevToolsContainer';
-import { Log as TLog } from '@plitzi/sdk-shared';
+import { LogType, Log as TLog } from '@plitzi/sdk-shared';
 export type LogsProps = {
     items: TLog[];
     autoScrollOffset?: number;
     orientation: Orientation;
+    /** Filter the tab opens on. Read once, on mount: from there the summary owns the filter. */
+    logTypeFilter?: LogType;
     onClear?: () => void;
 };
-declare const Logs: ({ items, autoScrollOffset, orientation, onClear }: LogsProps) => import("react").JSX.Element;
+declare const Logs: ({ items, autoScrollOffset, orientation, logTypeFilter, onClear }: LogsProps) => import("react").JSX.Element;
 export default Logs;

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

@@ -4,17 +4,17 @@ 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);
+var l = ({ items: l = [], autoScrollOffset: u = 40, orientation: d = "horizontal", logTypeFilter: f, onClear: p }) => {
+	let [m, h] = o(f), g = a(null), _ = a(!0);
 	i(() => {
-		let e = h.current;
-		e && g.current && (e.scrollTop = 0);
+		let e = g.current;
+		e && _.current && (e.scrollTop = 0);
 	}, [l]);
-	let _ = r(() => {
-		let e = h.current;
-		e && (g.current = e.scrollTop <= u);
-	}, [u]), v = r((e) => {
-		m(e);
+	let v = r(() => {
+		let e = g.current;
+		e && (_.current = e.scrollTop <= u);
+	}, [u]), y = r((e) => {
+		h(e);
 	}, []);
 	return /* @__PURE__ */ c("div", {
 		className: "flex h-full w-full flex-col",
@@ -29,20 +29,20 @@ var l = ({ items: l = [], autoScrollOffset: u = 40, orientation: d = "horizontal
 				]
 			}), /* @__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,
+				onClick: p,
 				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,
+				logTypeSelected: m,
 				items: l,
 				orientation: d,
-				onClick: v
+				onClick: y
 			}), /* @__PURE__ */ s("div", {
-				ref: h,
-				onScroll: _,
+				ref: g,
+				onScroll: v,
 				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",
@@ -50,7 +50,7 @@ var l = ({ items: l = [], autoScrollOffset: u = 40, orientation: d = "horizontal
 				}) : l.map((e, t) => ({
 					item: e,
 					key: t
-				})).filter(({ item: e }) => !p || e.logType === p).reverse().map(({ item: t, key: n }) => /* @__PURE__ */ s(e, {
+				})).filter(({ item: e }) => !m || e.logType === m).reverse().map(({ item: t, key: n }) => /* @__PURE__ */ s(e, {
 					category: t.category,
 					time: t.time,
 					params: t.params,

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

@@ -2,25 +2,25 @@ 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 { get as o } from "@plitzi/plitzi-ui/helpers";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+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(() => o(d, `${f}`), [f, d]), h = r((e) => p(e), []);
-	return /* @__PURE__ */ c("div", {
+	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__ */ s(e, {
+			/* @__PURE__ */ o(e, {
 				className: "grow basis-0",
 				nodeId: u.id,
 				nodes: d,
 				selected: f,
 				onSelect: h
 			}),
-			/* @__PURE__ */ s("div", { className: "mx-1 w-px shrink-0 bg-zinc-200 dark:bg-zinc-800" }),
-			f && /* @__PURE__ */ s("div", {
+			/* @__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__ */ s(t, {
+				children: /* @__PURE__ */ o(t, {
 					whenParams: m.whenParams,
 					status: m.status,
 					name: m.node.title,

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

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

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

@@ -1,51 +1,51 @@
 import { useCallback as e, useMemo as t } from "react";
-import { useCommonStore as n } from "@plitzi/sdk-shared/store";
-import { get as r } from "@plitzi/plitzi-ui/helpers";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+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 }) => {
-	let [f] = n("schema.flat"), p = t(() => d ? r(f, d) : void 0, [d, f]), m = t(() => o(c, "HH:mm:ss.SSS"), [c]), h = t(() => o(l, "HH:mm:ss.SSS"), [l]), g = t(() => {
+var s = ({ triggerName: s, startTime: c, endTime: l, duration: u, elementId: d, elementRef: 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]), _ = e(() => {
-		g?.scrollIntoView({
+	}, [d]), v = e(() => {
+		_?.scrollIntoView({
 			behavior: "smooth",
 			block: "nearest",
 			inline: "nearest"
 		});
-	}, [g]), v = e(() => {
-		g?.classList.add("devtools-element-hovered");
-	}, [g]), y = e(() => {
-		g?.classList.remove("devtools-element-hovered");
-	}, [g]);
-	return /* @__PURE__ */ a("div", {
+	}, [_]), 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__ */ a("div", {
+			/* @__PURE__ */ r("div", {
 				className: "flex min-w-0 grow basis-0 flex-col",
-				children: [/* @__PURE__ */ a("div", {
+				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__ */ i("i", { className: "fa-regular fa-clock" }), "Times"]
-				}), /* @__PURE__ */ a("div", {
+					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__ */ a("div", {
+						/* @__PURE__ */ r("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ i("span", {
+							children: [/* @__PURE__ */ n("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "Start"
-							}), m]
+							}), h]
 						}),
-						/* @__PURE__ */ a("div", {
+						/* @__PURE__ */ r("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ i("span", {
+							children: [/* @__PURE__ */ n("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "End"
-							}), h]
+							}), g]
 						}),
-						/* @__PURE__ */ a("div", {
+						/* @__PURE__ */ r("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ i("span", {
+							children: [/* @__PURE__ */ n("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "Duration"
 							}), u]
@@ -53,43 +53,53 @@ var s = ({ triggerName: s, startTime: c, endTime: l, duration: u, elementId: d }
 					]
 				})]
 			}),
-			/* @__PURE__ */ i("div", { className: "w-px shrink-0 bg-zinc-200 dark:bg-zinc-800" }),
-			/* @__PURE__ */ a("div", {
+			/* @__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__ */ a("div", {
+				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__ */ i("i", { className: "fa-solid fa-circle-info" }), "Details"]
-				}), /* @__PURE__ */ a("div", {
+					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__ */ a("div", {
+						/* @__PURE__ */ r("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ i("span", {
+							children: [/* @__PURE__ */ n("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "Type"
-							}), /* @__PURE__ */ i("span", { children: "Interaction" })]
+							}), /* @__PURE__ */ n("span", { children: "Interaction" })]
 						}),
-						/* @__PURE__ */ a("div", {
+						/* @__PURE__ */ r("div", {
 							className: "flex min-w-0 gap-1",
-							children: [/* @__PURE__ */ i("span", {
+							children: [/* @__PURE__ */ n("span", {
 								className: "shrink-0 text-zinc-400 dark:text-zinc-500",
 								children: "Trigger"
-							}), /* @__PURE__ */ i("span", {
+							}), /* @__PURE__ */ n("span", {
 								className: "truncate",
 								children: s
 							})]
 						}),
-						/* @__PURE__ */ a("div", {
+						f && /* @__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: "Fired on"
+							}), /* @__PURE__ */ n("span", {
+								className: "truncate font-mono",
+								children: f
+							})]
+						}),
+						/* @__PURE__ */ r("div", {
 							className: "flex min-w-0 gap-1",
-							children: [/* @__PURE__ */ i("span", {
+							children: [/* @__PURE__ */ n("span", {
 								className: "shrink-0 text-zinc-400 dark:text-zinc-500",
 								children: "Element"
-							}), /* @__PURE__ */ a("span", {
+							}), /* @__PURE__ */ r("span", {
 								className: "cursor-pointer truncate text-violet-600 hover:text-violet-500 dark:text-violet-400 dark:hover:text-violet-300",
-								onClick: _,
-								onMouseEnter: v,
-								onMouseLeave: y,
-								children: [p?.definition.label, d && /* @__PURE__ */ a("span", {
+								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: [
 										"[",

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

@@ -1,34 +1,34 @@
 import e from "./ExecutionTreeNode.mjs";
 import t from "clsx";
 import { useCallback as n, useMemo as r } from "react";
-import { get as i } from "@plitzi/plitzi-ui/helpers";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+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 = i(u, l), t = [];
+		let e = o(u, l), t = [];
 		for (; e;) {
-			let { node: n, startTime: r, endTime: a } = e, o = `${s(r, a)}ms`, c = n.id === l ? 0 : 1;
+			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: o
-			}), e = i(u, n.afterNode);
+				duration: a
+			}), e = o(u, n.afterNode);
 		}
 		return t;
 	}, [l, u]), m = n((e) => f?.(e), [f]);
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ a("div", {
 		className: t("flex flex-col gap-1.5", c),
-		children: [/* @__PURE__ */ o("div", {
+		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__ */ a("i", { className: "fa-solid fa-code-merge" }), "Execution Tree"]
-		}), /* @__PURE__ */ a("div", {
+			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__ */ a(e, {
+			children: p.map((t, n) => /* @__PURE__ */ i(e, {
 				id: t.id,
 				action: t.action,
 				title: t.title,

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

@@ -6,5 +6,5 @@ export type LogInteractionProps = {
     params: TLogInteraction['params'];
     time?: string;
 };
-declare const LogInteraction: ({ time, message, params: { elementId, status, node, nodes, startTime, endTime } }: LogInteractionProps) => import("react").JSX.Element;
+declare const LogInteraction: ({ time, message, params: { elementId, elementRef, status, node, nodes, startTime, endTime } }: LogInteractionProps) => import("react").JSX.Element;
 export default LogInteraction;

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

@@ -7,17 +7,18 @@ 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";
 //#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, status: m, node: h, nodes: g, startTime: _ = 0, endTime: v = 0 } }) => {
-	let y = i(() => `${c(_, v)}ms`, [_, v]), b = Object.values(g).filter((e) => e.status === "skipped").length, x = Object.values(g).filter((e) => e.status === "disabled").length;
+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", {
-			"border-l-emerald-500": m === "completed",
-			"border-l-red-500": m === "skipped"
+			"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, {
-				status: m,
+				status: h,
 				message: f,
 				time: d
 			}),
@@ -28,27 +29,33 @@ var l = /* @__PURE__ */ a("i", { className: "fa-solid fa-angle-right text-[10px]
 			children: /* @__PURE__ */ o("div", {
 				className: "flex gap-3 text-zinc-400 dark:text-zinc-500",
 				children: [
-					m === "completed" && !!b && /* @__PURE__ */ a(n, {
+					!!x && /* @__PURE__ */ a(n, {
+						logType: "danger",
+						title: "Failed",
+						children: x
+					}),
+					h !== "skipped" && !!S && /* @__PURE__ */ a(n, {
 						logType: "warning",
 						title: "Skipped",
-						children: b
+						children: S
 					}),
-					m === "completed" && !!x && /* @__PURE__ */ a(n, {
+					h !== "skipped" && !!C && /* @__PURE__ */ a(n, {
 						logType: "custom",
 						iconClassName: "fa-solid fa-ban",
 						title: "Disabled",
-						children: x
+						children: C
 					}),
-					y
+					b
 				]
 			})
 		}), /* @__PURE__ */ a(s.Content, { children: /* @__PURE__ */ a(e, {
 			elementId: p,
-			node: h,
-			nodes: g,
-			startTime: _,
-			endTime: v,
-			duration: y
+			elementRef: m,
+			node: g,
+			nodes: _,
+			startTime: v,
+			endTime: y,
+			duration: b
 		}) })]
 	});
 };

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

@@ -7,6 +7,7 @@ export type LogInteractionBodyProps = {
     endTime: number;
     duration?: string;
     elementId?: string;
+    elementRef?: string;
 };
-declare const LogInteractionBody: ({ node, nodes, startTime, endTime, duration, elementId }: LogInteractionBodyProps) => import("react").JSX.Element;
+declare const LogInteractionBody: ({ node, nodes, startTime, endTime, duration, elementId, elementRef }: 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 }) => /* @__PURE__ */ r("div", {
+var i = ({ node: i, nodes: a, startTime: o, endTime: s, duration: c, elementId: l, elementRef: 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",
@@ -11,7 +11,8 @@ var i = ({ node: i, nodes: a, startTime: o, endTime: s, duration: c, elementId:
 			startTime: o,
 			endTime: s,
 			duration: c,
-			elementId: l
+			elementId: l,
+			elementRef: u
 		})
 	}), /* @__PURE__ */ n("div", {
 		className: "border-t border-zinc-200 dark:border-zinc-800",

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

@@ -1,7 +1,8 @@
+import { InteractionStatus } from '@plitzi/sdk-shared';
 import { ReactNode } from 'react';
 export type LogInteractionHeaderProps = {
     className?: string;
-    status: string;
+    status: InteractionStatus;
     message?: ReactNode;
     time?: string;
 };

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

@@ -12,6 +12,10 @@ var r = ({ status: r, message: i, time: a }) => /* @__PURE__ */ n("div", {
 			logType: "success",
 			children: "Completed"
 		}),
+		r === "failed" && /* @__PURE__ */ t(e, {
+			logType: "danger",
+			children: "Failed"
+		}),
 		r === "skipped" && /* @__PURE__ */ t(e, {
 			logType: "custom",
 			iconClassName: "fa-solid fa-forward-step",