@mmapp/react 0.1.0-alpha.24 → 0.1.0-alpha.25

package/dist/chunk-AKSS3YYW.mjs

@@ -0,0 +1,2041 @@
+import {
+  ScopeContext,
+  buildScope,
+  builtinFunctions,
+  classifyExpression,
+  evaluateExpression,
+  resolvePath,
+  useScope
+} from "./chunk-WV7DVCP6.mjs";
+
+// src/hooks/useQuery.ts
+import { useState, useEffect, useCallback, useRef } 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 = useRef(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]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  useEffect(() => {
+    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 useRef2 } 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 = useRef2(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/player/binding-resolver.ts
+function classifyBinding(expr) {
+  const t = expr.trim();
+  const type = classifyExpression(t);
+  switch (type) {
+    case "literal":
+      return { type, value: parseLiteralValue(t) };
+    case "path": {
+      const dotIdx = t.indexOf(".");
+      if (dotIdx === -1) return { type, root: t, rest: "" };
+      return { type, root: t.slice(0, dotIdx), rest: t.slice(dotIdx + 1) };
+    }
+    case "function": {
+      const fnCall = parseFunctionCall(t);
+      if (fnCall) return { type, name: fnCall.name, rawArgs: fnCall.args };
+      return { type, expression: t };
+    }
+    case "action": {
+      const fnCall = parseFunctionCall(t);
+      if (fnCall) return { type, name: fnCall.name, rawArgs: fnCall.args };
+      if (t.startsWith("$action.")) return { type, name: t.slice("$action.".length), rawArgs: [] };
+      return { type, expression: t };
+    }
+    case "condition":
+      if (t.startsWith("$expr(") && t.endsWith(")")) return { type, expression: t.slice(6, -1) };
+      return { type, expression: t };
+  }
+}
+function parseLiteralValue(t) {
+  if (t === "[Expression]" || t.includes("[Expression]")) return void 0;
+  if (t.startsWith('"') && t.endsWith('"') || t.startsWith("'") && t.endsWith("'")) return t.slice(1, -1);
+  if (/^-?\d+(\.\d+)?$/.test(t)) return Number(t);
+  if (t === "true") return true;
+  if (t === "false") return false;
+  if (t === "null") return null;
+  return void 0;
+}
+function parseFunctionCall(expr) {
+  const match = expr.match(/^\$(fn|action)\.(\w+)\((.*)\)$/s);
+  if (!match) return null;
+  const [, namespace, name, argsStr] = match;
+  const args = argsStr.trim() ? splitArgs(argsStr.trim()) : [];
+  return { namespace, name, args };
+}
+function splitArgs(argsStr) {
+  const args = [];
+  let current = "";
+  let depth = 0;
+  let inString = null;
+  for (let i = 0; i < argsStr.length; i++) {
+    const ch = argsStr[i];
+    if (inString) {
+      current += ch;
+      if (ch === inString && argsStr[i - 1] !== "\\") inString = null;
+    } else if (ch === '"' || ch === "'") {
+      current += ch;
+      inString = ch;
+    } else if (ch === "(" || ch === "[") {
+      current += ch;
+      depth++;
+    } else if (ch === ")" || ch === "]") {
+      current += ch;
+      depth--;
+    } else if (ch === "," && depth === 0) {
+      args.push(current.trim());
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim()) args.push(current.trim());
+  return args;
+}
+function resolveBinding(expr, scope) {
+  const binding = classifyBinding(expr);
+  switch (binding.type) {
+    case "literal":
+      return binding.value;
+    case "path":
+      return resolveScopedPath(binding.root, binding.rest, scope);
+    case "function":
+      return resolveFunction(binding.name, binding.rawArgs, scope);
+    case "action":
+      return resolveAction(binding.name, binding.rawArgs, scope);
+    case "condition":
+      return resolveCondition(binding.expression ?? expr, scope);
+    default:
+      return void 0;
+  }
+}
+function resolveAllBindings(bindings, scope) {
+  const resolved = {};
+  for (const [propName, expr] of Object.entries(bindings)) {
+    try {
+      resolved[propName] = resolveBinding(expr, scope);
+    } catch {
+      resolved[propName] = void 0;
+    }
+  }
+  return resolved;
+}
+function resolveScopedPath(root, rest, scope) {
+  let rootValue;
+  switch (root) {
+    case "$instance":
+      rootValue = scope.$instance;
+      break;
+    case "$instances":
+      rootValue = scope.$instances;
+      break;
+    case "$definition":
+      rootValue = scope.$definition;
+      break;
+    case "$pagination":
+      rootValue = scope.$pagination;
+      break;
+    case "$entity":
+      rootValue = scope.$entity;
+      break;
+    case "$local":
+      rootValue = scope.$local;
+      break;
+    case "$user":
+      rootValue = scope.$user;
+      break;
+    case "$action":
+      rootValue = scope.$action;
+      break;
+    case "$fn":
+      rootValue = scope.$fn;
+      break;
+    case "$item":
+      rootValue = scope.$item;
+      break;
+    case "$index":
+      rootValue = scope.$index;
+      break;
+    default:
+      rootValue = scope[root];
+      if (rootValue === void 0) {
+        rootValue = scope.$item;
+        if (rootValue != null && rest) {
+          return resolvePath(`${root}.${rest}`, { [root]: scope.$item });
+        }
+      }
+  }
+  if (!rest) return rootValue;
+  if (rootValue == null) return void 0;
+  return resolvePath(rest, rootValue);
+}
+function resolveFunction(name, rawArgs, scope) {
+  const fn = scope.$fn?.[name] ?? builtinFunctions[name];
+  if (typeof fn !== "function") {
+    console.warn(`[binding-resolver] Unknown function: $fn.${name}`);
+    return void 0;
+  }
+  const resolvedArgs = rawArgs.map((arg) => resolveBinding(arg.trim(), scope));
+  try {
+    return fn(...resolvedArgs);
+  } catch (err) {
+    console.warn(`[binding-resolver] Error calling $fn.${name}:`, err);
+    return void 0;
+  }
+}
+function resolveAction(name, rawArgs, scope) {
+  const actions = scope.$action;
+  if (!actions) return void 0;
+  if (name === "seq") {
+    return () => {
+      for (const arg of rawArgs) {
+        const resolved = resolveBinding(arg.trim(), scope);
+        if (typeof resolved === "function") resolved();
+      }
+    };
+  }
+  if (rawArgs.length === 0) {
+    const actionFn2 = actions[name];
+    if (typeof actionFn2 === "function") return actionFn2;
+    return void 0;
+  }
+  const actionFn = actions[name];
+  if (typeof actionFn !== "function") return void 0;
+  return (...callArgs) => {
+    const resolvedArgs = rawArgs.map((arg) => resolveBinding(arg.trim(), scope));
+    return actionFn(...resolvedArgs, ...callArgs);
+  };
+}
+function resolveCondition(expression, scope) {
+  const arrowMatch = expression.match(/^\(\)\s*=>\s*(.+)$/s);
+  if (arrowMatch) {
+    const body = arrowMatch[1].trim();
+    const actionCallMatch = body.match(/^\(?(\$action)\)?\.(\w+)\((.*)?\)$/s);
+    if (actionCallMatch) {
+      const [, , method, argsStr] = actionCallMatch;
+      return () => {
+        const actionFn = scope.$action?.[method];
+        if (typeof actionFn !== "function") return;
+        const args = argsStr ? splitArgs(argsStr.trim()).map((a) => resolveBinding(a.trim(), scope)) : [];
+        return actionFn(...args);
+      };
+    }
+    return () => {
+      const context2 = buildEvalContext(scope);
+      return evaluateExpression(body, context2);
+    };
+  }
+  const context = buildEvalContext(scope);
+  return evaluateExpression(expression, context);
+}
+function buildEvalContext(scope) {
+  const ctx = {};
+  ctx.$instance = scope.$instance;
+  ctx.$instances = scope.$instances;
+  ctx.$definition = scope.$definition;
+  ctx.$pagination = scope.$pagination;
+  ctx.$entity = scope.$entity;
+  ctx.$local = scope.$local;
+  ctx.$user = scope.$user;
+  ctx.$action = scope.$action;
+  ctx.$fn = scope.$fn;
+  ctx.$item = scope.$item;
+  ctx.$index = scope.$index;
+  if (scope.$instances) ctx.items = scope.$instances;
+  if (scope.$instance) {
+    ctx.instance = scope.$instance;
+    ctx.loading = false;
+  }
+  if (scope.$item) ctx.item = scope.$item;
+  if (scope.$index != null) ctx.index = scope.$index;
+  for (const [key, value] of Object.entries(scope)) {
+    if (!key.startsWith("$") && !(key in ctx) && value !== void 0) {
+      ctx[key] = value;
+    }
+  }
+  if (scope.state_data) ctx.state_data = scope.state_data;
+  if (scope.memory) ctx.memory = scope.memory;
+  if (scope.context) ctx.context = scope.context;
+  return ctx;
+}
+function buildActionScope(opts) {
+  const { resolver, instanceId, slug, setLocal, router, toast, refreshQuery, onEvent } = opts;
+  return {
+    transition: async (idOrName, nameOrId, data) => {
+      let targetId;
+      let transitionName;
+      if (nameOrId) {
+        targetId = idOrName;
+        transitionName = nameOrId;
+      } else {
+        transitionName = idOrName;
+        targetId = instanceId;
+      }
+      if (!targetId) {
+        console.warn("[action] transition called without instanceId");
+        return;
+      }
+      await resolver.transition(targetId, transitionName, data);
+      refreshQuery?.();
+    },
+    create: async (slugOrData, data) => {
+      let targetSlug;
+      let fields;
+      if (typeof slugOrData === "object") {
+        targetSlug = slug || "";
+        fields = slugOrData;
+      } else {
+        targetSlug = slugOrData || slug || "";
+        fields = data;
+      }
+      const id = await resolver.create(targetSlug, fields);
+      refreshQuery?.();
+      return id;
+    },
+    update: async (id, fields) => {
+      await resolver.update(id, fields);
+      refreshQuery?.();
+    },
+    remove: async (id) => {
+      await resolver.remove(id);
+      refreshQuery?.();
+    },
+    setLocal: (key, value) => {
+      setLocal(key, value);
+    },
+    navigate: (path) => {
+      router?.push(path);
+    },
+    toast: (message, variant) => {
+      toast?.(message, variant);
+    },
+    refreshQuery: (dataSourceName) => {
+      refreshQuery?.(dataSourceName);
+    },
+    scrollTo: (elementId) => {
+      if (typeof document !== "undefined") {
+        const el = document.getElementById(elementId);
+        el?.scrollIntoView({ behavior: "smooth" });
+      }
+    },
+    openModal: (modalId) => {
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("player:open_modal", { detail: { id: modalId } }));
+      }
+    },
+    closeModal: (modalId) => {
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("player:close_modal", { detail: { id: modalId } }));
+      }
+    },
+    emit: (event, payload) => {
+      onEvent?.(event, payload);
+    }
+  };
+}
+
+// src/player/atom-registry.ts
+import React from "react";
+function namedExport(loader, exportName) {
+  return () => loader().then((mod) => ({ default: mod[exportName] }));
+}
+var AtomRegistryImpl = class _AtomRegistryImpl {
+  loaders = /* @__PURE__ */ new Map();
+  lazyCache = /* @__PURE__ */ new Map();
+  eagerCache = /* @__PURE__ */ new Map();
+  register(name, loader) {
+    this.loaders.set(name, loader);
+    this.lazyCache.delete(name);
+  }
+  registerEager(name, component) {
+    this.eagerCache.set(name, component);
+  }
+  resolve(name) {
+    const eager = this.eagerCache.get(name);
+    if (eager) {
+      const cached2 = this.lazyCache.get(name);
+      if (cached2) return cached2;
+      const lazy2 = React.lazy(() => Promise.resolve({ default: eager }));
+      this.lazyCache.set(name, lazy2);
+      return lazy2;
+    }
+    const cached = this.lazyCache.get(name);
+    if (cached) return cached;
+    const loader = this.loaders.get(name);
+    if (!loader) return null;
+    const lazy = React.lazy(loader);
+    this.lazyCache.set(name, lazy);
+    return lazy;
+  }
+  resolveSync(name) {
+    return this.eagerCache.get(name) ?? null;
+  }
+  has(name) {
+    return this.loaders.has(name) || this.eagerCache.has(name);
+  }
+  list() {
+    const names = /* @__PURE__ */ new Set();
+    for (const k of this.loaders.keys()) names.add(k);
+    for (const k of this.eagerCache.keys()) names.add(k);
+    return Array.from(names).sort();
+  }
+  merge(other) {
+    const merged = new _AtomRegistryImpl();
+    for (const [name, loader] of this.loaders) merged.loaders.set(name, loader);
+    for (const [name, comp] of this.eagerCache) merged.eagerCache.set(name, comp);
+    for (const name of other.list()) {
+      const otherImpl = other;
+      if (otherImpl.loaders?.has(name)) {
+        merged.loaders.set(name, otherImpl.loaders.get(name));
+      }
+      if (otherImpl.eagerCache?.has(name)) {
+        merged.eagerCache.set(name, otherImpl.eagerCache.get(name));
+      }
+    }
+    return merged;
+  }
+  toRecord() {
+    const record = {};
+    for (const name of this.eagerCache.keys()) {
+      record[name] = this.eagerCache.get(name);
+    }
+    return record;
+  }
+};
+function createCoreAtomRegistry() {
+  const registry = new AtomRegistryImpl();
+  registry.register("Stack", namedExport(() => import("./layout-RATDMCLP.mjs"), "Stack"));
+  registry.register("Row", namedExport(() => import("./layout-RATDMCLP.mjs"), "Row"));
+  registry.register("Grid", namedExport(() => import("./layout-RATDMCLP.mjs"), "Grid"));
+  registry.register("Column", namedExport(() => import("./layout-RATDMCLP.mjs"), "Column"));
+  registry.register("Divider", namedExport(() => import("./layout-RATDMCLP.mjs"), "Divider"));
+  registry.register("Spacer", namedExport(() => import("./layout-RATDMCLP.mjs"), "Spacer"));
+  registry.register("Text", namedExport(() => import("./content-QVPFUG4P.mjs"), "Text"));
+  registry.register("Heading", namedExport(() => import("./content-QVPFUG4P.mjs"), "Heading"));
+  registry.register("Field", namedExport(() => import("./content-QVPFUG4P.mjs"), "Field"));
+  registry.register("Image", namedExport(() => import("./content-QVPFUG4P.mjs"), "Image"));
+  registry.register("Badge", namedExport(() => import("./content-QVPFUG4P.mjs"), "Badge"));
+  registry.register("Icon", namedExport(() => import("./content-QVPFUG4P.mjs"), "Icon"));
+  registry.register("Button", namedExport(() => import("./actions-HOXZPBTT.mjs"), "Button"));
+  registry.register("Link", namedExport(() => import("./actions-HOXZPBTT.mjs"), "Link"));
+  registry.register("Show", namedExport(() => import("./control-flow-ZWUGCDSP.mjs"), "Show"));
+  registry.register("Each", namedExport(() => import("./control-flow-ZWUGCDSP.mjs"), "Each"));
+  registry.register("TextInput", namedExport(() => import("./input-YMO6H7RP.mjs"), "TextInput"));
+  registry.register("Input", namedExport(() => import("./input-YMO6H7RP.mjs"), "TextInput"));
+  registry.register("Select", namedExport(() => import("./input-YMO6H7RP.mjs"), "Select"));
+  registry.register("Toggle", namedExport(() => import("./input-YMO6H7RP.mjs"), "Toggle"));
+  registry.register("Slider", namedExport(() => import("./input-YMO6H7RP.mjs"), "Slider"));
+  registry.register("Card", namedExport(() => import("./grouping-FRPOEXO3.mjs"), "Card"));
+  registry.register("Section", namedExport(() => import("./grouping-FRPOEXO3.mjs"), "Section"));
+  registry.register("Tabs", namedExport(() => import("./grouping-FRPOEXO3.mjs"), "Tabs"));
+  registry.register("Accordion", namedExport(() => import("./grouping-FRPOEXO3.mjs"), "Accordion"));
+  registry.register("Modal", namedExport(() => import("./grouping-FRPOEXO3.mjs"), "Modal"));
+  registry.register("Router", namedExport(() => import("./navigation-VCT7ZBMA.mjs"), "Router"));
+  registry.register("Route", namedExport(() => import("./navigation-VCT7ZBMA.mjs"), "Route"));
+  registry.register("NavLink", namedExport(() => import("./navigation-VCT7ZBMA.mjs"), "NavLink"));
+  registry.register("RoleGuard", namedExport(() => import("./navigation-VCT7ZBMA.mjs"), "RoleGuard"));
+  registry.register("Slot", namedExport(() => import("./composition-BJ6QQTWT.mjs"), "Slot"));
+  registry.register("ModuleOutlet", namedExport(() => import("./composition-BJ6QQTWT.mjs"), "ModuleOutlet"));
+  registry.register("Markdown", namedExport(() => import("./content-QVPFUG4P.mjs"), "Markdown"));
+  registry.register("ScrollArea", namedExport(() => import("./grouping-FRPOEXO3.mjs"), "ScrollArea"));
+  registry.register("Table", namedExport(() => import("./data-WCMIZYKD.mjs"), "Table"));
+  registry.register("DataGrid", namedExport(() => import("./data-WCMIZYKD.mjs"), "DataGrid"));
+  registry.register("Alert", namedExport(() => import("./content-QVPFUG4P.mjs"), "Alert"));
+  registry.register("EmptyState", namedExport(() => import("./content-QVPFUG4P.mjs"), "EmptyState"));
+  registry.register("Progress", namedExport(() => import("./content-QVPFUG4P.mjs"), "Progress"));
+  registry.register("Separator", namedExport(() => import("./content-QVPFUG4P.mjs"), "Separator"));
+  return registry;
+}
+function mergeRegistries(...registries) {
+  let merged = new AtomRegistryImpl();
+  for (const r of registries) {
+    merged = merged.merge(r);
+  }
+  return merged;
+}
+
+// src/player/theme.ts
+var DEFAULT_DESIGN_TOKENS = {
+  // Colors
+  "token:primary": "#3182ce",
+  "token:primary-hover": "#2b6cb0",
+  "token:primary-light": "#ebf8ff",
+  "token:secondary": "#718096",
+  "token:secondary-hover": "#4a5568",
+  "token:accent": "#805ad5",
+  "token:success": "#38a169",
+  "token:warning": "#dd6b20",
+  "token:error": "#e53e3e",
+  "token:info": "#3182ce",
+  // Surfaces
+  "token:surface": "#ffffff",
+  "token:surface-hover": "#f7fafc",
+  "token:surface-secondary": "#edf2f7",
+  "token:background": "#f7fafc",
+  "token:card": "#ffffff",
+  "token:overlay": "rgba(0, 0, 0, 0.4)",
+  // Borders
+  "token:border": "#e2e8f0",
+  "token:border-light": "#edf2f7",
+  "token:border-focus": "#3182ce",
+  // Text
+  "token:text": "#1a202c",
+  "token:text-secondary": "#718096",
+  "token:text-muted": "#a0aec0",
+  "token:text-inverse": "#ffffff",
+  "token:text-link": "#3182ce",
+  // Shadows
+  "token:shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.05)",
+  "token:shadow": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
+  "token:shadow-md": "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)",
+  "token:shadow-lg": "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)",
+  // Spacing
+  "token:spacing-xs": "4px",
+  "token:spacing-sm": "8px",
+  "token:spacing-md": "16px",
+  "token:spacing-lg": "24px",
+  "token:spacing-xl": "32px",
+  // Radius
+  "token:radius-sm": "4px",
+  "token:radius": "6px",
+  "token:radius-md": "8px",
+  "token:radius-lg": "12px",
+  "token:radius-full": "9999px"
+};
+
+// src/player/PlayerProvider.tsx
+import { createContext, useContext, useEffect as useEffect2, useMemo, useRef as useRef3 } from "react";
+import { jsx } from "react/jsx-runtime";
+var PlayerContext = createContext(null);
+function usePlayerContext() {
+  return useContext(PlayerContext);
+}
+var ThemeContext = createContext(DEFAULT_DESIGN_TOKENS);
+function useTheme() {
+  return useContext(ThemeContext);
+}
+var PlayerProvider = ({
+  resolver,
+  atomRegistry: userAtomRegistry,
+  auth,
+  router,
+  toast,
+  onEvent,
+  theme: userTheme,
+  children
+}) => {
+  const atomRegistry = useMemo(
+    () => userAtomRegistry ?? createCoreAtomRegistry(),
+    [userAtomRegistry]
+  );
+  const mergedTheme = useMemo(
+    () => userTheme ? { ...DEFAULT_DESIGN_TOKENS, ...userTheme } : DEFAULT_DESIGN_TOKENS,
+    [userTheme]
+  );
+  const resolverRef = useRef3(resolver);
+  resolverRef.current = resolver;
+  useEffect2(() => {
+    if (!resolver) return;
+    setQueryResolver({
+      query: async (_slug, params) => {
+        const r = resolverRef.current;
+        if (!r) return { data: [] };
+        const result = await r.query(_slug, {
+          state: params.state,
+          filter: params.filter,
+          limit: params.limit,
+          offset: params.offset,
+          search: params.search,
+          searchFields: params.searchFields,
+          sort: params.sort
+        });
+        return { data: result.data, total: result.total };
+      }
+    });
+    setMutationResolver({
+      create: async (_slug, input) => {
+        const r = resolverRef.current;
+        if (!r) throw new Error("No resolver");
+        return r.create(_slug, input);
+      },
+      update: async (_slug, instanceId, fields) => {
+        const r = resolverRef.current;
+        if (!r) throw new Error("No resolver");
+        await r.update(instanceId, fields);
+      },
+      transition: async (_slug, instanceId, transitionName, input) => {
+        const r = resolverRef.current;
+        if (!r) throw new Error("No resolver");
+        await r.transition(instanceId, transitionName, input);
+      },
+      remove: async (_slug, instanceId) => {
+        const r = resolverRef.current;
+        if (!r) throw new Error("No resolver");
+        await r.remove(instanceId);
+      }
+    });
+    return () => {
+      setQueryResolver(null);
+      setMutationResolver(null);
+    };
+  }, [resolver]);
+  const value = useMemo(() => ({
+    resolver: resolver ?? null,
+    atomRegistry,
+    auth,
+    router,
+    toast,
+    onEvent
+  }), [resolver, atomRegistry, auth, router, toast, onEvent]);
+  return /* @__PURE__ */ jsx(PlayerContext.Provider, { value, children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: mergedTheme, children }) });
+};
+
+// src/player/ExperienceRenderer.tsx
+import React3, {
+  useState as useState3,
+  useEffect as useEffect3,
+  useCallback as useCallback3,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  Suspense
+} from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SharedLocalContext = React3.createContext({
+  state: {},
+  setLocal: () => {
+  }
+});
+function useSharedLocal() {
+  return React3.useContext(SharedLocalContext);
+}
+var NodeErrorBoundary = class extends React3.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, info) {
+    console.error(`[ExperienceRenderer] Error in node ${this.props.nodeId}:`, error, info);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? /* @__PURE__ */ jsxs("div", { style: { padding: 8, background: "#fff5f5", border: "1px solid #fed7d7", borderRadius: 6, fontSize: 12, color: "#c53030" }, children: [
+        "Error: ",
+        this.state.error?.message ?? "Render failed"
+      ] });
+    }
+    return this.props.children;
+  }
+};
+function useDataSources(dataSources, resolver, scope) {
+  const [results, setResults] = useState3({});
+  const mountedRef = useRef4(true);
+  useEffect3(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect3(() => {
+    if (!dataSources?.length || !resolver) return;
+    const loading = {};
+    for (const ds of dataSources) {
+      loading[ds.name] = { loading: true, error: null };
+    }
+    setResults(loading);
+    const fetchAll = async () => {
+      const entries = await Promise.all(
+        dataSources.map(async (ds) => {
+          try {
+            const result = await fetchDataSource(ds, resolver, scope);
+            return [ds.name, result];
+          } catch (err) {
+            return [ds.name, { loading: false, error: err instanceof Error ? err : new Error(String(err)) }];
+          }
+        })
+      );
+      if (mountedRef.current) {
+        setResults(Object.fromEntries(entries));
+      }
+    };
+    fetchAll();
+  }, [dataSources, resolver]);
+  return results;
+}
+async function fetchDataSource(ds, resolver, scope) {
+  switch (ds.type) {
+    case "workflow": {
+      const slug = ds.slug ?? "";
+      if (!slug) return { loading: false, error: new Error("workflow dataSource missing slug") };
+      const queryResult = await resolver.query(slug, {
+        state: ds.filter?.current_state,
+        filter: ds.filter,
+        limit: ds.pageSize ?? 20,
+        page: scope.$local?.[ds.pageKey ?? "page"] ?? 1,
+        search: ds.search ? interpolateTemplate(ds.search, scope) : void 0,
+        searchFields: ds.searchFields,
+        sort: ds.sort,
+        facets: ds.facets,
+        entity: ds.entity,
+        includeDefinition: ds.includeDefinition,
+        parentInstanceId: ds.parentInstanceId ? interpolateTemplate(ds.parentInstanceId, scope) : void 0
+      });
+      const result = {
+        instances: queryResult.data,
+        loading: false,
+        error: null
+      };
+      if (queryResult.data.length === 1 && ds.query !== "list") {
+        result.instance = queryResult.data[0];
+      }
+      if (queryResult.definition) result.definition = queryResult.definition;
+      if (queryResult.total != null) {
+        result.pagination = {
+          total: queryResult.total,
+          page: queryResult.page,
+          pageSize: queryResult.pageSize
+        };
+      }
+      if (queryResult.facets) result.facets = queryResult.facets;
+      if (queryResult.aggregates) result.aggregates = queryResult.aggregates;
+      if (ds.autoStart && queryResult.data.length === 0) {
+        try {
+          const id = await resolver.create(slug, ds.initialData);
+          const instance = await resolver.getInstance(id);
+          result.instance = instance;
+          result.instances = [instance];
+        } catch {
+        }
+      }
+      return result;
+    }
+    case "api": {
+      if (!resolver.fetch) return { loading: false, error: new Error("API datasource: resolver.fetch not implemented") };
+      const endpoint = interpolateTemplate(ds.endpoint, scope);
+      const raw = await resolver.fetch(endpoint, {
+        method: ds.method,
+        body: ds.body,
+        headers: ds.headers
+      });
+      const mapped = mapApiResponse(raw, ds.mapping);
+      return { instances: mapped.items, loading: false, error: null, pagination: mapped.pagination };
+    }
+    case "static": {
+      const data = ds.data;
+      if (Array.isArray(data)) {
+        return {
+          instances: data.map((d, i) => ({
+            id: String(d.id ?? i),
+            state: "static",
+            fields: d
+          })),
+          loading: false,
+          error: null
+        };
+      }
+      return {
+        instance: { id: "static", state: "static", fields: data },
+        loading: false,
+        error: null
+      };
+    }
+    case "ref": {
+      const ctx = buildEvalContext(scope);
+      const resolved = evaluateExpression(ds.expression, ctx);
+      if (Array.isArray(resolved)) {
+        return {
+          instances: resolved.map((item, i) => ({
+            id: String(item?.id ?? i),
+            state: String(item?.state ?? "ref"),
+            fields: item && typeof item === "object" ? item : { value: item }
+          })),
+          loading: false,
+          error: null
+        };
+      }
+      if (resolved != null && typeof resolved === "object") {
+        const obj = resolved;
+        return {
+          instance: {
+            id: String(obj.id ?? "ref"),
+            state: String(obj.state ?? "ref"),
+            fields: obj
+          },
+          loading: false,
+          error: null
+        };
+      }
+      return { loading: false, error: null };
+    }
+    default:
+      return { loading: false, error: new Error(`Unknown dataSource type: ${ds.type}`) };
+  }
+}
+function interpolateTemplate(template, scope) {
+  return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_, path) => {
+    const val = resolveBinding(`$${path}`, scope) ?? resolveBinding(path, scope);
+    return val != null ? String(val) : "";
+  });
+}
+function mapApiResponse(raw, mapping) {
+  if (!raw || typeof raw !== "object") return { items: [] };
+  const obj = raw;
+  let items;
+  if (mapping?.items || mapping?.data) {
+    items = obj[mapping.items ?? mapping.data ?? "data"] ?? [];
+  } else if (Array.isArray(raw)) {
+    items = raw;
+  } else if (Array.isArray(obj.data)) {
+    items = obj.data;
+  } else if (Array.isArray(obj.items)) {
+    items = obj.items;
+  } else {
+    items = [raw];
+  }
+  const result = items.map((item, i) => ({
+    id: String(item?.id ?? i),
+    state: String(item?.state ?? "unknown"),
+    fields: item ?? {}
+  }));
+  let pagination;
+  const total = mapping?.total ? obj[mapping.total] : obj.total;
+  if (total != null) {
+    pagination = { total: Number(total), page: Number(obj.page ?? 1), pageSize: Number(obj.pageSize ?? items.length) };
+  }
+  return { items: result, pagination };
+}
+function resolveTokens(value, tokens) {
+  if (typeof value === "string" && value.startsWith("token:")) {
+    return tokens[value] ?? value;
+  }
+  if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+    const resolved = {};
+    for (const [k, v] of Object.entries(value)) {
+      resolved[k] = resolveTokens(v, tokens);
+    }
+    return resolved;
+  }
+  return value;
+}
+var NodeRenderer = ({ node, fallback }) => {
+  const parentScope = useScope();
+  const playerCtx = usePlayerContext();
+  const resolver = playerCtx?.resolver ?? null;
+  const atomRegistry = playerCtx?.atomRegistry;
+  const themeTokens = useTheme();
+  const sharedLocal = useSharedLocal();
+  const localDefaults = node.config?.localDefaults ?? {};
+  useEffect3(() => {
+    if (Object.keys(localDefaults).length > 0) {
+      for (const [key, value] of Object.entries(localDefaults)) {
+        if (sharedLocal.state[key] === void 0) {
+          sharedLocal.setLocal(key, value);
+        }
+      }
+    }
+  }, []);
+  const localState = sharedLocal.state;
+  const handleSetLocal = sharedLocal.setLocal;
+  const [, setFetchVersion] = useState3(0);
+  const handleRefreshQuery = useCallback3(() => {
+    setFetchVersion((v) => v + 1);
+  }, []);
+  const dsResults = useDataSources(node.dataSources, resolver, parentScope);
+  const primaryInstance = Object.values(dsResults).find((r) => r.instance)?.instance;
+  const primarySlug = node.dataSources?.find((ds) => ds.type === "workflow")?.slug;
+  const actionScope = useMemo2(() => {
+    if (!resolver) {
+      return {
+        transition: async () => {
+        },
+        create: async () => "",
+        update: async () => {
+        },
+        remove: async () => {
+        },
+        setLocal: handleSetLocal,
+        navigate: () => {
+        },
+        toast: () => {
+        },
+        refreshQuery: handleRefreshQuery,
+        scrollTo: () => {
+        },
+        openModal: () => {
+        },
+        closeModal: () => {
+        },
+        emit: () => {
+        }
+      };
+    }
+    return buildActionScope({
+      resolver,
+      instanceId: primaryInstance?.id,
+      slug: primarySlug,
+      setLocal: handleSetLocal,
+      router: playerCtx?.router,
+      toast: playerCtx?.toast,
+      refreshQuery: handleRefreshQuery,
+      onEvent: playerCtx?.onEvent
+    });
+  }, [resolver, primaryInstance?.id, primarySlug, handleSetLocal, handleRefreshQuery, playerCtx]);
+  const scope = useMemo2(() => buildScope({
+    dataSources: dsResults,
+    localState,
+    auth: playerCtx?.auth,
+    entity: node.dataSources?.find((ds) => ds.type === "workflow")?.entity,
+    parentScope,
+    actionScope
+  }), [dsResults, localState, parentScope, actionScope, playerCtx?.auth]);
+  const enrichedScope = useMemo2(() => {
+    if (!node.dataSources?.length) {
+      return scope;
+    }
+    const handleCreate = () => {
+      if (primarySlug && resolver) {
+        const fields = {};
+        for (const [key, val] of Object.entries(localState)) {
+          if (key.startsWith("new_") && val != null && val !== "") {
+            fields[key.slice(4)] = val;
+          }
+        }
+        resolver.create(primarySlug, Object.keys(fields).length > 0 ? fields : void 0).then(() => {
+          for (const key of Object.keys(localState)) {
+            if (key.startsWith("new_")) handleSetLocal(key, "");
+          }
+          handleSetLocal("show_create", false);
+          handleRefreshQuery();
+        });
+      }
+    };
+    const handleUpdate = (id) => {
+      if (primarySlug && resolver) {
+        const fields = {};
+        for (const [key, val] of Object.entries(localState)) {
+          if (key.startsWith("edit_") && val != null && val !== "") {
+            fields[key.slice(5)] = val;
+          }
+        }
+        if (Object.keys(fields).length > 0) {
+          resolver.update(id, fields).then(() => {
+            handleSetLocal("editing_id", null);
+            handleRefreshQuery();
+          });
+        }
+      }
+    };
+    const setSearch = (e) => {
+      const val = typeof e === "object" && e !== null && "target" in e ? e.target.value : String(e ?? "");
+      handleSetLocal("search", val);
+    };
+    const enrichedAction = {
+      ...scope.$action,
+      handleCreate,
+      handleUpdate,
+      setSearch
+    };
+    const baseInstance = scope.$instance ?? { id: "", state: "", fields: {} };
+    const enrichedInstance = { ...baseInstance, handleCreate, handleUpdate, setSearch };
+    return {
+      ...scope,
+      $action: enrichedAction,
+      $instance: enrichedInstance,
+      handleCreate,
+      handleUpdate,
+      setSearch
+    };
+  }, [scope, primarySlug, resolver, handleRefreshQuery, handleSetLocal, node.dataSources, localState]);
+  if (node.visible_when) {
+    const ctx = buildEvalContext(enrichedScope);
+    const visible = evaluateExpression(node.visible_when, ctx);
+    if (!visible) return null;
+  }
+  if (node.$if) {
+    const ctx = buildEvalContext(enrichedScope);
+    const visible = evaluateExpression(node.$if, ctx);
+    if (!visible) return null;
+  }
+  const resolvedBindings = node.bindings ? resolveAllBindings(node.bindings, enrichedScope) : {};
+  const config = node.config ?? node.props ?? {};
+  const rawMerged = { ...config, ...resolvedBindings };
+  const mergedProps = {};
+  for (const [k, v] of Object.entries(rawMerged)) {
+    mergedProps[k] = resolveTokens(v, themeTokens);
+  }
+  if (node.className) mergedProps.className = node.className;
+  if (node.id) mergedProps["data-node-id"] = node.id;
+  const loadingAny = Object.values(dsResults).some((r) => r.loading);
+  if (Object.keys(dsResults).length > 0) {
+    mergedProps.loading = loadingAny;
+    const firstResult = Object.values(dsResults)[0];
+    if (firstResult?.instances) mergedProps.data = firstResult.instances;
+    if (firstResult?.instance) mergedProps.instance = firstResult.instance;
+    if (firstResult?.pagination) mergedProps.pagination = firstResult.pagination;
+    if (firstResult?.definition) mergedProps.definition = firstResult.definition;
+  }
+  const componentName = node.component ?? node.type ?? "";
+  let AtomComponent = null;
+  if (atomRegistry) {
+    const lazy = atomRegistry.resolve(componentName);
+    if (lazy) AtomComponent = lazy;
+  }
+  if (!AtomComponent) {
+    if (!componentName && node.children?.length) {
+      return /* @__PURE__ */ jsx2(ScopeContext.Provider, { value: enrichedScope, children: /* @__PURE__ */ jsx2("div", { className: node.className, style: node.style, children: node.children.map((child, i) => /* @__PURE__ */ jsx2(NodeErrorBoundary, { nodeId: child.id, children: /* @__PURE__ */ jsx2(NodeRenderer, { node: child, fallback }) }, child.id ?? i)) }) });
+    }
+    if (componentName) {
+      return /* @__PURE__ */ jsxs("div", { style: { border: "1px dashed #e53e3e", borderRadius: 6, padding: "8px 12px", margin: 4, fontSize: 13, color: "#e53e3e", background: "#fff5f5" }, children: [
+        "Unknown: ",
+        componentName
+      ] });
+    }
+    return null;
+  }
+  let children = null;
+  if (node.children?.length) {
+    children = node.children.map((child, i) => /* @__PURE__ */ jsx2(NodeErrorBoundary, { nodeId: child.id, children: /* @__PURE__ */ jsx2(NodeRenderer, { node: child, fallback }) }, child.id ?? i));
+  }
+  if (!children && mergedProps.children != null) {
+    children = mergedProps.children;
+    delete mergedProps.children;
+  }
+  delete mergedProps.localDefaults;
+  delete mergedProps.dataSources;
+  delete mergedProps.bindings;
+  delete mergedProps.visible_when;
+  return /* @__PURE__ */ jsx2(ScopeContext.Provider, { value: enrichedScope, children: /* @__PURE__ */ jsx2(NodeErrorBoundary, { nodeId: node.id, fallback, children: /* @__PURE__ */ jsx2(Suspense, { fallback: /* @__PURE__ */ jsxs("div", { style: { padding: 8, color: "#a0aec0", fontSize: 13 }, children: [
+    "Loading ",
+    componentName,
+    "..."
+  ] }), children: /* @__PURE__ */ jsx2(AtomComponent, { ...mergedProps, children }) }) }) });
+};
+var ExperienceRenderer = ({
+  tree,
+  initialScope,
+  entity,
+  fallback,
+  className
+}) => {
+  const playerCtx = usePlayerContext();
+  const nodes = Array.isArray(tree) ? tree : [tree];
+  const [sharedLocalState, setSharedLocalState] = useState3({});
+  const handleSharedSetLocal = useCallback3((key, value) => {
+    setSharedLocalState((prev) => ({ ...prev, [key]: value }));
+  }, []);
+  const sharedLocal = useMemo2(() => ({
+    state: sharedLocalState,
+    setLocal: handleSharedSetLocal
+  }), [sharedLocalState, handleSharedSetLocal]);
+  const rootScope = useMemo2(() => buildScope({
+    auth: playerCtx?.auth ?? initialScope?.auth,
+    entity,
+    localState: initialScope?.$local ?? {},
+    actionScope: initialScope?.$action ?? {
+      transition: async () => {
+      },
+      create: async () => "",
+      update: async () => {
+      },
+      remove: async () => {
+      },
+      setLocal: () => {
+      },
+      navigate: () => {
+      },
+      toast: () => {
+      },
+      refreshQuery: () => {
+      },
+      scrollTo: () => {
+      },
+      openModal: () => {
+      },
+      closeModal: () => {
+      },
+      emit: () => {
+      }
+    }
+  }), [playerCtx?.auth, entity, initialScope]);
+  return /* @__PURE__ */ jsx2(SharedLocalContext.Provider, { value: sharedLocal, children: /* @__PURE__ */ jsx2(ScopeContext.Provider, { value: rootScope, children: /* @__PURE__ */ jsx2("div", { className, children: nodes.map((node, i) => /* @__PURE__ */ jsx2(NodeErrorBoundary, { nodeId: node.id, children: /* @__PURE__ */ jsx2(NodeRenderer, { node, fallback }) }, node.id ?? i)) }) }) });
+};
+
+// src/player/resolver.ts
+function getToken(token) {
+  if (!token) return null;
+  if (typeof token === "function") return token();
+  return token;
+}
+function normalizeInstance(raw) {
+  return {
+    id: String(raw.id ?? ""),
+    state: String(raw.current_state ?? raw.state ?? "unknown"),
+    fields: raw.state_data ?? raw.fields ?? {},
+    slug: raw.definition_slug,
+    created_at: raw.created_at,
+    updated_at: raw.updated_at,
+    ...raw
+  };
+}
+function createApiResolver(config) {
+  const { baseUrl, defaults } = config;
+  const fetchFn = config.fetch ?? globalThis.fetch.bind(globalThis);
+  const defCache = /* @__PURE__ */ new Map();
+  async function apiRequest(path, options = {}) {
+    const tok = getToken(config.token);
+    const headers = {
+      "Content-Type": "application/json",
+      ...options.headers ?? {}
+    };
+    if (tok) headers["Authorization"] = `Bearer ${tok}`;
+    const response = await fetchFn(`${baseUrl}${path}`, {
+      ...options,
+      headers
+    });
+    if (!response.ok) {
+      const body = await response.text().catch(() => "");
+      let message = `API error ${response.status}: ${response.statusText}`;
+      try {
+        const parsed = JSON.parse(body);
+        if (parsed.message) message = parsed.message;
+        if (parsed.error) message = `${parsed.error}: ${parsed.message || ""}`;
+      } catch {
+      }
+      throw new Error(message);
+    }
+    return response.json();
+  }
+  const resolver = {
+    async query(slug, params) {
+      const searchParams = new URLSearchParams();
+      searchParams.set("definition", slug);
+      if (params.state) {
+        const states = Array.isArray(params.state) ? params.state : [params.state];
+        states.forEach((s) => searchParams.append("state", s));
+      }
+      if (params.status) searchParams.set("status", params.status);
+      if (params.limit ?? defaults?.limit) searchParams.set("limit", String(params.limit ?? defaults?.limit ?? 20));
+      if (params.page) searchParams.set("page", String(params.page));
+      if (params.offset) searchParams.set("offset", String(params.offset));
+      if (params.search) searchParams.set("search", params.search);
+      if (params.searchFields?.length) searchParams.set("search_fields", params.searchFields.join(","));
+      if (params.sort) {
+        if (typeof params.sort === "string") {
+          searchParams.set("sort", params.sort);
+        } else if (Array.isArray(params.sort)) {
+          const sortStr = params.sort.map((s) => `${s.direction === "desc" ? "-" : ""}${s.field}`).join(",");
+          searchParams.set("sort", sortStr);
+        }
+      }
+      if (params.filter) {
+        searchParams.set("state_filter", JSON.stringify(params.filter));
+      }
+      if (params.facets?.length) {
+        searchParams.set("facets", params.facets.join(","));
+      }
+      if (params.entity) {
+        searchParams.set("entity_type", params.entity.type);
+        searchParams.set("entity_id", params.entity.id);
+      }
+      if (params.parentInstanceId) {
+        searchParams.set("spawned_by_instance_id", params.parentInstanceId);
+      }
+      if (params.includeDefinition) {
+        searchParams.set("include_definition", "true");
+      }
+      const raw = await apiRequest(
+        `/workflow/instances?${searchParams.toString()}`
+      );
+      const items = raw.items ?? raw.data ?? [];
+      const total = Number(raw.total ?? raw.count ?? items.length);
+      const page = Number(raw.page ?? params.page ?? 1);
+      const pageSize = Number(raw.page_size ?? raw.pageSize ?? params.limit ?? defaults?.limit ?? 20);
+      const result = {
+        data: items.map(normalizeInstance),
+        total,
+        page,
+        pageSize
+      };
+      if (raw.definition) result.definition = raw.definition;
+      if (raw.facets) result.facets = raw.facets;
+      if (raw.aggregates) result.aggregates = raw.aggregates;
+      if (raw.grouped) result.grouped = raw.grouped;
+      return result;
+    },
+    async getInstance(id) {
+      const raw = await apiRequest(`/workflow/instances/${id}`);
+      return normalizeInstance(raw);
+    },
+    async getDefinition(slug) {
+      const cached = defCache.get(slug);
+      if (cached && cached.expires > Date.now()) return cached.data;
+      const raw = await apiRequest(`/workflow/definitions/slug/${slug}`);
+      defCache.set(slug, { data: raw, expires: Date.now() + 5 * 60 * 1e3 });
+      return raw;
+    },
+    async create(slug, data) {
+      const raw = await apiRequest("/workflow/instances", {
+        method: "POST",
+        body: JSON.stringify({
+          definition_slug: slug,
+          state_data: data ?? {}
+        })
+      });
+      return String(raw.id);
+    },
+    async update(id, fields) {
+      await apiRequest(`/workflow/instances/${id}/state-data`, {
+        method: "PATCH",
+        body: JSON.stringify(fields)
+      });
+    },
+    async transition(id, name, data) {
+      const raw = await apiRequest(
+        `/workflow/instances/${id}/transitions/${name}`,
+        {
+          method: "POST",
+          body: JSON.stringify({ data: data ?? {} })
+        }
+      );
+      return raw;
+    },
+    async remove(id) {
+      await apiRequest(`/workflow/instances/${id}`, { method: "DELETE" });
+    },
+    async availableTransitions(id) {
+      const raw = await apiRequest(`/workflow/instances/${id}/transitions`);
+      return Array.isArray(raw) ? raw : [];
+    },
+    async fetch(endpoint, fetchConfig) {
+      return apiRequest(endpoint, {
+        method: fetchConfig.method ?? "GET",
+        body: fetchConfig.body ? JSON.stringify(fetchConfig.body) : void 0,
+        headers: fetchConfig.headers
+      });
+    }
+  };
+  return resolver;
+}
+
+// src/player/ComponentTreeRenderer.tsx
+import React4, { useMemo as useMemo3, useCallback as useCallback4 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var EXPR_PATTERN = /\{\{(.+?)\}\}/g;
+function containsExpression(value) {
+  return typeof value === "string" && EXPR_PATTERN.test(value);
+}
+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, (_, expr) => {
+      const result = evaluateExpression(expr, scopes);
+      return result == null ? "" : String(result);
+    });
+  }
+  return value;
+}
+var UnknownAtom = ({ type, children }) => /* @__PURE__ */ jsxs2("div", { style: { border: "1px dashed #e53e3e", borderRadius: 6, padding: "8px 12px", margin: 4, fontSize: 13, color: "#e53e3e", background: "#fff5f5" }, children: [
+  /* @__PURE__ */ jsxs2("span", { style: { fontWeight: 600 }, children: [
+    "Unknown: ",
+    type
+  ] }),
+  children && /* @__PURE__ */ jsx3("div", { style: { marginTop: 4 }, children })
+] });
+var RenderNode = ({ node, scopes, atoms, onEvent }) => {
+  const nodeType = node.type || node.component || "";
+  const nodeProps = node.props || node.config || {};
+  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__ */ jsx3(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__ */ jsx3(RenderNode, { node: nodeWithoutFor, scopes: loopScopes, atoms, onEvent }, itemKey);
+    }) });
+  }
+  const Component = atoms[nodeType];
+  if (!Component) {
+    return /* @__PURE__ */ jsx3(UnknownAtom, { type: nodeType });
+  }
+  const evaluatedProps = {};
+  if (node.className) evaluatedProps.className = node.className;
+  if (node.id) evaluatedProps["data-node-id"] = node.id;
+  for (const [key, value] of Object.entries(nodeProps)) {
+    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__ */ jsx3(RenderNode, { node: child, scopes, atoms, onEvent }, child.id || index));
+    }
+  }
+  return /* @__PURE__ */ jsx3(Component, { ...evaluatedProps, children });
+};
+var CTRErrorBoundary = class extends React4.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__ */ jsxs2("div", { style: { padding: 16, background: "#fff5f5", border: "1px solid #fed7d7", borderRadius: 8 }, children: [
+        /* @__PURE__ */ jsx3("strong", { style: { color: "#c53030" }, children: "Rendering Error" }),
+        /* @__PURE__ */ jsx3("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 = useMemo3(() => ({ ...atoms }), [atoms]);
+  const handleEvent = useCallback4(
+    (eventName, payload) => onEvent(eventName, payload),
+    [onEvent]
+  );
+  const nodes = Array.isArray(tree) ? tree : [tree];
+  return /* @__PURE__ */ jsx3(CTRErrorBoundary, { fallback, children: nodes.map((node, index) => /* @__PURE__ */ jsx3(RenderNode, { node, scopes, atoms: allAtoms, onEvent: handleEvent }, index)) });
+};
+
+// src/player/builtin-atoms.tsx
+import React5 from "react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Stack = ({ children, gap = 8, style, ...rest }) => /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: "column", gap, ...style }, ...rest, children });
+var Row = ({ children, gap = 8, align, justify, style, ...rest }) => /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: "row", gap, alignItems: align, justifyContent: justify, ...style }, ...rest, children });
+var Column = ({ children, span, style, ...rest }) => /* @__PURE__ */ jsx4("div", { style: { flex: span ? `0 0 ${Number(span) / 12 * 100}%` : 1, ...style }, ...rest, children });
+var Grid = ({ children, columns = 2, gap = 8, style, ...rest }) => /* @__PURE__ */ jsx4("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap, ...style }, ...rest, children });
+var Divider = ({ style }) => /* @__PURE__ */ jsx4("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "8px 0", ...style } });
+var Spacer = ({ size = 16 }) => /* @__PURE__ */ jsx4("div", { style: { height: size, flexShrink: 0 } });
+var Text = ({ children, size, weight, color, style, ...rest }) => /* @__PURE__ */ jsx4("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__ */ jsx4("h1", { style: s, ...rest, children: c });
+  if (lvl === 2) return /* @__PURE__ */ jsx4("h2", { style: s, ...rest, children: c });
+  if (lvl === 3) return /* @__PURE__ */ jsx4("h3", { style: s, ...rest, children: c });
+  if (lvl === 4) return /* @__PURE__ */ jsx4("h4", { style: s, ...rest, children: c });
+  if (lvl === 5) return /* @__PURE__ */ jsx4("h5", { style: s, ...rest, children: c });
+  return /* @__PURE__ */ jsx4("h6", { style: s, ...rest, children: c });
+};
+var Field = ({ label, value, children, style }) => /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 8, ...style }, children: [
+  label ? /* @__PURE__ */ jsx4("div", { style: { fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ jsx4("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__ */ jsx4("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__ */ jsx4("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__ */ jsx4(
+    "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__ */ jsx4("a", { href, style: { color: "#3182ce", textDecoration: "underline", ...style }, ...rest, children });
+var TextInput = ({ value, onChange, placeholder, label, bind: _bind, style }) => {
+  const isControlled = typeof onChange === "function";
+  const [localValue, setLocalValue] = React5.useState(value ?? "");
+  const handleChange = (e) => {
+    setLocalValue(e.target.value);
+    if (typeof onChange === "function") onChange(e);
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 8 }, children: [
+    label ? /* @__PURE__ */ jsx4("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+    /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type: "text",
+        value: isControlled ? value ?? "" : localValue,
+        onChange: handleChange,
+        placeholder,
+        style: { width: "100%", padding: "6px 10px", border: "1px solid #e2e8f0", borderRadius: 6, fontSize: 14, ...style }
+      }
+    )
+  ] });
+};
+var SelectAtom = ({ value, onChange, options, label, placeholder, style }) => /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 8 }, children: [
+  label ? /* @__PURE__ */ jsx4("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ jsxs3(
+    "select",
+    {
+      value: value ?? "",
+      onChange,
+      style: { width: "100%", padding: "6px 10px", border: "1px solid #e2e8f0", borderRadius: 6, fontSize: 14, ...style },
+      children: [
+        placeholder ? /* @__PURE__ */ jsx4("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__ */ jsx4("option", { value: v, children: l }, v);
+        })
+      ]
+    }
+  )
+] });
+var Card = ({ children, title, style, ...rest }) => /* @__PURE__ */ jsxs3("div", { style: { border: "1px solid #e2e8f0", borderRadius: 8, padding: 16, background: "#fff", ...style }, ...rest, children: [
+  title ? /* @__PURE__ */ jsx4("div", { style: { fontWeight: 600, fontSize: 16, marginBottom: 12 }, children: title }) : null,
+  children
+] });
+var Section = ({ children, title, style, ...rest }) => /* @__PURE__ */ jsxs3("section", { style: { marginBottom: 24, ...style }, ...rest, children: [
+  title ? /* @__PURE__ */ jsx4("h3", { style: { fontSize: 18, fontWeight: 600, marginBottom: 8 }, children: title }) : null,
+  children
+] });
+var Show = ({ when, children, fallback }) => when ? /* @__PURE__ */ jsx4(Fragment2, { children }) : /* @__PURE__ */ jsx4(Fragment2, { children: fallback ?? null });
+var Each = ({ items, children, renderItem }) => {
+  if (!Array.isArray(items)) return null;
+  if (typeof renderItem === "function") return /* @__PURE__ */ jsx4(Fragment2, { children: items.map((item, i) => renderItem(item, i)) });
+  return /* @__PURE__ */ jsx4(Fragment2, { children });
+};
+var RouterContext = React5.createContext({ path: "/", navigate: () => {
+} });
+var Router = ({ children, basePath, className, style, ...rest }) => {
+  const [path, setPath] = React5.useState("/");
+  const navigate = React5.useCallback((to) => setPath(to), []);
+  return /* @__PURE__ */ jsx4(RouterContext.Provider, { value: { path, navigate }, children: /* @__PURE__ */ jsx4("div", { className, style, ...rest, children }) });
+};
+var Route = ({ children, path, exact, fallback: _fallback, className, style }) => {
+  const { path: currentPath } = React5.useContext(RouterContext);
+  const routePath = path || "/";
+  const isExact = exact !== false;
+  const matches = isExact ? currentPath === routePath || routePath === "/" && currentPath === "/" : currentPath.startsWith(routePath);
+  if (!matches) return null;
+  return /* @__PURE__ */ jsx4("div", { className, style, children });
+};
+var NavLink = ({ children, to, label, icon, className, style, ...rest }) => {
+  const { path, navigate } = React5.useContext(RouterContext);
+  const target = to || "/";
+  const isActive = path === target;
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      onClick: () => navigate(target),
+      className,
+      style: {
+        background: isActive ? "#edf2f7" : "transparent",
+        border: "none",
+        borderRadius: 4,
+        padding: "4px 12px",
+        fontSize: 13,
+        cursor: "pointer",
+        fontWeight: isActive ? 600 : 400,
+        color: isActive ? "#2d3748" : "#718096",
+        ...style
+      },
+      ...rest,
+      children: children || label || target
+    }
+  );
+};
+var RoleGuard = ({ children, role: _role, fallback: _fallback }) => {
+  return /* @__PURE__ */ jsx4(Fragment2, { children });
+};
+var Icon = ({ name, size = 16, color, style }) => /* @__PURE__ */ jsx4("span", { style: { display: "inline-flex", alignItems: "center", justifyContent: "center", width: size, height: size, fontSize: size, color, ...style }, title: name, children: iconGlyphs[name] || "\u25A1" });
+var iconGlyphs = {
+  home: "\u2302",
+  settings: "\u2699",
+  plus: "+",
+  search: "\u{1F50D}",
+  box: "\u25A1",
+  inbox: "\u2709",
+  chevronRight: "\u203A",
+  chevronLeft: "\u2039",
+  x: "\u2715",
+  check: "\u2713",
+  edit: "\u270E",
+  trash: "\u{1F5D1}",
+  star: "\u2605",
+  heart: "\u2665",
+  user: "\u{1F464}",
+  menu: "\u2630",
+  close: "\u2715",
+  arrow_right: "\u2192",
+  arrow_left: "\u2190"
+};
+var Tabs = ({ children, tabs, defaultTab, style }) => {
+  const tabList = tabs || [];
+  const [active, setActive] = React5.useState(defaultTab || tabList[0]?.id || "");
+  return /* @__PURE__ */ jsxs3("div", { style, children: [
+    /* @__PURE__ */ jsx4("div", { style: { display: "flex", borderBottom: "1px solid #e2e8f0", marginBottom: 12 }, children: tabList.map((t) => /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick: () => setActive(t.id),
+        style: { padding: "6px 16px", border: "none", borderBottom: active === t.id ? "2px solid #3182ce" : "2px solid transparent", background: "none", cursor: "pointer", fontWeight: active === t.id ? 600 : 400, color: active === t.id ? "#3182ce" : "#718096" },
+        children: t.label
+      },
+      t.id
+    )) }),
+    children
+  ] });
+};
+var Accordion = ({ children, style }) => /* @__PURE__ */ jsx4("div", { style, children });
+var Modal = ({ children, open, title, onClose: _onClose, style }) => {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx4("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1e3 }, children: /* @__PURE__ */ jsxs3("div", { style: { background: "#fff", borderRadius: 12, padding: 24, maxWidth: 480, width: "100%", ...style }, children: [
+    title ? /* @__PURE__ */ jsx4("div", { style: { fontWeight: 600, fontSize: 18, marginBottom: 16 }, children: String(title) }) : null,
+    children
+  ] }) });
+};
+var Markdown = ({ content, children, style }) => /* @__PURE__ */ jsx4("div", { style: { lineHeight: 1.6, ...style }, children: content || children });
+var ScrollArea = ({ children, maxHeight = 400, style }) => /* @__PURE__ */ jsx4("div", { style: { overflow: "auto", maxHeight, ...style }, children });
+var Slot = ({ children, fallback }) => /* @__PURE__ */ jsx4(Fragment2, { children: children || fallback || null });
+var ModuleOutlet = ({ children, module: moduleName, fallback }) => /* @__PURE__ */ jsx4("div", { "data-module": moduleName, children: children || fallback || /* @__PURE__ */ jsxs3("span", { style: { color: "#a0aec0", fontSize: 13 }, children: [
+  "Module: ",
+  moduleName
+] }) });
+var builtinAtoms = {
+  // Layout
+  Stack,
+  Row,
+  Column,
+  Grid,
+  Divider,
+  Spacer,
+  // Typography
+  Text,
+  Heading,
+  Field,
+  Badge,
+  Image: ImageAtom,
+  Icon,
+  // Interactive
+  Button,
+  Link: LinkAtom,
+  // Form
+  TextInput,
+  Select: SelectAtom,
+  // Containers
+  Card,
+  Section,
+  Tabs,
+  Accordion,
+  Modal,
+  // Content
+  Markdown,
+  ScrollArea,
+  // Control Flow
+  Show,
+  Each,
+  // Routing
+  Router,
+  Route,
+  NavLink,
+  RoleGuard,
+  // Composition
+  Slot,
+  ModuleOutlet
+};
+
+// src/player/DevPlayer.tsx
+import { useState as useState4, useCallback as useCallback5, useRef as useRef5, useEffect as useEffect4, useMemo as useMemo4 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } 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] = useState4(false);
+  const wsRef = useRef5(null);
+  useEffect4(() => {
+    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] = useState4(true);
+  const [events, setEvents] = useState4([]);
+  const nextId = useRef5(0);
+  const connected = useDevSocket(wsUrl, onReload);
+  const mergedAtoms = useMemo4(
+    () => ({ ...builtinAtoms, ...userAtoms }),
+    [userAtoms]
+  );
+  const handleEvent = useCallback5(
+    (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__ */ jsx5(
+      ComponentTreeRenderer,
+      {
+        tree,
+        scopes,
+        atoms: mergedAtoms,
+        onEvent: handleEvent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4("div", { style: S.shell, children: [
+    /* @__PURE__ */ jsxs4("div", { style: S.toolbar, children: [
+      /* @__PURE__ */ jsx5("div", { style: S.dot(connected), title: connected ? "HMR connected" : "HMR disconnected" }),
+      /* @__PURE__ */ jsx5("span", { style: S.toolbarTitle, children: title }),
+      /* @__PURE__ */ jsxs4("span", { style: S.toolbarBadge, children: [
+        Array.isArray(tree) ? tree.length : 1,
+        " node",
+        Array.isArray(tree) && tree.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxs4("span", { style: S.toolbarBadge, children: [
+        Object.keys(mergedAtoms).length,
+        " atoms"
+      ] }),
+      /* @__PURE__ */ jsx5("div", { style: { flex: 1 } }),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          style: { ...S.toolbarBtn, ...showSidebar ? S.toolbarBtnActive : {} },
+          onClick: () => setShowSidebar((v) => !v),
+          children: "Inspector"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: S.body, children: [
+      /* @__PURE__ */ jsx5("div", { style: S.preview, children: /* @__PURE__ */ jsx5(
+        ComponentTreeRenderer,
+        {
+          tree,
+          scopes,
+          atoms: mergedAtoms,
+          onEvent: handleEvent
+        }
+      ) }),
+      showSidebar && /* @__PURE__ */ jsxs4("div", { style: S.sidebar, children: [
+        /* @__PURE__ */ jsxs4("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ jsx5("div", { style: S.sidebarHeading, children: "Scopes" }),
+          /* @__PURE__ */ jsx5("pre", { style: S.pre, children: JSON.stringify(scopes, null, 2) })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ jsxs4("div", { style: S.sidebarHeading, children: [
+            "Atoms (",
+            Object.keys(mergedAtoms).length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: Object.keys(mergedAtoms).sort().map((name) => /* @__PURE__ */ jsx5(
+            "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__ */ jsxs4("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
+            /* @__PURE__ */ jsxs4("div", { style: S.sidebarHeading, children: [
+              "Events (",
+              events.length,
+              ")"
+            ] }),
+            events.length > 0 && /* @__PURE__ */ jsx5(
+              "button",
+              {
+                style: { background: "none", border: "none", color: "#a0aec0", fontSize: 11, cursor: "pointer" },
+                onClick: () => setEvents([]),
+                children: "Clear"
+              }
+            )
+          ] }),
+          events.length === 0 && /* @__PURE__ */ jsx5("div", { style: { color: "#a0aec0", fontSize: 12, fontStyle: "italic" }, children: "No events yet" }),
+          events.slice(0, 50).map((e) => /* @__PURE__ */ jsxs4("div", { style: S.eventRow, children: [
+            /* @__PURE__ */ jsx5("span", { style: S.eventTime, children: e.time }),
+            /* @__PURE__ */ jsx5("span", { style: S.eventName, children: e.name }),
+            e.payload !== void 0 && /* @__PURE__ */ jsx5("span", { style: { color: "#718096", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: JSON.stringify(e.payload) })
+          ] }, e.id))
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ jsx5("div", { style: S.sidebarHeading, children: "Tree (JSON)" }),
+          /* @__PURE__ */ jsx5("pre", { style: { ...S.pre, maxHeight: 400 }, children: JSON.stringify(tree, null, 2) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+export {
+  setQueryResolver,
+  useQuery,
+  setMutationResolver,
+  useMutation,
+  classifyBinding,
+  resolveBinding,
+  resolveAllBindings,
+  buildEvalContext,
+  buildActionScope,
+  AtomRegistryImpl,
+  createCoreAtomRegistry,
+  mergeRegistries,
+  DEFAULT_DESIGN_TOKENS,
+  usePlayerContext,
+  useTheme,
+  PlayerProvider,
+  ExperienceRenderer,
+  createApiResolver,
+  ComponentTreeRenderer,
+  builtinAtoms,
+  DevPlayer
+};