@motiadev/plugin-states 0.14.0-beta.165-602289 → 0.14.0-beta.165-917560

package/LICENSE

@@ -90,4 +90,4 @@ these terms.
 
 **use** means anything you do with the software requiring one of your licenses.
 
-**trademark** means trademarks, service marks, and similar rights.
+**trademark** means trademarks, service marks, and similar rights.

package/dist/index.js

@@ -0,0 +1,726 @@
+import { c } from "react/compiler-runtime";
+import { Button, Checkbox, Input, Sidebar, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn, useThemeStore } from "@motiadev/ui";
+import { AlertCircle, Check, Loader2, RefreshCw, Save, Search, Trash, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { create } from "zustand";
+import JsonView from "react18-json-view";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Editor, { useMonaco } from "@monaco-editor/react";
+
+//#region src/hooks/states-hooks.ts
+const useGetStateItems = () => {
+	const $ = c(8);
+	if ($[0] !== "c7199b15726ef92a8b1236966886099ddb103f2294b30414c1123a90f5c60f8c") {
+		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "c7199b15726ef92a8b1236966886099ddb103f2294b30414c1123a90f5c60f8c";
+	}
+	let t0;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[1] = t0;
+	} else t0 = $[1];
+	const [items, setItems] = useState(t0);
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			fetch("/__motia/state").then(_temp$2).then(setItems).catch(_temp2$1);
+		};
+		$[2] = t1;
+	} else t1 = $[2];
+	const refetch = t1;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (ids) => {
+			fetch("/__motia/state/delete", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ ids })
+			}).then(() => refetch());
+		};
+		$[3] = t2;
+	} else t2 = $[3];
+	const deleteItems = t2;
+	let t3;
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			refetch();
+		};
+		t4 = [refetch];
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t3 = $[4];
+		t4 = $[5];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[6] !== items) {
+		t5 = {
+			items,
+			deleteItems,
+			refetch
+		};
+		$[6] = items;
+		$[7] = t5;
+	} else t5 = $[7];
+	return t5;
+};
+async function _temp$2(res) {
+	if (res.ok) return res.json();
+	else throw await res.json();
+}
+function _temp2$1(err) {
+	return console.error(err);
+}
+
+//#endregion
+//#region src/stores/use-states-store.ts
+const useStatesStore = create()((set) => ({
+	selectedStateId: void 0,
+	selectStateId: (stateId) => set({ selectedStateId: stateId })
+}));
+
+//#endregion
+//#region src/components/state-details.tsx
+const StateDetails = (t0) => {
+	const $ = c(3);
+	if ($[0] !== "5995831aa1bc747830da5e0bb4a1d2bc36c1eaf62fb9c2f142532ffec8710bf4") {
+		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "5995831aa1bc747830da5e0bb4a1d2bc36c1eaf62fb9c2f142532ffec8710bf4";
+	}
+	const { state } = t0;
+	let t1;
+	if ($[1] !== state.value) {
+		t1 = /* @__PURE__ */ jsx(JsonView, {
+			src: state.value,
+			theme: "default"
+		});
+		$[1] = state.value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+
+//#endregion
+//#region src/components/json-editor.tsx
+const JsonEditor = (t0) => {
+	const $ = c(24);
+	if ($[0] !== "d1386dfeba00fe12241776daa47cf42300103748d5dcfe271adcb17c673326c6") {
+		for (let $i = 0; $i < 24; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "d1386dfeba00fe12241776daa47cf42300103748d5dcfe271adcb17c673326c6";
+	}
+	const { value, height: t1, schema, onChange, onValidate, language: t2, readOnly: t3 } = t0;
+	const height = t1 === void 0 ? 300 : t1;
+	const language = t2 === void 0 ? "json" : t2;
+	const readOnly = t3 === void 0 ? false : t3;
+	const monaco = useMonaco();
+	const editorTheme = useThemeStore(_temp$1) === "dark" ? "vs-dark" : "light";
+	let t4;
+	if ($[1] !== monaco || $[2] !== schema) {
+		t4 = () => {
+			if (!monaco) return;
+			monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ isolatedModules: true });
+			monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ schemas: schema ? [{
+				uri: window.location.href,
+				fileMatch: ["*"],
+				schema
+			}] : [] });
+		};
+		$[1] = monaco;
+		$[2] = schema;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== language || $[5] !== monaco || $[6] !== schema) {
+		t5 = [
+			monaco,
+			schema,
+			language
+		];
+		$[4] = language;
+		$[5] = monaco;
+		$[6] = schema;
+		$[7] = t5;
+	} else t5 = $[7];
+	useEffect(t4, t5);
+	let t6;
+	if ($[8] !== onChange || $[9] !== onValidate) {
+		t6 = (value_0) => {
+			if (!value_0) onValidate?.(false);
+			onChange?.(value_0 ?? "");
+		};
+		$[8] = onChange;
+		$[9] = onValidate;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== onValidate) {
+		t7 = (markers) => onValidate?.(markers.length === 0);
+		$[11] = onValidate;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = { enabled: false };
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== readOnly) {
+		t9 = {
+			readOnly,
+			scrollBeyondLastLine: false,
+			minimap: t8
+		};
+		$[14] = readOnly;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== editorTheme || $[17] !== height || $[18] !== language || $[19] !== t6 || $[20] !== t7 || $[21] !== t9 || $[22] !== value) {
+		t10 = /* @__PURE__ */ jsx(Editor, {
+			"data-testid": "json-editor",
+			height,
+			language,
+			value,
+			theme: editorTheme,
+			onChange: t6,
+			onValidate: t7,
+			options: t9
+		});
+		$[16] = editorTheme;
+		$[17] = height;
+		$[18] = language;
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t9;
+		$[22] = value;
+		$[23] = t10;
+	} else t10 = $[23];
+	return t10;
+};
+function _temp$1(state) {
+	return state.theme;
+}
+
+//#endregion
+//#region src/components/state-editor.tsx
+const StateEditor = ({ state }) => {
+	const [isRequestLoading, setIsRequestLoading] = useState(false);
+	const [isValid, setIsValid] = useState(true);
+	const [jsonValue, setJsonValue] = useState(JSON.stringify(state.value, null, 2));
+	const [hasChanges, setHasChanges] = useState(false);
+	const [saveStatus, setSaveStatus] = useState("idle");
+	const lastSavedValue = useRef(JSON.stringify(state.value, null, 2));
+	useEffect(() => {
+		setJsonValue(JSON.stringify(state.value, null, 2));
+	}, [state.value]);
+	const handleJsonChange = useCallback((value) => {
+		setHasChanges(value !== lastSavedValue.current);
+		setJsonValue(value);
+		setSaveStatus("idle");
+	}, []);
+	const handleSave = async () => {
+		if (!isValid || !hasChanges) return;
+		try {
+			setIsRequestLoading(true);
+			setSaveStatus("idle");
+			const response = await fetch("/__motia/state", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					key: state.key,
+					groupId: state.groupId,
+					value: JSON.parse(jsonValue)
+				})
+			});
+			if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+			lastSavedValue.current = jsonValue;
+			setSaveStatus("success");
+			setHasChanges(false);
+			setTimeout(() => {
+				setSaveStatus("idle");
+			}, 3e3);
+		} catch (error) {
+			console.error("Failed to save state:", error);
+			setSaveStatus("error");
+		} finally {
+			setIsRequestLoading(false);
+		}
+	};
+	const resetChanges = useCallback(() => {
+		setJsonValue(JSON.stringify(state.value, null, 2));
+		setHasChanges(false);
+		setSaveStatus("idle");
+	}, [state.value]);
+	const statusView = useMemo(() => {
+		if (saveStatus === "success") return /* @__PURE__ */ jsx("div", {
+			className: "bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800 rounded-lg p-2",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-green-700 dark:text-green-400 text-sm",
+				children: [/* @__PURE__ */ jsx(Check, { className: "w-4 h-4" }), "State saved successfully!"]
+			})
+		});
+		if (saveStatus === "error") return /* @__PURE__ */ jsx("div", {
+			className: "bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800 rounded-lg p-2",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-red-700 dark:text-red-400 text-sm",
+				children: [/* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4" }), "Failed to save state. Please try again."]
+			})
+		});
+		return /* @__PURE__ */ jsx("div", {
+			className: "text-xs text-muted-foreground",
+			children: hasChanges ? /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-orange-500 rounded-full" }), "Unsaved changes"]
+			}) : /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }), "Up to date"]
+			})
+		});
+	}, [saveStatus, hasChanges]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 h-full",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: "Modify the state value using the JSON editor below."
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-3 pt-2 flex flex-col",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "relative flex-1",
+					children: [/* @__PURE__ */ jsx(JsonEditor, {
+						value: jsonValue,
+						onChange: handleJsonChange,
+						onValidate: setIsValid,
+						height: "calc(100vh - 300px)"
+					}), !isValid && /* @__PURE__ */ jsxs("div", {
+						className: "absolute top-2 right-2 bg-destructive/90 text-destructive-foreground px-2 py-1 rounded text-xs flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(AlertCircle, { className: "w-3 h-3" }), "Invalid JSON"]
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between pt-2",
+				children: [statusView, /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [hasChanges && /* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						onClick: resetChanges,
+						disabled: isRequestLoading,
+						children: "Reset"
+					}), /* @__PURE__ */ jsx(Button, {
+						onClick: handleSave,
+						variant: "accent",
+						disabled: isRequestLoading || !isValid || !hasChanges,
+						"data-testid": "state-save-button",
+						children: isRequestLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin mr-1" }), "Saving..."] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Save, { className: "w-3 h-3 mr-1" }), "Save Changes"] })
+					})]
+				})]
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/components/state-sidebar.tsx
+const StateSidebar = (t0) => {
+	const $ = c(15);
+	if ($[0] !== "99df8f944367e03b0c8d3e46933b073a4ba8e236d0058ad7eeca4ca6f223a516") {
+		for (let $i = 0; $i < 15; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "99df8f944367e03b0c8d3e46933b073a4ba8e236d0058ad7eeca4ca6f223a516";
+	}
+	const { state, onClose } = t0;
+	let t1;
+	if ($[1] !== state) {
+		t1 = {
+			label: "Overview",
+			content: /* @__PURE__ */ jsx(StateDetails, { state })
+		};
+		$[1] = state;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== state) {
+		t2 = {
+			label: "Editor",
+			content: /* @__PURE__ */ jsx(StateEditor, { state })
+		};
+		$[3] = state;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1 || $[6] !== t2) {
+		t3 = [t1, t2];
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(X, {});
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== onClose) {
+		t5 = [{
+			icon: t4,
+			onClick: onClose,
+			label: "Close"
+		}];
+		$[9] = onClose;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== onClose || $[12] !== t3 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Sidebar, {
+			onClose,
+			title: "State Details",
+			initialWidth: 500,
+			tabs: t3,
+			actions: t5
+		});
+		$[11] = onClose;
+		$[12] = t3;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+};
+
+//#endregion
+//#region src/components/states-page.tsx
+const StatesPage = () => {
+	const $ = c(71);
+	if ($[0] !== "8ce039bfe0442ab4fc42929a358dacc664184bfe41f3767f703d231a71f688eb") {
+		for (let $i = 0; $i < 71; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "8ce039bfe0442ab4fc42929a358dacc664184bfe41f3767f703d231a71f688eb";
+	}
+	const selectedStateId = useStatesStore(_temp);
+	const selectStateId = useStatesStore(_temp2);
+	const { items, deleteItems, refetch } = useGetStateItems();
+	const [search, setSearch] = useState("");
+	let t0;
+	if ($[1] !== items || $[2] !== search) {
+		let t1$1;
+		if ($[4] !== search) {
+			t1$1 = (item) => item.groupId.toLowerCase().includes(search.toLowerCase()) || item.key.toLowerCase().includes(search.toLowerCase());
+			$[4] = search;
+			$[5] = t1$1;
+		} else t1$1 = $[5];
+		t0 = items.filter(t1$1);
+		$[1] = items;
+		$[2] = search;
+		$[3] = t0;
+	} else t0 = $[3];
+	const filteredItems = t0;
+	let t1;
+	if ($[6] !== filteredItems || $[7] !== selectedStateId) {
+		t1 = selectedStateId ? filteredItems.find((item_0) => `${item_0.groupId}:${item_0.key}` === selectedStateId) : null;
+		$[6] = filteredItems;
+		$[7] = selectedStateId;
+		$[8] = t1;
+	} else t1 = $[8];
+	const selectedItem = t1;
+	let t2;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ new Set();
+		$[9] = t2;
+	} else t2 = $[9];
+	const [checkedItems, setCheckedItems] = useState(t2);
+	let t3;
+	if ($[10] !== selectStateId) {
+		t3 = (item_1) => selectStateId(`${item_1.groupId}:${item_1.key}`);
+		$[10] = selectStateId;
+		$[11] = t3;
+	} else t3 = $[11];
+	const handleRowClick = t3;
+	let t4;
+	if ($[12] !== selectStateId) {
+		t4 = () => selectStateId(void 0);
+		$[12] = selectStateId;
+		$[13] = t4;
+	} else t4 = $[13];
+	const onClose = t4;
+	let t5;
+	if ($[14] !== checkedItems || $[15] !== deleteItems) {
+		t5 = () => {
+			deleteItems(Array.from(checkedItems));
+			setCheckedItems(/* @__PURE__ */ new Set());
+		};
+		$[14] = checkedItems;
+		$[15] = deleteItems;
+		$[16] = t5;
+	} else t5 = $[16];
+	const deleteStates = t5;
+	let t6;
+	if ($[17] !== checkedItems) {
+		t6 = (item_2) => {
+			const isChecked = checkedItems.has(`${item_2.groupId}:${item_2.key}`);
+			setCheckedItems((prev) => {
+				const newSet = new Set(prev);
+				if (isChecked) newSet.delete(`${item_2.groupId}:${item_2.key}`);
+				else newSet.add(`${item_2.groupId}:${item_2.key}`);
+				return newSet;
+			});
+		};
+		$[17] = checkedItems;
+		$[18] = t6;
+	} else t6 = $[18];
+	const handleCheckboxChange = t6;
+	let t7;
+	if ($[19] !== filteredItems) {
+		t7 = (checked) => {
+			setCheckedItems((prev_0) => {
+				const newSet_0 = new Set(prev_0);
+				if (checked) filteredItems.forEach((item_3) => {
+					newSet_0.add(`${item_3.groupId}:${item_3.key}`);
+				});
+				else filteredItems.forEach((item_4) => {
+					newSet_0.delete(`${item_4.groupId}:${item_4.key}`);
+				});
+				return newSet_0;
+			});
+		};
+		$[19] = filteredItems;
+		$[20] = t7;
+	} else t7 = $[20];
+	const toggleSelectAll = t7;
+	let t8;
+	if ($[21] !== onClose || $[22] !== selectedItem) {
+		t8 = selectedItem && /* @__PURE__ */ jsx(StateSidebar, {
+			state: selectedItem,
+			onClose
+		});
+		$[21] = onClose;
+		$[22] = selectedItem;
+		$[23] = t8;
+	} else t8 = $[23];
+	let t9;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = (e) => setSearch(e.target.value);
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] !== search) {
+		t10 = /* @__PURE__ */ jsx(Input, {
+			variant: "shade",
+			value: search,
+			onChange: t9,
+			className: "px-9! font-medium",
+			placeholder: "Search by Group ID or Key"
+		});
+		$[25] = search;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" });
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(X, {
+			className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground",
+			onClick: () => setSearch("")
+		});
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] !== t10) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 relative",
+			children: [
+				t10,
+				t11,
+				t12
+			]
+		});
+		$[29] = t10;
+		$[30] = t13;
+	} else t13 = $[30];
+	const t14 = checkedItems.size === 0;
+	let t15;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(Trash, {});
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== deleteStates || $[33] !== t14) {
+		t16 = /* @__PURE__ */ jsxs(Button, {
+			variant: "default",
+			className: "h-[34px]",
+			disabled: t14,
+			onClick: deleteStates,
+			children: [t15, " Delete"]
+		});
+		$[32] = deleteStates;
+		$[33] = t14;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4 text-muted-foreground" });
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
+	if ($[36] !== refetch) {
+		t18 = /* @__PURE__ */ jsx(Button, {
+			variant: "default",
+			className: "h-[34px]",
+			onClick: refetch,
+			children: t17
+		});
+		$[36] = refetch;
+		$[37] = t18;
+	} else t18 = $[37];
+	let t19;
+	if ($[38] !== t13 || $[39] !== t16 || $[40] !== t18) {
+		t19 = /* @__PURE__ */ jsxs("div", {
+			className: "flex p-2 border-b gap-2",
+			"data-testid": "logs-search-container",
+			children: [
+				t13,
+				t16,
+				t18
+			]
+		});
+		$[38] = t13;
+		$[39] = t16;
+		$[40] = t18;
+		$[41] = t19;
+	} else t19 = $[41];
+	let t20;
+	if ($[42] !== toggleSelectAll) {
+		t20 = /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Checkbox, {
+			onClick: _temp3,
+			onCheckedChange: toggleSelectAll
+		}) });
+		$[42] = toggleSelectAll;
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
+	let t22;
+	let t23;
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ jsx(TableHead, {
+			className: "rounded-0",
+			children: "Group ID"
+		});
+		t22 = /* @__PURE__ */ jsx(TableHead, { children: "Key" });
+		t23 = /* @__PURE__ */ jsx(TableHead, { children: "Type" });
+		$[44] = t21;
+		$[45] = t22;
+		$[46] = t23;
+	} else {
+		t21 = $[44];
+		t22 = $[45];
+		t23 = $[46];
+	}
+	let t24;
+	if ($[47] !== t20) {
+		t24 = /* @__PURE__ */ jsx(TableHeader, {
+			className: "sticky top-0 bg-background/20 backdrop-blur-sm",
+			children: /* @__PURE__ */ jsxs(TableRow, { children: [
+				t20,
+				t21,
+				t22,
+				t23
+			] })
+		});
+		$[47] = t20;
+		$[48] = t24;
+	} else t24 = $[48];
+	let t25;
+	if ($[49] !== checkedItems || $[50] !== filteredItems || $[51] !== handleCheckboxChange || $[52] !== handleRowClick || $[53] !== selectedItem) {
+		let t26$1;
+		if ($[55] !== checkedItems || $[56] !== handleCheckboxChange || $[57] !== handleRowClick || $[58] !== selectedItem) {
+			t26$1 = (item_5) => /* @__PURE__ */ jsxs(TableRow, {
+				"data-testid": `item-${item_5}`,
+				onClick: () => handleRowClick(item_5),
+				className: cn("font-mono font-semibold cursor-pointer border-0", selectedItem === item_5 ? "bg-muted-foreground/10 hover:bg-muted-foreground/20" : "hover:bg-muted-foreground/10"),
+				children: [
+					/* @__PURE__ */ jsx(TableCell, {
+						onClick: _temp4,
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							checked: checkedItems.has(`${item_5.groupId}:${item_5.key}`),
+							onClick: () => handleCheckboxChange(item_5)
+						})
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						className: "hover:bg-transparent",
+						children: item_5.groupId
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						className: "hover:bg-transparent",
+						children: item_5.key
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						className: "hover:bg-transparent",
+						children: item_5.type
+					})
+				]
+			}, `${item_5.groupId}:${item_5.key}`);
+			$[55] = checkedItems;
+			$[56] = handleCheckboxChange;
+			$[57] = handleRowClick;
+			$[58] = selectedItem;
+			$[59] = t26$1;
+		} else t26$1 = $[59];
+		t25 = filteredItems.map(t26$1);
+		$[49] = checkedItems;
+		$[50] = filteredItems;
+		$[51] = handleCheckboxChange;
+		$[52] = handleRowClick;
+		$[53] = selectedItem;
+		$[54] = t25;
+	} else t25 = $[54];
+	let t26;
+	if ($[60] !== t25) {
+		t26 = /* @__PURE__ */ jsx(TableBody, { children: t25 });
+		$[60] = t25;
+		$[61] = t26;
+	} else t26 = $[61];
+	let t27;
+	if ($[62] !== t24 || $[63] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(Table, { children: [t24, t26] });
+		$[62] = t24;
+		$[63] = t26;
+		$[64] = t27;
+	} else t27 = $[64];
+	let t28;
+	if ($[65] !== t19 || $[66] !== t27) {
+		t28 = /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-rows-[auto_1fr] h-full",
+			"data-testid": "states-container",
+			children: [t19, t27]
+		});
+		$[65] = t19;
+		$[66] = t27;
+		$[67] = t28;
+	} else t28 = $[67];
+	let t29;
+	if ($[68] !== t28 || $[69] !== t8) {
+		t29 = /* @__PURE__ */ jsxs(Fragment, { children: [t8, t28] });
+		$[68] = t28;
+		$[69] = t8;
+		$[70] = t29;
+	} else t29 = $[70];
+	return t29;
+};
+function _temp(state) {
+	return state.selectedStateId;
+}
+function _temp2(state_0) {
+	return state_0.selectStateId;
+}
+function _temp3(evt) {
+	return evt.stopPropagation();
+}
+function _temp4(evt_0) {
+	return evt_0.stopPropagation();
+}
+
+//#endregion
+export { StatesPage };
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motiadev/plugin-states",
-  "version": "0.14.0-beta.165-602289",
+  "version": "0.14.0-beta.165-917560",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -20,8 +20,8 @@
     "zustand": "^5.0.8"
   },
   "peerDependencies": {
-    "@motiadev/core": "0.14.0-beta.165-602289",
-    "@motiadev/ui": "0.14.0-beta.165-602289"
+    "@motiadev/core": "0.14.0-beta.165-917560",
+    "@motiadev/ui": "0.14.0-beta.165-917560"
   },
   "devDependencies": {
     "@bosh-code/tsdown-plugin-inject-css": "^2.0.0",