@motiadev/plugin-states 0.8.2-beta.140-111855

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Motia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/README.md

@@ -0,0 +1,34 @@
+# @motiadev/plugin-states
+
+This package provides React components for the Motia workbench states functionality.
+
+## TailwindCSS Compilation
+
+This package includes TailwindCSS compilation to ensure all Tailwind classes used in the components are properly compiled and available.
+
+### Build Process
+
+The build process includes two steps:
+
+1. **CSS Compilation**: Compiles `src/styles.css` using PostCSS and TailwindCSS
+2. **TypeScript Compilation**: Compiles TypeScript files to JavaScript
+
+### Development
+
+- `pnpm run build` - Build both CSS and TypeScript
+- `pnpm run dev` - Watch mode for both CSS and TypeScript
+- `pnpm run build:css` - Build only CSS
+- `pnpm run dev:css` - Watch mode for CSS only
+
+### Configuration Files
+
+- `src/styles.css` - Main CSS entry point with Tailwind imports
+
+## Features
+
+- **StatesPage**: Main states page component with search, filtering, and bulk delete
+- **StateSidebar**: Sidebar component for viewing and editing state details
+- **StateDetails**: Read-only JSON view of state values
+- **StateEditor**: JSON editor for modifying state values with validation
+- **useGetStateItems**: Hook for fetching and managing state items
+- **useStatesStore**: Zustand store for managing states UI state

package/dist/api.d.ts

@@ -0,0 +1,3 @@
+import { MotiaPluginContext } from '@motiadev/core';
+export declare const api: (motia: MotiaPluginContext) => void;
+//# sourceMappingURL=api.d.ts.map

package/dist/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAwC,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAE9F,eAAO,MAAM,GAAG,GAAI,OAAO,kBAAkB,KAAG,IAuE/C,CAAA"}

package/dist/components/json-editor.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+type JsonEditorProps = {
+    value: string;
+    height?: number | string;
+    schema?: Record<string, unknown>;
+    onChange?: (value: string) => void;
+    onValidate?: (isValid: boolean) => void;
+    language?: string;
+    readOnly?: boolean;
+};
+export declare const JsonEditor: FC<JsonEditorProps>;
+export {};
+//# sourceMappingURL=json-editor.d.ts.map

package/dist/components/json-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-editor.d.ts","sourceRoot":"","sources":["../../src/components/json-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAA;AAEnD,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAmD1C,CAAA"}

package/dist/components/state-details.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { StateItem } from '../types/state';
+type Props = {
+    state: StateItem;
+};
+export declare const StateDetails: React.FC<Props>;
+export {};
+//# sourceMappingURL=state-details.d.ts.map

package/dist/components/state-details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-details.d.ts","sourceRoot":"","sources":["../../src/components/state-details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAiE,CAAA"}

package/dist/components/state-editor.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { StateItem } from '../types/state';
+type Props = {
+    state: StateItem;
+};
+export declare const StateEditor: React.FC<Props>;
+export {};
+//# sourceMappingURL=state-editor.d.ts.map

package/dist/components/state-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-editor.d.ts","sourceRoot":"","sources":["../../src/components/state-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAG/C,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0JvC,CAAA"}

package/dist/components/state-sidebar.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { StateItem } from '../types/state';
+type Props = {
+    state: StateItem;
+    onClose: () => void;
+};
+export declare const StateSidebar: React.FC<Props>;
+export {};
+//# sourceMappingURL=state-sidebar.d.ts.map

package/dist/components/state-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-sidebar.d.ts","sourceRoot":"","sources":["../../src/components/state-sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAI/C,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmBxC,CAAA"}

package/dist/components/state-tab-label.d.ts

@@ -0,0 +1,2 @@
+export declare const StatesTabLabel: import('react').MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=state-tab-label.d.ts.map

package/dist/components/state-tab-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-tab-label.d.ts","sourceRoot":"","sources":["../../src/components/state-tab-label.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,oFAKzB,CAAA"}

package/dist/components/states-page.d.ts

@@ -0,0 +1,2 @@
+export declare const StatesPage: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=states-page.d.ts.map

package/dist/components/states-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"states-page.d.ts","sourceRoot":"","sources":["../../src/components/states-page.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,UAAU,+CAwHtB,CAAA"}

package/dist/hooks/states-hooks.d.ts

@@ -0,0 +1,9 @@
+import { StateItem } from '../types/state';
+type Output = {
+    items: StateItem[];
+    deleteItems: (ids: string[]) => void;
+    refetch: () => void;
+};
+export declare const useGetStateItems: () => Output;
+export {};
+//# sourceMappingURL=states-hooks.d.ts.map

package/dist/hooks/states-hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"states-hooks.d.ts","sourceRoot":"","sources":["../../src/hooks/states-hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,gBAAgB,QAAO,MA6BnC,CAAA"}

