@mmapp/react 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/index.js

@@ -33,22 +33,24 @@ __export(index_exports, {
   Accordion: () => Accordion,
   AnimatedBox: () => AnimatedBox,
   BUILT_IN_CONSTRAINTS: () => BUILT_IN_CONSTRAINTS,
-  Badge: () => Badge,
+  Badge: () => Badge2,
   Blueprint: () => Blueprint,
   BrowserPlayer: () => BrowserPlayer,
-  Button: () => Button,
+  Button: () => Button2,
   Canvas3D: () => Canvas3D,
-  Card: () => Card,
+  Card: () => Card2,
   Chart: () => Chart,
-  Column: () => Column,
+  Column: () => Column2,
+  ComponentTreeRenderer: () => ComponentTreeRenderer,
   DataGrid: () => DataGrid,
-  Divider: () => Divider,
-  Each: () => Each,
+  DevPlayer: () => DevPlayer,
+  Divider: () => Divider2,
+  Each: () => Each2,
   ExperienceWorkflowBridge: () => ExperienceWorkflowBridge,
-  Field: () => Field,
+  Field: () => Field2,
   FieldBuilder: () => FieldBuilder,
-  Grid: () => Grid,
-  Heading: () => Heading,
+  Grid: () => Grid2,
+  Heading: () => Heading2,
   Icon: () => Icon,
   Image: () => Image,
   Link: () => Link,
@@ -64,20 +66,20 @@ __export(index_exports, {
   RoleGuard: () => RoleGuard,
   Route: () => Route,
   Router: () => Router,
-  Row: () => Row,
+  Row: () => Row2,
   RuntimeContext: () => RuntimeContext,
   ScrollArea: () => ScrollArea,
-  Section: () => Section,
+  Section: () => Section2,
   Select: () => Select,
   ServerGrid: () => ServerGrid,
-  Show: () => Show,
+  Show: () => Show2,
   Slot: () => Slot,
-  Spacer: () => Spacer,
-  Stack: () => Stack,
+  Spacer: () => Spacer2,
+  Stack: () => Stack2,
   StateBuilder: () => StateBuilder,
   Tabs: () => Tabs,
-  Text: () => Text,
-  TextInput: () => TextInput,
+  Text: () => Text2,
+  TextInput: () => TextInput2,
   TransitionBuilder: () => TransitionBuilder,
   TypedTransitionBuilder: () => TypedTransitionBuilder,
   WorkflowProvider: () => WorkflowProvider,
@@ -90,6 +92,7 @@ __export(index_exports, {
   applyMixins: () => applyMixins,
   approval: () => approval,
   assertModelValid: () => assertModelValid,
+  builtinAtoms: () => builtinAtoms,
   cedar: () => cedar,
   compose: () => compose,
   computeVisibility: () => computeVisibility,
@@ -257,7 +260,7 @@ __export(index_exports, {
   useVisibility: () => useVisibility,
   useWhileIn: () => useWhileIn,
   useWorkflow: () => useWorkflow,
-  useWorkflowState: () => useState21,
+  useWorkflowState: () => useState22,
   userAction: () => userAction,
   userChoice: () => userChoice,
   validate: () => validate,
@@ -3878,6 +3881,559 @@ function useCollection(definition, options = {}) {
   return handle;
 }
 
+// src/player/ComponentTreeRenderer.tsx
+var import_react35 = __toESM(require("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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var UnknownAtom = ({ type, children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { border: "1px dashed #e53e3e", borderRadius: 6, padding: "8px 12px", margin: 4, fontSize: 13, color: "#e53e3e", background: "#fff5f5" }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontWeight: 600 }, children: [
+    "Unknown: ",
+    type
+  ] }),
+  children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(RenderNode, { node: nodeWithoutFor, scopes: loopScopes, atoms, onEvent }, itemKey);
+    }) });
+  }
+  const Component = atoms[node.type];
+  if (!Component) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)(RenderNode, { node: child, scopes, atoms, onEvent }, index));
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...evaluatedProps, children });
+};
+var CTRErrorBoundary = class extends import_react35.default.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__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: 16, background: "#fff5f5", border: "1px solid #fed7d7", borderRadius: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { style: { color: "#c53030" }, children: "Rendering Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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 = (0, import_react35.useMemo)(() => ({ ...atoms }), [atoms]);
+  const handleEvent = (0, import_react35.useCallback)(
+    (eventName, payload) => onEvent(eventName, payload),
+    [onEvent]
+  );
+  const nodes = Array.isArray(tree) ? tree : [tree];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CTRErrorBoundary, { fallback, children: nodes.map((node, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderNode, { node, scopes, atoms: allAtoms, onEvent: handleEvent }, index)) });
+};
+
+// src/player/DevPlayer.tsx
+var import_react36 = require("react");
+
+// src/player/builtin-atoms.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Stack = ({ children, gap = 8, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", flexDirection: "column", gap, ...style }, ...rest, children });
+var Row = ({ children, gap = 8, align, justify, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", flexDirection: "row", gap, alignItems: align, justifyContent: justify, ...style }, ...rest, children });
+var Column = ({ children, span, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: span ? `0 0 ${Number(span) / 12 * 100}%` : 1, ...style }, ...rest, children });
+var Grid = ({ children, columns = 2, gap = 8, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap, ...style }, ...rest, children });
+var Divider = ({ style }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "8px 0", ...style } });
+var Spacer = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { height: size, flexShrink: 0 } });
+var Text = ({ children, size, weight, color, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("h1", { style: s, ...rest, children: c });
+  if (lvl === 2) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: s, ...rest, children: c });
+  if (lvl === 3) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: s, ...rest, children: c });
+  if (lvl === 4) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { style: s, ...rest, children: c });
+  if (lvl === 5) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h5", { style: s, ...rest, children: c });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h6", { style: s, ...rest, children: c });
+};
+var Field = ({ label, value, children, style }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: 8, ...style }, children: [
+  label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)("a", { href, style: { color: "#3182ce", textDecoration: "underline", ...style }, ...rest, children });
+var TextInput = ({ value, onChange, placeholder, label, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: 8 }, children: [
+  label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: 8 }, children: [
+  label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "select",
+    {
+      value: value ?? "",
+      onChange,
+      style: { width: "100%", padding: "6px 10px", border: "1px solid #e2e8f0", borderRadius: 6, fontSize: 14, ...style },
+      children: [
+        placeholder ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("option", { value: v, children: l }, v);
+        })
+      ]
+    }
+  )
+] });
+var Card = ({ children, title, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { border: "1px solid #e2e8f0", borderRadius: 8, padding: 16, background: "#fff", ...style }, ...rest, children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, fontSize: 16, marginBottom: 12 }, children: title }) : null,
+  children
+] });
+var Section = ({ children, title, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { marginBottom: 24, ...style }, ...rest, children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: 18, fontWeight: 600, marginBottom: 8 }, children: title }) : null,
+  children
+] });
+var Show = ({ when: when2, children, fallback }) => when2 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback ?? null });
+var Each = ({ items, children, renderItem }) => {
+  if (!Array.isArray(items)) return null;
+  if (typeof renderItem === "function") return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: items.map((item, i) => renderItem(item, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { 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
+var import_jsx_runtime4 = require("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] = (0, import_react36.useState)(false);
+  const wsRef = (0, import_react36.useRef)(null);
+  (0, import_react36.useEffect)(() => {
+    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] = (0, import_react36.useState)(true);
+  const [events, setEvents] = (0, import_react36.useState)([]);
+  const nextId = (0, import_react36.useRef)(0);
+  const connected = useDevSocket(wsUrl, onReload);
+  const mergedAtoms = (0, import_react36.useMemo)(
+    () => ({ ...builtinAtoms, ...userAtoms }),
+    [userAtoms]
+  );
+  const handleEvent = (0, import_react36.useCallback)(
+    (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__ */ (0, import_jsx_runtime4.jsx)(
+      ComponentTreeRenderer,
+      {
+        tree,
+        scopes,
+        atoms: mergedAtoms,
+        onEvent: handleEvent
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.shell, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.toolbar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: S.dot(connected), title: connected ? "HMR connected" : "HMR disconnected" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: S.toolbarTitle, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: S.toolbarBadge, children: [
+        Array.isArray(tree) ? tree.length : 1,
+        " node",
+        Array.isArray(tree) && tree.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: S.toolbarBadge, children: [
+        Object.keys(mergedAtoms).length,
+        " atoms"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          style: { ...S.toolbarBtn, ...showSidebar ? S.toolbarBtnActive : {} },
+          onClick: () => setShowSidebar((v) => !v),
+          children: "Inspector"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.body, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: S.preview, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ComponentTreeRenderer,
+        {
+          tree,
+          scopes,
+          atoms: mergedAtoms,
+          onEvent: handleEvent
+        }
+      ) }),
+      showSidebar && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.sidebar, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: S.sidebarHeading, children: "Scopes" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: S.pre, children: JSON.stringify(scopes, null, 2) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.sidebarHeading, children: [
+            "Atoms (",
+            Object.keys(mergedAtoms).length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: Object.keys(mergedAtoms).sort().map((name) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "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__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.sidebarHeading, children: [
+              "Events (",
+              events.length,
+              ")"
+            ] }),
+            events.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                style: { background: "none", border: "none", color: "#a0aec0", fontSize: 11, cursor: "pointer" },
+                onClick: () => setEvents([]),
+                children: "Clear"
+              }
+            )
+          ] }),
+          events.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#a0aec0", fontSize: 12, fontStyle: "italic" }, children: "No events yet" }),
+          events.slice(0, 50).map((e) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.eventRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: S.eventTime, children: e.time }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: S.eventName, children: e.name }),
+            e.payload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "#718096", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: JSON.stringify(e.payload) })
+          ] }, e.id))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: S.sidebarHeading, children: "Tree (JSON)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { ...S.pre, maxHeight: 400 }, children: JSON.stringify(tree, null, 2) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
 // src/atoms/index.ts
 function stub(displayName) {
   const Component = () => {
@@ -3888,28 +4444,28 @@ function stub(displayName) {
   Component.displayName = displayName;
   return Component;
 }
-var Stack = stub("Stack");
-var Row = stub("Row");
-var Column = stub("Column");
-var Grid = stub("Grid");
-var Divider = stub("Divider");
-var Spacer = stub("Spacer");
-var Text = stub("Text");
-var Heading = stub("Heading");
-var Field = stub("Field");
+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 Badge = stub("Badge");
+var Badge2 = stub("Badge");
 var Icon = stub("Icon");
-var Button = stub("Button");
+var Button2 = stub("Button");
 var Link = stub("Link");
-var Show = stub("Show");
-var Each = stub("Each");
-var Card = stub("Card");
+var Show2 = stub("Show");
+var Each2 = stub("Each");
+var Card2 = stub("Card");
 var Tabs = stub("Tabs");
 var Accordion = stub("Accordion");
-var Section = stub("Section");
+var Section2 = stub("Section");
 var Modal = stub("Modal");
-var TextInput = stub("TextInput");
+var TextInput2 = stub("TextInput");
 var Select = stub("Select");
 var Markdown = stub("Markdown");
 var ScrollArea = stub("ScrollArea");
@@ -4009,7 +4565,7 @@ function djb2Hash(str) {
 }
 
 // src/authoring.ts
-function useState21(_defaultOrKey) {
+function useState22(_defaultOrKey) {
   return [void 0, () => {
   }];
 }
@@ -4020,10 +4576,10 @@ function defineWorkspace(config) {
 }
 
 // src/hooks/useModule.ts
-var import_react35 = require("react");
+var import_react37 = require("react");
 function useModule(slug, config = {}, options = {}) {
   const { enabled = true } = options;
-  return (0, import_react35.useMemo)(() => ({
+  return (0, import_react37.useMemo)(() => ({
     slug,
     config,
     isLoaded: enabled
@@ -4031,7 +4587,7 @@ function useModule(slug, config = {}, options = {}) {
 }
 
 // src/hooks/useModuleConfig.ts
-var import_react36 = require("react");
+var import_react38 = require("react");
 var installedModulesStore = [];
 var configDefaultsStore = /* @__PURE__ */ new Map();
 function setInstalledModules(modules) {
@@ -4047,7 +4603,7 @@ function getInstalledModules() {
   return installedModulesStore;
 }
 function useModuleConfig(moduleSlug) {
-  return (0, import_react36.useMemo)(() => {
+  return (0, import_react38.useMemo)(() => {
     const installed = getInstalledModule(moduleSlug);
     const defaults = configDefaultsStore.get(moduleSlug) ?? {};
     const persisted = persistedConfigStore.get(moduleSlug) ?? {};
@@ -4095,8 +4651,8 @@ async function updateDefinitionConfig(values, definitionId) {
 }
 function useModuleConfigWithMutation(moduleSlug) {
   const config = useModuleConfig(moduleSlug);
-  const [isSaving, setIsSaving] = (0, import_react36.useState)(false);
-  const updateConfig = (0, import_react36.useCallback)(async (values) => {
+  const [isSaving, setIsSaving] = (0, import_react38.useState)(false);
+  const updateConfig = (0, import_react38.useCallback)(async (values) => {
     setIsSaving(true);
     try {
       return await updateDefinitionConfig(values);
@@ -6299,7 +6855,7 @@ function describeModel(def) {
 }
 
 // src/hooks/usePlayer.ts
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_player_core2 = require("@mmapp/player-core");
 
 // src/logger.ts
@@ -6340,18 +6896,18 @@ function computePlayerState(sm) {
   };
 }
 function usePlayer(config) {
-  const configRef = (0, import_react37.useRef)(config);
+  const configRef = (0, import_react39.useRef)(config);
   configRef.current = config;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (config.debug) setPlayerDebug(true);
   }, [config.debug]);
-  const evaluator = (0, import_react37.useMemo)(() => {
+  const evaluator = (0, import_react39.useMemo)(() => {
     return (0, import_player_core2.createEvaluator)({
       functions: config.functions ?? [],
       failurePolicy: import_player_core2.WEB_FAILURE_POLICIES.EVENT_REACTION
     });
   }, [config.definition.id]);
-  const engine = (0, import_react37.useMemo)(() => {
+  const engine = (0, import_react39.useMemo)(() => {
     const actionHandlers = /* @__PURE__ */ new Map();
     if (config.actionHandlers) {
       for (const [type, handler] of Object.entries(config.actionHandlers)) {
@@ -6405,8 +6961,8 @@ function usePlayer(config) {
     return { sm: sm2, eventBus: eventBus2, dispatcher };
   }, [config.definition.id, evaluator]);
   const { sm, eventBus } = engine;
-  const [playerState, setPlayerState] = (0, import_react37.useState)(() => computePlayerState(sm));
-  (0, import_react37.useEffect)(() => {
+  const [playerState, setPlayerState] = (0, import_react39.useState)(() => computePlayerState(sm));
+  (0, import_react39.useEffect)(() => {
     const stateDef = sm.getCurrentStateDefinition();
     if (!stateDef?.on_event?.length) return;
     const unsubs = [];
@@ -6470,7 +7026,7 @@ function usePlayer(config) {
       for (const unsub of unsubs) unsub();
     };
   }, [sm, eventBus, evaluator, engine.dispatcher, playerState.currentState]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const unsub = sm.on((event) => {
       if (event.type === "transition" || event.type === "state_enter") {
         setPlayerState(computePlayerState(sm));
@@ -6486,7 +7042,7 @@ function usePlayer(config) {
     });
     return unsub;
   }, [sm]);
-  const transition2 = (0, import_react37.useCallback)(
+  const transition2 = (0, import_react39.useCallback)(
     async (name, data) => {
       playerLog({
         level: "info",
@@ -6513,20 +7069,20 @@ function usePlayer(config) {
     },
     [sm]
   );
-  const setField2 = (0, import_react37.useCallback)(
+  const setField2 = (0, import_react39.useCallback)(
     (field2, value) => {
       sm.setField(field2, value);
       setPlayerState(computePlayerState(sm));
     },
     [sm]
   );
-  const setMemory = (0, import_react37.useCallback)(
+  const setMemory = (0, import_react39.useCallback)(
     (key, value) => {
       sm.setMemory(key, value);
     },
     [sm]
   );
-  const publishEvent = (0, import_react37.useCallback)(
+  const publishEvent = (0, import_react39.useCallback)(
     (topic, payload) => {
       playerLog({
         level: "debug",
@@ -6552,11 +7108,11 @@ function usePlayer(config) {
 }
 
 // src/hooks/useDomainSubscription.ts
-var import_react38 = require("react");
+var import_react40 = require("react");
 function useDomainSubscription(eventBus, transport, config) {
-  const configRef = (0, import_react38.useRef)(config);
+  const configRef = (0, import_react40.useRef)(config);
   configRef.current = config;
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!transport || config.enabled === false) return;
     const unsub = transport.subscribe(
       {
@@ -6609,11 +7165,11 @@ function useDomainSubscription(eventBus, transport, config) {
 }
 
 // src/hooks/useExperienceState.ts
-var import_react39 = require("react");
+var import_react41 = require("react");
 function useExperienceState(player, selector) {
-  const selectorRef = (0, import_react39.useRef)(selector);
+  const selectorRef = (0, import_react41.useRef)(selector);
   selectorRef.current = selector;
-  const getSnapshot = (0, import_react39.useCallback)(() => {
+  const getSnapshot = (0, import_react41.useCallback)(() => {
     return selectorRef.current({
       currentState: player.currentState,
       stateData: player.stateData,
@@ -6629,20 +7185,20 @@ function useStateField(player, field2, defaultValue) {
 }
 
 // src/hooks/useComputed.ts
-var import_react40 = require("react");
+var import_react42 = require("react");
 function useComputed(_name, compute, options) {
   const mode = options?.mode ?? "read-time";
   const deps = options?.deps ?? [];
-  const computeRef = (0, import_react40.useRef)(compute);
+  const computeRef = (0, import_react42.useRef)(compute);
   computeRef.current = compute;
   if (mode === "read-time") {
-    return (0, import_react40.useMemo)(() => computeRef.current(), [
+    return (0, import_react42.useMemo)(() => 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 (0, import_react40.useMemo)(() => computeRef.current(), [deps.join(",")]);
+  return (0, import_react42.useMemo)(() => computeRef.current(), [deps.join(",")]);
 }
 function useComputedWithMeta(name, compute, options) {
   const value = useComputed(name, compute, options);
@@ -6657,26 +7213,26 @@ function useComputedWithMeta(name, compute, options) {
 }
 
 // src/components/PlayerProvider.tsx
-var import_react41 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var PlayerContext = (0, import_react41.createContext)(null);
+var import_react43 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PlayerContext = (0, import_react43.createContext)(null);
 function PlayerProvider({ player, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlayerContext.Provider, { value: player, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PlayerContext.Provider, { value: player, children });
 }
 function usePlayerContext() {
-  const ctx = (0, import_react41.useContext)(PlayerContext);
+  const ctx = (0, import_react43.useContext)(PlayerContext);
   if (!ctx) {
     throw new Error("usePlayerContext must be used within a <PlayerProvider>");
   }
   return ctx;
 }
 function usePlayerContextSafe() {
-  return (0, import_react41.useContext)(PlayerContext);
+  return (0, import_react43.useContext)(PlayerContext);
 }
 
 // src/components/ExperienceWorkflowBridge.tsx
-var import_react42 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react44 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ExperienceWorkflowBridgeInner({
   definition,
   initialData,
@@ -6693,12 +7249,12 @@ function ExperienceWorkflowBridgeInner({
     actionHandlers,
     debug
   });
-  const viewConfig = (0, import_react42.useMemo)(() => {
+  const viewConfig = (0, import_react44.useMemo)(() => {
     if (!definition.state_views) return void 0;
     return definition.state_views[player.currentState];
   }, [definition.state_views, player.currentState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(PlayerProvider, { player, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(PlayerProvider, { player, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       DomainSubscriptionBridge,
       {
         player,
@@ -6724,12 +7280,12 @@ function DomainSubscriptionBridge({
   return null;
 }
 function ExperienceWorkflowBridge(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ExperienceWorkflowBridgeInner, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExperienceWorkflowBridgeInner, { ...props });
 }
 
 // src/components/atoms/index.tsx
-var import_react43 = __toESM(require("react"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react45 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
 
 // src/loader/experience-workflow-loader.ts
 function validateExperienceWorkflow(def) {
@@ -7790,7 +8346,9 @@ var instance = compileTimeProxy("instance");
   Card,
   Chart,
   Column,
+  ComponentTreeRenderer,
   DataGrid,
+  DevPlayer,
   Divider,
   Each,
   ExperienceWorkflowBridge,
@@ -7839,6 +8397,7 @@ var instance = compileTimeProxy("instance");
   applyMixins,
   approval,
   assertModelValid,
+  builtinAtoms,
   cedar,
   compose,
   computeVisibility,