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

package/dist/chunk-GLJ7VC7Z.mjs

@@ -0,0 +1,684 @@
+// 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
+import React, { useMemo, useCallback } from "react";
+import { Fragment, jsx, 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__ */ jsx("div", { style: { marginTop: 4 }, children })
+] });
+var RenderNode = ({ node, scopes, atoms, onEvent }) => {
+  const nodeType = node.type || node.component || "";
+  const nodeProps = node.props || node.config || {};
+  if (node.$if) {
+    const condition = evaluateProp(node.$if, scopes);
+    if (!condition) return null;
+  }
+  if (node.$for) {
+    const { each, as, key: keyField } = node.$for;
+    const items = evaluateProp(each, scopes);
+    if (!Array.isArray(items)) return null;
+    return /* @__PURE__ */ jsx(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__ */ jsx(RenderNode, { node: nodeWithoutFor, scopes: loopScopes, atoms, onEvent }, itemKey);
+    }) });
+  }
+  const Component = atoms[nodeType];
+  if (!Component) {
+    return /* @__PURE__ */ jsx(UnknownAtom, { type: nodeType });
+  }
+  const evaluatedProps = {};
+  if (node.className) evaluatedProps.className = node.className;
+  if (node.id) evaluatedProps["data-node-id"] = node.id;
+  for (const [key, value] of Object.entries(nodeProps)) {
+    if (key.startsWith("on") && typeof value === "string") {
+      evaluatedProps[key] = (...args) => {
+        if (containsExpression(value)) {
+          evaluateExpression(value.replace(/^\{\{|\}\}$/g, ""), scopes);
+        } else {
+          onEvent(value, args[0]);
+        }
+      };
+    } else {
+      evaluatedProps[key] = evaluateProp(value, scopes);
+    }
+  }
+  let children = null;
+  if (node.children) {
+    if (typeof node.children === "string") {
+      children = evaluateProp(node.children, scopes);
+    } else if (Array.isArray(node.children)) {
+      children = node.children.map((child, index) => /* @__PURE__ */ jsx(RenderNode, { node: child, scopes, atoms, onEvent }, child.id || index));
+    }
+  }
+  return /* @__PURE__ */ jsx(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__ */ jsx("strong", { style: { color: "#c53030" }, children: "Rendering Error" }),
+        /* @__PURE__ */ 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 = useMemo(() => ({ ...atoms }), [atoms]);
+  const handleEvent = useCallback(
+    (eventName, payload) => onEvent(eventName, payload),
+    [onEvent]
+  );
+  const nodes = Array.isArray(tree) ? tree : [tree];
+  return /* @__PURE__ */ jsx(CTRErrorBoundary, { fallback, children: nodes.map((node, index) => /* @__PURE__ */ jsx(RenderNode, { node, scopes, atoms: allAtoms, onEvent: handleEvent }, index)) });
+};
+
+// src/player/builtin-atoms.tsx
+import React2 from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Stack = ({ children, gap = 8, style, ...rest }) => /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", gap, ...style }, ...rest, children });
+var Row = ({ children, gap = 8, align, justify, style, ...rest }) => /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "row", gap, alignItems: align, justifyContent: justify, ...style }, ...rest, children });
+var Column = ({ children, span, style, ...rest }) => /* @__PURE__ */ jsx2("div", { style: { flex: span ? `0 0 ${Number(span) / 12 * 100}%` : 1, ...style }, ...rest, children });
+var Grid = ({ children, columns = 2, gap = 8, style, ...rest }) => /* @__PURE__ */ jsx2("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap, ...style }, ...rest, children });
+var Divider = ({ style }) => /* @__PURE__ */ jsx2("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "8px 0", ...style } });
+var Spacer = ({ size = 16 }) => /* @__PURE__ */ jsx2("div", { style: { height: size, flexShrink: 0 } });
+var Text = ({ children, size, weight, color, style, ...rest }) => /* @__PURE__ */ jsx2("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__ */ jsx2("h1", { style: s, ...rest, children: c });
+  if (lvl === 2) return /* @__PURE__ */ jsx2("h2", { style: s, ...rest, children: c });
+  if (lvl === 3) return /* @__PURE__ */ jsx2("h3", { style: s, ...rest, children: c });
+  if (lvl === 4) return /* @__PURE__ */ jsx2("h4", { style: s, ...rest, children: c });
+  if (lvl === 5) return /* @__PURE__ */ jsx2("h5", { style: s, ...rest, children: c });
+  return /* @__PURE__ */ jsx2("h6", { style: s, ...rest, children: c });
+};
+var Field = ({ label, value, children, style }) => /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8, ...style }, children: [
+  label ? /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2("a", { href, style: { color: "#3182ce", textDecoration: "underline", ...style }, ...rest, children });
+var TextInput = ({ value, onChange, placeholder, label, bind, style, ...rest }) => {
+  const isControlled = typeof onChange === "function";
+  const [localValue, setLocalValue] = React2.useState(value ?? "");
+  const handleChange = (e) => {
+    setLocalValue(e.target.value);
+    if (typeof onChange === "function") onChange(e);
+  };
+  return /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8 }, children: [
+    label ? /* @__PURE__ */ jsx2("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "text",
+        value: isControlled ? value ?? "" : localValue,
+        onChange: handleChange,
+        placeholder,
+        style: { width: "100%", padding: "6px 10px", border: "1px solid #e2e8f0", borderRadius: 6, fontSize: 14, ...style }
+      }
+    )
+  ] });
+};
+var SelectAtom = ({ value, onChange, options, label, placeholder, style }) => /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8 }, children: [
+  label ? /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2("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__ */ jsx2("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__ */ jsx2("h3", { style: { fontSize: 18, fontWeight: 600, marginBottom: 8 }, children: title }) : null,
+  children
+] });
+var Show = ({ when, children, fallback }) => when ? /* @__PURE__ */ jsx2(Fragment2, { children }) : /* @__PURE__ */ jsx2(Fragment2, { children: fallback ?? null });
+var Each = ({ items, children, renderItem }) => {
+  if (!Array.isArray(items)) return null;
+  if (typeof renderItem === "function") return /* @__PURE__ */ jsx2(Fragment2, { children: items.map((item, i) => renderItem(item, i)) });
+  return /* @__PURE__ */ jsx2(Fragment2, { children });
+};
+var RouterContext = React2.createContext({ path: "/", navigate: () => {
+} });
+var Router = ({ children, basePath, className, style, ...rest }) => {
+  const [path, setPath] = React2.useState("/");
+  const navigate = React2.useCallback((to) => setPath(to), []);
+  return /* @__PURE__ */ jsx2(RouterContext.Provider, { value: { path, navigate }, children: /* @__PURE__ */ jsx2("div", { className, style, ...rest, children }) });
+};
+var Route = ({ children, path, exact, fallback: _fallback, className, style }) => {
+  const { path: currentPath } = React2.useContext(RouterContext);
+  const routePath = path || "/";
+  const isExact = exact !== false;
+  const matches = isExact ? currentPath === routePath || routePath === "/" && currentPath === "/" : currentPath.startsWith(routePath);
+  if (!matches) return null;
+  return /* @__PURE__ */ jsx2("div", { className, style, children });
+};
+var NavLink = ({ children, to, label, icon, className, style, ...rest }) => {
+  const { path, navigate } = React2.useContext(RouterContext);
+  const target = to || "/";
+  const isActive = path === target;
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick: () => navigate(target),
+      className,
+      style: {
+        background: isActive ? "#edf2f7" : "transparent",
+        border: "none",
+        borderRadius: 4,
+        padding: "4px 12px",
+        fontSize: 13,
+        cursor: "pointer",
+        fontWeight: isActive ? 600 : 400,
+        color: isActive ? "#2d3748" : "#718096",
+        ...style
+      },
+      ...rest,
+      children: children || label || target
+    }
+  );
+};
+var RoleGuard = ({ children, role: _role, fallback: _fallback }) => {
+  return /* @__PURE__ */ jsx2(Fragment2, { children });
+};
+var Icon = ({ name, size = 16, color, style }) => /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", alignItems: "center", justifyContent: "center", width: size, height: size, fontSize: size, color, ...style }, title: name, children: iconGlyphs[name] || "\u25A1" });
+var iconGlyphs = {
+  home: "\u2302",
+  settings: "\u2699",
+  plus: "+",
+  search: "\u{1F50D}",
+  box: "\u25A1",
+  inbox: "\u2709",
+  chevronRight: "\u203A",
+  chevronLeft: "\u2039",
+  x: "\u2715",
+  check: "\u2713",
+  edit: "\u270E",
+  trash: "\u{1F5D1}",
+  star: "\u2605",
+  heart: "\u2665",
+  user: "\u{1F464}",
+  menu: "\u2630",
+  close: "\u2715",
+  arrow_right: "\u2192",
+  arrow_left: "\u2190"
+};
+var Tabs = ({ children, tabs, defaultTab, style }) => {
+  const tabList = tabs || [];
+  const [active, setActive] = React2.useState(defaultTab || tabList[0]?.id || "");
+  return /* @__PURE__ */ jsxs2("div", { style, children: [
+    /* @__PURE__ */ jsx2("div", { style: { display: "flex", borderBottom: "1px solid #e2e8f0", marginBottom: 12 }, children: tabList.map((t) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: () => setActive(t.id),
+        style: { padding: "6px 16px", border: "none", borderBottom: active === t.id ? "2px solid #3182ce" : "2px solid transparent", background: "none", cursor: "pointer", fontWeight: active === t.id ? 600 : 400, color: active === t.id ? "#3182ce" : "#718096" },
+        children: t.label
+      },
+      t.id
+    )) }),
+    children
+  ] });
+};
+var Accordion = ({ children, style }) => /* @__PURE__ */ jsx2("div", { style, children });
+var Modal = ({ children, open, title, onClose: _onClose, style }) => {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx2("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1e3 }, children: /* @__PURE__ */ jsxs2("div", { style: { background: "#fff", borderRadius: 12, padding: 24, maxWidth: 480, width: "100%", ...style }, children: [
+    title ? /* @__PURE__ */ jsx2("div", { style: { fontWeight: 600, fontSize: 18, marginBottom: 16 }, children: String(title) }) : null,
+    children
+  ] }) });
+};
+var Markdown = ({ content, children, style }) => /* @__PURE__ */ jsx2("div", { style: { lineHeight: 1.6, ...style }, children: content || children });
+var ScrollArea = ({ children, maxHeight = 400, style }) => /* @__PURE__ */ jsx2("div", { style: { overflow: "auto", maxHeight, ...style }, children });
+var Slot = ({ children, fallback }) => /* @__PURE__ */ jsx2(Fragment2, { children: children || fallback || null });
+var ModuleOutlet = ({ children, module: moduleName, fallback }) => /* @__PURE__ */ jsx2("div", { "data-module": moduleName, children: children || fallback || /* @__PURE__ */ jsxs2("span", { style: { color: "#a0aec0", fontSize: 13 }, children: [
+  "Module: ",
+  moduleName
+] }) });
+var builtinAtoms = {
+  // Layout
+  Stack,
+  Row,
+  Column,
+  Grid,
+  Divider,
+  Spacer,
+  // Typography
+  Text,
+  Heading,
+  Field,
+  Badge,
+  Image: ImageAtom,
+  Icon,
+  // Interactive
+  Button,
+  Link: LinkAtom,
+  // Form
+  TextInput,
+  Select: SelectAtom,
+  // Containers
+  Card,
+  Section,
+  Tabs,
+  Accordion,
+  Modal,
+  // Content
+  Markdown,
+  ScrollArea,
+  // Control Flow
+  Show,
+  Each,
+  // Routing
+  Router,
+  Route,
+  NavLink,
+  RoleGuard,
+  // Composition
+  Slot,
+  ModuleOutlet
+};
+
+// src/player/DevPlayer.tsx
+import { useState, useCallback as useCallback2, useRef, useEffect, useMemo as useMemo2 } from "react";
+import { jsx as jsx3, 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] = useState(false);
+  const wsRef = useRef(null);
+  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] = useState(true);
+  const [events, setEvents] = useState([]);
+  const nextId = useRef(0);
+  const connected = useDevSocket(wsUrl, onReload);
+  const mergedAtoms = useMemo2(
+    () => ({ ...builtinAtoms, ...userAtoms }),
+    [userAtoms]
+  );
+  const handleEvent = useCallback2(
+    (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__ */ jsx3(
+      ComponentTreeRenderer,
+      {
+        tree,
+        scopes,
+        atoms: mergedAtoms,
+        onEvent: handleEvent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3("div", { style: S.shell, children: [
+    /* @__PURE__ */ jsxs3("div", { style: S.toolbar, children: [
+      /* @__PURE__ */ jsx3("div", { style: S.dot(connected), title: connected ? "HMR connected" : "HMR disconnected" }),
+      /* @__PURE__ */ jsx3("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__ */ jsx3("div", { style: { flex: 1 } }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          style: { ...S.toolbarBtn, ...showSidebar ? S.toolbarBtnActive : {} },
+          onClick: () => setShowSidebar((v) => !v),
+          children: "Inspector"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { style: S.body, children: [
+      /* @__PURE__ */ jsx3("div", { style: S.preview, children: /* @__PURE__ */ jsx3(
+        ComponentTreeRenderer,
+        {
+          tree,
+          scopes,
+          atoms: mergedAtoms,
+          onEvent: handleEvent
+        }
+      ) }),
+      showSidebar && /* @__PURE__ */ jsxs3("div", { style: S.sidebar, children: [
+        /* @__PURE__ */ jsxs3("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ jsx3("div", { style: S.sidebarHeading, children: "Scopes" }),
+          /* @__PURE__ */ jsx3("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__ */ jsx3("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: Object.keys(mergedAtoms).sort().map((name) => /* @__PURE__ */ jsx3(
+            "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__ */ jsx3(
+              "button",
+              {
+                style: { background: "none", border: "none", color: "#a0aec0", fontSize: 11, cursor: "pointer" },
+                onClick: () => setEvents([]),
+                children: "Clear"
+              }
+            )
+          ] }),
+          events.length === 0 && /* @__PURE__ */ jsx3("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__ */ jsx3("span", { style: S.eventTime, children: e.time }),
+            /* @__PURE__ */ jsx3("span", { style: S.eventName, children: e.name }),
+            e.payload !== void 0 && /* @__PURE__ */ jsx3("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__ */ jsx3("div", { style: S.sidebarHeading, children: "Tree (JSON)" }),
+          /* @__PURE__ */ jsx3("pre", { style: { ...S.pre, maxHeight: 400 }, children: JSON.stringify(tree, null, 2) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+export {
+  containsExpression,
+  evaluateExpression,
+  evaluateProp,
+  ComponentTreeRenderer,
+  builtinAtoms,
+  DevPlayer
+};