package/dist/index.cjs

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),l=require("@motiadev/ui"),k=require("lucide-react"),oe=require("zustand"),le=require("react18-json-view"),G=require("@monaco-editor/react");var A={exports:{}},I={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var H;function ce(){if(H)return I;H=1;var a=Symbol.for("react.transitional.element"),u=Symbol.for("react.fragment");function d(x,n,c){var b=null;if(c!==void 0&&(b=""+c),n.key!==void 0&&(b=""+n.key),"key"in n){c={};for(var i in n)i!=="key"&&(c[i]=n[i])}else c=n;return n=c.ref,{$$typeof:a,type:x,key:b,ref:n!==void 0?n:null,props:c}}return I.Fragment=u,I.jsx=d,I.jsxs=d,I}var P={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var B;function ie(){return B||(B=1,process.env.NODE_ENV!=="production"&&function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===se?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case R:return"Fragment";case _:return"Profiler";case t:return"StrictMode";case K:return"Suspense";case ee:return"SuspenseList";case te:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case O:return"Portal";case j:return(e.displayName||"Context")+".Provider";case N:return(e._context.displayName||"Context")+".Consumer";case Q:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case re:return s=e.displayName||null,s!==null?s:a(e.type)||"Memo";case Y:s=e._payload,e=e._init;try{return a(e(s))}catch{}}return null}function u(e){return""+e}function d(e){try{u(e);var s=!1}catch{s=!0}if(s){s=console;var o=s.error,m=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",m),u(e)}}function x(e){if(e===R)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Y)return"<...>";try{var s=a(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function n(){var e=$.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function b(e){if(F.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function i(e,s){function o(){q||(q=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",s))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function p(){var e=a(this.type);return V[e]||(V[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function v(e,s,o,m,T,S,J,L){return o=S.ref,e={$$typeof:w,type:e,key:s,props:S,_owner:T},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:p}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function f(e,s,o,m,T,S,J,L){var g=s.children;if(g!==void 0)if(m)if(ae(g)){for(m=0;m<g.length;m++)y(g[m]);Object.freeze&&Object.freeze(g)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(g);if(F.call(s,"key")){g=a(e);var C=Object.keys(s).filter(function(ne){return ne!=="key"});m=0<C.length?"{key: someKey, "+C.join(": ..., ")+": ...}":"{key: someKey}",z[g+m]||(C=0<C.length?"{"+C.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,m,g,C,g),z[g+m]=!0)}if(g=null,o!==void 0&&(d(o),g=""+o),b(s)&&(d(s.key),g=""+s.key),"key"in s){o={};for(var M in s)M!=="key"&&(o[M]=s[M])}else o=s;return g&&i(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),v(e,g,S,T,n(),o,J,L)}function y(e){typeof e=="object"&&e!==null&&e.$$typeof===w&&e._store&&(e._store.validated=1)}var E=h,w=Symbol.for("react.transitional.element"),O=Symbol.for("react.portal"),R=Symbol.for("react.fragment"),t=Symbol.for("react.strict_mode"),_=Symbol.for("react.profiler"),N=Symbol.for("react.consumer"),j=Symbol.for("react.context"),Q=Symbol.for("react.forward_ref"),K=Symbol.for("react.suspense"),ee=Symbol.for("react.suspense_list"),re=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),te=Symbol.for("react.activity"),se=Symbol.for("react.client.reference"),$=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,F=Object.prototype.hasOwnProperty,ae=Array.isArray,D=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var q,V={},U=E.react_stack_bottom_frame.bind(E,c)(),W=D(x(c)),z={};P.Fragment=R,P.jsx=function(e,s,o,m,T){var S=1e4>$.recentlyCreatedOwnerStacks++;return f(e,s,o,!1,m,T,S?Error("react-stack-top-frame"):U,S?D(x(e)):W)},P.jsxs=function(e,s,o,m,T){var S=1e4>$.recentlyCreatedOwnerStacks++;return f(e,s,o,!0,m,T,S?Error("react-stack-top-frame"):U,S?D(x(e)):W)}}()),P}var X;function ue(){return X||(X=1,process.env.NODE_ENV==="production"?A.exports=ce():A.exports=ie()),A.exports}var r=ue();const de=()=>{const[a,u]=h.useState([]),d=h.useCallback(()=>{fetch("/__motia/state").then(async n=>{if(n.ok)return n.json();throw await n.json()}).then(u).catch(n=>console.error(n))},[]),x=n=>{fetch("/__motia/state/delete",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({ids:n})}).then(()=>d())};return h.useEffect(()=>{d()},[d]),{items:a,deleteItems:x,refetch:d}},Z=oe.create()(a=>({selectedStateId:void 0,selectStateId:u=>a({selectedStateId:u})})),fe=({state:a})=>r.jsx(le,{src:a.value,theme:"default"}),he=({value:a,height:u=300,schema:d,onChange:x,onValidate:n,language:c="json",readOnly:b=!1})=>{const i=G.useMonaco(),p=l.useThemeStore(f=>f.theme),v=h.useMemo(()=>p==="dark"?"vs-dark":"light",[p]);return h.useEffect(()=>{i&&(i.languages.typescript.javascriptDefaults.setCompilerOptions({isolatedModules:!0}),i.languages.json.jsonDefaults.setDiagnosticsOptions({schemas:d?[{uri:window.location.href,fileMatch:["*"],schema:d}]:[]}))},[i,d,c]),r.jsx(G,{"data-testid":"json-editor",height:u,language:c,value:a,theme:v,onChange:f=>{f||n?.(!1),x?.(f??"")},onValidate:f=>n?.(f.length===0),options:{readOnly:b,scrollBeyondLastLine:!1,minimap:{enabled:!1}}})},me=({state:a})=>{const[u,d]=h.useState(!1),[x,n]=h.useState(!0),[c,b]=h.useState(JSON.stringify(a.value,null,2)),[i,p]=h.useState(!1),[v,f]=h.useState("idle"),y=h.useRef(JSON.stringify(a.value,null,2));h.useEffect(()=>{b(JSON.stringify(a.value,null,2))},[a.value]);const E=h.useCallback(t=>{p(t!==y.current),b(t),f("idle")},[]),w=async()=>{if(!(!x||!i))try{d(!0),f("idle");const t=await fetch("/__motia/state",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:a.key,groupId:a.groupId,value:JSON.parse(c)})});if(!t.ok)throw new Error(`HTTP error! status: ${t.status}`);y.current=c,f("success"),p(!1),setTimeout(()=>{f("idle")},3e3)}catch(t){console.error("Failed to save state:",t),f("error")}finally{d(!1)}},O=h.useCallback(()=>{b(JSON.stringify(a.value,null,2)),p(!1),f("idle")},[a.value]),R=h.useMemo(()=>v==="success"?r.jsx("div",{className:"bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800 rounded-lg p-2",children:r.jsxs("div",{className:"flex items-center gap-2 text-green-700 dark:text-green-400 text-sm",children:[r.jsx(k.Check,{className:"w-4 h-4"}),"State saved successfully!"]})}):v==="error"?r.jsx("div",{className:"bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800 rounded-lg p-2",children:r.jsxs("div",{className:"flex items-center gap-2 text-red-700 dark:text-red-400 text-sm",children:[r.jsx(k.AlertCircle,{className:"w-4 h-4"}),"Failed to save state. Please try again."]})}):r.jsx("div",{className:"text-xs text-muted-foreground",children:i?r.jsxs("span",{className:"flex items-center gap-1",children:[r.jsx("div",{className:"w-2 h-2 bg-orange-500 rounded-full"}),"Unsaved changes"]}):r.jsxs("span",{className:"flex items-center gap-1",children:[r.jsx("div",{className:"w-2 h-2 bg-green-500 rounded-full"}),"Up to date"]})}),[v,i]);return r.jsxs("div",{className:"flex flex-col gap-2 h-full",children:[r.jsx("p",{className:"text-xs text-muted-foreground",children:"Modify the state value using the JSON editor below."}),r.jsx("div",{className:"space-y-3 pt-2 flex flex-col",children:r.jsxs("div",{className:"relative flex-1",children:[r.jsx(he,{value:c,onChange:E,onValidate:n,height:"calc(100vh - 300px)"}),!x&&r.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:[r.jsx(k.AlertCircle,{className:"w-3 h-3"}),"Invalid JSON"]})]})}),r.jsxs("div",{className:"flex items-center justify-between pt-2",children:[R,r.jsxs("div",{className:"flex items-center gap-2",children:[i&&r.jsx(l.Button,{variant:"secondary",onClick:O,disabled:u,children:"Reset"}),r.jsx(l.Button,{onClick:w,variant:"accent",disabled:u||!x||!i,"data-testid":"state-save-button",children:u?r.jsxs(r.Fragment,{children:[r.jsx(k.Loader2,{className:"w-3 h-3 animate-spin mr-1"}),"Saving..."]}):r.jsxs(r.Fragment,{children:[r.jsx(k.Save,{className:"w-3 h-3 mr-1"}),"Save Changes"]})})]})]})]})},ge=({state:a,onClose:u})=>r.jsx(l.Sidebar,{onClose:u,title:"State Details",initialWidth:500,tabs:[{label:"Overview",content:r.jsx(fe,{state:a})},{label:"Editor",content:r.jsx(me,{state:a})}],actions:[{icon:r.jsx(k.X,{}),onClick:u,label:"Close"}]}),xe=()=>{const a=Z(t=>t.selectedStateId),u=Z(t=>t.selectStateId),{items:d,deleteItems:x,refetch:n}=de(),[c,b]=h.useState(""),i=h.useMemo(()=>d.filter(t=>t.groupId.toLowerCase().includes(c.toLowerCase())||t.key.toLowerCase().includes(c.toLowerCase())),[d,c]),p=h.useMemo(()=>a?i.find(t=>`${t.groupId}:${t.key}`===a):null,[i,a]),[v,f]=h.useState(new Set),y=t=>u(`${t.groupId}:${t.key}`),E=()=>u(void 0),w=()=>{x(Array.from(v)),f(new Set)},O=t=>{const _=v.has(`${t.groupId}:${t.key}`);f(N=>{const j=new Set(N);return _?j.delete(`${t.groupId}:${t.key}`):j.add(`${t.groupId}:${t.key}`),j})},R=t=>{f(_=>{const N=new Set(_);return t?i.forEach(j=>N.add(`${j.groupId}:${j.key}`)):i.forEach(j=>N.delete(`${j.groupId}:${j.key}`)),N})};return r.jsxs(r.Fragment,{children:[p&&r.jsx(ge,{state:p,onClose:E}),r.jsxs("div",{className:"grid grid-rows-[auto_1fr] h-full","data-testid":"states-container",children:[r.jsxs("div",{className:"flex p-2 border-b gap-2","data-testid":"logs-search-container",children:[r.jsxs("div",{className:"flex-1 relative",children:[r.jsx(l.Input,{variant:"shade",value:c,onChange:t=>b(t.target.value),className:"px-9 font-medium",placeholder:"Search by Group ID or Key"}),r.jsx(k.Search,{className:"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50"}),r.jsx(k.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:()=>b("")})]}),r.jsxs(l.Button,{variant:"default",className:"h-[34px]",disabled:v.size===0,onClick:w,children:[r.jsx(k.Trash,{})," Delete"]}),r.jsx(l.Button,{variant:"default",className:"h-[34px]",onClick:n,children:r.jsx(k.RefreshCw,{className:"w-4 h-4 text-muted-foreground"})})]}),r.jsxs(l.Table,{children:[r.jsx(l.TableHeader,{className:"sticky top-0 bg-background/20 backdrop-blur-sm",children:r.jsxs(l.TableRow,{children:[r.jsx(l.TableHead,{children:r.jsx(l.Checkbox,{onClick:t=>t.stopPropagation(),onCheckedChange:R})}),r.jsx(l.TableHead,{className:"rounded-0",children:"Group ID"}),r.jsx(l.TableHead,{children:"Key"}),r.jsx(l.TableHead,{children:"Type"})]})}),r.jsx(l.TableBody,{children:i.map(t=>r.jsxs(l.TableRow,{"data-testid":`item-${t}`,onClick:()=>y(t),className:l.cn("font-mono font-semibold cursor-pointer border-0",p===t?"bg-muted-foreground/10 hover:bg-muted-foreground/20":"hover:bg-muted-foreground/10"),children:[r.jsx(l.TableCell,{onClick:_=>_.stopPropagation(),children:r.jsx(l.Checkbox,{checked:v.has(`${t.groupId}:${t.key}`),onClick:()=>O(t)})}),r.jsx(l.TableCell,{className:"hover:bg-transparent",children:t.groupId}),r.jsx(l.TableCell,{className:"hover:bg-transparent",children:t.key}),r.jsx(l.TableCell,{className:"hover:bg-transparent",children:t.type})]},`${t.groupId}:${t.key}`))})]})]})]})};exports.StatesPage=xe;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { StatesPage } from './components/states-page';
+export type { StateItem } from './types/state';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA"}

