@almadar/ui 5.89.0 → 5.93.0

package/dist/components/index.cjs

@@ -8148,7 +8148,7 @@ function ActionTile({
 }
 var DRAG_MIME, SIZE_CONFIG;
 var init_ActionTile = __esm({
-  "components/game/2d/organisms/ActionTile.tsx"() {
+  "components/game/2d/molecules/ActionTile.tsx"() {
     init_atoms();
     init_cn();
     DRAG_MIME = "application/x-almadar-slot-item";
@@ -8185,7 +8185,7 @@ function ActionPalette({
   ] });
 }
 var init_ActionPalette = __esm({
-  "components/game/2d/organisms/ActionPalette.tsx"() {
+  "components/game/2d/molecules/ActionPalette.tsx"() {
     init_atoms();
     init_cn();
     init_ActionTile();
@@ -16348,6 +16348,7 @@ function Canvas2D({
   unitScale = 1,
   showMinimap = true,
   animate,
+  interpolateUnits = false,
   // Tuning
   debug: debug2 = false,
   spriteHeightRatio = 1.5,
@@ -16382,6 +16383,8 @@ function Canvas2D({
   const containerRef = React74.useRef(null);
   const lerpRafRef = React74.useRef(0);
   const animRafRef = React74.useRef(0);
+  const unitInterp = useRenderInterpolation();
+  const interpolatedUnitPositionsRef = React74.useRef(/* @__PURE__ */ new Map());
   const [viewportSize, setViewportSize] = React74.useState({ width: 800, height: 600 });
   React74.useEffect(() => {
     const el = containerRef.current;
@@ -16696,7 +16699,8 @@ function Canvas2D({
       return depthA !== depthB ? depthA - depthB : a.position.y - b.position.y;
     });
     for (const unit of sortedUnits) {
-      const pos = project(unit.position.x, unit.position.y, baseOffsetX);
+      const interpolated = interpolateUnits ? interpolatedUnitPositionsRef.current.get(unit.id) : void 0;
+      const pos = project(interpolated?.x ?? unit.position.x, interpolated?.y ?? unit.position.y, baseOffsetX);
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
@@ -16848,7 +16852,8 @@ function Canvas2D({
     unitScale,
     assetManifest,
     spriteHeightRatio,
-    spriteMaxWidthRatio
+    spriteMaxWidthRatio,
+    interpolateUnits
   ]);
   React74.useEffect(() => {
     if (camera === "fixed") return;
@@ -16863,6 +16868,19 @@ function Canvas2D({
       y: centerY - viewportSize.height / 2
     };
   }, [camera, selectedUnitId, units, project, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
+  React74.useEffect(() => {
+    if (isSide || !interpolateUnits) return;
+    unitInterp.onSnapshot(
+      units.filter((u) => !!u.position).map((u) => ({ id: u.id, x: u.position.x, y: u.position.y }))
+    );
+  }, [isSide, interpolateUnits, units, unitInterp]);
+  React74.useEffect(() => {
+    if (isSide || !interpolateUnits) return;
+    return unitInterp.startLoop((positions) => {
+      interpolatedUnitPositionsRef.current = positions;
+      draw();
+    });
+  }, [isSide, interpolateUnits, unitInterp, draw]);
   React74.useEffect(() => {
     if (isSide) return;
     draw();
@@ -26647,6 +26665,7 @@ function GameCard({
   selected = false,
   disabled = false,
   size = "md",
+  animState = "idle",
   onClick,
   clickEvent,
   className
@@ -26674,6 +26693,7 @@ function GameCard({
         cardSizeMap[size],
         disabled ? "border-border opacity-50 cursor-not-allowed" : "border-accent hover:brightness-125 hover:-translate-y-1 cursor-pointer",
         selected && "ring-2 ring-foreground ring-offset-1 ring-offset-background -translate-y-1",
+        ANIM_STATE_CLASS[animState],
         className
       ),
       children: [
@@ -26706,7 +26726,7 @@ function GameCard({
     }
   );
 }
-var cardSizeMap, artPxMap;
+var cardSizeMap, artPxMap, ANIM_STATE_CLASS;
 var init_GameCard = __esm({
   "components/game/2d/atoms/GameCard.tsx"() {
     "use client";
@@ -26722,6 +26742,12 @@ var init_GameCard = __esm({
       lg: "w-24 h-36"
     };
     artPxMap = { sm: 40, md: 52, lg: 64 };
+    ANIM_STATE_CLASS = {
+      idle: "",
+      drawn: "scale-105",
+      played: "-translate-y-2 opacity-80",
+      flipped: "scale-x-0"
+    };
     GameCard.displayName = "GameCard";
   }
 });
@@ -27412,8 +27438,11 @@ function DialogueBubble({
   text = "The dungeon awaits. Choose your path wisely.",
   portrait = DEFAULT_PORTRAIT,
   position = "bottom",
+  mood = "neutral",
+  revealedChars,
   className
 }) {
+  const visibleText = revealedChars === void 0 ? text : text.slice(0, revealedChars);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     exports.Box,
     {
@@ -27423,16 +27452,16 @@ function DialogueBubble({
         className
       ),
       children: [
-        portrait && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-warning/60", children: /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl: portrait, icon: "image", size: 48, alt: speaker ?? "speaker", className: "w-full h-full object-cover" }) }),
+        portrait && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 transition-colors duration-300", MOOD_RING_CLASS[mood]), children: /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl: portrait, icon: "image", size: 48, alt: speaker ?? "speaker", className: "w-full h-full object-cover" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "flex flex-col gap-1 min-w-0", children: [
           speaker && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { as: "span", className: "text-sm font-bold text-warning", children: speaker }),
-          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { as: "span", className: "text-sm text-foreground leading-relaxed", children: text })
+          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { as: "span", className: "text-sm text-foreground leading-relaxed", children: visibleText })
         ] })
       ]
     }
   );
 }
-var DEFAULT_PORTRAIT;
+var DEFAULT_PORTRAIT, MOOD_RING_CLASS;
 var init_DialogueBubble = __esm({
   "components/game/2d/atoms/DialogueBubble.tsx"() {
     init_cn();
@@ -27444,6 +27473,12 @@ var init_DialogueBubble = __esm({
       role: "effect",
       category: "character"
     };
+    MOOD_RING_CLASS = {
+      neutral: "border-warning/60",
+      happy: "border-success/70",
+      concerned: "border-info/70",
+      angry: "border-error/70"
+    };
     DialogueBubble.displayName = "DialogueBubble";
   }
 });
@@ -27884,7 +27919,7 @@ function StateNode2({
   );
 }
 var init_StateNode = __esm({
-  "components/game/2d/organisms/StateNode.tsx"() {
+  "components/game/2d/molecules/StateNode.tsx"() {
     init_atoms();
     init_cn();
     StateNode2.displayName = "StateNode";
@@ -27956,7 +27991,7 @@ function TransitionArrow({
 }
 var NODE_RADIUS;
 var init_TransitionArrow = __esm({
-  "components/game/2d/organisms/TransitionArrow.tsx"() {
+  "components/game/2d/molecules/TransitionArrow.tsx"() {
     init_cn();
     NODE_RADIUS = 40;
     TransitionArrow.displayName = "TransitionArrow";
@@ -28620,7 +28655,7 @@ function TraitStateViewer({
 }
 var SIZE_CONFIG2;
 var init_TraitStateViewer = __esm({
-  "components/game/2d/organisms/TraitStateViewer.tsx"() {
+  "components/game/2d/molecules/TraitStateViewer.tsx"() {
     "use client";
     init_cn();
     init_Box();
@@ -28653,7 +28688,8 @@ function TraitSlot({
   onClick,
   onRemove,
   clickEvent,
-  removeEvent
+  removeEvent,
+  dropEvent
 }) {
   const { emit } = useEventBus();
   const [isHovered, setIsHovered] = React74.useState(false);
@@ -28685,29 +28721,30 @@ function TraitSlot({
     onDragStart?.(equippedItem);
   }, [equippedItem, draggable, onDragStart]);
   const handleDragOver = React74.useCallback((e) => {
-    if (locked || !onItemDrop) return;
+    if (locked || !onItemDrop && !dropEvent) return;
     if (e.dataTransfer.types.includes(DRAG_MIME2)) {
       e.preventDefault();
       const allowed = e.dataTransfer.effectAllowed;
       e.dataTransfer.dropEffect = allowed === "copy" ? "copy" : "move";
       setIsDragOver(true);
     }
-  }, [locked, onItemDrop]);
+  }, [locked, onItemDrop, dropEvent]);
   const handleDragLeave = React74.useCallback(() => {
     setIsDragOver(false);
   }, []);
   const handleDrop = React74.useCallback((e) => {
     e.preventDefault();
     setIsDragOver(false);
-    if (locked || !onItemDrop) return;
+    if (locked || !onItemDrop && !dropEvent) return;
     const raw = e.dataTransfer.getData(DRAG_MIME2);
     if (!raw) return;
     try {
       const item = JSON.parse(raw);
-      onItemDrop(item);
+      if (dropEvent) emit(`UI:${dropEvent}`, { slotNumber, itemId: item.id });
+      else onItemDrop?.(item);
     } catch {
     }
-  }, [locked, onItemDrop]);
+  }, [locked, onItemDrop, dropEvent, emit, slotNumber]);
   const getTooltipStyle = () => {
     if (!slotRef.current) return {};
     const rect = slotRef.current.getBoundingClientRect();
@@ -28827,7 +28864,7 @@ function TraitSlot({
 }
 var SIZE_CONFIG3, DRAG_MIME2;
 var init_TraitSlot = __esm({
-  "components/game/2d/organisms/TraitSlot.tsx"() {
+  "components/game/2d/molecules/TraitSlot.tsx"() {
     "use client";
     init_cn();
     init_useEventBus();
@@ -29033,6 +29070,8 @@ function SequenceBar({
   maxSlots,
   onSlotDrop,
   onSlotRemove,
+  slotDropEvent,
+  slotRemoveEvent,
   playing = false,
   currentStep = -1,
   categoryColors,
@@ -29040,14 +29079,17 @@ function SequenceBar({
   size = "lg",
   className
 }) {
+  const { emit } = useEventBus();
   const handleDrop = React74.useCallback((index) => (item) => {
     if (playing) return;
-    onSlotDrop(index, item);
-  }, [onSlotDrop, playing]);
+    if (slotDropEvent) emit(`UI:${slotDropEvent}`, { slotNumber: index, itemId: item.id });
+    else onSlotDrop?.(index, item);
+  }, [emit, slotDropEvent, onSlotDrop, playing]);
   const handleRemove = React74.useCallback((index) => () => {
     if (playing) return;
-    onSlotRemove(index);
-  }, [onSlotRemove, playing]);
+    if (slotRemoveEvent) emit(`UI:${slotRemoveEvent}`, { slotNumber: index });
+    else onSlotRemove?.(index);
+  }, [emit, slotRemoveEvent, onSlotRemove, playing]);
   const paddedSlots = Array.from({ length: maxSlots }, (_, i) => slots[i]);
   return /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxRuntime.jsxs(React74__namespace.default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -29079,9 +29121,10 @@ function SequenceBar({
   ] }, i)) });
 }
 var init_SequenceBar = __esm({
-  "components/game/2d/organisms/SequenceBar.tsx"() {
+  "components/game/2d/molecules/SequenceBar.tsx"() {
     init_atoms();
     init_cn();
+    init_useEventBus();
     init_TraitSlot();
     SequenceBar.displayName = "SequenceBar";
   }
@@ -29397,7 +29440,7 @@ function RuleEditor({
   ] });
 }
 var init_RuleEditor = __esm({
-  "components/game/2d/organisms/RuleEditor.tsx"() {
+  "components/game/2d/molecules/RuleEditor.tsx"() {
     init_atoms();
     init_cn();
     RuleEditor.displayName = "RuleEditor";
@@ -29438,7 +29481,7 @@ function EventLog({
 }
 var STATUS_STYLES, STATUS_DOTS;
 var init_EventLog = __esm({
-  "components/game/2d/organisms/EventLog.tsx"() {
+  "components/game/2d/molecules/EventLog.tsx"() {
     init_atoms();
     init_cn();
     STATUS_STYLES = {
@@ -29493,10 +29536,12 @@ var init_puzzleObject = __esm({
 function ObjectRulePanel({
   object,
   onRulesChange,
+  rulesChangeEvent,
   disabled = false,
   className
 }) {
   const { t } = hooks.useTranslate();
+  const { emit } = useEventBus();
   const id = objId(object);
   const name = objName(object);
   const icon = objIcon(object);
@@ -29507,15 +29552,19 @@ function ObjectRulePanel({
   const rules = objRules(object);
   const maxRules = objMaxRules(object);
   const canAdd = rules.length < maxRules;
+  const emitRules = React74.useCallback((newRules) => {
+    if (rulesChangeEvent) emit(`UI:${rulesChangeEvent}`, { objectId: id, rules: newRules });
+    else onRulesChange?.(id, newRules);
+  }, [rulesChangeEvent, emit, id, onRulesChange]);
   const handleRuleChange = React74.useCallback((index, updatedRule) => {
     const newRules = [...rules];
     newRules[index] = updatedRule;
-    onRulesChange(id, newRules);
-  }, [id, rules, onRulesChange]);
+    emitRules(newRules);
+  }, [rules, emitRules]);
   const handleRuleRemove = React74.useCallback((index) => {
     const newRules = rules.filter((_, i) => i !== index);
-    onRulesChange(id, newRules);
-  }, [id, rules, onRulesChange]);
+    emitRules(newRules);
+  }, [rules, emitRules]);
   const handleAddRule = React74.useCallback(() => {
     if (!canAdd || disabled) return;
     const firstEvent = availableEvents[0]?.value || "";
@@ -29525,8 +29574,8 @@ function ObjectRulePanel({
       whenEvent: firstEvent,
       thenAction: firstAction
     };
-    onRulesChange(id, [...rules, newRule]);
-  }, [canAdd, disabled, id, rules, availableEvents, availableActions, onRulesChange]);
+    emitRules([...rules, newRule]);
+  }, [canAdd, disabled, rules, availableEvents, availableActions, emitRules]);
   const machine = {
     name,
     states,
@@ -29566,9 +29615,10 @@ function ObjectRulePanel({
 }
 var nextRuleId;
 var init_ObjectRulePanel = __esm({
-  "components/game/2d/organisms/ObjectRulePanel.tsx"() {
+  "components/game/2d/molecules/ObjectRulePanel.tsx"() {
     init_atoms();
     init_cn();
+    init_useEventBus();
     init_TraitStateViewer();
     init_RuleEditor();
     init_puzzleObject();
@@ -29798,61 +29848,35 @@ function VariablePanel({
   const { t } = hooks.useTranslate();
   return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { className: cn("p-3 rounded-lg bg-card border border-border", className), gap: "sm", children: [
     /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body2", className: "text-muted-foreground font-medium", children: t("stateArchitect.variables", { name: entityName }) }),
-    variables.map((v) => {
-      const name = v.name == null ? "" : String(v.name);
-      const value = numField(v.value);
-      const max = numField(v.max, 100);
-      const min = numField(v.min, 0);
-      const unit = v.unit == null ? "" : String(v.unit);
-      const pct = Math.round((value - min) / (max - min) * 100);
-      const isHigh = pct > 80;
-      const isLow = pct < 20;
-      return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { className: "items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-foreground font-medium", children: name }),
-          /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", className: cn(
-            isHigh ? "text-error" : isLow ? "text-warning" : "text-foreground"
-          ), children: [
-            value,
-            unit,
-            " / ",
-            max,
-            unit
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          exports.ProgressBar,
-          {
-            value: pct,
-            color: isHigh ? "danger" : isLow ? "warning" : "primary",
-            size: "sm"
-          }
-        )
-      ] }, name);
-    })
+    (variables ?? []).map((v) => /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { className: "items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-foreground font-medium", children: v.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-accent font-mono", children: v.value })
+    ] }, v.name))
   ] });
 }
-var numField;
 var init_VariablePanel = __esm({
-  "components/game/2d/organisms/VariablePanel.tsx"() {
+  "components/game/2d/molecules/VariablePanel.tsx"() {
     init_atoms();
     init_cn();
-    numField = (v, fallback = 0) => {
-      const n = Number(v);
-      return Number.isFinite(n) ? n : fallback;
-    };
     VariablePanel.displayName = "VariablePanel";
   }
 });
 function StateJsonView({
-  data,
+  name,
+  initialState,
+  states,
+  transitions,
   label,
   defaultExpanded = false,
   className
 }) {
   const { t } = hooks.useTranslate();
   const [expanded, setExpanded] = React74.useState(defaultExpanded);
-  const jsonString = JSON.stringify(data, null, 2);
+  const jsonString = JSON.stringify(
+    { name, initialState, states: states ?? [], transitions: transitions ?? [] },
+    null,
+    2
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { className: cn("rounded-lg border border-border overflow-hidden", className), gap: "none", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { className: "items-center justify-between p-2 bg-muted", gap: "sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-muted-foreground font-medium", children: label ?? t("stateArchitect.viewCode") }),
@@ -29869,7 +29893,7 @@ function StateJsonView({
   ] });
 }
 var init_StateJsonView = __esm({
-  "components/game/2d/organisms/StateJsonView.tsx"() {
+  "components/game/2d/molecules/StateJsonView.tsx"() {
     init_atoms();
     init_cn();
     StateJsonView.displayName = "StateJsonView";
@@ -30038,7 +30062,7 @@ function StateArchitectBoard({
     setAddingFrom(null);
     if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
   }, [initialState, entityVariables, playAgainEvent, emit]);
-  const codeData = React74.useMemo(() => ({
+  React74.useMemo(() => ({
     name: entityName,
     states: entityStates,
     initialState,
@@ -30173,7 +30197,7 @@ function StateArchitectBoard({
               VariablePanel,
               {
                 entityName,
-                variables
+                variables: variables.map((v) => ({ name: String(v.name ?? ""), value: String(v.value ?? "") }))
               }
             ),
             testResults.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { className: "p-3 rounded-container bg-card border border-border", gap: "xs", children: [
@@ -30184,7 +30208,16 @@ function StateArchitectBoard({
                 !r.passed && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-error", children: t("stateArchitect.gotState", { state: r.actualState }) })
               ] }, i))
             ] }),
-            resolved.showCodeView !== false && /* @__PURE__ */ jsxRuntime.jsx(StateJsonView, { data: codeData, label: "View Code" })
+            resolved.showCodeView !== false && /* @__PURE__ */ jsxRuntime.jsx(
+              StateJsonView,
+              {
+                name: entityName,
+                initialState,
+                states: entityStates,
+                transitions: transitions.map((tr) => ({ from: tr.from, to: tr.to, event: tr.event })),
+                label: "View Code"
+              }
+            )
           ] })
         ] }),
         isSuccess && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("stateArchitect.allPassed") }) }),
@@ -30825,336 +30858,6 @@ var init_physicsPresets = __esm({
     ];
   }
 });
-function resolvePreset(preset) {
-  if (typeof preset !== "string") return preset;
-  return PRESET_BY_ID[preset] ?? exports.projectileMotion;
-}
-function SimulationCanvas({
-  preset: presetProp,
-  width = 600,
-  height = 400,
-  bodies: externalBodies,
-  className
-}) {
-  const preset = React74.useMemo(() => resolvePreset(presetProp), [presetProp]);
-  const canvasRef = React74.useRef(null);
-  const bodiesRef = React74.useRef(structuredClone(preset.bodies));
-  const interp = useRenderInterpolation();
-  React74.useEffect(() => {
-    bodiesRef.current = structuredClone(preset.bodies);
-  }, [preset]);
-  const draw = React74.useCallback(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const bodies = bodiesRef.current;
-    ctx.clearRect(0, 0, width, height);
-    ctx.fillStyle = preset.backgroundColor ?? "#1a1a2e";
-    ctx.fillRect(0, 0, width, height);
-    if (preset.constraints) {
-      for (const c of preset.constraints) {
-        const a = bodies[c.bodyA];
-        const b = bodies[c.bodyB];
-        if (a && b) {
-          ctx.beginPath();
-          ctx.moveTo(a.x, a.y);
-          ctx.lineTo(b.x, b.y);
-          ctx.strokeStyle = "#533483";
-          ctx.lineWidth = 1;
-          ctx.setLineDash([4, 4]);
-          ctx.stroke();
-          ctx.setLineDash([]);
-        }
-      }
-    }
-    for (const body of bodies) {
-      ctx.beginPath();
-      ctx.arc(body.x, body.y, body.radius, 0, Math.PI * 2);
-      ctx.fillStyle = body.color ?? "#e94560";
-      ctx.fill();
-      if (preset.showVelocity) {
-        ctx.beginPath();
-        ctx.moveTo(body.x, body.y);
-        ctx.lineTo(body.x + body.vx * 0.1, body.y + body.vy * 0.1);
-        ctx.strokeStyle = "#16213e";
-        ctx.lineWidth = 2;
-        ctx.stroke();
-      }
-    }
-  }, [width, height, preset]);
-  React74.useEffect(() => {
-    if (!externalBodies) return;
-    interp.onSnapshot(externalBodies.map((b) => ({ id: b.id, x: b.x, y: b.y })));
-  }, [externalBodies]);
-  const presetRef = React74.useRef(preset);
-  presetRef.current = preset;
-  const widthRef = React74.useRef(width);
-  widthRef.current = width;
-  const heightRef = React74.useRef(height);
-  heightRef.current = height;
-  React74.useEffect(() => {
-    if (!externalBodies) return;
-    const drawInterpolated = (positions) => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      const bodies = bodiesRef.current;
-      const p = presetRef.current;
-      const w = widthRef.current;
-      const h = heightRef.current;
-      ctx.clearRect(0, 0, w, h);
-      ctx.fillStyle = p.backgroundColor ?? "#1a1a2e";
-      ctx.fillRect(0, 0, w, h);
-      if (p.constraints) {
-        for (const c of p.constraints) {
-          const a = bodies[c.bodyA];
-          const b = bodies[c.bodyB];
-          if (a && b) {
-            const aPos = positions.get(a.id) ?? a;
-            const bPos = positions.get(b.id) ?? b;
-            ctx.beginPath();
-            ctx.moveTo(aPos.x, aPos.y);
-            ctx.lineTo(bPos.x, bPos.y);
-            ctx.strokeStyle = "#533483";
-            ctx.lineWidth = 1;
-            ctx.setLineDash([4, 4]);
-            ctx.stroke();
-            ctx.setLineDash([]);
-          }
-        }
-      }
-      for (const body of bodies) {
-        const pos = positions.get(body.id) ?? body;
-        ctx.beginPath();
-        ctx.arc(pos.x, pos.y, body.radius, 0, Math.PI * 2);
-        ctx.fillStyle = body.color ?? "#e94560";
-        ctx.fill();
-        if (p.showVelocity) {
-          ctx.beginPath();
-          ctx.moveTo(pos.x, pos.y);
-          ctx.lineTo(pos.x + body.vx * 0.1, pos.y + body.vy * 0.1);
-          ctx.strokeStyle = "#16213e";
-          ctx.lineWidth = 2;
-          ctx.stroke();
-        }
-      }
-    };
-    return interp.startLoop(drawInterpolated);
-  }, [externalBodies !== void 0, interp.startLoop]);
-  React74.useEffect(() => {
-    draw();
-  }, [draw]);
-  React74.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    bindCanvasCapture(() => canvas.toDataURL("image/png"));
-    return () => {
-      bindCanvasCapture(() => null);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("flex justify-center", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-    "canvas",
-    {
-      ref: canvasRef,
-      width,
-      height,
-      className: "rounded-container block max-w-full h-auto"
-    }
-  ) });
-}
-var PRESET_BY_ID;
-var init_SimulationCanvas = __esm({
-  "components/game/2d/organisms/SimulationCanvas.tsx"() {
-    init_cn();
-    init_atoms();
-    init_verificationRegistry();
-    init_physicsPresets();
-    init_useRenderInterpolation();
-    PRESET_BY_ID = {
-      "mechanics-projectile": exports.projectileMotion,
-      "mechanics-pendulum": exports.pendulum,
-      "mechanics-spring": exports.springOscillator
-    };
-    SimulationCanvas.displayName = "SimulationCanvas";
-  }
-});
-function SimulationControls({
-  running,
-  speed,
-  parameters,
-  onPlay,
-  onPause,
-  onStep,
-  onReset,
-  onSpeedChange,
-  onParameterChange,
-  playEvent,
-  pauseEvent,
-  stepEvent,
-  resetEvent,
-  speedChangeEvent,
-  parameterChangeEvent,
-  assetManifest,
-  className
-}) {
-  const eventBus = useEventBus();
-  const ui = assetManifest?.ui;
-  const handlePlay = () => {
-    if (playEvent) eventBus.emit(`UI:${playEvent}`, {});
-    onPlay?.();
-  };
-  const handlePause = () => {
-    if (pauseEvent) eventBus.emit(`UI:${pauseEvent}`, {});
-    onPause?.();
-  };
-  const handleStep = () => {
-    if (stepEvent) eventBus.emit(`UI:${stepEvent}`, {});
-    onStep?.();
-  };
-  const handleReset = () => {
-    if (resetEvent) eventBus.emit(`UI:${resetEvent}`, {});
-    onReset?.();
-  };
-  const handleSpeedChange = (s) => {
-    if (speedChangeEvent) eventBus.emit(`UI:${speedChangeEvent}`, { speed: s });
-    onSpeedChange?.(s);
-  };
-  const handleParameterChange = (name, value) => {
-    if (parameterChangeEvent) eventBus.emit(`UI:${parameterChangeEvent}`, { name, value });
-    onParameterChange?.(name, value);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "md", className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", align: "center", children: [
-      running ? /* @__PURE__ */ jsxRuntime.jsxs(exports.Button, { size: "sm", variant: "secondary", onClick: handlePause, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { icon: LucideIcons2.Pause, assetUrl: ui?.["pause"], size: "sm" }),
-        "Pause"
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(exports.Button, { size: "sm", variant: "primary", onClick: handlePlay, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { icon: LucideIcons2.Play, assetUrl: ui?.["play"], size: "sm" }),
-        "Play"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(exports.Button, { size: "sm", variant: "ghost", onClick: handleStep, disabled: running, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { icon: LucideIcons2.SkipForward, assetUrl: ui?.["step"], size: "sm" }),
-        "Step"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(exports.Button, { size: "sm", variant: "ghost", onClick: handleReset, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { icon: LucideIcons2.RotateCcw, assetUrl: ui?.["reset"], size: "sm" }),
-        "Reset"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", color: "muted", children: [
-        "Speed: ",
-        speed.toFixed(1),
-        "x"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "range",
-          min: 0.1,
-          max: 5,
-          step: 0.1,
-          value: speed,
-          onChange: (e) => handleSpeedChange(parseFloat(e.target.value)),
-          className: "w-full"
-        }
-      )
-    ] }),
-    Object.entries(parameters).map(([name, param]) => /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", color: "muted", children: [
-        param.label,
-        ": ",
-        param.value.toFixed(2)
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "range",
-          min: param.min,
-          max: param.max,
-          step: param.step,
-          value: param.value,
-          onChange: (e) => handleParameterChange(name, parseFloat(e.target.value)),
-          className: "w-full"
-        }
-      )
-    ] }, name))
-  ] });
-}
-var init_SimulationControls = __esm({
-  "components/game/2d/organisms/SimulationControls.tsx"() {
-    init_useEventBus();
-    init_atoms();
-    init_GameIcon();
-    SimulationControls.displayName = "SimulationControls";
-  }
-});
-function SimulationGraph({
-  label,
-  unit,
-  data,
-  maxPoints = 200,
-  width = 300,
-  height = 120,
-  color = "#e94560",
-  className
-}) {
-  const canvasRef = React74.useRef(null);
-  const visibleData = data.slice(-maxPoints);
-  React74.useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas || visibleData.length < 2) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    ctx.clearRect(0, 0, width, height);
-    ctx.fillStyle = "#0f0f23";
-    ctx.fillRect(0, 0, width, height);
-    ctx.strokeStyle = "#1a1a3e";
-    ctx.lineWidth = 0.5;
-    for (let i = 0; i < 5; i++) {
-      const y = height / 5 * i;
-      ctx.beginPath();
-      ctx.moveTo(0, y);
-      ctx.lineTo(width, y);
-      ctx.stroke();
-    }
-    let minVal = Infinity;
-    let maxVal = -Infinity;
-    for (const pt of visibleData) {
-      if (pt.value < minVal) minVal = pt.value;
-      if (pt.value > maxVal) maxVal = pt.value;
-    }
-    const range = maxVal - minVal || 1;
-    const pad = height * 0.1;
-    ctx.beginPath();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 2;
-    for (let i = 0; i < visibleData.length; i++) {
-      const x = i / (maxPoints - 1) * width;
-      const y = pad + (maxVal - visibleData[i].value) / range * (height - 2 * pad);
-      if (i === 0) ctx.moveTo(x, y);
-      else ctx.lineTo(x, y);
-    }
-    ctx.stroke();
-    const last = visibleData[visibleData.length - 1];
-    ctx.fillStyle = color;
-    ctx.font = "12px monospace";
-    ctx.fillText(`${last.value.toFixed(2)} ${unit}`, width - 80, 16);
-  }, [visibleData, width, height, color, unit, maxPoints]);
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.Card, { padding: "sm", className, children: /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", weight: "bold", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, width, height, className: "rounded" })
-  ] }) });
-}
-var init_SimulationGraph = __esm({
-  "components/game/2d/organisms/SimulationGraph.tsx"() {
-    init_atoms();
-    SimulationGraph.displayName = "SimulationGraph";
-  }
-});
 exports.GameTemplate = void 0;
 var init_GameTemplate = __esm({
   "components/game/2d/templates/GameTemplate.tsx"() {
@@ -31418,9 +31121,6 @@ var init_molecules = __esm({
     init_BuilderBoard();
     init_DebuggerBoard();
     init_NegotiatorBoard();
-    init_SimulationCanvas();
-    init_SimulationControls();
-    init_SimulationGraph();
     init_physicsPresets();
     init_GameTemplate();
     init_GameShell();
@@ -32025,13 +31725,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect71, useRef: useRef66, useCallback: useCallback114, useState: useState108 } = React74__namespace.default;
+      const { useEffect: useEffect69, useRef: useRef64, useCallback: useCallback113, useState: useState108 } = React74__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef66({ centerLat, centerLng, zoom });
-        useEffect71(() => {
+        const prevRef = useRef64({ centerLat, centerLng, zoom });
+        useEffect69(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -32042,7 +31742,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect71(() => {
+        useEffect69(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -32071,7 +31771,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState108(null);
-        const handleMapClick = useCallback114((lat, lng) => {
+        const handleMapClick = useCallback113((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -32080,7 +31780,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback114((marker) => {
+        const handleMarkerClick = useCallback113((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -48031,6 +47731,7 @@ var init_component_registry_generated = __esm({
     init_Navigation();
     init_NegotiatorBoard();
     init_NumberStepper();
+    init_ObjectRulePanel();
     init_OptionConstraintGroup();
     init_OrbitalVisualization();
     init_Overlay();
@@ -48076,7 +47777,6 @@ var init_component_registry_generated = __esm({
     init_Sidebar();
     init_SignaturePad();
     init_SimpleGrid();
-    init_SimulationCanvas();
     init_SimulatorBoard();
     init_Skeleton();
     init_SocialProof();
@@ -48094,6 +47794,7 @@ var init_component_registry_generated = __esm({
     init_StateArchitectBoard();
     init_StateGraph();
     init_StateIndicator();
+    init_StateJsonView();
     init_StateMachineView();
     init_StatsGrid();
     init_StatsOrganism();
@@ -48140,6 +47841,7 @@ var init_component_registry_generated = __esm({
     init_Typography();
     init_UISlotRenderer();
     init_UploadDropZone();
+    init_VariablePanel();
     init_VersionDiff();
     init_ViolationAlert();
     init_VoteStack();
@@ -48340,6 +48042,7 @@ var init_component_registry_generated = __esm({
       "Navigation": exports.Navigation,
       "NegotiatorBoard": NegotiatorBoard,
       "NumberStepper": exports.NumberStepper,
+      "ObjectRulePanel": ObjectRulePanel,
       "OptionConstraintGroup": exports.OptionConstraintGroup,
       "OrbitalVisualization": exports.OrbitalVisualization,
       "Overlay": exports.Overlay,
@@ -48385,7 +48088,6 @@ var init_component_registry_generated = __esm({
       "Sidebar": exports.Sidebar,
       "SignaturePad": exports.SignaturePad,
       "SimpleGrid": exports.SimpleGrid,
-      "SimulationCanvas": SimulationCanvas,
       "SimulatorBoard": SimulatorBoard,
       "Skeleton": Skeleton,
       "SocialProof": exports.SocialProof,
@@ -48406,6 +48108,7 @@ var init_component_registry_generated = __esm({
       "StateArchitectBoard": StateArchitectBoard,
       "StateGraph": StateGraph,
       "StateIndicator": StateIndicator,
+      "StateJsonView": StateJsonView,
       "StateMachineView": exports.StateMachineView,
       "StatsGrid": exports.StatsGrid,
       "StatsOrganism": exports.StatsOrganism,
@@ -48453,6 +48156,7 @@ var init_component_registry_generated = __esm({
       "UISlotRenderer": UISlotRenderer,
       "UploadDropZone": exports.UploadDropZone,
       "VStack": exports.VStack,
+      "VariablePanel": VariablePanel,
       "VersionDiff": exports.VersionDiff,
       "ViolationAlert": exports.ViolationAlert,
       "VoteStack": exports.VoteStack,
@@ -51753,9 +51457,6 @@ exports.RuntimeDebugger = RuntimeDebugger;
 exports.ScoreDisplay = ScoreDisplay;
 exports.SequenceBar = SequenceBar;
 exports.SequencerBoard = SequencerBoard;
-exports.SimulationCanvas = SimulationCanvas;
-exports.SimulationControls = SimulationControls;
-exports.SimulationGraph = SimulationGraph;
 exports.SimulatorBoard = SimulatorBoard;
 exports.Skeleton = Skeleton;
 exports.SlotContentRenderer = SlotContentRenderer;