@json-render/react-native 0.8.0 → 0.9.1

package/README.md

@@ -214,6 +214,26 @@ const systemPrompt = catalog.prompt({
 });
 ```
 
+## External Store (Controlled Mode)
+
+For full control over state, pass a `StateStore` to bypass the internal state and wire json-render to any state management library (Redux, Zustand, XState, etc.):
+
+```tsx
+import { createStateStore, type StateStore } from "@json-render/react-native";
+
+// Use the built-in store outside of React
+const store = createStateStore({ count: 0 });
+
+<StateProvider store={store}>
+  {children}
+</StateProvider>
+
+// Mutate from anywhere — React will re-render automatically:
+store.set("/count", 1);
+```
+
+When `store` is provided, `initialState` and `onStateChange` are ignored. The store is the single source of truth. The same `store` prop is available on `createRenderer`, `JSONUIProvider`, and `StateProvider`.
+
 ## Hooks
 
 | Hook | Purpose |
@@ -227,3 +247,4 @@ const systemPrompt = catalog.prompt({
 | `useAction(name)` | Get a single action dispatch function |
 | `useUIStream(options)` | Stream specs from an API endpoint |
 | `createStandardActionHandlers(options)` | Create handlers for standard actions |
+| `createStateStore(initialState)` | Create a framework-agnostic in-memory `StateStore` |

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ComponentType } from 'react';
-import { StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, FlatElement } from '@json-render/core';
-export { Spec, StateModel } from '@json-render/core';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, FlatElement } from '@json-render/core';
+export { Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
 export { ElementTreeSchema, ElementTreeSpec, ReactNativeSchema, ReactNativeSpec, elementTreeSchema, schema } from './schema.mjs';
 export { ActionDefinition, ComponentDefinition, standardActionDefinitions, standardComponentDefinitions } from './catalog.mjs';
 import 'zod';
@@ -18,21 +18,40 @@ interface StateContextValue {
     set: (path: string, value: unknown) => void;
     /** Update multiple values at once */
     update: (updates: Record<string, unknown>) => void;
+    /** Return the live state snapshot from the underlying store (not the React render snapshot). */
+    getSnapshot: () => StateModel;
 }
 /**
  * Props for StateProvider
  */
 interface StateProviderProps {
-    /** Initial state model */
+    /**
+     * External store that owns the state. When provided, the provider operates
+     * in **controlled mode** — `initialState` and `onStateChange` are ignored
+     * and the store is the single source of truth.
+     */
+    store?: StateStore;
+    /** Initial state model (used only in uncontrolled mode) */
     initialState?: StateModel;
-    /** Callback when state changes */
-    onStateChange?: (path: string, value: unknown) => void;
+    /**
+     * Callback when state changes (used only in uncontrolled mode).
+     * Called once per `set` or `update` with all changed entries.
+     */
+    onStateChange?: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void;
     children: ReactNode;
 }
 /**
- * Provider for state model context
+ * Provider for state model context.
+ *
+ * Supports two modes:
+ * - **Controlled**: pass a `store` prop (e.g. backed by Redux / Zustand).
+ * - **Uncontrolled** (default): omit `store` and optionally pass
+ *   `initialState` / `onStateChange`.
  */
-declare function StateProvider({ initialState, onStateChange, children, }: StateProviderProps): react_jsx_runtime.JSX.Element;
+declare function StateProvider({ store: externalStore, initialState, onStateChange, children, }: StateProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the state context
  */
@@ -391,7 +410,12 @@ interface JSONUIProviderProps {
      * Custom components are merged with (and override) standard components.
      */
     registry?: ComponentRegistry;
-    /** Initial state model */
+    /**
+     * External store (controlled mode). When provided, `initialState` and
+     * `onStateChange` are ignored.
+     */
+    store?: StateStore;
+    /** Initial state model (uncontrolled mode) */
     initialState?: Record<string, unknown>;
     /** Action handlers */
     handlers?: Record<string, (params: Record<string, unknown>) => Promise<unknown> | unknown>;
@@ -399,14 +423,17 @@ interface JSONUIProviderProps {
     navigate?: (path: string) => void;
     /** Custom validation functions */
     validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
-    /** Callback when state changes */
-    onStateChange?: (path: string, value: unknown) => void;
+    /** Callback when state changes (uncontrolled mode) */
+    onStateChange?: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void;
     children: ReactNode;
 }
 /**
  * Combined provider for all JSONUI contexts
  */
-declare function JSONUIProvider({ registry, initialState, handlers, navigate, validationFunctions, onStateChange, children, }: JSONUIProviderProps): react_jsx_runtime.JSX.Element;
+declare function JSONUIProvider({ registry, store, initialState, handlers, navigate, validationFunctions, onStateChange, children, }: JSONUIProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Result returned by defineRegistry
  */
@@ -463,12 +490,20 @@ declare function defineRegistry<C extends Catalog>(_catalog: C, options: {
 interface CreateRendererProps {
     /** The spec to render (AI-generated JSON) */
     spec: Spec | null;
-    /** State context for dynamic values */
+    /**
+     * External store (controlled mode). When provided, `state` and
+     * `onStateChange` are ignored.
+     */
+    store?: StateStore;
+    /** State context for dynamic values (uncontrolled mode) */
     state?: Record<string, unknown>;
     /** Action handler */
     onAction?: (actionName: string, params?: Record<string, unknown>) => void;
-    /** Callback when state changes (e.g., from form inputs) */
-    onStateChange?: (path: string, value: unknown) => void;
+    /** Callback when state changes (uncontrolled mode) */
+    onStateChange?: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void;
     /** Whether the spec is currently loading/streaming */
     loading?: boolean;
     /** Fallback component for unknown types */

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ComponentType } from 'react';
-import { StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, FlatElement } from '@json-render/core';
-export { Spec, StateModel } from '@json-render/core';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, FlatElement } from '@json-render/core';
+export { Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
 export { ElementTreeSchema, ElementTreeSpec, ReactNativeSchema, ReactNativeSpec, elementTreeSchema, schema } from './schema.js';
 export { ActionDefinition, ComponentDefinition, standardActionDefinitions, standardComponentDefinitions } from './catalog.js';
 import 'zod';
@@ -18,21 +18,40 @@ interface StateContextValue {
     set: (path: string, value: unknown) => void;
     /** Update multiple values at once */
     update: (updates: Record<string, unknown>) => void;
+    /** Return the live state snapshot from the underlying store (not the React render snapshot). */
+    getSnapshot: () => StateModel;
 }
 /**
  * Props for StateProvider
  */
 interface StateProviderProps {
-    /** Initial state model */
+    /**
+     * External store that owns the state. When provided, the provider operates
+     * in **controlled mode** — `initialState` and `onStateChange` are ignored
+     * and the store is the single source of truth.
+     */
+    store?: StateStore;
+    /** Initial state model (used only in uncontrolled mode) */
     initialState?: StateModel;
-    /** Callback when state changes */
-    onStateChange?: (path: string, value: unknown) => void;
+    /**
+     * Callback when state changes (used only in uncontrolled mode).
+     * Called once per `set` or `update` with all changed entries.
+     */
+    onStateChange?: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void;
     children: ReactNode;
 }
 /**
- * Provider for state model context
+ * Provider for state model context.
+ *
+ * Supports two modes:
+ * - **Controlled**: pass a `store` prop (e.g. backed by Redux / Zustand).
+ * - **Uncontrolled** (default): omit `store` and optionally pass
+ *   `initialState` / `onStateChange`.
  */
-declare function StateProvider({ initialState, onStateChange, children, }: StateProviderProps): react_jsx_runtime.JSX.Element;
+declare function StateProvider({ store: externalStore, initialState, onStateChange, children, }: StateProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the state context
  */
@@ -391,7 +410,12 @@ interface JSONUIProviderProps {
      * Custom components are merged with (and override) standard components.
      */
     registry?: ComponentRegistry;
-    /** Initial state model */
+    /**
+     * External store (controlled mode). When provided, `initialState` and
+     * `onStateChange` are ignored.
+     */
+    store?: StateStore;
+    /** Initial state model (uncontrolled mode) */
     initialState?: Record<string, unknown>;
     /** Action handlers */
     handlers?: Record<string, (params: Record<string, unknown>) => Promise<unknown> | unknown>;
@@ -399,14 +423,17 @@ interface JSONUIProviderProps {
     navigate?: (path: string) => void;
     /** Custom validation functions */
     validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
-    /** Callback when state changes */
-    onStateChange?: (path: string, value: unknown) => void;
+    /** Callback when state changes (uncontrolled mode) */
+    onStateChange?: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void;
     children: ReactNode;
 }
 /**
  * Combined provider for all JSONUI contexts
  */
-declare function JSONUIProvider({ registry, initialState, handlers, navigate, validationFunctions, onStateChange, children, }: JSONUIProviderProps): react_jsx_runtime.JSX.Element;
+declare function JSONUIProvider({ registry, store, initialState, handlers, navigate, validationFunctions, onStateChange, children, }: JSONUIProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Result returned by defineRegistry
  */
@@ -463,12 +490,20 @@ declare function defineRegistry<C extends Catalog>(_catalog: C, options: {
 interface CreateRendererProps {
     /** The spec to render (AI-generated JSON) */
     spec: Spec | null;
-    /** State context for dynamic values */
+    /**
+     * External store (controlled mode). When provided, `state` and
+     * `onStateChange` are ignored.
+     */
+    store?: StateStore;
+    /** State context for dynamic values (uncontrolled mode) */
     state?: Record<string, unknown>;
     /** Action handler */
     onAction?: (actionName: string, params?: Record<string, unknown>) => void;
-    /** Callback when state changes (e.g., from form inputs) */
-    onStateChange?: (path: string, value: unknown) => void;
+    /** Callback when state changes (uncontrolled mode) */
+    onStateChange?: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void;
     /** Whether the spec is currently loading/streaming */
     loading?: boolean;
     /** Fallback component for unknown types */

package/dist/index.js

@@ -40,6 +40,7 @@ __export(index_exports, {
   VisibilityProvider: () => VisibilityProvider,
   createRenderer: () => createRenderer,
   createStandardActionHandlers: () => createStandardActionHandlers,
+  createStateStore: () => import_core8.createStateStore,
   defineRegistry: () => defineRegistry,
   elementTreeSchema: () => elementTreeSchema,
   flatToTree: () => flatToTree,
@@ -62,68 +63,104 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/contexts/state.tsx
+// ../react-state/dist/index.mjs
 var import_react = require("react");
 var import_core = require("@json-render/core");
+var import_store_utils = require("@json-render/core/store-utils");
 var import_jsx_runtime = require("react/jsx-runtime");
 var StateContext = (0, import_react.createContext)(null);
+function computeInitialFlat(isControlled, initialState) {
+  if (isControlled) return null;
+  if (Object.keys(initialState).length === 0) return {};
+  return (0, import_store_utils.flattenToPointers)(initialState);
+}
 function StateProvider({
+  store: externalStore,
   initialState = {},
   onStateChange,
   children
 }) {
-  const [state, setStateInternal] = (0, import_react.useState)(initialState);
-  const stateRef = (0, import_react.useRef)(state);
-  stateRef.current = state;
-  const initialStateJsonRef = (0, import_react.useRef)(JSON.stringify(initialState));
+  const internalStoreRef = (0, import_react.useRef)(void 0);
+  if (!externalStore && !internalStoreRef.current) {
+    internalStoreRef.current = (0, import_core.createStateStore)(initialState);
+  }
+  const store = externalStore ?? internalStoreRef.current;
+  const storeRef = (0, import_react.useRef)(store);
+  storeRef.current = store;
+  const isControlledRef = (0, import_react.useRef)(!!externalStore);
+  isControlledRef.current = !!externalStore;
+  const initialModeRef = (0, import_react.useRef)(externalStore ? "controlled" : "uncontrolled");
+  const modeWarnedRef = (0, import_react.useRef)(false);
+  if (process.env.NODE_ENV !== "production") {
+    const currentMode = externalStore ? "controlled" : "uncontrolled";
+    if (currentMode !== initialModeRef.current && !modeWarnedRef.current) {
+      modeWarnedRef.current = true;
+      console.warn(
+        `StateProvider: switching from ${initialModeRef.current} to ${currentMode} mode is not supported.`
+      );
+    }
+  }
+  const prevInitialStateRef = (0, import_react.useRef)(initialState);
+  const prevFlatRef = (0, import_react.useRef)(
+    computeInitialFlat(!!externalStore, initialState)
+  );
   (0, import_react.useEffect)(() => {
-    const newJson = JSON.stringify(initialState);
-    if (newJson !== initialStateJsonRef.current) {
-      initialStateJsonRef.current = newJson;
-      if (initialState && Object.keys(initialState).length > 0) {
-        setStateInternal((prev) => ({ ...prev, ...initialState }));
+    if (externalStore) return;
+    if (initialState === prevInitialStateRef.current) return;
+    prevInitialStateRef.current = initialState;
+    const nextFlat = initialState && Object.keys(initialState).length > 0 ? (0, import_store_utils.flattenToPointers)(initialState) : {};
+    const prevFlat = prevFlatRef.current ?? {};
+    const allKeys = /* @__PURE__ */ new Set([
+      ...Object.keys(prevFlat),
+      ...Object.keys(nextFlat)
+    ]);
+    const updates = {};
+    for (const key of allKeys) {
+      if (prevFlat[key] !== nextFlat[key]) {
+        updates[key] = key in nextFlat ? nextFlat[key] : void 0;
       }
     }
-  }, [initialState]);
-  const get = (0, import_react.useCallback)(
-    (path) => (0, import_core.getByPath)(stateRef.current, path),
-    []
-  );
-  const set = (0, import_react.useCallback)(
-    (path, value2) => {
-      setStateInternal((prev) => {
-        const next = { ...prev };
-        (0, import_core.setByPath)(next, path, value2);
-        return next;
-      });
-      onStateChange?.(path, value2);
-    },
-    [onStateChange]
+    prevFlatRef.current = nextFlat;
+    if (Object.keys(updates).length > 0) {
+      store.update(updates);
+    }
+  }, [externalStore, initialState, store]);
+  const state = (0, import_react.useSyncExternalStore)(
+    store.subscribe,
+    store.getSnapshot,
+    store.getServerSnapshot ?? store.getSnapshot
   );
-  const update = (0, import_react.useCallback)(
-    (updates) => {
-      const entries = Object.entries(updates);
-      setStateInternal((prev) => {
-        const next = { ...prev };
-        for (const [path, value2] of entries) {
-          (0, import_core.setByPath)(next, path, value2);
+  const onStateChangeRef = (0, import_react.useRef)(onStateChange);
+  onStateChangeRef.current = onStateChange;
+  const set = (0, import_react.useCallback)((path, value2) => {
+    const s = storeRef.current;
+    const prev = s.getSnapshot();
+    s.set(path, value2);
+    if (!isControlledRef.current && s.getSnapshot() !== prev) {
+      onStateChangeRef.current?.([{ path, value: value2 }]);
+    }
+  }, []);
+  const update = (0, import_react.useCallback)((updates) => {
+    const s = storeRef.current;
+    const prev = s.getSnapshot();
+    s.update(updates);
+    if (!isControlledRef.current && s.getSnapshot() !== prev) {
+      const changes = [];
+      for (const [path, value2] of Object.entries(updates)) {
+        if ((0, import_core.getByPath)(prev, path) !== value2) {
+          changes.push({ path, value: value2 });
         }
-        return next;
-      });
-      for (const [path, value2] of entries) {
-        onStateChange?.(path, value2);
       }
-    },
-    [onStateChange]
-  );
+      if (changes.length > 0) {
+        onStateChangeRef.current?.(changes);
+      }
+    }
+  }, []);
+  const get = (0, import_react.useCallback)((path) => storeRef.current.get(path), []);
+  const getSnapshot = (0, import_react.useCallback)(() => storeRef.current.getSnapshot(), []);
   const value = (0, import_react.useMemo)(
-    () => ({
-      state,
-      get,
-      set,
-      update
-    }),
-    [state, get, set, update]
+    () => ({ state, get, set, update, getSnapshot }),
+    [state, get, set, update, getSnapshot]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StateContext.Provider, { value, children });
 }
@@ -226,7 +263,7 @@ function ActionProvider({
   navigate,
   children
 }) {
-  const { state, get, set } = useStateStore();
+  const { get, set, getSnapshot } = useStateStore();
   const [handlers, setHandlers] = (0, import_react3.useState)(initialHandlers);
   const [loadingActions, setLoadingActions] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
   const [pendingConfirmation, setPendingConfirmation] = (0, import_react3.useState)(null);
@@ -238,7 +275,7 @@ function ActionProvider({
   );
   const execute = (0, import_react3.useCallback)(
     async (binding) => {
-      const resolved = (0, import_core3.resolveAction)(binding, state);
+      const resolved = (0, import_core3.resolveAction)(binding, getSnapshot());
       if (resolved.action === "setState" && resolved.params) {
         const statePath = resolved.params.statePath;
         const value2 = resolved.params.value;
@@ -361,7 +398,7 @@ function ActionProvider({
         });
       }
     },
-    [state, handlers, get, set, navigate]
+    [handlers, get, set, getSnapshot, navigate]
   );
   const confirm = (0, import_react3.useCallback)(() => {
     pendingConfirmation?.resolve();
@@ -762,6 +799,9 @@ var schema = (0, import_core5.defineSchema)(
 );
 var elementTreeSchema = schema;
 
+// src/index.ts
+var import_core8 = require("@json-render/core");
+
 // src/renderer.tsx
 var import_react7 = __toESM(require("react"));
 var import_core7 = require("@json-render/core");
@@ -1994,6 +2034,7 @@ var ElementRenderer = import_react7.default.memo(function ElementRenderer2({
   const repeatScope = useRepeatScope();
   const { ctx } = useVisibility();
   const { execute } = useActions();
+  const { getSnapshot } = useStateStore();
   const fullCtx = (0, import_react7.useMemo)(
     () => repeatScope ? {
       ...ctx,
@@ -2006,23 +2047,27 @@ var ElementRenderer = import_react7.default.memo(function ElementRenderer2({
   const isVisible = element.visible === void 0 ? true : (0, import_core7.evaluateVisibility)(element.visible, fullCtx);
   const onBindings = element.on;
   const emit = (0, import_react7.useCallback)(
-    (eventName) => {
+    async (eventName) => {
       const binding = onBindings?.[eventName];
       if (!binding) return;
       const actionBindings = Array.isArray(binding) ? binding : [binding];
       for (const b of actionBindings) {
         if (!b.params) {
-          execute(b);
+          await execute(b);
           continue;
         }
+        const liveCtx = {
+          ...fullCtx,
+          stateModel: getSnapshot()
+        };
         const resolved = {};
         for (const [key, val] of Object.entries(b.params)) {
-          resolved[key] = (0, import_core7.resolveActionParam)(val, fullCtx);
+          resolved[key] = (0, import_core7.resolveActionParam)(val, liveCtx);
         }
-        execute({ ...b, params: resolved });
+        await execute({ ...b, params: resolved });
       }
     },
-    [onBindings, execute, fullCtx]
+    [onBindings, execute, fullCtx, getSnapshot]
   );
   if (!isVisible) {
     return null;
@@ -2160,6 +2205,7 @@ function Renderer({
 }
 function JSONUIProvider({
   registry,
+  store,
   initialState,
   handlers,
   navigate,
@@ -2167,10 +2213,18 @@ function JSONUIProvider({
   onStateChange,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StateProvider, { initialState, onStateChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { customFunctions: validationFunctions, children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
-  ] }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    StateProvider,
+    {
+      store,
+      initialState,
+      onStateChange,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { customFunctions: validationFunctions, children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
+      ] }) }) })
+    }
+  );
 }
 function ConfirmationDialogManager() {
   const { pendingConfirmation, confirm, cancel } = useActions();
@@ -2235,6 +2289,7 @@ function createRenderer(catalog, components) {
   const registry = components;
   return function CatalogRenderer({
     spec,
+    store,
     state,
     onAction,
     onStateChange,
@@ -2250,18 +2305,26 @@ function createRenderer(catalog, components) {
         has: () => true
       }
     ) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StateProvider, { initialState: state, onStateChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        Renderer,
-        {
-          spec,
-          registry,
-          loading,
-          fallback
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
-    ] }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      StateProvider,
+      {
+        store,
+        initialState: state,
+        onStateChange,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            Renderer,
+            {
+              spec,
+              registry,
+              loading,
+              fallback
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
+        ] }) }) })
+      }
+    );
   };
 }
 
@@ -2671,6 +2734,7 @@ var standardActionDefinitions = {
   VisibilityProvider,
   createRenderer,
   createStandardActionHandlers,
+  createStateStore,
   defineRegistry,
   elementTreeSchema,
   flatToTree,