package/dist/index.js

@@ -0,0 +1,536 @@
+import me, { useState as S, useCallback as V, useEffect as U, useMemo as $, useRef as he } from "react";
+import { useThemeStore as xe, Button as D, Sidebar as pe, Input as ge, Table as ve, TableHeader as be, TableRow as Z, TableHead as I, Checkbox as Q, TableBody as je, cn as ke, TableCell as P } from "@motiadev/ui";
+import { Check as Se, AlertCircle as K, Loader2 as Ee, Save as ye, X as ae, Search as Te, Trash as _e, RefreshCw as Ne } from "lucide-react";
+import { create as Re } from "zustand";
+import we from "react18-json-view";
+import Ce, { useMonaco as Oe } from "@monaco-editor/react";
+var A = { exports: {} }, C = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ee;
+function Ie() {
+  if (ee) return C;
+  ee = 1;
+  var a = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
+  function d(h, n, l) {
+    var x = null;
+    if (l !== void 0 && (x = "" + l), n.key !== void 0 && (x = "" + n.key), "key" in n) {
+      l = {};
+      for (var c in n)
+        c !== "key" && (l[c] = n[c]);
+    } else l = n;
+    return n = l.ref, {
+      $$typeof: a,
+      type: h,
+      key: x,
+      ref: n !== void 0 ? n : null,
+      props: l
+    };
+  }
+  return C.Fragment = i, C.jsx = d, C.jsxs = d, C;
+}
+var O = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var re;
+function Pe() {
+  return re || (re = 1, process.env.NODE_ENV !== "production" && function() {
+    function a(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === de ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case y:
+          return "Fragment";
+        case T:
+          return "Profiler";
+        case t:
+          return "StrictMode";
+        case oe:
+          return "Suspense";
+        case le:
+          return "SuspenseList";
+        case ie:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case w:
+            return "Portal";
+          case v:
+            return (e.displayName || "Context") + ".Provider";
+          case _:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case ne:
+            var s = e.render;
+            return e = e.displayName, e || (e = s.displayName || s.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case ce:
+            return s = e.displayName || null, s !== null ? s : a(e.type) || "Memo";
+          case W:
+            s = e._payload, e = e._init;
+            try {
+              return a(e(s));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function i(e) {
+      return "" + e;
+    }
+    function d(e) {
+      try {
+        i(e);
+        var s = !1;
+      } catch {
+        s = !0;
+      }
+      if (s) {
+        s = console;
+        var o = s.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
+          s,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          f
+        ), i(e);
+      }
+    }
+    function h(e) {
+      if (e === y) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === W)
+        return "<...>";
+      try {
+        var s = a(e);
+        return s ? "<" + s + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function n() {
+      var e = J.A;
+      return e === null ? null : e.getOwner();
+    }
+    function l() {
+      return Error("react-stack-top-frame");
+    }
+    function x(e) {
+      if (q.call(e, "key")) {
+        var s = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (s && s.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function c(e, s) {
+      function o() {
+        G || (G = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          s
+        ));
+      }
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
+        configurable: !0
+      });
+    }
+    function p() {
+      var e = a(this.type);
+      return z[e] || (z[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function g(e, s, o, f, k, b, Y, F) {
+      return o = b.ref, e = {
+        $$typeof: N,
+        type: e,
+        key: s,
+        props: b,
+        _owner: k
+      }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: p
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: Y
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: F
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function u(e, s, o, f, k, b, Y, F) {
+      var m = s.children;
+      if (m !== void 0)
+        if (f)
+          if (ue(m)) {
+            for (f = 0; f < m.length; f++)
+              E(m[f]);
+            Object.freeze && Object.freeze(m);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else E(m);
+      if (q.call(s, "key")) {
+        m = a(e);
+        var R = Object.keys(s).filter(function(fe) {
+          return fe !== "key";
+        });
+        f = 0 < R.length ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}", B[m + f] || (R = 0 < R.length ? "{" + R.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          f,
+          m,
+          R,
+          m
+        ), B[m + f] = !0);
+      }
+      if (m = null, o !== void 0 && (d(o), m = "" + o), x(s) && (d(s.key), m = "" + s.key), "key" in s) {
+        o = {};
+        for (var M in s)
+          M !== "key" && (o[M] = s[M]);
+      } else o = s;
+      return m && c(
+        o,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), g(
+        e,
+        m,
+        b,
+        k,
+        n(),
+        o,
+        Y,
+        F
+      );
+    }
+    function E(e) {
+      typeof e == "object" && e !== null && e.$$typeof === N && e._store && (e._store.validated = 1);
+    }
+    var j = me, N = Symbol.for("react.transitional.element"), w = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), t = Symbol.for("react.strict_mode"), T = Symbol.for("react.profiler"), _ = Symbol.for("react.consumer"), v = Symbol.for("react.context"), ne = Symbol.for("react.forward_ref"), oe = Symbol.for("react.suspense"), le = Symbol.for("react.suspense_list"), ce = Symbol.for("react.memo"), W = Symbol.for("react.lazy"), ie = Symbol.for("react.activity"), de = Symbol.for("react.client.reference"), J = j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, q = Object.prototype.hasOwnProperty, ue = Array.isArray, L = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    j = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var G, z = {}, H = j.react_stack_bottom_frame.bind(
+      j,
+      l
+    )(), X = L(h(l)), B = {};
+    O.Fragment = y, O.jsx = function(e, s, o, f, k) {
+      var b = 1e4 > J.recentlyCreatedOwnerStacks++;
+      return u(
+        e,
+        s,
+        o,
+        !1,
+        f,
+        k,
+        b ? Error("react-stack-top-frame") : H,
+        b ? L(h(e)) : X
+      );
+    }, O.jsxs = function(e, s, o, f, k) {
+      var b = 1e4 > J.recentlyCreatedOwnerStacks++;
+      return u(
+        e,
+        s,
+        o,
+        !0,
+        f,
+        k,
+        b ? Error("react-stack-top-frame") : H,
+        b ? L(h(e)) : X
+      );
+    };
+  }()), O;
+}
+var te;
+function Ae() {
+  return te || (te = 1, process.env.NODE_ENV === "production" ? A.exports = Ie() : A.exports = Pe()), A.exports;
+}
+var r = Ae();
+const $e = () => {
+  const [a, i] = S([]), d = V(() => {
+    fetch("/__motia/state").then(async (n) => {
+      if (n.ok)
+        return n.json();
+      throw await n.json();
+    }).then(i).catch((n) => console.error(n));
+  }, []), h = (n) => {
+    fetch("/__motia/state/delete", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ ids: n })
+    }).then(() => d());
+  };
+  return U(() => {
+    d();
+  }, [d]), { items: a, deleteItems: h, refetch: d };
+}, se = Re()((a) => ({
+  selectedStateId: void 0,
+  selectStateId: (i) => a({ selectedStateId: i })
+})), De = ({ state: a }) => /* @__PURE__ */ r.jsx(we, { src: a.value, theme: "default" }), Je = ({
+  value: a,
+  height: i = 300,
+  schema: d,
+  onChange: h,
+  onValidate: n,
+  language: l = "json",
+  readOnly: x = !1
+}) => {
+  const c = Oe(), p = xe((u) => u.theme), g = $(() => p === "dark" ? "vs-dark" : "light", [p]);
+  return U(() => {
+    c && (c.languages.typescript.javascriptDefaults.setCompilerOptions({ isolatedModules: !0 }), c.languages.json.jsonDefaults.setDiagnosticsOptions({
+      schemas: d ? [
+        {
+          uri: window.location.href,
+          fileMatch: ["*"],
+          schema: d
+        }
+      ] : []
+    }));
+  }, [c, d, l]), /* @__PURE__ */ r.jsx(
+    Ce,
+    {
+      "data-testid": "json-editor",
+      height: i,
+      language: l,
+      value: a,
+      theme: g,
+      onChange: (u) => {
+        u || n?.(!1), h?.(u ?? "");
+      },
+      onValidate: (u) => n?.(u.length === 0),
+      options: {
+        readOnly: x,
+        scrollBeyondLastLine: !1,
+        minimap: { enabled: !1 }
+      }
+    }
+  );
+}, Le = ({ state: a }) => {
+  const [i, d] = S(!1), [h, n] = S(!0), [l, x] = S(JSON.stringify(a.value, null, 2)), [c, p] = S(!1), [g, u] = S("idle"), E = he(JSON.stringify(a.value, null, 2));
+  U(() => {
+    x(JSON.stringify(a.value, null, 2));
+  }, [a.value]);
+  const j = V((t) => {
+    p(t !== E.current), x(t), u("idle");
+  }, []), N = async () => {
+    if (!(!h || !c))
+      try {
+        d(!0), u("idle");
+        const t = await fetch("/__motia/state", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            key: a.key,
+            groupId: a.groupId,
+            value: JSON.parse(l)
+          })
+        });
+        if (!t.ok)
+          throw new Error(`HTTP error! status: ${t.status}`);
+        E.current = l, u("success"), p(!1), setTimeout(() => {
+          u("idle");
+        }, 3e3);
+      } catch (t) {
+        console.error("Failed to save state:", t), u("error");
+      } finally {
+        d(!1);
+      }
+  }, w = V(() => {
+    x(JSON.stringify(a.value, null, 2)), p(!1), u("idle");
+  }, [a.value]), y = $(() => g === "success" ? /* @__PURE__ */ r.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__ */ r.jsxs("div", { className: "flex items-center gap-2 text-green-700 dark:text-green-400 text-sm", children: [
+    /* @__PURE__ */ r.jsx(Se, { className: "w-4 h-4" }),
+    "State saved successfully!"
+  ] }) }) : g === "error" ? /* @__PURE__ */ r.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__ */ r.jsxs("div", { className: "flex items-center gap-2 text-red-700 dark:text-red-400 text-sm", children: [
+    /* @__PURE__ */ r.jsx(K, { className: "w-4 h-4" }),
+    "Failed to save state. Please try again."
+  ] }) }) : /* @__PURE__ */ r.jsx("div", { className: "text-xs text-muted-foreground", children: c ? /* @__PURE__ */ r.jsxs("span", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ r.jsx("div", { className: "w-2 h-2 bg-orange-500 rounded-full" }),
+    "Unsaved changes"
+  ] }) : /* @__PURE__ */ r.jsxs("span", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ r.jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }),
+    "Up to date"
+  ] }) }), [g, c]);
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 h-full", children: [
+    /* @__PURE__ */ r.jsx("p", { className: "text-xs text-muted-foreground", children: "Modify the state value using the JSON editor below." }),
+    /* @__PURE__ */ r.jsx("div", { className: "space-y-3 pt-2 flex flex-col", children: /* @__PURE__ */ r.jsxs("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ r.jsx(
+        Je,
+        {
+          value: l,
+          onChange: j,
+          onValidate: n,
+          height: "calc(100vh - 300px)"
+        }
+      ),
+      !h && /* @__PURE__ */ r.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__ */ r.jsx(K, { className: "w-3 h-3" }),
+        "Invalid JSON"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex items-center justify-between pt-2", children: [
+      y,
+      /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
+        c && /* @__PURE__ */ r.jsx(D, { variant: "secondary", onClick: w, disabled: i, children: "Reset" }),
+        /* @__PURE__ */ r.jsx(
+          D,
+          {
+            onClick: N,
+            variant: "accent",
+            disabled: i || !h || !c,
+            "data-testid": "state-save-button",
+            children: i ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+              /* @__PURE__ */ r.jsx(Ee, { className: "w-3 h-3 animate-spin mr-1" }),
+              "Saving..."
+            ] }) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+              /* @__PURE__ */ r.jsx(ye, { className: "w-3 h-3 mr-1" }),
+              "Save Changes"
+            ] })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, Ye = ({ state: a, onClose: i }) => /* @__PURE__ */ r.jsx(
+  pe,
+  {
+    onClose: i,
+    title: "State Details",
+    initialWidth: 500,
+    tabs: [
+      {
+        label: "Overview",
+        content: /* @__PURE__ */ r.jsx(De, { state: a })
+      },
+      {
+        label: "Editor",
+        content: /* @__PURE__ */ r.jsx(Le, { state: a })
+      }
+    ],
+    actions: [{ icon: /* @__PURE__ */ r.jsx(ae, {}), onClick: i, label: "Close" }]
+  }
+), Ge = () => {
+  const a = se((t) => t.selectedStateId), i = se((t) => t.selectStateId), { items: d, deleteItems: h, refetch: n } = $e(), [l, x] = S(""), c = $(() => d.filter((t) => t.groupId.toLowerCase().includes(l.toLowerCase()) || t.key.toLowerCase().includes(l.toLowerCase())), [d, l]), p = $(
+    () => a ? c.find((t) => `${t.groupId}:${t.key}` === a) : null,
+    [c, a]
+  ), [g, u] = S(/* @__PURE__ */ new Set()), E = (t) => i(`${t.groupId}:${t.key}`), j = () => i(void 0), N = () => {
+    h(Array.from(g)), u(/* @__PURE__ */ new Set());
+  }, w = (t) => {
+    const T = g.has(`${t.groupId}:${t.key}`);
+    u((_) => {
+      const v = new Set(_);
+      return T ? v.delete(`${t.groupId}:${t.key}`) : v.add(`${t.groupId}:${t.key}`), v;
+    });
+  }, y = (t) => {
+    u((T) => {
+      const _ = new Set(T);
+      return t ? c.forEach((v) => _.add(`${v.groupId}:${v.key}`)) : c.forEach((v) => _.delete(`${v.groupId}:${v.key}`)), _;
+    });
+  };
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    p && /* @__PURE__ */ r.jsx(Ye, { state: p, onClose: j }),
+    /* @__PURE__ */ r.jsxs("div", { className: "grid grid-rows-[auto_1fr] h-full", "data-testid": "states-container", children: [
+      /* @__PURE__ */ r.jsxs("div", { className: "flex p-2 border-b gap-2", "data-testid": "logs-search-container", children: [
+        /* @__PURE__ */ r.jsxs("div", { className: "flex-1 relative", children: [
+          /* @__PURE__ */ r.jsx(
+            ge,
+            {
+              variant: "shade",
+              value: l,
+              onChange: (t) => x(t.target.value),
+              className: "px-9 font-medium",
+              placeholder: "Search by Group ID or Key"
+            }
+          ),
+          /* @__PURE__ */ r.jsx(Te, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" }),
+          /* @__PURE__ */ r.jsx(
+            ae,
+            {
+              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: () => x("")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r.jsxs(D, { variant: "default", className: "h-[34px]", disabled: g.size === 0, onClick: N, children: [
+          /* @__PURE__ */ r.jsx(_e, {}),
+          " Delete"
+        ] }),
+        /* @__PURE__ */ r.jsx(D, { variant: "default", className: "h-[34px]", onClick: n, children: /* @__PURE__ */ r.jsx(Ne, { className: "w-4 h-4 text-muted-foreground" }) })
+      ] }),
+      /* @__PURE__ */ r.jsxs(ve, { children: [
+        /* @__PURE__ */ r.jsx(be, { className: "sticky top-0 bg-background/20 backdrop-blur-sm", children: /* @__PURE__ */ r.jsxs(Z, { children: [
+          /* @__PURE__ */ r.jsx(I, { children: /* @__PURE__ */ r.jsx(Q, { onClick: (t) => t.stopPropagation(), onCheckedChange: y }) }),
+          /* @__PURE__ */ r.jsx(I, { className: "rounded-0", children: "Group ID" }),
+          /* @__PURE__ */ r.jsx(I, { children: "Key" }),
+          /* @__PURE__ */ r.jsx(I, { children: "Type" })
+        ] }) }),
+        /* @__PURE__ */ r.jsx(je, { children: c.map((t) => /* @__PURE__ */ r.jsxs(
+          Z,
+          {
+            "data-testid": `item-${t}`,
+            onClick: () => E(t),
+            className: ke(
+              "font-mono font-semibold cursor-pointer border-0",
+              p === t ? "bg-muted-foreground/10 hover:bg-muted-foreground/20" : "hover:bg-muted-foreground/10"
+            ),
+            children: [
+              /* @__PURE__ */ r.jsx(P, { onClick: (T) => T.stopPropagation(), children: /* @__PURE__ */ r.jsx(
+                Q,
+                {
+                  checked: g.has(`${t.groupId}:${t.key}`),
+                  onClick: () => w(t)
+                }
+              ) }),
+              /* @__PURE__ */ r.jsx(P, { className: "hover:bg-transparent", children: t.groupId }),
+              /* @__PURE__ */ r.jsx(P, { className: "hover:bg-transparent", children: t.key }),
+              /* @__PURE__ */ r.jsx(P, { className: "hover:bg-transparent", children: t.type })
+            ]
+          },
+          `${t.groupId}:${t.key}`
+        )) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Ge as StatesPage
+};

package/dist/plugin-states.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-400:oklch(70.4% .191 22.216);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-950:oklch(25.8% .092 26.042);--color-orange-500:oklch(70.5% .213 47.604);--color-green-50:oklch(98.2% .018 155.826);--color-green-200:oklch(92.5% .084 155.995);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-green-950:oklch(26.6% .065 152.934);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--animate-spin:spin 1s linear infinite;--blur-sm:8px;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-weight-500:var(--font-weight-500);--font-weight-600:var(--font-weight-600);--font-weight-700:var(--font-weight-700)}}@layer base{*{border-color:var(--border)}body{background-color:var(--background);color:var(--foreground)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.right-2{right:calc(var(--spacing)*2)}.right-3{right:calc(var(--spacing)*3)}.left-3{left:calc(var(--spacing)*3)}.mr-1{margin-right:calc(var(--spacing)*1)}.flex{display:flex}.grid{display:grid}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-\[34px\]{height:34px}.h-full{height:100%}.w-2{width:calc(var(--spacing)*2)}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.flex-1{flex:1}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.bg-background\/20{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/20{background-color:color-mix(in oklab,var(--background)20%,transparent)}}.bg-destructive\/90{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.bg-destructive\/90{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.bg-green-50{background-color:var(--color-green-50)}.bg-green-500{background-color:var(--color-green-500)}.bg-muted-foreground\/10{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.bg-muted-foreground\/10{background-color:color-mix(in oklab,var(--muted-foreground)10%,transparent)}}.bg-orange-500{background-color:var(--color-orange-500)}.bg-red-50{background-color:var(--color-red-50)}.p-2{padding:calc(var(--spacing)*2)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-9{padding-inline:calc(var(--spacing)*9)}.py-1{padding-block:calc(var(--spacing)*1)}.pt-2{padding-top:calc(var(--spacing)*2)}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-green-700{color:var(--color-green-700)}.text-muted-foreground,.text-muted-foreground\/50{color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/50{color:color-mix(in oklab,var(--muted-foreground)50%,transparent)}}.text-red-700{color:var(--color-red-700)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}@media (hover:hover){.hover\:bg-muted-foreground\/10:hover{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-muted-foreground\/10:hover{background-color:color-mix(in oklab,var(--muted-foreground)10%,transparent)}}.hover\:bg-muted-foreground\/20:hover{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-muted-foreground\/20:hover{background-color:color-mix(in oklab,var(--muted-foreground)20%,transparent)}}.hover\:bg-transparent:hover{background-color:#0000}.hover\:text-muted-foreground:hover{color:var(--muted-foreground)}}.dark\:border-green-800:is(.dark *){border-color:var(--color-green-800)}.dark\:border-red-800:is(.dark *){border-color:var(--color-red-800)}.dark\:bg-green-950\/20:is(.dark *){background-color:#032e1533}@supports (color:color-mix(in lab,red,red)){.dark\:bg-green-950\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-green-950)20%,transparent)}}.dark\:bg-red-950\/20:is(.dark *){background-color:#46080933}@supports (color:color-mix(in lab,red,red)){.dark\:bg-red-950\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-red-950)20%,transparent)}}.dark\:text-green-400:is(.dark *){color:var(--color-green-400)}.dark\:text-red-400:is(.dark *){color:var(--color-red-400)}}:root{--default-font-family:"DM Sans",ui-sans-serif,sans-serif;--font-dm-mono:"DM Mono",ui-monospace,monospace;color-scheme:light dark;font-size:16px;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"),serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--accent-1000:#2862fe;--accent-970:#2862fef7;--accent-950:#2862fef2;--accent-900:#2862fee5;--accent-800:#2862fecc;--accent-700:#2862feb2;--accent-600:#2862fe99;--accent-500:#2862fe80;--accent-400:#2862fe66;--accent-300:#2862fe4d;--accent-200:#2862fe33;--accent-100:#2862fe1a;--accent-50:#2862fe0d;--accent-30:#2862fe08;--dark-1000:#0a0a0a;--dark-970:#0a0a0af7;--dark-950:#0a0a0af2;--dark-900:#0a0a0ae5;--dark-800:#0a0a0acc;--dark-700:#0a0a0ab2;--dark-600:#0a0a0a99;--dark-500:#0a0a0a80;--dark-400:#0a0a0a66;--dark-300:#0a0a0a4d;--dark-200:#0a0a0a33;--dark-100:#0a0a0a1a;--dark-50:#0a0a0a0d;--dark-30:#0a0a0a08;--light-1000:#fff;--light-970:#fffffff7;--light-950:#fffffff2;--light-900:#ffffffe5;--light-800:#fffc;--light-700:#ffffffb2;--light-600:#fff9;--light-500:#ffffff80;--light-400:#fff6;--light-300:#ffffff4d;--light-200:#fff3;--light-100:#ffffff1a;--light-50:#ffffff0d;--light-30:#ffffff08;--error:#d61355;--canvas-background:#ebebeb;--background:var(--light-1000);--foreground:var(--dark-1000);--surface-content:var(--dark-30);--surface-component:var(--dark-50);--surface-light-100:var(--dark-100);--surface-light-200:var(--dark-200);--border:var(--dark-100);--border-accent:var(--accent-1000);--states-hover:var(--dark-30);--states-selected:var(--dark-100);--states-active:var(--accent-1000);--text-header:var(--dark-1000);--text-body:var(--dark-600);--text-placeholder:var(--dark-400);--text-accent:var(--accent-1000);--text-error:var(--error);--icon-active:var(--dark-1000);--icon-light:var(--dark-600);--icon-component:var(--dark-400);--icon-accent:var(--accent-1000);--primary:var(--accent-1000);--primary-foreground:var(--light-1000);--secondary:var(--surface-component);--secondary-foreground:var(--text-body);--muted:var(--surface-light-100);--muted-foreground:var(--text-body);--accent:var(--accent-1000);--accent-foreground:var(--light-1000);--destructive:var(--error);--destructive-foreground:var(--light-1000);--card:var(--surface-content);--card-foreground:var(--foreground);--popover:var(--surface-content);--popover-foreground:var(--foreground);--input:var(--states-hover);--ring:var(--border-accent);--chart-1:var(--accent-1000);--chart-2:var(--accent-800);--chart-3:var(--accent-600);--chart-4:var(--accent-400);--chart-5:var(--accent-200);--header:var(--background);--header-foreground:var(--text-header);--header-primary:var(--primary);--header-primary-foreground:var(--primary-foreground);--header-accent:var(--surface-component);--header-accent-foreground:var(--text-body);--header-border:var(--border);--header-ring:var(--ring);--sidebar:var(--background);--sidebar-foreground:var(--text-header);--sidebar-primary:var(--primary);--sidebar-primary-foreground:var(--primary-foreground);--sidebar-accent:var(--surface-component);--sidebar-accent-foreground:var(--text-body);--sidebar-border:var(--border);--sidebar-ring:var(--ring);width:100%}.dark{--canvas-background:#030303;--background:var(--dark-1000);--foreground:var(--light-1000);--surface-content:var(--light-30);--surface-component:var(--light-50);--surface-light-100:var(--light-100);--surface-light-200:var(--light-200);--border:var(--light-100);--states-hover:var(--light-30);--states-selected:var(--light-100);--text-header:var(--light-1000);--text-body:var(--light-600);--text-placeholder:var(--light-400);--icon-active:var(--light-1000);--icon-light:var(--light-600);--icon-component:var(--light-400);--secondary-foreground:var(--light-600);--muted-foreground:var(--light-600);--card:var(--surface-content);--card-foreground:var(--foreground);--popover:var(--surface-content);--popover-foreground:var(--foreground);--input:var(--states-hover);--ring:var(--border-accent);--chart-1:var(--accent-1000);--chart-2:var(--accent-800);--chart-3:var(--accent-600);--chart-4:var(--accent-400);--chart-5:var(--accent-200);--header:var(--background);--header-foreground:var(--text-header);--header-primary:var(--primary);--header-primary-foreground:var(--primary-foreground);--header-accent:var(--surface-component);--header-accent-foreground:var(--text-body);--header-border:var(--border);--header-ring:var(--ring);--sidebar:var(--background);--sidebar-foreground:var(--text-header);--sidebar-primary:var(--primary);--sidebar-primary-foreground:var(--primary-foreground);--sidebar-accent:var(--surface-component);--sidebar-accent-foreground:var(--text-body);--sidebar-border:var(--border);--sidebar-ring:var(--ring)}.json-view{background-color:#0000!important}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}

package/dist/plugin.cjs

@@ -0,0 +1 @@
+"use strict";const n=s=>{s.registerApi({method:"GET",path:"/__motia/state"},async r=>{try{const e=r.queryParams.groupId,t=r.queryParams.filter?JSON.parse(r.queryParams.filter):void 0;return{status:200,body:await s.state.items({groupId:e,filter:t})}}catch(e){return{status:500,body:{error:e instanceof Error?e.message:"Unknown error"}}}}),s.registerApi({method:"POST",path:"/__motia/state"},async(r,e)=>{try{const{key:t,groupId:a,value:o}=r.body;return await e.state.set(a,t,o),{status:200,body:{key:t,groupId:a,value:o}}}catch(t){return{status:500,body:{error:t instanceof Error?t.message:"Unknown error"}}}}),s.registerApi({method:"POST",path:"/__motia/state/delete"},async(r,e)=>{try{for(const t of r.body.ids){const[a,o]=t.split(":");await e.state.delete(a,o)}return{status:204,body:""}}catch(t){return{status:500,body:{error:t instanceof Error?t.message:"Unknown error"}}}})};function i(s){return n(s),{workbench:[{packageName:"@motiadev/plugin-states",cssImports:["@motiadev/plugin-states/dist/plugin-states.css"],label:"States",position:"bottom",componentName:"StatesPage",labelIcon:"file"}]}}module.exports=i;

package/dist/plugin.d.ts

@@ -0,0 +1,3 @@
+import { MotiaPlugin, MotiaPluginContext } from '@motiadev/core';
+export default function plugin(motia: MotiaPluginContext): MotiaPlugin;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAGrE,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,kBAAkB,GAAG,WAAW,CAerE"}

package/dist/plugin.js

@@ -0,0 +1,80 @@
+const n = (s) => {
+  s.registerApi(
+    {
+      method: "GET",
+      path: "/__motia/state"
+    },
+    async (r) => {
+      try {
+        const e = r.queryParams.groupId, t = r.queryParams.filter ? JSON.parse(r.queryParams.filter) : void 0;
+        return {
+          status: 200,
+          body: await s.state.items({ groupId: e, filter: t })
+        };
+      } catch (e) {
+        return {
+          status: 500,
+          body: { error: e instanceof Error ? e.message : "Unknown error" }
+        };
+      }
+    }
+  ), s.registerApi(
+    {
+      method: "POST",
+      path: "/__motia/state"
+    },
+    async (r, e) => {
+      try {
+        const { key: t, groupId: a, value: o } = r.body;
+        return await e.state.set(a, t, o), {
+          status: 200,
+          body: { key: t, groupId: a, value: o }
+        };
+      } catch (t) {
+        return {
+          status: 500,
+          body: { error: t instanceof Error ? t.message : "Unknown error" }
+        };
+      }
+    }
+  ), s.registerApi(
+    {
+      method: "POST",
+      path: "/__motia/state/delete"
+    },
+    async (r, e) => {
+      try {
+        for (const t of r.body.ids) {
+          const [a, o] = t.split(":");
+          await e.state.delete(a, o);
+        }
+        return {
+          status: 204,
+          body: ""
+        };
+      } catch (t) {
+        return {
+          status: 500,
+          body: { error: t instanceof Error ? t.message : "Unknown error" }
+        };
+      }
+    }
+  );
+};
+function i(s) {
+  return n(s), {
+    workbench: [
+      {
+        packageName: "@motiadev/plugin-states",
+        cssImports: ["@motiadev/plugin-states/dist/plugin-states.css"],
+        label: "States",
+        position: "bottom",
+        componentName: "StatesPage",
+        labelIcon: "file"
+      }
+    ]
+  };
+}
+export {
+  i as default
+};

package/dist/stores/use-states-store.d.ts

@@ -0,0 +1,6 @@
+export type StatesState = {
+    selectedStateId?: string;
+    selectStateId: (stateId?: string) => void;
+};
+export declare const useStatesStore: import('zustand').UseBoundStore<import('zustand').StoreApi<StatesState>>;
+//# sourceMappingURL=use-states-store.d.ts.map

package/dist/stores/use-states-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-states-store.d.ts","sourceRoot":"","sources":["../../src/stores/use-states-store.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,cAAc,0EAGxB,CAAA"}

package/dist/types/state.d.ts

@@ -0,0 +1,7 @@
+export interface StateItem {
+    groupId: string;
+    key: string;
+    type: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null';
+    value: string | number | boolean | object | unknown[] | null;
+}
+//# sourceMappingURL=state.d.ts.map

package/dist/types/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/types/state.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IACnE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,EAAE,GAAG,IAAI,CAAA;CAC7D"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@motiadev/plugin-states",
+  "version": "0.8.2-beta.140-111855",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.js",
+      "require": "./dist/plugin.cjs"
+    },
+    "./styles.css": "./dist/plugin-states.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "lucide-react": "^0.545.0",
+    "react18-json-view": "^0.2.9",
+    "zustand": "^5.0.8"
+  },
+  "peerDependencies": {
+    "@motiadev/ui": "0.8.2-beta.140-111855",
+    "@motiadev/stream-client-browser": "0.8.2-beta.140-111855",
+    "@motiadev/core": "0.8.2-beta.140-111855"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.14",
+    "@types/express": "^5.0.3",
+    "@types/node": "^24.7.2",
+    "@types/react": "^19.2.2",
+    "@vitejs/plugin-react": "^5.0.4",
+    "react": "^19.2.0",
+    "tailwindcss": "^4.1.14",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.10",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "clean": "rm -rf dist"
+  }
+}