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

package/dist/index.mjs

@@ -3599,6 +3599,559 @@ function useCollection(definition, options = {}) {
   return handle;
 }
 
+// src/player/ComponentTreeRenderer.tsx
+import React, { useMemo as useMemo17, useCallback as useCallback21 } from "react";
+
+// src/player/evaluator.ts
+var EXPR_PATTERN = /\{\{(.+?)\}\}/g;
+function containsExpression(value) {
+  return typeof value === "string" && EXPR_PATTERN.test(value);
+}
+function resolvePath(path, scope) {
+  const parts = path.trim().split(".");
+  let current = scope;
+  for (const part of parts) {
+    if (current == null || typeof current !== "object") return void 0;
+    current = current[part];
+  }
+  return current;
+}
+function evaluateExpression(expr2, scopes) {
+  const trimmed = expr2.trim();
+  if (trimmed.startsWith("'") && trimmed.endsWith("'") || trimmed.startsWith('"') && trimmed.endsWith('"')) {
+    return trimmed.slice(1, -1);
+  }
+  if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+    return Number(trimmed);
+  }
+  if (trimmed === "true") return true;
+  if (trimmed === "false") return false;
+  if (trimmed === "null" || trimmed === "undefined") return void 0;
+  const flatScope = { ...scopes };
+  if (scopes.state_data && typeof scopes.state_data === "object") {
+    Object.assign(flatScope, scopes.state_data);
+  }
+  if (scopes.context && typeof scopes.context === "object") {
+    Object.assign(flatScope, scopes.context);
+  }
+  return resolvePath(trimmed, flatScope);
+}
+function evaluateProp(value, scopes) {
+  if (typeof value !== "string") return value;
+  const fullMatch = value.match(/^\{\{(.+)\}\}$/s);
+  if (fullMatch) {
+    return evaluateExpression(fullMatch[1], scopes);
+  }
+  if (containsExpression(value)) {
+    return value.replace(EXPR_PATTERN, (_, expr2) => {
+      const result = evaluateExpression(expr2, scopes);
+      return result == null ? "" : String(result);
+    });
+  }
+  return value;
+}
+
+// src/player/ComponentTreeRenderer.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var UnknownAtom = ({ type, children }) => /* @__PURE__ */ jsxs("div", { style: { border: "1px dashed #e53e3e", borderRadius: 6, padding: "8px 12px", margin: 4, fontSize: 13, color: "#e53e3e", background: "#fff5f5" }, children: [
+  /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
+    "Unknown: ",
+    type
+  ] }),
+  children && /* @__PURE__ */ jsx2("div", { style: { marginTop: 4 }, children })
+] });
+var RenderNode = ({ node, scopes, atoms, onEvent }) => {
+  if (node.$if) {
+    const condition = evaluateProp(node.$if, scopes);
+    if (!condition) return null;
+  }
+  if (node.$for) {
+    const { each, as, key: keyField } = node.$for;
+    const items = evaluateProp(each, scopes);
+    if (!Array.isArray(items)) return null;
+    return /* @__PURE__ */ jsx2(Fragment, { children: items.map((item, index) => {
+      const loopScopes = {
+        ...scopes,
+        state_data: {
+          ...scopes.state_data ?? {},
+          [as]: item,
+          [`${as}Index`]: index
+        }
+      };
+      const nodeWithoutFor = { ...node, $for: void 0 };
+      const itemKey = keyField ? String(item[keyField] ?? index) : String(index);
+      return /* @__PURE__ */ jsx2(RenderNode, { node: nodeWithoutFor, scopes: loopScopes, atoms, onEvent }, itemKey);
+    }) });
+  }
+  const Component = atoms[node.type];
+  if (!Component) {
+    return /* @__PURE__ */ jsx2(UnknownAtom, { type: node.type });
+  }
+  const evaluatedProps = {};
+  if (node.props) {
+    for (const [key, value] of Object.entries(node.props)) {
+      if (key.startsWith("on") && typeof value === "string") {
+        evaluatedProps[key] = (...args) => {
+          if (containsExpression(value)) {
+            evaluateExpression(value.replace(/^\{\{|\}\}$/g, ""), scopes);
+          } else {
+            onEvent(value, args[0]);
+          }
+        };
+      } else {
+        evaluatedProps[key] = evaluateProp(value, scopes);
+      }
+    }
+  }
+  let children = null;
+  if (node.children) {
+    if (typeof node.children === "string") {
+      children = evaluateProp(node.children, scopes);
+    } else if (Array.isArray(node.children)) {
+      children = node.children.map((child, index) => /* @__PURE__ */ jsx2(RenderNode, { node: child, scopes, atoms, onEvent }, index));
+    }
+  }
+  return /* @__PURE__ */ jsx2(Component, { ...evaluatedProps, children });
+};
+var CTRErrorBoundary = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("CTR rendering error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || /* @__PURE__ */ jsxs("div", { style: { padding: 16, background: "#fff5f5", border: "1px solid #fed7d7", borderRadius: 8 }, children: [
+        /* @__PURE__ */ jsx2("strong", { style: { color: "#c53030" }, children: "Rendering Error" }),
+        /* @__PURE__ */ jsx2("p", { style: { color: "#e53e3e", fontSize: 14, marginTop: 4 }, children: this.state.error?.message || "An error occurred while rendering" })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+var ComponentTreeRenderer = ({
+  tree,
+  scopes,
+  atoms = {},
+  onEvent = () => {
+  },
+  fallback
+}) => {
+  const allAtoms = useMemo17(() => ({ ...atoms }), [atoms]);
+  const handleEvent = useCallback21(
+    (eventName, payload) => onEvent(eventName, payload),
+    [onEvent]
+  );
+  const nodes = Array.isArray(tree) ? tree : [tree];
+  return /* @__PURE__ */ jsx2(CTRErrorBoundary, { fallback, children: nodes.map((node, index) => /* @__PURE__ */ jsx2(RenderNode, { node, scopes, atoms: allAtoms, onEvent: handleEvent }, index)) });
+};
+
+// src/player/DevPlayer.tsx
+import { useState as useState21, useCallback as useCallback22, useRef as useRef25, useEffect as useEffect22, useMemo as useMemo18 } from "react";
+
+// src/player/builtin-atoms.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Stack = ({ children, gap = 8, style, ...rest }) => /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "column", gap, ...style }, ...rest, children });
+var Row = ({ children, gap = 8, align, justify, style, ...rest }) => /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "row", gap, alignItems: align, justifyContent: justify, ...style }, ...rest, children });
+var Column = ({ children, span, style, ...rest }) => /* @__PURE__ */ jsx3("div", { style: { flex: span ? `0 0 ${Number(span) / 12 * 100}%` : 1, ...style }, ...rest, children });
+var Grid = ({ children, columns = 2, gap = 8, style, ...rest }) => /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap, ...style }, ...rest, children });
+var Divider = ({ style }) => /* @__PURE__ */ jsx3("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "8px 0", ...style } });
+var Spacer = ({ size = 16 }) => /* @__PURE__ */ jsx3("div", { style: { height: size, flexShrink: 0 } });
+var Text = ({ children, size, weight, color, style, ...rest }) => /* @__PURE__ */ jsx3("span", { style: { fontSize: size, fontWeight: weight, color, ...style }, ...rest, children });
+var Heading = ({ children, level = 2, style, ...rest }) => {
+  const lvl = Math.min(Math.max(Number(level), 1), 6);
+  const s = { margin: "0 0 8px", ...style };
+  const c = children;
+  if (lvl === 1) return /* @__PURE__ */ jsx3("h1", { style: s, ...rest, children: c });
+  if (lvl === 2) return /* @__PURE__ */ jsx3("h2", { style: s, ...rest, children: c });
+  if (lvl === 3) return /* @__PURE__ */ jsx3("h3", { style: s, ...rest, children: c });
+  if (lvl === 4) return /* @__PURE__ */ jsx3("h4", { style: s, ...rest, children: c });
+  if (lvl === 5) return /* @__PURE__ */ jsx3("h5", { style: s, ...rest, children: c });
+  return /* @__PURE__ */ jsx3("h6", { style: s, ...rest, children: c });
+};
+var Field = ({ label, value, children, style }) => /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8, ...style }, children: [
+  label ? /* @__PURE__ */ jsx3("div", { style: { fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ jsx3("div", { style: { fontSize: 14 }, children: children ?? value ?? "\u2014" })
+] });
+var Badge = ({ children, variant = "default", style }) => {
+  const colors = {
+    default: { bg: "#edf2f7", fg: "#4a5568" },
+    success: { bg: "#c6f6d5", fg: "#276749" },
+    warning: { bg: "#fefcbf", fg: "#975a16" },
+    error: { bg: "#fed7d7", fg: "#9b2c2c" },
+    info: { bg: "#bee3f8", fg: "#2a4365" }
+  };
+  const c = colors[variant] ?? colors.default;
+  return /* @__PURE__ */ jsx3("span", { style: { display: "inline-block", padding: "2px 8px", borderRadius: 9999, fontSize: 12, fontWeight: 500, background: c.bg, color: c.fg, ...style }, children });
+};
+var ImageAtom = ({ src, alt, width, height, style, ...rest }) => /* @__PURE__ */ jsx3("img", { src, alt: alt ?? "", width, height, style: { maxWidth: "100%", ...style }, ...rest });
+var Button = ({ children, onClick, variant = "primary", disabled, style, ...rest }) => {
+  const styles = {
+    primary: { background: "#3182ce", color: "#fff", border: "none" },
+    secondary: { background: "#edf2f7", color: "#4a5568", border: "1px solid #e2e8f0" },
+    danger: { background: "#e53e3e", color: "#fff", border: "none" },
+    ghost: { background: "transparent", color: "#4a5568", border: "none" }
+  };
+  const base = styles[variant] ?? styles.primary;
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick,
+      disabled,
+      style: { padding: "6px 16px", borderRadius: 6, fontSize: 14, fontWeight: 500, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1, ...base, ...style },
+      ...rest,
+      children
+    }
+  );
+};
+var LinkAtom = ({ children, href, style, ...rest }) => /* @__PURE__ */ jsx3("a", { href, style: { color: "#3182ce", textDecoration: "underline", ...style }, ...rest, children });
+var TextInput = ({ value, onChange, placeholder, label, style, ...rest }) => /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8 }, children: [
+  label ? /* @__PURE__ */ jsx3("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ jsx3(
+    "input",
+    {
+      type: "text",
+      value: value ?? "",
+      onChange,
+      placeholder,
+      style: { width: "100%", padding: "6px 10px", border: "1px solid #e2e8f0", borderRadius: 6, fontSize: 14, ...style },
+      ...rest
+    }
+  )
+] });
+var SelectAtom = ({ value, onChange, options, label, placeholder, style }) => /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8 }, children: [
+  label ? /* @__PURE__ */ jsx3("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ jsxs2(
+    "select",
+    {
+      value: value ?? "",
+      onChange,
+      style: { width: "100%", padding: "6px 10px", border: "1px solid #e2e8f0", borderRadius: 6, fontSize: 14, ...style },
+      children: [
+        placeholder ? /* @__PURE__ */ jsx3("option", { value: "", children: placeholder }) : null,
+        Array.isArray(options) && options.map((opt) => {
+          const v = typeof opt === "string" ? opt : opt.value;
+          const l = typeof opt === "string" ? opt : opt.label;
+          return /* @__PURE__ */ jsx3("option", { value: v, children: l }, v);
+        })
+      ]
+    }
+  )
+] });
+var Card = ({ children, title, style, ...rest }) => /* @__PURE__ */ jsxs2("div", { style: { border: "1px solid #e2e8f0", borderRadius: 8, padding: 16, background: "#fff", ...style }, ...rest, children: [
+  title ? /* @__PURE__ */ jsx3("div", { style: { fontWeight: 600, fontSize: 16, marginBottom: 12 }, children: title }) : null,
+  children
+] });
+var Section = ({ children, title, style, ...rest }) => /* @__PURE__ */ jsxs2("section", { style: { marginBottom: 24, ...style }, ...rest, children: [
+  title ? /* @__PURE__ */ jsx3("h3", { style: { fontSize: 18, fontWeight: 600, marginBottom: 8 }, children: title }) : null,
+  children
+] });
+var Show = ({ when: when2, children, fallback }) => when2 ? /* @__PURE__ */ jsx3(Fragment2, { children }) : /* @__PURE__ */ jsx3(Fragment2, { children: fallback ?? null });
+var Each = ({ items, children, renderItem }) => {
+  if (!Array.isArray(items)) return null;
+  if (typeof renderItem === "function") return /* @__PURE__ */ jsx3(Fragment2, { children: items.map((item, i) => renderItem(item, i)) });
+  return /* @__PURE__ */ jsx3(Fragment2, { children });
+};
+var builtinAtoms = {
+  Stack,
+  Row,
+  Column,
+  Grid,
+  Divider,
+  Spacer,
+  Text,
+  Heading,
+  Field,
+  Badge,
+  Image: ImageAtom,
+  Button,
+  Link: LinkAtom,
+  TextInput,
+  Select: SelectAtom,
+  Card,
+  Section,
+  Show,
+  Each
+};
+
+// src/player/DevPlayer.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var S = {
+  shell: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    minHeight: "100vh",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    background: "#f7fafc",
+    color: "#1a202c"
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+    padding: "8px 16px",
+    background: "#1a202c",
+    color: "#e2e8f0",
+    fontSize: 13,
+    flexShrink: 0
+  },
+  toolbarTitle: { fontWeight: 600, fontSize: 14 },
+  toolbarBadge: {
+    display: "inline-block",
+    padding: "1px 8px",
+    borderRadius: 4,
+    background: "#2d3748",
+    color: "#a0aec0",
+    fontSize: 11,
+    fontFamily: "monospace"
+  },
+  toolbarBtn: {
+    background: "none",
+    border: "1px solid #4a5568",
+    borderRadius: 4,
+    color: "#a0aec0",
+    padding: "2px 10px",
+    fontSize: 12,
+    cursor: "pointer"
+  },
+  toolbarBtnActive: {
+    background: "#2b6cb0",
+    borderColor: "#2b6cb0",
+    color: "#fff"
+  },
+  body: { display: "flex", flex: 1, overflow: "hidden" },
+  preview: { flex: 1, overflow: "auto", padding: 24 },
+  sidebar: {
+    width: 340,
+    flexShrink: 0,
+    borderLeft: "1px solid #e2e8f0",
+    background: "#fff",
+    overflow: "auto",
+    fontSize: 13
+  },
+  sidebarSection: { padding: "12px 16px", borderBottom: "1px solid #f0f0f0" },
+  sidebarHeading: {
+    fontSize: 11,
+    fontWeight: 700,
+    textTransform: "uppercase",
+    color: "#a0aec0",
+    letterSpacing: "0.05em",
+    marginBottom: 8
+  },
+  pre: {
+    background: "#f7fafc",
+    border: "1px solid #e2e8f0",
+    borderRadius: 6,
+    padding: "8px 12px",
+    fontSize: 12,
+    fontFamily: "monospace",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    maxHeight: 260,
+    overflow: "auto"
+  },
+  eventRow: {
+    display: "flex",
+    gap: 8,
+    padding: "4px 0",
+    borderBottom: "1px solid #f7fafc",
+    fontSize: 12,
+    fontFamily: "monospace"
+  },
+  eventTime: { color: "#a0aec0", flexShrink: 0 },
+  eventName: { color: "#3182ce", fontWeight: 500 },
+  dot: (connected) => ({
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    background: connected ? "#48bb78" : "#e53e3e",
+    flexShrink: 0
+  })
+};
+function useDevSocket(wsUrl, onReload) {
+  const [connected, setConnected] = useState21(false);
+  const wsRef = useRef25(null);
+  useEffect22(() => {
+    if (typeof window === "undefined") return;
+    const url = wsUrl ?? `ws://${window.location.host}/__mm_dev`;
+    let ws;
+    let reconnectTimer;
+    function connect() {
+      try {
+        ws = new WebSocket(url);
+        wsRef.current = ws;
+        ws.onopen = () => setConnected(true);
+        ws.onclose = () => {
+          setConnected(false);
+          reconnectTimer = setTimeout(connect, 3e3);
+        };
+        ws.onmessage = (ev) => {
+          try {
+            const msg = JSON.parse(ev.data);
+            if (msg.type === "workflow:compiled" || msg.type === "workflow:rebuild") {
+              onReload?.();
+            }
+          } catch {
+          }
+        };
+      } catch {
+        reconnectTimer = setTimeout(connect, 3e3);
+      }
+    }
+    connect();
+    return () => {
+      clearTimeout(reconnectTimer);
+      wsRef.current?.close();
+      wsRef.current = null;
+    };
+  }, [wsUrl, onReload]);
+  return connected;
+}
+var DevPlayer = ({
+  tree,
+  scopes = {},
+  atoms: userAtoms,
+  title = "DevPlayer",
+  bare = false,
+  wsUrl,
+  onReload,
+  onEvent: externalOnEvent
+}) => {
+  const [showSidebar, setShowSidebar] = useState21(true);
+  const [events, setEvents] = useState21([]);
+  const nextId = useRef25(0);
+  const connected = useDevSocket(wsUrl, onReload);
+  const mergedAtoms = useMemo18(
+    () => ({ ...builtinAtoms, ...userAtoms }),
+    [userAtoms]
+  );
+  const handleEvent = useCallback22(
+    (name, payload) => {
+      setEvents((prev) => {
+        const entry = {
+          id: nextId.current++,
+          time: (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", { hour12: false }),
+          name,
+          payload
+        };
+        const next = [entry, ...prev];
+        return next.length > 100 ? next.slice(0, 100) : next;
+      });
+      externalOnEvent?.(name, payload);
+    },
+    [externalOnEvent]
+  );
+  if (bare) {
+    return /* @__PURE__ */ jsx4(
+      ComponentTreeRenderer,
+      {
+        tree,
+        scopes,
+        atoms: mergedAtoms,
+        onEvent: handleEvent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3("div", { style: S.shell, children: [
+    /* @__PURE__ */ jsxs3("div", { style: S.toolbar, children: [
+      /* @__PURE__ */ jsx4("div", { style: S.dot(connected), title: connected ? "HMR connected" : "HMR disconnected" }),
+      /* @__PURE__ */ jsx4("span", { style: S.toolbarTitle, children: title }),
+      /* @__PURE__ */ jsxs3("span", { style: S.toolbarBadge, children: [
+        Array.isArray(tree) ? tree.length : 1,
+        " node",
+        Array.isArray(tree) && tree.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxs3("span", { style: S.toolbarBadge, children: [
+        Object.keys(mergedAtoms).length,
+        " atoms"
+      ] }),
+      /* @__PURE__ */ jsx4("div", { style: { flex: 1 } }),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          style: { ...S.toolbarBtn, ...showSidebar ? S.toolbarBtnActive : {} },
+          onClick: () => setShowSidebar((v) => !v),
+          children: "Inspector"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { style: S.body, children: [
+      /* @__PURE__ */ jsx4("div", { style: S.preview, children: /* @__PURE__ */ jsx4(
+        ComponentTreeRenderer,
+        {
+          tree,
+          scopes,
+          atoms: mergedAtoms,
+          onEvent: handleEvent
+        }
+      ) }),
+      showSidebar && /* @__PURE__ */ jsxs3("div", { style: S.sidebar, children: [
+        /* @__PURE__ */ jsxs3("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ jsx4("div", { style: S.sidebarHeading, children: "Scopes" }),
+          /* @__PURE__ */ jsx4("pre", { style: S.pre, children: JSON.stringify(scopes, null, 2) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ jsxs3("div", { style: S.sidebarHeading, children: [
+            "Atoms (",
+            Object.keys(mergedAtoms).length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: Object.keys(mergedAtoms).sort().map((name) => /* @__PURE__ */ jsx4(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                padding: "1px 6px",
+                borderRadius: 3,
+                background: userAtoms?.[name] ? "#ebf8ff" : "#f7fafc",
+                border: `1px solid ${userAtoms?.[name] ? "#90cdf4" : "#e2e8f0"}`,
+                fontSize: 11,
+                fontFamily: "monospace",
+                color: userAtoms?.[name] ? "#2b6cb0" : "#718096"
+              },
+              children: name
+            },
+            name
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
+            /* @__PURE__ */ jsxs3("div", { style: S.sidebarHeading, children: [
+              "Events (",
+              events.length,
+              ")"
+            ] }),
+            events.length > 0 && /* @__PURE__ */ jsx4(
+              "button",
+              {
+                style: { background: "none", border: "none", color: "#a0aec0", fontSize: 11, cursor: "pointer" },
+                onClick: () => setEvents([]),
+                children: "Clear"
+              }
+            )
+          ] }),
+          events.length === 0 && /* @__PURE__ */ jsx4("div", { style: { color: "#a0aec0", fontSize: 12, fontStyle: "italic" }, children: "No events yet" }),
+          events.slice(0, 50).map((e) => /* @__PURE__ */ jsxs3("div", { style: S.eventRow, children: [
+            /* @__PURE__ */ jsx4("span", { style: S.eventTime, children: e.time }),
+            /* @__PURE__ */ jsx4("span", { style: S.eventName, children: e.name }),
+            e.payload !== void 0 && /* @__PURE__ */ jsx4("span", { style: { color: "#718096", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: JSON.stringify(e.payload) })
+          ] }, e.id))
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ jsx4("div", { style: S.sidebarHeading, children: "Tree (JSON)" }),
+          /* @__PURE__ */ jsx4("pre", { style: { ...S.pre, maxHeight: 400 }, children: JSON.stringify(tree, null, 2) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
 // src/atoms/index.ts
 function stub(displayName) {
   const Component = () => {
@@ -3609,28 +4162,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");
@@ -3730,7 +4283,7 @@ function djb2Hash(str) {
 }
 
 // src/authoring.ts
-function useState21(_defaultOrKey) {
+function useState22(_defaultOrKey) {
   return [void 0, () => {
   }];
 }
@@ -3741,10 +4294,10 @@ function defineWorkspace(config) {
 }
 
 // src/hooks/useModule.ts
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo19 } from "react";
 function useModule(slug, config = {}, options = {}) {
   const { enabled = true } = options;
-  return useMemo17(() => ({
+  return useMemo19(() => ({
     slug,
     config,
     isLoaded: enabled
@@ -3752,7 +4305,7 @@ function useModule(slug, config = {}, options = {}) {
 }
 
 // src/hooks/useModuleConfig.ts
-import { useCallback as useCallback21, useMemo as useMemo18, useState as useState22 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo20, useState as useState23 } from "react";
 var installedModulesStore = [];
 var configDefaultsStore = /* @__PURE__ */ new Map();
 function setInstalledModules(modules) {
@@ -3768,7 +4321,7 @@ function getInstalledModules() {
   return installedModulesStore;
 }
 function useModuleConfig(moduleSlug) {
-  return useMemo18(() => {
+  return useMemo20(() => {
     const installed = getInstalledModule(moduleSlug);
     const defaults = configDefaultsStore.get(moduleSlug) ?? {};
     const persisted = persistedConfigStore.get(moduleSlug) ?? {};
@@ -3816,8 +4369,8 @@ async function updateDefinitionConfig(values, definitionId) {
 }
 function useModuleConfigWithMutation(moduleSlug) {
   const config = useModuleConfig(moduleSlug);
-  const [isSaving, setIsSaving] = useState22(false);
-  const updateConfig = useCallback21(async (values) => {
+  const [isSaving, setIsSaving] = useState23(false);
+  const updateConfig = useCallback23(async (values) => {
     setIsSaving(true);
     try {
       return await updateDefinitionConfig(values);
@@ -6020,7 +6573,7 @@ function describeModel(def) {
 }
 
 // src/hooks/usePlayer.ts
-import { useCallback as useCallback22, useEffect as useEffect22, useMemo as useMemo19, useRef as useRef25, useState as useState23 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect23, useMemo as useMemo21, useRef as useRef26, useState as useState24 } from "react";
 import {
   StateMachine as StateMachine2,
   EventBus as EventBus2,
@@ -6067,18 +6620,18 @@ function computePlayerState(sm) {
   };
 }
 function usePlayer(config) {
-  const configRef = useRef25(config);
+  const configRef = useRef26(config);
   configRef.current = config;
-  useEffect22(() => {
+  useEffect23(() => {
     if (config.debug) setPlayerDebug(true);
   }, [config.debug]);
-  const evaluator = useMemo19(() => {
+  const evaluator = useMemo21(() => {
     return createEvaluator2({
       functions: config.functions ?? [],
       failurePolicy: WEB_FAILURE_POLICIES2.EVENT_REACTION
     });
   }, [config.definition.id]);
-  const engine = useMemo19(() => {
+  const engine = useMemo21(() => {
     const actionHandlers = /* @__PURE__ */ new Map();
     if (config.actionHandlers) {
       for (const [type, handler] of Object.entries(config.actionHandlers)) {
@@ -6132,8 +6685,8 @@ function usePlayer(config) {
     return { sm: sm2, eventBus: eventBus2, dispatcher };
   }, [config.definition.id, evaluator]);
   const { sm, eventBus } = engine;
-  const [playerState, setPlayerState] = useState23(() => computePlayerState(sm));
-  useEffect22(() => {
+  const [playerState, setPlayerState] = useState24(() => computePlayerState(sm));
+  useEffect23(() => {
     const stateDef = sm.getCurrentStateDefinition();
     if (!stateDef?.on_event?.length) return;
     const unsubs = [];
@@ -6197,7 +6750,7 @@ function usePlayer(config) {
       for (const unsub of unsubs) unsub();
     };
   }, [sm, eventBus, evaluator, engine.dispatcher, playerState.currentState]);
-  useEffect22(() => {
+  useEffect23(() => {
     const unsub = sm.on((event) => {
       if (event.type === "transition" || event.type === "state_enter") {
         setPlayerState(computePlayerState(sm));
@@ -6213,7 +6766,7 @@ function usePlayer(config) {
     });
     return unsub;
   }, [sm]);
-  const transition2 = useCallback22(
+  const transition2 = useCallback24(
     async (name, data) => {
       playerLog({
         level: "info",
@@ -6240,20 +6793,20 @@ function usePlayer(config) {
     },
     [sm]
   );
-  const setField2 = useCallback22(
+  const setField2 = useCallback24(
     (field2, value) => {
       sm.setField(field2, value);
       setPlayerState(computePlayerState(sm));
     },
     [sm]
   );
-  const setMemory = useCallback22(
+  const setMemory = useCallback24(
     (key, value) => {
       sm.setMemory(key, value);
     },
     [sm]
   );
-  const publishEvent = useCallback22(
+  const publishEvent = useCallback24(
     (topic, payload) => {
       playerLog({
         level: "debug",
@@ -6279,11 +6832,11 @@ function usePlayer(config) {
 }
 
 // src/hooks/useDomainSubscription.ts
-import { useEffect as useEffect23, useRef as useRef26 } from "react";
+import { useEffect as useEffect24, useRef as useRef27 } from "react";
 function useDomainSubscription(eventBus, transport, config) {
-  const configRef = useRef26(config);
+  const configRef = useRef27(config);
   configRef.current = config;
-  useEffect23(() => {
+  useEffect24(() => {
     if (!transport || config.enabled === false) return;
     const unsub = transport.subscribe(
       {
@@ -6336,11 +6889,11 @@ function useDomainSubscription(eventBus, transport, config) {
 }
 
 // src/hooks/useExperienceState.ts
-import { useCallback as useCallback23, useRef as useRef27 } from "react";
+import { useCallback as useCallback25, useRef as useRef28 } from "react";
 function useExperienceState(player, selector) {
-  const selectorRef = useRef27(selector);
+  const selectorRef = useRef28(selector);
   selectorRef.current = selector;
-  const getSnapshot = useCallback23(() => {
+  const getSnapshot = useCallback25(() => {
     return selectorRef.current({
       currentState: player.currentState,
       stateData: player.stateData,
@@ -6356,20 +6909,20 @@ function useStateField(player, field2, defaultValue) {
 }
 
 // src/hooks/useComputed.ts
-import { useMemo as useMemo20, useRef as useRef28 } from "react";
+import { useMemo as useMemo22, useRef as useRef29 } from "react";
 function useComputed(_name, compute, options) {
   const mode = options?.mode ?? "read-time";
   const deps = options?.deps ?? [];
-  const computeRef = useRef28(compute);
+  const computeRef = useRef29(compute);
   computeRef.current = compute;
   if (mode === "read-time") {
-    return useMemo20(() => computeRef.current(), [
+    return useMemo22(() => 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 useMemo20(() => computeRef.current(), [deps.join(",")]);
+  return useMemo22(() => computeRef.current(), [deps.join(",")]);
 }
 function useComputedWithMeta(name, compute, options) {
   const value = useComputed(name, compute, options);
@@ -6385,10 +6938,10 @@ function useComputedWithMeta(name, compute, options) {
 
 // src/components/PlayerProvider.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var PlayerContext = createContext3(null);
 function PlayerProvider({ player, children }) {
-  return /* @__PURE__ */ jsx2(PlayerContext.Provider, { value: player, children });
+  return /* @__PURE__ */ jsx5(PlayerContext.Provider, { value: player, children });
 }
 function usePlayerContext() {
   const ctx = useContext3(PlayerContext);
@@ -6402,8 +6955,8 @@ function usePlayerContextSafe() {
 }
 
 // src/components/ExperienceWorkflowBridge.tsx
-import { useMemo as useMemo21 } from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { useMemo as useMemo23 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ExperienceWorkflowBridgeInner({
   definition,
   initialData,
@@ -6420,12 +6973,12 @@ function ExperienceWorkflowBridgeInner({
     actionHandlers,
     debug
   });
-  const viewConfig = useMemo21(() => {
+  const viewConfig = useMemo23(() => {
     if (!definition.state_views) return void 0;
     return definition.state_views[player.currentState];
   }, [definition.state_views, player.currentState]);
-  return /* @__PURE__ */ jsxs(PlayerProvider, { player, children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4(PlayerProvider, { player, children: [
+    /* @__PURE__ */ jsx6(
       DomainSubscriptionBridge,
       {
         player,
@@ -6451,12 +7004,12 @@ function DomainSubscriptionBridge({
   return null;
 }
 function ExperienceWorkflowBridge(props) {
-  return /* @__PURE__ */ jsx3(ExperienceWorkflowBridgeInner, { ...props });
+  return /* @__PURE__ */ jsx6(ExperienceWorkflowBridgeInner, { ...props });
 }
 
 // src/components/atoms/index.tsx
-import React from "react";
-import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+import React3 from "react";
+import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
 
 // src/loader/experience-workflow-loader.ts
 function validateExperienceWorkflow(def) {
@@ -7508,22 +8061,24 @@ export {
   Accordion,
   AnimatedBox,
   BUILT_IN_CONSTRAINTS,
-  Badge,
+  Badge2 as Badge,
   Blueprint,
   BrowserPlayer,
-  Button,
+  Button2 as Button,
   Canvas3D,
-  Card,
+  Card2 as Card,
   Chart,
-  Column,
+  Column2 as Column,
+  ComponentTreeRenderer,
   DataGrid,
-  Divider,
-  Each,
+  DevPlayer,
+  Divider2 as Divider,
+  Each2 as Each,
   ExperienceWorkflowBridge,
-  Field,
+  Field2 as Field,
   FieldBuilder,
-  Grid,
-  Heading,
+  Grid2 as Grid,
+  Heading2 as Heading,
   Icon,
   Image,
   Link,
@@ -7539,20 +8094,20 @@ export {
   RoleGuard,
   Route,
   Router,
-  Row,
+  Row2 as Row,
   RuntimeContext,
   ScrollArea,
-  Section,
+  Section2 as Section,
   Select,
   ServerGrid,
-  Show,
+  Show2 as Show,
   Slot,
-  Spacer,
-  Stack,
+  Spacer2 as Spacer,
+  Stack2 as Stack,
   StateBuilder,
   Tabs,
-  Text,
-  TextInput,
+  Text2 as Text,
+  TextInput2 as TextInput,
   TransitionBuilder,
   TypedTransitionBuilder,
   WorkflowProvider,
@@ -7565,6 +8120,7 @@ export {
   applyMixins,
   approval,
   assertModelValid,
+  builtinAtoms,
   cedar,
   compose,
   computeVisibility,
@@ -7732,7 +8288,7 @@ export {
   useVisibility,
   useWhileIn,
   useWorkflow,
-  useState21 as useWorkflowState,
+  useState22 as useWorkflowState,
   userAction,
   userChoice,
   validate,