@plitzi/sdk-dev-tools 0.30.19 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @plitzi/sdk-dev-tools
 
+## 0.31.0
+
+### Minor Changes
+
+- v0.31.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @plitzi/sdk-navigation@0.31.0
+  - @plitzi/sdk-schema@0.31.0
+  - @plitzi/sdk-shared@0.31.0
+  - @plitzi/sdk-store@0.31.0
+  - @plitzi/sdk-style@0.31.0
+
 ## 0.30.19
 
 ### Patch Changes

package/dist/DevToolsContextProvider.mjs

@@ -1,7 +1,7 @@
 import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
 import a from "@plitzi/sdk-shared/devTools/DevToolsContext";
-import { jsx as o } from "react/jsx-runtime";
-import { omit as s } from "@plitzi/plitzi-ui/helpers";
+import { omit as o } from "@plitzi/plitzi-ui/helpers";
+import { jsx as s } from "react/jsx-runtime";
 import { pConsole as c } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
 //#region src/DevToolsContextProvider.tsx
 var l = ({ children: l }) => {
@@ -16,7 +16,7 @@ var l = ({ children: l }) => {
 	}, [d]), g = e((e, t) => p((n) => ({
 		...n,
 		[e]: t
-	})), []), _ = e((e) => p((t) => s(t, [e])), []), v = e((e, ...t) => {
+	})), []), _ = e((e) => p((t) => o(t, [e])), []), v = e((e, ...t) => {
 		if (!(!e || typeof f[e] != "function")) return f[e](...t);
 	}, [f]), y = e(() => d([]), []);
 	return m.current ||= (c.setCallback(h), c.setCallbackAddProvider(g), c.setCallbackRemoveProvider(_), !0), t(() => (c.setCallback(h), c.setCallbackAddProvider(g), c.setCallbackRemoveProvider(_), c.processPendingLogs(), () => {
@@ -25,7 +25,7 @@ var l = ({ children: l }) => {
 		h,
 		g,
 		_
-	]), /* @__PURE__ */ o(a, {
+	]), /* @__PURE__ */ s(a, {
 		value: n(() => ({
 			providers: f,
 			logs: u,

package/dist/components/DevToolsPanel/DevToolsBody.mjs

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

package/dist/components/DevToolsPanel/DevToolsHeader.mjs

@@ -9,10 +9,15 @@ var i = [
 		icon: "fa-solid fa-terminal"
 	},
 	{
-		id: "dataSources",
-		label: "Sources",
+		id: "store",
+		label: "Store",
 		icon: "fa-solid fa-database"
 	},
+	{
+		id: "history",
+		label: "History",
+		icon: "fa-solid fa-clock-rotate-left"
+	},
 	{
 		id: "elements",
 		label: "Elements",

package/dist/components/DevToolsPanel/DevToolsPanel.mjs

@@ -2,47 +2,48 @@ import e from "./DevToolsBody.mjs";
 import t from "./DevToolsHeader.mjs";
 import n from "./DevToolsSubHeader.mjs";
 import r from "@plitzi/plitzi-ui/ContainerResizable";
-import i from "clsx";
-import { use as a, useCallback as o, useMemo as s, useRef as c, useState as l } from "react";
-import u from "@plitzi/sdk-navigation/NavigationContext";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/hooks/useStorage";
+import a from "clsx";
+import { use as o, useCallback as s, useMemo as c, useRef as l, useState as u } from "react";
+import d from "@plitzi/sdk-navigation/NavigationContext";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/DevToolsPanel.tsx
-var p = "vertical", m = "horizontal", h = ({ className: p, orientation: m = "vertical", onChangeOrientation: h }) => {
-	let [g, _] = l("logs"), { currentPageId: v } = a(u), [y, b] = l(), x = s(() => m === "vertical" ? ["w"] : ["n"], [m]), S = c(typeof document < "u" ? document.querySelector(".plitzi-sdk") : null), C = o((e) => _(e), []), w = o((e) => b(e), [b]);
-	return /* @__PURE__ */ d(r, {
-		className: i("component__container-resizable-sidebar text-xs", p, { "h-full": m === "vertical" }),
-		minConstraintsX: m === "vertical" ? 500 : Infinity,
-		maxConstraintsX: m === "vertical" ? 1e3 : Infinity,
-		minConstraintsY: m === "vertical" ? Infinity : 34,
-		maxConstraintsY: m === "vertical" ? Infinity : 600,
-		width: m === "vertical" ? 500 : Infinity,
-		height: m === "vertical" ? Infinity : 200,
-		resizeHandles: x,
-		parentRef: S,
+var m = "vertical", h = "horizontal", g = ({ className: m, orientation: h = "vertical", onChangeOrientation: g }) => {
+	let [_, v] = i("plitzi-sdk.dev-tools.tab", "logs"), { currentPageId: y } = o(d), [b, x] = u(), S = c(() => h === "vertical" ? ["w"] : ["n"], [h]), C = l(typeof document < "u" ? document.querySelector(".plitzi-sdk") : null), w = s((e) => v(e), [v]), T = s((e) => x(e), [x]);
+	return /* @__PURE__ */ f(r, {
+		className: a("component__container-resizable-sidebar text-xs", m, { "h-full": h === "vertical" }),
+		minConstraintsX: h === "vertical" ? 500 : Infinity,
+		maxConstraintsX: h === "vertical" ? 1e3 : Infinity,
+		minConstraintsY: h === "vertical" ? Infinity : 34,
+		maxConstraintsY: h === "vertical" ? Infinity : 600,
+		width: h === "vertical" ? 500 : Infinity,
+		height: h === "vertical" ? Infinity : 200,
+		resizeHandles: S,
+		parentRef: C,
 		autoGrow: !1,
-		children: /* @__PURE__ */ f("div", {
+		children: /* @__PURE__ */ p("div", {
 			className: "flex h-full w-full flex-col bg-white text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200",
 			children: [
-				/* @__PURE__ */ d(t, {
-					orientation: m,
-					onChangeOrientation: h,
-					onTabSelect: C,
-					tabSelected: g
+				/* @__PURE__ */ f(t, {
+					orientation: h,
+					onChangeOrientation: g,
+					onTabSelect: w,
+					tabSelected: _
 				}),
-				["dataSources", "elements"].includes(g) && /* @__PURE__ */ d(n, {
-					elementSelected: y,
-					onSelectElement: w,
-					currentPageId: v
+				["store", "elements"].includes(_) && /* @__PURE__ */ f(n, {
+					elementSelected: b,
+					onSelectElement: T,
+					currentPageId: y
 				}),
-				/* @__PURE__ */ d(e, {
-					orientation: m,
-					tabSelected: g,
-					elementSelected: y,
-					onSelectElement: w
+				/* @__PURE__ */ f(e, {
+					orientation: h,
+					tabSelected: _,
+					elementSelected: b,
+					onSelectElement: T
 				})
 			]
 		})
 	});
 };
 //#endregion
-export { m as ORIENTATION_HORIZONTAL, p as ORIENTATION_VERTICAL, h as default };
+export { h as ORIENTATION_HORIZONTAL, m as ORIENTATION_VERTICAL, g as default };

package/dist/components/DevToolsPanel/DevToolsSubHeader.mjs

@@ -1,14 +1,14 @@
 import e from "./DevToolsButton.mjs";
 import t from "clsx";
 import { useCallback as n, useEffect as r, useMemo as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { throttle as c } from "@plitzi/plitzi-ui/helpers";
+import { throttle as o } from "@plitzi/plitzi-ui/helpers";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/DevToolsSubHeader.tsx
 var l = ({ className: l, elementSelected: u, currentPageId: d, onSelectElement: f }) => {
 	let [p, m] = a(!1), h = n((e) => {
 		let { id: t } = e?.dataset ?? {};
 		f(t);
-	}, [f]), g = i(() => c(h, 100), [h]), _ = n((e) => {
+	}, [f]), g = i(() => o(h, 100), [h]), _ = n((e) => {
 		e.target.closest(".plitzi-sdk") && g(e.target.closest("[data-id]"));
 	}, [g]), v = n((e) => {
 		e.target.closest(".plitzi-sdk") && (e.stopPropagation(), e.preventDefault(), m(!1));
@@ -35,22 +35,22 @@ var l = ({ className: l, elementSelected: u, currentPageId: d, onSelectElement:
 		v,
 		_,
 		p
-	]), /* @__PURE__ */ s("div", {
+	]), /* @__PURE__ */ c("div", {
 		className: t("flex shrink-0 items-center justify-between gap-2 border-b border-zinc-200 bg-zinc-50 px-2 py-1 dark:border-zinc-700 dark:bg-zinc-800", l),
-		children: [/* @__PURE__ */ s("div", {
+		children: [/* @__PURE__ */ c("div", {
 			className: "flex gap-1",
-			children: [/* @__PURE__ */ o(e, {
+			children: [/* @__PURE__ */ s(e, {
 				iconClassName: "fa-regular fa-hand-pointer",
 				title: "Select an element in the page to inspect it",
 				onClick: y,
 				isSelected: p
-			}), /* @__PURE__ */ o(e, {
+			}), /* @__PURE__ */ s(e, {
 				iconClassName: "fa-regular fa-file",
 				title: "Current Page",
 				onClick: b,
 				isSelected: u === d
 			})]
-		}), /* @__PURE__ */ o(e, {
+		}), /* @__PURE__ */ s(e, {
 			iconClassName: "fa-solid fa-ban",
 			onClick: x,
 			title: "Clear",

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

@@ -1,23 +1,23 @@
 import { useCallback as e, useMemo as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { createStoreHook as r } from "@plitzi/sdk-store/createStore";
-import { get as i } from "@plitzi/plitzi-ui/helpers";
+import { createStoreHook as n } from "@plitzi/sdk-store/createStore";
+import { get as r } from "@plitzi/plitzi-ui/helpers";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/ElementsViewer/DetailsValue.tsx
 var a = ({ attribute: a, value: o, isDefinition: s = !1, onSelectElement: c }) => {
-	let { useStore: l } = r(), [u] = l("schema.flat"), d = e((e) => () => c?.(e), [c]);
-	return /* @__PURE__ */ n("div", {
+	let { useStore: l } = n(), [u] = l("schema.flat"), d = e((e) => () => c?.(e), [c]);
+	return /* @__PURE__ */ i("div", {
 		className: "grow basis-0 truncate",
-		children: t(() => a === "items" && s && Array.isArray(o) ? /* @__PURE__ */ n("div", {
+		children: t(() => a === "items" && s && Array.isArray(o) ? /* @__PURE__ */ i("div", {
 			className: "flex flex-col",
-			children: o.map((e, t) => /* @__PURE__ */ n("div", {
+			children: o.map((e, t) => /* @__PURE__ */ i("div", {
 				className: "cursor-pointer text-purple-400",
 				onClick: d(e),
-				children: i(u, `${e}.definition.label`, e)
+				children: r(u, `${e}.definition.label`, e)
 			}, t))
-		}) : a && ["rootId", "parentId"].includes(a) && s ? /* @__PURE__ */ n("div", {
+		}) : a && ["rootId", "parentId"].includes(a) && s ? /* @__PURE__ */ i("div", {
 			className: "cursor-pointer text-purple-400",
 			onClick: d(o),
-			children: i(u, `${o}.definition.label`, o)
+			children: r(u, `${o}.definition.label`, o)
 		}) : a === "styleSelectors" && s && o && typeof o == "object" ? Object.values(o).join(", ") : typeof o == "object" && o ? JSON.stringify(o) : typeof o == "boolean" ? o ? "True" : "False" : o, [
 			a,
 			s,

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

@@ -1,20 +1,20 @@
 import e from "./DetailsAttributes.mjs";
 import t from "./DetailsDefinition.mjs";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import i from "@plitzi/plitzi-ui/ContainerTabs";
+import n from "@plitzi/plitzi-ui/ContainerTabs";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/ElementsViewer/ElementDetails.tsx
-var a = [{ label: "Definition" }, { label: "Attributes" }], o = ({ definition: o, attributes: s, onSelectElement: c }) => /* @__PURE__ */ r(i, {
+var a = [{ label: "Definition" }, { label: "Attributes" }], o = ({ definition: o, attributes: s, onSelectElement: c }) => /* @__PURE__ */ i(n, {
 	className: "w-full grow gap-4 overflow-hidden p-4",
 	children: [
-		/* @__PURE__ */ n(i.Tabs, { items: a }),
-		/* @__PURE__ */ n(i.TabContent, {
+		/* @__PURE__ */ r(n.Tabs, { items: a }),
+		/* @__PURE__ */ r(n.TabContent, {
 			className: "flex-col",
-			children: /* @__PURE__ */ n(t, {
+			children: /* @__PURE__ */ r(t, {
 				definition: o,
 				onSelectElement: c
 			})
 		}),
-		/* @__PURE__ */ n(i.TabContent, { children: /* @__PURE__ */ n(e, { attributes: s }) })
+		/* @__PURE__ */ r(n.TabContent, { children: /* @__PURE__ */ r(e, { attributes: s }) })
 	]
 });
 //#endregion

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 { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { get as o } from "@plitzi/plitzi-ui/helpers";
+import { get as i } from "@plitzi/plitzi-ui/helpers";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 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]);
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ o("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", {
+		children: [/* @__PURE__ */ a("div", {
 			className: "px-2 pt-2",
-			children: /* @__PURE__ */ i(s, {
+			children: /* @__PURE__ */ a(s, {
 				value: d,
 				onChange: t((e) => f(e), []),
 				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", {
+			children: p.length === 0 ? /* @__PURE__ */ a("div", {
 				className: "p-4 text-center text-zinc-400 dark:text-zinc-600",
 				children: "No elements"
-			}) : p.map((t, n) => /* @__PURE__ */ i(e, {
+			}) : p.map((t, n) => /* @__PURE__ */ a(e, {
 				name: t.definition.label,
 				isSelected: l === t.id,
-				isVisible: o(t, "definition.initialState.visibility", !0),
+				isVisible: i(t, "definition.initialState.visibility", !0),
 				id: t.id,
 				onSelect: u
 			}, n))

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

@@ -3,18 +3,18 @@ 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";
+import { createStoreHook as s } from "@plitzi/sdk-store/createStore";
+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), { 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", {
+	let { currentPageId: p } = r(o), { useStore: m } = s(), [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__ */ l("div", {
 		className: n("flex h-full w-full", u),
-		children: [/* @__PURE__ */ s(t, {
+		children: [/* @__PURE__ */ c(t, {
 			elements: g,
 			elementSelected: d,
 			onSelect: v
-		}), d && /* @__PURE__ */ s(e, {
+		}), d && /* @__PURE__ */ c(e, {
 			definition: _?.definition,
 			attributes: _?.attributes,
 			onSelectElement: f

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

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

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

@@ -0,0 +1,57 @@
+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/sdk-store/history";
+//#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) => ({
+		entry: e,
+		originalIndex: t
+	})).filter(({ entry: t }) => e(t, _)).reverse(), [l, _]), b = r((e) => {
+		if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+		e.preventDefault();
+		let t = y.findIndex((e) => e.originalIndex === u), n;
+		n = t === -1 ? e.key === "ArrowDown" ? 0 : y.length - 1 : e.key === "ArrowUp" ? t - 1 : t + 1, !(n < 0 || n >= y.length) && h(y[n].originalIndex);
+	}, [
+		y,
+		u,
+		h
+	]);
+	return /* @__PURE__ */ s("div", {
+		className: "flex h-full w-full flex-col",
+		children: [/* @__PURE__ */ o(n, {
+			index: u,
+			total: l.length,
+			canUndo: d,
+			canRedo: f,
+			filter: _,
+			onUndo: p,
+			onRedo: m,
+			onClear: g,
+			onFilterChange: v
+		}), /* @__PURE__ */ s("div", {
+			tabIndex: 0,
+			onKeyDown: b,
+			className: "flex flex-1 flex-col overflow-y-auto outline-none",
+			children: [y.length === 0 && /* @__PURE__ */ s("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", {
+					className: "text-xs",
+					children: _ ? "No entries match the filter" : "No history yet"
+				})]
+			}), y.map(({ entry: e, originalIndex: n }) => /* @__PURE__ */ o(t, {
+				index: n,
+				path: e.path,
+				value: e.value,
+				timestamp: e.timestamp,
+				isSelected: n === u,
+				isFuture: n > u,
+				onSelect: h
+			}, n))]
+		})]
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/HistoryEntryItem.d.ts

@@ -0,0 +1,12 @@
+import { Path } from '@plitzi/sdk-store';
+export type HistoryEntryItemProps = {
+    index: number;
+    path?: Path;
+    value?: unknown;
+    timestamp: number;
+    isSelected: boolean;
+    isFuture: boolean;
+    onSelect: (index: number) => void;
+};
+declare const HistoryEntryItem: ({ index, path, value, timestamp, isSelected, isFuture, onSelect }: HistoryEntryItemProps) => import("react/jsx-runtime").JSX.Element;
+export default HistoryEntryItem;

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

@@ -0,0 +1,37 @@
+import { formatTime as e, previewValue as t } from "../../helpers.mjs";
+import n from "clsx";
+import { useCallback as r, useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/HistoryEntryItem.tsx
+var c = ({ index: c, path: l, value: u, timestamp: d, isSelected: f, isFuture: p, onSelect: m }) => {
+	let h = a(null), g = r(() => m(c), [m, c]);
+	return i(() => {
+		f && h.current?.scrollIntoView({ block: "nearest" });
+	}, [f]), /* @__PURE__ */ s("button", {
+		ref: h,
+		onClick: g,
+		className: n("flex w-full flex-col gap-0.5 border-b border-zinc-100 px-3 py-1.5 text-left font-mono text-xs dark:border-zinc-800", {
+			"bg-violet-600 text-white dark:bg-violet-600": f,
+			"text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800/60": !f,
+			"opacity-50": p
+		}),
+		children: [/* @__PURE__ */ s("div", {
+			className: "flex w-full items-center gap-2",
+			children: [/* @__PURE__ */ o("span", {
+				className: "grow truncate",
+				children: l ?? /* @__PURE__ */ o("span", {
+					className: "italic opacity-70",
+					children: c === 0 ? "initial state" : "replace"
+				})
+			}), /* @__PURE__ */ o("span", {
+				className: "shrink-0 text-[10px] opacity-70",
+				children: e(d)
+			})]
+		}), u !== void 0 && /* @__PURE__ */ o("span", {
+			className: "w-full truncate text-[10px] opacity-70",
+			children: t(u)
+		})]
+	});
+};
+//#endregion
+export { c as default };

package/dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './HistoryEntryItem';
+export type { HistoryEntryItemProps } from './HistoryEntryItem';

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

@@ -0,0 +1,2 @@
+import e from "./HistoryEntryItem.mjs";
+export { e as default };

package/dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/HistoryToolbar.d.ts

@@ -0,0 +1,13 @@
+export type HistoryToolbarProps = {
+    index: number;
+    total: number;
+    canUndo: boolean;
+    canRedo: boolean;
+    filter: string;
+    onUndo: () => void;
+    onRedo: () => void;
+    onClear: () => void;
+    onFilterChange: (value: string) => void;
+};
+declare const HistoryToolbar: ({ index, total, canUndo, canRedo, filter, onUndo, onRedo, onClear, onFilterChange }: HistoryToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export default HistoryToolbar;

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

@@ -0,0 +1,45 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import n from "@plitzi/plitzi-ui/Input";
+//#region src/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/HistoryToolbar.tsx
+var r = ({ index: r, total: i, canUndo: a, canRedo: o, filter: s, onUndo: c, onRedo: l, onClear: u, onFilterChange: d }) => /* @__PURE__ */ t("div", {
+	className: "flex shrink-0 flex-col gap-1.5 border-b border-zinc-200 bg-zinc-50 px-2 py-1.5 dark:border-zinc-800 dark:bg-zinc-900",
+	children: [/* @__PURE__ */ t("div", {
+		className: "flex items-center gap-1",
+		children: [
+			/* @__PURE__ */ t("button", {
+				onClick: c,
+				disabled: !a,
+				className: "flex h-6 items-center gap-1 rounded px-2 text-xs font-medium text-zinc-600 enabled:hover:bg-zinc-200 disabled:opacity-40 dark:text-zinc-300 dark:enabled:hover:bg-zinc-700",
+				children: [/* @__PURE__ */ e("i", { className: "fa-solid fa-rotate-left" }), "Undo"]
+			}),
+			/* @__PURE__ */ t("button", {
+				onClick: l,
+				disabled: !o,
+				className: "flex h-6 items-center gap-1 rounded px-2 text-xs font-medium text-zinc-600 enabled:hover:bg-zinc-200 disabled:opacity-40 dark:text-zinc-300 dark:enabled:hover:bg-zinc-700",
+				children: [/* @__PURE__ */ e("i", { className: "fa-solid fa-rotate-right" }), "Redo"]
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "ml-auto flex items-center gap-2",
+				children: [/* @__PURE__ */ t("span", {
+					className: "text-[10px] text-zinc-400 dark:text-zinc-500",
+					children: [
+						r + 1,
+						" / ",
+						i
+					]
+				}), /* @__PURE__ */ t("button", {
+					onClick: u,
+					className: "flex h-6 items-center gap-1 rounded px-2 text-xs font-medium text-zinc-600 hover:bg-zinc-200 dark:text-zinc-300 dark:hover:bg-zinc-700",
+					children: [/* @__PURE__ */ e("i", { className: "fa-solid fa-trash" }), "Clear"]
+				})]
+			})
+		]
+	}), /* @__PURE__ */ e(n, {
+		value: s,
+		onChange: d,
+		placeholder: "Filter by path...",
+		size: "sm"
+	})]
+});
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './HistoryToolbar';
+export type { HistoryToolbarProps } from './HistoryToolbar';

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

@@ -0,0 +1,2 @@
+import e from "./HistoryToolbar.mjs";
+export { e as default };

package/dist/components/DevToolsPanel/tabs/HistoryViewer/helpers.d.ts

@@ -0,0 +1,4 @@
+import { HistoryEntry } from '@plitzi/sdk-store/history';
+export declare const formatTime: (timestamp: number) => string;
+export declare const previewValue: (value: unknown) => string;
+export declare const matchesFilter: <TState>(entry: HistoryEntry<TState>, filter: string) => boolean;

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

@@ -0,0 +1,15 @@
+//#region src/components/DevToolsPanel/tabs/HistoryViewer/helpers.ts
+var e = (e) => new Date(e).toLocaleTimeString(void 0, { hour12: !1 }) + "." + String(e % 1e3).padStart(3, "0"), t = (e) => {
+	if (e === void 0) return "";
+	if (typeof e == "string") return e;
+	if (typeof e == "number" || typeof e == "boolean") return String(e);
+	let t = Array.isArray(e) ? "[…]" : "{…}", n;
+	try {
+		n = JSON.stringify(e) || t;
+	} catch {
+		n = t;
+	}
+	return n.length > 120 ? n.slice(0, 120) + "…" : n;
+}, n = (e, t) => t ? (e.path ?? "").toLowerCase().includes(t.toLowerCase()) : !0;
+//#endregion
+export { e as formatTime, n as matchesFilter, t as previewValue };

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

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

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

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

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

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

@@ -1,11 +1,11 @@
 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 { createStoreHook as n } from "@plitzi/sdk-store/createStore";
+import { get as r } from "@plitzi/plitzi-ui/helpers";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 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(() => {
+	let { useStore: f } = n(), [p] = f("schema.flat"), m = t(() => d ? r(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({
@@ -18,34 +18,34 @@ var s = ({ triggerName: s, startTime: c, endTime: l, duration: u, elementId: d }
 	}, [_]), b = e(() => {
 		_?.classList.remove("devtools-element-hovered");
 	}, [_]);
-	return /* @__PURE__ */ r("div", {
+	return /* @__PURE__ */ a("div", {
 		className: "flex justify-around gap-3",
 		children: [
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ a("div", {
 				className: "flex min-w-0 grow basis-0 flex-col",
-				children: [/* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ a("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", {
+					children: [/* @__PURE__ */ i("i", { className: "fa-regular fa-clock" }), "Times"]
+				}), /* @__PURE__ */ a("div", {
 					className: "flex flex-col gap-0.5 font-mono text-zinc-700 dark:text-zinc-300",
 					children: [
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ a("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ i("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "Start"
 							}), h]
 						}),
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ a("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ i("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "End"
 							}), g]
 						}),
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ a("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ i("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "Duration"
 							}), u]
@@ -53,43 +53,43 @@ var s = ({ triggerName: s, startTime: c, endTime: l, duration: u, elementId: d }
 					]
 				})]
 			}),
-			/* @__PURE__ */ n("div", { className: "w-px shrink-0 bg-zinc-200 dark:bg-zinc-800" }),
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ i("div", { className: "w-px shrink-0 bg-zinc-200 dark:bg-zinc-800" }),
+			/* @__PURE__ */ a("div", {
 				className: "flex min-w-0 grow basis-0 flex-col",
-				children: [/* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ a("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", {
+					children: [/* @__PURE__ */ i("i", { className: "fa-solid fa-circle-info" }), "Details"]
+				}), /* @__PURE__ */ a("div", {
 					className: "flex flex-col gap-0.5 text-zinc-700 dark:text-zinc-300",
 					children: [
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ a("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ i("span", {
 								className: "text-zinc-400 dark:text-zinc-500",
 								children: "Type"
-							}), /* @__PURE__ */ n("span", { children: "Interaction" })]
+							}), /* @__PURE__ */ i("span", { children: "Interaction" })]
 						}),
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ a("div", {
 							className: "flex min-w-0 gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ i("span", {
 								className: "shrink-0 text-zinc-400 dark:text-zinc-500",
 								children: "Trigger"
-							}), /* @__PURE__ */ n("span", {
+							}), /* @__PURE__ */ i("span", {
 								className: "truncate",
 								children: s
 							})]
 						}),
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ a("div", {
 							className: "flex min-w-0 gap-1",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ i("span", {
 								className: "shrink-0 text-zinc-400 dark:text-zinc-500",
 								children: "Element"
-							}), /* @__PURE__ */ r("span", {
+							}), /* @__PURE__ */ a("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", {
+								children: [m?.definition.label, d && /* @__PURE__ */ a("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 { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { get as o } from "@plitzi/plitzi-ui/helpers";
+import { get as i } from "@plitzi/plitzi-ui/helpers";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 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 = [];
+		let e = i(u, l), t = [];
 		for (; e;) {
-			let { node: n, startTime: r, endTime: i } = e, a = `${s(r, i)}ms`, c = n.id === l ? 0 : 1;
+			let { node: n, startTime: r, endTime: a } = e, o = `${s(r, a)}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);
+				duration: o
+			}), e = i(u, n.afterNode);
 		}
 		return t;
 	}, [l, u]), m = n((e) => f?.(e), [f]);
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ o("div", {
 		className: t("flex flex-col gap-1.5", c),
-		children: [/* @__PURE__ */ a("div", {
+		children: [/* @__PURE__ */ o("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", {
+			children: [/* @__PURE__ */ a("i", { className: "fa-solid fa-code-merge" }), "Execution Tree"]
+		}), /* @__PURE__ */ a("div", {
 			className: "flex flex-col",
-			children: p.map((t, n) => /* @__PURE__ */ i(e, {
+			children: p.map((t, n) => /* @__PURE__ */ a(e, {
 				id: t.id,
 				action: t.action,
 				title: t.title,

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogNavigation/LogNavigationBody.mjs

@@ -1,60 +1,60 @@
 import { useMemo as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { createStoreHook as r } from "@plitzi/sdk-store/createStore";
-import { get as i } from "@plitzi/plitzi-ui/helpers";
+import { createStoreHook as t } from "@plitzi/sdk-store/createStore";
+import { get as n } from "@plitzi/plitzi-ui/helpers";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { formatDate as a } from "@plitzi/sdk-shared/helpers";
 //#region src/components/DevToolsPanel/tabs/Logs/categories/LogNavigation/LogNavigationBody.tsx
 var o = ({ elementId: o, startTime: s, endTime: c, duration: l }) => {
-	let { useStore: u } = r(), [d] = u("schema.flat"), f = e(() => o ? i(d, o) : void 0, [o, d]);
-	return /* @__PURE__ */ n("div", {
+	let { useStore: u } = t(), [d] = u("schema.flat"), f = e(() => o ? n(d, o) : void 0, [o, d]);
+	return /* @__PURE__ */ i("div", {
 		className: "m-2 flex justify-around gap-4",
 		children: [
-			/* @__PURE__ */ n("div", {
+			/* @__PURE__ */ i("div", {
 				className: "flex min-w-0 grow basis-0 flex-col gap-2",
-				children: [/* @__PURE__ */ n("div", {
+				children: [/* @__PURE__ */ i("div", {
 					className: "flex items-center gap-1 font-bold",
-					children: [/* @__PURE__ */ t("i", { className: "fa-regular fa-clock" }), "Times"]
-				}), /* @__PURE__ */ n("div", {
+					children: [/* @__PURE__ */ r("i", { className: "fa-regular fa-clock" }), "Times"]
+				}), /* @__PURE__ */ i("div", {
 					className: "flex flex-col",
 					children: [
-						/* @__PURE__ */ n("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ t("span", { children: "Started:" }), typeof s == "string" ? s : a(s)]
+							children: [/* @__PURE__ */ r("span", { children: "Started:" }), typeof s == "string" ? s : a(s)]
 						}),
-						/* @__PURE__ */ n("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ t("span", { children: "End:" }), typeof c == "string" ? c : a(c)]
+							children: [/* @__PURE__ */ r("span", { children: "End:" }), typeof c == "string" ? c : a(c)]
 						}),
-						/* @__PURE__ */ n("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ t("span", { children: "Duration:" }), l]
+							children: [/* @__PURE__ */ r("span", { children: "Duration:" }), l]
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ t("div", { className: "border-r border-gray-300" }),
-			/* @__PURE__ */ n("div", {
+			/* @__PURE__ */ r("div", { className: "border-r border-gray-300" }),
+			/* @__PURE__ */ i("div", {
 				className: "flex min-w-0 grow basis-0 flex-col gap-2",
-				children: [/* @__PURE__ */ n("div", {
+				children: [/* @__PURE__ */ i("div", {
 					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ t("i", { className: "fa-solid fa-circle-info" }), "Details"]
-				}), /* @__PURE__ */ n("div", {
+					children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-circle-info" }), "Details"]
+				}), /* @__PURE__ */ i("div", {
 					className: "flex flex-col",
 					children: [
-						/* @__PURE__ */ n("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ t("span", { children: "Type:" }), /* @__PURE__ */ t("span", { children: "Navigation" })]
+							children: [/* @__PURE__ */ r("span", { children: "Type:" }), /* @__PURE__ */ r("span", { children: "Navigation" })]
 						}),
-						/* @__PURE__ */ n("div", {
+						/* @__PURE__ */ i("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ t("span", { children: "Trigger:" }), /* @__PURE__ */ t("span", {
+							children: [/* @__PURE__ */ r("span", { children: "Trigger:" }), /* @__PURE__ */ r("span", {
 								className: "truncate",
 								children: "-"
 							})]
 						}),
-						f && /* @__PURE__ */ n("div", {
+						f && /* @__PURE__ */ i("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ t("span", { children: "Element:" }), /* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ r("span", { children: "Element:" }), /* @__PURE__ */ i("span", {
 								className: "cursor-pointer truncate text-blue-500",
 								children: [
 									f.definition.label,

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

@@ -0,0 +1,5 @@
+export type StoreViewerProps = {
+    elementSelected?: string;
+};
+declare const StoreViewer: ({ elementSelected }: StoreViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default StoreViewer;

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

@@ -0,0 +1,32 @@
+import { use as e } from "react";
+import t from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { createStoreHook as n } from "@plitzi/sdk-store/createStore";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@uiw/react-json-view";
+import * as a from "@uiw/react-json-view/vscode";
+import { emptyObject as o } from "@plitzi/sdk-shared/helpers/utils";
+//#region src/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.tsx
+var s = {
+	...a.vscodeTheme,
+	width: "100%",
+	height: "100%",
+	overflow: "auto",
+	padding: "8px",
+	fontSize: "14px"
+}, c = ({ elementSelected: a }) => {
+	let { getData: c } = e(t), { useStore: l } = n(), [u] = l();
+	return /* @__PURE__ */ r("div", {
+		className: "flex h-full w-full flex-col",
+		children: /* @__PURE__ */ r(i, {
+			value: (a ? c?.(`getElementDataSource-${a}`) : u) ?? o,
+			style: s,
+			enableClipboard: !1,
+			indentWidth: 15,
+			collapsed: 2,
+			displayObjectSize: !1,
+			displayDataTypes: !1
+		})
+	});
+};
+//#endregion
+export { c as default };

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

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

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

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

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

@@ -1,33 +1,33 @@
 import e from "./VariablesList.mjs";
 import t from "./VariablesStyleList.mjs";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { createStoreHook as i } from "@plitzi/sdk-store/createStore";
-import a from "@plitzi/sdk-shared/dataSource/hooks/useDataSource";
+import { createStoreHook as n } from "@plitzi/sdk-store/createStore";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/VariablesViewer/VariablesViewer.tsx
-var o = () => {
-	let { useStore: o } = i(), [[s, c]] = o(["schema.variables", "style.variables"]), { variables: l } = a({
-		id: "",
-		mode: "read"
-	});
-	return /* @__PURE__ */ r("div", {
+var a = () => {
+	let { useStore: a } = n(), [[o, s, c]] = a([
+		"schema.variables",
+		"style.variables",
+		"runtime.sources.variables"
+	]);
+	return /* @__PURE__ */ i("div", {
 		className: "flex w-full flex-col gap-4 overflow-y-auto p-3",
-		children: [/* @__PURE__ */ r("section", {
+		children: [/* @__PURE__ */ i("section", {
 			className: "flex flex-col gap-1.5",
-			children: [/* @__PURE__ */ r("div", {
+			children: [/* @__PURE__ */ i("div", {
 				className: "flex items-center gap-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
-				children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-code" }), "Schema Variables"]
-			}), /* @__PURE__ */ n(e, {
-				variables: s,
-				variablesParsed: l
+				children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-code" }), "Schema Variables"]
+			}), /* @__PURE__ */ r(e, {
+				variables: o,
+				variablesParsed: c
 			})]
-		}), /* @__PURE__ */ r("section", {
+		}), /* @__PURE__ */ i("section", {
 			className: "flex flex-col gap-1.5",
-			children: [/* @__PURE__ */ r("div", {
+			children: [/* @__PURE__ */ i("div", {
 				className: "flex items-center gap-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
-				children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-palette" }), "Style Variables"]
-			}), /* @__PURE__ */ n(t, { variables: c })]
+				children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-palette" }), "Style Variables"]
+			}), /* @__PURE__ */ r(t, { variables: s })]
 		})]
 	});
 };
 //#endregion
-export { o as default };
+export { a as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-dev-tools",
-  "version": "0.30.19",
+  "version": "0.31.0",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -94,6 +94,46 @@
       "types": "./dist/components/DevToolsPanel/tabs/ElementsViewer/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/ElementsViewer/index.mjs"
     },
+    "./components/DevToolsPanel/tabs/HistoryViewer": {
+      "types": "./dist/components/DevToolsPanel/tabs/HistoryViewer/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/HistoryViewer/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/HistoryViewer/HistoryViewer": {
+      "types": "./dist/components/DevToolsPanel/tabs/HistoryViewer/HistoryViewer.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/HistoryViewer/HistoryViewer.mjs"
+    },
+    "./components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem": {
+      "types": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/HistoryEntryItem": {
+      "types": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/HistoryEntryItem.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/HistoryEntryItem.mjs"
+    },
+    "./components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/index": {
+      "types": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryEntryItem/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar": {
+      "types": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/HistoryToolbar": {
+      "types": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/HistoryToolbar.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/HistoryToolbar.mjs"
+    },
+    "./components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/index": {
+      "types": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/HistoryViewer/components/HistoryToolbar/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/HistoryViewer/helpers": {
+      "types": "./dist/components/DevToolsPanel/tabs/HistoryViewer/helpers.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/HistoryViewer/helpers.mjs"
+    },
+    "./components/DevToolsPanel/tabs/HistoryViewer/index": {
+      "types": "./dist/components/DevToolsPanel/tabs/HistoryViewer/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/HistoryViewer/index.mjs"
+    },
     "./components/DevToolsPanel/tabs/Logs": {
       "types": "./dist/components/DevToolsPanel/tabs/Logs/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/Logs/index.mjs"
@@ -274,6 +314,18 @@
       "types": "./dist/components/DevToolsPanel/tabs/PluginsViewer/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/PluginsViewer/index.mjs"
     },
+    "./components/DevToolsPanel/tabs/StoreViewer": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/StoreViewer/StoreViewer": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.mjs"
+    },
+    "./components/DevToolsPanel/tabs/StoreViewer/index": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/index.mjs"
+    },
     "./components/DevToolsPanel/tabs/VariablesViewer": {
       "types": "./dist/components/DevToolsPanel/tabs/VariablesViewer/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/VariablesViewer/index.mjs"
@@ -334,24 +386,23 @@
   "sideEffects": false,
   "devDependencies": {
     "eslint": "^9.39.4",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10"
+    "vite": "^8.0.14"
   },
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19"
   },
   "dependencies": {
-    "@plitzi/plitzi-ui": "^1.6.2",
-    "@plitzi/sdk-data-source": "0.30.19",
-    "@plitzi/sdk-navigation": "0.30.19",
-    "@plitzi/sdk-schema": "0.30.19",
-    "@plitzi/sdk-shared": "0.30.19",
-    "@plitzi/sdk-store": "0.30.19",
-    "@plitzi/sdk-style": "0.30.19",
-    "@uiw/react-json-view": "^2.0.0-alpha.42",
+    "@plitzi/plitzi-ui": "^1.6.9",
+    "@plitzi/sdk-navigation": "0.31.0",
+    "@plitzi/sdk-schema": "0.31.0",
+    "@plitzi/sdk-shared": "0.31.0",
+    "@plitzi/sdk-store": "0.31.0",
+    "@plitzi/sdk-style": "0.31.0",
+    "@uiw/react-json-view": "^2.0.0-alpha.43",
     "clsx": "^2.1.1"
   }
 }

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

@@ -1,5 +0,0 @@
-export type DataSourceViewerProps = {
-    elementSelected?: string;
-};
-declare const DataSourceViewer: ({ elementSelected }: DataSourceViewerProps) => import("react/jsx-runtime").JSX.Element;
-export default DataSourceViewer;

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

@@ -1,30 +0,0 @@
-import { use as e } from "react";
-import t from "@plitzi/sdk-shared/devTools/DevToolsContext";
-import n from "@uiw/react-json-view";
-import * as r from "@uiw/react-json-view/vscode";
-import { jsx as i } from "react/jsx-runtime";
-//#region src/components/DevToolsPanel/tabs/DataSourceViewer/DataSourceViewer.tsx
-var a = {
-	...r.vscodeTheme,
-	width: "100%",
-	height: "100%",
-	overflow: "auto",
-	padding: "8px",
-	fontSize: "14px"
-}, o = ({ elementSelected: r }) => {
-	let { getData: o } = e(t);
-	return /* @__PURE__ */ i("div", {
-		className: "flex h-full w-full flex-col",
-		children: /* @__PURE__ */ i(n, {
-			value: r ? o?.(`getElementDataSource-${r}`) : {},
-			style: a,
-			enableClipboard: !1,
-			indentWidth: 15,
-			collapsed: 2,
-			displayObjectSize: !1,
-			displayDataTypes: !1
-		})
-	});
-};
-//#endregion
-export { o as default };

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

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

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

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