@mmapp/react 0.1.0-alpha.18 → 0.1.0-alpha.20

package/dist/index.mjs

@@ -1,3 +1,71 @@
+import {
+  Accordion,
+  AnimatedBox,
+  Badge,
+  Button,
+  Canvas3D,
+  Card,
+  Chart,
+  Column,
+  DataGrid,
+  Divider,
+  Each,
+  Field,
+  Grid,
+  Heading,
+  Icon,
+  Image,
+  Link,
+  Markdown,
+  MetricCard,
+  Modal,
+  NavLink,
+  RoleGuard,
+  Route,
+  Router,
+  Row,
+  ScrollArea,
+  Section,
+  Select,
+  ServerGrid,
+  Show,
+  Slot,
+  Spacer,
+  Stack,
+  Tabs,
+  Text,
+  TextInput
+} from "./chunk-ZDWACXZN.mjs";
+import {
+  AtomRegistryImpl,
+  ComponentTreeRenderer,
+  DevPlayer,
+  ExperienceRenderer,
+  PlayerProvider,
+  buildActionScope,
+  buildEvalContext,
+  builtinAtoms,
+  createApiResolver,
+  createCoreAtomRegistry,
+  mergeRegistries,
+  resolveAllBindings,
+  resolveBinding,
+  setMutationResolver,
+  setQueryResolver,
+  useMutation,
+  usePlayerContext,
+  useQuery
+} from "./chunk-ZAHMWAER.mjs";
+import {
+  ScopeContext,
+  buildLoopScope,
+  buildScope,
+  builtinFunctions,
+  evaluateExpression,
+  mergeScope,
+  useScope
+} from "./chunk-WV7DVCP6.mjs";
+
 // src/core/WorkflowRuntime.ts
 import {
   StateMachine,
@@ -314,184 +382,19 @@ function useDuringAction(config) {
   }, [runtime2, intervalMs, immediate, enabled, ...states]);
 }
 
-// src/hooks/useQuery.ts
-import { useState, useEffect as useEffect8, useCallback, useRef as useRef8 } from "react";
-var _globalResolver = null;
-function setQueryResolver(resolver) {
-  _globalResolver = resolver;
-}
-function useQuery(slugOrDef, params = {}) {
-  const slug = typeof slugOrDef === "string" ? slugOrDef : slugOrDef.slug;
-  const [data, setData] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [total, setTotal] = useState(void 0);
-  const paramsRef = useRef8(params);
-  paramsRef.current = params;
-  const fetchData = useCallback(async () => {
-    if (paramsRef.current.enabled === false) {
-      setLoading(false);
-      return;
-    }
-    const resolver = _globalResolver;
-    if (!resolver) {
-      setError(new Error(`useQuery: No query resolver configured. Wrap your app in a WorkflowProvider.`));
-      setLoading(false);
-      return;
-    }
-    try {
-      setLoading(true);
-      setError(null);
-      const result2 = await resolver.query(slug, paramsRef.current);
-      setData(result2.data);
-      setTotal(result2.total);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-    } finally {
-      setLoading(false);
-    }
-  }, [slug]);
-  useEffect8(() => {
-    fetchData();
-  }, [fetchData]);
-  useEffect8(() => {
-    if (!params.refetchInterval || params.refetchInterval <= 0) return;
-    const interval = setInterval(fetchData, params.refetchInterval);
-    return () => clearInterval(interval);
-  }, [fetchData, params.refetchInterval]);
-  const hasMore = total !== void 0 && data.length < total;
-  const result = {
-    data,
-    loading,
-    error,
-    refetch: fetchData,
-    total,
-    hasMore
-  };
-  return result;
-}
-
-// src/hooks/useMutation.ts
-import { useState as useState2, useCallback as useCallback2, useRef as useRef9 } from "react";
-var _globalMutationResolver = null;
-function setMutationResolver(resolver) {
-  _globalMutationResolver = resolver;
-}
-function useMutation(slugOrDef) {
-  const slug = typeof slugOrDef === "string" ? slugOrDef : slugOrDef.slug;
-  const [isPending, setIsPending] = useState2(false);
-  const [error, setError] = useState2(null);
-  const slugRef = useRef9(slug);
-  slugRef.current = slug;
-  const getResolver = useCallback2(() => {
-    const resolver = _globalMutationResolver;
-    if (!resolver) {
-      throw new Error(`useMutation: No mutation resolver configured. Wrap your app in a WorkflowProvider.`);
-    }
-    return resolver;
-  }, []);
-  const create = useCallback2(async (input) => {
-    try {
-      setIsPending(true);
-      setError(null);
-      const resolver = getResolver();
-      return await resolver.create(slugRef.current, input);
-    } catch (err) {
-      const e = err instanceof Error ? err : new Error(String(err));
-      setError(e);
-      throw e;
-    } finally {
-      setIsPending(false);
-    }
-  }, [getResolver]);
-  const update = useCallback2(async (instanceId, fields) => {
-    try {
-      setIsPending(true);
-      setError(null);
-      const resolver = getResolver();
-      await resolver.update(slugRef.current, instanceId, fields);
-    } catch (err) {
-      const e = err instanceof Error ? err : new Error(String(err));
-      setError(e);
-      throw e;
-    } finally {
-      setIsPending(false);
-    }
-  }, [getResolver]);
-  const transitionFn = useCallback2(async (instanceId, transitionName, input) => {
-    try {
-      setIsPending(true);
-      setError(null);
-      const resolver = getResolver();
-      await resolver.transition(slugRef.current, instanceId, transitionName, input);
-    } catch (err) {
-      const e = err instanceof Error ? err : new Error(String(err));
-      setError(e);
-      throw e;
-    } finally {
-      setIsPending(false);
-    }
-  }, [getResolver]);
-  const next = useCallback2(async (instanceId, input) => {
-    try {
-      setIsPending(true);
-      setError(null);
-      const resolver = getResolver();
-      if (resolver.next) {
-        await resolver.next(slugRef.current, instanceId, input);
-      } else {
-        await resolver.transition(slugRef.current, instanceId, "__next__", input);
-      }
-    } catch (err) {
-      const e = err instanceof Error ? err : new Error(String(err));
-      setError(e);
-      throw e;
-    } finally {
-      setIsPending(false);
-    }
-  }, [getResolver]);
-  const remove = useCallback2(async (instanceId) => {
-    try {
-      setIsPending(true);
-      setError(null);
-      const resolver = getResolver();
-      await resolver.remove(slugRef.current, instanceId);
-    } catch (err) {
-      const e = err instanceof Error ? err : new Error(String(err));
-      setError(e);
-      throw e;
-    } finally {
-      setIsPending(false);
-    }
-  }, [getResolver]);
-  const reset = useCallback2(() => setError(null), []);
-  const handle = {
-    create,
-    update,
-    transition: transitionFn,
-    trigger: transitionFn,
-    next,
-    remove,
-    isPending,
-    error,
-    reset
-  };
-  return handle;
-}
-
 // src/hooks/useView.ts
