@vibevibes/sdk 0.1.0 → 0.2.0

package/dist/index.js

@@ -29,19 +29,87 @@ function quickTool(name, description, input_schema, handler) {
     handler
   };
 }
+function undoTool(zod) {
+  return {
+    name: "_state.restore",
+    description: "Restore shared state to a previous snapshot (used by undo/redo)",
+    input_schema: zod.object({
+      state: zod.record(zod.any()).describe("The state snapshot to restore")
+    }),
+    risk: "low",
+    capabilities_required: ["state.write"],
+    handler: async (ctx, input) => {
+      ctx.setState(input.state);
+      return { restored: true };
+    }
+  };
+}
+function phaseTool(zod, validPhases) {
+  const phaseSchema = validPhases ? zod.enum(validPhases) : zod.string();
+  return {
+    name: "_phase.set",
+    description: "Transition to a new phase/stage of the experience",
+    input_schema: zod.object({
+      phase: phaseSchema.describe("The phase to transition to")
+    }),
+    risk: "low",
+    capabilities_required: ["state.write"],
+    handler: async (ctx, input) => {
+      ctx.setState({ ...ctx.state, phase: input.phase });
+      return { phase: input.phase };
+    }
+  };
+}
+function defineRoomConfig(config) {
+  return config;
+}
+function defineStream(config) {
+  return {
+    name: config.name,
+    description: config.description,
+    input_schema: config.input_schema,
+    merge: config.merge,
+    rateLimit: config.rateLimit
+  };
+}
 function defineExperience(module) {
-  const m = module.manifest;
+  const m = module.manifest ?? {};
+  let initialState = module.initialState;
+  if (module.stateSchema && !initialState) {
+    try {
+      initialState = module.stateSchema.parse(void 0);
+    } catch {
+      try {
+        initialState = module.stateSchema.parse({});
+      } catch {
+      }
+    }
+  }
+  if (module.stateSchema && initialState) {
+    try {
+      module.stateSchema.parse(initialState);
+    } catch (err) {
+      console.warn(
+        `[vibevibes] initialState does not match stateSchema: ${err.message ?? err}`
+      );
+    }
+  }
+  const agentSlots = m.agentSlots ?? module.agents;
   return {
     ...module,
+    initialState,
     manifest: {
       ...m,
+      title: m.title || module.name || m.id,
       version: m.version || "0.0.1",
-      requested_capabilities: m.requested_capabilities || ["state.write"]
+      requested_capabilities: m.requested_capabilities || ["state.write"],
+      agentSlots: agentSlots ?? m.agentSlots
     }
   };
 }
 function validateExperience(module) {
   const errors = [];
+  const warnings = [];
   if (!module.manifest?.id) {
     errors.push("manifest.id is required");
   }
@@ -69,9 +137,25 @@ function validateExperience(module) {
       }
     });
   }
+  if (module.stateSchema) {
+    if (!module.initialState) {
+      try {
+        module.stateSchema.parse({});
+      } catch {
+        warnings.push("stateSchema has required fields without defaults \u2014 provide initialState explicitly");
+      }
+    } else {
+      try {
+        module.stateSchema.parse(module.initialState);
+      } catch (err) {
+        errors.push(`initialState does not match stateSchema: ${err.message ?? err}`);
+      }
+    }
+  }
   return {
     valid: errors.length === 0,
-    errors
+    errors,
+    warnings
   };
 }
 
@@ -271,6 +355,198 @@ function useTypingIndicator(actorId, ephemeralState, setEphemeral, timeoutMs = 3
   const typingUsers = Object.entries(ephemeralState).filter(([id, data]) => id !== actorId && data._typing && now - data._typing < timeoutMs + 2e3).map(([id]) => id);
   return { setTyping, typingUsers };
 }
+function useUndo(sharedState, callTool, opts) {
+  const maxHistory = opts?.maxHistory ?? 50;
+  const restoreTool = opts?.restoreTool ?? "_state.restore";
+  const undoStackRef = React.useRef([]);
+  const redoStackRef = React.useRef([]);
+  const lastStateRef = React.useRef(null);
+  const restoringRef = React.useRef(false);
+  const [, forceRender] = React.useState(0);
+  React.useEffect(() => {
+    if (restoringRef.current) {
+      restoringRef.current = false;
+      lastStateRef.current = sharedState;
+      return;
+    }
+    if (lastStateRef.current !== null && lastStateRef.current !== sharedState) {
+      undoStackRef.current = [
+        ...undoStackRef.current.slice(-(maxHistory - 1)),
+        lastStateRef.current
+      ];
+      redoStackRef.current = [];
+      forceRender((n) => n + 1);
+    }
+    lastStateRef.current = sharedState;
+  }, [sharedState, maxHistory]);
+  const undo = React.useCallback(() => {
+    const stack = undoStackRef.current;
+    if (stack.length === 0) return;
+    const prev = stack[stack.length - 1];
+    undoStackRef.current = stack.slice(0, -1);
+    redoStackRef.current = [...redoStackRef.current, sharedState];
+    restoringRef.current = true;
+    forceRender((n) => n + 1);
+    callTool(restoreTool, { state: prev }).catch(() => {
+    });
+  }, [sharedState, callTool, restoreTool]);
+  const redo = React.useCallback(() => {
+    const stack = redoStackRef.current;
+    if (stack.length === 0) return;
+    const next = stack[stack.length - 1];
+    redoStackRef.current = stack.slice(0, -1);
+    undoStackRef.current = [...undoStackRef.current, sharedState];
+    restoringRef.current = true;
+    forceRender((n) => n + 1);
+    callTool(restoreTool, { state: next }).catch(() => {
+    });
+  }, [sharedState, callTool, restoreTool]);
+  return {
+    undo,
+    redo,
+    canUndo: undoStackRef.current.length > 0,
+    canRedo: redoStackRef.current.length > 0,
+    undoCount: undoStackRef.current.length,
+    redoCount: redoStackRef.current.length
+  };
+}
+function useDebounce(callTool, delayMs = 300) {
+  const timerRef = React.useRef(null);
+  const latestRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return React.useCallback(
+    (name, input) => {
+      latestRef.current = { name, input };
+      if (timerRef.current) clearTimeout(timerRef.current);
+      return new Promise((resolve, reject) => {
+        timerRef.current = setTimeout(async () => {
+          const latest = latestRef.current;
+          if (!latest) return;
+          try {
+            const result = await callTool(latest.name, latest.input);
+            resolve(result);
+          } catch (err) {
+            reject(err);
+          }
+        }, delayMs);
+      });
+    },
+    [callTool, delayMs]
+  );
+}
+function useThrottle(callTool, intervalMs = 50) {
+  const lastCallRef = React.useRef(0);
+  const timerRef = React.useRef(null);
+  const latestRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return React.useCallback(
+    (name, input) => {
+      latestRef.current = { name, input };
+      const now = Date.now();
+      const elapsed = now - lastCallRef.current;
+      if (elapsed >= intervalMs) {
+        lastCallRef.current = now;
+        return callTool(name, input);
+      }
+      if (timerRef.current) clearTimeout(timerRef.current);
+      return new Promise((resolve, reject) => {
+        timerRef.current = setTimeout(async () => {
+          lastCallRef.current = Date.now();
+          const latest = latestRef.current;
+          if (!latest) return;
+          try {
+            const result = await callTool(latest.name, latest.input);
+            resolve(result);
+          } catch (err) {
+            reject(err);
+          }
+        }, intervalMs - elapsed);
+      });
+    },
+    [callTool, intervalMs]
+  );
+}
+function usePhase(sharedState, callTool, config) {
+  const { phases, stateKey = "phase", toolName = "_phase.set" } = config;
+  const current = sharedState[stateKey] ?? phases[0];
+  const index = phases.indexOf(current);
+  const safeIndex = index === -1 ? 0 : index;
+  const next = React.useCallback(() => {
+    if (safeIndex < phases.length - 1) {
+      callTool(toolName, { phase: phases[safeIndex + 1] }).catch(() => {
+      });
+    }
+  }, [safeIndex, phases, callTool, toolName]);
+  const prev = React.useCallback(() => {
+    if (safeIndex > 0) {
+      callTool(toolName, { phase: phases[safeIndex - 1] }).catch(() => {
+      });
+    }
+  }, [safeIndex, phases, callTool, toolName]);
+  const goTo = React.useCallback(
+    (phase) => {
+      if (phases.includes(phase)) {
+        callTool(toolName, { phase }).catch(() => {
+        });
+      }
+    },
+    [phases, callTool, toolName]
+  );
+  const is = React.useCallback(
+    (phase) => current === phase,
+    [current]
+  );
+  return {
+    current,
+    index: safeIndex,
+    isFirst: safeIndex === 0,
+    isLast: safeIndex === phases.length - 1,
+    next,
+    prev,
+    goTo,
+    is
+  };
+}
+function useBlob(blobKey, serverUrl) {
+  const [data, setData] = React.useState(null);
+  const cacheRef = React.useRef(/* @__PURE__ */ new Map());
+  React.useEffect(() => {
+    if (!blobKey) {
+      setData(null);
+      return;
+    }
+    const cached = cacheRef.current.get(blobKey);
+    if (cached) {
+      setData(cached);
+      return;
+    }
+    const baseUrl = serverUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost:4321");
+    let cancelled = false;
+    fetch(`${baseUrl}/blobs/${encodeURIComponent(blobKey)}`).then((res) => {
+      if (!res.ok) throw new Error(`Blob not found: ${blobKey}`);
+      return res.arrayBuffer();
+    }).then((buf) => {
+      if (!cancelled) {
+        cacheRef.current.set(blobKey, buf);
+        setData(buf);
+      }
+    }).catch(() => {
+      if (!cancelled) setData(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [blobKey, serverUrl]);
+  return data;
+}
 
 // src/components.ts
 function getReact2() {
@@ -404,6 +680,236 @@ function Grid({ children, columns = 2, gap = "0.75rem", style }) {
     }
   }, children);
 }
+function Slider({ value = 50, onChange, min = 0, max = 100, step = 1, disabled, label, style }) {
+  const pct = (value - min) / (max - min) * 100;
+  return h(
+    "div",
+    { style: { display: "flex", flexDirection: "column", gap: "0.25rem", ...style } },
+    label ? h("div", {
+      style: { display: "flex", justifyContent: "space-between", fontSize: "0.8125rem", color: "#6b7280" }
+    }, h("span", null, label), h("span", null, String(value))) : null,
+    h("input", {
+      type: "range",
+      min,
+      max,
+      step,
+      value,
+      disabled,
+      onChange: onChange ? (e) => onChange(parseFloat(e.target.value)) : void 0,
+      style: {
+        width: "100%",
+        height: "6px",
+        appearance: "none",
+        WebkitAppearance: "none",
+        background: `linear-gradient(to right, #6366f1 ${pct}%, #d1d5db ${pct}%)`,
+        borderRadius: "3px",
+        outline: "none",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1
+      }
+    })
+  );
+}
+function Textarea({ value, onChange, placeholder, rows = 3, disabled, style }) {
+  return h("textarea", {
+    value,
+    placeholder,
+    rows,
+    disabled,
+    onChange: onChange ? (e) => onChange(e.target.value) : void 0,
+    style: {
+      width: "100%",
+      padding: "0.5rem 0.75rem",
+      fontSize: "0.875rem",
+      border: "1px solid #d1d5db",
+      borderRadius: "0.5rem",
+      outline: "none",
+      backgroundColor: disabled ? "#f9fafb" : "#fff",
+      color: "#111827",
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      lineHeight: 1.5,
+      boxSizing: "border-box",
+      resize: "vertical",
+      ...style
+    }
+  });
+}
+function Modal({ children, open = false, onClose, title, style }) {
+  if (!open) return null;
+  return h(
+    "div",
+    {
+      onClick: onClose,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e4,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(0,0,0,0.5)",
+        backdropFilter: "blur(4px)"
+      }
+    },
+    h(
+      "div",
+      {
+        onClick: (e) => e.stopPropagation(),
+        style: {
+          backgroundColor: "#fff",
+          borderRadius: "0.75rem",
+          padding: "1.5rem",
+          boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
+          maxWidth: "480px",
+          width: "90%",
+          maxHeight: "80vh",
+          overflowY: "auto",
+          ...style
+        }
+      },
+      title ? h(
+        "div",
+        {
+          style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }
+        },
+        h("h3", { style: { margin: 0, fontSize: "1.1rem", fontWeight: 600, color: "#111827" } }, title),
+        onClose ? h("button", {
+          onClick: onClose,
+          style: {
+            background: "none",
+            border: "none",
+            fontSize: "1.25rem",
+            cursor: "pointer",
+            color: "#6b7280",
+            padding: "0.25rem"
+          }
+        }, "\u2715") : null
+      ) : null,
+      children
+    )
+  );
+}
+var DEFAULT_COLORS = [
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#22c55e",
+  "#06b6d4",
+  "#3b82f6",
+  "#6366f1",
+  "#8b5cf6",
+  "#ec4899",
+  "#111827",
+  "#6b7280",
+  "#ffffff"
+];
+function ColorPicker({ value = "#6366f1", onChange, presets, disabled, style }) {
+  const colors = presets || DEFAULT_COLORS;
+  return h(
+    "div",
+    {
+      style: { display: "flex", flexWrap: "wrap", gap: "0.375rem", alignItems: "center", ...style }
+    },
+    ...colors.map(
+      (color) => h("button", {
+        key: color,
+        onClick: !disabled && onChange ? () => onChange(color) : void 0,
+        style: {
+          width: "28px",
+          height: "28px",
+          borderRadius: "50%",
+          border: color === value ? "2px solid #111827" : "2px solid transparent",
+          backgroundColor: color,
+          cursor: disabled ? "not-allowed" : "pointer",
+          outline: color === value ? "2px solid #6366f1" : "none",
+          outlineOffset: "2px",
+          opacity: disabled ? 0.5 : 1,
+          padding: 0
+        }
+      })
+    ),
+    h("input", {
+      type: "color",
+      value,
+      disabled,
+      onChange: onChange ? (e) => onChange(e.target.value) : void 0,
+      style: {
+        width: "28px",
+        height: "28px",
+        padding: 0,
+        border: "none",
+        borderRadius: "50%",
+        cursor: disabled ? "not-allowed" : "pointer"
+      }
+    })
+  );
+}
+function Dropdown({ value, onChange, options, placeholder, disabled, style }) {
+  return h(
+    "select",
+    {
+      value: value || "",
+      disabled,
+      onChange: onChange ? (e) => onChange(e.target.value) : void 0,
+      style: {
+        width: "100%",
+        padding: "0.5rem 0.75rem",
+        fontSize: "0.875rem",
+        border: "1px solid #d1d5db",
+        borderRadius: "0.5rem",
+        outline: "none",
+        backgroundColor: disabled ? "#f9fafb" : "#fff",
+        color: "#111827",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        cursor: disabled ? "not-allowed" : "pointer",
+        appearance: "none",
+        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E")`,
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "right 0.75rem center",
+        paddingRight: "2rem",
+        ...style
+      }
+    },
+    placeholder ? h("option", { value: "", disabled: true }, placeholder) : null,
+    ...options.map((opt) => h("option", { key: opt.value, value: opt.value }, opt.label))
+  );
+}
+function Tabs({ tabs, activeTab, onTabChange, children, style }) {
+  const active = activeTab || tabs[0]?.id;
+  return h(
+    "div",
+    { style: { ...style } },
+    h(
+      "div",
+      {
+        style: {
+          display: "flex",
+          borderBottom: "1px solid #e5e7eb",
+          gap: 0
+        }
+      },
+      ...tabs.map(
+        (tab) => h("button", {
+          key: tab.id,
+          onClick: onTabChange ? () => onTabChange(tab.id) : void 0,
+          style: {
+            padding: "0.5rem 1rem",
+            fontSize: "0.8125rem",
+            fontWeight: 500,
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: tab.id === active ? "#6366f1" : "#6b7280",
+            borderBottom: tab.id === active ? "2px solid #6366f1" : "2px solid transparent",
+            marginBottom: "-1px",
+            fontFamily: "system-ui, -apple-system, sans-serif"
+          }
+        }, tab.label)
+      )
+    ),
+    h("div", { style: { paddingTop: "0.75rem" } }, children)
+  );
+}
 
 // src/agent-protocol.ts
 function uid() {
@@ -559,45 +1065,6 @@ function createAgentProtocolTools(namespace, z) {
   ];
 }
 
-// src/agent-hints.ts
-function createAgentProtocolHints(namespace) {
-  return [
-    {
-      trigger: "A proposal is pending and you have not voted on it yet",
-      condition: `Object.values(state._agentProposals || {}).some(p => p.status === 'pending' && !p.votes.some(v => v.actorId === actorId))`,
-      suggestedTools: [`${namespace}.agent.vote`],
-      priority: "high",
-      cooldownMs: 2e3
-    },
-    {
-      trigger: "You received a delegation addressed to you",
-      condition: `(state._agentMessages || []).some(m => m.type === 'delegate' && m.to === actorId)`,
-      suggestedTools: [`${namespace}.agent.respond`],
-      priority: "high",
-      cooldownMs: 3e3
-    },
-    {
-      trigger: "You received a request addressed to you",
-      condition: `(state._agentMessages || []).some(m => m.type === 'request' && m.to === actorId)`,
-      suggestedTools: [`${namespace}.agent.respond`],
-      priority: "medium",
-      cooldownMs: 2e3
-    },
-    {
-      trigger: "You have useful information to share with other agents",
-      suggestedTools: [`${namespace}.agent.inform`],
-      priority: "low",
-      cooldownMs: 5e3
-    },
-    {
-      trigger: "You want to propose a collaborative action for the group",
-      suggestedTools: [`${namespace}.agent.propose`],
-      priority: "low",
-      cooldownMs: 1e4
-    }
-  ];
-}
-
 // src/migrations.ts
 function getStateVersion(state) {
   return typeof state._version === "string" ? state._version : "0.0.0";
@@ -691,30 +1158,4345 @@ var InMemoryAdapter = class {
     return this.profiles.get(userId) || null;
   }
 };
