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

package/dist/player/index.js

@@ -0,0 +1,602 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/player/index.ts
+var player_exports = {};
+__export(player_exports, {
+  ComponentTreeRenderer: () => ComponentTreeRenderer,
+  DevPlayer: () => DevPlayer,
+  builtinAtoms: () => builtinAtoms,
+  containsExpression: () => containsExpression,
+  evaluateExpression: () => evaluateExpression,
+  evaluateProp: () => evaluateProp
+});
+module.exports = __toCommonJS(player_exports);
+
+// src/player/ComponentTreeRenderer.tsx
+var import_react = __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(expr, scopes) {
+  const trimmed = expr.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, (_, expr) => {
+      const result = evaluateExpression(expr, scopes);
+      return result == null ? "" : String(result);
+    });
+  }
+  return value;
+}
+
+// src/player/ComponentTreeRenderer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var UnknownAtom = ({ type, children }) => /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)("span", { style: { fontWeight: 600 }, children: [
+    "Unknown: ",
+    type
+  ] }),
+  children && /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(import_jsx_runtime.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_runtime.jsx)(RenderNode, { node: nodeWithoutFor, scopes: loopScopes, atoms, onEvent }, itemKey);
+    }) });
+  }
+  const Component = atoms[node.type];
+  if (!Component) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(RenderNode, { node: child, scopes, atoms, onEvent }, index));
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...evaluatedProps, children });
+};
+var CTRErrorBoundary = class extends import_react.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_runtime.jsxs)("div", { style: { padding: 16, background: "#fff5f5", border: "1px solid #fed7d7", borderRadius: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { style: { color: "#c53030" }, children: "Rendering Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.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_react.useMemo)(() => ({ ...atoms }), [atoms]);
+  const handleEvent = (0, import_react.useCallback)(
+    (eventName, payload) => onEvent(eventName, payload),
+    [onEvent]
+  );
+  const nodes = Array.isArray(tree) ? tree : [tree];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CTRErrorBoundary, { fallback, children: nodes.map((node, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderNode, { node, scopes, atoms: allAtoms, onEvent: handleEvent }, index)) });
+};
+
+// src/player/DevPlayer.tsx
+var import_react2 = require("react");
+
+// src/player/builtin-atoms.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Stack = ({ children, gap = 8, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", gap, ...style }, ...rest, children });
+var Row = ({ children, gap = 8, align, justify, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.jsx)("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap, ...style }, ...rest, children });
+var Divider = ({ style }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "8px 0", ...style } });
+var Spacer = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { height: size, flexShrink: 0 } });
+var Text = ({ children, size, weight, color, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("h1", { style: s, ...rest, children: c });
+  if (lvl === 2) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { style: s, ...rest, children: c });
+  if (lvl === 3) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: s, ...rest, children: c });
+  if (lvl === 4) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { style: s, ...rest, children: c });
+  if (lvl === 5) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h5", { style: s, ...rest, children: c });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h6", { style: s, ...rest, children: c });
+};
+var Field = ({ label, value, children, style }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 8, ...style }, children: [
+  label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.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_runtime2.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_runtime2.jsx)("a", { href, style: { color: "#3182ce", textDecoration: "underline", ...style }, ...rest, children });
+var TextInput = ({ value, onChange, placeholder, label, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: 8 }, children: [
+  label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsxs)("div", { style: { marginBottom: 8 }, children: [
+  label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.jsx)("option", { value: v, children: l }, v);
+        })
+      ]
+    }
+  )
+] });
+var Card = ({ children, title, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { border: "1px solid #e2e8f0", borderRadius: 8, padding: 16, background: "#fff", ...style }, ...rest, children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 600, fontSize: 16, marginBottom: 12 }, children: title }) : null,
+  children
+] });
+var Section = ({ children, title, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { style: { marginBottom: 24, ...style }, ...rest, children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { fontSize: 18, fontWeight: 600, marginBottom: 8 }, children: title }) : null,
+  children
+] });
+var Show = ({ when, children, fallback }) => when ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback ?? null });
+var Each = ({ items, children, renderItem }) => {
+  if (!Array.isArray(items)) return null;
+  if (typeof renderItem === "function") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: items.map((item, i) => renderItem(item, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.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_runtime3 = 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_react2.useState)(false);
+  const wsRef = (0, import_react2.useRef)(null);
+  (0, import_react2.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_react2.useState)(true);
+  const [events, setEvents] = (0, import_react2.useState)([]);
+  const nextId = (0, import_react2.useRef)(0);
+  const connected = useDevSocket(wsUrl, onReload);
+  const mergedAtoms = (0, import_react2.useMemo)(
+    () => ({ ...builtinAtoms, ...userAtoms }),
+    [userAtoms]
+  );
+  const handleEvent = (0, import_react2.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_runtime3.jsx)(
+      ComponentTreeRenderer,
+      {
+        tree,
+        scopes,
+        atoms: mergedAtoms,
+        onEvent: handleEvent
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: S.shell, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: S.toolbar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: S.dot(connected), title: connected ? "HMR connected" : "HMR disconnected" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: S.toolbarTitle, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: S.toolbarBadge, children: [
+        Array.isArray(tree) ? tree.length : 1,
+        " node",
+        Array.isArray(tree) && tree.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: S.toolbarBadge, children: [
+        Object.keys(mergedAtoms).length,
+        " atoms"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          style: { ...S.toolbarBtn, ...showSidebar ? S.toolbarBtnActive : {} },
+          onClick: () => setShowSidebar((v) => !v),
+          children: "Inspector"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: S.body, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: S.preview, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ComponentTreeRenderer,
+        {
+          tree,
+          scopes,
+          atoms: mergedAtoms,
+          onEvent: handleEvent
+        }
+      ) }),
+      showSidebar && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: S.sidebar, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: S.sidebarHeading, children: "Scopes" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { style: S.pre, children: JSON.stringify(scopes, null, 2) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: S.sidebarHeading, children: [
+            "Atoms (",
+            Object.keys(mergedAtoms).length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: Object.keys(mergedAtoms).sort().map((name) => /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: S.sidebarHeading, children: [
+              "Events (",
+              events.length,
+              ")"
+            ] }),
+            events.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                style: { background: "none", border: "none", color: "#a0aec0", fontSize: 11, cursor: "pointer" },
+                onClick: () => setEvents([]),
+                children: "Clear"
+              }
+            )
+          ] }),
+          events.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#a0aec0", fontSize: 12, fontStyle: "italic" }, children: "No events yet" }),
+          events.slice(0, 50).map((e) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: S.eventRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: S.eventTime, children: e.time }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: S.eventName, children: e.name }),
+            e.payload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "#718096", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: JSON.stringify(e.payload) })
+          ] }, e.id))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: S.sidebarHeading, children: "Tree (JSON)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { style: { ...S.pre, maxHeight: 400 }, children: JSON.stringify(tree, null, 2) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ComponentTreeRenderer,
+  DevPlayer,
+  builtinAtoms,
+  containsExpression,
+  evaluateExpression,
+  evaluateProp
+});

package/dist/player/index.mjs

@@ -0,0 +1,16 @@
+import {
+  ComponentTreeRenderer,
+  DevPlayer,
+  builtinAtoms,
+  containsExpression,
+  evaluateExpression,
+  evaluateProp
+} from "../chunk-PSL4FCGG.mjs";
+export {
+  ComponentTreeRenderer,
+  DevPlayer,
+  builtinAtoms,
+  containsExpression,
+  evaluateExpression,
+  evaluateProp
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmapp/react",
-  "version": "0.1.0-alpha.16",
+  "version": "0.1.0-alpha.18",
   "description": "React integration for the MindMatrix Player — hooks, components, and WebSocket bridge for browser-side workflow engines",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -35,7 +35,7 @@
     "@tanstack/react-query": ">=5.0.0"
   },
   "dependencies": {
-    "@mmapp/player-core": "^0.1.0-alpha.16"
+    "@mmapp/player-core": "^0.1.0-alpha.18"
   },
   "publishConfig": {
     "access": "public"