@plitzi/sdk-dev-tools 0.30.19 → 0.31.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @plitzi/sdk-dev-tools
 
+## 0.31.1
+
+### Patch Changes
+
+- v0.31.1
+- Updated dependencies
+  - @plitzi/nexus@0.31.1
+  - @plitzi/sdk-navigation@0.31.1
+  - @plitzi/sdk-schema@0.31.1
+  - @plitzi/sdk-shared@0.31.1
+  - @plitzi/sdk-style@0.31.1
+
+## 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/nexus@0.31.0
+  - @plitzi/sdk-style@0.31.0
+
 ## 0.30.19
 
 ### Patch Changes
@@ -10,7 +37,7 @@
   - @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/nexus@0.30.19
   - @plitzi/sdk-style@0.30.19
 
 ## 0.30.18
@@ -23,7 +50,7 @@
   - @plitzi/sdk-navigation@0.30.18
   - @plitzi/sdk-schema@0.30.18
   - @plitzi/sdk-shared@0.30.18
-  - @plitzi/sdk-store@0.30.18
+  - @plitzi/nexus@0.30.18
   - @plitzi/sdk-style@0.30.18
 
 ## 0.30.17
@@ -36,7 +63,7 @@
   - @plitzi/sdk-navigation@0.30.17
   - @plitzi/sdk-schema@0.30.17
   - @plitzi/sdk-shared@0.30.17
-  - @plitzi/sdk-store@0.30.17
+  - @plitzi/nexus@0.30.17
   - @plitzi/sdk-style@0.30.17
 
 ## 0.30.16

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/nexus/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/nexus/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/nexus/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/nexus';
+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/nexus/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;