-import { useState as useState3, useEffect as useEffect9, useCallback as useCallback3, useRef as useRef10 } from "react";
+import { useState, useEffect as useEffect8, useCallback, useRef as useRef8 } from "react";
 var _globalViewResolver = null;
 function setViewResolver(resolver) {
   _globalViewResolver = resolver;
 }
 function useView(idOrSlug) {
-  const [view, setView] = useState3(null);
-  const [loading, setLoading] = useState3(!!idOrSlug);
-  const [error, setError] = useState3(null);
-  const idRef = useRef10(idOrSlug);
+  const [view, setView] = useState(null);
+  const [loading, setLoading] = useState(!!idOrSlug);
+  const [error, setError] = useState(null);
+  const idRef = useRef8(idOrSlug);
   idRef.current = idOrSlug;
-  const fetchView = useCallback3(async () => {
+  const fetchView = useCallback(async () => {
     const id = idRef.current;
     if (!id) {
       setView(null);
@@ -515,7 +418,7 @@ function useView(idOrSlug) {
       setLoading(false);
     }
   }, []);
-  useEffect9(() => {
+  useEffect8(() => {
     fetchView();
   }, [idOrSlug, fetchView]);
   const result = { view, loading, error, refetch: fetchView };
@@ -523,18 +426,18 @@ function useView(idOrSlug) {
 }
 
 // src/hooks/useExpressionLibrary.ts
-import { useState as useState4, useEffect as useEffect10, useCallback as useCallback4, useRef as useRef11 } from "react";
+import { useState as useState2, useEffect as useEffect9, useCallback as useCallback2, useRef as useRef9 } from "react";
 var _globalExpressionLibraryResolver = null;
 function setExpressionLibraryResolver(resolver) {
   _globalExpressionLibraryResolver = resolver;
 }
 function useExpressionLibrary(slug) {
-  const [record, setRecord] = useState4(null);
-  const [loading, setLoading] = useState4(!!slug);
-  const [error, setError] = useState4(null);
-  const slugRef = useRef11(slug);
+  const [record, setRecord] = useState2(null);
+  const [loading, setLoading] = useState2(!!slug);
+  const [error, setError] = useState2(null);
+  const slugRef = useRef9(slug);
   slugRef.current = slug;
-  const fetchLibrary = useCallback4(async () => {
+  const fetchLibrary = useCallback2(async () => {
     const s = slugRef.current;
     if (!s) {
       setRecord(null);
@@ -558,7 +461,7 @@ function useExpressionLibrary(slug) {
       setLoading(false);
     }
   }, []);
-  useEffect10(() => {
+  useEffect9(() => {
     fetchLibrary();
   }, [slug, fetchLibrary]);
   const handle = {
@@ -575,7 +478,7 @@ function useExpressionLibrary(slug) {
 }
 
 // src/hooks/useServerAction.ts
-import { useState as useState5, useCallback as useCallback5, useRef as useRef12 } from "react";
+import { useState as useState3, useCallback as useCallback3, useRef as useRef10 } from "react";
 var _globalServerActionResolver = null;
 function setServerActionResolver(resolver) {
   _globalServerActionResolver = resolver;
@@ -603,12 +506,12 @@ function getDefaultResolver() {
   };
 }
 function useServerAction(actionName, options) {
-  const [loading, setLoading] = useState5(false);
-  const [error, setError] = useState5(null);
-  const [result, setResult] = useState5(null);
-  const optionsRef = useRef12(options);
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const [result, setResult] = useState3(null);
+  const optionsRef = useRef10(options);
   optionsRef.current = options;
-  const execute = useCallback5(
+  const execute = useCallback3(
     async (input) => {
       const resolver = _globalServerActionResolver || getDefaultResolver();
       const { instanceId, definitionId, onSuccess, onError } = optionsRef.current;
@@ -630,7 +533,7 @@ function useServerAction(actionName, options) {
     },
     [actionName]
   );
-  const reset = useCallback5(() => {
+  const reset = useCallback3(() => {
     setError(null);
     setResult(null);
   }, []);
@@ -645,7 +548,7 @@ function useServerAction(actionName, options) {
 }
 
 // src/hooks/useServerState.ts
-import { useState as useState6, useEffect as useEffect11, useRef as useRef13, useCallback as useCallback6 } from "react";
+import { useState as useState4, useEffect as useEffect10, useRef as useRef11, useCallback as useCallback4 } from "react";
 var _globalServerStateResolver = null;
 function setServerStateResolver(resolver) {
   _globalServerStateResolver = resolver;
@@ -675,21 +578,21 @@ async function fetchInitialState(instanceId) {
   };
 }
 function useServerState(instanceId, options = {}) {
-  const [state2, setState] = useState6("");
-  const [stateData, setStateData] = useState6({});
-  const [status, setStatus] = useState6("UNKNOWN");
-  const [loading, setLoading] = useState6(true);
-  const [error, setError] = useState6(null);
-  const [connected, setConnected] = useState6(false);
-  const [lastTransition, setLastTransition] = useState6();
-  const [reconnectKey, setReconnectKey] = useState6(0);
-  const optionsRef = useRef13(options);
+  const [state2, setState] = useState4("");
+  const [stateData, setStateData] = useState4({});
+  const [status, setStatus] = useState4("UNKNOWN");
+  const [loading, setLoading] = useState4(true);
+  const [error, setError] = useState4(null);
+  const [connected, setConnected] = useState4(false);
+  const [lastTransition, setLastTransition] = useState4();
+  const [reconnectKey, setReconnectKey] = useState4(0);
+  const optionsRef = useRef11(options);
   optionsRef.current = options;
-  const eventSourceRef = useRef13(null);
-  const reconnect = useCallback6(() => {
+  const eventSourceRef = useRef11(null);
+  const reconnect = useCallback4(() => {
     setReconnectKey((k) => k + 1);
   }, []);
-  useEffect11(() => {
+  useEffect10(() => {
     if (options.enabled === false || !instanceId) return;
     let cancelled = false;
     setLoading(true);
@@ -708,7 +611,7 @@ function useServerState(instanceId, options = {}) {
       cancelled = true;
     };
   }, [instanceId, options.enabled, reconnectKey]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (options.enabled === false || !instanceId) return;
     const token = getToken();
     if (!token) {
@@ -802,19 +705,19 @@ function useServerState(instanceId, options = {}) {
 }
 
 // src/hooks/useWorkflow.ts
-import { useState as useState7, useEffect as useEffect12, useMemo, useCallback as useCallback7 } from "react";
+import { useState as useState5, useEffect as useEffect11, useMemo, useCallback as useCallback5 } from "react";
 function useWorkflow(definition, options) {
   const runtime2 = useMemo(() => new WorkflowRuntime({
     definition,
     initialData: options?.initialData,
     actionHandlers: options?.actionHandlers
   }), [definition.id]);
-  const [snapshot, setSnapshot] = useState7(() => runtime2.getSnapshot());
-  useEffect12(() => {
+  const [snapshot, setSnapshot] = useState5(() => runtime2.getSnapshot());
+  useEffect11(() => {
     const unsub = runtime2.subscribe(setSnapshot);
     return unsub;
   }, [runtime2]);
-  const transition2 = useCallback7(async (name, data) => {
+  const transition2 = useCallback5(async (name, data) => {
     const result = await runtime2.transition(name, data);
     options?.onTransition?.(result);
     return result;
@@ -832,12 +735,12 @@ function useWorkflow(definition, options) {
 }
 
 // src/hooks/useTransition.ts
-import { useCallback as useCallback8, useState as useState8 } from "react";
+import { useCallback as useCallback6, useState as useState6 } from "react";
 function useTransition(transitionName, _config) {
   const runtime2 = useRuntimeContext();
-  const [pending, setPending] = useState8(false);
+  const [pending, setPending] = useState6(false);
   const available = runtime2.sm.getAvailableTransitions().some((t) => t.name === transitionName);
-  const fire = useCallback8(async (data) => {
+  const fire = useCallback6(async (data) => {
     setPending(true);
     try {
       return await runtime2.transition(transitionName, data);
@@ -850,7 +753,7 @@ function useTransition(transitionName, _config) {
 }
 
 // src/hooks/useRole.ts
-import { useMemo as useMemo2, useCallback as useCallback9 } from "react";
+import { useMemo as useMemo2, useCallback as useCallback7 } from "react";
 var _globalHierarchy = null;
 function setRoleHierarchy(hierarchy) {
   _globalHierarchy = hierarchy;
@@ -910,7 +813,7 @@ function useRole(roleName, options = {}) {
     }
     return { hasRole: hasRole2, permissions, roles: userRoles, highestRole };
   }, [runtime2, roleName, hierarchy, inheritPermissions]);
-  const isAbove = useCallback9(
+  const isAbove = useCallback7(
     (role) => {
       if (hierarchy.length === 0) return false;
       const targetIdx = hierarchy.indexOf(role);
@@ -923,7 +826,7 @@ function useRole(roleName, options = {}) {
     },
     [hierarchy, result.roles]
   );
-  const isBelow = useCallback9(
+  const isBelow = useCallback7(
     (role) => {
       if (hierarchy.length === 0) return false;
       const targetIdx = hierarchy.indexOf(role);
@@ -940,7 +843,7 @@ function useRole(roleName, options = {}) {
     },
     [hierarchy, result.roles]
   );
-  const hasPermission = useCallback9(
+  const hasPermission = useCallback7(
     (permission) => {
       return result.permissions.includes(permission);
     },
@@ -1041,7 +944,7 @@ function usePackage(packageSlug) {
 }
 
 // src/hooks/useRouter.ts
-import { useState as useState9, useEffect as useEffect13, useCallback as useCallback10, useMemo as useMemo5, useRef as useRef14 } from "react";
+import { useState as useState7, useEffect as useEffect12, useCallback as useCallback8, useMemo as useMemo5, useRef as useRef12 } from "react";
 function parsePath(fullPath, basePath) {
   let path = fullPath;
   if (basePath && path.startsWith(basePath)) {
@@ -1130,26 +1033,26 @@ function buildLocation(basePath, routes) {
 }
 function useRouter(options = {}) {
   const { routes = [], guards: globalGuards = [], onGuardReject, basePath = "" } = options;
-  const routesRef = useRef14(routes);
+  const routesRef = useRef12(routes);
   routesRef.current = routes;
-  const guardsRef = useRef14(globalGuards);
+  const guardsRef = useRef12(globalGuards);
   guardsRef.current = globalGuards;
-  const onRejectRef = useRef14(onGuardReject);
+  const onRejectRef = useRef12(onGuardReject);
   onRejectRef.current = onGuardReject;
-  const basePathRef = useRef14(basePath);
+  const basePathRef = useRef12(basePath);
   basePathRef.current = basePath;
-  const [location, setLocation] = useState9(
+  const [location, setLocation] = useState7(
     () => buildLocation(basePath, routes)
   );
-  const [isNavigating, setIsNavigating] = useState9(false);
-  useEffect13(() => {
+  const [isNavigating, setIsNavigating] = useState7(false);
+  useEffect12(() => {
     const handler = () => {
       setLocation(buildLocation(basePathRef.current, routesRef.current));
     };
     window.addEventListener("popstate", handler);
     return () => window.removeEventListener("popstate", handler);
   }, []);
-  const navigate = useCallback10(
+  const navigate = useCallback8(
     async (path, replace2) => {
       const { pathname, query, hash } = parsePath(path, basePathRef.current);
       const found = findRoute(pathname, routesRef.current);
@@ -1198,15 +1101,15 @@ function useRouter(options = {}) {
     },
     [location]
   );
-  const push = useCallback10((path) => navigate(path, false), [navigate]);
-  const replace = useCallback10((path) => navigate(path, true), [navigate]);
-  const back = useCallback10(() => {
+  const push = useCallback8((path) => navigate(path, false), [navigate]);
+  const replace = useCallback8((path) => navigate(path, true), [navigate]);
+  const back = useCallback8(() => {
     window.history.back();
   }, []);
-  const forward = useCallback10(() => {
+  const forward = useCallback8(() => {
     window.history.forward();
   }, []);
-  const isActive = useCallback10(
+  const isActive = useCallback8(
     (pattern) => {
       return matchRoute(location.pathname, pattern).match;
     },
@@ -1231,7 +1134,7 @@ function useRouter(options = {}) {
 }
 
 // src/hooks/useRouteParams.ts
-import { useState as useState10, useEffect as useEffect14, useMemo as useMemo6, useRef as useRef15 } from "react";
+import { useState as useState8, useEffect as useEffect13, useMemo as useMemo6, useRef as useRef13 } from "react";
 function extractParams(pathname, pattern) {
   const pathParts = pathname.split("/").filter(Boolean);
   const patternParts = pattern.split("/").filter(Boolean);
@@ -1253,7 +1156,7 @@ function extractAllSegments(pathname) {
 }
 function useRouteParams(options = {}) {
   const { pattern, basePath = "" } = options;
-  const patternRef = useRef15(pattern);
+  const patternRef = useRef13(pattern);
   patternRef.current = pattern;
   const getPathname2 = () => {
     if (typeof window === "undefined") return "/";
@@ -1263,8 +1166,8 @@ function useRouteParams(options = {}) {
     }
     return path;
   };
-  const [pathname, setPathname] = useState10(getPathname2);
-  useEffect14(() => {
+  const [pathname, setPathname] = useState8(getPathname2);
+  useEffect13(() => {
     const handler = () => setPathname(getPathname2());
     window.addEventListener("popstate", handler);
     return () => window.removeEventListener("popstate", handler);
@@ -1278,7 +1181,7 @@ function useRouteParams(options = {}) {
 }
 
 // src/hooks/useRealtimeQuery.ts
-import { useState as useState11, useEffect as useEffect15, useCallback as useCallback11, useRef as useRef16 } from "react";
+import { useState as useState9, useEffect as useEffect14, useCallback as useCallback9, useRef as useRef14 } from "react";
 var _queryResolver = null;
 function setRealtimeQueryResolver(resolver) {
   _queryResolver = resolver;
@@ -1296,16 +1199,16 @@ function useRealtimeQuery(slug, params = {}) {
     enabled,
     ...queryParams
   } = params;
-  const [data, setData] = useState11([]);
-  const [loading, setLoading] = useState11(true);
-  const [error, setError] = useState11(null);
-  const [total, setTotal] = useState11(void 0);
-  const [connected, setConnected] = useState11(false);
-  const [reconnectKey, setReconnectKey] = useState11(0);
-  const queryParamsRef = useRef16(queryParams);
+  const [data, setData] = useState9([]);
+  const [loading, setLoading] = useState9(true);
+  const [error, setError] = useState9(null);
+  const [total, setTotal] = useState9(void 0);
+  const [connected, setConnected] = useState9(false);
+  const [reconnectKey, setReconnectKey] = useState9(0);
+  const queryParamsRef = useRef14(queryParams);
   queryParamsRef.current = queryParams;
-  const debounceRef = useRef16(null);
-  const fetchData = useCallback11(async () => {
+  const debounceRef = useRef14(null);
+  const fetchData = useCallback9(async () => {
     if (enabled === false) {
       setLoading(false);
       return;
@@ -1328,10 +1231,10 @@ function useRealtimeQuery(slug, params = {}) {
       setLoading(false);
     }
   }, [slug, enabled]);
-  useEffect15(() => {
+  useEffect14(() => {
     fetchData();
   }, [fetchData]);
-  useEffect15(() => {
+  useEffect14(() => {
     if (enabled === false) return;
     const token = getToken2();
     if (!token) return;
@@ -1384,7 +1287,7 @@ function useRealtimeQuery(slug, params = {}) {
       setConnected(false);
     };
   }, [slug, channel, sseUrl, enabled, autoReconnect, reconnectDelay, debounce, fetchData, reconnectKey]);
-  const forceReconnect = useCallback11(() => {
+  const forceReconnect = useCallback9(() => {
     setReconnectKey((k) => k + 1);
   }, []);
   const hasMore = total !== void 0 && data.length < total;
@@ -1402,7 +1305,7 @@ function useRealtimeQuery(slug, params = {}) {
 }
 
 // src/hooks/useChannel.ts
-import { useState as useState12, useEffect as useEffect16, useCallback as useCallback12, useRef as useRef17, useMemo as useMemo7 } from "react";
+import { useState as useState10, useEffect as useEffect15, useCallback as useCallback10, useRef as useRef15, useMemo as useMemo7 } from "react";
 var _globalTransport = null;
 function setChannelTransport(transport) {
   _globalTransport = transport;
@@ -1501,14 +1404,14 @@ function useChannel(channelName, options = {}) {
     reconnect: autoReconnect = true,
     reconnectDelay = 3e3
   } = options;
-  const [messages, setMessages] = useState12([]);
-  const [connected, setConnected] = useState12(false);
-  const [reconnectKey, setReconnectKey] = useState12(0);
-  const handlersRef = useRef17(/* @__PURE__ */ new Map());
-  const transportRef = useRef17(null);
-  const bufferSizeRef = useRef17(bufferSize);
+  const [messages, setMessages] = useState10([]);
+  const [connected, setConnected] = useState10(false);
+  const [reconnectKey, setReconnectKey] = useState10(0);
+  const handlersRef = useRef15(/* @__PURE__ */ new Map());
+  const transportRef = useRef15(null);
+  const bufferSizeRef = useRef15(bufferSize);
   bufferSizeRef.current = bufferSize;
-  useEffect16(() => {
+  useEffect15(() => {
     if (!enabled) return;
     const transport = _globalTransport ?? createDefaultTransport(wsUrl, {
       enabled: autoReconnect,
@@ -1542,13 +1445,13 @@ function useChannel(channelName, options = {}) {
       }
     };
   }, [channelName, wsUrl, enabled, autoReconnect, reconnectDelay, reconnectKey]);
-  const publish = useCallback12(
+  const publish = useCallback10(
     (event, data) => {
       transportRef.current?.send(channelName, event, data);
     },
     [channelName]
   );
-  const subscribe = useCallback12(
+  const subscribe = useCallback10(
     (event, handler) => {
       if (!handlersRef.current.has(event)) {
         handlersRef.current.set(event, /* @__PURE__ */ new Set());
@@ -1566,7 +1469,7 @@ function useChannel(channelName, options = {}) {
     },
     []
   );
-  const forceReconnect = useCallback12(() => {
+  const forceReconnect = useCallback10(() => {
     setReconnectKey((k) => k + 1);
     setMessages([]);
   }, []);
@@ -1583,7 +1486,7 @@ function useChannel(channelName, options = {}) {
 }
 
 // src/hooks/useGeolocation.ts
-import { useState as useState13, useEffect as useEffect17, useCallback as useCallback13, useRef as useRef18, useMemo as useMemo8 } from "react";
+import { useState as useState11, useEffect as useEffect16, useCallback as useCallback11, useRef as useRef16, useMemo as useMemo8 } from "react";
 var INITIAL_POSITION = {
   latitude: null,
   longitude: null,
@@ -1602,17 +1505,17 @@ function useGeolocation(options = {}) {
     watch = false,
     enabled = true
   } = options;
-  const [position, setPosition] = useState13(INITIAL_POSITION);
-  const [loading, setLoading] = useState13(true);
-  const [error, setError] = useState13(null);
-  const [watching, setWatching] = useState13(false);
-  const watchIdRef = useRef18(null);
+  const [position, setPosition] = useState11(INITIAL_POSITION);
+  const [loading, setLoading] = useState11(true);
+  const [error, setError] = useState11(null);
+  const [watching, setWatching] = useState11(false);
+  const watchIdRef = useRef16(null);
   const supported = typeof navigator !== "undefined" && "geolocation" in navigator;
   const positionOptions = useMemo8(
     () => ({ enableHighAccuracy, maximumAge, timeout: timeout2 }),
     [enableHighAccuracy, maximumAge, timeout2]
   );
-  const handleSuccess = useCallback13((pos) => {
+  const handleSuccess = useCallback11((pos) => {
     setPosition({
       latitude: pos.coords.latitude,
       longitude: pos.coords.longitude,
@@ -1626,11 +1529,11 @@ function useGeolocation(options = {}) {
     setError(null);
     setLoading(false);
   }, []);
-  const handleError = useCallback13((err) => {
+  const handleError = useCallback11((err) => {
     setError({ code: err.code, message: err.message });
     setLoading(false);
   }, []);
-  const getCurrentPosition = useCallback13(() => {
+  const getCurrentPosition = useCallback11(() => {
     if (!supported) {
       setError({ code: 0, message: "Geolocation is not supported" });
       setLoading(false);
@@ -1639,20 +1542,20 @@ function useGeolocation(options = {}) {
     setLoading(true);
     navigator.geolocation.getCurrentPosition(handleSuccess, handleError, positionOptions);
   }, [supported, handleSuccess, handleError, positionOptions]);
-  const startWatching = useCallback13(() => {
+  const startWatching = useCallback11(() => {
     if (!supported || watchIdRef.current !== null) return;
     const id = navigator.geolocation.watchPosition(handleSuccess, handleError, positionOptions);
     watchIdRef.current = id;
     setWatching(true);
   }, [supported, handleSuccess, handleError, positionOptions]);
-  const stopWatching = useCallback13(() => {
+  const stopWatching = useCallback11(() => {
     if (watchIdRef.current !== null) {
       navigator.geolocation.clearWatch(watchIdRef.current);
       watchIdRef.current = null;
       setWatching(false);
     }
   }, []);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!enabled || !supported) {
       if (!supported) {
         setError({ code: 0, message: "Geolocation is not supported" });
@@ -1683,7 +1586,7 @@ function useGeolocation(options = {}) {
 }
 
 // src/hooks/useMapView.ts
-import { useState as useState14, useCallback as useCallback14, useMemo as useMemo9 } from "react";
+import { useState as useState12, useCallback as useCallback12, useMemo as useMemo9 } from "react";
 function haversineDistance(from, to) {
   const R = 6371e3;
   const dLat = (to.lat - from.lat) * Math.PI / 180;
@@ -1729,23 +1632,23 @@ function useMapView(options = {}) {
     minZoom = 0,
     maxZoom = 22
   } = options;
-  const [center, setCenterState] = useState14(initialCenter);
-  const [zoom, setZoomState] = useState14(initialZoom);
-  const [bounds, setBoundsState] = useState14(null);
-  const [markers, setMarkers] = useState14([]);
-  const setCenter = useCallback14((lat, lng) => {
+  const [center, setCenterState] = useState12(initialCenter);
+  const [zoom, setZoomState] = useState12(initialZoom);
+  const [bounds, setBoundsState] = useState12(null);
+  const [markers, setMarkers] = useState12([]);
+  const setCenter = useCallback12((lat, lng) => {
     setCenterState({ lat, lng });
   }, []);
-  const setZoom = useCallback14(
+  const setZoom = useCallback12(
     (z) => {
       setZoomState(Math.max(minZoom, Math.min(maxZoom, z)));
     },
     [minZoom, maxZoom]
   );
-  const panTo = useCallback14((lat, lng) => {
+  const panTo = useCallback12((lat, lng) => {
     setCenterState({ lat, lng });
   }, []);
-  const fitBounds = useCallback14(
+  const fitBounds = useCallback12(
     (points, padding = 0.1) => {
       if (points.length === 0) return;
       if (points.length === 1) {
@@ -1760,24 +1663,24 @@ function useMapView(options = {}) {
     },
     [minZoom, maxZoom]
   );
-  const setBounds = useCallback14((b) => {
+  const setBounds = useCallback12((b) => {
     setBoundsState(b);
   }, []);
-  const addMarker = useCallback14((marker) => {
+  const addMarker = useCallback12((marker) => {
     setMarkers((prev) => [...prev.filter((m) => m.id !== marker.id), marker]);
   }, []);
-  const removeMarker = useCallback14((id) => {
+  const removeMarker = useCallback12((id) => {
     setMarkers((prev) => prev.filter((m) => m.id !== id));
   }, []);
-  const updateMarker = useCallback14((id, position) => {
+  const updateMarker = useCallback12((id, position) => {
     setMarkers(
       (prev) => prev.map((m) => m.id === id ? { ...m, position } : m)
     );
   }, []);
-  const clearMarkers = useCallback14(() => {
+  const clearMarkers = useCallback12(() => {
     setMarkers([]);
   }, []);
-  const distance = useCallback14((from, to) => {
+  const distance = useCallback12((from, to) => {
     return haversineDistance(from, to);
   }, []);
   return useMemo9(
@@ -1802,7 +1705,7 @@ function useMapView(options = {}) {
 }
 
 // src/hooks/useAuth.ts
-import { useState as useState15, useEffect as useEffect18, useCallback as useCallback15, useMemo as useMemo10, useRef as useRef19 } from "react";
+import { useState as useState13, useEffect as useEffect17, useCallback as useCallback13, useMemo as useMemo10, useRef as useRef17 } from "react";
 var _globalAuthResolver = null;
 function setAuthResolver(resolver) {
   _globalAuthResolver = resolver;
@@ -1848,23 +1751,23 @@ function useAuth(options = {}) {
     onLogout,
     onError
   } = options;
-  const [user, setUser] = useState15(null);
-  const [loading, setLoading] = useState15(true);
-  const [error, setError] = useState15(null);
-  const [token, setToken] = useState15(() => {
+  const [user, setUser] = useState13(null);
+  const [loading, setLoading] = useState13(true);
+  const [error, setError] = useState13(null);
+  const [token, setToken] = useState13(() => {
     return typeof localStorage !== "undefined" ? localStorage.getItem(tokenKey) : null;
   });
-  const onLoginRef = useRef19(onLogin);
+  const onLoginRef = useRef17(onLogin);
   onLoginRef.current = onLogin;
-  const onLogoutRef = useRef19(onLogout);
+  const onLogoutRef = useRef17(onLogout);
   onLogoutRef.current = onLogout;
-  const onErrorRef = useRef19(onError);
+  const onErrorRef = useRef17(onError);
   onErrorRef.current = onError;
-  const getResolver = useCallback15(
+  const getResolver = useCallback13(
     () => _globalAuthResolver ?? createDefaultResolver(apiUrl),
     [apiUrl]
   );
-  useEffect18(() => {
+  useEffect17(() => {
     if (!autoFetch || !token) {
       setLoading(false);
       return;
@@ -1892,7 +1795,7 @@ function useAuth(options = {}) {
       cancelled = true;
     };
   }, [token, autoFetch, getResolver, tokenKey]);
-  const login = useCallback15(
+  const login = useCallback13(
     async (credentials) => {
       setLoading(true);
       setError(null);
@@ -1915,7 +1818,7 @@ function useAuth(options = {}) {
     },
     [getResolver, tokenKey]
   );
-  const logout = useCallback15(async () => {
+  const logout = useCallback13(async () => {
     try {
       if (token) {
         const resolver = getResolver();
@@ -1929,7 +1832,7 @@ function useAuth(options = {}) {
       onLogoutRef.current?.();
     }
   }, [token, getResolver, tokenKey]);
-  const refreshUser = useCallback15(async () => {
+  const refreshUser = useCallback13(async () => {
     if (!token) return;
     try {
       const resolver = getResolver();
@@ -1942,7 +1845,7 @@ function useAuth(options = {}) {
       onErrorRef.current?.(authError);
     }
   }, [token, getResolver]);
-  const hasRole2 = useCallback15(
+  const hasRole2 = useCallback13(
     (role) => {
       return user?.roles.includes(role) ?? false;
     },
@@ -1966,7 +1869,7 @@ function useAuth(options = {}) {
 }
 
 // src/hooks/useForm.ts
-import { useState as useState16, useCallback as useCallback16, useMemo as useMemo11, useRef as useRef20 } from "react";
+import { useState as useState14, useCallback as useCallback14, useMemo as useMemo11, useRef as useRef18 } from "react";
 function useForm(config) {
   const {
     initialValues,
@@ -1977,19 +1880,19 @@ function useForm(config) {
     validateOnChange = false,
     validateOnBlur = true
   } = config;
-  const [values, setValuesState] = useState16(initialValues);
-  const [errors, setErrors] = useState16({});
-  const [touched, setTouched] = useState16({});
-  const [isSubmitting, setIsSubmitting] = useState16(false);
-  const [submitCount, setSubmitCount] = useState16(0);
-  const initialRef = useRef20(initialValues);
-  const validateRef = useRef20(validate2);
+  const [values, setValuesState] = useState14(initialValues);
+  const [errors, setErrors] = useState14({});
+  const [touched, setTouched] = useState14({});
+  const [isSubmitting, setIsSubmitting] = useState14(false);
+  const [submitCount, setSubmitCount] = useState14(0);
+  const initialRef = useRef18(initialValues);
+  const validateRef = useRef18(validate2);
   validateRef.current = validate2;
-  const fieldValidatorsRef = useRef20(fieldValidators);
+  const fieldValidatorsRef = useRef18(fieldValidators);
   fieldValidatorsRef.current = fieldValidators;
-  const onSubmitRef = useRef20(onSubmit);
+  const onSubmitRef = useRef18(onSubmit);
   onSubmitRef.current = onSubmit;
-  const onErrorRef = useRef20(onError);
+  const onErrorRef = useRef18(onError);
   onErrorRef.current = onError;
   const dirtyFields = useMemo11(() => {
     const result = {};
@@ -2006,7 +1909,7 @@ function useForm(config) {
     () => Object.keys(errors).length === 0,
     [errors]
   );
-  const validateField = useCallback16(
+  const validateField = useCallback14(
     async (name, value) => {
       const validator = fieldValidatorsRef.current?.[name];
       if (validator) {
@@ -2016,7 +1919,7 @@ function useForm(config) {
     },
     []
   );
-  const validateForm = useCallback16(async () => {
+  const validateForm = useCallback14(async () => {
     let formErrors = {};
     if (validateRef.current) {
       formErrors = await validateRef.current(values);
@@ -2034,7 +1937,7 @@ function useForm(config) {
     setErrors(formErrors);
     return formErrors;
   }, [values]);
-  const setField2 = useCallback16(
+  const setField2 = useCallback14(
     (name, value) => {
       setValuesState((prev) => ({ ...prev, [name]: value }));
       if (validateOnChange) {
@@ -2052,20 +1955,20 @@ function useForm(config) {
     },
     [validateOnChange, validateField]
   );
-  const setError = useCallback16((name, message) => {
+  const setError = useCallback14((name, message) => {
     setErrors((prev) => ({ ...prev, [name]: message }));
   }, []);
-  const clearError = useCallback16((name) => {
+  const clearError = useCallback14((name) => {
     setErrors((prev) => {
       const next = { ...prev };
       delete next[name];
       return next;
     });
   }, []);
-  const setValues = useCallback16((partial) => {
+  const setValues = useCallback14((partial) => {
     setValuesState((prev) => ({ ...prev, ...partial }));
   }, []);
-  const reset = useCallback16((newInitial) => {
+  const reset = useCallback14((newInitial) => {
     const resetTo = newInitial ?? initialRef.current;
     if (newInitial) {
       initialRef.current = newInitial;
@@ -2075,7 +1978,7 @@ function useForm(config) {
     setTouched({});
     setIsSubmitting(false);
   }, []);
-  const handleSubmit = useCallback16(async () => {
+  const handleSubmit = useCallback14(async () => {
     setSubmitCount((c) => c + 1);
     const allTouched = {};
     for (const key of Object.keys(values)) {
@@ -2098,7 +2001,7 @@ function useForm(config) {
       setIsSubmitting(false);
     }
   }, [values, validateForm]);
-  const register = useCallback16(
+  const register = useCallback14(
     (name) => {
       return {
         name,
@@ -2133,7 +2036,7 @@ function useForm(config) {
     },
     [values, errors, setField2, validateOnBlur, validateField]
   );
-  const getField = useCallback16(
+  const getField = useCallback14(
     (name) => values[name],
     [values]
   );
@@ -2180,13 +2083,13 @@ function useForm(config) {
 }
 
 // src/hooks/useNotification.ts
-import { useState as useState17, useCallback as useCallback17, useEffect as useEffect19, useMemo as useMemo12 } from "react";
+import { useState as useState15, useCallback as useCallback15, useEffect as useEffect18, useMemo as useMemo12 } from "react";
 function useNotification() {
   const supported = typeof window !== "undefined" && "Notification" in window;
-  const [permission, setPermission] = useState17(
+  const [permission, setPermission] = useState15(
     supported ? Notification.permission : "denied"
   );
-  useEffect19(() => {
+  useEffect18(() => {
     if (!supported) return;
     const interval = setInterval(() => {
       if (Notification.permission !== permission) {
@@ -2195,13 +2098,13 @@ function useNotification() {
     }, 1e3);
     return () => clearInterval(interval);
   }, [supported, permission]);
-  const requestPermission = useCallback17(async () => {
+  const requestPermission = useCallback15(async () => {
     if (!supported) return "denied";
     const result = await Notification.requestPermission();
     setPermission(result);
     return result;
   }, [supported]);
-  const notify3 = useCallback17(
+  const notify3 = useCallback15(
     (title, options = {}) => {
       if (!supported || permission !== "granted") return null;
       const {
@@ -2240,7 +2143,7 @@ function useNotification() {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState18, useCallback as useCallback18, useRef as useRef21, useMemo as useMemo13 } from "react";
+import { useState as useState16, useCallback as useCallback16, useRef as useRef19, useMemo as useMemo13 } from "react";
 var _nextId = 0;
 var _toasts = [];
 var _listeners = /* @__PURE__ */ new Set();
@@ -2286,20 +2189,20 @@ function clearAllToasts() {
   notifyListeners();
 }
 function useToast() {
-  const [toasts, setToasts] = useState18(() => [..._toasts]);
-  const listenerRef = useRef21(null);
+  const [toasts, setToasts] = useState16(() => [..._toasts]);
+  const listenerRef = useRef19(null);
   if (!listenerRef.current) {
     const listener = (newToasts) => setToasts(newToasts);
     listenerRef.current = listener;
     _listeners.add(listener);
   }
-  const toast = useCallback18((config) => {
+  const toast = useCallback16((config) => {
     return addToast(config);
   }, []);
-  const dismiss = useCallback18((id) => {
+  const dismiss = useCallback16((id) => {
     removeToast(id);
   }, []);
-  const dismissAll = useCallback18(() => {
+  const dismissAll = useCallback16(() => {
     clearAllToasts();
   }, []);
   return useMemo13(
@@ -2365,7 +2268,7 @@ function makeResult(fields, states) {
 }
 
 // src/hooks/usePresence.ts
-import { useState as useState19, useEffect as useEffect20, useCallback as useCallback19, useRef as useRef22 } from "react";
+import { useState as useState17, useEffect as useEffect19, useCallback as useCallback17, useRef as useRef20 } from "react";
 var PRESENCE_EVENTS = {
   JOIN: "presence:join",
   LEAVE: "presence:leave",
@@ -2387,11 +2290,11 @@ function usePresence(instanceId, options = {}) {
     wsUrl,
     enabled
   });
-  const [viewers, setViewers] = useState19([]);
-  const [editors, setEditors] = useState19([]);
-  const viewersRef = useRef22(/* @__PURE__ */ new Map());
-  const editorsRef = useRef22(/* @__PURE__ */ new Map());
-  useEffect20(() => {
+  const [viewers, setViewers] = useState17([]);
+  const [editors, setEditors] = useState17([]);
+  const viewersRef = useRef20(/* @__PURE__ */ new Map());
+  const editorsRef = useRef20(/* @__PURE__ */ new Map());
+  useEffect19(() => {
     if (!connected || !enabled) return;
     publish(PRESENCE_EVENTS.JOIN, { id: userId, name: userName, connectedAt: Date.now() });
     const hb = setInterval(() => {
@@ -2402,7 +2305,7 @@ function usePresence(instanceId, options = {}) {
       publish(PRESENCE_EVENTS.LEAVE, { id: userId });
     };
   }, [connected, enabled, userId, userName, heartbeatInterval, publish]);
-  useEffect20(() => {
+  useEffect19(() => {
     if (!enabled) return;
     const cleanup = setInterval(() => {
       const now = Date.now();
@@ -2421,7 +2324,7 @@ function usePresence(instanceId, options = {}) {
     }, staleTimeout / 3);
     return () => clearInterval(cleanup);
   }, [enabled, staleTimeout]);
-  useEffect20(() => {
+  useEffect19(() => {
     if (!enabled) return;
     const unsubs = [];
     unsubs.push(subscribe(PRESENCE_EVENTS.JOIN, (data) => {
@@ -2469,13 +2372,13 @@ function usePresence(instanceId, options = {}) {
     }));
     return () => unsubs.forEach((fn) => fn());
   }, [enabled, userId, subscribe]);
-  const startEditing = useCallback19((field2) => {
+  const startEditing = useCallback17((field2) => {
     publish(PRESENCE_EVENTS.EDIT_START, { id: userId, name: userName, field: field2 });
   }, [publish, userId, userName]);
-  const stopEditing = useCallback19((_field) => {
+  const stopEditing = useCallback17((_field) => {
     publish(PRESENCE_EVENTS.EDIT_STOP, { id: userId });
   }, [publish, userId]);
-  const isEditing = useCallback19((field2) => {
+  const isEditing = useCallback17((field2) => {
     for (const editor of editorsRef.current.values()) {
       if (editor.field === field2 && editor.id !== userId) return true;
     }
@@ -2492,7 +2395,7 @@ function usePresence(instanceId, options = {}) {
 }
 
 // src/hooks/useMiddleware.ts
-import { useState as useState20, useEffect as useEffect21, useRef as useRef23, useMemo as useMemo15 } from "react";
+import { useState as useState18, useEffect as useEffect20, useRef as useRef21, useMemo as useMemo15 } from "react";
 function requireAuth(loginPath = "/login") {
   return (ctx) => {
     if (!ctx.token) {
@@ -2564,24 +2467,24 @@ function useMiddleware(middlewares, options = {}) {
     watchPathname = true,
     onRedirect
   } = options;
-  const [ready, setReady] = useState20(false);
-  const [loading, setLoading] = useState20(true);
-  const [redirect, setRedirect] = useState20(null);
-  const [error, setError] = useState20(null);
-  const [data, setData] = useState20({});
-  const [runKey, setRunKey] = useState20(0);
-  const middlewaresRef = useRef23(middlewares);
+  const [ready, setReady] = useState18(false);
+  const [loading, setLoading] = useState18(true);
+  const [redirect, setRedirect] = useState18(null);
+  const [error, setError] = useState18(null);
+  const [data, setData] = useState18({});
+  const [runKey, setRunKey] = useState18(0);
+  const middlewaresRef = useRef21(middlewares);
   middlewaresRef.current = middlewares;
-  const onRedirectRef = useRef23(onRedirect);
+  const onRedirectRef = useRef21(onRedirect);
   onRedirectRef.current = onRedirect;
-  const [pathname, setPathname] = useState20(getPathname);
-  useEffect21(() => {
+  const [pathname, setPathname] = useState18(getPathname);
+  useEffect20(() => {
     if (!watchPathname) return;
     const handler = () => setPathname(getPathname());
     window.addEventListener("popstate", handler);
     return () => window.removeEventListener("popstate", handler);
   }, [watchPathname]);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!enabled) {
       setReady(true);
       setLoading(false);
@@ -3312,7 +3215,7 @@ function defineBlueprint(config) {
     ...config,
     mode: config.mode || "infer",
     defaultRuntime: config.defaultRuntime || "local",
-    category: config.category || "blueprint"
+    category: config.category ? Array.isArray(config.category) ? config.category : [config.category] : ["blueprint"]
   };
 }
 function defineModule(manifest) {
@@ -3451,7 +3354,7 @@ function refHasAnyRole(slug, lookupField, lookupValue, roles) {
 }
 
 // src/hooks/useModel.ts
-import { useCallback as useCallback20, useRef as useRef24, useMemo as useMemo16 } from "react";
+import { useCallback as useCallback18, useRef as useRef22, useMemo as useMemo16 } from "react";
 function getDefaultFields(definition) {
   const defaults = {};
   for (const [key, field2] of Object.entries(definition.fields)) {
@@ -3515,9 +3418,9 @@ function useModel(definition, options = {}) {
     if (!instanceFields) return defaultFields;
     return { ...defaultFields, ...instanceFields };
   }, [instanceFields, defaultFields]);
-  const instanceIdRef = useRef24(instanceId);
+  const instanceIdRef = useRef22(instanceId);
   instanceIdRef.current = instanceId;
-  const trigger = useCallback20(async (name, input) => {
+  const trigger = useCallback18(async (name, input) => {
     const id = instanceIdRef.current;
     if (!id) {
       throw new Error(`useModel(${slug}): No instance loaded. Cannot trigger '${name}'.`);
@@ -3525,12 +3428,12 @@ function useModel(definition, options = {}) {
     await mutation.transition(id, name, input);
     await query.refetch();
   }, [slug, mutation, query]);
-  const create = useCallback20(async (input) => {
+  const create = useCallback18(async (input) => {
     const id = await mutation.create(input);
     await query.refetch();
     return id;
   }, [mutation, query]);
-  const update = useCallback20(async (fieldUpdates) => {
+  const update = useCallback18(async (fieldUpdates) => {
     const id = instanceIdRef.current;
     if (!id) {
       throw new Error(`useModel(${slug}): No instance loaded. Cannot update.`);
@@ -3566,20 +3469,20 @@ function useCollection(definition, options = {}) {
       state: instance2.currentState ?? ""
     }));
   }, [query.data]);
-  const trigger = useCallback20(async (instanceId, name, input) => {
+  const trigger = useCallback18(async (instanceId, name, input) => {
     await mutation.transition(instanceId, name, input);
     await query.refetch();
   }, [mutation, query]);
-  const create = useCallback20(async (input) => {
+  const create = useCallback18(async (input) => {
     const id = await mutation.create(input);
     await query.refetch();
     return id;
   }, [mutation, query]);
-  const update = useCallback20(async (instanceId, fieldUpdates) => {
+  const update = useCallback18(async (instanceId, fieldUpdates) => {
     await mutation.update(instanceId, fieldUpdates);
     await query.refetch();
   }, [mutation, query]);
-  const remove = useCallback20(async (instanceId) => {
+  const remove = useCallback18(async (instanceId) => {
     await mutation.remove(instanceId);
     await query.refetch();
   }, [mutation, query]);
@@ -3599,623 +3502,6 @@ function useCollection(definition, options = {}) {
   return handle;
 }
 
-// src/player/ComponentTreeRenderer.tsx
-import React, { useMemo as useMemo17, useCallback as useCallback21 } from "react";
-
-// src/player/evaluator.ts
-var EXPR_PATTERN = /\{\{(.+?)\}\}/g;
-function containsExpression(value) {
-  return typeof value === "string" && EXPR_PATTERN.test(value);
-}
-function resolvePath(path, scope) {
-  const parts = path.trim().split(".");
-  let current = scope;
-  for (const part of parts) {
-    if (current == null || typeof current !== "object") return void 0;
-    current = current[part];
-  }
-  return current;
-}
-function evaluateExpression(expr2, scopes) {
-  const trimmed = expr2.trim();
-  if (trimmed.startsWith("'") && trimmed.endsWith("'") || trimmed.startsWith('"') && trimmed.endsWith('"')) {
-    return trimmed.slice(1, -1);
-  }
-  if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
-    return Number(trimmed);
-  }
-  if (trimmed === "true") return true;
-  if (trimmed === "false") return false;
-  if (trimmed === "null" || trimmed === "undefined") return void 0;
-  const flatScope = { ...scopes };
-  if (scopes.state_data && typeof scopes.state_data === "object") {
-    Object.assign(flatScope, scopes.state_data);
-  }
-  if (scopes.context && typeof scopes.context === "object") {
-    Object.assign(flatScope, scopes.context);
-  }
-  return resolvePath(trimmed, flatScope);
-}
-function evaluateProp(value, scopes) {
-  if (typeof value !== "string") return value;
-  const fullMatch = value.match(/^\{\{(.+)\}\}$/s);
-  if (fullMatch) {
-    return evaluateExpression(fullMatch[1], scopes);
-  }
-  if (containsExpression(value)) {
-    return value.replace(EXPR_PATTERN, (_, expr2) => {
-      const result = evaluateExpression(expr2, scopes);
-      return result == null ? "" : String(result);
-    });
-  }
-  return value;
-}
-
-// src/player/ComponentTreeRenderer.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var UnknownAtom = ({ type, children }) => /* @__PURE__ */ jsxs("div", { style: { border: "1px dashed #e53e3e", borderRadius: 6, padding: "8px 12px", margin: 4, fontSize: 13, color: "#e53e3e", background: "#fff5f5" }, children: [
-  /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
-    "Unknown: ",
-    type
-  ] }),
-  children && /* @__PURE__ */ jsx2("div", { style: { marginTop: 4 }, children })
-] });
-var RenderNode = ({ node, scopes, atoms, onEvent }) => {
-  if (node.$if) {
-    const condition = evaluateProp(node.$if, scopes);
-    if (!condition) return null;
-  }
-  if (node.$for) {
-    const { each, as, key: keyField } = node.$for;
-    const items = evaluateProp(each, scopes);
-    if (!Array.isArray(items)) return null;
-    return /* @__PURE__ */ jsx2(Fragment, { children: items.map((item, index) => {
-      const loopScopes = {
-        ...scopes,
-        state_data: {
-          ...scopes.state_data ?? {},
-          [as]: item,
-          [`${as}Index`]: index
-        }
-      };
-      const nodeWithoutFor = { ...node, $for: void 0 };
-      const itemKey = keyField ? String(item[keyField] ?? index) : String(index);
-      return /* @__PURE__ */ jsx2(RenderNode, { node: nodeWithoutFor, scopes: loopScopes, atoms, onEvent }, itemKey);
-    }) });
-  }
-  const Component = atoms[node.type];
-  if (!Component) {
-    return /* @__PURE__ */ jsx2(UnknownAtom, { type: node.type });
-  }
-  const evaluatedProps = {};
-  if (node.props) {
-    for (const [key, value] of Object.entries(node.props)) {
-      if (key.startsWith("on") && typeof value === "string") {
-        evaluatedProps[key] = (...args) => {
-          if (containsExpression(value)) {
-            evaluateExpression(value.replace(/^\{\{|\}\}$/g, ""), scopes);
-          } else {
-            onEvent(value, args[0]);
-          }
-        };
-      } else {
-        evaluatedProps[key] = evaluateProp(value, scopes);
-      }
-    }
-  }
-  let children = null;
-  if (node.children) {
-    if (typeof node.children === "string") {
-      children = evaluateProp(node.children, scopes);
-    } else if (Array.isArray(node.children)) {
-      children = node.children.map((child, index) => /* @__PURE__ */ jsx2(RenderNode, { node: child, scopes, atoms, onEvent }, index));
-    }
-  }
-  return /* @__PURE__ */ jsx2(Component, { ...evaluatedProps, children });
-};
-var CTRErrorBoundary = class extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("CTR rendering error:", error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback || /* @__PURE__ */ jsxs("div", { style: { padding: 16, background: "#fff5f5", border: "1px solid #fed7d7", borderRadius: 8 }, children: [
-        /* @__PURE__ */ jsx2("strong", { style: { color: "#c53030" }, children: "Rendering Error" }),
-        /* @__PURE__ */ jsx2("p", { style: { color: "#e53e3e", fontSize: 14, marginTop: 4 }, children: this.state.error?.message || "An error occurred while rendering" })
-      ] });
-    }
-    return this.props.children;
-  }
-};
-var ComponentTreeRenderer = ({
-  tree,
-  scopes,
-  atoms = {},
-  onEvent = () => {
-  },
-  fallback
-}) => {
-  const allAtoms = useMemo17(() => ({ ...atoms }), [atoms]);
-  const handleEvent = useCallback21(
-    (eventName, payload) => onEvent(eventName, payload),
-    [onEvent]
-  );
-  const nodes = Array.isArray(tree) ? tree : [tree];
-  return /* @__PURE__ */ jsx2(CTRErrorBoundary, { fallback, children: nodes.map((node, index) => /* @__PURE__ */ jsx2(RenderNode, { node, scopes, atoms: allAtoms, onEvent: handleEvent }, index)) });
-};
-
-// src/player/DevPlayer.tsx
-import { useState as useState21, useCallback as useCallback22, useRef as useRef25, useEffect as useEffect22, useMemo as useMemo18 } from "react";
-
-// src/player/builtin-atoms.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Stack = ({ children, gap = 8, style, ...rest }) => /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "column", gap, ...style }, ...rest, children });
-var Row = ({ children, gap = 8, align, justify, style, ...rest }) => /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "row", gap, alignItems: align, justifyContent: justify, ...style }, ...rest, children });
-var Column = ({ children, span, style, ...rest }) => /* @__PURE__ */ jsx3("div", { style: { flex: span ? `0 0 ${Number(span) / 12 * 100}%` : 1, ...style }, ...rest, children });
-var Grid = ({ children, columns = 2, gap = 8, style, ...rest }) => /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap, ...style }, ...rest, children });
-var Divider = ({ style }) => /* @__PURE__ */ jsx3("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "8px 0", ...style } });
-var Spacer = ({ size = 16 }) => /* @__PURE__ */ jsx3("div", { style: { height: size, flexShrink: 0 } });
-var Text = ({ children, size, weight, color, style, ...rest }) => /* @__PURE__ */ jsx3("span", { style: { fontSize: size, fontWeight: weight, color, ...style }, ...rest, children });
-var Heading = ({ children, level = 2, style, ...rest }) => {
-  const lvl = Math.min(Math.max(Number(level), 1), 6);
-  const s = { margin: "0 0 8px", ...style };
-  const c = children;
-  if (lvl === 1) return /* @__PURE__ */ jsx3("h1", { style: s, ...rest, children: c });
-  if (lvl === 2) return /* @__PURE__ */ jsx3("h2", { style: s, ...rest, children: c });
-  if (lvl === 3) return /* @__PURE__ */ jsx3("h3", { style: s, ...rest, children: c });
-  if (lvl === 4) return /* @__PURE__ */ jsx3("h4", { style: s, ...rest, children: c });
-  if (lvl === 5) return /* @__PURE__ */ jsx3("h5", { style: s, ...rest, children: c });
-  return /* @__PURE__ */ jsx3("h6", { style: s, ...rest, children: c });
-};
-var Field = ({ label, value, children, style }) => /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8, ...style }, children: [
-  label ? /* @__PURE__ */ jsx3("div", { style: { fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
-  /* @__PURE__ */ jsx3("div", { style: { fontSize: 14 }, children: children ?? value ?? "\u2014" })
-] });
-var Badge = ({ children, variant = "default", style }) => {
-  const colors = {
-    default: { bg: "#edf2f7", fg: "#4a5568" },
-    success: { bg: "#c6f6d5", fg: "#276749" },
-    warning: { bg: "#fefcbf", fg: "#975a16" },
-    error: { bg: "#fed7d7", fg: "#9b2c2c" },
-    info: { bg: "#bee3f8", fg: "#2a4365" }
-  };
-  const c = colors[variant] ?? colors.default;
-  return /* @__PURE__ */ jsx3("span", { style: { display: "inline-block", padding: "2px 8px", borderRadius: 9999, fontSize: 12, fontWeight: 500, background: c.bg, color: c.fg, ...style }, children });
-};
-var ImageAtom = ({ src, alt, width, height, style, ...rest }) => /* @__PURE__ */ jsx3("img", { src, alt: alt ?? "", width, height, style: { maxWidth: "100%", ...style }, ...rest });
-var Button = ({ children, onClick, variant = "primary", disabled, style, ...rest }) => {
-  const styles = {
-    primary: { background: "#3182ce", color: "#fff", border: "none" },
-    secondary: { background: "#edf2f7", color: "#4a5568", border: "1px solid #e2e8f0" },
-    danger: { background: "#e53e3e", color: "#fff", border: "none" },
-    ghost: { background: "transparent", color: "#4a5568", border: "none" }
-  };
-  const base = styles[variant] ?? styles.primary;
-  return /* @__PURE__ */ jsx3(
-    "button",
-    {
-      onClick,
-      disabled,
-      style: { padding: "6px 16px", borderRadius: 6, fontSize: 14, fontWeight: 500, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1, ...base, ...style },
-      ...rest,
-      children
-    }
-  );
-};
-var LinkAtom = ({ children, href, style, ...rest }) => /* @__PURE__ */ jsx3("a", { href, style: { color: "#3182ce", textDecoration: "underline", ...style }, ...rest, children });
-var TextInput = ({ value, onChange, placeholder, label, style, ...rest }) => /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8 }, children: [
-  label ? /* @__PURE__ */ jsx3("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
-  /* @__PURE__ */ jsx3(
-    "input",
-    {
-      type: "text",
-      value: value ?? "",
-      onChange,
-      placeholder,
-      style: { width: "100%", padding: "6px 10px", border: "1px solid #e2e8f0", borderRadius: 6, fontSize: 14, ...style },
-      ...rest
-    }
-  )
-] });
-var SelectAtom = ({ value, onChange, options, label, placeholder, style }) => /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8 }, children: [
-  label ? /* @__PURE__ */ jsx3("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
-  /* @__PURE__ */ jsxs2(
-    "select",
-    {
-      value: value ?? "",
-      onChange,
-      style: { width: "100%", padding: "6px 10px", border: "1px solid #e2e8f0", borderRadius: 6, fontSize: 14, ...style },
-      children: [
-        placeholder ? /* @__PURE__ */ jsx3("option", { value: "", children: placeholder }) : null,
-        Array.isArray(options) && options.map((opt) => {
-          const v = typeof opt === "string" ? opt : opt.value;
-          const l = typeof opt === "string" ? opt : opt.label;
-          return /* @__PURE__ */ jsx3("option", { value: v, children: l }, v);
-        })
-      ]
-    }
-  )
-] });
-var Card = ({ children, title, style, ...rest }) => /* @__PURE__ */ jsxs2("div", { style: { border: "1px solid #e2e8f0", borderRadius: 8, padding: 16, background: "#fff", ...style }, ...rest, children: [
-  title ? /* @__PURE__ */ jsx3("div", { style: { fontWeight: 600, fontSize: 16, marginBottom: 12 }, children: title }) : null,
-  children
-] });
-var Section = ({ children, title, style, ...rest }) => /* @__PURE__ */ jsxs2("section", { style: { marginBottom: 24, ...style }, ...rest, children: [
-  title ? /* @__PURE__ */ jsx3("h3", { style: { fontSize: 18, fontWeight: 600, marginBottom: 8 }, children: title }) : null,
-  children
-] });
-var Show = ({ when: when2, children, fallback }) => when2 ? /* @__PURE__ */ jsx3(Fragment2, { children }) : /* @__PURE__ */ jsx3(Fragment2, { children: fallback ?? null });
-var Each = ({ items, children, renderItem }) => {
-  if (!Array.isArray(items)) return null;
-  if (typeof renderItem === "function") return /* @__PURE__ */ jsx3(Fragment2, { children: items.map((item, i) => renderItem(item, i)) });
-  return /* @__PURE__ */ jsx3(Fragment2, { children });
-};
-var builtinAtoms = {
-  Stack,
-  Row,
-  Column,
-  Grid,
-  Divider,
-  Spacer,
-  Text,
-  Heading,
-  Field,
-  Badge,
-  Image: ImageAtom,
-  Button,
-  Link: LinkAtom,
-  TextInput,
-  Select: SelectAtom,
-  Card,
-  Section,
-  Show,
-  Each
-};
-
-// src/player/DevPlayer.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var S = {
-  shell: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    minHeight: "100vh",
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    background: "#f7fafc",
-    color: "#1a202c"
-  },
-  toolbar: {
-    display: "flex",
-    alignItems: "center",
-    gap: 12,
-    padding: "8px 16px",
-    background: "#1a202c",
-    color: "#e2e8f0",
-    fontSize: 13,
-    flexShrink: 0
-  },
-  toolbarTitle: { fontWeight: 600, fontSize: 14 },
-  toolbarBadge: {
-    display: "inline-block",
-    padding: "1px 8px",
-    borderRadius: 4,
-    background: "#2d3748",
-    color: "#a0aec0",
-    fontSize: 11,
-    fontFamily: "monospace"
-  },
-  toolbarBtn: {
-    background: "none",
-    border: "1px solid #4a5568",
-    borderRadius: 4,
-    color: "#a0aec0",
-    padding: "2px 10px",
-    fontSize: 12,
-    cursor: "pointer"
-  },
-  toolbarBtnActive: {
-    background: "#2b6cb0",
-    borderColor: "#2b6cb0",
-    color: "#fff"
-  },
-  body: { display: "flex", flex: 1, overflow: "hidden" },
-  preview: { flex: 1, overflow: "auto", padding: 24 },
-  sidebar: {
-    width: 340,
-    flexShrink: 0,
-    borderLeft: "1px solid #e2e8f0",
-    background: "#fff",
-    overflow: "auto",
-    fontSize: 13
-  },
-  sidebarSection: { padding: "12px 16px", borderBottom: "1px solid #f0f0f0" },
-  sidebarHeading: {
-    fontSize: 11,
-    fontWeight: 700,
-    textTransform: "uppercase",
-    color: "#a0aec0",
-    letterSpacing: "0.05em",
-    marginBottom: 8
-  },
-  pre: {
-    background: "#f7fafc",
-    border: "1px solid #e2e8f0",
-    borderRadius: 6,
-    padding: "8px 12px",
-    fontSize: 12,
-    fontFamily: "monospace",
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-word",
-    maxHeight: 260,
-    overflow: "auto"
-  },
-  eventRow: {
-    display: "flex",
-    gap: 8,
-    padding: "4px 0",
-    borderBottom: "1px solid #f7fafc",
-    fontSize: 12,
-    fontFamily: "monospace"
-  },
-  eventTime: { color: "#a0aec0", flexShrink: 0 },
-  eventName: { color: "#3182ce", fontWeight: 500 },
-  dot: (connected) => ({
-    width: 8,
-    height: 8,
-    borderRadius: "50%",
-    background: connected ? "#48bb78" : "#e53e3e",
-    flexShrink: 0
-  })
-};
-function useDevSocket(wsUrl, onReload) {
-  const [connected, setConnected] = useState21(false);
-  const wsRef = useRef25(null);
-  useEffect22(() => {
-    if (typeof window === "undefined") return;
-    const url = wsUrl ?? `ws://${window.location.host}/__mm_dev`;
-    let ws;
-    let reconnectTimer;
-    function connect() {
-      try {
-        ws = new WebSocket(url);
-        wsRef.current = ws;
-        ws.onopen = () => setConnected(true);
-        ws.onclose = () => {
-          setConnected(false);
-          reconnectTimer = setTimeout(connect, 3e3);
-        };
-        ws.onmessage = (ev) => {
-          try {
-            const msg = JSON.parse(ev.data);
-            if (msg.type === "workflow:compiled" || msg.type === "workflow:rebuild") {
-              onReload?.();
-            }
-          } catch {
-          }
-        };
-      } catch {
-        reconnectTimer = setTimeout(connect, 3e3);
-      }
-    }
-    connect();
-    return () => {
-      clearTimeout(reconnectTimer);
-      wsRef.current?.close();
-      wsRef.current = null;
-    };
-  }, [wsUrl, onReload]);
-  return connected;
-}
-var DevPlayer = ({
-  tree,
-  scopes = {},
-  atoms: userAtoms,
-  title = "DevPlayer",
-  bare = false,
-  wsUrl,
-  onReload,
-  onEvent: externalOnEvent
-}) => {
-  const [showSidebar, setShowSidebar] = useState21(true);
-  const [events, setEvents] = useState21([]);
-  const nextId = useRef25(0);
-  const connected = useDevSocket(wsUrl, onReload);
-  const mergedAtoms = useMemo18(
-    () => ({ ...builtinAtoms, ...userAtoms }),
-    [userAtoms]
-  );
-  const handleEvent = useCallback22(
-    (name, payload) => {
-      setEvents((prev) => {
-        const entry = {
-          id: nextId.current++,
-          time: (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", { hour12: false }),
-          name,
-          payload
-        };
-        const next = [entry, ...prev];
-        return next.length > 100 ? next.slice(0, 100) : next;
-      });
-      externalOnEvent?.(name, payload);
-    },
-    [externalOnEvent]
-  );
-  if (bare) {
-    return /* @__PURE__ */ jsx4(
-      ComponentTreeRenderer,
-      {
-        tree,
-        scopes,
-        atoms: mergedAtoms,
-        onEvent: handleEvent
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs3("div", { style: S.shell, children: [
-    /* @__PURE__ */ jsxs3("div", { style: S.toolbar, children: [
-      /* @__PURE__ */ jsx4("div", { style: S.dot(connected), title: connected ? "HMR connected" : "HMR disconnected" }),
-      /* @__PURE__ */ jsx4("span", { style: S.toolbarTitle, children: title }),
-      /* @__PURE__ */ jsxs3("span", { style: S.toolbarBadge, children: [
-        Array.isArray(tree) ? tree.length : 1,
-        " node",
-        Array.isArray(tree) && tree.length !== 1 ? "s" : ""
-      ] }),
-      /* @__PURE__ */ jsxs3("span", { style: S.toolbarBadge, children: [
-        Object.keys(mergedAtoms).length,
-        " atoms"
-      ] }),
-      /* @__PURE__ */ jsx4("div", { style: { flex: 1 } }),
-      /* @__PURE__ */ jsx4(
-        "button",
-        {
-          style: { ...S.toolbarBtn, ...showSidebar ? S.toolbarBtnActive : {} },
-          onClick: () => setShowSidebar((v) => !v),
-          children: "Inspector"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { style: S.body, children: [
-      /* @__PURE__ */ jsx4("div", { style: S.preview, children: /* @__PURE__ */ jsx4(
-        ComponentTreeRenderer,
-        {
-          tree,
-          scopes,
-          atoms: mergedAtoms,
-          onEvent: handleEvent
-        }
-      ) }),
-      showSidebar && /* @__PURE__ */ jsxs3("div", { style: S.sidebar, children: [
-        /* @__PURE__ */ jsxs3("div", { style: S.sidebarSection, children: [
-          /* @__PURE__ */ jsx4("div", { style: S.sidebarHeading, children: "Scopes" }),
-          /* @__PURE__ */ jsx4("pre", { style: S.pre, children: JSON.stringify(scopes, null, 2) })
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { style: S.sidebarSection, children: [
-          /* @__PURE__ */ jsxs3("div", { style: S.sidebarHeading, children: [
-            "Atoms (",
-            Object.keys(mergedAtoms).length,
-            ")"
-          ] }),
-          /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: Object.keys(mergedAtoms).sort().map((name) => /* @__PURE__ */ jsx4(
-            "span",
-            {
-              style: {
-                display: "inline-block",
-                padding: "1px 6px",
-                borderRadius: 3,
-                background: userAtoms?.[name] ? "#ebf8ff" : "#f7fafc",
-                border: `1px solid ${userAtoms?.[name] ? "#90cdf4" : "#e2e8f0"}`,
-                fontSize: 11,
-                fontFamily: "monospace",
-                color: userAtoms?.[name] ? "#2b6cb0" : "#718096"
-              },
-              children: name
-            },
-            name
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { style: S.sidebarSection, children: [
-          /* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
-            /* @__PURE__ */ jsxs3("div", { style: S.sidebarHeading, children: [
-              "Events (",
-              events.length,
-              ")"
-            ] }),
-            events.length > 0 && /* @__PURE__ */ jsx4(
-              "button",
-              {
-                style: { background: "none", border: "none", color: "#a0aec0", fontSize: 11, cursor: "pointer" },
-                onClick: () => setEvents([]),
-                children: "Clear"
-              }
-            )
-          ] }),
-          events.length === 0 && /* @__PURE__ */ jsx4("div", { style: { color: "#a0aec0", fontSize: 12, fontStyle: "italic" }, children: "No events yet" }),
-          events.slice(0, 50).map((e) => /* @__PURE__ */ jsxs3("div", { style: S.eventRow, children: [
-            /* @__PURE__ */ jsx4("span", { style: S.eventTime, children: e.time }),
-            /* @__PURE__ */ jsx4("span", { style: S.eventName, children: e.name }),
-            e.payload !== void 0 && /* @__PURE__ */ jsx4("span", { style: { color: "#718096", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: JSON.stringify(e.payload) })
-          ] }, e.id))
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { style: S.sidebarSection, children: [
-          /* @__PURE__ */ jsx4("div", { style: S.sidebarHeading, children: "Tree (JSON)" }),
-          /* @__PURE__ */ jsx4("pre", { style: { ...S.pre, maxHeight: 400 }, children: JSON.stringify(tree, null, 2) })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-
-// src/atoms/index.ts
-function stub(displayName) {
-  const Component = () => {
-    throw new Error(
-      `<${displayName}> is a compile-time stub from @mmapp/react/atoms. It should only appear in .workflow.tsx files processed by the compiler. At runtime, use the ComponentTreeRenderer which resolves "${displayName}" from the component registry.`
-    );
-  };
-  Component.displayName = displayName;
-  return Component;
-}
-var Stack2 = stub("Stack");
-var Row2 = stub("Row");
-var Column2 = stub("Column");
-var Grid2 = stub("Grid");
-var Divider2 = stub("Divider");
-var Spacer2 = stub("Spacer");
-var Text2 = stub("Text");
-var Heading2 = stub("Heading");
-var Field2 = stub("Field");
-var Image = stub("Image");
-var Badge2 = stub("Badge");
-var Icon = stub("Icon");
-var Button2 = stub("Button");
-var Link = stub("Link");
-var Show2 = stub("Show");
-var Each2 = stub("Each");
-var Card2 = stub("Card");
-var Tabs = stub("Tabs");
-var Accordion = stub("Accordion");
-var Section2 = stub("Section");
-var Modal = stub("Modal");
-var TextInput2 = stub("TextInput");
-var Select = stub("Select");
-var Markdown = stub("Markdown");
-var ScrollArea = stub("ScrollArea");
-var Canvas3D = stub("Canvas3D");
-var DataGrid = stub("DataGrid");
-var AnimatedBox = stub("AnimatedBox");
-var ServerGrid = stub("ServerGrid");
-var Chart = stub("Chart");
-var MetricCard = stub("MetricCard");
-var Slot = stub("Slot");
-var ModuleOutlet = stub("ModuleOutlet");
-var MetricsGrid = stub("MetricsGrid");
-var AdaptiveCardGrid = stub("AdaptiveCardGrid");
-var AdaptiveFilters = stub("AdaptiveFilters");
-var Pagination = stub("Pagination");
-var EntityHeader = stub("EntityHeader");
-var ProgressTracker = stub("ProgressTracker");
-var RatingWidget = stub("RatingWidget");
-var FieldSection = stub("FieldSection");
-var TransitionActions = stub("TransitionActions");
-var ChildInstanceList = stub("ChildInstanceList");
-var BreakdownCharts = stub("BreakdownCharts");
-var TabbedLayout = stub("TabbedLayout");
-var HierarchyBreadcrumb = stub("HierarchyBreadcrumb");
-var SearchInput = stub("SearchInput");
-var SortControl = stub("SortControl");
-var AggregateStats = stub("AggregateStats");
-var Router = stub("Router");
-var Route = stub("Route");
-var NavLink = stub("NavLink");
-var RoleGuard = stub("RoleGuard");
-
 // src/grammar/index.ts
 function createIsland(contextTag, strings, values) {
   let rawSource = "";
@@ -4283,7 +3569,7 @@ function djb2Hash(str) {
 }
 
 // src/authoring.ts
-function useState22(_defaultOrKey) {
+function useState19(_defaultOrKey) {
   return [void 0, () => {
   }];
 }
@@ -4294,10 +3580,10 @@ function defineWorkspace(config) {
 }
 
 // src/hooks/useModule.ts
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo17 } from "react";
 function useModule(slug, config = {}, options = {}) {
   const { enabled = true } = options;
-  return useMemo19(() => ({
+  return useMemo17(() => ({
     slug,
     config,
     isLoaded: enabled
@@ -4305,7 +3591,7 @@ function useModule(slug, config = {}, options = {}) {
 }
 
 // src/hooks/useModuleConfig.ts
-import { useCallback as useCallback23, useMemo as useMemo20, useState as useState23 } from "react";
+import { useCallback as useCallback19, useMemo as useMemo18, useState as useState20 } from "react";
 var installedModulesStore = [];
 var configDefaultsStore = /* @__PURE__ */ new Map();
 function setInstalledModules(modules) {
@@ -4321,7 +3607,7 @@ function getInstalledModules() {
   return installedModulesStore;
 }
 function useModuleConfig(moduleSlug) {
-  return useMemo20(() => {
+  return useMemo18(() => {
     const installed = getInstalledModule(moduleSlug);
     const defaults = configDefaultsStore.get(moduleSlug) ?? {};
     const persisted = persistedConfigStore.get(moduleSlug) ?? {};
@@ -4369,8 +3655,8 @@ async function updateDefinitionConfig(values, definitionId) {
 }
 function useModuleConfigWithMutation(moduleSlug) {
   const config = useModuleConfig(moduleSlug);
-  const [isSaving, setIsSaving] = useState23(false);
-  const updateConfig = useCallback23(async (values) => {
+  const [isSaving, setIsSaving] = useState20(false);
+  const updateConfig = useCallback19(async (values) => {
     setIsSaving(true);
     try {
       return await updateDefinitionConfig(values);
@@ -6573,7 +5859,7 @@ function describeModel(def) {
 }
 
 // src/hooks/usePlayer.ts
-import { useCallback as useCallback24, useEffect as useEffect23, useMemo as useMemo21, useRef as useRef26, useState as useState24 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect21, useMemo as useMemo19, useRef as useRef23, useState as useState21 } from "react";
 import {
   StateMachine as StateMachine2,
   EventBus as EventBus2,
@@ -6620,18 +5906,18 @@ function computePlayerState(sm) {
   };
 }
 function usePlayer(config) {
-  const configRef = useRef26(config);
+  const configRef = useRef23(config);
   configRef.current = config;
-  useEffect23(() => {
+  useEffect21(() => {
     if (config.debug) setPlayerDebug(true);
   }, [config.debug]);
-  const evaluator = useMemo21(() => {
+  const evaluator = useMemo19(() => {
     return createEvaluator2({
       functions: config.functions ?? [],
       failurePolicy: WEB_FAILURE_POLICIES2.EVENT_REACTION
     });
   }, [config.definition.id]);
-  const engine = useMemo21(() => {
+  const engine = useMemo19(() => {
     const actionHandlers = /* @__PURE__ */ new Map();
     if (config.actionHandlers) {
       for (const [type, handler] of Object.entries(config.actionHandlers)) {
@@ -6685,8 +5971,8 @@ function usePlayer(config) {
     return { sm: sm2, eventBus: eventBus2, dispatcher };
   }, [config.definition.id, evaluator]);
   const { sm, eventBus } = engine;
-  const [playerState, setPlayerState] = useState24(() => computePlayerState(sm));
-  useEffect23(() => {
+  const [playerState, setPlayerState] = useState21(() => computePlayerState(sm));
+  useEffect21(() => {
     const stateDef = sm.getCurrentStateDefinition();
     if (!stateDef?.on_event?.length) return;
     const unsubs = [];
@@ -6750,7 +6036,7 @@ function usePlayer(config) {
       for (const unsub of unsubs) unsub();
     };
   }, [sm, eventBus, evaluator, engine.dispatcher, playerState.currentState]);
-  useEffect23(() => {
+  useEffect21(() => {
     const unsub = sm.on((event) => {
       if (event.type === "transition" || event.type === "state_enter") {
         setPlayerState(computePlayerState(sm));
@@ -6766,7 +6052,7 @@ function usePlayer(config) {
     });
     return unsub;
   }, [sm]);
-  const transition2 = useCallback24(
+  const transition2 = useCallback20(
     async (name, data) => {
       playerLog({
         level: "info",
@@ -6793,20 +6079,20 @@ function usePlayer(config) {
     },
     [sm]
   );
-  const setField2 = useCallback24(
+  const setField2 = useCallback20(
     (field2, value) => {
       sm.setField(field2, value);
       setPlayerState(computePlayerState(sm));
     },
     [sm]
   );
-  const setMemory = useCallback24(
+  const setMemory = useCallback20(
     (key, value) => {
       sm.setMemory(key, value);
     },
     [sm]
   );
-  const publishEvent = useCallback24(
+  const publishEvent = useCallback20(
     (topic, payload) => {
       playerLog({
         level: "debug",
@@ -6832,11 +6118,11 @@ function usePlayer(config) {
 }
 
 // src/hooks/useDomainSubscription.ts
-import { useEffect as useEffect24, useRef as useRef27 } from "react";
+import { useEffect as useEffect22, useRef as useRef24 } from "react";
 function useDomainSubscription(eventBus, transport, config) {
-  const configRef = useRef27(config);
+  const configRef = useRef24(config);
   configRef.current = config;
-  useEffect24(() => {
+  useEffect22(() => {
     if (!transport || config.enabled === false) return;
     const unsub = transport.subscribe(
       {
@@ -6889,11 +6175,11 @@ function useDomainSubscription(eventBus, transport, config) {
 }
 
 // src/hooks/useExperienceState.ts
-import { useCallback as useCallback25, useRef as useRef28 } from "react";
+import { useCallback as useCallback21, useRef as useRef25 } from "react";
 function useExperienceState(player, selector) {
-  const selectorRef = useRef28(selector);
+  const selectorRef = useRef25(selector);
   selectorRef.current = selector;
-  const getSnapshot = useCallback25(() => {
+  const getSnapshot = useCallback21(() => {
     return selectorRef.current({
       currentState: player.currentState,
       stateData: player.stateData,
@@ -6909,20 +6195,20 @@ function useStateField(player, field2, defaultValue) {
 }
 
 // src/hooks/useComputed.ts
-import { useMemo as useMemo22, useRef as useRef29 } from "react";
+import { useMemo as useMemo20, useRef as useRef26 } from "react";
 function useComputed(_name, compute, options) {
   const mode = options?.mode ?? "read-time";
   const deps = options?.deps ?? [];
-  const computeRef = useRef29(compute);
+  const computeRef = useRef26(compute);
   computeRef.current = compute;
   if (mode === "read-time") {
-    return useMemo22(() => computeRef.current(), [
+    return useMemo20(() => computeRef.current(), [
       // We intentionally depend on deps.join to recompute when tracked fields change
       // The actual dependency tracking happens at the compiler level
       deps.join(",")
     ]);
   }
-  return useMemo22(() => computeRef.current(), [deps.join(",")]);
+  return useMemo20(() => computeRef.current(), [deps.join(",")]);
 }
 function useComputedWithMeta(name, compute, options) {
   const value = useComputed(name, compute, options);
@@ -6938,25 +6224,18 @@ function useComputedWithMeta(name, compute, options) {
 
 // src/components/PlayerProvider.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var PlayerContext = createContext3(null);
-function PlayerProvider({ player, children }) {
-  return /* @__PURE__ */ jsx5(PlayerContext.Provider, { value: player, children });
-}
-function usePlayerContext() {
-  const ctx = useContext3(PlayerContext);
-  if (!ctx) {
-    throw new Error("usePlayerContext must be used within a <PlayerProvider>");
-  }
-  return ctx;
+function PlayerProvider2({ player, children }) {
+  return /* @__PURE__ */ jsx2(PlayerContext.Provider, { value: player, children });
 }
 function usePlayerContextSafe() {
   return useContext3(PlayerContext);
 }
 
 // src/components/ExperienceWorkflowBridge.tsx
-import { useMemo as useMemo23 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useMemo as useMemo21 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function ExperienceWorkflowBridgeInner({
   definition,
   initialData,
@@ -6973,12 +6252,12 @@ function ExperienceWorkflowBridgeInner({
     actionHandlers,
     debug
   });
-  const viewConfig = useMemo23(() => {
+  const viewConfig = useMemo21(() => {
     if (!definition.state_views) return void 0;
     return definition.state_views[player.currentState];
   }, [definition.state_views, player.currentState]);
-  return /* @__PURE__ */ jsxs4(PlayerProvider, { player, children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs(PlayerProvider2, { player, children: [
+    /* @__PURE__ */ jsx3(
       DomainSubscriptionBridge,
       {
         player,
@@ -7004,12 +6283,12 @@ function DomainSubscriptionBridge({
   return null;
 }
 function ExperienceWorkflowBridge(props) {
-  return /* @__PURE__ */ jsx6(ExperienceWorkflowBridgeInner, { ...props });
+  return /* @__PURE__ */ jsx3(ExperienceWorkflowBridgeInner, { ...props });
 }
 
 // src/components/atoms/index.tsx
-import React3 from "react";
-import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
+import React from "react";
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
 
 // src/loader/experience-workflow-loader.ts
 function validateExperienceWorkflow(def) {
@@ -8060,25 +7339,27 @@ var instance = compileTimeProxy("instance");
 export {
   Accordion,
   AnimatedBox,
+  AtomRegistryImpl,
   BUILT_IN_CONSTRAINTS,
-  Badge2 as Badge,
+  Badge,
   Blueprint,
   BrowserPlayer,
-  Button2 as Button,
+  Button,
   Canvas3D,
-  Card2 as Card,
+  Card,
   Chart,
-  Column2 as Column,
+  Column,
   ComponentTreeRenderer,
   DataGrid,
   DevPlayer,
-  Divider2 as Divider,
-  Each2 as Each,
+  Divider,
+  Each,
+  ExperienceRenderer,
   ExperienceWorkflowBridge,
-  Field2 as Field,
+  Field,
   FieldBuilder,
-  Grid2 as Grid,
-  Heading2 as Heading,
+  Grid,
+  Heading,
   Icon,
   Image,
   Link,
@@ -8094,20 +7375,21 @@ export {
   RoleGuard,
   Route,
   Router,
-  Row2 as Row,
+  Row,
   RuntimeContext,
+  ScopeContext,
   ScrollArea,
-  Section2 as Section,
+  Section,
   Select,
   ServerGrid,
-  Show2 as Show,
+  Show,
   Slot,
-  Spacer2 as Spacer,
-  Stack2 as Stack,
+  Spacer,
+  Stack,
   StateBuilder,
   Tabs,
-  Text2 as Text,
-  TextInput2 as TextInput,
+  Text,
+  TextInput,
   TransitionBuilder,
   TypedTransitionBuilder,
   WorkflowProvider,
@@ -8120,7 +7402,12 @@ export {
   applyMixins,
   approval,
   assertModelValid,
+  buildActionScope,
+  buildEvalContext,
+  buildLoopScope,
+  buildScope,
   builtinAtoms,
+  builtinFunctions,
   cedar,
   compose,
   computeVisibility,
@@ -8128,7 +7415,9 @@ export {
   connector,
   constraints,
   createActions,
+  createApiResolver,
   createCRUD,
+  createCoreAtomRegistry,
   createLocalDataResolver,
   createLocalEngineAdapter,
   createPipeline,
@@ -8192,6 +7481,8 @@ export {
   llm,
   loadExperienceWorkflow,
   logEvent,
+  mergeRegistries,
+  mergeScope,
   model,
   named,
   normalizeDefinition,
@@ -8203,6 +7494,7 @@ export {
   orchestration,
   patch,
   pipe,
+  evaluateExpression as playerEvaluateExpression,
   playerLog,
   prefetchData,
   refHasAnyRole,
@@ -8210,6 +7502,8 @@ export {
   requireAuth,
   requireField,
   requireRole,
+  resolveAllBindings,
+  resolveBinding,
   resolveOrchestration,
   restrict,
   review,
@@ -8279,6 +7573,7 @@ export {
   useRouteParams,
   useRouter,
   useRuntimeContext,
+  useScope,
   useServerAction,
   useServerState,
   useStateField,
@@ -8288,7 +7583,7 @@ export {
   useVisibility,
   useWhileIn,
   useWorkflow,
-  useState22 as useWorkflowState,
+  useState19 as useWorkflowState,
   userAction,
   userChoice,
   validate,