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

package/dist/player/index.js

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,61 +30,3018 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/player/expression-engine.ts
+function setWasmModule(module2) {
+  _wasmModule = module2;
+  _wasmAvailable = module2 != null;
+}
+function classifyExpression(expr) {
+  const cached = classificationCache.get(expr);
+  if (cached) return cached;
+  const cls = classifyUncached(expr);
+  classificationCache.set(expr, cls);
+  return cls;
+}
+function classifyUncached(expr) {
+  const t = expr.trim();
+  if (t === "[Expression]" || t.includes("[Expression]")) return "literal";
+  if (t.startsWith("$expr(") && t.endsWith(")")) return "condition";
+  if (t.startsWith('"') && t.endsWith('"') || t.startsWith("'") && t.endsWith("'")) return "literal";
+  if (/^-?\d+(\.\d+)?$/.test(t)) return "literal";
+  if (t === "true" || t === "false" || t === "null" || t === "undefined") return "literal";
+  if (t === "[]" || t === "{}") return "literal";
+  if (/^\$fn\.\w+\(/.test(t)) return "function";
+  if (/^\$action\.\w+\(/.test(t)) return "action";
+  if (t.startsWith("$action.") && !t.includes("(")) return "action";
+  if (t.startsWith("$") && !/[!=<>&|+\-*/%?:]/.test(t) && !t.includes("(")) return "path";
+  if (/^[a-zA-Z_]\w*(\.\w+)+$/.test(t) && !/[!=<>&|+\-*/%?:]/.test(t)) return "path";
+  if (/^[a-zA-Z_]\w*$/.test(t)) return "path";
+  return "condition";
+}
+function resolvePath(path, scope) {
+  const parts = path.split(".");
+  let current = scope;
+  for (const part of parts) {
+    if (current == null) return void 0;
+    if (typeof current !== "object") return void 0;
+    const asNum = Number(part);
+    if (Array.isArray(current) && !isNaN(asNum)) {
+      current = current[asNum];
+    } else {
+      current = current[part];
+    }
+  }
+  return current;
+}
+function validateExpression(expr) {
+  for (const pat of FORBIDDEN_PATTERNS) {
+    if (pat.test(expr)) {
+      return { valid: false, error: `Forbidden pattern: ${pat.source}` };
+    }
+  }
+  const depth = (expr.match(/\(/g) || []).length;
+  if (depth > 15) return { valid: false, error: "Expression too deeply nested" };
+  return { valid: true };
+}
+function compileToFunction(expr, paramNames) {
+  const cached = compiledCache.get(expr);
+  if (cached) return cached;
+  const validation = validateExpression(expr);
+  if (!validation.valid) {
+    console.warn(`[expression-engine] Unsafe expression blocked: ${validation.error} in "${expr}"`);
+    return null;
+  }
+  try {
+    const fn = new Function(...paramNames, `"use strict"; try { return (${expr}); } catch(e) { return undefined; }`);
+    compiledCache.set(expr, fn);
+    return fn;
+  } catch {
+    try {
+      const fn = new Function(...paramNames, `"use strict"; try { ${expr} } catch(e) { return undefined; }`);
+      compiledCache.set(expr, fn);
+      return fn;
+    } catch {
+      return null;
+    }
+  }
+}
+function evaluateExpression(expr, context) {
+  const trimmed = expr.trim();
+  if (!trimmed) return void 0;
+  const cls = classifyExpression(trimmed);
+  if (cls === "literal") return parseLiteral(trimmed);
+  if (cls === "path") return resolveScopePath(trimmed, context);
+  let evalExpr = trimmed;
+  if (evalExpr.startsWith("$expr(") && evalExpr.endsWith(")")) {
+    evalExpr = evalExpr.slice(6, -1);
+  }
+  if (_wasmAvailable && _wasmModule) {
+    try {
+      const translated = translateForWasm(evalExpr);
+      const contextJson = JSON.stringify(buildWasmContext(context));
+      const resultJson = _wasmModule.evaluateExpressionSync(translated, contextJson);
+      return JSON.parse(resultJson);
+    } catch {
+    }
+  }
+  return evaluateWithJS(evalExpr, context);
+}
+function parseLiteral(expr) {
+  if (expr.startsWith('"') && expr.endsWith('"') || expr.startsWith("'") && expr.endsWith("'")) {
+    return expr.slice(1, -1);
+  }
+  if (/^-?\d+(\.\d+)?$/.test(expr)) return Number(expr);
+  if (expr === "true") return true;
+  if (expr === "false") return false;
+  if (expr === "null") return null;
+  if (expr === "undefined") return void 0;
+  if (expr === "[]") return [];
+  if (expr === "{}") return {};
+  if (expr === "[Expression]") return void 0;
+  return void 0;
+}
+function resolveScopePath(expr, context) {
+  const trimmed = expr.trim();
+  if (trimmed.startsWith("$")) {
+    const dotIdx = trimmed.indexOf(".");
+    if (dotIdx === -1) {
+      return context[trimmed];
+    }
+    const root = trimmed.slice(0, dotIdx);
+    const rest = trimmed.slice(dotIdx + 1);
+    const rootVal = context[root];
+    if (rootVal == null) return void 0;
+    return resolvePath(rest, rootVal);
+  }
+  return resolvePath(trimmed, context);
+}
+function translateForWasm(expr) {
+  return expr.replace(/\$fn\./g, "").replace(/\$instance\./g, "state_data.").replace(/\$data\./g, "state_data.").replace(/\$row\./g, "state_data.");
+}
+function buildWasmContext(context) {
+  const wasmCtx = {};
+  if (context.$instance && typeof context.$instance === "object") {
+    const inst = context.$instance;
+    wasmCtx.state_data = inst.fields ?? inst;
+  }
+  if (context.$local) wasmCtx.$local = context.$local;
+  if (context.$user) wasmCtx.$user = context.$user;
+  if (context.$entity) wasmCtx.$entity = context.$entity;
+  if (context.state_data) wasmCtx.state_data = context.state_data;
+  if (context.memory) wasmCtx.memory = context.memory;
+  if (context.context) wasmCtx.context = context.context;
+  return wasmCtx;
+}
+function evaluateWithJS(expr, context) {
+  const paramNames = [];
+  const paramValues = [];
+  for (const [key, value] of Object.entries(context)) {
+    if (key.startsWith("$")) {
+      paramNames.push(key);
+      paramValues.push(value);
+    }
+  }
+  if (context.$fn && typeof context.$fn === "object") {
+    for (const [name, fn2] of Object.entries(context.$fn)) {
+      if (!paramNames.includes(name)) {
+        paramNames.push(name);
+        paramValues.push(fn2);
+      }
+    }
+  }
+  if ("item" in context) {
+    paramNames.push("item");
+    paramValues.push(context.item);
+  }
+  if ("index" in context) {
+    paramNames.push("index");
+    paramValues.push(context.index);
+  }
+  if (context.$instances) {
+    paramNames.push("items");
+    paramValues.push(context.$instances);
+  }
+  if (context.$instance) {
+    paramNames.push("instance");
+    paramValues.push(context.$instance);
+  }
+  if ("loading" in context) {
+    paramNames.push("loading");
+    paramValues.push(context.loading);
+  }
+  if (context.$local && typeof context.$local === "object") {
+    for (const [k, v] of Object.entries(context.$local)) {
+      if (!paramNames.includes(k)) {
+        paramNames.push(k);
+        paramValues.push(v);
+      }
+    }
+  }
+  const fn = compileToFunction(expr, paramNames);
+  if (!fn) return void 0;
+  try {
+    return fn(...paramValues);
+  } catch {
+    return void 0;
+  }
+}
+var _wasmModule, _wasmAvailable, LRUCache, classificationCache, builtinFunctions, compiledCache, FORBIDDEN_PATTERNS;
+var init_expression_engine = __esm({
+  "src/player/expression-engine.ts"() {
+    "use strict";
+    _wasmModule = null;
+    _wasmAvailable = false;
+    LRUCache = class {
+      constructor(maxSize) {
+        this.maxSize = maxSize;
+      }
+      map = /* @__PURE__ */ new Map();
+      get(key) {
+        const val = this.map.get(key);
+        if (val !== void 0) {
+          this.map.delete(key);
+          this.map.set(key, val);
+        }
+        return val;
+      }
+      set(key, value) {
+        if (this.map.has(key)) this.map.delete(key);
+        this.map.set(key, value);
+        if (this.map.size > this.maxSize) {
+          const first = this.map.keys().next().value;
+          if (first !== void 0) this.map.delete(first);
+        }
+      }
+      has(key) {
+        return this.map.has(key);
+      }
+    };
+    classificationCache = new LRUCache(500);
+    builtinFunctions = {
+      // Array
+      filter: (arr, fn) => {
+        if (!Array.isArray(arr)) return [];
+        if (typeof fn === "function") return arr.filter(fn);
+        return arr;
+      },
+      map: (arr, fn) => {
+        if (!Array.isArray(arr)) return [];
+        if (typeof fn === "function") return arr.map(fn);
+        return arr;
+      },
+      reduce: (arr, fn, init) => {
+        if (!Array.isArray(arr)) return init;
+        if (typeof fn === "function") return arr.reduce(fn, init);
+        return init;
+      },
+      find: (arr, fn) => {
+        if (!Array.isArray(arr)) return void 0;
+        if (typeof fn === "function") return arr.find(fn);
+        return void 0;
+      },
+      includes: (arr, item) => {
+        if (Array.isArray(arr)) return arr.includes(item);
+        if (typeof arr === "string") return arr.includes(String(item));
+        return false;
+      },
+      indexOf: (arr, item) => {
+        if (Array.isArray(arr)) return arr.indexOf(item);
+        if (typeof arr === "string") return arr.indexOf(String(item));
+        return -1;
+      },
+      slice: (arr, start, end) => {
+        if (Array.isArray(arr) || typeof arr === "string") {
+          return arr.slice(Number(start) || 0, end != null ? Number(end) : void 0);
+        }
+        return arr;
+      },
+      sort: (arr, fn) => {
+        if (!Array.isArray(arr)) return [];
+        const copy = [...arr];
+        if (typeof fn === "function") return copy.sort(fn);
+        return copy.sort();
+      },
+      reverse: (arr) => {
+        if (!Array.isArray(arr)) return [];
+        return [...arr].reverse();
+      },
+      unique: (arr) => {
+        if (!Array.isArray(arr)) return [];
+        return [...new Set(arr)];
+      },
+      flat: (arr, depth) => {
+        if (!Array.isArray(arr)) return [];
+        return arr.flat(Number(depth) || 1);
+      },
+      concat: (a, b) => {
+        if (Array.isArray(a)) return a.concat(Array.isArray(b) ? b : [b]);
+        if (typeof a === "string") return a + String(b ?? "");
+        return [a, b];
+      },
+      any: (arr, fn) => {
+        if (!Array.isArray(arr)) return false;
+        if (typeof fn === "function") return arr.some(fn);
+        return arr.length > 0;
+      },
+      all: (arr, fn) => {
+        if (!Array.isArray(arr)) return false;
+        if (typeof fn === "function") return arr.every(fn);
+        return false;
+      },
+      group_by: (arr, key) => {
+        if (!Array.isArray(arr) || typeof key !== "string") return {};
+        const groups = {};
+        for (const item of arr) {
+          const k = String(item?.[key] ?? "undefined");
+          (groups[k] ??= []).push(item);
+        }
+        return groups;
+      },
+      count: (arr) => Array.isArray(arr) ? arr.length : 0,
+      sum: (arr, key) => {
+        if (!Array.isArray(arr)) return 0;
+        if (typeof key === "string") {
+          return arr.reduce((s, item) => s + (Number(item?.[key]) || 0), 0);
+        }
+        return arr.reduce((s, v) => s + (Number(v) || 0), 0);
+      },
+      avg: (arr, key) => {
+        if (!Array.isArray(arr) || arr.length === 0) return 0;
+        const s = builtinFunctions.sum(arr, key);
+        return s / arr.length;
+      },
+      min: (...args) => {
+        if (args.length === 1 && Array.isArray(args[0])) return Math.min(...args[0].map(Number));
+        return Math.min(...args.map(Number));
+      },
+      max: (...args) => {
+        if (args.length === 1 && Array.isArray(args[0])) return Math.max(...args[0].map(Number));
+        return Math.max(...args.map(Number));
+      },
+      // String
+      len: (v) => {
+        if (Array.isArray(v)) return v.length;
+        if (typeof v === "string") return v.length;
+        return 0;
+      },
+      upper: (v) => typeof v === "string" ? v.toUpperCase() : String(v ?? "").toUpperCase(),
+      lower: (v) => typeof v === "string" ? v.toLowerCase() : String(v ?? "").toLowerCase(),
+      trim: (v) => typeof v === "string" ? v.trim() : String(v ?? "").trim(),
+      contains: (haystack, needle) => {
+        if (typeof haystack === "string") return haystack.includes(String(needle));
+        if (Array.isArray(haystack)) return haystack.includes(needle);
+        return false;
+      },
+      starts_with: (v, prefix) => typeof v === "string" ? v.startsWith(String(prefix)) : false,
+      ends_with: (v, suffix) => typeof v === "string" ? v.endsWith(String(suffix)) : false,
+      replace: (v, search, rep) => typeof v === "string" ? v.replaceAll(String(search), String(rep)) : v,
+      split: (v, sep) => typeof v === "string" ? v.split(String(sep)) : [],
+      join: (arr, sep) => Array.isArray(arr) ? arr.join(String(sep ?? ",")) : String(arr),
+      substr: (v, start, len) => {
+        if (typeof v !== "string") return "";
+        return v.substring(Number(start) || 0, len != null ? (Number(start) || 0) + Number(len) : void 0);
+      },
+      format: (template, ...args) => {
+        if (typeof template !== "string") return String(template);
+        return template.replace(/\{(\d+)\}/g, (_, i) => String(args[Number(i)] ?? ""));
+      },
+      // Math
+      abs: (v) => Math.abs(Number(v) || 0),
+      ceil: (v) => Math.ceil(Number(v) || 0),
+      floor: (v) => Math.floor(Number(v) || 0),
+      round: (v, decimals) => {
+        const n = Number(v) || 0;
+        const d = Number(decimals) || 0;
+        const f = Math.pow(10, d);
+        return Math.round(n * f) / f;
+      },
+      pow: (base, exp) => Math.pow(Number(base) || 0, Number(exp) || 0),
+      sqrt: (v) => Math.sqrt(Number(v) || 0),
+      random: () => Math.random(),
+      clamp: (v, lo, hi) => Math.min(Math.max(Number(v), Number(lo)), Number(hi)),
+      // Date
+      now: () => (/* @__PURE__ */ new Date()).toISOString(),
+      formatDate: (v, fmt) => {
+        try {
+          const d = new Date(v);
+          if (isNaN(d.getTime())) return String(v);
+          if (fmt === "relative") {
+            const diff = Date.now() - d.getTime();
+            if (diff < 6e4) return "just now";
+            if (diff < 36e5) return `${Math.floor(diff / 6e4)}m ago`;
+            if (diff < 864e5) return `${Math.floor(diff / 36e5)}h ago`;
+            return `${Math.floor(diff / 864e5)}d ago`;
+          }
+          return d.toLocaleDateString();
+        } catch {
+          return String(v);
+        }
+      },
+      // Utility
+      coalesce: (...args) => args.find((a) => a != null),
+      default: (v, fallback) => v ?? fallback,
+      json: (v) => JSON.stringify(v),
+      keys: (v) => v && typeof v === "object" && !Array.isArray(v) ? Object.keys(v) : [],
+      values: (v) => v && typeof v === "object" && !Array.isArray(v) ? Object.values(v) : [],
+      entries: (v) => v && typeof v === "object" && !Array.isArray(v) ? Object.entries(v) : [],
+      merge: (...args) => Object.assign({}, ...args.filter((a) => a && typeof a === "object")),
+      debug: (v, label) => {
+        console.log(label ? `[debug:${label}]` : "[debug]", v);
+        return v;
+      },
+      Boolean: (v) => Boolean(v),
+      Number: (v) => Number(v),
+      String: (v) => String(v ?? "")
+    };
+    compiledCache = new LRUCache(2e3);
+    FORBIDDEN_PATTERNS = [
+      /\beval\b/,
+      /\bFunction\b/,
+      /\bfetch\b/,
+      /\bdocument\b/,
+      /\bwindow\b/,
+      /\bprocess\b/,
+      /\bglobalThis\b/,
+      /\bimport\b/,
+      /\brequire\b/,
+      /\b__proto__\b/,
+      /\bconstructor\b/
+    ];
+  }
+});
+
+// src/player/scope-builder.ts
+function useScope() {
+  return (0, import_react.useContext)(ScopeContext);
+}
+function buildScope(opts) {
+  const {
+    dataSources = {},
+    localState = {},
+    auth,
+    entity,
+    parentScope,
+    actionScope,
+    functions = {}
+  } = opts;
+  const scope = {
+    ...parentScope ?? emptyScopeData,
+    $local: { ...parentScope?.$local ?? {}, ...localState },
+    $fn: { ...builtinFunctions, ...parentScope?.$fn ?? {}, ...functions }
+  };
+  if (auth) {
+    scope.$user = { id: auth.userId, roles: auth.roles ?? [] };
+  }
+  if (entity) {
+    scope.$entity = entity;
+  }
+  if (actionScope) {
+    scope.$action = actionScope;
+  }
+  if (Object.keys(dataSources).length > 0) {
+    const allInstances = [];
+    let primaryInstance;
+    let primaryDefinition;
+    let primaryPagination;
+    for (const [name, result] of Object.entries(dataSources)) {
+      if (result.instance) {
+        primaryInstance = result.instance;
+        scope[name] = result.instance;
+      }
+      if (result.instances) {
+        allInstances.push(...result.instances);
+        scope[name] = result.instances;
+      }
+      if (result.definition) {
+        primaryDefinition = result.definition;
+      }
+      if (result.pagination) {
+        primaryPagination = result.pagination;
+      }
+    }
+    if (primaryInstance) scope.$instance = primaryInstance;
+    if (allInstances.length > 0) scope.$instances = allInstances;
+    if (primaryDefinition) scope.$definition = primaryDefinition;
+    if (primaryPagination) scope.$pagination = primaryPagination;
+    const anyLoading = Object.values(dataSources).some((r) => r.loading);
+    scope.loading = anyLoading;
+  }
+  return scope;
+}
+function mergeScope(parent, child) {
+  return {
+    ...parent,
+    ...child,
+    $local: { ...parent.$local, ...child.$local ?? {} },
+    $fn: { ...parent.$fn, ...child.$fn ?? {} },
+    $action: child.$action ?? parent.$action
+  };
+}
+function buildLoopScope(parent, item, index, as) {
+  return {
+    ...parent,
+    $item: item,
+    $index: index,
+    [as]: item,
+    // Convenience: flatten item fields for direct access
+    item,
+    index
+  };
+}
+var import_react, emptyScopeData, ScopeContext;
+var init_scope_builder = __esm({
+  "src/player/scope-builder.ts"() {
+    "use strict";
+    import_react = require("react");
+    init_expression_engine();
+    emptyScopeData = {
+      $local: {},
+      $user: { roles: [] },
+      $fn: builtinFunctions,
+      $action: {}
+    };
+    ScopeContext = (0, import_react.createContext)(emptyScopeData);
+  }
+});
+
+// src/player/atoms/layout.tsx
+var layout_exports = {};
+__export(layout_exports, {
+  Column: () => Column,
+  Divider: () => Divider,
+  Grid: () => Grid,
+  Row: () => Row,
+  Spacer: () => Spacer,
+  Stack: () => Stack
+});
+var import_jsx_runtime, filterHtmlProps, Stack, Row, Grid, Column, Divider, Spacer;
+var init_layout = __esm({
+  "src/player/atoms/layout.tsx"() {
+    "use strict";
+    import_jsx_runtime = require("react/jsx-runtime");
+    filterHtmlProps = (props) => {
+      const html = {};
+      for (const [k, v] of Object.entries(props)) {
+        if (["className", "style", "id", "role", "tabIndex", "title", "onClick", "data-node-id"].includes(k)) {
+          html[k] = v;
+        }
+        if (k.startsWith("data-") || k.startsWith("aria-")) html[k] = v;
+      }
+      return html;
+    };
+    Stack = ({ children, gap, padding, align, justify, className, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...filterHtmlProps(rest),
+        className,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: gap != null ? Number(gap) * 4 : void 0,
+          padding: padding != null ? Number(padding) * 4 : void 0,
+          alignItems: align,
+          justifyContent: justify,
+          ...style
+        },
+        children
+      }
+    );
+    Row = ({ children, gap, padding, align, justify, wrap, className, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...filterHtmlProps(rest),
+        className,
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          gap: gap != null ? Number(gap) * 4 : void 0,
+          padding: padding != null ? Number(padding) * 4 : void 0,
+          alignItems: align ?? "center",
+          justifyContent: justify,
+          flexWrap: wrap ? "wrap" : void 0,
+          ...style
+        },
+        children
+      }
+    );
+    Grid = ({ children, columns, gap, padding, minChildWidth, className, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...filterHtmlProps(rest),
+        className,
+        style: {
+          display: "grid",
+          gridTemplateColumns: minChildWidth ? `repeat(auto-fill, minmax(${Number(minChildWidth)}px, 1fr))` : columns ? `repeat(${Number(columns)}, 1fr)` : "repeat(auto-fill, minmax(200px, 1fr))",
+          gap: gap != null ? Number(gap) * 4 : 16,
+          padding: padding != null ? Number(padding) * 4 : void 0,
+          ...style
+        },
+        children
+      }
+    );
+    Column = ({ children, span, className, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...filterHtmlProps(rest),
+        className,
+        style: {
+          gridColumn: span ? `span ${Number(span)}` : void 0,
+          ...style
+        },
+        children
+      }
+    );
+    Divider = ({ orientation, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "hr",
+      {
+        className,
+        style: {
+          border: "none",
+          borderTop: orientation === "vertical" ? "none" : "1px solid #e2e8f0",
+          borderLeft: orientation === "vertical" ? "1px solid #e2e8f0" : "none",
+          margin: orientation === "vertical" ? "0 8px" : "8px 0",
+          alignSelf: orientation === "vertical" ? "stretch" : void 0,
+          ...style
+        }
+      }
+    );
+    Spacer = ({ size, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className,
+        style: {
+          flex: size ? `0 0 ${Number(size) * 4}px` : "1",
+          ...style
+        }
+      }
+    );
+  }
+});
+
+// src/player/atoms/content.tsx
+var content_exports = {};
+__export(content_exports, {
+  Alert: () => Alert,
+  Badge: () => Badge,
+  EmptyState: () => EmptyState,
+  Field: () => Field,
+  Heading: () => Heading,
+  Icon: () => Icon,
+  Image: () => Image,
+  Markdown: () => Markdown,
+  Progress: () => Progress,
+  Separator: () => Separator,
+  Text: () => Text
+});
+var import_jsx_runtime2, Text, Heading, Field, Image, Badge, ICON_MAP, Icon, Alert, EmptyState, Markdown, Progress, Separator;
+var init_content = __esm({
+  "src/player/atoms/content.tsx"() {
+    "use strict";
+    import_jsx_runtime2 = require("react/jsx-runtime");
+    Text = ({ value, children, variant, size, weight, color, align, className, style }) => {
+      const text = value ?? children;
+      const sizeMap = { xs: 11, sm: 13, md: 14, lg: 16, xl: 20, "2xl": 24 };
+      const weightMap = { light: 300, normal: 400, medium: 500, semibold: 600, bold: 700 };
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "span",
+        {
+          className,
+          style: {
+            fontSize: size ? sizeMap[size] ?? Number(size) : void 0,
+            fontWeight: weight ? weightMap[weight] ?? weight : void 0,
+            color: variant === "muted" ? "#718096" : variant === "error" ? "#e53e3e" : variant === "success" ? "#38a169" : color,
+            textAlign: align,
+            ...style
+          },
+          children: text == null ? "" : String(text)
+        }
+      );
+    };
+    Heading = ({ value, children, level, className, style }) => {
+      const text = value ?? children;
+      const sizes = { 1: 32, 2: 24, 3: 20, 4: 16, 5: 14, 6: 12 };
+      const lvl = Number(level) || 2;
+      const Tag = `h${Math.min(Math.max(lvl, 1), 6)}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Tag,
+        {
+          className,
+          style: {
+            fontSize: sizes[lvl] ?? 20,
+            fontWeight: 600,
+            margin: "0 0 8px 0",
+            lineHeight: 1.3,
+            ...style
+          },
+          children: text == null ? "" : String(text)
+        }
+      );
+    };
+    Field = ({ label, value, type: _type, children, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, style: { marginBottom: 8, ...style }, children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: { display: "block", fontSize: 12, fontWeight: 500, color: "#718096", marginBottom: 2 }, children: String(label) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 14 }, children: children ?? (value != null ? String(value) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#a0aec0" }, children: "\u2014" })) })
+    ] });
+    Image = ({ src, alt, width, height, fit, radius, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "img",
+      {
+        src,
+        alt: alt ?? "",
+        className,
+        style: {
+          width: width ? Number(width) : void 0,
+          height: height ? Number(height) : void 0,
+          objectFit: fit ?? "cover",
+          borderRadius: radius ? Number(radius) : void 0,
+          maxWidth: "100%",
+          ...style
+        }
+      }
+    );
+    Badge = ({ value, children, variant, color, className, style }) => {
+      const text = value ?? children;
+      const colorMap = {
+        default: { bg: "#edf2f7", fg: "#4a5568" },
+        primary: { bg: "#ebf8ff", fg: "#2b6cb0" },
+        success: { bg: "#f0fff4", fg: "#276749" },
+        warning: { bg: "#fffaf0", fg: "#c05621" },
+        error: { bg: "#fff5f5", fg: "#c53030" },
+        info: { bg: "#ebf8ff", fg: "#2b6cb0" }
+      };
+      const c = colorMap[variant ?? "default"] ?? colorMap.default;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "span",
+        {
+          className,
+          style: {
+            display: "inline-block",
+            padding: "1px 8px",
+            borderRadius: 9999,
+            fontSize: 12,
+            fontWeight: 500,
+            background: color ? void 0 : c.bg,
+            color: color ?? c.fg,
+            ...style
+          },
+          children: text == null ? "" : String(text)
+        }
+      );
+    };
+    ICON_MAP = {
+      "check": "\u2713",
+      "x": "\u2715",
+      "plus": "+",
+      "minus": "\u2212",
+      "arrow-right": "\u2192",
+      "arrow-left": "\u2190",
+      "arrow-up": "\u2191",
+      "arrow-down": "\u2193",
+      "search": "\u{1F50D}",
+      "home": "\u{1F3E0}",
+      "user": "\u{1F464}",
+      "settings": "\u2699",
+      "star": "\u2B50",
+      "heart": "\u2764",
+      "mail": "\u2709",
+      "phone": "\u{1F4DE}",
+      "calendar": "\u{1F4C5}",
+      "clock": "\u{1F550}",
+      "edit": "\u270E",
+      "trash": "\u{1F5D1}",
+      "download": "\u2B07",
+      "upload": "\u2B06",
+      "share": "\u2197",
+      "lock": "\u{1F512}",
+      "unlock": "\u{1F513}",
+      "eye": "\u{1F441}",
+      "eye-off": "\u{1F648}",
+      "bell": "\u{1F514}",
+      "info": "\u2139",
+      "warning": "\u26A0",
+      "error": "\u274C",
+      "loading": "\u23F3",
+      "menu": "\u2630",
+      "close": "\u2715",
+      "chevron-right": "\u203A",
+      "chevron-left": "\u2039",
+      "chevron-up": "\u2038",
+      "chevron-down": "\u02EC",
+      "copy": "\u{1F4CB}",
+      "save": "\u{1F4BE}",
+      "refresh": "\u21BB",
+      "filter": "\u23CF",
+      "sort": "\u21C5"
+    };
+    Icon = ({ name, size, color, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "span",
+      {
+        className,
+        role: "img",
+        "aria-label": name,
+        style: {
+          fontSize: size ? Number(size) : 16,
+          color,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          ...style
+        },
+        children: ICON_MAP[name?.toLowerCase()] ?? name ?? "?"
+      }
+    );
+    Alert = ({ children, variant, title, message, className, style }) => {
+      const colorMap = {
+        info: { bg: "#ebf8ff", border: "#90cdf4", fg: "#2b6cb0" },
+        success: { bg: "#f0fff4", border: "#9ae6b4", fg: "#276749" },
+        warning: { bg: "#fffaf0", border: "#fbd38d", fg: "#c05621" },
+        error: { bg: "#fff5f5", border: "#feb2b2", fg: "#c53030" }
+      };
+      const c = colorMap[variant ?? "info"] ?? colorMap.info;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className,
+          role: "alert",
+          style: {
+            padding: "12px 16px",
+            borderRadius: 6,
+            border: `1px solid ${c.border}`,
+            background: c.bg,
+            color: c.fg,
+            fontSize: 14,
+            ...style
+          },
+          children: [
+            title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 600, marginBottom: 4 }, children: String(title) }) : null,
+            message ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: String(message) }) : null,
+            children
+          ]
+        }
+      );
+    };
+    EmptyState = ({ children, title, description, icon, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className,
+        style: {
+          textAlign: "center",
+          padding: "32px 16px",
+          color: "#a0aec0",
+          ...style
+        },
+        children: [
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 40, marginBottom: 12 }, children: ICON_MAP[icon] ?? icon }) : null,
+          title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 16, fontWeight: 600, color: "#4a5568", marginBottom: 4 }, children: String(title) }) : null,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 14, marginBottom: 8 }, children: String(description) }) : null,
+          children
+        ]
+      }
+    );
+    Markdown = ({ value, children, className, style }) => {
+      const text = String(value ?? children ?? "");
+      const html = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/`(.+?)`/g, '<code style="background:#edf2f7;padding:1px 4px;border-radius:3px;font-size:13px">$1</code>').replace(/\n/g, "<br/>");
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className,
+          style: { fontSize: 14, lineHeight: 1.6, ...style },
+          dangerouslySetInnerHTML: { __html: html }
+        }
+      );
+    };
+    Progress = ({ value, max, label, variant, className, style }) => {
+      const pct = Math.min(100, Math.max(0, Number(value) / (Number(max) || 100) * 100));
+      const colorMap = {
+        default: "#3182ce",
+        success: "#38a169",
+        warning: "#dd6b20",
+        error: "#e53e3e"
+      };
+      const color = colorMap[variant ?? "default"] ?? colorMap.default;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, style: { ...style }, children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, marginBottom: 4, color: "#718096" }, children: String(label) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { height: 8, background: "#edf2f7", borderRadius: 4, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { height: "100%", width: `${pct}%`, background: color, borderRadius: 4, transition: "width 0.3s" } }) })
+      ] });
+    };
+    Separator = ({ className, style }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "hr",
+      {
+        className,
+        style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "16px 0", ...style }
+      }
+    );
+  }
+});
+
+// src/player/atoms/actions.tsx
+var actions_exports = {};
+__export(actions_exports, {
+  Button: () => Button,
+  Link: () => Link
+});
+var import_react4, import_jsx_runtime3, VARIANT_STYLES, SIZE_STYLES, Button, Link;
+var init_actions = __esm({
+  "src/player/atoms/actions.tsx"() {
+    "use strict";
+    import_react4 = require("react");
+    import_jsx_runtime3 = require("react/jsx-runtime");
+    VARIANT_STYLES = {
+      primary: { background: "#3182ce", color: "#fff", border: "1px solid #3182ce" },
+      secondary: { background: "#edf2f7", color: "#4a5568", border: "1px solid #e2e8f0" },
+      outline: { background: "transparent", color: "#3182ce", border: "1px solid #3182ce" },
+      ghost: { background: "transparent", color: "#4a5568", border: "1px solid transparent" },
+      danger: { background: "#e53e3e", color: "#fff", border: "1px solid #e53e3e" },
+      destructive: { background: "#e53e3e", color: "#fff", border: "1px solid #e53e3e" },
+      success: { background: "#38a169", color: "#fff", border: "1px solid #38a169" },
+      link: { background: "transparent", color: "#3182ce", border: "none", textDecoration: "underline" },
+      default: { background: "#fff", color: "#1a202c", border: "1px solid #e2e8f0" }
+    };
+    SIZE_STYLES = {
+      xs: { padding: "2px 8px", fontSize: 11 },
+      sm: { padding: "4px 12px", fontSize: 13 },
+      md: { padding: "6px 16px", fontSize: 14 },
+      lg: { padding: "8px 24px", fontSize: 16 },
+      xl: { padding: "12px 32px", fontSize: 18 }
+    };
+    Button = ({
+      children,
+      label,
+      value,
+      onClick,
+      variant,
+      size,
+      disabled,
+      loading: loadingProp,
+      icon,
+      iconRight,
+      fullWidth,
+      className,
+      style
+    }) => {
+      const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
+      const text = children ?? label ?? value;
+      const isDisabled = Boolean(disabled) || isLoading || Boolean(loadingProp);
+      const vs = VARIANT_STYLES[variant ?? "default"] ?? VARIANT_STYLES.default;
+      const ss = SIZE_STYLES[size ?? "md"] ?? SIZE_STYLES.md;
+      const handleClick = (0, import_react4.useCallback)(async (e) => {
+        if (isDisabled) return;
+        if (typeof onClick === "function") {
+          const result = onClick(e);
+          if (result && typeof result === "object" && typeof result.then === "function") {
+            setIsLoading(true);
+            try {
+              await result;
+            } finally {
+              setIsLoading(false);
+            }
+          }
+        }
+      }, [onClick, isDisabled]);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "button",
+        {
+          className,
+          disabled: isDisabled,
+          onClick: handleClick,
+          style: {
+            ...vs,
+            ...ss,
+            borderRadius: 6,
+            cursor: isDisabled ? "not-allowed" : "pointer",
+            opacity: isDisabled ? 0.6 : 1,
+            fontWeight: 500,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 6,
+            width: fullWidth ? "100%" : void 0,
+            transition: "opacity 0.15s, background 0.15s",
+            ...style
+          },
+          children: [
+            isLoading || loadingProp ? "\u23F3" : icon ? String(icon) : null,
+            text != null ? String(text) : null,
+            iconRight ? String(iconRight) : null
+          ]
+        }
+      );
+    };
+    Link = ({ children, href, to, label, onClick, external, className, style }) => {
+      const text = children ?? label;
+      const target = href ?? to;
+      const handleClick = (0, import_react4.useCallback)((e) => {
+        if (typeof onClick === "function") {
+          e.preventDefault();
+          onClick(e);
+        }
+      }, [onClick]);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "a",
+        {
+          href: target ?? "#",
+          className,
+          onClick: handleClick,
+          target: external ? "_blank" : void 0,
+          rel: external ? "noopener noreferrer" : void 0,
+          style: {
+            color: "#3182ce",
+            textDecoration: "none",
+            cursor: "pointer",
+            fontSize: 14,
+            ...style
+          },
+          children: text != null ? String(text) : target ?? "Link"
+        }
+      );
+    };
+  }
+});
+
+// src/player/atoms/control-flow.tsx
+var control_flow_exports = {};
+__export(control_flow_exports, {
+  Each: () => Each,
+  Show: () => Show
+});
+var import_jsx_runtime4, Show, Each;
+var init_control_flow = __esm({
+  "src/player/atoms/control-flow.tsx"() {
+    "use strict";
+    init_scope_builder();
+    import_jsx_runtime4 = require("react/jsx-runtime");
+    Show = ({ when, fallback, children }) => {
+      if (when) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+      if (fallback) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: fallback });
+      return null;
+    };
+    Each = ({ items, as: asName, keyField, children, renderItem, emptyState, className, style }) => {
+      const parentScope = useScope();
+      const itemArray = Array.isArray(items) ? items : [];
+      const varName = asName ?? "item";
+      const keyProp = keyField ?? "id";
+      if (itemArray.length === 0) {
+        if (emptyState) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: emptyState });
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style, children: itemArray.map((item, index) => {
+        const loopScope = buildLoopScope(parentScope, item, index, varName);
+        const key = item && typeof item === "object" && keyProp in item ? String(item[keyProp]) : String(index);
+        if (typeof renderItem === "function") {
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ScopeContext.Provider, { value: loopScope, children: renderItem(item, index) }, key);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ScopeContext.Provider, { value: loopScope, children }, key);
+      }) });
+    };
+  }
+});
+
+// src/player/atoms/input.tsx
+var input_exports = {};
+__export(input_exports, {
+  Select: () => Select,
+  Slider: () => Slider,
+  TextInput: () => TextInput,
+  Toggle: () => Toggle
+});
+var import_react5, import_jsx_runtime5, inputBase, TextInput, Select, Toggle, Slider;
+var init_input = __esm({
+  "src/player/atoms/input.tsx"() {
+    "use strict";
+    import_react5 = require("react");
+    import_jsx_runtime5 = require("react/jsx-runtime");
+    inputBase = {
+      padding: "6px 12px",
+      border: "1px solid #e2e8f0",
+      borderRadius: 6,
+      fontSize: 14,
+      outline: "none",
+      width: "100%",
+      boxSizing: "border-box",
+      background: "#fff",
+      color: "#1a202c",
+      transition: "border-color 0.15s"
+    };
+    TextInput = ({
+      value,
+      onChange,
+      onBlur,
+      placeholder,
+      label,
+      type,
+      name,
+      disabled,
+      required,
+      error,
+      helperText,
+      multiline,
+      rows,
+      maxLength,
+      className,
+      style,
+      bind: _bind
+    }) => {
+      const isControlled = typeof onChange === "function";
+      const [localValue, setLocalValue] = (0, import_react5.useState)(value ?? "");
+      (0, import_react5.useEffect)(() => {
+        if (value != null && String(value) !== localValue) {
+          setLocalValue(String(value));
+        }
+      }, [value]);
+      const handleChange = (0, import_react5.useCallback)((e) => {
+        setLocalValue(e.target.value);
+        if (typeof onChange === "function") {
+          onChange(e);
+        }
+      }, [onChange]);
+      const displayValue = isControlled ? value ?? "" : localValue;
+      const hasError = Boolean(error);
+      const inputStyle = {
+        ...inputBase,
+        borderColor: hasError ? "#e53e3e" : "#e2e8f0",
+        ...style
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, style: { width: "100%" }, children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4, color: "#4a5568" }, children: [
+          String(label),
+          required ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#e53e3e" }, children: " *" }) : null
+        ] }) : null,
+        multiline ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "textarea",
+          {
+            value: displayValue,
+            onChange: handleChange,
+            onBlur,
+            placeholder,
+            name,
+            disabled: Boolean(disabled),
+            required: Boolean(required),
+            rows: Number(rows) || 3,
+            maxLength: maxLength ? Number(maxLength) : void 0,
+            style: inputStyle
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            type: type ?? "text",
+            value: displayValue,
+            onChange: handleChange,
+            onBlur,
+            placeholder,
+            name,
+            disabled: Boolean(disabled),
+            required: Boolean(required),
+            maxLength: maxLength ? Number(maxLength) : void 0,
+            style: inputStyle
+          }
+        ),
+        error || helperText ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 12, marginTop: 2, color: hasError ? "#e53e3e" : "#a0aec0" }, children: String(error || helperText) }) : null
+      ] });
+    };
+    Select = ({
+      value,
+      onChange,
+      options,
+      placeholder,
+      label,
+      disabled,
+      required,
+      error,
+      name,
+      className,
+      style
+    }) => {
+      const [localValue, setLocalValue] = (0, import_react5.useState)(value ?? "");
+      const isControlled = typeof onChange === "function";
+      (0, import_react5.useEffect)(() => {
+        if (value != null && String(value) !== localValue) setLocalValue(String(value));
+      }, [value]);
+      const handleChange = (0, import_react5.useCallback)((e) => {
+        setLocalValue(e.target.value);
+        if (typeof onChange === "function") onChange(e);
+      }, [onChange]);
+      const displayValue = isControlled ? value ?? "" : localValue;
+      const opts = Array.isArray(options) ? options : [];
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4, color: "#4a5568" }, children: [
+          String(label),
+          required ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#e53e3e" }, children: " *" }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "select",
+          {
+            value: displayValue,
+            onChange: handleChange,
+            disabled: Boolean(disabled),
+            name,
+            style: {
+              ...inputBase,
+              borderColor: error ? "#e53e3e" : "#e2e8f0",
+              ...style
+            },
+            children: [
+              placeholder ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: String(placeholder) }) : null,
+              opts.map((opt, i) => {
+                const val = typeof opt === "object" ? opt.value : opt;
+                const lbl = typeof opt === "object" ? opt.label ?? val : opt;
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: String(val), children: String(lbl) }, String(val) ?? i);
+              })
+            ]
+          }
+        )
+      ] });
+    };
+    Toggle = ({ value, checked, onChange, label, disabled, className, style }) => {
+      const isOn = Boolean(value ?? checked);
+      const handleClick = (0, import_react5.useCallback)(() => {
+        if (disabled) return;
+        if (typeof onChange === "function") onChange(!isOn);
+      }, [onChange, isOn, disabled]);
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          className,
+          style: { display: "flex", alignItems: "center", gap: 8, ...style },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                role: "switch",
+                "aria-checked": isOn,
+                disabled: Boolean(disabled),
+                onClick: handleClick,
+                style: {
+                  width: 40,
+                  height: 22,
+                  borderRadius: 11,
+                  border: "none",
+                  cursor: disabled ? "not-allowed" : "pointer",
+                  background: isOn ? "#3182ce" : "#cbd5e0",
+                  padding: 2,
+                  transition: "background 0.2s",
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+                  width: 18,
+                  height: 18,
+                  borderRadius: "50%",
+                  background: "#fff",
+                  transform: isOn ? "translateX(18px)" : "translateX(0)",
+                  transition: "transform 0.2s",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+                } })
+              }
+            ),
+            label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: 14 }, children: String(label) }) : null
+          ]
+        }
+      );
+    };
+    Slider = ({ value, onChange, min, max, step, label, disabled, className, style }) => {
+      const numVal = Number(value) || Number(min) || 0;
+      const handleChange = (0, import_react5.useCallback)((e) => {
+        if (typeof onChange === "function") onChange(Number(e.target.value));
+      }, [onChange]);
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, style: { ...style }, children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 4 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#4a5568", fontWeight: 500 }, children: String(label) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#718096" }, children: numVal })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            type: "range",
+            value: numVal,
+            onChange: handleChange,
+            min: Number(min) ?? 0,
+            max: Number(max) ?? 100,
+            step: Number(step) ?? 1,
+            disabled: Boolean(disabled),
+            style: { width: "100%" }
+          }
+        )
+      ] });
+    };
+  }
+});
+
+// src/player/atoms/grouping.tsx
+var grouping_exports = {};
+__export(grouping_exports, {
+  Accordion: () => Accordion,
+  Card: () => Card,
+  Modal: () => Modal,
+  ScrollArea: () => ScrollArea,
+  Section: () => Section,
+  Tabs: () => Tabs
+});
+var import_react6, import_jsx_runtime6, Card, Section, Tabs, Accordion, Modal, ScrollArea;
+var init_grouping = __esm({
+  "src/player/atoms/grouping.tsx"() {
+    "use strict";
+    import_react6 = __toESM(require("react"));
+    import_jsx_runtime6 = require("react/jsx-runtime");
+    Card = ({ children, title, subtitle, padding, variant, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        className,
+        style: {
+          background: variant === "outlined" ? "transparent" : "#fff",
+          border: "1px solid #e2e8f0",
+          borderRadius: 8,
+          padding: padding != null ? Number(padding) * 4 : 16,
+          boxShadow: variant === "elevated" ? "0 2px 8px rgba(0,0,0,0.08)" : void 0,
+          ...style
+        },
+        children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontWeight: 600, fontSize: 16, marginBottom: subtitle ? 2 : 12 }, children: String(title) }) : null,
+          subtitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 13, color: "#718096", marginBottom: 12 }, children: String(subtitle) }) : null,
+          children
+        ]
+      }
+    );
+    Section = ({ children, title, description, collapsible, defaultOpen, className, style }) => {
+      const [open, setOpen] = (0, import_react6.useState)(defaultOpen !== false);
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, style: { marginBottom: 16, ...style }, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginBottom: open ? 12 : 0,
+              cursor: collapsible ? "pointer" : void 0
+            },
+            onClick: collapsible ? () => setOpen((v) => !v) : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontWeight: 600, fontSize: 15 }, children: String(title) }),
+                description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 13, color: "#718096", marginTop: 2 }, children: String(description) }) : null
+              ] }),
+              collapsible ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#a0aec0", fontSize: 18 }, children: open ? "\u25BE" : "\u25B8" }) : null
+            ]
+          }
+        ) : null,
+        open ? children : null
+      ] });
+    };
+    Tabs = ({ children, tabs, defaultTab, className, style }) => {
+      const tabList = Array.isArray(tabs) ? tabs.map((t) => typeof t === "string" ? { label: t, value: t } : t) : [];
+      const [active, setActive] = (0, import_react6.useState)(defaultTab ?? tabList[0]?.value ?? "");
+      if (tabList.length === 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, style, children });
+      }
+      const childArray = import_react6.default.Children.toArray(children);
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, style, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", borderBottom: "2px solid #e2e8f0", marginBottom: 12, gap: 0 }, children: tabList.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            onClick: () => setActive(tab.value),
+            style: {
+              padding: "8px 16px",
+              fontSize: 14,
+              fontWeight: 500,
+              cursor: "pointer",
+              border: "none",
+              background: "none",
+              borderBottom: "2px solid transparent",
+              marginBottom: -2,
+              color: active === tab.value ? "#3182ce" : "#718096",
+              borderBottomColor: active === tab.value ? "#3182ce" : "transparent"
+            },
+            children: tab.label
+          },
+          tab.value
+        )) }),
+        childArray.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: tabList[i]?.value === active ? "block" : "none" }, children: child }, i))
+      ] });
+    };
+    Accordion = ({ children, items, allowMultiple, className, style }) => {
+      const [openItems, setOpenItems] = (0, import_react6.useState)(/* @__PURE__ */ new Set([0]));
+      const toggle = (0, import_react6.useCallback)((index) => {
+        setOpenItems((prev) => {
+          const next = new Set(allowMultiple ? prev : []);
+          if (prev.has(index)) next.delete(index);
+          else next.add(index);
+          return next;
+        });
+      }, [allowMultiple]);
+      const itemList = Array.isArray(items) ? items : [];
+      if (itemList.length === 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, style, children });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, style: { border: "1px solid #e2e8f0", borderRadius: 8, overflow: "hidden", ...style }, children: itemList.map((item, i) => {
+        const itm = item;
+        const isOpen = openItems.has(i);
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { borderBottom: i < itemList.length - 1 ? "1px solid #e2e8f0" : "none" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "button",
+            {
+              onClick: () => toggle(i),
+              style: {
+                width: "100%",
+                padding: "12px 16px",
+                background: "none",
+                border: "none",
+                textAlign: "left",
+                cursor: "pointer",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                fontSize: 14,
+                fontWeight: 500
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: String(itm.title ?? itm.label ?? `Item ${i + 1}`) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#a0aec0" }, children: isOpen ? "\u25BE" : "\u25B8" })
+              ]
+            }
+          ),
+          isOpen ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "0 16px 12px" }, children: itm.content ? String(itm.content) : null }) : null
+        ] }, i);
+      }) });
+    };
+    Modal = ({ children, open, isOpen, onClose, title, size, id, nodeId, className, style }) => {
+      const modalId = id ?? nodeId;
+      const [eventOpen, setEventOpen] = (0, import_react6.useState)(false);
+      (0, import_react6.useEffect)(() => {
+        if (!modalId) return;
+        const handleOpen = (e) => {
+          const detail = e.detail;
+          if (detail === modalId || detail?.id === modalId) {
+            setEventOpen(true);
+          }
+        };
+        const handleClose = (e) => {
+          const detail = e.detail;
+          if (detail === modalId || detail?.id === modalId) {
+            setEventOpen(false);
+          }
+        };
+        window.addEventListener("openModal", handleOpen);
+        window.addEventListener("closeModal", handleClose);
+        return () => {
+          window.removeEventListener("openModal", handleOpen);
+          window.removeEventListener("closeModal", handleClose);
+        };
+      }, [modalId]);
+      const visible = Boolean(open ?? isOpen ?? eventOpen);
+      (0, import_react6.useEffect)(() => {
+        if (visible) document.body.style.overflow = "hidden";
+        return () => {
+          document.body.style.overflow = "";
+        };
+      }, [visible]);
+      if (!visible) return null;
+      const widthMap = { sm: 400, md: 560, lg: 720, xl: 960, full: 9999 };
+      const maxWidth = widthMap[size ?? "md"] ?? 560;
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 9999,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "rgba(0,0,0,0.4)"
+          },
+          onClick: (e) => {
+            if (e.target === e.currentTarget) {
+              setEventOpen(false);
+              if (typeof onClose === "function") onClose();
+            }
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "div",
+            {
+              className,
+              style: {
+                background: "#fff",
+                borderRadius: 12,
+                padding: 24,
+                maxWidth,
+                width: "90%",
+                maxHeight: "85vh",
+                overflow: "auto",
+                boxShadow: "0 20px 60px rgba(0,0,0,0.2)",
+                ...style
+              },
+              children: [
+                title || onClose ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
+                  title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontWeight: 600, fontSize: 18 }, children: String(title) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {}),
+                  typeof onClose === "function" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    "button",
+                    {
+                      onClick: () => {
+                        setEventOpen(false);
+                        onClose();
+                      },
+                      style: { background: "none", border: "none", fontSize: 20, cursor: "pointer", color: "#a0aec0", padding: 4 },
+                      children: "\u2715"
+                    }
+                  ) : null
+                ] }) : null,
+                children
+              ]
+            }
+          )
+        }
+      );
+    };
+    ScrollArea = ({ children, maxHeight, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className,
+        style: {
+          overflow: "auto",
+          maxHeight: maxHeight ? Number(maxHeight) : void 0,
+          ...style
+        },
+        children
+      }
+    );
+  }
+});
+
+// src/player/atoms/navigation.tsx
+var navigation_exports = {};
+__export(navigation_exports, {
+  NavLink: () => NavLink,
+  RoleGuard: () => RoleGuard,
+  Route: () => Route,
+  Router: () => Router,
+  usePlayerRouter: () => usePlayerRouter
+});
+function usePlayerRouter() {
+  return (0, import_react7.useContext)(RouterCtx);
+}
+function matchPath(pattern, currentPath, exact) {
+  const params = {};
+  const patternParts = pattern.split("/").filter(Boolean);
+  const pathParts = currentPath.split("/").filter(Boolean);
+  if (exact && patternParts.length !== pathParts.length) {
+    return { match: false, params };
+  }
+  if (patternParts.length > pathParts.length) {
+    return { match: false, params };
+  }
+  for (let i = 0; i < patternParts.length; i++) {
+    const pp = patternParts[i];
+    if (pp.startsWith(":")) {
+      params[pp.slice(1)] = pathParts[i];
+    } else if (pp === "*") {
+      return { match: true, params };
+    } else if (pp !== pathParts[i]) {
+      return { match: false, params };
+    }
+  }
+  return { match: true, params };
+}
+var import_react7, import_jsx_runtime7, RouterCtx, Router, Route, NavLink, RoleGuard;
+var init_navigation = __esm({
+  "src/player/atoms/navigation.tsx"() {
+    "use strict";
+    import_react7 = require("react");
+    init_scope_builder();
+    import_jsx_runtime7 = require("react/jsx-runtime");
+    RouterCtx = (0, import_react7.createContext)({
+      path: "/",
+      navigate: () => {
+      },
+      params: {}
+    });
+    Router = ({ children, basePath, className, style }) => {
+      const [path, setPath] = (0, import_react7.useState)(basePath ?? "/");
+      const navigate = (0, import_react7.useCallback)((to) => {
+        setPath(to);
+      }, []);
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RouterCtx.Provider, { value: { path, navigate, params: {} }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, style, children }) });
+    };
+    Route = ({ children, path: routePath, exact, className, style }) => {
+      const { path } = (0, import_react7.useContext)(RouterCtx);
+      const pattern = routePath ?? "/";
+      const { match, params } = matchPath(pattern, path, exact !== false);
+      if (!match) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RouterCtx.Provider, { value: { path, navigate: (0, import_react7.useContext)(RouterCtx).navigate, params }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, style, children }) });
+    };
+    NavLink = ({
+      children,
+      to,
+      label,
+      icon,
+      activeClassName,
+      className,
+      style,
+      onClick
+    }) => {
+      const { path, navigate } = (0, import_react7.useContext)(RouterCtx);
+      const target = to ?? "/";
+      const isActive = path === target || path.startsWith(target + "/");
+      const text = children ?? label;
+      const handleClick = (0, import_react7.useCallback)((e) => {
+        e.preventDefault();
+        navigate(target);
+        if (typeof onClick === "function") onClick(e);
+      }, [navigate, target, onClick]);
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "button",
+        {
+          className: `${className ?? ""} ${isActive && activeClassName ? activeClassName : ""}`.trim() || void 0,
+          onClick: handleClick,
+          style: {
+            background: isActive ? "#ebf8ff" : "transparent",
+            color: isActive ? "#2b6cb0" : "#4a5568",
+            border: "none",
+            borderRadius: 6,
+            padding: "6px 12px",
+            fontSize: 14,
+            fontWeight: isActive ? 600 : 400,
+            cursor: "pointer",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            transition: "background 0.15s, color 0.15s",
+            ...style
+          },
+          children: [
+            icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: String(icon) }) : null,
+            text != null ? String(text) : null
+          ]
+        }
+      );
+    };
+    RoleGuard = ({ children, role, roles, fallback }) => {
+      const scope = useScope();
+      const allowed = (0, import_react7.useMemo)(() => {
+        const required = Array.isArray(roles) ? roles : role != null ? [String(role)] : [];
+        if (required.length === 0) return true;
+        const userRoles = scope.$user?.roles ?? [];
+        if (userRoles.length === 0) return false;
+        return required.some((r) => userRoles.includes(r));
+      }, [role, roles, scope.$user]);
+      if (!allowed) {
+        return fallback ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: fallback }) : null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
+    };
+  }
+});
+
+// src/player/atoms/composition.tsx
+var composition_exports = {};
+__export(composition_exports, {
+  ModuleOutlet: () => ModuleOutlet,
+  Slot: () => Slot,
+  SlotRegistryProvider: () => SlotRegistryProvider,
+  useSlotContributions: () => useSlotContributions
+});
+function useSlotContributions(name) {
+  const registry = (0, import_react8.useContext)(SlotRegistryContext);
+  return registry.get(name) ?? [];
+}
+var import_react8, import_jsx_runtime8, SlotRegistryContext, SlotRegistryProvider, Slot, ModuleOutlet;
+var init_composition = __esm({
+  "src/player/atoms/composition.tsx"() {
+    "use strict";
+    import_react8 = __toESM(require("react"));
+    import_jsx_runtime8 = require("react/jsx-runtime");
+    SlotRegistryContext = (0, import_react8.createContext)(/* @__PURE__ */ new Map());
+    SlotRegistryProvider = ({ contributions, children }) => {
+      const registry = (0, import_react8.useMemo)(() => {
+        const map = /* @__PURE__ */ new Map();
+        for (const c of contributions) {
+          const list = map.get(c.name) ?? [];
+          list.push(c);
+          map.set(c.name, list);
+        }
+        for (const [, list] of map) {
+          list.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+        }
+        return map;
+      }, [contributions]);
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SlotRegistryContext.Provider, { value: registry, children });
+    };
+    Slot = ({ children, name, fallback, className, style }) => {
+      const slotName = name ?? "";
+      const contributions = useSlotContributions(slotName);
+      const content = contributions.length > 0 ? contributions.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.default.Fragment, { children: c.tree }, i)) : children ?? fallback;
+      if (!content) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
+        {
+          className,
+          "data-slot": slotName,
+          style,
+          children: content
+        }
+      );
+    };
+    ModuleOutlet = ({ children, module: moduleName, basePath, className, style }) => {
+      const moduleKey = moduleName ?? "";
+      const contributions = useSlotContributions(`module:${moduleKey}`);
+      if (contributions.length > 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            className,
+            "data-module": moduleKey,
+            style,
+            children: contributions.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.default.Fragment, { children: c.tree }, i))
+          }
+        );
+      }
+      if (children) {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            className,
+            "data-module": moduleKey,
+            style,
+            children
+          }
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "div",
+        {
+          className,
+          "data-module": moduleKey,
+          style: {
+            padding: 16,
+            border: "1px dashed #cbd5e0",
+            borderRadius: 8,
+            color: "#a0aec0",
+            fontSize: 13,
+            textAlign: "center",
+            ...style
+          },
+          children: [
+            "Module: ",
+            String(moduleName ?? "unknown"),
+            basePath ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+              " (",
+              String(basePath),
+              ")"
+            ] }) : null
+          ]
+        }
+      );
+    };
+  }
+});
+
+// src/player/atoms/data.tsx
+var data_exports = {};
+__export(data_exports, {
+  DataGrid: () => DataGrid,
+  Table: () => Table
+});
+var import_react9, import_jsx_runtime9, Table, DataGrid;
+var init_data = __esm({
+  "src/player/atoms/data.tsx"() {
+    "use strict";
+    import_react9 = require("react");
+    import_jsx_runtime9 = require("react/jsx-runtime");
+    Table = ({ data, columns, rows, onRowClick, striped, compact, className, style }) => {
+      const items = Array.isArray(data ?? rows) ? data ?? rows : [];
+      const cols = Array.isArray(columns) ? columns.map(
+        (c) => typeof c === "string" ? { key: c, label: c, header: c } : c
+      ) : items.length > 0 ? Object.keys(items[0]).filter((k) => k !== "id" && !k.startsWith("_")).map((k) => ({ key: k, label: k, header: k })) : [];
+      const pad = compact ? "4px 8px" : "8px 12px";
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, style: { overflow: "auto", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 14 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { children: cols.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "th",
+          {
+            style: {
+              textAlign: "left",
+              padding: pad,
+              fontWeight: 600,
+              fontSize: 12,
+              color: "#718096",
+              borderBottom: "2px solid #e2e8f0",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: String(col.label ?? col.header ?? col.key ?? "")
+          },
+          String(col.key ?? i)
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tbody", { children: [
+          items.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "tr",
+            {
+              onClick: typeof onRowClick === "function" ? () => onRowClick(row) : void 0,
+              style: {
+                cursor: typeof onRowClick === "function" ? "pointer" : void 0,
+                background: striped && ri % 2 === 1 ? "#f7fafc" : void 0
+              },
+              children: cols.map((col, ci) => {
+                const val = row[col.key];
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "td",
+                  {
+                    style: { padding: pad, borderBottom: "1px solid #edf2f7" },
+                    children: val != null ? String(val) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#cbd5e0" }, children: "\u2014" })
+                  },
+                  String(col.key ?? ci)
+                );
+              })
+            },
+            String(row.id ?? ri)
+          )),
+          items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "td",
+            {
+              colSpan: cols.length,
+              style: { padding: "24px 12px", textAlign: "center", color: "#a0aec0", fontStyle: "italic" },
+              children: "No data"
+            }
+          ) }) : null
+        ] })
+      ] }) });
+    };
+    DataGrid = ({ data, columns, onRowClick, searchable, className, style, children }) => {
+      const [search, setSearch] = (0, import_react9.useState)("");
+      const items = Array.isArray(data) ? data : [];
+      const filtered = (0, import_react9.useMemo)(() => {
+        if (!search) return items;
+        const q = search.toLowerCase();
+        return items.filter(
+          (item) => Object.values(item).some((v) => v != null && String(v).toLowerCase().includes(q))
+        );
+      }, [items, search]);
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, style, children: [
+        searchable ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            style: {
+              padding: "6px 12px",
+              border: "1px solid #e2e8f0",
+              borderRadius: 6,
+              fontSize: 14,
+              width: "100%",
+              boxSizing: "border-box"
+            }
+          }
+        ) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Table, { data: filtered, columns, onRowClick, striped: true }),
+        children
+      ] });
+    };
+  }
+});
+
 // src/player/index.ts
 var player_exports = {};
 __export(player_exports, {
+  AtomRegistryImpl: () => AtomRegistryImpl,
   ComponentTreeRenderer: () => ComponentTreeRenderer,
+  DEFAULT_DESIGN_TOKENS: () => DEFAULT_DESIGN_TOKENS,
   DevPlayer: () => DevPlayer,
+  ExperienceRenderer: () => ExperienceRenderer,
+  PlayerProvider: () => PlayerProvider,
+  ScopeContext: () => ScopeContext,
+  SlotRegistryProvider: () => SlotRegistryProvider,
+  buildActionScope: () => buildActionScope,
+  buildEvalContext: () => buildEvalContext,
+  buildLoopScope: () => buildLoopScope,
+  buildScope: () => buildScope,
   builtinAtoms: () => builtinAtoms,
-  containsExpression: () => containsExpression,
+  builtinFunctions: () => builtinFunctions,
+  classifyBinding: () => classifyBinding,
+  createApiResolver: () => createApiResolver,
+  createCoreAtomRegistry: () => createCoreAtomRegistry,
   evaluateExpression: () => evaluateExpression,
-  evaluateProp: () => evaluateProp
+  mergeRegistries: () => mergeRegistries,
+  mergeScope: () => mergeScope,
+  resolveAllBindings: () => resolveAllBindings,
+  resolveBinding: () => resolveBinding,
+  setWasmModule: () => setWasmModule,
+  usePlayerContext: () => usePlayerContext,
+  usePlayerRouter: () => usePlayerRouter,
+  useScope: () => useScope,
+  useSlotContributions: () => useSlotContributions,
+  useTheme: () => useTheme
 });
 module.exports = __toCommonJS(player_exports);
 
-// src/player/ComponentTreeRenderer.tsx
-var import_react = __toESM(require("react"));
+// src/player/ExperienceRenderer.tsx
+var import_react12 = __toESM(require("react"));
+init_scope_builder();
 
-// src/player/evaluator.ts
-var EXPR_PATTERN = /\{\{(.+?)\}\}/g;
-function containsExpression(value) {
-  return typeof value === "string" && EXPR_PATTERN.test(value);
+// src/player/binding-resolver.ts
+init_expression_engine();
+function classifyBinding(expr) {
+  const t = expr.trim();
+  const type = classifyExpression(t);
+  switch (type) {
+    case "literal":
+      return { type, value: parseLiteralValue(t) };
+    case "path": {
+      const dotIdx = t.indexOf(".");
+      if (dotIdx === -1) return { type, root: t, rest: "" };
+      return { type, root: t.slice(0, dotIdx), rest: t.slice(dotIdx + 1) };
+    }
+    case "function": {
+      const fnCall = parseFunctionCall(t);
+      if (fnCall) return { type, name: fnCall.name, rawArgs: fnCall.args };
+      return { type, expression: t };
+    }
+    case "action": {
+      const fnCall = parseFunctionCall(t);
+      if (fnCall) return { type, name: fnCall.name, rawArgs: fnCall.args };
+      if (t.startsWith("$action.")) return { type, name: t.slice("$action.".length), rawArgs: [] };
+      return { type, expression: t };
+    }
+    case "condition":
+      if (t.startsWith("$expr(") && t.endsWith(")")) return { type, expression: t.slice(6, -1) };
+      return { type, expression: t };
+  }
 }
-function 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];
+function parseLiteralValue(t) {
+  if (t === "[Expression]" || t.includes("[Expression]")) return void 0;
+  if (t.startsWith('"') && t.endsWith('"') || t.startsWith("'") && t.endsWith("'")) return t.slice(1, -1);
+  if (/^-?\d+(\.\d+)?$/.test(t)) return Number(t);
+  if (t === "true") return true;
+  if (t === "false") return false;
+  if (t === "null") return null;
+  return void 0;
+}
+function parseFunctionCall(expr) {
+  const match = expr.match(/^\$(fn|action)\.(\w+)\((.*)\)$/s);
+  if (!match) return null;
+  const [, namespace, name, argsStr] = match;
+  const args = argsStr.trim() ? splitArgs(argsStr.trim()) : [];
+  return { namespace, name, args };
+}
+function splitArgs(argsStr) {
+  const args = [];
+  let current = "";
+  let depth = 0;
+  let inString = null;
+  for (let i = 0; i < argsStr.length; i++) {
+    const ch = argsStr[i];
+    if (inString) {
+      current += ch;
+      if (ch === inString && argsStr[i - 1] !== "\\") inString = null;
+    } else if (ch === '"' || ch === "'") {
+      current += ch;
+      inString = ch;
+    } else if (ch === "(" || ch === "[") {
+      current += ch;
+      depth++;
+    } else if (ch === ")" || ch === "]") {
+      current += ch;
+      depth--;
+    } else if (ch === "," && depth === 0) {
+      args.push(current.trim());
+      current = "";
+    } else {
+      current += ch;
+    }
   }
-  return current;
+  if (current.trim()) args.push(current.trim());
+  return args;
 }
-function evaluateExpression(expr, scopes) {
-  const trimmed = expr.trim();
-  if (trimmed.startsWith("'") && trimmed.endsWith("'") || trimmed.startsWith('"') && trimmed.endsWith('"')) {
-    return trimmed.slice(1, -1);
+function resolveBinding(expr, scope) {
+  const binding = classifyBinding(expr);
+  switch (binding.type) {
+    case "literal":
+      return binding.value;
+    case "path":
+      return resolveScopedPath(binding.root, binding.rest, scope);
+    case "function":
+      return resolveFunction(binding.name, binding.rawArgs, scope);
+    case "action":
+      return resolveAction(binding.name, binding.rawArgs, scope);
+    case "condition":
+      return resolveCondition(binding.expression ?? expr, scope);
+    default:
+      return void 0;
+  }
+}
+function resolveAllBindings(bindings, scope) {
+  const resolved = {};
+  for (const [propName, expr] of Object.entries(bindings)) {
+    try {
+      resolved[propName] = resolveBinding(expr, scope);
+    } catch {
+      resolved[propName] = void 0;
+    }
+  }
+  return resolved;
+}
+function resolveScopedPath(root, rest, scope) {
+  let rootValue;
+  switch (root) {
+    case "$instance":
+      rootValue = scope.$instance;
+      break;
+    case "$instances":
+      rootValue = scope.$instances;
+      break;
+    case "$definition":
+      rootValue = scope.$definition;
+      break;
+    case "$pagination":
+      rootValue = scope.$pagination;
+      break;
+    case "$entity":
+      rootValue = scope.$entity;
+      break;
+    case "$local":
+      rootValue = scope.$local;
+      break;
+    case "$user":
+      rootValue = scope.$user;
+      break;
+    case "$action":
+      rootValue = scope.$action;
+      break;
+    case "$fn":
+      rootValue = scope.$fn;
+      break;
+    case "$item":
+      rootValue = scope.$item;
+      break;
+    case "$index":
+      rootValue = scope.$index;
+      break;
+    default:
+      rootValue = scope[root];
+      if (rootValue === void 0) {
+        rootValue = scope.$item;
+        if (rootValue != null && rest) {
+          return resolvePath(`${root}.${rest}`, { [root]: scope.$item });
+        }
+      }
+  }
+  if (!rest) return rootValue;
+  if (rootValue == null) return void 0;
+  return resolvePath(rest, rootValue);
+}
+function resolveFunction(name, rawArgs, scope) {
+  const fn = scope.$fn?.[name] ?? builtinFunctions[name];
+  if (typeof fn !== "function") {
+    console.warn(`[binding-resolver] Unknown function: $fn.${name}`);
+    return void 0;
+  }
+  const resolvedArgs = rawArgs.map((arg) => resolveBinding(arg.trim(), scope));
+  try {
+    return fn(...resolvedArgs);
+  } catch (err) {
+    console.warn(`[binding-resolver] Error calling $fn.${name}:`, err);
+    return void 0;
+  }
+}
+function resolveAction(name, rawArgs, scope) {
+  const actions = scope.$action;
+  if (!actions) return void 0;
+  if (rawArgs.length === 0) {
+    const actionFn2 = actions[name];
+    if (typeof actionFn2 === "function") return actionFn2;
+    return void 0;
+  }
+  const actionFn = actions[name];
+  if (typeof actionFn !== "function") return void 0;
+  return (...callArgs) => {
+    const resolvedArgs = rawArgs.map((arg) => resolveBinding(arg.trim(), scope));
+    return actionFn(...resolvedArgs, ...callArgs);
+  };
+}
+function resolveCondition(expression, scope) {
+  const context = buildEvalContext(scope);
+  return evaluateExpression(expression, context);
+}
+function buildEvalContext(scope) {
+  const ctx = {};
+  ctx.$instance = scope.$instance;
+  ctx.$instances = scope.$instances;
+  ctx.$definition = scope.$definition;
+  ctx.$pagination = scope.$pagination;
+  ctx.$entity = scope.$entity;
+  ctx.$local = scope.$local;
+  ctx.$user = scope.$user;
+  ctx.$action = scope.$action;
+  ctx.$fn = scope.$fn;
+  ctx.$item = scope.$item;
+  ctx.$index = scope.$index;
+  if (scope.$instances) ctx.items = scope.$instances;
+  if (scope.$instance) {
+    ctx.instance = scope.$instance;
+    ctx.loading = false;
+  }
+  if (scope.$item) ctx.item = scope.$item;
+  if (scope.$index != null) ctx.index = scope.$index;
+  if (scope.state_data) ctx.state_data = scope.state_data;
+  if (scope.memory) ctx.memory = scope.memory;
+  if (scope.context) ctx.context = scope.context;
+  return ctx;
+}
+function buildActionScope(opts) {
+  const { resolver, instanceId, slug, setLocal, router, toast, refreshQuery, onEvent } = opts;
+  return {
+    transition: async (name, id, data) => {
+      const targetId = id ?? instanceId;
+      if (!targetId) {
+        console.warn("[action] transition called without instanceId");
+        return;
+      }
+      await resolver.transition(targetId, name, data);
+      refreshQuery?.();
+    },
+    create: async (targetSlug, data) => {
+      const id = await resolver.create(targetSlug || slug || "", data);
+      refreshQuery?.();
+      return id;
+    },
+    update: async (id, fields) => {
+      await resolver.update(id, fields);
+      refreshQuery?.();
+    },
+    remove: async (id) => {
+      await resolver.remove(id);
+      refreshQuery?.();
+    },
+    setLocal: (key, value) => {
+      setLocal(key, value);
+    },
+    navigate: (path) => {
+      router?.push(path);
+    },
+    toast: (message, variant) => {
+      toast?.(message, variant);
+    },
+    refreshQuery: (dataSourceName) => {
+      refreshQuery?.(dataSourceName);
+    },
+    scrollTo: (elementId) => {
+      if (typeof document !== "undefined") {
+        const el = document.getElementById(elementId);
+        el?.scrollIntoView({ behavior: "smooth" });
+      }
+    },
+    openModal: (modalId) => {
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("player:open_modal", { detail: { id: modalId } }));
+      }
+    },
+    closeModal: (modalId) => {
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("player:close_modal", { detail: { id: modalId } }));
+      }
+    },
+    emit: (event, payload) => {
+      onEvent?.(event, payload);
+    }
+  };
+}
+
+// src/player/ExperienceRenderer.tsx
+init_expression_engine();
+
+// src/player/PlayerProvider.tsx
+var import_react11 = require("react");
+
+// src/hooks/useQuery.ts
+var import_react2 = require("react");
+var _globalResolver = null;
+function setQueryResolver(resolver) {
+  _globalResolver = resolver;
+}
+
+// src/hooks/useMutation.ts
+var import_react3 = require("react");
+var _globalMutationResolver = null;
+function setMutationResolver(resolver) {
+  _globalMutationResolver = resolver;
+}
+
+// src/player/atom-registry.ts
+var import_react10 = __toESM(require("react"));
+function namedExport(loader, exportName) {
+  return () => loader().then((mod) => ({ default: mod[exportName] }));
+}
+var AtomRegistryImpl = class _AtomRegistryImpl {
+  loaders = /* @__PURE__ */ new Map();
+  lazyCache = /* @__PURE__ */ new Map();
+  eagerCache = /* @__PURE__ */ new Map();
+  register(name, loader) {
+    this.loaders.set(name, loader);
+    this.lazyCache.delete(name);
+  }
+  registerEager(name, component) {
+    this.eagerCache.set(name, component);
+  }
+  resolve(name) {
+    const eager = this.eagerCache.get(name);
+    if (eager) {
+      const cached2 = this.lazyCache.get(name);
+      if (cached2) return cached2;
+      const lazy2 = import_react10.default.lazy(() => Promise.resolve({ default: eager }));
+      this.lazyCache.set(name, lazy2);
+      return lazy2;
+    }
+    const cached = this.lazyCache.get(name);
+    if (cached) return cached;
+    const loader = this.loaders.get(name);
+    if (!loader) return null;
+    const lazy = import_react10.default.lazy(loader);
+    this.lazyCache.set(name, lazy);
+    return lazy;
+  }
+  resolveSync(name) {
+    return this.eagerCache.get(name) ?? null;
+  }
+  has(name) {
+    return this.loaders.has(name) || this.eagerCache.has(name);
+  }
+  list() {
+    const names = /* @__PURE__ */ new Set();
+    for (const k of this.loaders.keys()) names.add(k);
+    for (const k of this.eagerCache.keys()) names.add(k);
+    return Array.from(names).sort();
+  }
+  merge(other) {
+    const merged = new _AtomRegistryImpl();
+    for (const [name, loader] of this.loaders) merged.loaders.set(name, loader);
+    for (const [name, comp] of this.eagerCache) merged.eagerCache.set(name, comp);
+    for (const name of other.list()) {
+      const otherImpl = other;
+      if (otherImpl.loaders?.has(name)) {
+        merged.loaders.set(name, otherImpl.loaders.get(name));
+      }
+      if (otherImpl.eagerCache?.has(name)) {
+        merged.eagerCache.set(name, otherImpl.eagerCache.get(name));
+      }
+    }
+    return merged;
+  }
+  toRecord() {
+    const record = {};
+    for (const name of this.eagerCache.keys()) {
+      record[name] = this.eagerCache.get(name);
+    }
+    return record;
+  }
+};
+function createCoreAtomRegistry() {
+  const registry = new AtomRegistryImpl();
+  registry.register("Stack", namedExport(() => Promise.resolve().then(() => (init_layout(), layout_exports)), "Stack"));
+  registry.register("Row", namedExport(() => Promise.resolve().then(() => (init_layout(), layout_exports)), "Row"));
+  registry.register("Grid", namedExport(() => Promise.resolve().then(() => (init_layout(), layout_exports)), "Grid"));
+  registry.register("Column", namedExport(() => Promise.resolve().then(() => (init_layout(), layout_exports)), "Column"));
+  registry.register("Divider", namedExport(() => Promise.resolve().then(() => (init_layout(), layout_exports)), "Divider"));
+  registry.register("Spacer", namedExport(() => Promise.resolve().then(() => (init_layout(), layout_exports)), "Spacer"));
+  registry.register("Text", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "Text"));
+  registry.register("Heading", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "Heading"));
+  registry.register("Field", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "Field"));
+  registry.register("Image", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "Image"));
+  registry.register("Badge", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "Badge"));
+  registry.register("Icon", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "Icon"));
+  registry.register("Button", namedExport(() => Promise.resolve().then(() => (init_actions(), actions_exports)), "Button"));
+  registry.register("Link", namedExport(() => Promise.resolve().then(() => (init_actions(), actions_exports)), "Link"));
+  registry.register("Show", namedExport(() => Promise.resolve().then(() => (init_control_flow(), control_flow_exports)), "Show"));
+  registry.register("Each", namedExport(() => Promise.resolve().then(() => (init_control_flow(), control_flow_exports)), "Each"));
+  registry.register("TextInput", namedExport(() => Promise.resolve().then(() => (init_input(), input_exports)), "TextInput"));
+  registry.register("Input", namedExport(() => Promise.resolve().then(() => (init_input(), input_exports)), "TextInput"));
+  registry.register("Select", namedExport(() => Promise.resolve().then(() => (init_input(), input_exports)), "Select"));
+  registry.register("Toggle", namedExport(() => Promise.resolve().then(() => (init_input(), input_exports)), "Toggle"));
+  registry.register("Slider", namedExport(() => Promise.resolve().then(() => (init_input(), input_exports)), "Slider"));
+  registry.register("Card", namedExport(() => Promise.resolve().then(() => (init_grouping(), grouping_exports)), "Card"));
+  registry.register("Section", namedExport(() => Promise.resolve().then(() => (init_grouping(), grouping_exports)), "Section"));
+  registry.register("Tabs", namedExport(() => Promise.resolve().then(() => (init_grouping(), grouping_exports)), "Tabs"));
+  registry.register("Accordion", namedExport(() => Promise.resolve().then(() => (init_grouping(), grouping_exports)), "Accordion"));
+  registry.register("Modal", namedExport(() => Promise.resolve().then(() => (init_grouping(), grouping_exports)), "Modal"));
+  registry.register("Router", namedExport(() => Promise.resolve().then(() => (init_navigation(), navigation_exports)), "Router"));
+  registry.register("Route", namedExport(() => Promise.resolve().then(() => (init_navigation(), navigation_exports)), "Route"));
+  registry.register("NavLink", namedExport(() => Promise.resolve().then(() => (init_navigation(), navigation_exports)), "NavLink"));
+  registry.register("RoleGuard", namedExport(() => Promise.resolve().then(() => (init_navigation(), navigation_exports)), "RoleGuard"));
+  registry.register("Slot", namedExport(() => Promise.resolve().then(() => (init_composition(), composition_exports)), "Slot"));
+  registry.register("ModuleOutlet", namedExport(() => Promise.resolve().then(() => (init_composition(), composition_exports)), "ModuleOutlet"));
+  registry.register("Markdown", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "Markdown"));
+  registry.register("ScrollArea", namedExport(() => Promise.resolve().then(() => (init_grouping(), grouping_exports)), "ScrollArea"));
+  registry.register("Table", namedExport(() => Promise.resolve().then(() => (init_data(), data_exports)), "Table"));
+  registry.register("DataGrid", namedExport(() => Promise.resolve().then(() => (init_data(), data_exports)), "DataGrid"));
+  registry.register("Alert", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "Alert"));
+  registry.register("EmptyState", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "EmptyState"));
+  registry.register("Progress", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "Progress"));
+  registry.register("Separator", namedExport(() => Promise.resolve().then(() => (init_content(), content_exports)), "Separator"));
+  return registry;
+}
+function mergeRegistries(...registries) {
+  let merged = new AtomRegistryImpl();
+  for (const r of registries) {
+    merged = merged.merge(r);
+  }
+  return merged;
+}
+
+// src/player/theme.ts
+var DEFAULT_DESIGN_TOKENS = {
+  // Colors
+  "token:primary": "#3182ce",
+  "token:primary-hover": "#2b6cb0",
+  "token:primary-light": "#ebf8ff",
+  "token:secondary": "#718096",
+  "token:secondary-hover": "#4a5568",
+  "token:accent": "#805ad5",
+  "token:success": "#38a169",
+  "token:warning": "#dd6b20",
+  "token:error": "#e53e3e",
+  "token:info": "#3182ce",
+  // Surfaces
+  "token:surface": "#ffffff",
+  "token:surface-hover": "#f7fafc",
+  "token:surface-secondary": "#edf2f7",
+  "token:background": "#f7fafc",
+  "token:card": "#ffffff",
+  "token:overlay": "rgba(0, 0, 0, 0.4)",
+  // Borders
+  "token:border": "#e2e8f0",
+  "token:border-light": "#edf2f7",
+  "token:border-focus": "#3182ce",
+  // Text
+  "token:text": "#1a202c",
+  "token:text-secondary": "#718096",
+  "token:text-muted": "#a0aec0",
+  "token:text-inverse": "#ffffff",
+  "token:text-link": "#3182ce",
+  // Shadows
+  "token:shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.05)",
+  "token:shadow": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
+  "token:shadow-md": "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)",
+  "token:shadow-lg": "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)",
+  // Spacing
+  "token:spacing-xs": "4px",
+  "token:spacing-sm": "8px",
+  "token:spacing-md": "16px",
+  "token:spacing-lg": "24px",
+  "token:spacing-xl": "32px",
+  // Radius
+  "token:radius-sm": "4px",
+  "token:radius": "6px",
+  "token:radius-md": "8px",
+  "token:radius-lg": "12px",
+  "token:radius-full": "9999px"
+};
+
+// src/player/PlayerProvider.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PlayerContext = (0, import_react11.createContext)(null);
+function usePlayerContext() {
+  return (0, import_react11.useContext)(PlayerContext);
+}
+var ThemeContext = (0, import_react11.createContext)(DEFAULT_DESIGN_TOKENS);
+function useTheme() {
+  return (0, import_react11.useContext)(ThemeContext);
+}
+var PlayerProvider = ({
+  resolver,
+  atomRegistry: userAtomRegistry,
+  auth,
+  router,
+  toast,
+  onEvent,
+  theme: userTheme,
+  children
+}) => {
+  const atomRegistry = (0, import_react11.useMemo)(
+    () => userAtomRegistry ?? createCoreAtomRegistry(),
+    [userAtomRegistry]
+  );
+  const mergedTheme = (0, import_react11.useMemo)(
+    () => userTheme ? { ...DEFAULT_DESIGN_TOKENS, ...userTheme } : DEFAULT_DESIGN_TOKENS,
+    [userTheme]
+  );
+  const resolverRef = (0, import_react11.useRef)(resolver);
+  resolverRef.current = resolver;
+  (0, import_react11.useEffect)(() => {
+    if (!resolver) return;
+    setQueryResolver({
+      query: async (_slug, params) => {
+        const r = resolverRef.current;
+        if (!r) return { data: [] };
+        const result = await r.query(_slug, {
+          state: params.state,
+          filter: params.filter,
+          limit: params.limit,
+          offset: params.offset,
+          search: params.search,
+          searchFields: params.searchFields,
+          sort: params.sort
+        });
+        return { data: result.data, total: result.total };
+      }
+    });
+    setMutationResolver({
+      create: async (_slug, input) => {
+        const r = resolverRef.current;
+        if (!r) throw new Error("No resolver");
+        return r.create(_slug, input);
+      },
+      update: async (_slug, instanceId, fields) => {
+        const r = resolverRef.current;
+        if (!r) throw new Error("No resolver");
+        await r.update(instanceId, fields);
+      },
+      transition: async (_slug, instanceId, transitionName, input) => {
+        const r = resolverRef.current;
+        if (!r) throw new Error("No resolver");
+        await r.transition(instanceId, transitionName, input);
+      },
+      remove: async (_slug, instanceId) => {
+        const r = resolverRef.current;
+        if (!r) throw new Error("No resolver");
+        await r.remove(instanceId);
+      }
+    });
+    return () => {
+      setQueryResolver(null);
+      setMutationResolver(null);
+    };
+  }, [resolver]);
+  const value = (0, import_react11.useMemo)(() => ({
+    resolver: resolver ?? null,
+    atomRegistry,
+    auth,
+    router,
+    toast,
+    onEvent
+  }), [resolver, atomRegistry, auth, router, toast, onEvent]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PlayerContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThemeContext.Provider, { value: mergedTheme, children }) });
+};
+
+// src/player/ExperienceRenderer.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var NodeErrorBoundary = class extends import_react12.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, info) {
+    console.error(`[ExperienceRenderer] Error in node ${this.props.nodeId}:`, error, info);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { padding: 8, background: "#fff5f5", border: "1px solid #fed7d7", borderRadius: 6, fontSize: 12, color: "#c53030" }, children: [
+        "Error: ",
+        this.state.error?.message ?? "Render failed"
+      ] });
+    }
+    return this.props.children;
+  }
+};
+function useDataSources(dataSources, resolver, scope) {
+  const [results, setResults] = (0, import_react12.useState)({});
+  const mountedRef = (0, import_react12.useRef)(true);
+  (0, import_react12.useEffect)(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    if (!dataSources?.length || !resolver) return;
+    const loading = {};
+    for (const ds of dataSources) {
+      loading[ds.name] = { loading: true, error: null };
+    }
+    setResults(loading);
+    const fetchAll = async () => {
+      const entries = await Promise.all(
+        dataSources.map(async (ds) => {
+          try {
+            const result = await fetchDataSource(ds, resolver, scope);
+            return [ds.name, result];
+          } catch (err) {
+            return [ds.name, { loading: false, error: err instanceof Error ? err : new Error(String(err)) }];
+          }
+        })
+      );
+      if (mountedRef.current) {
+        setResults(Object.fromEntries(entries));
+      }
+    };
+    fetchAll();
+  }, [dataSources, resolver]);
+  return results;
+}
+async function fetchDataSource(ds, resolver, scope) {
+  switch (ds.type) {
+    case "workflow": {
+      const slug = ds.slug ?? "";
+      if (!slug) return { loading: false, error: new Error("workflow dataSource missing slug") };
+      const queryResult = await resolver.query(slug, {
+        state: ds.filter?.current_state,
+        filter: ds.filter,
+        limit: ds.pageSize ?? 20,
+        page: scope.$local?.[ds.pageKey ?? "page"] ?? 1,
+        search: ds.search ? interpolateTemplate(ds.search, scope) : void 0,
+        searchFields: ds.searchFields,
+        sort: ds.sort,
+        facets: ds.facets,
+        entity: ds.entity,
+        includeDefinition: ds.includeDefinition,
+        parentInstanceId: ds.parentInstanceId ? interpolateTemplate(ds.parentInstanceId, scope) : void 0
+      });
+      const result = {
+        instances: queryResult.data,
+        loading: false,
+        error: null
+      };
+      if (queryResult.data.length === 1 && ds.query !== "list") {
+        result.instance = queryResult.data[0];
+      }
+      if (queryResult.definition) result.definition = queryResult.definition;
+      if (queryResult.total != null) {
+        result.pagination = {
+          total: queryResult.total,
+          page: queryResult.page,
+          pageSize: queryResult.pageSize
+        };
+      }
+      if (queryResult.facets) result.facets = queryResult.facets;
+      if (queryResult.aggregates) result.aggregates = queryResult.aggregates;
+      if (ds.autoStart && queryResult.data.length === 0) {
+        try {
+          const id = await resolver.create(slug, ds.initialData);
+          const instance = await resolver.getInstance(id);
+          result.instance = instance;
+          result.instances = [instance];
+        } catch {
+        }
+      }
+      return result;
+    }
+    case "api": {
+      if (!resolver.fetch) return { loading: false, error: new Error("API datasource: resolver.fetch not implemented") };
+      const endpoint = interpolateTemplate(ds.endpoint, scope);
+      const raw = await resolver.fetch(endpoint, {
+        method: ds.method,
+        body: ds.body,
+        headers: ds.headers
+      });
+      const mapped = mapApiResponse(raw, ds.mapping);
+      return { instances: mapped.items, loading: false, error: null, pagination: mapped.pagination };
+    }
+    case "static": {
+      const data = ds.data;
+      if (Array.isArray(data)) {
+        return {
+          instances: data.map((d, i) => ({
+            id: String(d.id ?? i),
+            state: "static",
+            fields: d
+          })),
+          loading: false,
+          error: null
+        };
+      }
+      return {
+        instance: { id: "static", state: "static", fields: data },
+        loading: false,
+        error: null
+      };
+    }
+    case "ref": {
+      const ctx = buildEvalContext(scope);
+      const resolved = evaluateExpression(ds.expression, ctx);
+      if (Array.isArray(resolved)) {
+        return {
+          instances: resolved.map((item, i) => ({
+            id: String(item?.id ?? i),
+            state: String(item?.state ?? "ref"),
+            fields: item && typeof item === "object" ? item : { value: item }
+          })),
+          loading: false,
+          error: null
+        };
+      }
+      if (resolved != null && typeof resolved === "object") {
+        const obj = resolved;
+        return {
+          instance: {
+            id: String(obj.id ?? "ref"),
+            state: String(obj.state ?? "ref"),
+            fields: obj
+          },
+          loading: false,
+          error: null
+        };
+      }
+      return { loading: false, error: null };
+    }
+    default:
+      return { loading: false, error: new Error(`Unknown dataSource type: ${ds.type}`) };
+  }
+}
+function interpolateTemplate(template, scope) {
+  return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_, path) => {
+    const val = resolveBinding(`$${path}`, scope) ?? resolveBinding(path, scope);
+    return val != null ? String(val) : "";
+  });
+}
+function mapApiResponse(raw, mapping) {
+  if (!raw || typeof raw !== "object") return { items: [] };
+  const obj = raw;
+  let items;
+  if (mapping?.items || mapping?.data) {
+    items = obj[mapping.items ?? mapping.data ?? "data"] ?? [];
+  } else if (Array.isArray(raw)) {
+    items = raw;
+  } else if (Array.isArray(obj.data)) {
+    items = obj.data;
+  } else if (Array.isArray(obj.items)) {
+    items = obj.items;
+  } else {
+    items = [raw];
+  }
+  const result = items.map((item, i) => ({
+    id: String(item?.id ?? i),
+    state: String(item?.state ?? "unknown"),
+    fields: item ?? {}
+  }));
+  let pagination;
+  const total = mapping?.total ? obj[mapping.total] : obj.total;
+  if (total != null) {
+    pagination = { total: Number(total), page: Number(obj.page ?? 1), pageSize: Number(obj.pageSize ?? items.length) };
+  }
+  return { items: result, pagination };
+}
+function resolveTokens(value, tokens) {
+  if (typeof value === "string" && value.startsWith("token:")) {
+    return tokens[value] ?? value;
+  }
+  if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+    const resolved = {};
+    for (const [k, v] of Object.entries(value)) {
+      resolved[k] = resolveTokens(v, tokens);
+    }
+    return resolved;
+  }
+  return value;
+}
+var NodeRenderer = ({ node, fallback }) => {
+  const parentScope = useScope();
+  const playerCtx = usePlayerContext();
+  const resolver = playerCtx?.resolver ?? null;
+  const atomRegistry = playerCtx?.atomRegistry;
+  const themeTokens = useTheme();
+  const localDefaults = node.config?.localDefaults ?? {};
+  const [localState, setLocalState] = (0, import_react12.useState)(() => ({
+    ...localDefaults
+  }));
+  const handleSetLocal = (0, import_react12.useCallback)((key, value) => {
+    setLocalState((prev) => ({ ...prev, [key]: value }));
+  }, []);
+  const [, setFetchVersion] = (0, import_react12.useState)(0);
+  const handleRefreshQuery = (0, import_react12.useCallback)(() => {
+    setFetchVersion((v) => v + 1);
+  }, []);
+  const dsResults = useDataSources(node.dataSources, resolver, parentScope);
+  const primaryInstance = Object.values(dsResults).find((r) => r.instance)?.instance;
+  const primarySlug = node.dataSources?.find((ds) => ds.type === "workflow")?.slug;
+  const actionScope = (0, import_react12.useMemo)(() => {
+    if (!resolver) {
+      return {
+        transition: async () => {
+        },
+        create: async () => "",
+        update: async () => {
+        },
+        remove: async () => {
+        },
+        setLocal: handleSetLocal,
+        navigate: () => {
+        },
+        toast: () => {
+        },
+        refreshQuery: handleRefreshQuery,
+        scrollTo: () => {
+        },
+        openModal: () => {
+        },
+        closeModal: () => {
+        },
+        emit: () => {
+        }
+      };
+    }
+    return buildActionScope({
+      resolver,
+      instanceId: primaryInstance?.id,
+      slug: primarySlug,
+      setLocal: handleSetLocal,
+      router: playerCtx?.router,
+      toast: playerCtx?.toast,
+      refreshQuery: handleRefreshQuery,
+      onEvent: playerCtx?.onEvent
+    });
+  }, [resolver, primaryInstance?.id, primarySlug, handleSetLocal, handleRefreshQuery, playerCtx]);
+  const scope = (0, import_react12.useMemo)(() => buildScope({
+    dataSources: dsResults,
+    localState,
+    auth: playerCtx?.auth,
+    entity: node.dataSources?.find((ds) => ds.type === "workflow")?.entity,
+    parentScope,
+    actionScope
+  }), [dsResults, localState, parentScope, actionScope, playerCtx?.auth]);
+  const enrichedScope = (0, import_react12.useMemo)(() => {
+    const handleCreate = () => {
+      if (primarySlug && resolver) {
+        resolver.create(primarySlug).then(() => handleRefreshQuery());
+      }
+    };
+    const setSearch = (e) => {
+      const val = typeof e === "object" && e !== null && "target" in e ? e.target.value : String(e ?? "");
+      handleSetLocal("search", val);
+    };
+    const enrichedAction = {
+      ...scope.$action,
+      handleCreate,
+      setSearch
+    };
+    const enrichedInstance = scope.$instance ? { ...scope.$instance, handleCreate, setSearch } : void 0;
+    return {
+      ...scope,
+      $action: enrichedAction,
+      $instance: enrichedInstance,
+      // Also add at top-level for direct access
+      handleCreate,
+      setSearch
+    };
+  }, [scope, primarySlug, resolver, handleRefreshQuery, handleSetLocal]);
+  if (node.visible_when) {
+    const ctx = buildEvalContext(enrichedScope);
+    const visible = evaluateExpression(node.visible_when, ctx);
+    if (!visible) return null;
   }
-  if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
-    return Number(trimmed);
+  if (node.$if) {
+    const ctx = buildEvalContext(enrichedScope);
+    const visible = evaluateExpression(node.$if, ctx);
+    if (!visible) return null;
+  }
+  const resolvedBindings = node.bindings ? resolveAllBindings(node.bindings, enrichedScope) : {};
+  const config = node.config ?? node.props ?? {};
+  const rawMerged = { ...config, ...resolvedBindings };
+  const mergedProps = {};
+  for (const [k, v] of Object.entries(rawMerged)) {
+    mergedProps[k] = resolveTokens(v, themeTokens);
+  }
+  if (node.className) mergedProps.className = node.className;
+  if (node.id) mergedProps["data-node-id"] = node.id;
+  const loadingAny = Object.values(dsResults).some((r) => r.loading);
+  if (Object.keys(dsResults).length > 0) {
+    mergedProps.loading = loadingAny;
+    const firstResult = Object.values(dsResults)[0];
+    if (firstResult?.instances) mergedProps.data = firstResult.instances;
+    if (firstResult?.instance) mergedProps.instance = firstResult.instance;
+    if (firstResult?.pagination) mergedProps.pagination = firstResult.pagination;
+    if (firstResult?.definition) mergedProps.definition = firstResult.definition;
+  }
+  const componentName = node.component ?? node.type ?? "";
+  let AtomComponent = null;
+  if (atomRegistry) {
+    const lazy = atomRegistry.resolve(componentName);
+    if (lazy) AtomComponent = lazy;
+  }
+  if (!AtomComponent) {
+    if (!componentName && node.children?.length) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScopeContext.Provider, { value: enrichedScope, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: node.className, style: node.style, children: node.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeErrorBoundary, { nodeId: child.id, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeRenderer, { node: child, fallback }) }, child.id ?? i)) }) });
+    }
+    if (componentName) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { border: "1px dashed #e53e3e", borderRadius: 6, padding: "8px 12px", margin: 4, fontSize: 13, color: "#e53e3e", background: "#fff5f5" }, children: [
+        "Unknown: ",
+        componentName
+      ] });
+    }
+    return null;
   }
-  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);
+  let children = null;
+  if (node.children?.length) {
+    children = node.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeErrorBoundary, { nodeId: child.id, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeRenderer, { node: child, fallback }) }, child.id ?? i));
+  }
+  if (!children && mergedProps.children != null) {
+    children = mergedProps.children;
+    delete mergedProps.children;
   }
-  if (scopes.context && typeof scopes.context === "object") {
-    Object.assign(flatScope, scopes.context);
+  delete mergedProps.localDefaults;
+  delete mergedProps.dataSources;
+  delete mergedProps.bindings;
+  delete mergedProps.visible_when;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScopeContext.Provider, { value: enrichedScope, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeErrorBoundary, { nodeId: node.id, fallback, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react12.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { padding: 8, color: "#a0aec0", fontSize: 13 }, children: [
+    "Loading ",
+    componentName,
+    "..."
+  ] }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AtomComponent, { ...mergedProps, children }) }) }) });
+};
+var ExperienceRenderer = ({
+  tree,
+  initialScope,
+  entity,
+  fallback,
+  className
+}) => {
+  const playerCtx = usePlayerContext();
+  const nodes = Array.isArray(tree) ? tree : [tree];
+  const rootScope = (0, import_react12.useMemo)(() => buildScope({
+    auth: playerCtx?.auth ?? initialScope?.auth,
+    entity,
+    localState: initialScope?.$local ?? {},
+    actionScope: initialScope?.$action ?? {
+      transition: async () => {
+      },
+      create: async () => "",
+      update: async () => {
+      },
+      remove: async () => {
+      },
+      setLocal: () => {
+      },
+      navigate: () => {
+      },
+      toast: () => {
+      },
+      refreshQuery: () => {
+      },
+      scrollTo: () => {
+      },
+      openModal: () => {
+      },
+      closeModal: () => {
+      },
+      emit: () => {
+      }
+    }
+  }), [playerCtx?.auth, entity, initialScope]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScopeContext.Provider, { value: rootScope, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className, children: nodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeErrorBoundary, { nodeId: node.id, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeRenderer, { node, fallback }) }, node.id ?? i)) }) });
+};
+
+// src/player/resolver.ts
+function getToken(token) {
+  if (!token) return null;
+  if (typeof token === "function") return token();
+  return token;
+}
+function normalizeInstance(raw) {
+  return {
+    id: String(raw.id ?? ""),
+    state: String(raw.current_state ?? raw.state ?? "unknown"),
+    fields: raw.state_data ?? raw.fields ?? {},
+    slug: raw.definition_slug,
+    created_at: raw.created_at,
+    updated_at: raw.updated_at,
+    ...raw
+  };
+}
+function createApiResolver(config) {
+  const { baseUrl, defaults } = config;
+  const fetchFn = config.fetch ?? globalThis.fetch.bind(globalThis);
+  const defCache = /* @__PURE__ */ new Map();
+  async function apiRequest(path, options = {}) {
+    const tok = getToken(config.token);
+    const headers = {
+      "Content-Type": "application/json",
+      ...options.headers ?? {}
+    };
+    if (tok) headers["Authorization"] = `Bearer ${tok}`;
+    const response = await fetchFn(`${baseUrl}${path}`, {
+      ...options,
+      headers
+    });
+    if (!response.ok) {
+      const body = await response.text().catch(() => "");
+      let message = `API error ${response.status}: ${response.statusText}`;
+      try {
+        const parsed = JSON.parse(body);
+        if (parsed.message) message = parsed.message;
+        if (parsed.error) message = `${parsed.error}: ${parsed.message || ""}`;
+      } catch {
+      }
+      throw new Error(message);
+    }
+    return response.json();
   }
-  return resolvePath(trimmed, flatScope);
+  const resolver = {
+    async query(slug, params) {
+      const searchParams = new URLSearchParams();
+      searchParams.set("definition", slug);
+      if (params.state) {
+        const states = Array.isArray(params.state) ? params.state : [params.state];
+        states.forEach((s) => searchParams.append("state", s));
+      }
+      if (params.status) searchParams.set("status", params.status);
+      if (params.limit ?? defaults?.limit) searchParams.set("limit", String(params.limit ?? defaults?.limit ?? 20));
+      if (params.page) searchParams.set("page", String(params.page));
+      if (params.offset) searchParams.set("offset", String(params.offset));
+      if (params.search) searchParams.set("search", params.search);
+      if (params.searchFields?.length) searchParams.set("search_fields", params.searchFields.join(","));
+      if (params.sort) {
+        if (typeof params.sort === "string") {
+          searchParams.set("sort", params.sort);
+        } else if (Array.isArray(params.sort)) {
+          const sortStr = params.sort.map((s) => `${s.direction === "desc" ? "-" : ""}${s.field}`).join(",");
+          searchParams.set("sort", sortStr);
+        }
+      }
+      if (params.filter) {
+        searchParams.set("state_filter", JSON.stringify(params.filter));
+      }
+      if (params.facets?.length) {
+        searchParams.set("facets", params.facets.join(","));
+      }
+      if (params.entity) {
+        searchParams.set("entity_type", params.entity.type);
+        searchParams.set("entity_id", params.entity.id);
+      }
+      if (params.parentInstanceId) {
+        searchParams.set("spawned_by_instance_id", params.parentInstanceId);
+      }
+      if (params.includeDefinition) {
+        searchParams.set("include_definition", "true");
+      }
+      const raw = await apiRequest(
+        `/workflow/instances?${searchParams.toString()}`
+      );
+      const items = raw.items ?? raw.data ?? [];
+      const total = Number(raw.total ?? raw.count ?? items.length);
+      const page = Number(raw.page ?? params.page ?? 1);
+      const pageSize = Number(raw.page_size ?? raw.pageSize ?? params.limit ?? defaults?.limit ?? 20);
+      const result = {
+        data: items.map(normalizeInstance),
+        total,
+        page,
+        pageSize
+      };
+      if (raw.definition) result.definition = raw.definition;
+      if (raw.facets) result.facets = raw.facets;
+      if (raw.aggregates) result.aggregates = raw.aggregates;
+      if (raw.grouped) result.grouped = raw.grouped;
+      return result;
+    },
+    async getInstance(id) {
+      const raw = await apiRequest(`/workflow/instances/${id}`);
+      return normalizeInstance(raw);
+    },
+    async getDefinition(slug) {
+      const cached = defCache.get(slug);
+      if (cached && cached.expires > Date.now()) return cached.data;
+      const raw = await apiRequest(`/workflow/definitions/slug/${slug}`);
+      defCache.set(slug, { data: raw, expires: Date.now() + 5 * 60 * 1e3 });
+      return raw;
+    },
+    async create(slug, data) {
+      const raw = await apiRequest("/workflow/instances", {
+        method: "POST",
+        body: JSON.stringify({
+          definition_slug: slug,
+          state_data: data ?? {}
+        })
+      });
+      return String(raw.id);
+    },
+    async update(id, fields) {
+      await apiRequest(`/workflow/instances/${id}/state-data`, {
+        method: "PATCH",
+        body: JSON.stringify(fields)
+      });
+    },
+    async transition(id, name, data) {
+      const raw = await apiRequest(
+        `/workflow/instances/${id}/transitions/${name}`,
+        {
+          method: "POST",
+          body: JSON.stringify({ data: data ?? {} })
+        }
+      );
+      return raw;
+    },
+    async remove(id) {
+      await apiRequest(`/workflow/instances/${id}`, { method: "DELETE" });
+    },
+    async availableTransitions(id) {
+      const raw = await apiRequest(`/workflow/instances/${id}/transitions`);
+      return Array.isArray(raw) ? raw : [];
+    },
+    async fetch(endpoint, fetchConfig) {
+      return apiRequest(endpoint, {
+        method: fetchConfig.method ?? "GET",
+        body: fetchConfig.body ? JSON.stringify(fetchConfig.body) : void 0,
+        headers: fetchConfig.headers
+      });
+    }
+  };
+  return resolver;
+}
+
+// src/player/index.ts
+init_expression_engine();
+init_scope_builder();
+init_composition();
+init_navigation();
+
+// src/player/ComponentTreeRenderer.tsx
+var import_react13 = __toESM(require("react"));
+init_expression_engine();
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var EXPR_PATTERN = /\{\{(.+?)\}\}/g;
+function containsExpression(value) {
+  return typeof value === "string" && EXPR_PATTERN.test(value);
 }
 function evaluateProp(value, scopes) {
   if (typeof value !== "string") return value;
   const fullMatch = value.match(/^\{\{(.+)\}\}$/s);
-  if (fullMatch) {
-    return evaluateExpression(fullMatch[1], scopes);
-  }
+  if (fullMatch) return evaluateExpression(fullMatch[1], scopes);
   if (containsExpression(value)) {
     return value.replace(EXPR_PATTERN, (_, expr) => {
       const result = evaluateExpression(expr, scopes);
@@ -90,17 +3050,16 @@ function evaluateProp(value, scopes) {
   }
   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: [
+var UnknownAtom = ({ type, children }) => /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsxs)("span", { style: { fontWeight: 600 }, children: [
     "Unknown: ",
     type
   ] }),
-  children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 4 }, children })
+  children && /* @__PURE__ */ (0, import_jsx_runtime12.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;
@@ -109,7 +3068,7 @@ var RenderNode = ({ node, scopes, atoms, onEvent }) => {
     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) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: items.map((item, index) => {
       const loopScopes = {
         ...scopes,
         state_data: {
@@ -120,27 +3079,27 @@ var RenderNode = ({ node, scopes, atoms, onEvent }) => {
       };
       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);
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RenderNode, { node: nodeWithoutFor, scopes: loopScopes, atoms, onEvent }, itemKey);
     }) });
   }
-  const Component = atoms[node.type];
+  const Component = atoms[nodeType];
   if (!Component) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnknownAtom, { type: node.type });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UnknownAtom, { type: nodeType });
   }
   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);
-      }
+  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;
@@ -148,12 +3107,12 @@ var RenderNode = ({ node, scopes, atoms, onEvent }) => {
     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));
+      children = node.children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RenderNode, { node: child, scopes, atoms, onEvent }, child.id || index));
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...evaluatedProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, { ...evaluatedProps, children });
 };
-var CTRErrorBoundary = class extends import_react.default.Component {
+var CTRErrorBoundary = class extends import_react13.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -166,9 +3125,9 @@ var CTRErrorBoundary = class extends import_react.default.Component {
   }
   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.fallback || /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { padding: 16, background: "#fff5f5", border: "1px solid #fed7d7", borderRadius: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("strong", { style: { color: "#c53030" }, children: "Rendering Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { color: "#e53e3e", fontSize: 14, marginTop: 4 }, children: this.state.error?.message || "An error occurred while rendering" })
       ] });
     }
     return this.props.children;
@@ -182,43 +3141,44 @@ var ComponentTreeRenderer = ({
   },
   fallback
 }) => {
-  const allAtoms = (0, import_react.useMemo)(() => ({ ...atoms }), [atoms]);
-  const handleEvent = (0, import_react.useCallback)(
+  const allAtoms = (0, import_react13.useMemo)(() => ({ ...atoms }), [atoms]);
+  const handleEvent = (0, import_react13.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)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CTRErrorBoundary, { fallback, children: nodes.map((node, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RenderNode, { node, scopes, atoms: allAtoms, onEvent: handleEvent }, index)) });
 };
 
 // src/player/DevPlayer.tsx
-var import_react2 = require("react");
+var import_react15 = 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 }) => {
+var import_react14 = __toESM(require("react"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Stack2 = ({ children, gap = 8, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", flexDirection: "column", gap, ...style }, ...rest, children });
+var Row2 = ({ children, gap = 8, align, justify, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", flexDirection: "row", gap, alignItems: align, justifyContent: justify, ...style }, ...rest, children });
+var Column2 = ({ children, span, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flex: span ? `0 0 ${Number(span) / 12 * 100}%` : 1, ...style }, ...rest, children });
+var Grid2 = ({ children, columns = 2, gap = 8, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap, ...style }, ...rest, children });
+var Divider2 = ({ style }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "8px 0", ...style } });
+var Spacer2 = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { height: size, flexShrink: 0 } });
+var Text2 = ({ children, size, weight, color, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: size, fontWeight: weight, color, ...style }, ...rest, children });
+var Heading2 = ({ 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 });
+  if (lvl === 1) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h1", { style: s, ...rest, children: c });
+  if (lvl === 2) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { style: s, ...rest, children: c });
+  if (lvl === 3) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { style: s, ...rest, children: c });
+  if (lvl === 4) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h4", { style: s, ...rest, children: c });
+  if (lvl === 5) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h5", { style: s, ...rest, children: c });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.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 Field2 = ({ label, value, children, style }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { marginBottom: 8, ...style }, children: [
+  label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 14 }, children: children ?? value ?? "\u2014" })
 ] });
-var Badge = ({ children, variant = "default", style }) => {
+var Badge2 = ({ children, variant = "default", style }) => {
   const colors = {
     default: { bg: "#edf2f7", fg: "#4a5568" },
     success: { bg: "#c6f6d5", fg: "#276749" },
@@ -227,10 +3187,10 @@ var Badge = ({ children, variant = "default", style }) => {
     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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.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 }) => {
+var ImageAtom = ({ src, alt, width, height, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src, alt: alt ?? "", width, height, style: { maxWidth: "100%", ...style }, ...rest });
+var Button2 = ({ 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" },
@@ -238,7 +3198,7 @@ var Button = ({ children, onClick, variant = "primary", disabled, style, ...rest
     ghost: { background: "transparent", color: "#4a5568", border: "none" }
   };
   const base = styles[variant] ?? styles.primary;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       onClick,
@@ -249,78 +3209,202 @@ var Button = ({ children, onClick, variant = "primary", disabled, style, ...rest
     }
   );
 };
-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)(
+var LinkAtom = ({ children, href, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { href, style: { color: "#3182ce", textDecoration: "underline", ...style }, ...rest, children });
+var TextInput2 = ({ value, onChange, placeholder, label, bind: _bind, style }) => {
+  const isControlled = typeof onChange === "function";
+  const [localValue, setLocalValue] = import_react14.default.useState(value ?? "");
+  const handleChange = (e) => {
+    setLocalValue(e.target.value);
+    if (typeof onChange === "function") onChange(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { marginBottom: 8 }, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "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__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { marginBottom: 8 }, children: [
+  label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: { display: "block", fontSize: 12, color: "#718096", marginBottom: 2 }, children: label }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime13.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,
+        placeholder ? /* @__PURE__ */ (0, import_jsx_runtime13.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);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.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,
+var Card2 = ({ children, title, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { border: "1px solid #e2e8f0", borderRadius: 8, padding: 16, background: "#fff", ...style }, ...rest, children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime13.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,
+var Section2 = ({ children, title, style, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { style: { marginBottom: 24, ...style }, ...rest, children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime13.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 }) => {
+var Show2 = ({ when, children, fallback }) => when ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: fallback ?? null });
+var Each2 = ({ 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 });
+  if (typeof renderItem === "function") return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: items.map((item, i) => renderItem(item, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children });
+};
+var RouterContext = import_react14.default.createContext({ path: "/", navigate: () => {
+} });
+var Router2 = ({ children, basePath, className, style, ...rest }) => {
+  const [path, setPath] = import_react14.default.useState("/");
+  const navigate = import_react14.default.useCallback((to) => setPath(to), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RouterContext.Provider, { value: { path, navigate }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className, style, ...rest, children }) });
+};
+var Route2 = ({ children, path, exact, fallback: _fallback, className, style }) => {
+  const { path: currentPath } = import_react14.default.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__ */ (0, import_jsx_runtime13.jsx)("div", { className, style, children });
+};
+var NavLink2 = ({ children, to, label, icon, className, style, ...rest }) => {
+  const { path, navigate } = import_react14.default.useContext(RouterContext);
+  const target = to || "/";
+  const isActive = path === target;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "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 RoleGuard2 = ({ children, role: _role, fallback: _fallback }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children });
+};
+var Icon2 = ({ name, size = 16, color, style }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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 Tabs2 = ({ children, tabs, defaultTab, style }) => {
+  const tabList = tabs || [];
+  const [active, setActive] = import_react14.default.useState(defaultTab || tabList[0]?.id || "");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", borderBottom: "1px solid #e2e8f0", marginBottom: 12 }, children: tabList.map((t) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "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 Accordion2 = ({ children, style }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style, children });
+var Modal2 = ({ children, open, title, onClose: _onClose, style }) => {
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1e3 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { background: "#fff", borderRadius: 12, padding: 24, maxWidth: 480, width: "100%", ...style }, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontWeight: 600, fontSize: 18, marginBottom: 16 }, children: String(title) }) : null,
+    children
+  ] }) });
 };
+var Markdown2 = ({ content, children, style }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { lineHeight: 1.6, ...style }, children: content || children });
+var ScrollArea2 = ({ children, maxHeight = 400, style }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { overflow: "auto", maxHeight, ...style }, children });
+var Slot2 = ({ children, fallback }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: children || fallback || null });
+var ModuleOutlet2 = ({ children, module: moduleName, fallback }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "data-module": moduleName, children: children || fallback || /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { style: { color: "#a0aec0", fontSize: 13 }, children: [
+  "Module: ",
+  moduleName
+] }) });
 var builtinAtoms = {
-  Stack,
-  Row,
-  Column,
-  Grid,
-  Divider,
-  Spacer,
-  Text,
-  Heading,
-  Field,
-  Badge,
+  // Layout
+  Stack: Stack2,
+  Row: Row2,
+  Column: Column2,
+  Grid: Grid2,
+  Divider: Divider2,
+  Spacer: Spacer2,
+  // Typography
+  Text: Text2,
+  Heading: Heading2,
+  Field: Field2,
+  Badge: Badge2,
   Image: ImageAtom,
-  Button,
+  Icon: Icon2,
+  // Interactive
+  Button: Button2,
   Link: LinkAtom,
-  TextInput,
+  // Form
+  TextInput: TextInput2,
   Select: SelectAtom,
-  Card,
-  Section,
-  Show,
-  Each
+  // Containers
+  Card: Card2,
+  Section: Section2,
+  Tabs: Tabs2,
+  Accordion: Accordion2,
+  Modal: Modal2,
+  // Content
+  Markdown: Markdown2,
+  ScrollArea: ScrollArea2,
+  // Control Flow
+  Show: Show2,
+  Each: Each2,
+  // Routing
+  Router: Router2,
+  Route: Route2,
+  NavLink: NavLink2,
+  RoleGuard: RoleGuard2,
+  // Composition
+  Slot: Slot2,
+  ModuleOutlet: ModuleOutlet2
 };
 
 // src/player/DevPlayer.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var S = {
   shell: {
     display: "flex",
@@ -415,9 +3499,9 @@ var S = {
   })
 };
 function useDevSocket(wsUrl, onReload) {
-  const [connected, setConnected] = (0, import_react2.useState)(false);
-  const wsRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
+  const [connected, setConnected] = (0, import_react15.useState)(false);
+  const wsRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     if (typeof window === "undefined") return;
     const url = wsUrl ?? `ws://${window.location.host}/__mm_dev`;
     let ws;
@@ -463,15 +3547,15 @@ var DevPlayer = ({
   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 [showSidebar, setShowSidebar] = (0, import_react15.useState)(true);
+  const [events, setEvents] = (0, import_react15.useState)([]);
+  const nextId = (0, import_react15.useRef)(0);
   const connected = useDevSocket(wsUrl, onReload);
-  const mergedAtoms = (0, import_react2.useMemo)(
+  const mergedAtoms = (0, import_react15.useMemo)(
     () => ({ ...builtinAtoms, ...userAtoms }),
     [userAtoms]
   );
-  const handleEvent = (0, import_react2.useCallback)(
+  const handleEvent = (0, import_react15.useCallback)(
     (name, payload) => {
       setEvents((prev) => {
         const entry = {
@@ -488,7 +3572,7 @@ var DevPlayer = ({
     [externalOnEvent]
   );
   if (bare) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ComponentTreeRenderer,
       {
         tree,
@@ -498,21 +3582,21 @@ var DevPlayer = ({
       }
     );
   }
-  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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: S.shell, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: S.toolbar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: S.dot(connected), title: connected ? "HMR connected" : "HMR disconnected" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: S.toolbarTitle, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.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: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.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)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { flex: 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           style: { ...S.toolbarBtn, ...showSidebar ? S.toolbarBtnActive : {} },
@@ -521,8 +3605,8 @@ var DevPlayer = ({
         }
       )
     ] }),
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: S.body, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: S.preview, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         ComponentTreeRenderer,
         {
           tree,
@@ -531,18 +3615,18 @@ var DevPlayer = ({
           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) })
+      showSidebar && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: S.sidebar, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: S.sidebarHeading, children: "Scopes" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.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: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.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)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: Object.keys(mergedAtoms).sort().map((name) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               style: {
@@ -560,14 +3644,14 @@ var DevPlayer = ({
             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: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: S.sidebarHeading, children: [
               "Events (",
               events.length,
               ")"
             ] }),
-            events.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            events.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "button",
               {
                 style: { background: "none", border: "none", color: "#a0aec0", fontSize: 11, cursor: "pointer" },
@@ -576,16 +3660,16 @@ var DevPlayer = ({
               }
             )
           ] }),
-          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) })
+          events.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { color: "#a0aec0", fontSize: 12, fontStyle: "italic" }, children: "No events yet" }),
+          events.slice(0, 50).map((e) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: S.eventRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: S.eventTime, children: e.time }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: S.eventName, children: e.name }),
+            e.payload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime14.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) })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: S.sidebarSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: S.sidebarHeading, children: "Tree (JSON)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("pre", { style: { ...S.pre, maxHeight: 400 }, children: JSON.stringify(tree, null, 2) })
         ] })
       ] })
     ] })
@@ -593,10 +3677,32 @@ var DevPlayer = ({
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AtomRegistryImpl,
   ComponentTreeRenderer,
+  DEFAULT_DESIGN_TOKENS,
   DevPlayer,
+  ExperienceRenderer,
+  PlayerProvider,
+  ScopeContext,
+  SlotRegistryProvider,
+  buildActionScope,
+  buildEvalContext,
+  buildLoopScope,
+  buildScope,
   builtinAtoms,
-  containsExpression,
+  builtinFunctions,
+  classifyBinding,
+  createApiResolver,
+  createCoreAtomRegistry,
   evaluateExpression,
-  evaluateProp
+  mergeRegistries,
+  mergeScope,
+  resolveAllBindings,
+  resolveBinding,
+  setWasmModule,
+  usePlayerContext,
+  usePlayerRouter,
+  useScope,
+  useSlotContributions,
+  useTheme
 });