+
+// src/scene/renderer-svg.ts
+function getReact3() {
+  const R = globalThis.React;
+  if (!R) throw new Error("React is not available.");
+  return R;
+}
+function h2(type, props, ...children) {
+  return getReact3().createElement(type, props, ...children);
+}
+function buildTransformString(t) {
+  if (!t) return void 0;
+  const parts = [];
+  if (t.x != null || t.y != null) {
+    parts.push(`translate(${t.x ?? 0}, ${t.y ?? 0})`);
+  }
+  if (t.rotation != null && t.rotation !== 0) {
+    parts.push(`rotate(${t.rotation})`);
+  }
+  if (t.scaleX != null && t.scaleX !== 1 || t.scaleY != null && t.scaleY !== 1) {
+    parts.push(`scale(${t.scaleX ?? 1}, ${t.scaleY ?? 1})`);
+  }
+  return parts.length > 0 ? parts.join(" ") : void 0;
+}
+function buildStyleAttrs(s) {
+  if (!s) return {};
+  const attrs = {};
+  if (s.fill != null) attrs.fill = s.fill;
+  if (s.stroke != null) attrs.stroke = s.stroke;
+  if (s.strokeWidth != null) attrs.strokeWidth = s.strokeWidth;
+  if (s.strokeDasharray != null) attrs.strokeDasharray = s.strokeDasharray;
+  if (s.strokeLinecap != null) attrs.strokeLinecap = s.strokeLinecap;
+  if (s.strokeLinejoin != null) attrs.strokeLinejoin = s.strokeLinejoin;
+  if (s.opacity != null) attrs.opacity = s.opacity;
+  if (s.fillOpacity != null) attrs.fillOpacity = s.fillOpacity;
+  if (s.strokeOpacity != null) attrs.strokeOpacity = s.strokeOpacity;
+  if (s.filter != null) attrs.filter = s.filter;
+  if (s.cursor != null) attrs.style = { ...attrs.style, cursor: s.cursor };
+  if (s.pointerEvents != null) attrs.pointerEvents = s.pointerEvents;
+  return attrs;
+}
+function buildTextAttrs(s) {
+  if (!s) return {};
+  const attrs = buildStyleAttrs(s);
+  if (s.fontSize != null) attrs.fontSize = s.fontSize;
+  if (s.fontFamily != null) attrs.fontFamily = s.fontFamily;
+  if (s.fontWeight != null) attrs.fontWeight = s.fontWeight;
+  if (s.textAnchor != null) attrs.textAnchor = s.textAnchor;
+  if (s.dominantBaseline != null) attrs.dominantBaseline = s.dominantBaseline;
+  if (s.letterSpacing != null) attrs.letterSpacing = s.letterSpacing;
+  return attrs;
+}
+function renderGradient(g) {
+  if (g.type === "linear") {
+    const lg = g;
+    return h2(
+      "linearGradient",
+      {
+        key: lg.id,
+        id: lg.id,
+        x1: lg.x1,
+        y1: lg.y1,
+        x2: lg.x2,
+        y2: lg.y2,
+        gradientUnits: "objectBoundingBox"
+      },
+      ...lg.stops.map(
+        (s, i) => h2("stop", { key: i, offset: s.offset, stopColor: s.color })
+      )
+    );
+  }
+  const rg = g;
+  return h2(
+    "radialGradient",
+    {
+      key: rg.id,
+      id: rg.id,
+      cx: rg.cx,
+      cy: rg.cy,
+      r: rg.r,
+      fx: rg.fx,
+      fy: rg.fy,
+      gradientUnits: "objectBoundingBox"
+    },
+    ...rg.stops.map(
+      (s, i) => h2("stop", { key: i, offset: s.offset, stopColor: s.color })
+    )
+  );
+}
+function renderFilter(f) {
+  const children = [];
+  switch (f.type) {
+    case "blur":
+      children.push(h2("feGaussianBlur", { key: "blur", stdDeviation: f.params.radius ?? 4 }));
+      break;
+    case "shadow":
+      children.push(
+        h2("feDropShadow", {
+          key: "shadow",
+          dx: f.params.dx ?? 2,
+          dy: f.params.dy ?? 2,
+          stdDeviation: f.params.blur ?? 3,
+          floodColor: f.params.color ?? "#000",
+          floodOpacity: f.params.opacity ?? 0.5
+        })
+      );
+      break;
+    case "glow":
+      children.push(
+        h2("feGaussianBlur", { key: "blur", stdDeviation: f.params.radius ?? 4, result: "blur" }),
+        h2(
+          "feMerge",
+          { key: "merge" },
+          h2("feMergeNode", { key: "n1", in: "blur" }),
+          h2("feMergeNode", { key: "n2", in: "SourceGraphic" })
+        )
+      );
+      break;
+    default:
+      break;
+  }
+  return h2("filter", { key: f.id, id: f.id }, ...children);
+}
+function interactionHandlers(node, rctx) {
+  if (!node.interactive) return {};
+  const handlers = {};
+  if (rctx.onNodeClick) {
+    handlers.onClick = (e) => {
+      e.stopPropagation();
+      const rect = e.currentTarget.ownerSVGElement?.getBoundingClientRect();
+      rctx.onNodeClick(node.id, {
+        x: rect ? e.clientX - rect.left : e.clientX,
+        y: rect ? e.clientY - rect.top : e.clientY
+      });
+    };
+  }
+  if (rctx.onNodeHover) {
+    handlers.onMouseEnter = () => rctx.onNodeHover(node.id);
+    handlers.onMouseLeave = () => rctx.onNodeHover(null);
+  }
+  if (rctx.onNodeDragStart) {
+    handlers.onMouseDown = (e) => {
+      e.stopPropagation();
+      const rect = e.currentTarget.ownerSVGElement?.getBoundingClientRect();
+      const pos = {
+        x: rect ? e.clientX - rect.left : e.clientX,
+        y: rect ? e.clientY - rect.top : e.clientY
+      };
+      rctx.onNodeDragStart(node.id, pos);
+    };
+  }
+  return handlers;
+}
+function renderNode(node, rctx) {
+  if (node.style?.visible === false) return null;
+  const transform = buildTransformString(node.transform);
+  const handlers = interactionHandlers(node, rctx);
+  const isSelected = rctx.selectedNodeIds?.includes(node.id);
+  let element = null;
+  switch (node.type) {
+    case "rect": {
+      const n = node;
+      element = h2("rect", {
+        x: -n.width / 2,
+        y: -n.height / 2,
+        width: n.width,
+        height: n.height,
+        rx: n.rx,
+        ry: n.ry,
+        ...buildStyleAttrs(n.style),
+        ...handlers
+      });
+      break;
+    }
+    case "circle": {
+      const n = node;
+      element = h2("circle", {
+        r: n.radius,
+        ...buildStyleAttrs(n.style),
+        ...handlers
+      });
+      break;
+    }
+    case "ellipse": {
+      const n = node;
+      element = h2("ellipse", {
+        rx: n.rx,
+        ry: n.ry,
+        ...buildStyleAttrs(n.style),
+        ...handlers
+      });
+      break;
+    }
+    case "line": {
+      const n = node;
+      element = h2("line", {
+        x1: 0,
+        y1: 0,
+        x2: n.x2,
+        y2: n.y2,
+        ...buildStyleAttrs(n.style),
+        ...handlers
+      });
+      break;
+    }
+    case "polyline": {
+      const n = node;
+      element = h2("polyline", {
+        points: n.points.map((p) => `${p.x},${p.y}`).join(" "),
+        fill: "none",
+        ...buildStyleAttrs(n.style),
+        ...handlers
+      });
+      break;
+    }
+    case "polygon": {
+      const n = node;
+      element = h2("polygon", {
+        points: n.points.map((p) => `${p.x},${p.y}`).join(" "),
+        ...buildStyleAttrs(n.style),
+        ...handlers
+      });
+      break;
+    }
+    case "path": {
+      const n = node;
+      element = h2("path", {
+        d: n.d,
+        ...buildStyleAttrs(n.style),
+        ...handlers
+      });
+      break;
+    }
+    case "text": {
+      const n = node;
+      element = h2("text", {
+        ...buildTextAttrs(n.style),
+        ...handlers
+      }, n.text);
+      break;
+    }
+    case "image": {
+      const n = node;
+      element = h2("image", {
+        href: n.href,
+        x: -n.width / 2,
+        y: -n.height / 2,
+        width: n.width,
+        height: n.height,
+        preserveAspectRatio: n.preserveAspectRatio ?? "xMidYMid meet",
+        ...handlers
+      });
+      break;
+    }
+    case "group": {
+      const n = node;
+      element = h2(
+        "g",
+        {},
+        ...n.children.map((child) => renderNode(child, rctx))
+      );
+      break;
+    }
+    case "sprite": {
+      const n = node;
+      const cols = n.columns ?? Math.floor(1e3 / n.frameWidth);
+      const frame = n.frame ?? 0;
+      const col = frame % cols;
+      const row = Math.floor(frame / cols);
+      const clipId = `sprite-clip-${n.id}`;
+      element = h2(
+        "g",
+        {},
+        h2(
+          "defs",
+          {},
+          h2(
+            "clipPath",
+            { id: clipId },
+            h2("rect", { x: 0, y: 0, width: n.frameWidth, height: n.frameHeight })
+          )
+        ),
+        h2(
+          "g",
+          { clipPath: `url(#${clipId})` },
+          h2("image", {
+            href: n.href,
+            x: -col * n.frameWidth,
+            y: -row * n.frameHeight,
+            width: cols * n.frameWidth,
+            height: Math.ceil(1e3 / cols) * n.frameHeight,
+            // Approximate
+            ...handlers
+          })
+        )
+      );
+      break;
+    }
+    case "tilemap": {
+      const n = node;
+      const tiles = [];
+      for (let row = 0; row < n.height; row++) {
+        for (let col = 0; col < n.width; col++) {
+          const tileIdx = n.data[row]?.[col];
+          if (tileIdx == null || tileIdx < 0) continue;
+          const srcCol = tileIdx % n.columns;
+          const srcRow = Math.floor(tileIdx / n.columns);
+          const clipId = `tile-${n.id}-${row}-${col}`;
+          tiles.push(
+            h2(
+              "g",
+              {
+                key: `${row}-${col}`,
+                transform: `translate(${col * n.tileWidth}, ${row * n.tileHeight})`
+              },
+              h2(
+                "defs",
+                {},
+                h2(
+                  "clipPath",
+                  { id: clipId },
+                  h2("rect", { x: 0, y: 0, width: n.tileWidth, height: n.tileHeight })
+                )
+              ),
+              h2(
+                "g",
+                { clipPath: `url(#${clipId})` },
+                h2("image", {
+                  href: n.href,
+                  x: -srcCol * n.tileWidth,
+                  y: -srcRow * n.tileHeight,
+                  width: n.columns * n.tileWidth,
+                  height: Math.ceil(256 / n.columns) * n.tileHeight
+                })
+              )
+            )
+          );
+        }
+      }
+      element = h2("g", {}, ...tiles);
+      break;
+    }
+    case "particles": {
+      const n = node;
+      const particles = n._particles ?? [];
+      element = h2(
+        "g",
+        {},
+        ...particles.map((p, i) => {
+          const alpha = n.emitters[0]?.fadeOut !== false ? Math.max(0, 1 - p.age / p.lifetime) : 1;
+          const shape = n.emitters[0]?.shape ?? "circle";
+          if (shape === "square") {
+            return h2("rect", {
+              key: i,
+              x: p.x - p.size / 2,
+              y: p.y - p.size / 2,
+              width: p.size,
+              height: p.size,
+              fill: p.color,
+              opacity: alpha
+            });
+          }
+          return h2("circle", {
+            key: i,
+            cx: p.x,
+            cy: p.y,
+            r: p.size / 2,
+            fill: p.color,
+            opacity: alpha
+          });
+        })
+      );
+      break;
+    }
+    default:
+      return null;
+  }
+  if (!element) return null;
+  const wrapperProps = { key: node.id };
+  if (transform) wrapperProps.transform = transform;
+  const children = [element];
+  if (isSelected && node.type !== "group") {
+    children.push(
+      h2("rect", {
+        key: "selection",
+        x: -getBoundsWidth(node) / 2 - 4,
+        y: -getBoundsHeight(node) / 2 - 4,
+        width: getBoundsWidth(node) + 8,
+        height: getBoundsHeight(node) + 8,
+        fill: "none",
+        stroke: "#6366f1",
+        strokeWidth: 2,
+        strokeDasharray: "4,2",
+        pointerEvents: "none"
+      })
+    );
+  }
+  if (rctx.debug) {
+    children.push(
+      h2("text", {
+        key: "debug-label",
+        y: -getBoundsHeight(node) / 2 - 8,
+        fontSize: 10,
+        fill: "#94a3b8",
+        textAnchor: "middle",
+        pointerEvents: "none"
+      }, node.id)
+    );
+  }
+  return h2("g", wrapperProps, ...children);
+}
+function getBoundsWidth(node) {
+  switch (node.type) {
+    case "rect":
+      return node.width;
+    case "circle":
+      return node.radius * 2;
+    case "ellipse":
+      return node.rx * 2;
+    case "image":
+      return node.width;
+    case "text":
+      return 100;
+    // Approximate
+    default:
+      return 50;
+  }
+}
+function getBoundsHeight(node) {
+  switch (node.type) {
+    case "rect":
+      return node.height;
+    case "circle":
+      return node.radius * 2;
+    case "ellipse":
+      return node.ry * 2;
+    case "image":
+      return node.height;
+    case "text":
+      return 24;
+    // Approximate
+    default:
+      return 50;
+  }
+}
+function SvgSceneRenderer(props) {
+  const {
+    scene,
+    width = scene.width ?? 800,
+    height = scene.height ?? 600,
+    className,
+    style: containerStyle,
+    onNodeClick,
+    onNodeHover,
+    onNodeDragStart,
+    onNodeDrag,
+    onNodeDragEnd,
+    onViewportClick,
+    onViewportPan,
+    onViewportZoom,
+    selectedNodeIds,
+    debug
+  } = props;
+  const React4 = getReact3();
+  const camera = scene.camera ?? { x: width / 2, y: height / 2, zoom: 1 };
+  const zoom = camera.zoom || 1;
+  const vbW = width / zoom;
+  const vbH = height / zoom;
+  const vbX = camera.x - vbW / 2;
+  const vbY = camera.y - vbH / 2;
+  const viewBox = `${vbX} ${vbY} ${vbW} ${vbH}`;
+  const dragRef = React4.useRef(null);
+  const rctx = {
+    onNodeClick,
+    onNodeHover,
+    onNodeDragStart,
+    onNodeDrag,
+    onNodeDragEnd,
+    selectedNodeIds,
+    debug
+  };
+  const svgHandlers = {};
+  if (onViewportClick) {
+    svgHandlers.onClick = (e) => {
+      const svg = e.currentTarget;
+      const rect = svg.getBoundingClientRect();
+      const x = vbX + (e.clientX - rect.left) / rect.width * vbW;
+      const y = vbY + (e.clientY - rect.top) / rect.height * vbH;
+      onViewportClick({ x, y });
+    };
+  }
+  if (onViewportZoom) {
+    svgHandlers.onWheel = (e) => {
+      e.preventDefault();
+      const svg = e.currentTarget;
+      const rect = svg.getBoundingClientRect();
+      const cx = vbX + (e.clientX - rect.left) / rect.width * vbW;
+      const cy = vbY + (e.clientY - rect.top) / rect.height * vbH;
+      const factor = e.deltaY > 0 ? 0.9 : 1.1;
+      onViewportZoom(zoom * factor, { x: cx, y: cy });
+    };
+  }
+  if (onViewportPan) {
+    svgHandlers.onMouseDown = (e) => {
+      if (e.target === e.currentTarget || e.target.tagName === "rect") {
+        dragRef.current = {
+          startX: e.clientX,
+          startY: e.clientY,
+          camX: camera.x,
+          camY: camera.y
+        };
+      }
+    };
+    svgHandlers.onMouseMove = (e) => {
+      if (!dragRef.current) return;
+      const dx = (e.clientX - dragRef.current.startX) / zoom;
+      const dy = (e.clientY - dragRef.current.startY) / zoom;
+      onViewportPan({ x: -dx, y: -dy });
+    };
+    svgHandlers.onMouseUp = () => {
+      dragRef.current = null;
+    };
+    svgHandlers.onMouseLeave = () => {
+      dragRef.current = null;
+    };
+  }
+  const defs = [];
+  if (scene.gradients?.length) {
+    for (const g of scene.gradients) {
+      defs.push(renderGradient(g));
+    }
+  }
+  if (scene.filters?.length) {
+    for (const f of scene.filters) {
+      defs.push(renderFilter(f));
+    }
+  }
+  return h2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox,
+      width,
+      height,
+      className,
+      style: {
+        backgroundColor: scene.background ?? "#1a1a2e",
+        display: "block",
+        ...containerStyle
+      },
+      ...svgHandlers
+    },
+    defs.length > 0 ? h2("defs", { key: "defs" }, ...defs) : null,
+    renderNode(scene.root, rctx)
+  );
+}
+
+// src/scene/tweens.ts
+var easingFunctions = {
+  "linear": (t) => t,
+  "ease-in": (t) => t * t * t,
+  "ease-out": (t) => 1 - Math.pow(1 - t, 3),
+  "ease-in-out": (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
+  "ease-in-quad": (t) => t * t,
+  "ease-out-quad": (t) => 1 - (1 - t) * (1 - t),
+  "ease-in-out-quad": (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2,
+  "ease-in-cubic": (t) => t * t * t,
+  "ease-out-cubic": (t) => 1 - Math.pow(1 - t, 3),
+  "ease-in-out-cubic": (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
+  "ease-in-elastic": (t) => {
+    if (t === 0 || t === 1) return t;
+    return -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * (2 * Math.PI / 3));
+  },
+  "ease-out-elastic": (t) => {
+    if (t === 0 || t === 1) return t;
+    return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * (2 * Math.PI / 3)) + 1;
+  },
+  "ease-in-bounce": (t) => 1 - bounceOut(1 - t),
+  "ease-out-bounce": bounceOut
+};
+function bounceOut(t) {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+  if (t < 1 / d1) return n1 * t * t;
+  if (t < 2 / d1) return n1 * (t -= 1.5 / d1) * t + 0.75;
+  if (t < 2.5 / d1) return n1 * (t -= 2.25 / d1) * t + 0.9375;
+  return n1 * (t -= 2.625 / d1) * t + 0.984375;
+}
+function getPath(obj, path) {
+  const parts = path.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current == null) return void 0;
+    current = current[part];
+  }
+  return current;
+}
+function setPath(obj, path, value) {
+  const parts = path.split(".");
+  if (parts.length === 1) {
+    return { ...obj, [parts[0]]: value };
+  }
+  const [head, ...rest] = parts;
+  return {
+    ...obj,
+    [head]: setPath(obj?.[head] ?? {}, rest.join("."), value)
+  };
+}
+function interpolateTween(tween, now) {
+  if (tween.startedAt == null) return null;
+  const delay = tween.delay ?? 0;
+  const elapsed = now - tween.startedAt - delay;
+  if (elapsed < 0) return tween.from;
+  const repeat = tween.repeat ?? 0;
+  const duration = tween.duration;
+  if (duration <= 0) return tween.to;
+  let iteration = Math.floor(elapsed / duration);
+  let progress = elapsed % duration / duration;
+  if (repeat >= 0 && iteration > repeat) {
+    if (tween.yoyo && repeat % 2 === 0) return tween.from;
+    return tween.to;
+  }
+  if (tween.yoyo && iteration % 2 === 1) {
+    progress = 1 - progress;
+  }
+  const easingName = tween.easing ?? "ease-in-out";
+  const easeFn = easingFunctions[easingName] ?? easingFunctions["linear"];
+  const t = easeFn(Math.max(0, Math.min(1, progress)));
+  return tween.from + (tween.to - tween.from) * t;
+}
+
+// src/scene/renderer-pixi.ts
+function getReact4() {
+  const R = globalThis.React;
+  if (!R) throw new Error("React is not available.");
+  return R;
+}
+function h3(type, props, ...children) {
+  return getReact4().createElement(type, props, ...children);
+}
+var _PIXI = null;
+var _pixiLoadAttempted = false;
+var _pixiLoadPromise = null;
+function getPixi() {
+  if (_PIXI) return _PIXI;
+  if (globalThis.__PIXI) {
+    _PIXI = globalThis.__PIXI;
+    return _PIXI;
+  }
+  if (globalThis.PIXI) {
+    _PIXI = globalThis.PIXI;
+    return _PIXI;
+  }
+  return null;
+}
+async function loadPixi() {
+  if (_PIXI) return _PIXI;
+  if (_pixiLoadPromise) return _pixiLoadPromise;
+  _pixiLoadPromise = (async () => {
+    const g = getPixi();
+    if (g) return g;
+    if (_pixiLoadAttempted) return null;
+    _pixiLoadAttempted = true;
+    try {
+      const mod = await import(
+        /* webpackIgnore: true */
+        "pixi.js"
+      );
+      _PIXI = mod.default || mod;
+      return _PIXI;
+    } catch {
+      try {
+        const mod = await import(
+          /* webpackIgnore: true */
+          "pixi"
+        );
+        _PIXI = mod.default || mod;
+        return _PIXI;
+      } catch {
+        return null;
+      }
+    }
+  })();
+  const result = await _pixiLoadPromise;
+  _pixiLoadPromise = null;
+  return result;
+}
+function resolveColor(color, gradients) {
+  if (!color) return 0;
+  const gradRef = color.match(/^url\(#(.+)\)$/);
+  if (gradRef && gradients) {
+    const grad = gradients.find((g) => g.id === gradRef[1]);
+    if (grad && grad.stops.length > 0) {
+      return grad.stops[0].color;
+    }
+  }
+  return color;
+}
+function resolveGradientFill(color, gradients, PIXI) {
+  if (!color) return void 0;
+  const gradRef = color.match(/^url\(#(.+)\)$/);
+  if (!gradRef || !gradients) return color;
+  const grad = gradients.find((g) => g.id === gradRef[1]);
+  if (!grad || grad.stops.length === 0) return color;
+  if (PIXI && PIXI.FillGradient) {
+    try {
+      if (grad.type === "linear") {
+        const lg = grad;
+        const fg = new PIXI.FillGradient({
+          type: "linear",
+          start: { x: lg.x1, y: lg.y1 },
+          end: { x: lg.x2, y: lg.y2 },
+          colorStops: lg.stops.map((s) => ({ offset: s.offset, color: s.color }))
+        });
+        return fg;
+      }
+    } catch {
+    }
+  }
+  return grad.stops[0].color;
+}
+function parseSvgPath(d) {
+  const commands = [];
+  const re = /([MmLlHhVvCcSsQqTtAaZz])/;
+  const tokens = d.split(re).filter((s) => s.trim().length > 0);
+  let i = 0;
+  let curX = 0, curY = 0;
+  let startX = 0, startY = 0;
+  while (i < tokens.length) {
+    const cmd = tokens[i];
+    i++;
+    const nums = [];
+    if (i < tokens.length && !re.test(tokens[i])) {
+      const raw = tokens[i].trim().replace(/,/g, " ").replace(/-/g, " -").replace(/\s+/g, " ").trim();
+      if (raw.length > 0) {
+        nums.push(...raw.split(" ").filter((s) => s.length > 0).map(Number));
+      }
+      i++;
+    }
+    switch (cmd) {
+      case "M":
+        for (let j = 0; j < nums.length; j += 2) {
+          curX = nums[j];
+          curY = nums[j + 1];
+          if (j === 0) {
+            startX = curX;
+            startY = curY;
+          }
+          commands.push({ cmd: "M", x: curX, y: curY });
+        }
+        break;
+      case "m":
+        for (let j = 0; j < nums.length; j += 2) {
+          curX += nums[j];
+          curY += nums[j + 1];
+          if (j === 0) {
+            startX = curX;
+            startY = curY;
+          }
+          commands.push({ cmd: "M", x: curX, y: curY });
+        }
+        break;
+      case "L":
+        for (let j = 0; j < nums.length; j += 2) {
+          curX = nums[j];
+          curY = nums[j + 1];
+          commands.push({ cmd: "L", x: curX, y: curY });
+        }
+        break;
+      case "l":
+        for (let j = 0; j < nums.length; j += 2) {
+          curX += nums[j];
+          curY += nums[j + 1];
+          commands.push({ cmd: "L", x: curX, y: curY });
+        }
+        break;
+      case "H":
+        for (let j = 0; j < nums.length; j++) {
+          curX = nums[j];
+          commands.push({ cmd: "L", x: curX, y: curY });
+        }
+        break;
+      case "h":
+        for (let j = 0; j < nums.length; j++) {
+          curX += nums[j];
+          commands.push({ cmd: "L", x: curX, y: curY });
+        }
+        break;
+      case "V":
+        for (let j = 0; j < nums.length; j++) {
+          curY = nums[j];
+          commands.push({ cmd: "L", x: curX, y: curY });
+        }
+        break;
+      case "v":
+        for (let j = 0; j < nums.length; j++) {
+          curY += nums[j];
+          commands.push({ cmd: "L", x: curX, y: curY });
+        }
+        break;
+      case "C":
+        for (let j = 0; j < nums.length; j += 6) {
+          commands.push({ cmd: "C", x1: nums[j], y1: nums[j + 1], x2: nums[j + 2], y2: nums[j + 3], x: nums[j + 4], y: nums[j + 5] });
+          curX = nums[j + 4];
+          curY = nums[j + 5];
+        }
+        break;
+      case "c":
+        for (let j = 0; j < nums.length; j += 6) {
+          commands.push({ cmd: "C", x1: curX + nums[j], y1: curY + nums[j + 1], x2: curX + nums[j + 2], y2: curY + nums[j + 3], x: curX + nums[j + 4], y: curY + nums[j + 5] });
+          curX += nums[j + 4];
+          curY += nums[j + 5];
+        }
+        break;
+      case "Q":
+        for (let j = 0; j < nums.length; j += 4) {
+          commands.push({ cmd: "Q", x1: nums[j], y1: nums[j + 1], x: nums[j + 2], y: nums[j + 3] });
+          curX = nums[j + 2];
+          curY = nums[j + 3];
+        }
+        break;
+      case "q":
+        for (let j = 0; j < nums.length; j += 4) {
+          commands.push({ cmd: "Q", x1: curX + nums[j], y1: curY + nums[j + 1], x: curX + nums[j + 2], y: curY + nums[j + 3] });
+          curX += nums[j + 2];
+          curY += nums[j + 3];
+        }
+        break;
+      case "S":
+      case "s": {
+        for (let j = 0; j < nums.length; j += 4) {
+          const abs = cmd === "S";
+          const x2 = abs ? nums[j] : curX + nums[j];
+          const y2 = abs ? nums[j + 1] : curY + nums[j + 1];
+          const x = abs ? nums[j + 2] : curX + nums[j + 2];
+          const y = abs ? nums[j + 3] : curY + nums[j + 3];
+          commands.push({ cmd: "C", x1: curX, y1: curY, x2, y2, x, y });
+          curX = x;
+          curY = y;
+        }
+        break;
+      }
+      case "T":
+      case "t": {
+        for (let j = 0; j < nums.length; j += 2) {
+          const abs = cmd === "T";
+          const x = abs ? nums[j] : curX + nums[j];
+          const y = abs ? nums[j + 1] : curY + nums[j + 1];
+          commands.push({ cmd: "Q", x1: curX, y1: curY, x, y });
+          curX = x;
+          curY = y;
+        }
+        break;
+      }
+      case "A":
+      case "a": {
+        for (let j = 0; j < nums.length; j += 7) {
+          const abs = cmd === "A";
+          const ex = abs ? nums[j + 5] : curX + nums[j + 5];
+          const ey = abs ? nums[j + 6] : curY + nums[j + 6];
+          commands.push({ cmd: "L", x: ex, y: ey });
+          curX = ex;
+          curY = ey;
+        }
+        break;
+      }
+      case "Z":
+      case "z":
+        commands.push({ cmd: "Z" });
+        curX = startX;
+        curY = startY;
+        break;
+    }
+  }
+  return commands;
+}
+function drawSvgPath(g, d) {
+  const cmds = parseSvgPath(d);
+  for (const c of cmds) {
+    switch (c.cmd) {
+      case "M":
+        g.moveTo(c.x, c.y);
+        break;
+      case "L":
+        g.lineTo(c.x, c.y);
+        break;
+      case "C":
+        g.bezierCurveTo(c.x1, c.y1, c.x2, c.y2, c.x, c.y);
+        break;
+      case "Q":
+        g.quadraticCurveTo(c.x1, c.y1, c.x, c.y);
+        break;
+      case "Z":
+        g.closePath();
+        break;
+    }
+  }
+}
+function getMeta(obj) {
+  return obj?.__vv;
+}
+function setMeta(obj, meta) {
+  obj.__vv = meta;
+}
+function nodeSnapshot(node) {
+  if (node.type === "group") {
+    const { children, ...rest } = node;
+    return JSON.stringify(rest);
+  }
+  return JSON.stringify(node);
+}
+function applyTransform(obj, t) {
+  if (!t) {
+    obj.position.set(0, 0);
+    obj.rotation = 0;
+    obj.scale.set(1, 1);
+    return;
+  }
+  obj.position.set(t.x ?? 0, t.y ?? 0);
+  obj.rotation = (t.rotation ?? 0) * Math.PI / 180;
+  obj.scale.set(t.scaleX ?? 1, t.scaleY ?? 1);
+}
+function applyStyle(obj, s) {
+  if (!obj) return;
+  obj.alpha = s?.opacity ?? 1;
+  obj.visible = s?.visible !== false;
+  if (s?.cursor && obj.cursor !== void 0) {
+    obj.cursor = s.cursor;
+  }
+}
+function applyGraphicsStyle(g, style, gradients, PIXI) {
+  const fill = style?.fill;
+  const stroke = style?.stroke;
+  const strokeWidth = style?.strokeWidth ?? 1;
+  if (fill && fill !== "none") {
+    const resolved = resolveGradientFill(fill, gradients, PIXI);
+    if (typeof resolved === "object" && resolved !== null && resolved.constructor && resolved.constructor.name === "FillGradient") {
+      g.fill(resolved);
+    } else {
+      const fillAlpha = style?.fillOpacity ?? 1;
+      g.fill({ color: resolved, alpha: fillAlpha });
+    }
+  }
+  if (stroke && stroke !== "none") {
+    const strokeAlpha = style?.strokeOpacity ?? 1;
+    const strokeOpts = {
+      width: strokeWidth,
+      color: resolveColor(stroke, gradients),
+      alpha: strokeAlpha
+    };
+    if (style?.strokeLinecap) strokeOpts.cap = mapLinecap(style.strokeLinecap);
+    if (style?.strokeLinejoin) strokeOpts.join = mapLinejoin(style.strokeLinejoin);
+    g.stroke(strokeOpts);
+  }
+}
+function mapLinecap(cap) {
+  switch (cap) {
+    case "round":
+      return "round";
+    case "square":
+      return "square";
+    default:
+      return "butt";
+  }
+}
+function mapLinejoin(join) {
+  switch (join) {
+    case "round":
+      return "round";
+    case "bevel":
+      return "bevel";
+    default:
+      return "miter";
+  }
+}
+function createDisplayObject(node, ctx) {
+  const PIXI = ctx.PIXI;
+  let obj;
+  switch (node.type) {
+    case "rect": {
+      const n = node;
+      const g = new PIXI.Graphics();
+      if (n.rx || n.ry) {
+        g.roundRect(-n.width / 2, -n.height / 2, n.width, n.height, n.rx ?? n.ry ?? 0);
+      } else {
+        g.rect(-n.width / 2, -n.height / 2, n.width, n.height);
+      }
+      applyGraphicsStyle(g, n.style, ctx.gradients, PIXI);
+      obj = g;
+      break;
+    }
+    case "circle": {
+      const n = node;
+      const g = new PIXI.Graphics();
+      g.circle(0, 0, n.radius);
+      applyGraphicsStyle(g, n.style, ctx.gradients, PIXI);
+      obj = g;
+      break;
+    }
+    case "ellipse": {
+      const n = node;
+      const g = new PIXI.Graphics();
+      g.ellipse(0, 0, n.rx, n.ry);
+      applyGraphicsStyle(g, n.style, ctx.gradients, PIXI);
+      obj = g;
+      break;
+    }
+    case "line": {
+      const n = node;
+      const g = new PIXI.Graphics();
+      g.moveTo(0, 0);
+      g.lineTo(n.x2, n.y2);
+      const style = { ...n.style ?? {}, fill: void 0 };
+      applyGraphicsStyle(g, style, ctx.gradients, PIXI);
+      if (!n.style?.stroke) {
+        g.stroke({ width: n.style?.strokeWidth ?? 1, color: 16777215 });
+      }
+      obj = g;
+      break;
+    }
+    case "polyline": {
+      const n = node;
+      const g = new PIXI.Graphics();
+      if (n.points.length > 0) {
+        g.moveTo(n.points[0].x, n.points[0].y);
+        for (let i = 1; i < n.points.length; i++) {
+          g.lineTo(n.points[i].x, n.points[i].y);
+        }
+      }
+      const style = { ...n.style ?? {}, fill: n.style?.fill ?? "none" };
+      applyGraphicsStyle(g, style, ctx.gradients, PIXI);
+      if (!n.style?.stroke) {
+        g.stroke({ width: n.style?.strokeWidth ?? 1, color: 16777215 });
+      }
+      obj = g;
+      break;
+    }
+    case "polygon": {
+      const n = node;
+      const g = new PIXI.Graphics();
+      if (n.points.length > 0) {
+        const flat = [];
+        for (const p of n.points) {
+          flat.push(p.x, p.y);
+        }
+        g.poly(flat, true);
+      }
+      applyGraphicsStyle(g, n.style, ctx.gradients, PIXI);
+      obj = g;
+      break;
+    }
+    case "path": {
+      const n = node;
+      const g = new PIXI.Graphics();
+      drawSvgPath(g, n.d);
+      applyGraphicsStyle(g, n.style, ctx.gradients, PIXI);
+      obj = g;
+      break;
+    }
+    case "text": {
+      const n = node;
+      const ts = n.style;
+      const pixiStyle = {
+        fontSize: ts?.fontSize ?? 16,
+        fontFamily: ts?.fontFamily ?? "Arial",
+        fontWeight: ts?.fontWeight != null ? String(ts.fontWeight) : "normal",
+        fill: resolveColor(ts?.fill ?? "#ffffff", ctx.gradients),
+        letterSpacing: ts?.letterSpacing ?? 0
+      };
+      if (ts?.stroke && ts.stroke !== "none") {
+        pixiStyle.stroke = {
+          color: resolveColor(ts.stroke, ctx.gradients),
+          width: ts.strokeWidth ?? 1
+        };
+      }
+      const text = new PIXI.Text({ text: n.text, style: pixiStyle });
+      const anchor = ts?.textAnchor ?? "start";
+      switch (anchor) {
+        case "middle":
+          text.anchor.set(0.5, 0.5);
+          break;
+        case "end":
+          text.anchor.set(1, 0.5);
+          break;
+        default:
+          text.anchor.set(0, 0.5);
+          break;
+      }
+      const baseline = ts?.dominantBaseline ?? "auto";
+      switch (baseline) {
+        case "middle":
+          text.anchor.y = 0.5;
+          break;
+        case "hanging":
+          text.anchor.y = 0;
+          break;
+        case "text-top":
+          text.anchor.y = 0;
+          break;
+        default:
+          text.anchor.y = 0.8;
+          break;
+      }
+      obj = text;
+      break;
+    }
+    case "image": {
+      const n = node;
+      let texture;
+      if (ctx.textureCache.has(n.href)) {
+        texture = ctx.textureCache.get(n.href);
+      } else {
+        try {
+          texture = PIXI.Texture.from(n.href);
+          ctx.textureCache.set(n.href, texture);
+        } catch {
+          const g = new PIXI.Graphics();
+          g.rect(-n.width / 2, -n.height / 2, n.width, n.height);
+          g.fill({ color: 3355443 });
+          g.stroke({ width: 1, color: 6710886 });
+          obj = g;
+          break;
+        }
+      }
+      const sprite = new PIXI.Sprite(texture);
+      sprite.width = n.width;
+      sprite.height = n.height;
+      sprite.anchor.set(0.5, 0.5);
+      obj = sprite;
+      break;
+    }
+    case "group": {
+      const container = new PIXI.Container();
+      const n = node;
+      for (const child of n.children) {
+        const childObj = createDisplayObject(child, ctx);
+        if (childObj) {
+          applyTransform(childObj, child.transform);
+          applyStyle(childObj, child.style);
+          setupInteraction(childObj, child, ctx);
+          setMeta(childObj, { nodeId: child.id, nodeType: child.type, snapshot: nodeSnapshot(child) });
+          ctx.nodeMap.set(child.id, childObj);
+          container.addChild(childObj);
+        }
+      }
+      obj = container;
+      break;
+    }
+    case "sprite": {
+      const n = node;
+      let texture;
+      if (ctx.textureCache.has(n.href)) {
+        texture = ctx.textureCache.get(n.href);
+      } else {
+        try {
+          texture = PIXI.Texture.from(n.href);
+          ctx.textureCache.set(n.href, texture);
+        } catch {
+          const g = new PIXI.Graphics();
+          g.rect(0, 0, n.frameWidth, n.frameHeight);
+          g.fill({ color: 3355443 });
+          obj = g;
+          break;
+        }
+      }
+      const cols = n.columns ?? Math.floor(1e3 / n.frameWidth);
+      const frame = n.frame ?? 0;
+      const col = frame % cols;
+      const row = Math.floor(frame / cols);
+      try {
+        const frameTexture = new PIXI.Texture({
+          source: texture.source,
+          frame: new PIXI.Rectangle(
+            col * n.frameWidth,
+            row * n.frameHeight,
+            n.frameWidth,
+            n.frameHeight
+          )
+        });
+        const sprite = new PIXI.Sprite(frameTexture);
+        obj = sprite;
+      } catch {
+        const sprite = new PIXI.Sprite(texture);
+        sprite.width = n.frameWidth;
+        sprite.height = n.frameHeight;
+        obj = sprite;
+      }
+      break;
+    }
+    case "tilemap": {
+      const n = node;
+      const container = new PIXI.Container();
+      let baseTexture;
+      if (ctx.textureCache.has(n.href)) {
+        baseTexture = ctx.textureCache.get(n.href);
+      } else {
+        try {
+          baseTexture = PIXI.Texture.from(n.href);
+          ctx.textureCache.set(n.href, baseTexture);
+        } catch {
+          obj = container;
+          break;
+        }
+      }
+      for (let row = 0; row < n.height; row++) {
+        for (let col = 0; col < n.width; col++) {
+          const tileIdx = n.data[row]?.[col];
+          if (tileIdx == null || tileIdx < 0) continue;
+          const srcCol = tileIdx % n.columns;
+          const srcRow = Math.floor(tileIdx / n.columns);
+          try {
+            const tileTexture = new PIXI.Texture({
+              source: baseTexture.source,
+              frame: new PIXI.Rectangle(
+                srcCol * n.tileWidth,
+                srcRow * n.tileHeight,
+                n.tileWidth,
+                n.tileHeight
+              )
+            });
+            const tileSprite = new PIXI.Sprite(tileTexture);
+            tileSprite.position.set(col * n.tileWidth, row * n.tileHeight);
+            container.addChild(tileSprite);
+          } catch {
+          }
+        }
+      }
+      obj = container;
+      break;
+    }
+    case "particles": {
+      const n = node;
+      const container = new PIXI.Container();
+      const particles = n._particles ?? [];
+      for (let i = 0; i < particles.length; i++) {
+        const p = particles[i];
+        const emitter = n.emitters[0];
+        const fadeOut = emitter?.fadeOut !== false;
+        const alpha = fadeOut ? Math.max(0, 1 - p.age / p.lifetime) : 1;
+        const shape = emitter?.shape ?? "circle";
+        const g = new PIXI.Graphics();
+        if (shape === "square") {
+          g.rect(-p.size / 2, -p.size / 2, p.size, p.size);
+        } else {
+          g.circle(0, 0, p.size / 2);
+        }
+        g.fill({ color: p.color, alpha });
+        g.position.set(p.x, p.y);
+        container.addChild(g);
+      }
+      obj = container;
+      break;
+    }
+    default:
+      return null;
+  }
+  return obj;
+}
+function setupInteraction(obj, node, ctx) {
+  if (!node.interactive) {
+    obj.eventMode = "auto";
+    return;
+  }
+  obj.eventMode = "static";
+  if (node.style?.cursor) {
+    obj.cursor = node.style.cursor;
+  } else {
+    obj.cursor = "pointer";
+  }
+  obj.removeAllListeners?.();
+  if (ctx.onNodeClick) {
+    obj.on("pointerdown", (e) => {
+      const global = e.global || e.data?.global;
+      if (global) {
+        ctx.onNodeClick(node.id, { x: global.x, y: global.y });
+      }
+    });
+  }
+  if (ctx.onNodeHover) {
+    obj.on("pointerenter", () => ctx.onNodeHover(node.id));
+    obj.on("pointerleave", () => ctx.onNodeHover(null));
+  }
+  if (ctx.onNodeDragStart || ctx.onNodeDrag || ctx.onNodeDragEnd) {
+    let dragging = false;
+    obj.on("pointerdown", (e) => {
+      dragging = true;
+      const global = e.global || e.data?.global;
+      if (global && ctx.onNodeDragStart) {
+        ctx.onNodeDragStart(node.id, { x: global.x, y: global.y });
+      }
+      e.stopPropagation?.();
+    });
+    obj.on("globalpointermove", (e) => {
+      if (!dragging) return;
+      const global = e.global || e.data?.global;
+      if (global && ctx.onNodeDrag) {
+        ctx.onNodeDrag(node.id, { x: global.x, y: global.y });
+      }
+    });
+    obj.on("pointerup", (e) => {
+      if (!dragging) return;
+      dragging = false;
+      const global = e.global || e.data?.global;
+      if (global && ctx.onNodeDragEnd) {
+        ctx.onNodeDragEnd(node.id, { x: global.x, y: global.y });
+      }
+    });
+    obj.on("pointerupoutside", (e) => {
+      if (!dragging) return;
+      dragging = false;
+      const global = e.global || e.data?.global;
+      if (global && ctx.onNodeDragEnd) {
+        ctx.onNodeDragEnd(node.id, { x: global.x, y: global.y });
+      }
+    });
+  }
+}
+function syncNode(node, parent, ctx) {
+  const existing = ctx.nodeMap.get(node.id);
+  const snap = nodeSnapshot(node);
+  if (existing) {
+    const meta = getMeta(existing);
+    if (meta && meta.snapshot === snap && node.type !== "group") {
+      return;
+    }
+    if (meta && meta.nodeType !== node.type) {
+      removeDisplayObject(existing, node.id, ctx);
+    } else if (node.type === "group") {
+      applyTransform(existing, node.transform);
+      applyStyle(existing, node.style);
+      setMeta(existing, { nodeId: node.id, nodeType: node.type, snapshot: snap });
+      syncGroupChildren(node, existing, ctx);
+      return;
+    } else {
+      removeDisplayObject(existing, node.id, ctx);
+    }
+  }
+  const obj = createDisplayObject(node, ctx);
+  if (!obj) return;
+  applyTransform(obj, node.transform);
+  applyStyle(obj, node.style);
+  setupInteraction(obj, node, ctx);
+  setMeta(obj, { nodeId: node.id, nodeType: node.type, snapshot: snap });
+  ctx.nodeMap.set(node.id, obj);
+  parent.addChild(obj);
+}
+function syncGroupChildren(groupNode, container, ctx) {
+  const childIds = new Set(groupNode.children.map((c) => c.id));
+  const toRemove = [];
+  for (let i = container.children.length - 1; i >= 0; i--) {
+    const child = container.children[i];
+    const meta = getMeta(child);
+    if (meta && !childIds.has(meta.nodeId)) {
+      toRemove.push(meta.nodeId);
+    }
+  }
+  for (const id of toRemove) {
+    removeDisplayObject(ctx.nodeMap.get(id), id, ctx);
+  }
+  for (let i = 0; i < groupNode.children.length; i++) {
+    const childNode = groupNode.children[i];
+    syncNode(childNode, container, ctx);
+    const childObj = ctx.nodeMap.get(childNode.id);
+    if (childObj && childObj.parent === container) {
+      const currentIndex = container.getChildIndex(childObj);
+      if (currentIndex !== i && i < container.children.length) {
+        container.setChildIndex(childObj, Math.min(i, container.children.length - 1));
+      }
+    }
+  }
+}
+function removeDisplayObject(obj, nodeId, ctx) {
+  if (!obj) return;
+  if (obj.children) {
+    for (let i = obj.children.length - 1; i >= 0; i--) {
+      const child = obj.children[i];
+      const meta = getMeta(child);
+      if (meta) {
+        removeDisplayObject(child, meta.nodeId, ctx);
+      }
+    }
+  }
+  obj.removeAllListeners?.();
+  obj.removeFromParent?.();
+  obj.destroy?.({ children: true });
+  ctx.nodeMap.delete(nodeId);
+}
+function drawSelectionOverlays(ctx, selectedIds) {
+  const layer = ctx.selectionLayer;
+  if (!layer) return;
+  while (layer.children.length > 0) {
+    const child = layer.children[0];
+    child.removeFromParent();
+    child.destroy?.();
+  }
+  if (!selectedIds || selectedIds.length === 0) return;
+  const PIXI = ctx.PIXI;
+  for (const nodeId of selectedIds) {
+    const obj = ctx.nodeMap.get(nodeId);
+    if (!obj) continue;
+    try {
+      const bounds = obj.getBounds();
+      if (!bounds || bounds.width === 0 || bounds.height === 0) continue;
+      const g = new PIXI.Graphics();
+      const pad = 4;
+      const x = bounds.x - pad;
+      const y = bounds.y - pad;
+      const w = bounds.width + pad * 2;
+      const hh = bounds.height + pad * 2;
+      drawDashedRect(g, x, y, w, hh, 4, 2);
+      g.stroke({ width: 2, color: 6514417 });
+      layer.addChild(g);
+    } catch {
+    }
+  }
+}
+function drawDashedRect(g, x, y, w, h7, dashLen, gapLen) {
+  const edges = [
+    { sx: x, sy: y, ex: x + w, ey: y },
+    // top
+    { sx: x + w, sy: y, ex: x + w, ey: y + h7 },
+    // right
+    { sx: x + w, sy: y + h7, ex: x, ey: y + h7 },
+    // bottom
+    { sx: x, sy: y + h7, ex: x, ey: y }
+    // left
+  ];
+  for (const edge of edges) {
+    const dx = edge.ex - edge.sx;
+    const dy = edge.ey - edge.sy;
+    const length = Math.sqrt(dx * dx + dy * dy);
+    if (length === 0) continue;
+    const ux = dx / length;
+    const uy = dy / length;
+    let dist2 = 0;
+    let drawing = true;
+    while (dist2 < length) {
+      const segLen = drawing ? dashLen : gapLen;
+      const endDist = Math.min(dist2 + segLen, length);
+      if (drawing) {
+        g.moveTo(edge.sx + ux * dist2, edge.sy + uy * dist2);
+        g.lineTo(edge.sx + ux * endDist, edge.sy + uy * endDist);
+      }
+      dist2 = endDist;
+      drawing = !drawing;
+    }
+  }
+}
+function drawDebugLabels(ctx, rootNode) {
+  const layer = ctx.debugLayer;
+  if (!layer) return;
+  while (layer.children.length > 0) {
+    const child = layer.children[0];
+    child.removeFromParent();
+    child.destroy?.();
+  }
+  const PIXI = ctx.PIXI;
+  function addLabel(node) {
+    const obj = ctx.nodeMap.get(node.id);
+    if (!obj) return;
+    try {
+      const bounds = obj.getBounds();
+      const label = new PIXI.Text({
+        text: node.id,
+        style: {
+          fontSize: 10,
+          fill: "#94a3b8",
+          fontFamily: "monospace"
+        }
+      });
+      label.anchor.set(0.5, 1);
+      label.position.set(
+        bounds.x + bounds.width / 2,
+        bounds.y - 4
+      );
+      layer.addChild(label);
+    } catch {
+    }
+    if (node.type === "group") {
+      for (const child of node.children) {
+        addLabel(child);
+      }
+    }
+  }
+  for (const child of rootNode.children) {
+    addLabel(child);
+  }
+}
+function applyTweens(rootNode, ctx, now) {
+  function processTween(node) {
+    if (!node.tween || !node.tween.startedAt) {
+      if (node.type === "group") {
+        for (const child of node.children) {
+          processTween(child);
+        }
+      }
+      return;
+    }
+    const value = interpolateTween(node.tween, now);
+    if (value === null) {
+      if (node.type === "group") {
+        for (const child of node.children) {
+          processTween(child);
+        }
+      }
+      return;
+    }
+    const obj = ctx.nodeMap.get(node.id);
+    if (!obj) return;
+    const prop = node.tween.property;
+    if (prop === "transform.x") {
+      obj.position.x = value;
+    } else if (prop === "transform.y") {
+      obj.position.y = value;
+    } else if (prop === "transform.rotation") {
+      obj.rotation = value * Math.PI / 180;
+    } else if (prop === "transform.scaleX") {
+      obj.scale.x = value;
+    } else if (prop === "transform.scaleY") {
+      obj.scale.y = value;
+    } else if (prop === "style.opacity") {
+      obj.alpha = value;
+    }
+    if (node.type === "group") {
+      for (const child of node.children) {
+        processTween(child);
+      }
+    }
+  }
+  for (const child of rootNode.children) {
+    processTween(child);
+  }
+}
+function tickParticlesInternal(node, dt) {
+  const particles = [...node._particles ?? []];
+  const maxParticles = node.maxParticles ?? 200;
+  for (let i = particles.length - 1; i >= 0; i--) {
+    const p = particles[i];
+    p.age += dt;
+    if (p.age >= p.lifetime) {
+      particles.splice(i, 1);
+      continue;
+    }
+    const gravity = node.emitters[0]?.gravity ?? 0;
+    p.vy += gravity * (dt / 1e3);
+    p.x += p.vx * (dt / 1e3);
+    p.y += p.vy * (dt / 1e3);
+  }
+  for (const emitter of node.emitters) {
+    const count = Math.floor(emitter.rate * (dt / 1e3));
+    for (let i = 0; i < count && particles.length < maxParticles; i++) {
+      const angle = emitter.direction.min + Math.random() * (emitter.direction.max - emitter.direction.min);
+      const speed = emitter.speed.min + Math.random() * (emitter.speed.max - emitter.speed.min);
+      const rad = angle * Math.PI / 180;
+      const colors = emitter.color ? Array.isArray(emitter.color) ? emitter.color : [emitter.color] : ["#ffffff"];
+      const size = emitter.size ? emitter.size.min + Math.random() * (emitter.size.max - emitter.size.min) : 4;
+      particles.push({
+        x: emitter.x,
+        y: emitter.y,
+        vx: Math.cos(rad) * speed,
+        vy: Math.sin(rad) * speed,
+        age: 0,
+        lifetime: emitter.lifetime,
+        size,
+        color: colors[Math.floor(Math.random() * colors.length)]
+      });
+    }
+  }
+  return particles;
+}
+function PixiSceneRenderer(props) {
+  const React4 = getReact4();
+  const {
+    scene,
+    width = scene.width ?? 800,
+    height = scene.height ?? 600,
+    className,
+    style: containerStyle,
+    onNodeClick,
+    onNodeHover,
+    onNodeDragStart,
+    onNodeDrag,
+    onNodeDragEnd,
+    onViewportClick,
+    onViewportPan,
+    onViewportZoom,
+    selectedNodeIds,
+    debug
+  } = props;
+  const containerRef = React4.useRef(null);
+  const appRef = React4.useRef(null);
+  const ctxRef = React4.useRef(null);
+  const sceneRef = React4.useRef(scene);
+  const propsRef = React4.useRef(props);
+  const initializingRef = React4.useRef(false);
+  const initializedRef = React4.useRef(false);
+  const pixiAvailableRef = React4.useRef(null);
+  const [, forceUpdate] = React4.useState(0);
+  sceneRef.current = scene;
+  propsRef.current = props;
+  React4.useEffect(() => {
+    if (initializingRef.current || initializedRef.current) return;
+    initializingRef.current = true;
+    let cancelled = false;
+    (async () => {
+      const PIXI = await loadPixi();
+      if (cancelled) return;
+      if (!PIXI) {
+        pixiAvailableRef.current = false;
+        initializingRef.current = false;
+        forceUpdate((n) => n + 1);
+        return;
+      }
+      pixiAvailableRef.current = true;
+      const container = containerRef.current;
+      if (!container || cancelled) {
+        initializingRef.current = false;
+        return;
+      }
+      const app = new PIXI.Application();
+      try {
+        await app.init({
+          width,
+          height,
+          background: scene.background ?? "#1a1a2e",
+          antialias: true,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true
+        });
+      } catch (err) {
+        pixiAvailableRef.current = false;
+        initializingRef.current = false;
+        forceUpdate((n) => n + 1);
+        return;
+      }
+      if (cancelled) {
+        app.destroy(true);
+        return;
+      }
+      const canvas = app.canvas;
+      if (canvas) {
+        canvas.style.display = "block";
+        container.appendChild(canvas);
+      }
+      const rootContainer = new PIXI.Container();
+      const selectionLayer = new PIXI.Container();
+      const debugLayer = new PIXI.Container();
+      app.stage.addChild(rootContainer);
+      app.stage.addChild(selectionLayer);
+      app.stage.addChild(debugLayer);
+      app.stage.eventMode = "static";
+      app.stage.hitArea = new PIXI.Rectangle(0, 0, width, height);
+      const ctx = {
+        PIXI,
+        app,
+        gradients: scene.gradients,
+        onNodeClick,
+        onNodeHover,
+        onNodeDragStart,
+        onNodeDrag,
+        onNodeDragEnd,
+        selectedNodeIds,
+        debug,
+        nodeMap: /* @__PURE__ */ new Map(),
+        textureCache: /* @__PURE__ */ new Map(),
+        selectionLayer,
+        debugLayer
+      };
+      appRef.current = app;
+      ctxRef.current = ctx;
+      syncScene(sceneRef.current, rootContainer, ctx, PIXI, width, height);
+      setupViewportInteraction(app, canvas, PIXI, width, height);
+      app.ticker.add((ticker) => {
+        const dt = ticker.deltaMS ?? ticker.deltaTime * (1e3 / 60);
+        const now = performance.now();
+        const currentScene = sceneRef.current;
+        const currentCtx = ctxRef.current;
+        if (!currentCtx) return;
+        applyTweens(currentScene.root, currentCtx, now);
+        tickAllParticles(currentScene.root, currentCtx, dt);
+      });
+      initializedRef.current = true;
+      initializingRef.current = false;
+      forceUpdate((n) => n + 1);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const viewportStateRef = React4.useRef({
+    isPanning: false,
+    panStartX: 0,
+    panStartY: 0
+  });
+  function setupViewportInteraction(app, canvas, PIXI, w, h7) {
+    if (!canvas) return;
+    canvas.addEventListener("wheel", (e) => {
+      e.preventDefault();
+      const currentProps = propsRef.current;
+      if (!currentProps.onViewportZoom) return;
+      const rect = canvas.getBoundingClientRect();
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+      const currentScene = sceneRef.current;
+      const camera = currentScene.camera ?? { x: w / 2, y: h7 / 2, zoom: 1 };
+      const zoom = camera.zoom || 1;
+      const factor = e.deltaY > 0 ? 0.9 : 1.1;
+      const worldX = camera.x + (cx - w / 2) / zoom;
+      const worldY = camera.y + (cy - h7 / 2) / zoom;
+      currentProps.onViewportZoom(zoom * factor, { x: worldX, y: worldY });
+    }, { passive: false });
+    canvas.addEventListener("pointerdown", (e) => {
+      const currentProps = propsRef.current;
+      if (currentProps.onViewportPan) {
+        viewportStateRef.current.isPanning = true;
+        viewportStateRef.current.panStartX = e.clientX;
+        viewportStateRef.current.panStartY = e.clientY;
+      }
+      if (currentProps.onViewportClick) {
+        const rect = canvas.getBoundingClientRect();
+        const currentScene = sceneRef.current;
+        const camera = currentScene.camera ?? { x: w / 2, y: h7 / 2, zoom: 1 };
+        const zoom = camera.zoom || 1;
+        const cx = e.clientX - rect.left;
+        const cy = e.clientY - rect.top;
+        const worldX = camera.x + (cx - w / 2) / zoom;
+        const worldY = camera.y + (cy - h7 / 2) / zoom;
+        currentProps.onViewportClick({ x: worldX, y: worldY });
+      }
+    });
+    canvas.addEventListener("pointermove", (e) => {
+      if (!viewportStateRef.current.isPanning) return;
+      const currentProps = propsRef.current;
+      if (!currentProps.onViewportPan) return;
+      const currentScene = sceneRef.current;
+      const camera = currentScene.camera ?? { x: w / 2, y: h7 / 2, zoom: 1 };
+      const zoom = camera.zoom || 1;
+      const dx = (e.clientX - viewportStateRef.current.panStartX) / zoom;
+      const dy = (e.clientY - viewportStateRef.current.panStartY) / zoom;
+      viewportStateRef.current.panStartX = e.clientX;
+      viewportStateRef.current.panStartY = e.clientY;
+      currentProps.onViewportPan({ x: -dx, y: -dy });
+    });
+    canvas.addEventListener("pointerup", () => {
+      viewportStateRef.current.isPanning = false;
+    });
+    canvas.addEventListener("pointerleave", () => {
+      viewportStateRef.current.isPanning = false;
+    });
+  }
+  function syncScene(scene2, rootContainer, ctx, PIXI, w, h7) {
+    ctx.gradients = scene2.gradients;
+    ctx.onNodeClick = propsRef.current.onNodeClick;
+    ctx.onNodeHover = propsRef.current.onNodeHover;
+    ctx.onNodeDragStart = propsRef.current.onNodeDragStart;
+    ctx.onNodeDrag = propsRef.current.onNodeDrag;
+    ctx.onNodeDragEnd = propsRef.current.onNodeDragEnd;
+    ctx.selectedNodeIds = propsRef.current.selectedNodeIds;
+    ctx.debug = propsRef.current.debug;
+    const camera = scene2.camera ?? { x: w / 2, y: h7 / 2, zoom: 1 };
+    const zoom = camera.zoom || 1;
+    rootContainer.position.set(
+      w / 2 - camera.x * zoom,
+      h7 / 2 - camera.y * zoom
+    );
+    rootContainer.scale.set(zoom, zoom);
+    if (camera.rotation) {
+      rootContainer.rotation = camera.rotation * Math.PI / 180;
+      rootContainer.pivot.set(camera.x, camera.y);
+      rootContainer.position.set(w / 2, h7 / 2);
+    }
+    syncGroupChildren(scene2.root, rootContainer, ctx);
+    drawSelectionOverlays(ctx, propsRef.current.selectedNodeIds);
+    if (propsRef.current.debug) {
+      drawDebugLabels(ctx, scene2.root);
+    } else if (ctx.debugLayer) {
+      while (ctx.debugLayer.children.length > 0) {
+        const child = ctx.debugLayer.children[0];
+        child.removeFromParent();
+        child.destroy?.();
+      }
+    }
+  }
+  function tickAllParticles(rootNode, ctx, dt) {
+    function processNode(node) {
+      if (node.type === "particles") {
+        const pNode = node;
+        const particles = tickParticlesInternal(pNode, dt);
+        pNode._particles = particles;
+        const obj = ctx.nodeMap.get(node.id);
+        if (obj) {
+          while (obj.children?.length > 0) {
+            const child = obj.children[0];
+            child.removeFromParent();
+            child.destroy?.();
+          }
+          const PIXI = ctx.PIXI;
+          for (const p of particles) {
+            const emitter = pNode.emitters[0];
+            const fadeOut = emitter?.fadeOut !== false;
+            const alpha = fadeOut ? Math.max(0, 1 - p.age / p.lifetime) : 1;
+            const shape = emitter?.shape ?? "circle";
+            const g = new PIXI.Graphics();
+            if (shape === "square") {
+              g.rect(-p.size / 2, -p.size / 2, p.size, p.size);
+            } else {
+              g.circle(0, 0, p.size / 2);
+            }
+            g.fill({ color: p.color, alpha });
+            g.position.set(p.x, p.y);
+            obj.addChild(g);
+          }
+        }
+      }
+      if (node.type === "group") {
+        for (const child of node.children) {
+          processNode(child);
+        }
+      }
+    }
+    for (const child of rootNode.children) {
+      processNode(child);
+    }
+  }
+  React4.useEffect(() => {
+    if (!initializedRef.current || !appRef.current || !ctxRef.current) return;
+    const app = appRef.current;
+    const ctx = ctxRef.current;
+    const PIXI = ctx.PIXI;
+    const rootContainer = app.stage.children[0];
+    if (!rootContainer) return;
+    syncScene(scene, rootContainer, ctx, PIXI, width, height);
+  }, [scene, width, height, selectedNodeIds, debug, onNodeClick, onNodeHover, onNodeDragStart, onNodeDrag, onNodeDragEnd]);
+  React4.useEffect(() => {
+    if (!appRef.current) return;
+    const app = appRef.current;
+    try {
+      app.renderer.resize(width, height);
+      const PIXI = ctxRef.current?.PIXI;
+      if (PIXI) {
+        app.stage.hitArea = new PIXI.Rectangle(0, 0, width, height);
+      }
+    } catch {
+    }
+  }, [width, height]);
+  React4.useEffect(() => {
+    if (!appRef.current) return;
+    try {
+      appRef.current.renderer.background.color = scene.background ?? "#1a1a2e";
+    } catch {
+    }
+  }, [scene.background]);
+  React4.useEffect(() => {
+    return () => {
+      const app = appRef.current;
+      if (app) {
+        try {
+          app.destroy(true, { children: true, texture: false, baseTexture: false });
+        } catch {
+        }
+        appRef.current = null;
+      }
+      const ctx = ctxRef.current;
+      if (ctx) {
+        ctx.nodeMap.clear();
+        ctx.textureCache.clear();
+        ctxRef.current = null;
+      }
+      initializedRef.current = false;
+      initializingRef.current = false;
+    };
+  }, []);
+  if (pixiAvailableRef.current === false) {
+    return h3(
+      "div",
+      {
+        className,
+        style: {
+          width,
+          height,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: scene.background ?? "#1a1a2e",
+          color: "#94a3b8",
+          fontFamily: "monospace",
+          fontSize: 14,
+          textAlign: "center",
+          padding: 20,
+          boxSizing: "border-box",
+          ...containerStyle
+        }
+      },
+      h3(
+        "div",
+        null,
+        h3(
+          "div",
+          { style: { marginBottom: 8, fontSize: 16, fontWeight: "bold", color: "#e2e8f0" } },
+          "WebGL Renderer Unavailable"
+        ),
+        h3(
+          "div",
+          null,
+          "Install pixi.js to enable the WebGL renderer:"
+        ),
+        h3(
+          "code",
+          { style: { display: "block", marginTop: 8, padding: "8px 12px", backgroundColor: "#0f172a", borderRadius: 4 } },
+          "npm install pixi.js"
+        )
+      )
+    );
+  }
+  return h3("div", {
+    ref: containerRef,
+    className,
+    style: {
+      width,
+      height,
+      overflow: "hidden",
+      position: "relative",
+      backgroundColor: scene.background ?? "#1a1a2e",
+      ...containerStyle
+    }
+  });
+}
+
+// src/scene/renderer.ts
+var pixiAvailable = null;
+function isPixiAvailable() {
+  if (pixiAvailable !== null) return pixiAvailable;
+  try {
+    const PIXI = globalThis.__PIXI ?? globalThis.PIXI;
+    pixiAvailable = !!(PIXI && PIXI.Application);
+  } catch {
+    pixiAvailable = false;
+  }
+  return pixiAvailable;
+}
+function SceneRenderer(props) {
+  if (isPixiAvailable()) {
+    return PixiSceneRenderer(props);
+  }
+  return SvgSceneRenderer(props);
+}
+
+// src/scene/schema.ts
+function createSceneSchemas(z) {
+  const vec2 = z.object({
+    x: z.number(),
+    y: z.number()
+  });
+  const transform = z.object({
+    x: z.number().optional(),
+    y: z.number().optional(),
+    rotation: z.number().optional().describe("Rotation in degrees"),
+    scaleX: z.number().optional(),
+    scaleY: z.number().optional(),
+    originX: z.number().optional().describe("Transform origin X (0-1)"),
+    originY: z.number().optional().describe("Transform origin Y (0-1)")
+  }).optional();
+  const style = z.object({
+    fill: z.string().optional().describe("CSS color or gradient ref url(#id)"),
+    stroke: z.string().optional().describe("CSS color"),
+    strokeWidth: z.number().optional(),
+    strokeDasharray: z.string().optional().describe('e.g. "5,3"'),
+    strokeLinecap: z.enum(["butt", "round", "square"]).optional(),
+    strokeLinejoin: z.enum(["miter", "round", "bevel"]).optional(),
+    opacity: z.number().optional().describe("0-1"),
+    fillOpacity: z.number().optional(),
+    strokeOpacity: z.number().optional(),
+    filter: z.string().optional(),
+    cursor: z.string().optional(),
+    pointerEvents: z.enum(["auto", "none"]).optional(),
+    visible: z.boolean().optional()
+  }).optional();
+  const textStyle = z.object({
+    fill: z.string().optional(),
+    stroke: z.string().optional(),
+    strokeWidth: z.number().optional(),
+    opacity: z.number().optional(),
+    fontSize: z.number().optional(),
+    fontFamily: z.string().optional(),
+    fontWeight: z.union([z.number(), z.string()]).optional(),
+    textAnchor: z.enum(["start", "middle", "end"]).optional(),
+    dominantBaseline: z.enum(["auto", "middle", "hanging", "text-top"]).optional(),
+    letterSpacing: z.number().optional()
+  }).optional();
+  const gradientStop = z.object({
+    offset: z.number().describe("0 to 1"),
+    color: z.string()
+  });
+  const linearGradient = z.object({
+    type: z.literal("linear"),
+    id: z.string(),
+    x1: z.number(),
+    y1: z.number(),
+    x2: z.number(),
+    y2: z.number(),
+    stops: z.array(gradientStop)
+  });
+  const radialGradient = z.object({
+    type: z.literal("radial"),
+    id: z.string(),
+    cx: z.number(),
+    cy: z.number(),
+    r: z.number(),
+    fx: z.number().optional(),
+    fy: z.number().optional(),
+    stops: z.array(gradientStop)
+  });
+  const gradient = z.union([linearGradient, radialGradient]);
+  const particleEmitter = z.object({
+    x: z.number(),
+    y: z.number(),
+    rate: z.number().describe("Particles per second"),
+    lifetime: z.number().describe("Particle lifetime in ms"),
+    speed: z.object({ min: z.number(), max: z.number() }),
+    direction: z.object({ min: z.number(), max: z.number() }).describe("Angle range in degrees"),
+    gravity: z.number().optional(),
+    color: z.union([z.string(), z.array(z.string())]).optional(),
+    size: z.object({ min: z.number(), max: z.number() }).optional(),
+    fadeOut: z.boolean().optional(),
+    shape: z.enum(["circle", "square"]).optional()
+  });
+  const spriteAnimation = z.object({
+    frames: z.array(z.number()),
+    fps: z.number(),
+    loop: z.boolean().optional(),
+    playing: z.boolean().optional()
+  });
+  const nodeSchema = z.object({
+    type: z.enum([
+      "rect",
+      "circle",
+      "ellipse",
+      "line",
+      "polyline",
+      "polygon",
+      "path",
+      "text",
+      "image",
+      "group",
+      "sprite",
+      "tilemap",
+      "particles"
+    ]),
+    id: z.string().optional().describe("Auto-generated if not provided"),
+    name: z.string().optional(),
+    transform,
+    style,
+    interactive: z.boolean().optional(),
+    data: z.record(z.any()).optional(),
+    // rect
+    width: z.number().optional(),
+    height: z.number().optional(),
+    rx: z.number().optional(),
+    ry: z.number().optional(),
+    // circle
+    radius: z.number().optional(),
+    // line
+    x2: z.number().optional(),
+    y2: z.number().optional(),
+    // polyline, polygon
+    points: z.array(vec2).optional(),
+    // path
+    d: z.string().optional(),
+    // text
+    text: z.string().optional(),
+    // image
+    href: z.string().optional(),
+    preserveAspectRatio: z.string().optional(),
+    // group
+    children: z.array(z.any()).optional(),
+    clipPath: z.string().optional(),
+    // sprite
+    frameWidth: z.number().optional(),
+    frameHeight: z.number().optional(),
+    frame: z.number().optional(),
+    columns: z.number().optional(),
+    animation: spriteAnimation.optional(),
+    // tilemap
+    tileWidth: z.number().optional(),
+    tileHeight: z.number().optional(),
+    // columns already defined above
+    // particles
+    emitters: z.array(particleEmitter).optional(),
+    maxParticles: z.number().optional()
+  }).passthrough();
+  return {
+    vec2,
+    transform,
+    style,
+    textStyle,
+    gradientStop,
+    linearGradient,
+    radialGradient,
+    gradient,
+    particleEmitter,
+    spriteAnimation,
+    nodeSchema
+  };
+}
+
+// src/scene/tools.ts
+function uid2() {
+  return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+}
+function getScene(ctx) {
+  return ctx.state._scene ?? {
+    _sceneVersion: 1,
+    root: { id: "root", type: "group", children: [] },
+    camera: { x: 400, y: 300, zoom: 1 },
+    background: "#1a1a2e",
+    gradients: [],
+    filters: [],
+    width: 800,
+    height: 600
+  };
+}
+function cloneScene(scene) {
+  return JSON.parse(JSON.stringify(scene));
+}
+function findNode(node, id) {
+  if (node.id === id) return node;
+  if (node.type === "group" && node.children) {
+    for (const child of node.children) {
+      const found = findNode(child, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function removeNode(root, id) {
+  if (!root.children) return false;
+  const idx = root.children.findIndex((c) => c.id === id);
+  if (idx !== -1) {
+    root.children.splice(idx, 1);
+    return true;
+  }
+  for (const child of root.children) {
+    if (child.type === "group" && removeNode(child, id)) return true;
+  }
+  return false;
+}
+function findGroup(root, id) {
+  const node = findNode(root, id);
+  if (node && node.type === "group") return node;
+  return null;
+}
+function createSceneTools(namespace, z) {
+  const schemas = createSceneSchemas(z);
+  return [
+    // ── scene.add ──────────────────────────────────────────────────────
+    {
+      name: `${namespace}.add`,
+      description: `Add a visual node to the scene. Returns the node's ID.
+
+Node types: rect, circle, ellipse, line, polyline, polygon, path, text, image, group, sprite, tilemap, particles.
+
+Each node can have: transform (position/rotation/scale), style (fill/stroke/opacity), name, interactive, data (metadata).
+
+For visually rich scenes: prefer "path" nodes with cubic bezier curves (C commands) over basic shapes for organic forms, compose entities as "group" nodes with layered children, and use gradients (defined via scene.set) for depth.
+
+Examples:
+- Curved path: { node: { type: "path", d: "M 0 0 C 8 -18 30 -22 50 -12 C 60 -6 60 6 50 12 C 30 22 8 18 0 0 Z", style: { fill: "url(#my-gradient)", stroke: "#0e7490", strokeWidth: 0.8 } } }
+- Composed entity: { node: { type: "group", name: "creature", data: { entityType: "fish" }, transform: { x: 300, y: 200 }, children: [{ type: "path", d: "M 0 0 C 8 -18 30 -22 50 -12 C 60 -6 60 6 50 12 C 30 22 8 18 0 0 Z", style: { fill: "url(#body-grad)" } }, { type: "circle", radius: 3, transform: { x: 40, y: -3 }, style: { fill: "#0f172a" } }] } }
+- Rectangle: { node: { type: "rect", width: 100, height: 50, transform: { x: 200, y: 100 }, style: { fill: "#ef4444" } } }
+- Text: { node: { type: "text", text: "Hello", transform: { x: 100, y: 50 }, style: { fill: "#fff", fontSize: 24, textAnchor: "middle" } } }
+- Image: { node: { type: "image", href: "https://example.com/img.png", width: 200, height: 150 } }`,
+      input_schema: z.object({
+        node: schemas.nodeSchema.describe("Scene node to add"),
+        parentId: z.string().optional().describe("Parent group ID. Defaults to root.")
+      }),
+      risk: "low",
+      capabilities_required: ["state.write"],
+      handler: async (ctx, input) => {
+        const scene = cloneScene(getScene(ctx));
+        const nodeId = input.node.id ?? uid2();
+        const node = { ...input.node, id: nodeId };
+        if (node.type === "group" && !node.children) node.children = [];
+        const parent = input.parentId ? findGroup(scene.root, input.parentId) : scene.root;
+        if (!parent) throw new Error(`Parent group "${input.parentId}" not found`);
+        parent.children.push(node);
+        ctx.setState({ ...ctx.state, _scene: scene });
+        return { nodeId };
+      }
+    },
+    // ── scene.update ───────────────────────────────────────────────────
+    {
+      name: `${namespace}.update`,
+      description: `Update an existing scene node. Merges transform, style, and any other properties.
+
+Use this for ALL node modifications: moving, resizing, recoloring, animating, renaming, etc.
+
+To animate: include a "tween" object with { property, from, to, duration, easing?, repeat?, yoyo? }.
+Easing options: linear, ease-in, ease-out, ease-in-out, ease-in-quad, ease-out-quad, ease-in-cubic, ease-out-cubic, ease-in-elastic, ease-out-elastic, ease-in-bounce, ease-out-bounce.
+
+Examples:
+- Move: { nodeId: "abc", transform: { x: 200, y: 100 } }
+- Restyle: { nodeId: "abc", style: { fill: "#22c55e", opacity: 0.8 } }
+- Resize: { nodeId: "abc", width: 200, height: 100 }
+- Change text: { nodeId: "abc", text: "New text" }
+- Animate slide: { nodeId: "abc", tween: { property: "transform.x", from: 0, to: 300, duration: 1000, easing: "ease-out" } }
+- Animate pulse: { nodeId: "abc", tween: { property: "transform.scaleX", from: 1, to: 1.2, duration: 400, repeat: -1, yoyo: true } }
+- Animate fade: { nodeId: "abc", tween: { property: "style.opacity", from: 0, to: 1, duration: 500 } }`,
+      input_schema: z.object({
+        nodeId: z.string().describe("ID of the node to update"),
+        transform: schemas.transform.describe("Position, rotation, scale"),
+        style: schemas.style.describe("Fill, stroke, opacity, etc."),
+        tween: z.object({
+          property: z.string().describe("Dot-path: transform.x, style.opacity, etc."),
+          from: z.number(),
+          to: z.number(),
+          duration: z.number().describe("Milliseconds"),
+          easing: z.string().optional(),
+          delay: z.number().optional(),
+          repeat: z.number().optional().describe("-1 = infinite"),
+          yoyo: z.boolean().optional()
+        }).optional().describe("Tween animation"),
+        // Type-specific props (all optional)
+        width: z.number().optional(),
+        height: z.number().optional(),
+        radius: z.number().optional(),
+        rx: z.number().optional(),
+        ry: z.number().optional(),
+        text: z.string().optional(),
+        href: z.string().optional(),
+        d: z.string().optional(),
+        points: z.array(schemas.vec2).optional(),
+        x2: z.number().optional(),
+        y2: z.number().optional(),
+        name: z.string().optional(),
+        interactive: z.boolean().optional(),
+        data: z.record(z.any()).optional(),
+        frame: z.number().optional()
+      }).passthrough(),
+      risk: "low",
+      capabilities_required: ["state.write"],
+      handler: async (ctx, input) => {
+        const scene = cloneScene(getScene(ctx));
+        const node = findNode(scene.root, input.nodeId);
+        if (!node) throw new Error(`Node "${input.nodeId}" not found`);
+        const { nodeId: _, ...props } = input;
+        if (props.transform) {
+          node.transform = { ...node.transform ?? {}, ...props.transform };
+          delete props.transform;
+        }
+        if (props.style) {
+          node.style = { ...node.style ?? {}, ...props.style };
+          delete props.style;
+        }
+        if (props.tween) {
+          node.tween = { ...props.tween, startedAt: ctx.timestamp };
+          delete props.tween;
+        }
+        const { id: _id, type: _type, ...safeProps } = props;
+        Object.assign(node, safeProps);
+        ctx.setState({ ...ctx.state, _scene: scene });
+        return { updated: true };
+      }
+    },
+    // ── scene.remove ───────────────────────────────────────────────────
+    {
+      name: `${namespace}.remove`,
+      description: `Remove one or more nodes from the scene by ID. Removes all children if a node is a group.
+
+Examples:
+- Single: { nodeIds: ["abc123"] }
+- Multiple: { nodeIds: ["node1", "node2", "node3"] }
+- Clear all: { clear: true }`,
+      input_schema: z.object({
+        nodeIds: z.array(z.string()).optional().describe("IDs of nodes to remove"),
+        clear: z.boolean().optional().describe("If true, remove ALL nodes")
+      }),
+      risk: "low",
+      capabilities_required: ["state.write"],
+      handler: async (ctx, input) => {
+        const scene = cloneScene(getScene(ctx));
+        if (input.clear) {
+          scene.root.children = [];
+          ctx.setState({ ...ctx.state, _scene: scene });
+          return { removed: "all" };
+        }
+        const removed = [];
+        for (const id of input.nodeIds ?? []) {
+          if (removeNode(scene.root, id)) removed.push(id);
+        }
+        ctx.setState({ ...ctx.state, _scene: scene });
+        return { removed };
+      }
+    },
+    // ── scene.set ──────────────────────────────────────────────────────
+    {
+      name: `${namespace}.set`,
+      description: `Set scene-level properties: camera position/zoom, background color, gradients, dimensions.
+
+Define gradients early \u2014 natural scenes should have 3-5 gradients (water, sky, foliage, light sources). Reference them in node styles with fill: "url(#gradientId)". Gradients add depth and richness that flat colors cannot.
+
+Examples:
+- Background: { background: "#0f172a" }
+- Camera pan: { camera: { x: 500, y: 300 } }
+- Camera zoom: { camera: { zoom: 2 } }
+- Linear gradient: { gradient: { type: "linear", id: "sunset", x1: 0, y1: 0, x2: 1, y2: 1, stops: [{ offset: 0, color: "#f97316" }, { offset: 0.5, color: "#ec4899" }, { offset: 1, color: "#8b5cf6" }] } }
+- Radial gradient: { gradient: { type: "radial", id: "glow", cx: 0.5, cy: 0.5, r: 0.5, stops: [{ offset: 0, color: "#fef3c7" }, { offset: 1, color: "transparent" }] } }
+  Then use in style: { fill: "url(#sunset)" } or { fill: "url(#glow)" }
+- Resize: { width: 1024, height: 768 }`,
+      input_schema: z.object({
+        background: z.string().optional().describe("CSS background color"),
+        camera: z.object({
+          x: z.number().optional(),
+          y: z.number().optional(),
+          zoom: z.number().optional().describe("1 = 100%, 2 = zoomed in, 0.5 = zoomed out"),
+          rotation: z.number().optional()
+        }).optional(),
+        gradient: schemas.gradient.optional().describe("Add/update a reusable gradient definition"),
+        width: z.number().optional(),
+        height: z.number().optional()
+      }),
+      risk: "low",
+      capabilities_required: ["state.write"],
+      handler: async (ctx, input) => {
+        const scene = cloneScene(getScene(ctx));
+        if (input.background != null) scene.background = input.background;
+        if (input.width != null) scene.width = input.width;
+        if (input.height != null) scene.height = input.height;
+        if (input.camera) {
+          scene.camera = { ...scene.camera ?? { x: 400, y: 300, zoom: 1 }, ...input.camera };
+        }
+        if (input.gradient) {
+          if (!scene.gradients) scene.gradients = [];
+          const idx = scene.gradients.findIndex((g) => g.id === input.gradient.id);
+          if (idx !== -1) {
+            scene.gradients[idx] = input.gradient;
+          } else {
+            scene.gradients.push(input.gradient);
+          }
+        }
+        ctx.setState({ ...ctx.state, _scene: scene });
+        return { updated: true };
+      }
+    },
+    // ── scene.batch ────────────────────────────────────────────────────
+    {
+      name: `${namespace}.batch`,
+      description: `Execute multiple scene operations in a single state update. More efficient than individual tool calls for building complex scenes.
+
+Each operation has an "op" field: "add", "update", "remove", "set".
+
+Best practice: define gradients first (op: "set"), then add entities that reference them. Compose organic entities as groups with path children using cubic bezier curves.
+
+Example \u2014 build a rich scene in one call:
+{ operations: [
+  { op: "set", background: "#0f172a" },
+  { op: "set", gradient: { type: "linear", id: "creature-grad", x1: 0, y1: 0, x2: 0, y2: 1, stops: [{ offset: 0, color: "#a78bfa" }, { offset: 1, color: "#4c1d95" }] } },
+  { op: "add", node: { type: "group", id: "creature", transform: { x: 400, y: 300 }, data: { entityType: "creature" }, children: [
+    { type: "path", d: "M 0 0 C 10 -20 35 -25 55 -10 C 65 0 65 10 55 18 C 35 28 10 20 0 0 Z", style: { fill: "url(#creature-grad)", stroke: "#7c3aed", strokeWidth: 0.8 } },
+    { type: "circle", radius: 3, transform: { x: 42, y: -2 }, style: { fill: "#1e1b4b" } },
+    { type: "path", d: "M 15 -8 C 25 -16 40 -15 50 -6", style: { fill: "none", stroke: "rgba(255,255,255,0.2)", strokeWidth: 2 } }
+  ] } },
+  { op: "add", node: { type: "text", text: "Welcome", transform: { x: 400, y: 80 }, style: { fill: "#fff", fontSize: 32, textAnchor: "middle" } } },
+  { op: "update", nodeId: "creature", tween: { property: "transform.y", from: 300, to: 290, duration: 2000, repeat: -1, yoyo: true, easing: "ease-in-out" } }
+] }`,
+      input_schema: z.object({
+        operations: z.array(z.record(z.any())).describe('Operations with "op" field: add, update, remove, set')
+      }),
+      risk: "low",
+      capabilities_required: ["state.write"],
+      handler: async (ctx, input) => {
+        const scene = cloneScene(getScene(ctx));
+        const results = [];
+        for (const op of input.operations) {
+          try {
+            switch (op.op) {
+              case "add": {
+                const nodeId = op.node?.id ?? op.id ?? uid2();
+                const node = { ...op.node, id: nodeId };
+                if (node.type === "group" && !node.children) node.children = [];
+                const parent = op.parentId ? findGroup(scene.root, op.parentId) : scene.root;
+                if (!parent) throw new Error(`Parent "${op.parentId}" not found`);
+                parent.children.push(node);
+                results.push({ op: "add", nodeId });
+                break;
+              }
+              case "update": {
+                const node = findNode(scene.root, op.nodeId);
+                if (!node) throw new Error(`Node "${op.nodeId}" not found`);
+                const { nodeId: _n, op: _o, ...props } = op;
+                if (props.transform) {
+                  node.transform = { ...node.transform ?? {}, ...props.transform };
+                  delete props.transform;
+                }
+                if (props.style) {
+                  node.style = { ...node.style ?? {}, ...props.style };
+                  delete props.style;
+                }
+                if (props.tween) {
+                  node.tween = { ...props.tween, startedAt: ctx.timestamp };
+                  delete props.tween;
+                }
+                const { id: _id, type: _type, ...safeProps } = props;
+                Object.assign(node, safeProps);
+                results.push({ op: "update", nodeId: op.nodeId });
+                break;
+              }
+              case "remove": {
+                if (op.clear) {
+                  scene.root.children = [];
+                  results.push({ op: "remove", cleared: true });
+                } else if (op.nodeIds) {
+                  for (const id of op.nodeIds) removeNode(scene.root, id);
+                  results.push({ op: "remove", nodeIds: op.nodeIds });
+                } else if (op.nodeId) {
+                  removeNode(scene.root, op.nodeId);
+                  results.push({ op: "remove", nodeId: op.nodeId });
+                }
+                break;
+              }
+              case "set": {
+                const { op: _o, ...setProps } = op;
+                if (setProps.background != null) scene.background = setProps.background;
+                if (setProps.width != null) scene.width = setProps.width;
+                if (setProps.height != null) scene.height = setProps.height;
+                if (setProps.camera) {
+                  scene.camera = { ...scene.camera ?? { x: 400, y: 300, zoom: 1 }, ...setProps.camera };
+                }
+                if (setProps.gradient) {
+                  if (!scene.gradients) scene.gradients = [];
+                  const idx = scene.gradients.findIndex((g) => g.id === setProps.gradient.id);
+                  if (idx !== -1) scene.gradients[idx] = setProps.gradient;
+                  else scene.gradients.push(setProps.gradient);
+                }
+                results.push({ op: "set" });
+                break;
+              }
+              default:
+                results.push({ op: op.op, error: `Unknown operation: ${op.op}` });
+            }
+          } catch (err) {
+            results.push({ op: op.op, error: err.message });
+          }
+        }
+        ctx.setState({ ...ctx.state, _scene: scene });
+        return { applied: results.length, results };
+      }
+    }
+  ];
+}
+
+// src/scene/particles.ts
+function rand(min, max) {
+  return min + Math.random() * (max - min);
+}
+function degToRad(deg) {
+  return deg * Math.PI / 180;
+}
+function spawnParticles(emitter, dt) {
+  const count = Math.floor(emitter.rate * (dt / 1e3));
+  const particles = [];
+  for (let i = 0; i < count; i++) {
+    const angle = degToRad(rand(emitter.direction.min, emitter.direction.max));
+    const speed = rand(emitter.speed.min, emitter.speed.max);
+    const size = emitter.size ? rand(emitter.size.min, emitter.size.max) : 4;
+    const colors = Array.isArray(emitter.color) ? emitter.color : [emitter.color ?? "#ffffff"];
+    const color = colors[Math.floor(Math.random() * colors.length)];
+    particles.push({
+      x: emitter.x,
+      y: emitter.y,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      age: 0,
+      lifetime: emitter.lifetime,
+      size,
+      color
+    });
+  }
+  return particles;
+}
+function tickParticles(particles, emitters, dt) {
+  const dtSec = dt / 1e3;
+  const gravity = emitters[0]?.gravity ?? 0;
+  return particles.map((p) => ({
+    ...p,
+    x: p.x + p.vx * dtSec,
+    y: p.y + p.vy * dtSec,
+    vx: p.vx,
+    vy: p.vy + gravity * dtSec,
+    age: p.age + dt
+  })).filter((p) => p.age < p.lifetime);
+}
+function tickParticleNode(node, dt) {
+  const max = node.maxParticles ?? 200;
+  let particles = node._particles ? [...node._particles] : [];
+  particles = tickParticles(particles, node.emitters, dt);
+  for (const emitter of node.emitters) {
+    const spawned = spawnParticles(emitter, dt);
+    particles.push(...spawned);
+  }
+  if (particles.length > max) {
+    particles = particles.slice(particles.length - max);
+  }
+  return particles;
+}
+
+// src/scene/hooks.ts
+function getReact5() {
+  const R = globalThis.React;
+  if (!R) throw new Error("React is not available. Hooks must be used inside a Canvas component.");
+  return R;
+}
+var React2 = new Proxy({}, {
+  get(_target, prop) {
+    return getReact5()[prop];
+  }
+});
+function useSceneInteraction() {
+  const [lastEvent, setLastEvent] = React2.useState(null);
+  const [hoveredNodeId, setHoveredNodeId] = React2.useState(null);
+  const onNodeClick = React2.useCallback((nodeId, event) => {
+    setLastEvent({ type: "click", nodeId, x: event.x, y: event.y });
+  }, []);
+  const onNodeHover = React2.useCallback((nodeId) => {
+    setHoveredNodeId(nodeId);
+    if (nodeId) {
+      setLastEvent({ type: "hover", nodeId, x: 0, y: 0 });
+    }
+  }, []);
+  return { lastEvent, hoveredNodeId, onNodeClick, onNodeHover };
+}
+function useSceneDrag(callTool, toolNamespace = "scene") {
+  const [dragging, setDragging] = React2.useState(null);
+  const [dragOffset, setDragOffset] = React2.useState(null);
+  const startRef = React2.useRef(null);
+  const onNodeDragStart = React2.useCallback((nodeId, pos) => {
+    setDragging(nodeId);
+    startRef.current = pos;
+    setDragOffset({ x: 0, y: 0 });
+  }, []);
+  const onNodeDrag = React2.useCallback((nodeId, pos) => {
+    if (!startRef.current) return;
+    setDragOffset({
+      x: pos.x - startRef.current.x,
+      y: pos.y - startRef.current.y
+    });
+  }, []);
+  const onNodeDragEnd = React2.useCallback((nodeId, pos) => {
+    if (!startRef.current) return;
+    const dx = pos.x - startRef.current.x;
+    const dy = pos.y - startRef.current.y;
+    setDragging(null);
+    setDragOffset(null);
+    startRef.current = null;
+    callTool(`${toolNamespace}.update`, {
+      nodeId,
+      transform: { x: dx, y: dy }
+    }).catch(() => {
+    });
+  }, [callTool, toolNamespace]);
+  return { dragging, dragOffset, onNodeDragStart, onNodeDrag, onNodeDragEnd };
+}
+function useSceneSelection() {
+  const [selectedIds, setSelectedIds] = React2.useState([]);
+  const select = React2.useCallback((nodeId) => {
+    setSelectedIds((prev) => prev.includes(nodeId) ? prev : [...prev, nodeId]);
+  }, []);
+  const deselect = React2.useCallback((nodeId) => {
+    setSelectedIds((prev) => prev.filter((id) => id !== nodeId));
+  }, []);
+  const toggle = React2.useCallback((nodeId) => {
+    setSelectedIds(
+      (prev) => prev.includes(nodeId) ? prev.filter((id) => id !== nodeId) : [...prev, nodeId]
+    );
+  }, []);
+  const clear = React2.useCallback(() => setSelectedIds([]), []);
+  const isSelected = React2.useCallback(
+    (nodeId) => selectedIds.includes(nodeId),
+    [selectedIds]
+  );
+  return { selectedIds, select, deselect, toggle, clear, isSelected };
+}
+function useSceneViewport(callTool, scene, toolNamespace = "scene") {
+  const camera = scene.camera ?? { x: 400, y: 300, zoom: 1 };
+  const timerRef = React2.useRef(null);
+  const commitCamera = React2.useCallback((cam) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      callTool(`${toolNamespace}.set`, { camera: cam }).catch(() => {
+      });
+    }, 200);
+  }, [callTool, toolNamespace]);
+  const onViewportPan = React2.useCallback((delta) => {
+    commitCamera({ x: camera.x + delta.x, y: camera.y + delta.y });
+  }, [camera, commitCamera]);
+  const onViewportZoom = React2.useCallback((newZoom, _center) => {
+    commitCamera({ zoom: Math.max(0.1, Math.min(10, newZoom)) });
+  }, [commitCamera]);
+  React2.useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return { camera, onViewportPan, onViewportZoom };
+}
+function useSceneTweens(scene) {
+  const [, forceRender] = React2.useState(0);
+  const rafRef = React2.useRef(null);
+  const hasTweens = React2.useRef(false);
+  hasTweens.current = false;
+  const checkTweens = (node) => {
+    if (node.tween?.startedAt != null) hasTweens.current = true;
+    if (node.type === "group" && node.children) {
+      for (const child of node.children) checkTweens(child);
+    }
+  };
+  checkTweens(scene.root);
+  React2.useEffect(() => {
+    if (!hasTweens.current) return;
+    const tick = () => {
+      forceRender((n) => n + 1);
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [scene]);
+  if (!hasTweens.current) return scene;
+  const now = Date.now();
+  return applyTweens2(scene, now);
+}
+function applyTweens2(scene, now) {
+  const newRoot = applyTweensToNode(scene.root, now);
+  if (newRoot === scene.root) return scene;
+  return { ...scene, root: newRoot };
+}
+function applyTweensToNode(node, now) {
+  let modified = false;
+  let result = node;
+  if (node.tween?.startedAt != null) {
+    const value = interpolateTween(node.tween, now);
+    if (value != null) {
+      result = setPath({ ...node }, node.tween.property, value);
+      modified = true;
+    }
+  }
+  if (node.type === "group" && node.children) {
+    const children = node.children;
+    const newChildren = children.map((child) => applyTweensToNode(child, now));
+    const childrenChanged = newChildren.some((c, i) => c !== children[i]);
+    if (childrenChanged) {
+      result = { ...result, children: newChildren };
+      modified = true;
+    }
+  }
+  return modified ? result : node;
+}
+function useParticleTick(scene) {
+  const [, forceRender] = React2.useState(0);
+  const rafRef = React2.useRef(null);
+  const lastTimeRef = React2.useRef(Date.now());
+  const particleStateRef = React2.useRef(/* @__PURE__ */ new Map());
+  const hasParticles = React2.useRef(false);
+  hasParticles.current = false;
+  const checkParticles = (node) => {
+    if (node.type === "particles") hasParticles.current = true;
+    if (node.type === "group" && node.children) {
+      for (const child of node.children) checkParticles(child);
+    }
+  };
+  checkParticles(scene.root);
+  React2.useEffect(() => {
+    if (!hasParticles.current) return;
+    const tick = () => {
+      const now = Date.now();
+      const dt = Math.min(now - lastTimeRef.current, 100);
+      lastTimeRef.current = now;
+      const updateNode = (node) => {
+        if (node.type === "particles") {
+          const current = particleStateRef.current.get(node.id) ?? [];
+          const fakeNode = { ...node, _particles: current };
+          const updated = tickParticleNode(fakeNode, dt);
+          particleStateRef.current.set(node.id, updated);
+        }
+        if (node.type === "group" && node.children) {
+          for (const child of node.children) updateNode(child);
+        }
+      };
+      updateNode(scene.root);
+      forceRender((n) => n + 1);
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    lastTimeRef.current = Date.now();
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [scene]);
+  if (!hasParticles.current) return scene;
+  return injectParticles(scene, particleStateRef.current);
+}
+function injectParticles(scene, particleState) {
+  const newRoot = injectParticlesInNode(scene.root, particleState);
+  if (newRoot === scene.root) return scene;
+  return { ...scene, root: newRoot };
+}
+function injectParticlesInNode(node, particleState) {
+  if (node.type === "particles") {
+    const particles = particleState.get(node.id);
+    if (particles) {
+      return { ...node, _particles: particles };
+    }
+  }
+  if (node.type === "group" && node.children) {
+    const children = node.children;
+    const newChildren = children.map((child) => injectParticlesInNode(child, particleState));
+    const changed = newChildren.some((c, i) => c !== children[i]);
+    if (changed) return { ...node, children: newChildren };
+  }
+  return node;
+}
+
+// src/scene/helpers.ts
+function uid3() {
+  return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+}
+function createScene(opts) {
+  const w = opts?.width ?? 800;
+  const h7 = opts?.height ?? 600;
+  return {
+    _sceneVersion: 1,
+    root: { id: "root", type: "group", children: [] },
+    camera: { x: w / 2, y: h7 / 2, zoom: 1 },
+    background: opts?.background ?? "#1a1a2e",
+    gradients: [],
+    filters: [],
+    width: w,
+    height: h7
+  };
+}
+function createNode(type, props) {
+  return {
+    id: props.id ?? uid3(),
+    type,
+    ...props
+  };
+}
+function nodeById(scene, id) {
+  return findNodeInGroup(scene.root, id);
+}
+function findNodeInGroup(node, id) {
+  if (node.id === id) return node;
+  if (node.type === "group" && node.children) {
+    for (const child of node.children) {
+      const found = findNodeInGroup(child, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function findNodes(scene, predicate) {
+  const results = [];
+  walkNodes(scene.root, (node) => {
+    if (predicate(node)) results.push(node);
+  });
+  return results;
+}
+function walkNodes(node, visitor) {
+  visitor(node);
+  if (node.type === "group" && node.children) {
+    for (const child of node.children) {
+      walkNodes(child, visitor);
+    }
+  }
+}
+function allNodeIds(scene) {
+  const ids = [];
+  walkNodes(scene.root, (node) => ids.push(node.id));
+  return ids;
+}
+function nodeCount(scene) {
+  let count = 0;
+  walkNodes(scene.root, () => count++);
+  return count;
+}
+function cloneScene2(scene) {
+  return JSON.parse(JSON.stringify(scene));
+}
+function removeNodeById(root, id) {
+  if (!root.children) return false;
+  const idx = root.children.findIndex((c) => c.id === id);
+  if (idx !== -1) {
+    root.children.splice(idx, 1);
+    return true;
+  }
+  for (const child of root.children) {
+    if (child.type === "group" && removeNodeById(child, id)) {
+      return true;
+    }
+  }
+  return false;
+}
+function findParent(root, nodeId) {
+  if (!root.children) return null;
+  for (const child of root.children) {
+    if (child.id === nodeId) return root;
+    if (child.type === "group") {
+      const parent = findParent(child, nodeId);
+      if (parent) return parent;
+    }
+  }
+  return null;
+}
+function sceneTools(z, namespace) {
+  return createSceneTools(namespace ?? "scene", z);
+}
+
+// src/scene/path-builder.ts
+var PathBuilder = class _PathBuilder {
+  commands = [];
+  // ── Core commands ─────────────────────────────────────────────────────
+  moveTo(x, y) {
+    this.commands.push(`M ${x} ${y}`);
+    return this;
+  }
+  lineTo(x, y) {
+    this.commands.push(`L ${x} ${y}`);
+    return this;
+  }
+  horizontalTo(x) {
+    this.commands.push(`H ${x}`);
+    return this;
+  }
+  verticalTo(y) {
+    this.commands.push(`V ${y}`);
+    return this;
+  }
+  quadTo(cx, cy, x, y) {
+    this.commands.push(`Q ${cx} ${cy} ${x} ${y}`);
+    return this;
+  }
+  cubicTo(c1x, c1y, c2x, c2y, x, y) {
+    this.commands.push(`C ${c1x} ${c1y} ${c2x} ${c2y} ${x} ${y}`);
+    return this;
+  }
+  arcTo(rx, ry, rotation, largeArc, sweep, x, y) {
+    this.commands.push(`A ${rx} ${ry} ${rotation} ${largeArc ? 1 : 0} ${sweep ? 1 : 0} ${x} ${y}`);
+    return this;
+  }
+  close() {
+    this.commands.push("Z");
+    return this;
+  }
+  // ── Higher-level helpers ──────────────────────────────────────────────
+  rect(x, y, w, h7) {
+    return this.moveTo(x, y).lineTo(x + w, y).lineTo(x + w, y + h7).lineTo(x, y + h7).close();
+  }
+  roundedRect(x, y, w, h7, rx, ry) {
+    const r = ry ?? rx;
+    return this.moveTo(x + rx, y).lineTo(x + w - rx, y).arcTo(rx, r, 0, false, true, x + w, y + r).lineTo(x + w, y + h7 - r).arcTo(rx, r, 0, false, true, x + w - rx, y + h7).lineTo(x + rx, y + h7).arcTo(rx, r, 0, false, true, x, y + h7 - r).lineTo(x, y + r).arcTo(rx, r, 0, false, true, x + rx, y).close();
+  }
+  circle(cx, cy, r) {
+    return this.moveTo(cx - r, cy).arcTo(r, r, 0, true, true, cx + r, cy).arcTo(r, r, 0, true, true, cx - r, cy).close();
+  }
+  ellipse(cx, cy, rx, ry) {
+    return this.moveTo(cx - rx, cy).arcTo(rx, ry, 0, true, true, cx + rx, cy).arcTo(rx, ry, 0, true, true, cx - rx, cy).close();
+  }
+  star(cx, cy, points, outerR, innerR) {
+    const step = Math.PI / points;
+    for (let i = 0; i < 2 * points; i++) {
+      const angle = i * step - Math.PI / 2;
+      const r = i % 2 === 0 ? outerR : innerR;
+      const x = cx + r * Math.cos(angle);
+      const y = cy + r * Math.sin(angle);
+      if (i === 0) {
+        this.moveTo(x, y);
+      } else {
+        this.lineTo(x, y);
+      }
+    }
+    return this.close();
+  }
+  arrow(x1, y1, x2, y2, headSize = 10) {
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    const ha1 = angle + Math.PI * 0.8;
+    const ha2 = angle - Math.PI * 0.8;
+    return this.moveTo(x1, y1).lineTo(x2, y2).moveTo(x2, y2).lineTo(x2 + headSize * Math.cos(ha1), y2 + headSize * Math.sin(ha1)).moveTo(x2, y2).lineTo(x2 + headSize * Math.cos(ha2), y2 + headSize * Math.sin(ha2));
+  }
+  // ── Output ────────────────────────────────────────────────────────────
+  build() {
+    return this.commands.join(" ");
+  }
+  static from() {
+    return new _PathBuilder();
+  }
+};
+
+// src/scene/rules.ts
+function getReact6() {
+  const R = globalThis.React;
+  if (!R) throw new Error("React not available");
+  return R;
+}
+var React3 = new Proxy({}, {
+  get(_target, prop) {
+    return getReact6()[prop];
+  }
+});
+function nodeMatchesSelector(node, selector) {
+  const s = selector.trim();
+  if (s === "*") return !!node.data?.entityType;
+  const colon = s.indexOf(":");
+  if (colon === -1) return false;
+  const prefix = s.slice(0, colon);
+  const value = s.slice(colon + 1);
+  switch (prefix) {
+    case "entityType":
+      return node.data?.entityType === value;
+    case "tag": {
+      const tags = node.data?.tags;
+      return Array.isArray(tags) && tags.includes(value);
+    }
+    case "name":
+      return node.name === value;
+    case "type":
+      return node.type === value;
+    default:
+      return false;
+  }
+}
+function dist(a, b) {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function nodePos(node) {
+  return { x: node.transform?.x ?? 0, y: node.transform?.y ?? 0 };
+}
+function applyVariance(v, variance) {
+  if (variance <= 0) return v;
+  return v * (1 + (Math.random() * 2 - 1) * variance);
+}
+function collectNodes(root) {
+  const out = [];
+  walkNodes(root, (n) => out.push(n));
+  return out;
+}
+function checkCondition(rule, node, allNodes, now, cooldowns) {
+  const cond = rule.condition;
+  if (!nodeMatchesSelector(node, cond.selector)) return false;
+  if (cond.state) {
+    for (const [k, v] of Object.entries(cond.state)) {
+      if (node.data?.[k] !== v) return false;
+    }
+  }
+  if (cond.proximity) {
+    const pos = nodePos(node);
+    const inRange = allNodes.some(
+      (n) => n.id !== node.id && nodeMatchesSelector(n, cond.proximity.target) && dist(pos, nodePos(n)) <= cond.proximity.distance
+    );
+    if (!inRange) return false;
+  }
+  if (cond.cooldownMs) {
+    const perNode = cooldowns.get(rule.id);
+    const last = perNode?.[node.id] ?? 0;
+    if (now - last < cond.cooldownMs) return false;
+  }
+  if (cond.probability != null && Math.random() > cond.probability) return false;
+  return true;
+}
+function applyEffect(rule, node, pending) {
+  const eff = rule.effect;
+  if (eff.probability != null && Math.random() > eff.probability) return null;
+  const variance = eff.variance ?? 0;
+  let modified = null;
+  switch (eff.type) {
+    case "transform": {
+      const t = { ...node.transform ?? {} };
+      let changed = false;
+      if (eff.dx != null) {
+        t.x = (t.x ?? 0) + applyVariance(eff.dx, variance);
+        changed = true;
+      }
+      if (eff.dy != null) {
+        t.y = (t.y ?? 0) + applyVariance(eff.dy, variance);
+        changed = true;
+      }
+      if (eff.dRotation != null) {
+        t.rotation = (t.rotation ?? 0) + applyVariance(eff.dRotation, variance);
+        changed = true;
+      }
+      if (changed) modified = { ...node, transform: t };
+      break;
+    }
+    case "style": {
+      if (eff.styleUpdates) {
+        modified = {
+          ...node,
+          style: { ...node.style ?? {}, ...eff.styleUpdates }
+        };
+      }
+      break;
+    }
+    case "data": {
+      if (eff.dataUpdates) {
+        modified = {
+          ...node,
+          data: { ...node.data ?? {}, ...eff.dataUpdates }
+        };
+      }
+      break;
+    }
+    case "counter": {
+      if (eff.field && eff.delta != null) {
+        const cur = node.data?.[eff.field] ?? 0;
+        const delta = applyVariance(eff.delta, variance);
+        modified = {
+          ...node,
+          data: { ...node.data ?? {}, [eff.field]: cur + delta }
+        };
+      }
+      break;
+    }
+    case "tween": {
+      if (eff.tween) {
+        modified = {
+          ...node,
+          tween: { ...eff.tween, startedAt: Date.now() }
+        };
+      }
+      break;
+    }
+    case "spawn": {
+      if (eff.spawnNode) {
+        pending.push({
+          op: "spawn",
+          node: { ...eff.spawnNode },
+          parentPos: nodePos(node)
+        });
+      }
+      break;
+    }
+    case "remove": {
+      pending.push({ op: "remove", nodeId: node.id });
+      break;
+    }
+  }
+  return modified;
+}
+function replaceNode(group, id, replacement) {
+  if (!group.children) return false;
+  for (let i = 0; i < group.children.length; i++) {
+    if (group.children[i].id === id) {
+      group.children[i] = replacement;
+      return true;
+    }
+    if (group.children[i].type === "group" && replaceNode(group.children[i], id, replacement)) {
+      return true;
+    }
+  }
+  return false;
+}
+function useRuleTick(scene, rules, worldMeta, callTool) {
+  const [simScene, setSimScene] = React3.useState(scene);
+  const [stats, setStats] = React3.useState({
+    rulesEvaluated: 0,
+    rulesFired: 0,
+    nodesAffected: 0,
+    ticksElapsed: 0
+  });
+  const rafRef = React3.useRef(null);
+  const lastTickRef = React3.useRef(0);
+  const tickCountRef = React3.useRef(0);
+  const cooldownsRef = React3.useRef(/* @__PURE__ */ new Map());
+  const pendingOpsRef = React3.useRef([]);
+  const batchTimerRef = React3.useRef(null);
+  const flushPending = React3.useCallback(() => {
+    const ops = pendingOpsRef.current;
+    if (ops.length === 0) return;
+    pendingOpsRef.current = [];
+    const batchOps = [];
+    for (const op of ops) {
+      if (op.op === "spawn") {
+        const id = Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+        const spawnX = op.parentPos.x + (op.node.spawnOffset?.x ?? (Math.random() - 0.5) * 60);
+        const spawnY = op.parentPos.y + (op.node.spawnOffset?.y ?? (Math.random() - 0.5) * 60);
+        const { spawnOffset: _so, ...nodeProps } = op.node;
+        batchOps.push({
+          op: "add",
+          node: {
+            ...nodeProps,
+            id,
+            transform: {
+              ...nodeProps.transform ?? {},
+              x: spawnX,
+              y: spawnY
+            }
+          }
+        });
+      } else if (op.op === "remove") {
+        batchOps.push({ op: "remove", nodeIds: [op.nodeId] });
+      }
+    }
+    if (batchOps.length > 0) {
+      callTool("scene.batch", { operations: batchOps }).catch(() => {
+      });
+    }
+  }, [callTool]);
+  const scheduleBatchFlush = React3.useCallback(() => {
+    if (batchTimerRef.current) return;
+    batchTimerRef.current = setTimeout(() => {
+      batchTimerRef.current = null;
+      flushPending();
+    }, 300);
+  }, [flushPending]);
+  React3.useEffect(() => {
+    setSimScene(scene);
+  }, [scene]);
+  React3.useEffect(() => {
+    if (worldMeta.paused) {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+      return;
+    }
+    const tickRules = rules.filter(
+      (r) => r.enabled && r.trigger === "tick"
+    );
+    if (tickRules.length === 0) {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+      return;
+    }
+    const tick = (now) => {
+      if (now - lastTickRef.current < worldMeta.tickSpeed) {
+        rafRef.current = requestAnimationFrame(tick);
+        return;
+      }
+      lastTickRef.current = now;
+      tickCountRef.current++;
+      setSimScene((prevScene) => {
+        const working = cloneScene2(prevScene);
+        const allNodes = collectNodes(working.root);
+        const pending = [];
+        let rulesEvaluated = 0;
+        let rulesFired = 0;
+        let nodesAffected = 0;
+        for (const rule of tickRules) {
+          if (!cooldownsRef.current.has(rule.id)) {
+            cooldownsRef.current.set(rule.id, {});
+          }
+          rulesEvaluated++;
+          let fired = false;
+          for (const node of allNodes) {
+            if (checkCondition(rule, node, allNodes, now, cooldownsRef.current)) {
+              const modified = applyEffect(rule, node, pending);
+              if (modified) {
+                replaceNode(working.root, node.id, modified);
+                nodesAffected++;
+                fired = true;
+                const cd = cooldownsRef.current.get(rule.id);
+                cd[node.id] = now;
+              } else if (rule.effect.type === "spawn" || rule.effect.type === "remove") {
+                fired = true;
+              }
+            }
+          }
+          if (fired) rulesFired++;
+        }
+        if (pending.length > 0) {
+          pendingOpsRef.current.push(...pending);
+          scheduleBatchFlush();
+        }
+        setStats({
+          rulesEvaluated,
+          rulesFired,
+          nodesAffected,
+          ticksElapsed: tickCountRef.current
+        });
+        return working;
+      });
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    lastTickRef.current = performance.now();
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [rules, worldMeta.paused, worldMeta.tickSpeed, scheduleBatchFlush]);
+  React3.useEffect(() => {
+    return () => {
+      if (batchTimerRef.current) clearTimeout(batchTimerRef.current);
+    };
+  }, []);
+  return { simulatedScene: simScene, stats };
+}
+function createRuleTools(z) {
+  return [
+    // ── _rules.set ──────────────────────────────────────────────
+    {
+      name: "_rules.set",
+      description: `Create or update a simulation rule. Rules run client-side at tick speed (~10/sec) for emergent behavior.
+
+Entity convention: scene nodes with data.entityType and data.tags are "entities" that rules can target.
+
+Selector syntax:
+  "entityType:fish"  \u2014 matches nodes where data.entityType === "fish"
+  "tag:alive"        \u2014 matches nodes where data.tags includes "alive"
+  "name:hero"        \u2014 matches nodes where name === "hero"
+  "type:circle"      \u2014 matches nodes where type === "circle"
+  "*"                \u2014 matches any node with data.entityType
+
+Effect types:
+  transform \u2014 move/rotate nodes each tick (dx, dy, dRotation)
+  style     \u2014 update visual style (styleUpdates)
+  data      \u2014 update node metadata (dataUpdates)
+  counter   \u2014 increment/decrement a data field (field, delta)
+  spawn     \u2014 create new nodes near matched nodes (spawnNode)
+  remove    \u2014 delete matched nodes
+  tween     \u2014 start a tween animation on matched nodes
+
+Example \u2014 fish swim right:
+{ id: "fish-swim", name: "Fish Swim", description: "Fish drift right", enabled: true,
+  trigger: "tick", condition: { selector: "entityType:fish" },
+  effect: { type: "transform", dx: 2, variance: 0.3 } }
+
+Example \u2014 predator eats prey:
+{ id: "predator-eat", name: "Predator Eats", description: "Remove prey near predator", enabled: true,
+  trigger: "tick", condition: { selector: "entityType:prey", proximity: { target: "entityType:predator", distance: 30 } },
+  effect: { type: "remove" } }`,
+      input_schema: z.object({
+        id: z.string().describe("Unique rule ID"),
+        name: z.string().describe("Human-readable name"),
+        description: z.string().optional().describe("What this rule does"),
+        enabled: z.boolean().optional().describe("Whether rule is active (default true)"),
+        trigger: z.enum(["tick", "interaction", "proximity", "timer"]).optional().describe("When to evaluate (default tick)"),
+        condition: z.object({
+          selector: z.string().describe("Entity selector: entityType:X, tag:X, name:X, type:X, or *"),
+          proximity: z.object({
+            target: z.string().describe("Selector for proximity target"),
+            distance: z.number().describe("Max distance in pixels")
+          }).optional(),
+          state: z.record(z.any()).optional().describe("Match nodes where data[key] === value"),
+          cooldownMs: z.number().optional().describe("Minimum ms between firings per node"),
+          probability: z.number().min(0).max(1).optional().describe("Chance of evaluating (0-1)")
+        }),
+        effect: z.object({
+          type: z.enum(["transform", "style", "data", "counter", "spawn", "remove", "tween"]),
+          dx: z.number().optional().describe("X movement per tick"),
+          dy: z.number().optional().describe("Y movement per tick"),
+          dRotation: z.number().optional().describe("Rotation per tick (degrees)"),
+          styleUpdates: z.record(z.any()).optional().describe("Style properties to set"),
+          dataUpdates: z.record(z.any()).optional().describe("Data properties to set"),
+          field: z.string().optional().describe("Counter field name"),
+          delta: z.number().optional().describe("Counter increment per tick"),
+          spawnNode: z.record(z.any()).optional().describe("Node template to spawn"),
+          spawnOffset: z.object({ x: z.number(), y: z.number() }).optional(),
+          tween: z.object({
+            property: z.string(),
+            from: z.number(),
+            to: z.number(),
+            duration: z.number(),
+            easing: z.string().optional(),
+            repeat: z.number().optional(),
+            yoyo: z.boolean().optional()
+          }).optional(),
+          variance: z.number().min(0).max(1).optional().describe("Random variance (0-1)"),
+          probability: z.number().min(0).max(1).optional().describe("Chance effect fires (0-1)")
+        })
+      }),
+      risk: "low",
+      capabilities_required: ["state.write"],
+      handler: async (ctx, input) => {
+        const rules = [...ctx.state._rules || []];
+        const rule = {
+          id: input.id,
+          name: input.name,
+          description: input.description ?? "",
+          enabled: input.enabled ?? true,
+          trigger: input.trigger ?? "tick",
+          condition: input.condition,
+          effect: input.effect
+        };
+        const idx = rules.findIndex((r) => r.id === input.id);
+        if (idx !== -1) {
+          rules[idx] = rule;
+        } else {
+          rules.push(rule);
+        }
+        ctx.setState({ ...ctx.state, _rules: rules });
+        return { ruleId: rule.id, total: rules.length, action: idx !== -1 ? "updated" : "created" };
+      }
+    },
+    // ── _rules.remove ───────────────────────────────────────────
+    {
+      name: "_rules.remove",
+      description: "Remove a simulation rule by ID.",
+      input_schema: z.object({
+        id: z.string().describe("ID of the rule to remove")
+      }),
+      risk: "low",
+      capabilities_required: ["state.write"],
+      handler: async (ctx, input) => {
+        const rules = (ctx.state._rules || []).filter(
+          (r) => r.id !== input.id
+        );
+        ctx.setState({ ...ctx.state, _rules: rules });
+        return { removed: input.id, remaining: rules.length };
+      }
+    },
+    // ── _rules.world ────────────────────────────────────────────
+    {
+      name: "_rules.world",
+      description: `Set world metadata \u2014 name, description, paused state, tick speed.
+
+Examples:
+- Name the world: { name: "The Reef", description: "An underwater ecosystem" }
+- Pause: { paused: true }
+- Speed up: { tickSpeed: 50 }
+- Slow down: { tickSpeed: 200 }`,
+      input_schema: z.object({
+        name: z.string().optional().describe("World name"),
+        description: z.string().optional().describe("World description"),
+        paused: z.boolean().optional().describe("Pause/resume simulation"),
+        tickSpeed: z.number().min(16).max(2e3).optional().describe("Ms between ticks (16=60fps, 100=10fps, default 100)")
+      }),
+      risk: "low",
+      capabilities_required: ["state.write"],
+      handler: async (ctx, input) => {
+        const meta = {
+          ...ctx.state._worldMeta || {
+            name: "Untitled",
+            description: "",
+            paused: false,
+            tickSpeed: 100
+          }
+        };
+        if (input.name != null) meta.name = input.name;
+        if (input.description != null) meta.description = input.description;
+        if (input.paused != null) meta.paused = input.paused;
+        if (input.tickSpeed != null) meta.tickSpeed = input.tickSpeed;
+        ctx.setState({ ...ctx.state, _worldMeta: meta });
+        return { worldMeta: meta };
+      }
+    }
+  ];
+}
+function ruleTools(z) {
+  return createRuleTools(z);
+}
+
+// src/chat.ts
+function uid4() {
+  return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+}
+function capMessages2(msgs, max = 200) {
+  return msgs.length > max ? msgs.slice(-max) : msgs;
+}
+function getReact7() {
+  const R = globalThis.React;
+  if (!R) throw new Error("React is not available.");
+  return R;
+}
+function h4(type, props, ...children) {
+  return getReact7().createElement(type, props, ...children);
+}
+function createChatTools(z) {
+  return [
+    {
+      name: "_chat.send",
+      description: "Send a chat message",
+      input_schema: z.object({
+        message: z.string().min(1).max(2e3),
+        replyTo: z.string().optional()
+      }),
+      risk: "low",
+      capabilities_required: ["state.write"],
+      handler: async (ctx, input) => {
+        const messages = capMessages2([
+          ...ctx.state._chat || [],
+          {
+            id: uid4(),
+            actorId: ctx.actorId,
+            message: input.message,
+            replyTo: input.replyTo,
+            ts: ctx.timestamp
+          }
+        ]);
+        ctx.setState({ ...ctx.state, _chat: messages });
+        return { sent: true, messageCount: messages.length };
+      }
+    },
+    {
+      name: "_chat.clear",
+      description: "Clear all chat messages",
+      input_schema: z.object({}),
+      risk: "medium",
+      capabilities_required: ["state.write"],
+      handler: async (ctx) => {
+        ctx.setState({ ...ctx.state, _chat: [] });
+        return { cleared: true };
+      }
+    }
+  ];
+}
+function useChat(sharedState, callTool, actorId, ephemeralState, setEphemeral) {
+  const React4 = getReact7();
+  const messages = sharedState._chat || [];
+  const sendMessage = React4.useCallback(
+    async (message, replyTo) => {
+      await callTool("_chat.send", { message, replyTo });
+    },
+    [callTool]
+  );
+  const clearChat = React4.useCallback(async () => {
+    await callTool("_chat.clear", {});
+  }, [callTool]);
+  const { setTyping, typingUsers } = useTypingIndicator(actorId, ephemeralState, setEphemeral);
+  return { messages, sendMessage, clearChat, setTyping, typingUsers };
+}
+function parseActorId(id) {
+  const m = id.match(/^(.+)-(human|ai)-(\d+)$/);
+  if (m) return { username: m[1], type: m[2] };
+  return { username: id, type: "unknown" };
+}
+function formatTime(ts) {
+  const d = new Date(ts);
+  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function ChatPanel({
+  sharedState,
+  callTool,
+  actorId,
+  ephemeralState,
+  setEphemeral,
+  style,
+  embedded
+}) {
+  const React4 = getReact7();
+  const [open, setOpen] = React4.useState(false);
+  const [inputValue, setInputValue] = React4.useState("");
+  const [sending, setSending] = React4.useState(false);
+  const [lastSeenCount, setLastSeenCount] = React4.useState(0);
+  const listRef = React4.useRef(null);
+  const { messages, sendMessage, setTyping, typingUsers } = useChat(
+    sharedState,
+    callTool,
+    actorId,
+    ephemeralState,
+    setEphemeral
+  );
+  const unread = open ? 0 : Math.max(0, messages.length - lastSeenCount);
+  React4.useEffect(() => {
+    if (open || embedded) {
+      setLastSeenCount(messages.length);
+    }
+  }, [open, embedded, messages.length]);
+  React4.useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [messages.length]);
+  const handleSend = React4.useCallback(async () => {
+    const text = inputValue.trim();
+    if (!text || sending) return;
+    setSending(true);
+    setInputValue("");
+    setTyping(false);
+    try {
+      await sendMessage(text);
+    } catch {
+    } finally {
+      setSending(false);
+    }
+  }, [inputValue, sending, sendMessage, setTyping]);
+  const handleKeyDown = React4.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  const handleInputChange = React4.useCallback(
+    (e) => {
+      setInputValue(e.target.value);
+      setTyping(e.target.value.length > 0);
+    },
+    [setTyping]
+  );
+  const actorColors = {
+    human: "#60a5fa",
+    ai: "#a78bfa",
+    unknown: "#94a3b8"
+  };
+  const messageList = h4(
+    "div",
+    {
+      ref: listRef,
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        padding: "8px 12px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px",
+        ...embedded ? {} : { minHeight: "200px", maxHeight: "340px" }
+      }
+    },
+    messages.length === 0 ? h4(
+      "div",
+      {
+        style: {
+          color: "#4a4a5a",
+          fontSize: "13px",
+          textAlign: "center",
+          padding: "32px 0"
+        }
+      },
+      "No messages yet"
+    ) : messages.map((msg) => {
+      const { username, type } = parseActorId(msg.actorId);
+      const isMe = msg.actorId === actorId;
+      return h4(
+        "div",
+        {
+          key: msg.id,
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: isMe ? "flex-end" : "flex-start"
+          }
+        },
+        h4(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "6px",
+              alignItems: "baseline",
+              flexDirection: isMe ? "row-reverse" : "row"
+            }
+          },
+          h4(
+            "span",
+            {
+              style: {
+                fontSize: "11px",
+                fontWeight: 600,
+                color: actorColors[type] || actorColors.unknown
+              }
+            },
+            username
+          ),
+          h4(
+            "span",
+            { style: { fontSize: "10px", color: "#4a4a5a" } },
+            formatTime(msg.ts)
+          )
+        ),
+        h4(
+          "div",
+          {
+            style: {
+              background: isMe ? "#6366f1" : "#1e1e2e",
+              color: isMe ? "#fff" : "#e2e2e8",
+              padding: "6px 10px",
+              borderRadius: "10px",
+              borderTopRightRadius: isMe ? "2px" : "10px",
+              borderTopLeftRadius: isMe ? "10px" : "2px",
+              fontSize: "13px",
+              lineHeight: 1.4,
+              maxWidth: "240px",
+              wordBreak: "break-word"
+            }
+          },
+          msg.message
+        )
+      );
+    })
+  );
+  const typingIndicator = typingUsers.length > 0 ? h4(
+    "div",
+    {
+      style: {
+        padding: "4px 12px",
+        fontSize: "11px",
+        color: "#6b6b80",
+        fontStyle: "italic"
+      }
+    },
+    typingUsers.map((id) => parseActorId(id).username).join(", ") + (typingUsers.length === 1 ? " is typing..." : " are typing...")
+  ) : null;
+  const inputArea = h4(
+    "div",
+    {
+      style: {
+        padding: "8px 12px",
+        borderTop: "1px solid #1e1e24",
+        display: "flex",
+        gap: "8px",
+        flexShrink: 0
+      }
+    },
+    h4("input", {
+      type: "text",
+      value: inputValue,
+      onChange: handleInputChange,
+      onKeyDown: handleKeyDown,
+      placeholder: "Type a message...",
+      disabled: sending,
+      style: {
+        flex: 1,
+        padding: "6px 10px",
+        fontSize: "13px",
+        border: "1px solid #334155",
+        borderRadius: "6px",
+        background: "#1e293b",
+        color: "#fff",
+        outline: "none",
+        fontFamily: "system-ui, -apple-system, sans-serif"
+      }
+    }),
+    h4(
+      "button",
+      {
+        onClick: handleSend,
+        disabled: sending || !inputValue.trim(),
+        style: {
+          padding: "6px 12px",
+          borderRadius: "6px",
+          background: "#6366f1",
+          color: "#fff",
+          border: "none",
+          fontSize: "13px",
+          cursor: sending || !inputValue.trim() ? "not-allowed" : "pointer",
+          opacity: sending || !inputValue.trim() ? 0.5 : 1,
+          fontWeight: 500
+        }
+      },
+      "Send"
+    )
+  );
+  if (embedded) {
+    return h4(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          background: "#111113",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          ...style
+        }
+      },
+      messageList,
+      typingIndicator,
+      inputArea
+    );
+  }
+  const toggleBtn = h4(
+    "button",
+    {
+      onClick: () => setOpen(!open),
+      title: "Chat",
+      style: {
+        position: "fixed",
+        bottom: "64px",
+        right: "16px",
+        zIndex: 9990,
+        width: "40px",
+        height: "40px",
+        borderRadius: "50%",
+        background: "#1e1e2e",
+        border: "1px solid #334155",
+        color: "#94a3b8",
+        fontSize: "18px",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "background 0.15s",
+        ...style
+      }
+    },
+    h4(
+      "svg",
+      {
+        width: 20,
+        height: 20,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      h4("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+    ),
+    unread > 0 ? h4(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          top: "-4px",
+          right: "-4px",
+          width: "18px",
+          height: "18px",
+          borderRadius: "50%",
+          background: "#6366f1",
+          color: "#fff",
+          fontSize: "10px",
+          fontWeight: 700,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      },
+      unread > 9 ? "9+" : String(unread)
+    ) : null
+  );
+  if (!open) return toggleBtn;
+  return h4(
+    "div",
+    null,
+    toggleBtn,
+    h4(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: "112px",
+          right: "16px",
+          zIndex: 9990,
+          width: "320px",
+          maxHeight: "500px",
+          borderRadius: "12px",
+          background: "#111113",
+          border: "1px solid #1e1e24",
+          boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          fontFamily: "system-ui, -apple-system, sans-serif"
+        }
+      },
+      // Header
+      h4(
+        "div",
+        {
+          style: {
+            padding: "12px 16px",
+            borderBottom: "1px solid #1e1e24",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center"
+          }
+        },
+        h4(
+          "span",
+          {
+            style: {
+              fontSize: "12px",
+              fontWeight: 700,
+              color: "#6b6b80",
+              textTransform: "uppercase",
+              letterSpacing: "0.06em"
+            }
+          },
+          "Chat"
+        ),
+        h4(
+          "button",
+          {
+            onClick: () => setOpen(false),
+            style: {
+              background: "none",
+              border: "none",
+              color: "#6b6b80",
+              cursor: "pointer",
+              fontSize: "16px",
+              padding: "2px"
+            }
+          },
+          "\u2715"
+        )
+      ),
+      messageList,
+      typingIndicator,
+      inputArea
+    )
+  );
+}
+
+// src/bug-report.ts
+function uid5() {
+  return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+}
+function getReact8() {
+  const R = globalThis.React;
+  if (!R) throw new Error("React is not available.");
+  return R;
+}
+function h5(type, props, ...children) {
+  return getReact8().createElement(type, props, ...children);
+}
+function createBugReportTools(z) {
+  return [
+    {
+      name: "_bug.report",
+      description: "Submit a bug report with optional screenshot and description",
+      input_schema: z.object({
+        description: z.string().max(2e3).optional(),
+        screenshot: z.string().optional().describe("Base64 PNG data URL of the current canvas state"),
+        metadata: z.record(z.any()).optional().describe("Additional context (browser info, state snapshot, etc.)")
+      }),
+      risk: "low",
+      capabilities_required: ["state.write"],
+      handler: async (ctx, input) => {
+        const report = {
+          id: uid5(),
+          actorId: ctx.actorId,
+          description: input.description || "",
+          screenshot: input.screenshot,
+          metadata: input.metadata,
+          ts: ctx.timestamp,
+          status: "open"
+        };
+        const reports = [...ctx.state._bugReports || [], report].slice(-50);
+        ctx.setState({ ...ctx.state, _bugReports: reports });
+        return { reportId: report.id, totalReports: reports.length };
+      }
+    }
+  ];
+}
+async function captureScreenshot() {
+  try {
+    const root = document.getElementById("root");
+    if (!root) return null;
+    const canvases = root.querySelectorAll("canvas");
+    if (canvases.length === 1) {
+      const cvs = canvases[0];
+      const rootRect = root.getBoundingClientRect();
+      const cvsRect = cvs.getBoundingClientRect();
+      const fillsRoot = Math.abs(cvsRect.width - rootRect.width) < 20 && Math.abs(cvsRect.height - rootRect.height) < 20;
+      if (fillsRoot) {
+        return cvs.toDataURL("image/png");
+      }
+    }
+    const canvasSnapshots = /* @__PURE__ */ new Map();
+    canvases.forEach((cvs) => {
+      try {
+        const dataUrl = cvs.toDataURL("image/png");
+        if (dataUrl && dataUrl.length > 100) {
+          canvasSnapshots.set(cvs, dataUrl);
+        }
+      } catch {
+      }
+    });
+    const html2canvas = globalThis.html2canvas;
+    if (typeof html2canvas === "function") {
+      const captured = await html2canvas(root, {
+        backgroundColor: "#0a0a0a",
+        useCORS: true,
+        logging: false,
+        scale: 0.5,
+        onclone: (_doc, clonedRoot) => {
+          const clonedCanvases = clonedRoot.querySelectorAll("canvas");
+          clonedCanvases.forEach((clonedCvs, idx) => {
+            const originalCvs = canvases[idx];
+            const snapshot = canvasSnapshots.get(originalCvs);
+            if (snapshot) {
+              const img = _doc.createElement("img");
+              img.src = snapshot;
+              img.style.width = clonedCvs.style.width || `${clonedCvs.width}px`;
+              img.style.height = clonedCvs.style.height || `${clonedCvs.height}px`;
+              img.style.display = clonedCvs.style.display;
+              clonedCvs.parentNode?.replaceChild(img, clonedCvs);
+            }
+          });
+        }
+      });
+      return captured.toDataURL("image/png");
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function ReportBug({ callTool, actorId, style }) {
+  const React4 = getReact8();
+  const [phase, setPhase] = React4.useState("idle");
+  const [screenshot, setScreenshot] = React4.useState(null);
+  const [description, setDescription] = React4.useState("");
+  const [submitting, setSubmitting] = React4.useState(false);
+  const handleOpen = React4.useCallback(async () => {
+    setPhase("capturing");
+    const dataUrl = await captureScreenshot();
+    setScreenshot(dataUrl);
+    setPhase("form");
+  }, []);
+  const handleCancel = React4.useCallback(() => {
+    setPhase("idle");
+    setScreenshot(null);
+    setDescription("");
+  }, []);
+  const handleSubmit = React4.useCallback(async () => {
+    if (submitting) return;
+    setSubmitting(true);
+    try {
+      await callTool("_bug.report", {
+        description: description || void 0,
+        screenshot: screenshot || void 0,
+        metadata: { userAgent: navigator.userAgent }
+      });
+      setPhase("submitted");
+      setDescription("");
+      setScreenshot(null);
+      setTimeout(() => setPhase("idle"), 2e3);
+    } catch {
+    } finally {
+      setSubmitting(false);
+    }
+  }, [callTool, description, screenshot, submitting]);
+  const bugButton = h5(
+    "button",
+    {
+      onClick: phase === "idle" ? handleOpen : void 0,
+      title: "Report Bug",
+      style: {
+        position: "fixed",
+        bottom: "112px",
+        right: "16px",
+        zIndex: 9990,
+        width: "40px",
+        height: "40px",
+        borderRadius: "50%",
+        background: phase === "capturing" ? "#334155" : "#1e1e2e",
+        border: "1px solid #334155",
+        color: "#94a3b8",
+        fontSize: "18px",
+        cursor: phase === "idle" ? "pointer" : "default",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "background 0.15s",
+        ...style
+      }
+    },
+    phase === "capturing" ? (
+      // Spinner
+      h5(
+        "svg",
+        {
+          width: 18,
+          height: 18,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          style: { animation: "spin 0.8s linear infinite" }
+        },
+        h5("circle", { cx: 12, cy: 12, r: 10, strokeDasharray: "32", strokeDashoffset: "12" })
+      )
+    ) : phase === "submitted" ? (
+      // Checkmark
+      h5(
+        "svg",
+        {
+          width: 18,
+          height: 18,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "#22c55e",
+          strokeWidth: 2.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        h5("polyline", { points: "20 6 9 17 4 12" })
+      )
+    ) : (
+      // Bug icon
+      h5(
+        "svg",
+        {
+          width: 18,
+          height: 18,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        // Simple bug shape: body oval + antenna + legs
+        h5("ellipse", { cx: 12, cy: 14, rx: 5, ry: 6 }),
+        h5("path", { d: "M12 8V2" }),
+        h5("path", { d: "M9 3l3 5 3-5" }),
+        h5("path", { d: "M7 14H2" }),
+        h5("path", { d: "M22 14h-5" }),
+        h5("path", { d: "M7.5 10.5L4 8" }),
+        h5("path", { d: "M16.5 10.5L20 8" })
+      )
+    )
+  );
+  if (phase === "idle" || phase === "capturing" || phase === "submitted") {
+    return bugButton;
+  }
+  return h5(
+    "div",
+    null,
+    bugButton,
+    // Backdrop
+    h5(
+      "div",
+      {
+        onClick: handleCancel,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 9995,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "rgba(0,0,0,0.6)",
+          backdropFilter: "blur(4px)"
+        }
+      },
+      // Form panel
+      h5(
+        "div",
+        {
+          onClick: (e) => e.stopPropagation(),
+          style: {
+            background: "#1e1e2e",
+            borderRadius: "12px",
+            padding: "20px",
+            boxShadow: "0 20px 60px rgba(0,0,0,0.5)",
+            maxWidth: "400px",
+            width: "90%",
+            border: "1px solid #334155",
+            fontFamily: "system-ui, -apple-system, sans-serif"
+          }
+        },
+        // Title
+        h5(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: "16px"
+            }
+          },
+          h5(
+            "h3",
+            { style: { margin: 0, fontSize: "1.1rem", fontWeight: 600, color: "#fff" } },
+            "Report Bug"
+          ),
+          h5(
+            "button",
+            {
+              onClick: handleCancel,
+              style: {
+                background: "none",
+                border: "none",
+                fontSize: "1.25rem",
+                cursor: "pointer",
+                color: "#94a3b8",
+                padding: "4px"
+              }
+            },
+            "\u2715"
+          )
+        ),
+        // Screenshot preview
+        screenshot ? h5("img", {
+          src: screenshot,
+          alt: "Screenshot",
+          style: {
+            width: "100%",
+            borderRadius: "8px",
+            marginBottom: "12px",
+            border: "1px solid #334155"
+          }
+        }) : h5(
+          "div",
+          {
+            style: {
+              padding: "24px",
+              textAlign: "center",
+              color: "#6b6b80",
+              fontSize: "13px",
+              border: "1px dashed #334155",
+              borderRadius: "8px",
+              marginBottom: "12px"
+            }
+          },
+          "Screenshot unavailable"
+        ),
+        // Description input
+        h5("textarea", {
+          value: description,
+          onChange: (e) => setDescription(e.target.value),
+          placeholder: "What's wrong? (optional)",
+          rows: 3,
+          style: {
+            width: "100%",
+            padding: "8px 12px",
+            fontSize: "13px",
+            border: "1px solid #334155",
+            borderRadius: "6px",
+            background: "#1e293b",
+            color: "#fff",
+            outline: "none",
+            resize: "vertical",
+            boxSizing: "border-box",
+            fontFamily: "system-ui, -apple-system, sans-serif",
+            marginBottom: "12px"
+          }
+        }),
+        // Action buttons
+        h5(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", justifyContent: "flex-end" }
+          },
+          h5(
+            "button",
+            {
+              onClick: handleCancel,
+              style: {
+                padding: "8px 16px",
+                borderRadius: "6px",
+                background: "transparent",
+                color: "#94a3b8",
+                border: "1px solid #334155",
+                fontSize: "13px",
+                cursor: "pointer",
+                fontWeight: 500
+              }
+            },
+            "Cancel"
+          ),
+          h5(
+            "button",
+            {
+              onClick: handleSubmit,
+              disabled: submitting,
+              style: {
+                padding: "8px 16px",
+                borderRadius: "6px",
+                background: "#ef4444",
+                color: "#fff",
+                border: "none",
+                fontSize: "13px",
+                cursor: submitting ? "not-allowed" : "pointer",
+                opacity: submitting ? 0.5 : 1,
+                fontWeight: 500
+              }
+            },
+            submitting ? "Sending..." : "Submit Report"
+          )
+        )
+      )
+    )
+  );
+}
+
+// src/composability.ts
+function importTools(experienceModule, toolNames, prefix) {
+  if (!experienceModule?.tools) {
+    throw new Error("importTools: experience module has no tools array");
+  }
+  let tools;
+  if (toolNames === "*") {
+    tools = [...experienceModule.tools];
+  } else {
+    tools = experienceModule.tools.filter((t) => toolNames.includes(t.name));
+    const found = tools.map((t) => t.name);
+    const missing = toolNames.filter((n) => !found.includes(n));
+    if (missing.length > 0) {
+      throw new Error(`importTools: tools not found: ${missing.join(", ")}`);
+    }
+  }
+  if (prefix) {
+    return tools.map((t) => ({
+      ...t,
+      name: `${prefix}.${t.name}`
+    }));
+  }
+  return tools;
+}
+function getReact9() {
+  const R = globalThis.React;
+  if (!R) throw new Error("React is not available.");
+  return R;
+}
+function h6(type, props, ...children) {
+  return getReact9().createElement(type, props, ...children);
+}
+function EmbeddedExperience(props) {
+  const React4 = getReact9();
+  const {
+    experience,
+    stateKey,
+    sharedState,
+    callTool,
+    roomId,
+    actorId,
+    participants,
+    ephemeralState,
+    setEphemeral,
+    roomConfig,
+    style,
+    className
+  } = props;
+  const childState = React4.useMemo(
+    () => sharedState[stateKey] || {},
+    [sharedState, stateKey]
+  );
+  const scopedCallTool = React4.useCallback(
+    async (name, input) => {
+      return callTool(`${stateKey}:${name}`, { ...input, _scopeKey: stateKey });
+    },
+    [callTool, stateKey]
+  );
+  const childEphemeral = React4.useMemo(() => {
+    const scoped = {};
+    for (const [actId, data] of Object.entries(ephemeralState)) {
+      if (data[stateKey]) {
+        scoped[actId] = data[stateKey];
+      }
+    }
+    return scoped;
+  }, [ephemeralState, stateKey]);
+  const scopedSetEphemeral = React4.useCallback(
+    (data) => {
+      setEphemeral({ [stateKey]: data });
+    },
+    [setEphemeral, stateKey]
+  );
+  const ChildCanvas = experience.Canvas;
+  return h6(
+    "div",
+    { style, className },
+    h6(ChildCanvas, {
+      roomId,
+      actorId,
+      sharedState: childState,
+      callTool: scopedCallTool,
+      ephemeralState: childEphemeral,
+      setEphemeral: scopedSetEphemeral,
+      participants,
+      roomConfig: roomConfig || {}
+    })
+  );
+}
 export {
   Badge,
   Button,
   Card,
+  ChatPanel,
+  ColorPicker,
+  Dropdown,
+  EmbeddedExperience,
   Grid,
   InMemoryAdapter,
   Input,
+  Modal,
+  PathBuilder,
+  PixiSceneRenderer,
+  ReportBug,
+  SceneRenderer,
+  Slider,
   Stack,
+  SvgSceneRenderer,
+  Tabs,
+  Textarea,
+  allNodeIds,
+  cloneScene2 as cloneScene,
   compareSemver,
-  createAgentProtocolHints,
   createAgentProtocolTools,
+  createBugReportTools,
+  createChatTools,
+  createNode,
+  createRuleTools,
+  createScene,
+  createSceneSchemas,
+  createSceneTools,
   defineEphemeralAction,
   defineExperience,
+  defineRoomConfig,
+  defineStream,
   defineTest,
   defineTool,
+  easingFunctions,
+  findNodes,
+  findParent,
+  getPath,
   getStateVersion,
+  importTools,
+  interpolateTween,
   migrateState,
+  nodeById,
+  nodeCount,
+  nodeMatchesSelector,
+  phaseTool,
   quickTool,
+  removeNodeById,
+  ruleTools,
+  sceneTools,
+  setPath,
+  spawnParticles,
+  tickParticleNode,
+  tickParticles,
+  undoTool,
   useAnimationFrame,
+  useBlob,
+  useChat,
+  useDebounce,
   useFollow,
   useOptimisticTool,
   useParticipants,
+  useParticleTick,
+  usePhase,
+  useRuleTick,
+  useSceneDrag,
+  useSceneInteraction,
+  useSceneSelection,
+  useSceneTweens,
+  useSceneViewport,
   useSharedState,
+  useThrottle,
   useToolCall,
   useTypingIndicator,
-  validateExperience
+  useUndo,
+  validateExperience,
+  walkNodes
 };