npm - @almadar/ui - Versions diffs - 5.89.0 → 5.93.0 - Mend

@almadar/ui 5.89.0 → 5.93.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/runtime/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import * as React96 from 'react';
-import React96__default, { useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, createContext, useSyncExternalStore, useLayoutEffect, lazy, useId } from 'react';
+import * as React95 from 'react';
+import React95__default, { useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, createContext, useSyncExternalStore, useLayoutEffect, lazy, useId } from 'react';
 import { EventBusContext, useTraitScope, useEntitySchemaOptional, useEntitySchema, getAllPages, OrbitalProvider, TraitScopeProvider, ServerBridgeProvider, useCurrentPagePath, VerificationProvider, EntitySchemaProvider, OrbitalThemeProvider, useServerBridge } from '@almadar/ui/providers';
 export { EntitySchemaProvider, ServerBridgeProvider, TraitContext, TraitProvider, useEntitySchema, useEntitySchemaOptional, useServerBridge, useTrait, useTraitContext } from '@almadar/ui/providers';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
@@ -43,7 +43,7 @@ import { useSortable, arrayMove, sortableKeyboardCoordinates, SortableContext, r
 import { CSS } from '@dnd-kit/utilities';
 import { useNodeId, ReactFlowProvider, Handle, Position } from '@xyflow/react';
 import { getPatternDefinition, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
-import { StateMachineManager, collectDeclaredConfigDefaults, createServerEffectHandlers, EffectExecutor, createContextFromBindings, InMemoryPersistence } from '@almadar/runtime';
+import { StateMachineManager, collectDeclaredConfigDefaults, createServerEffectHandlers, EffectExecutor, createContextFromBindings, createTickScheduler, InMemoryPersistence } from '@almadar/runtime';
 import { OrbitalServerRuntime } from '@almadar/runtime/OrbitalServerRuntime';
 var __defProp = Object.defineProperty;
@@ -937,7 +937,7 @@ var init_Box = __esm({
       fixed: "fixed",
       sticky: "sticky"
     };
-    Box = React96__default.forwardRef(
+    Box = React95__default.forwardRef(
       ({
         padding,
         paddingX,
@@ -1002,7 +1002,7 @@ var init_Box = __esm({
           onPointerDown?.(e);
         }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
         const isClickable = action || onClick;
-        return React96__default.createElement(
+        return React95__default.createElement(
           Component,
           {
             ref,
@@ -1098,7 +1098,7 @@ function loadLib(key, importer) {
   return p;
 }
 function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React96__default.lazy(async () => {
+  const Lazy = React95__default.lazy(async () => {
     const lib = await loadLib(libKey, importer);
     const Comp = pick(lib);
     if (!Comp) {
@@ -1108,7 +1108,7 @@ function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
     return { default: Comp };
   });
   const Wrapped = (props) => /* @__PURE__ */ jsx(
-    React96__default.Suspense,
+    React95__default.Suspense,
     {
       fallback: /* @__PURE__ */ jsx(
         "span",
@@ -1839,7 +1839,7 @@ var init_Icon = __esm({
       const directIcon = typeof icon === "string" ? void 0 : icon;
       const effectiveName = typeof icon === "string" ? icon : name;
       const family = useIconFamily();
-      const RenderedComponent = React96__default.useMemo(() => {
+      const RenderedComponent = React95__default.useMemo(() => {
         if (directIcon) return null;
         return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
       }, [directIcon, effectiveName, family]);
@@ -1901,7 +1901,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React96__default.isValidElement(value)) {
+  if (React95__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -1977,7 +1977,7 @@ var init_Button = __esm({
       md: "h-icon-default w-icon-default",
       lg: "h-icon-default w-icon-default"
     };
-    Button = React96__default.forwardRef(
+    Button = React95__default.forwardRef(
       ({
         className,
         variant = "primary",
@@ -2045,7 +2045,7 @@ var Dialog;
 var init_Dialog = __esm({
   "components/core/atoms/Dialog.tsx"() {
     init_cn();
-    Dialog = React96__default.forwardRef(
+    Dialog = React95__default.forwardRef(
       ({
         role = "dialog",
         "aria-modal": ariaModal = true,
@@ -2163,7 +2163,7 @@ var init_Typography = __esm({
     }) => {
       const variant = variantProp ?? (level ? `h${level}` : "body1");
       const Component = as || defaultElements[variant];
-      return React96__default.createElement(
+      return React95__default.createElement(
         Component,
         {
           id,
@@ -2658,7 +2658,7 @@ var init_Badge = __esm({
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
     };
-    Badge = React96__default.forwardRef(
+    Badge = React95__default.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes3 = {
           sm: "h-icon-default w-icon-default",
@@ -2995,7 +2995,7 @@ var init_SvgFlow = __esm({
       width = 100,
       height = 100
     }) => {
-      const markerId = React96__default.useMemo(() => {
+      const markerId = React95__default.useMemo(() => {
         flowIdCounter += 1;
         return `almadar-flow-arrow-${flowIdCounter}`;
       }, []);
@@ -3588,7 +3588,7 @@ var init_SvgRing = __esm({
       width = 100,
       height = 100
     }) => {
-      const gradientId = React96__default.useMemo(() => {
+      const gradientId = React95__default.useMemo(() => {
         ringIdCounter += 1;
         return `almadar-ring-glow-${ringIdCounter}`;
       }, []);
@@ -3769,7 +3769,7 @@ var init_Input = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
-    Input = React96__default.forwardRef(
+    Input = React95__default.forwardRef(
       ({
         className,
         inputType,
@@ -3929,7 +3929,7 @@ var Label;
 var init_Label = __esm({
   "components/core/atoms/Label.tsx"() {
     init_cn();
-    Label = React96__default.forwardRef(
+    Label = React95__default.forwardRef(
       ({ className, required, children, ...props }, ref) => {
         return /* @__PURE__ */ jsxs(
           "label",
@@ -3956,7 +3956,7 @@ var init_Textarea = __esm({
   "components/core/atoms/Textarea.tsx"() {
     init_cn();
     init_useEventBus();
-    Textarea = React96__default.forwardRef(
+    Textarea = React95__default.forwardRef(
       ({ className, error, onChange, ...props }, ref) => {
         const eventBus = useEventBus();
         const handleChange = (e) => {
@@ -4195,7 +4195,7 @@ var init_Select = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
-    Select = React96__default.forwardRef(
+    Select = React95__default.forwardRef(
       (props, _ref) => {
         const { multiple, searchable, clearable } = props;
         if (multiple || searchable || clearable) {
@@ -4212,7 +4212,7 @@ var init_Checkbox = __esm({
   "components/core/atoms/Checkbox.tsx"() {
     init_cn();
     init_useEventBus();
-    Checkbox = React96__default.forwardRef(
+    Checkbox = React95__default.forwardRef(
       ({ className, label, id, onChange, ...props }, ref) => {
         const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
         const eventBus = useEventBus();
@@ -4266,7 +4266,7 @@ var init_Spinner = __esm({
       md: "h-6 w-6",
       lg: "h-8 w-8"
     };
-    Spinner = React96__default.forwardRef(
+    Spinner = React95__default.forwardRef(
       ({ className, size = "md", overlay, ...props }, ref) => {
         if (overlay) {
           return /* @__PURE__ */ jsx(
@@ -4356,7 +4356,7 @@ var init_Card = __esm({
       chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
       "tile-image-first": "p-0 overflow-hidden"
     };
-    Card = React96__default.forwardRef(
+    Card = React95__default.forwardRef(
       ({
         className,
         variant = "bordered",
@@ -4404,9 +4404,9 @@ var init_Card = __esm({
       }
     );
     Card.displayName = "Card";
-    CardHeader = React96__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+    CardHeader = React95__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React96__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React95__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -4419,11 +4419,11 @@ var init_Card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardContent = React96__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+    CardContent = React95__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
     CardContent.displayName = "CardContent";
     CardBody = CardContent;
     CardBody.displayName = "CardBody";
-    CardFooter = React96__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React95__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -4478,7 +4478,7 @@ var init_FilterPill = __esm({
       md: "w-3.5 h-3.5",
       lg: "w-4 h-4"
     };
-    FilterPill = React96__default.forwardRef(
+    FilterPill = React95__default.forwardRef(
       ({
         className,
         variant = "default",
@@ -4607,8 +4607,8 @@ var init_Avatar = __esm({
       actionPayload
     }) => {
       const eventBus = useEventBus();
-      const [imgFailed, setImgFailed] = React96__default.useState(false);
-      React96__default.useEffect(() => {
+      const [imgFailed, setImgFailed] = React95__default.useState(false);
+      React95__default.useEffect(() => {
         setImgFailed(false);
       }, [src]);
       const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -4721,7 +4721,7 @@ var init_Center = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = minHeight ? { minHeight, ...style } : style;
-      return React96__default.createElement(Component, {
+      return React95__default.createElement(Component, {
         className: cn(
           inline ? "inline-flex" : "flex",
           horizontal && "justify-center",
@@ -4989,7 +4989,7 @@ var init_Radio = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    Radio = React96__default.forwardRef(
+    Radio = React95__default.forwardRef(
       ({
         label,
         helperText,
@@ -5006,12 +5006,12 @@ var init_Radio = __esm({
         onChange,
         ...props
       }, ref) => {
-        const reactId = React96__default.useId();
+        const reactId = React95__default.useId();
         const baseId = id || `radio-${reactId}`;
         const hasError = !!error;
         const eventBus = useEventBus();
-        const [selected, setSelected] = React96__default.useState(value);
-        React96__default.useEffect(() => {
+        const [selected, setSelected] = React95__default.useState(value);
+        React95__default.useEffect(() => {
           if (value !== void 0) setSelected(value);
         }, [value]);
         const pick = (next, e) => {
@@ -5193,7 +5193,7 @@ var init_Switch = __esm({
   "components/core/atoms/Switch.tsx"() {
     "use client";
     init_cn();
-    Switch = React96.forwardRef(
+    Switch = React95.forwardRef(
       ({
         checked,
         defaultChecked = false,
@@ -5204,10 +5204,10 @@ var init_Switch = __esm({
         name,
         className
       }, ref) => {
-        const [isChecked, setIsChecked] = React96.useState(
+        const [isChecked, setIsChecked] = React95.useState(
           checked !== void 0 ? checked : defaultChecked
         );
-        React96.useEffect(() => {
+        React95.useEffect(() => {
           if (checked !== void 0) {
             setIsChecked(checked);
           }
@@ -5370,7 +5370,7 @@ var init_Stack = __esm({
       };
       const isHorizontal = direction === "horizontal";
       const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-      return React96__default.createElement(
+      return React95__default.createElement(
         Component,
         {
           className: cn(
@@ -5570,7 +5570,7 @@ var Aside;
 var init_Aside = __esm({
   "components/core/atoms/Aside.tsx"() {
     init_cn();
-    Aside = React96__default.forwardRef(
+    Aside = React95__default.forwardRef(
       ({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx("aside", { ref, className: cn(className), ...rest, children })
     );
     Aside.displayName = "Aside";
@@ -5649,9 +5649,9 @@ var init_LawReferenceTooltip = __esm({
       className
     }) => {
       const { t } = useTranslate();
-      const [isVisible, setIsVisible] = React96__default.useState(false);
-      const timeoutRef = React96__default.useRef(null);
-      const triggerRef = React96__default.useRef(null);
+      const [isVisible, setIsVisible] = React95__default.useState(false);
+      const timeoutRef = React95__default.useRef(null);
+      const triggerRef = React95__default.useRef(null);
       const handleMouseEnter = () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -5662,7 +5662,7 @@ var init_LawReferenceTooltip = __esm({
       };
       const { revealed, triggerProps } = useTapReveal({ refs: [triggerRef] });
       const open = isVisible || revealed;
-      React96__default.useEffect(() => {
+      React95__default.useEffect(() => {
         return () => {
           if (timeoutRef.current) clearTimeout(timeoutRef.current);
         };
@@ -5872,7 +5872,7 @@ var init_StatusDot = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    StatusDot = React96__default.forwardRef(
+    StatusDot = React95__default.forwardRef(
       ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "span",
@@ -5926,7 +5926,7 @@ var init_TrendIndicator = __esm({
       down: "trending-down",
       flat: "arrow-right"
     };
-    TrendIndicator = React96__default.forwardRef(
+    TrendIndicator = React95__default.forwardRef(
       ({
         className,
         value,
@@ -5993,7 +5993,7 @@ var init_RangeSlider = __esm({
       md: "w-4 h-4",
       lg: "w-5 h-5"
     };
-    RangeSlider = React96__default.forwardRef(
+    RangeSlider = React95__default.forwardRef(
       ({
         className,
         min = 0,
@@ -6552,7 +6552,7 @@ var init_ContentSection = __esm({
       md: "py-16",
       lg: "py-24"
     };
-    ContentSection = React96__default.forwardRef(
+    ContentSection = React95__default.forwardRef(
       ({ children, background = "default", padding = "lg", id, className }, ref) => {
         return /* @__PURE__ */ jsx(
           Box,
@@ -7086,7 +7086,7 @@ var init_AnimatedReveal = __esm({
       "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
       "none": {}
     };
-    AnimatedReveal = React96__default.forwardRef(
+    AnimatedReveal = React95__default.forwardRef(
       ({
         trigger = "scroll",
         animation = "fade-up",
@@ -7246,7 +7246,7 @@ var init_AnimatedGraphic = __esm({
   "components/marketing/atoms/AnimatedGraphic.tsx"() {
     "use client";
     init_cn();
-    AnimatedGraphic = React96__default.forwardRef(
+    AnimatedGraphic = React95__default.forwardRef(
       ({
         src,
         svgContent,
@@ -7269,7 +7269,7 @@ var init_AnimatedGraphic = __esm({
         const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
         const resolvedSvg = svgContent ?? fetchedSvg;
         const prevAnimateRef = useRef(animate);
-        const setRef = React96__default.useCallback(
+        const setRef = React95__default.useCallback(
           (node) => {
             containerRef.current = node;
             if (typeof ref === "function") ref(node);
@@ -7871,12 +7871,13 @@ function GameCard({
   selected = false,
   disabled = false,
   size = "md",
+  animState = "idle",
   onClick,
   clickEvent,
   className
 }) {
   const eventBus = useEventBus();
-  const handleClick = React96.useCallback(() => {
+  const handleClick = React95.useCallback(() => {
     if (disabled) return;
     onClick?.(id);
     if (clickEvent) eventBus.emit(`UI:${clickEvent}`, { cardId: id });
@@ -7898,6 +7899,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: [
@@ -7930,7 +7932,7 @@ function GameCard({
     }
   );
 }
-var cardSizeMap, artPxMap;
+var cardSizeMap, artPxMap, ANIM_STATE_CLASS;
 var init_GameCard = __esm({
   "components/game/2d/atoms/GameCard.tsx"() {
     "use client";
@@ -7946,6 +7948,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";
   }
 });
@@ -8158,9 +8166,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React96.useState(false);
+  const [isPressed, setIsPressed] = React95.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React96.useCallback(
+  const handlePointerDown = React95.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -8170,7 +8178,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React96.useCallback(
+  const handlePointerUp = React95.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -8180,7 +8188,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React96.useCallback(
+  const handlePointerLeave = React95.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -8986,8 +8994,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__ */ jsxs(
     Box,
     {
@@ -8997,16 +9008,16 @@ function DialogueBubble({
         className
       ),
       children: [
-        portrait && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-warning/60", children: /* @__PURE__ */ jsx(GameIcon, { assetUrl: portrait, icon: "image", size: 48, alt: speaker ?? "speaker", className: "w-full h-full object-cover" }) }),
+        portrait && /* @__PURE__ */ jsx(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__ */ jsx(GameIcon, { assetUrl: portrait, icon: "image", size: 48, alt: speaker ?? "speaker", className: "w-full h-full object-cover" }) }),
         /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-1 min-w-0", children: [
           speaker && /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-sm font-bold text-warning", children: speaker }),
-          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-sm text-foreground leading-relaxed", children: text })
+          /* @__PURE__ */ jsx(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();
@@ -9018,6 +9029,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";
   }
 });
@@ -9199,8 +9216,8 @@ function MiniMap({
   tileAssets,
   unitAssets
 }) {
-  const canvasRef = React96.useRef(null);
-  const imgCacheRef = React96.useRef(/* @__PURE__ */ new Map());
+  const canvasRef = React95.useRef(null);
+  const imgCacheRef = React95.useRef(/* @__PURE__ */ new Map());
   function loadImg(url) {
     const cached = imgCacheRef.current.get(url);
     if (cached) return cached.complete ? cached : null;
@@ -9215,7 +9232,7 @@ function MiniMap({
     imgCacheRef.current.set(url, img);
     return null;
   }
-  React96.useEffect(() => {
+  React95.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -9350,8 +9367,8 @@ function ControlGrid({
   className
 }) {
   const eventBus = useEventBus();
-  const [active, setActive] = React96.useState(/* @__PURE__ */ new Set());
-  const handlePress = React96.useCallback(
+  const [active, setActive] = React95.useState(/* @__PURE__ */ new Set());
+  const handlePress = React95.useCallback(
     (id) => {
       setActive((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -9365,7 +9382,7 @@ function ControlGrid({
     },
     [kind, actionEvent, directionEvent, directionEvents, eventBus, onAction, onDirection]
   );
-  const handleRelease = React96.useCallback(
+  const handleRelease = React95.useCallback(
     (id) => {
       setActive((prev) => {
         const next = new Set(prev);
@@ -9623,7 +9640,7 @@ function InventoryGrid({
   const eventBus = useEventBus();
   const slotCount = totalSlots ?? items.length;
   const emptySlotCount = Math.max(0, slotCount - items.length);
-  const handleSelect = React96.useCallback(
+  const handleSelect = React95.useCallback(
     (id) => {
       onSelect?.(id);
       if (selectEvent) {
@@ -9840,7 +9857,7 @@ function GameMenu({
 }) {
   const resolvedOptions = options ?? menuItems ?? DEFAULT_MENU_OPTIONS;
   const eventBus = useEventBus();
-  const handleOptionClick = React96.useCallback(
+  const handleOptionClick = React95.useCallback(
     (option) => {
       if (option.event) {
         eventBus.emit(`UI:${option.event}`, { option });
@@ -9963,7 +9980,7 @@ function StateNode({
   );
 }
 var init_StateNode = __esm({
-  "components/game/2d/organisms/StateNode.tsx"() {
+  "components/game/2d/molecules/StateNode.tsx"() {
     init_atoms();
     init_cn();
     StateNode.displayName = "StateNode";
@@ -10035,7 +10052,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";
@@ -10066,7 +10083,7 @@ function StateGraph({
 }) {
   const eventBus = useEventBus();
   const nodes = states ?? [];
-  const positions = React96.useMemo(() => layoutStates(nodes, width, height), [nodes, width, height]);
+  const positions = React95.useMemo(() => layoutStates(nodes, width, height), [nodes, width, height]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -10653,6 +10670,7 @@ function Canvas2D({
   unitScale = 1,
   showMinimap = true,
   animate,
+  interpolateUnits = false,
   // Tuning
   debug: debug2 = false,
   spriteHeightRatio = 1.5,
@@ -10687,6 +10705,8 @@ function Canvas2D({
   const containerRef = useRef(null);
   const lerpRafRef = useRef(0);
   const animRafRef = useRef(0);
+  const unitInterp = useRenderInterpolation();
+  const interpolatedUnitPositionsRef = useRef(/* @__PURE__ */ new Map());
   const [viewportSize, setViewportSize] = useState({ width: 800, height: 600 });
   useEffect(() => {
     const el = containerRef.current;
@@ -11001,7 +11021,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;
       }
@@ -11153,7 +11174,8 @@ function Canvas2D({
     unitScale,
     assetManifest,
     spriteHeightRatio,
-    spriteMaxWidthRatio
+    spriteMaxWidthRatio,
+    interpolateUnits
   ]);
   useEffect(() => {
     if (camera === "fixed") return;
@@ -11168,6 +11190,19 @@ function Canvas2D({
       y: centerY - viewportSize.height / 2
     };
   }, [camera, selectedUnitId, units, project, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
+  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]);
+  useEffect(() => {
+    if (isSide || !interpolateUnits) return;
+    return unitInterp.startLoop((positions) => {
+      interpolatedUnitPositionsRef.current = positions;
+      draw();
+    });
+  }, [isSide, interpolateUnits, unitInterp, draw]);
   useEffect(() => {
     if (isSide) return;
     draw();
@@ -11543,7 +11578,7 @@ function LinearView({
     /* @__PURE__ */ jsx(HStack, { className: "flex-wrap items-center", gap: "xs", children: trait.states.map((state, i) => {
       const isDone = i < currentIdx;
       const isCurrent = i === currentIdx;
-      return /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -11740,7 +11775,7 @@ function TraitStateViewer({
 }
 var SIZE_CONFIG;
 var init_TraitStateViewer = __esm({
-  "components/game/2d/organisms/TraitStateViewer.tsx"() {
+  "components/game/2d/molecules/TraitStateViewer.tsx"() {
     "use client";
     init_cn();
     init_Box();
@@ -11773,7 +11808,8 @@ function TraitSlot({
   onClick,
   onRemove,
   clickEvent,
-  removeEvent
+  removeEvent,
+  dropEvent
 }) {
   const { emit } = useEventBus();
   const [isHovered, setIsHovered] = useState(false);
@@ -11805,29 +11841,30 @@ function TraitSlot({
     onDragStart?.(equippedItem);
   }, [equippedItem, draggable, onDragStart]);
   const handleDragOver = useCallback((e) => {
-    if (locked || !onItemDrop) return;
+    if (locked || !onItemDrop && !dropEvent) return;
     if (e.dataTransfer.types.includes(DRAG_MIME)) {
       e.preventDefault();
       const allowed = e.dataTransfer.effectAllowed;
       e.dataTransfer.dropEffect = allowed === "copy" ? "copy" : "move";
       setIsDragOver(true);
     }
-  }, [locked, onItemDrop]);
+  }, [locked, onItemDrop, dropEvent]);
   const handleDragLeave = useCallback(() => {
     setIsDragOver(false);
   }, []);
   const handleDrop = useCallback((e) => {
     e.preventDefault();
     setIsDragOver(false);
-    if (locked || !onItemDrop) return;
+    if (locked || !onItemDrop && !dropEvent) return;
     const raw = e.dataTransfer.getData(DRAG_MIME);
     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();
@@ -11947,7 +11984,7 @@ function TraitSlot({
 }
 var SIZE_CONFIG2, DRAG_MIME;
 var init_TraitSlot = __esm({
-  "components/game/2d/organisms/TraitSlot.tsx"() {
+  "components/game/2d/molecules/TraitSlot.tsx"() {
     "use client";
     init_cn();
     init_useEventBus();
@@ -12006,7 +12043,7 @@ function ActionTile({
 }
 var DRAG_MIME2, SIZE_CONFIG3;
 var init_ActionTile = __esm({
-  "components/game/2d/organisms/ActionTile.tsx"() {
+  "components/game/2d/molecules/ActionTile.tsx"() {
     init_atoms();
     init_cn();
     DRAG_MIME2 = "application/x-almadar-slot-item";
@@ -12043,7 +12080,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();
@@ -12055,6 +12092,8 @@ function SequenceBar({
   maxSlots,
   onSlotDrop,
   onSlotRemove,
+  slotDropEvent,
+  slotRemoveEvent,
   playing = false,
   currentStep = -1,
   categoryColors,
@@ -12062,16 +12101,19 @@ function SequenceBar({
   size = "lg",
   className
 }) {
+  const { emit } = useEventBus();
   const handleDrop = 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 = 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__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -12101,9 +12143,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";
   }
@@ -12419,7 +12462,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";
@@ -12460,7 +12503,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 = {
@@ -12515,10 +12558,12 @@ var init_puzzleObject = __esm({
 function ObjectRulePanel({
   object,
   onRulesChange,
+  rulesChangeEvent,
   disabled = false,
   className
 }) {
   const { t } = useTranslate();
+  const { emit } = useEventBus();
   const id = objId(object);
   const name = objName(object);
   const icon = objIcon(object);
@@ -12529,15 +12574,19 @@ function ObjectRulePanel({
   const rules = objRules(object);
   const maxRules = objMaxRules(object);
   const canAdd = rules.length < maxRules;
+  const emitRules = useCallback((newRules) => {
+    if (rulesChangeEvent) emit(`UI:${rulesChangeEvent}`, { objectId: id, rules: newRules });
+    else onRulesChange?.(id, newRules);
+  }, [rulesChangeEvent, emit, id, onRulesChange]);
   const handleRuleChange = useCallback((index, updatedRule) => {
     const newRules = [...rules];
     newRules[index] = updatedRule;
-    onRulesChange(id, newRules);
-  }, [id, rules, onRulesChange]);
+    emitRules(newRules);
+  }, [rules, emitRules]);
   const handleRuleRemove = useCallback((index) => {
     const newRules = rules.filter((_, i) => i !== index);
-    onRulesChange(id, newRules);
-  }, [id, rules, onRulesChange]);
+    emitRules(newRules);
+  }, [rules, emitRules]);
   const handleAddRule = useCallback(() => {
     if (!canAdd || disabled) return;
     const firstEvent = availableEvents[0]?.value || "";
@@ -12547,8 +12596,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,
@@ -12588,9 +12637,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();
@@ -12820,61 +12870,35 @@ function VariablePanel({
   const { t } = useTranslate();
   return /* @__PURE__ */ jsxs(VStack, { className: cn("p-3 rounded-lg bg-card border border-border", className), gap: "sm", children: [
     /* @__PURE__ */ jsx(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__ */ jsxs(VStack, { gap: "none", children: [
-        /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-foreground font-medium", children: name }),
-          /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: cn(
-            isHigh ? "text-error" : isLow ? "text-warning" : "text-foreground"
-          ), children: [
-            value,
-            unit,
-            " / ",
-            max,
-            unit
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          ProgressBar,
-          {
-            value: pct,
-            color: isHigh ? "danger" : isLow ? "warning" : "primary",
-            size: "sm"
-          }
-        )
-      ] }, name);
-    })
+    (variables ?? []).map((v) => /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-foreground font-medium", children: v.name }),
+      /* @__PURE__ */ jsx(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 } = useTranslate();
   const [expanded, setExpanded] = useState(defaultExpanded);
-  const jsonString = JSON.stringify(data, null, 2);
+  const jsonString = JSON.stringify(
+    { name, initialState, states: states ?? [], transitions: transitions ?? [] },
+    null,
+    2
+  );
   return /* @__PURE__ */ jsxs(VStack, { className: cn("rounded-lg border border-border overflow-hidden", className), gap: "none", children: [
     /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between p-2 bg-muted", gap: "sm", children: [
       /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground font-medium", children: label ?? t("stateArchitect.viewCode") }),
@@ -12891,7 +12915,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";
@@ -13060,7 +13084,7 @@ function StateArchitectBoard({
     setAddingFrom(null);
     if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
   }, [initialState, entityVariables, playAgainEvent, emit]);
-  const codeData = useMemo(() => ({
+  useMemo(() => ({
     name: entityName,
     states: entityStates,
     initialState,
@@ -13195,7 +13219,7 @@ function StateArchitectBoard({
               VariablePanel,
               {
                 entityName,
-                variables
+                variables: variables.map((v) => ({ name: String(v.name ?? ""), value: String(v.value ?? "") }))
               }
             ),
             testResults.length > 0 && /* @__PURE__ */ jsxs(VStack, { className: "p-3 rounded-container bg-card border border-border", gap: "xs", children: [
@@ -13206,7 +13230,16 @@ function StateArchitectBoard({
                 !r.passed && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-error", children: t("stateArchitect.gotState", { state: r.actualState }) })
               ] }, i))
             ] }),
-            resolved.showCodeView !== false && /* @__PURE__ */ jsx(StateJsonView, { data: codeData, label: "View Code" })
+            resolved.showCodeView !== false && /* @__PURE__ */ 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__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("stateArchitect.allPassed") }) }),
@@ -14118,227 +14151,6 @@ var init_NegotiatorBoard = __esm({
     NegotiatorBoard.displayName = "NegotiatorBoard";
   }
 });
-// components/game/shared/lib/mechanics.ts
-var projectileMotion, pendulum, springOscillator;
-var init_mechanics = __esm({
-  "components/game/shared/lib/mechanics.ts"() {
-    projectileMotion = {
-      id: "mechanics-projectile",
-      name: "Projectile Motion",
-      description: "Launch a ball and observe parabolic trajectory under gravity.",
-      domain: "natural",
-      gravity: { x: 0, y: 9.81 },
-      bodies: [
-        { id: "ball", x: 50, y: 350, vx: 80, vy: -120, mass: 1, radius: 10, color: "#e94560", fixed: false },
-        { id: "ground", x: 300, y: 390, vx: 0, vy: 0, mass: 1e3, radius: 400, color: "#333", fixed: true }
-      ],
-      showVelocity: true,
-      parameters: {
-        angle: { value: 45, min: 0, max: 90, step: 1, label: "Launch angle (deg)" },
-        velocity: { value: 100, min: 10, max: 200, step: 5, label: "Initial velocity (m/s)" },
-        gravity: { value: 9.81, min: 0, max: 20, step: 0.1, label: "Gravity (m/s\xB2)" }
-      }
-    };
-    pendulum = {
-      id: "mechanics-pendulum",
-      name: "Simple Pendulum",
-      description: "A mass on a string swinging under gravity.",
-      domain: "natural",
-      gravity: { x: 0, y: 9.81 },
-      bodies: [
-        { id: "pivot", x: 300, y: 50, vx: 0, vy: 0, mass: 1e3, radius: 5, color: "#888", fixed: true },
-        { id: "bob", x: 400, y: 200, vx: 0, vy: 0, mass: 5, radius: 15, color: "#e94560", fixed: false }
-      ],
-      constraints: [{ bodyA: 0, bodyB: 1, length: 180, stiffness: 1 }],
-      parameters: {
-        length: { value: 180, min: 50, max: 300, step: 10, label: "String length (px)" },
-        mass: { value: 5, min: 1, max: 20, step: 0.5, label: "Mass (kg)" },
-        gravity: { value: 9.81, min: 0, max: 20, step: 0.1, label: "Gravity (m/s\xB2)" }
-      }
-    };
-    springOscillator = {
-      id: "mechanics-spring",
-      name: "Spring Oscillator",
-      description: "A mass bouncing on a spring \u2014 simple harmonic motion.",
-      domain: "natural",
-      gravity: { x: 0, y: 0 },
-      bodies: [
-        { id: "anchor", x: 300, y: 50, vx: 0, vy: 0, mass: 1e3, radius: 8, color: "#888", fixed: true },
-        { id: "mass", x: 300, y: 250, vx: 0, vy: 0, mass: 2, radius: 20, color: "#0f3460", fixed: false }
-      ],
-      constraints: [{ bodyA: 0, bodyB: 1, length: 150, stiffness: 0.5 }],
-      parameters: {
-        stiffness: { value: 0.5, min: 0.1, max: 2, step: 0.05, label: "Spring stiffness (k)" },
-        mass: { value: 2, min: 0.5, max: 10, step: 0.5, label: "Mass (kg)" },
-        damping: { value: 0, min: 0, max: 0.5, step: 0.01, label: "Damping" }
-      }
-    };
-  }
-});
-// components/game/shared/lib/physicsPresets.ts
-var init_physicsPresets = __esm({
-  "components/game/shared/lib/physicsPresets.ts"() {
-    init_mechanics();
-  }
-});
-function resolvePreset(preset) {
-  if (typeof preset !== "string") return preset;
-  return PRESET_BY_ID[preset] ?? projectileMotion;
-}
-function SimulationCanvas({
-  preset: presetProp,
-  width = 600,
-  height = 400,
-  bodies: externalBodies,
-  className
-}) {
-  const preset = useMemo(() => resolvePreset(presetProp), [presetProp]);
-  const canvasRef = useRef(null);
-  const bodiesRef = useRef(structuredClone(preset.bodies));
-  const interp = useRenderInterpolation();
-  useEffect(() => {
-    bodiesRef.current = structuredClone(preset.bodies);
-  }, [preset]);
-  const draw = 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]);
-  useEffect(() => {
-    if (!externalBodies) return;
-    interp.onSnapshot(externalBodies.map((b) => ({ id: b.id, x: b.x, y: b.y })));
-  }, [externalBodies]);
-  const presetRef = useRef(preset);
-  presetRef.current = preset;
-  const widthRef = useRef(width);
-  widthRef.current = width;
-  const heightRef = useRef(height);
-  heightRef.current = height;
-  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]);
-  useEffect(() => {
-    draw();
-  }, [draw]);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    bindCanvasCapture(() => canvas.toDataURL("image/png"));
-    return () => {
-      bindCanvasCapture(() => null);
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(Box, { className: cn("flex justify-center", className), children: /* @__PURE__ */ 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": projectileMotion,
-      "mechanics-pendulum": pendulum,
-      "mechanics-spring": springOscillator
-    };
-    SimulationCanvas.displayName = "SimulationCanvas";
-  }
-});
 var GameTemplate;
 var init_GameTemplate = __esm({
   "components/game/2d/templates/GameTemplate.tsx"() {
@@ -14947,7 +14759,7 @@ var init_ErrorBoundary = __esm({
         }
       );
     };
-    ErrorBoundary = class extends React96__default.Component {
+    ErrorBoundary = class extends React95__default.Component {
       constructor(props) {
         super(props);
         __publicField(this, "reset", () => {
@@ -15229,7 +15041,7 @@ var init_Container = __esm({
       as: Component = "div"
     }) => {
       const resolvedSize = maxWidth ?? size ?? "lg";
-      return React96__default.createElement(
+      return React95__default.createElement(
         Component,
         {
           className: cn(
@@ -17897,7 +17709,7 @@ var init_CodeBlock = __esm({
     DIFF_STYLE_FALLBACK = { bg: "", prefix: " ", text: "text-foreground" };
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
-    CodeBlock = React96__default.memo(
+    CodeBlock = React95__default.memo(
       ({
         code: rawCode,
         language = "text",
@@ -18484,7 +18296,7 @@ var init_MarkdownContent = __esm({
     init_Box();
     init_CodeBlock();
     init_cn();
-    MarkdownContent = React96__default.memo(
+    MarkdownContent = React95__default.memo(
       ({ content, direction = "ltr", className }) => {
         const { t: _t } = useTranslate();
         const safeContent = typeof content === "string" ? content : String(content ?? "");
@@ -19761,7 +19573,7 @@ var init_StateMachineView = __esm({
                 style: { top: title ? 30 : 0 },
                 children: [
                   entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React96__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React95__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                     StateNode2,
                     {
                       state,
@@ -25318,8 +25130,8 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const triggerChild = React96__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
-      const triggerElement = React96__default.cloneElement(
+      const triggerChild = React95__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
+      const triggerElement = React95__default.cloneElement(
         triggerChild,
         {
           ref: triggerRef,
@@ -25414,14 +25226,14 @@ function useDataDnd(args) {
   const isZone = Boolean(dragGroup || accepts || sortable);
   const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
-  const parentRoot = React96__default.useContext(RootCtx);
+  const parentRoot = React95__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const zoneId = React96__default.useId();
+  const zoneId = React95__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
-  const [optimisticOrders, setOptimisticOrders] = React96__default.useState(() => /* @__PURE__ */ new Map());
-  const optimisticOrdersRef = React96__default.useRef(optimisticOrders);
+  const [optimisticOrders, setOptimisticOrders] = React95__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React95__default.useRef(optimisticOrders);
   optimisticOrdersRef.current = optimisticOrders;
-  const clearOptimisticOrder = React96__default.useCallback((group) => {
+  const clearOptimisticOrder = React95__default.useCallback((group) => {
     setOptimisticOrders((prev) => {
       if (!prev.has(group)) return prev;
       const next = new Map(prev);
@@ -25446,7 +25258,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return raw != null ? String(raw) : `__idx_${idx}`;
   }).join("|");
-  const itemIds = React96__default.useMemo(
+  const itemIds = React95__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw != null ? String(raw) : `__idx_${idx}`;
@@ -25457,7 +25269,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return raw != null ? String(raw) : `__${idx}`;
   }).join("|");
-  React96__default.useEffect(() => {
+  React95__default.useEffect(() => {
     const root = isRoot ? null : parentRoot;
     if (root) {
       root.clearOptimisticOrder(ownGroup);
@@ -25465,20 +25277,20 @@ function useDataDnd(args) {
       clearOptimisticOrder(ownGroup);
     }
   }, [itemsContentSig, ownGroup]);
-  const zonesRef = React96__default.useRef(/* @__PURE__ */ new Map());
-  const registerZone = React96__default.useCallback((zoneId2, meta2) => {
+  const zonesRef = React95__default.useRef(/* @__PURE__ */ new Map());
+  const registerZone = React95__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
   }, []);
-  const unregisterZone = React96__default.useCallback((zoneId2) => {
+  const unregisterZone = React95__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
-  const [activeDrag, setActiveDrag] = React96__default.useState(null);
-  const [overZoneGroup, setOverZoneGroup] = React96__default.useState(null);
-  const meta = React96__default.useMemo(
+  const [activeDrag, setActiveDrag] = React95__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React95__default.useState(null);
+  const meta = React95__default.useMemo(
     () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
     [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
-  React96__default.useEffect(() => {
+  React95__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
@@ -25497,7 +25309,7 @@ function useDataDnd(args) {
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = useAlmadarDndSensors(true);
   const collisionDetection = almadarDndCollisionDetection;
-  const findZoneByItem = React96__default.useCallback(
+  const findZoneByItem = React95__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
         if (z.itemIds.includes(id)) return z;
@@ -25506,7 +25318,7 @@ function useDataDnd(args) {
     },
     []
   );
-  React96__default.useCallback(
+  React95__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -25515,7 +25327,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const handleDragEnd = React96__default.useCallback(
+  const handleDragEnd = React95__default.useCallback(
     (event) => {
       const { active, over } = event;
       const activeIdStr = String(active.id);
@@ -25606,8 +25418,8 @@ function useDataDnd(args) {
     },
     [eventBus]
   );
-  const sortableData = React96__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
-  const SortableItem = React96__default.useCallback(
+  const sortableData = React95__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
+  const SortableItem = React95__default.useCallback(
     ({ id, children }) => {
       const {
         attributes,
@@ -25647,7 +25459,7 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
-    const ctx = React96__default.useContext(RootCtx);
+    const ctx = React95__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
     const overZoneGroup2 = ctx?.overZoneGroup ?? null;
     const isThisZoneOver = overZoneGroup2 === ownGroup;
@@ -25662,7 +25474,7 @@ function useDataDnd(args) {
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
-    React96__default.useEffect(() => {
+    React95__default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsx(
@@ -25676,11 +25488,11 @@ function useDataDnd(args) {
       }
     );
   };
-  const rootContextValue = React96__default.useMemo(
+  const rootContextValue = React95__default.useMemo(
     () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
     [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
-  const handleDragStart = React96__default.useCallback((event) => {
+  const handleDragStart = React95__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
     const rect = event.active.rect.current.initial;
     const height = rect?.height && rect.height > 0 ? rect.height : 64;
@@ -25699,7 +25511,7 @@ function useDataDnd(args) {
       isRoot
     });
   }, [findZoneByItem, isRoot, zoneId]);
-  const handleDragOver = React96__default.useCallback((event) => {
+  const handleDragOver = React95__default.useCallback((event) => {
     const { active, over } = event;
     const overData = over?.data?.current;
     const overGroup = overData?.dndGroup ?? null;
@@ -25769,7 +25581,7 @@ function useDataDnd(args) {
       return next;
     });
   }, []);
-  const handleDragCancel = React96__default.useCallback((event) => {
+  const handleDragCancel = React95__default.useCallback((event) => {
     setActiveDrag(null);
     setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
@@ -25777,12 +25589,12 @@ function useDataDnd(args) {
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
-  const handleDragEndWithCleanup = React96__default.useCallback((event) => {
+  const handleDragEndWithCleanup = React95__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
     setOverZoneGroup(null);
   }, [handleDragEnd]);
-  const wrapContainer = React96__default.useCallback(
+  const wrapContainer = React95__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
@@ -25836,7 +25648,7 @@ var init_useDataDnd = __esm({
     init_useAlmadarDndCollision();
     init_Box();
     dndLog = createLogger("almadar:ui:dnd");
-    RootCtx = React96__default.createContext(null);
+    RootCtx = React95__default.createContext(null);
   }
 });
 function renderIconInput(icon, props) {
@@ -26362,7 +26174,7 @@ function DataList({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React96__default.useState(pageSize || Infinity);
+  const [visibleCount, setVisibleCount] = React95__default.useState(pageSize || Infinity);
   const fieldDefs = fields ?? columns ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -26381,7 +26193,7 @@ function DataList({
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
   const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
   const hasRenderProp = typeof children === "function";
-  React96__default.useEffect(() => {
+  React95__default.useEffect(() => {
     const renderItemTypeOf = typeof schemaRenderItem;
     const childrenTypeOf = typeof children;
     if (data.length > 0 && !hasRenderProp) {
@@ -26485,7 +26297,7 @@ function DataList({
     const items2 = [...data];
     const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
     const contentField = titleField?.name ?? fieldDefs[0]?.name ?? "";
-    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
       group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: "my-2" }),
       group.items.map((itemData, index) => {
         const id = itemData.id || `${gi}-${index}`;
@@ -26626,7 +26438,7 @@ function DataList({
           className
         ),
         children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+          groups.map((group, gi) => /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
             group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-4" : "mt-0" }),
             group.items.map(
               (itemData, index) => renderItem(itemData, index, gi === groups.length - 1 && index === group.items.length - 1)
@@ -26711,7 +26523,7 @@ var init_FormSection = __esm({
       columns = 1,
       className
     }) => {
-      const [collapsed, setCollapsed] = React96__default.useState(defaultCollapsed);
+      const [collapsed, setCollapsed] = React95__default.useState(defaultCollapsed);
       const { t } = useTranslate();
       const eventBus = useEventBus();
       const gridClass = {
@@ -26719,7 +26531,7 @@ var init_FormSection = __esm({
         2: "grid-cols-1 md:grid-cols-2",
         3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       }[columns];
-      React96__default.useCallback(() => {
+      React95__default.useCallback(() => {
         if (collapsible) {
           setCollapsed((prev) => !prev);
           eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -27605,7 +27417,7 @@ var init_Flex = __esm({
           flexStyle.flexBasis = typeof basis === "number" ? `${basis}px` : basis;
         }
       }
-      return React96__default.createElement(Component, {
+      return React95__default.createElement(Component, {
         className: cn(
           inline ? "inline-flex" : "flex",
           directionStyles[direction],
@@ -27724,7 +27536,7 @@ var init_Grid = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = rows2 ? { gridTemplateRows: `repeat(${rows2}, minmax(0, 1fr))`, ...style } : style;
-      return React96__default.createElement(
+      return React95__default.createElement(
         Component,
         {
           className: cn(
@@ -27920,9 +27732,9 @@ var init_Popover = __esm({
         onMouseLeave: handleClose,
         onPointerDown: tapTriggerProps.onPointerDown
       };
-      const childElement = React96__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const childElement = React95__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
       const childPointerDown = childElement.props.onPointerDown;
-      const triggerElement = React96__default.cloneElement(
+      const triggerElement = React95__default.cloneElement(
         childElement,
         {
           ref: triggerRef,
@@ -28524,9 +28336,9 @@ var init_Tooltip = __esm({
           if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
         };
       }, []);
-      const triggerElement = React96__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const triggerElement = React95__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
       const childPointerDown = triggerElement.props.onPointerDown;
-      const trigger = React96__default.cloneElement(triggerElement, {
+      const trigger = React95__default.cloneElement(triggerElement, {
         ref: triggerRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -28616,7 +28428,7 @@ var init_WizardProgress = __esm({
           children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: normalizedSteps.map((step, index) => {
             const isActive = index === currentStep;
             const isCompleted = index < currentStep;
-            return /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -30176,13 +29988,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect67, useRef: useRef65, useCallback: useCallback99, useState: useState97 } = React96__default;
+      const { useEffect: useEffect66, useRef: useRef64, useCallback: useCallback98, useState: useState97 } = React95__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 = useRef65({ centerLat, centerLng, zoom });
-        useEffect67(() => {
+        const prevRef = useRef64({ centerLat, centerLng, zoom });
+        useEffect66(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -30193,7 +30005,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect67(() => {
+        useEffect66(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -30222,7 +30034,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState97(null);
-        const handleMapClick = useCallback99((lat, lng) => {
+        const handleMapClick = useCallback98((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -30231,7 +30043,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback99((marker) => {
+        const handleMarkerClick = useCallback98((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -31091,8 +30903,8 @@ function TableView({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React96__default.useState(pageSize > 0 ? pageSize : Infinity);
-  const [localSelected, setLocalSelected] = React96__default.useState(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = React95__default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React95__default.useState(/* @__PURE__ */ new Set());
   const colDefs = columns ?? fields ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -31287,12 +31099,12 @@ function TableView({
         ]
       }
     );
-    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React96__default.Fragment, { children: rowInner }, id);
+    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React95__default.Fragment, { children: rowInner }, id);
   };
   const items = Array.from(data);
   const groups = groupBy ? groupData2(items, groupBy) : [{ label: "", items }];
   let runningIndex = 0;
-  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
     group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-3" : "mt-0" }),
     group.items.map((row) => renderRow(row, runningIndex++))
   ] }, gi)) });
@@ -32511,7 +32323,7 @@ var init_StepFlow = __esm({
       className
     }) => {
       if (orientation === "vertical") {
-        return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React96__default.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+        return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React95__default.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
           /* @__PURE__ */ jsxs(VStack, { gap: "none", align: "center", children: [
             /* @__PURE__ */ jsx(StepCircle, { step, index }),
             showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "w-px h-8 bg-border" })
@@ -32522,7 +32334,7 @@ var init_StepFlow = __esm({
           ] })
         ] }) }, index)) });
       }
-      return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+      return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
         /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
           /* @__PURE__ */ jsx(StepCircle, { step, index }),
           /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -33507,7 +33319,7 @@ var init_LikertScale = __esm({
       md: "text-base",
       lg: "text-lg"
     };
-    LikertScale = React96__default.forwardRef(
+    LikertScale = React95__default.forwardRef(
       ({
         question,
         options = DEFAULT_LIKERT_OPTIONS,
@@ -33519,7 +33331,7 @@ var init_LikertScale = __esm({
         variant = "radios",
         className
       }, ref) => {
-        const groupId = React96__default.useId();
+        const groupId = React95__default.useId();
         const eventBus = useEventBus();
         const handleSelect = useCallback(
           (next) => {
@@ -35801,7 +35613,7 @@ var init_DocBreadcrumb = __esm({
           "aria-label": t("aria.breadcrumb"),
           children: /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", wrap: true, children: items.map((item, idx) => {
             const isLast = idx === items.length - 1;
-            return /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(
                 Icon,
                 {
@@ -36670,7 +36482,7 @@ var init_MiniStateMachine = __esm({
           const x = 2 + i * (NODE_W + GAP + ARROW_W + GAP);
           const tc = transitionCounts[s.name] ?? 0;
           const role = getStateRole(s.name, s.isInitial ?? void 0, s.isTerminal ?? void 0, tc, maxTC);
-          return /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               AvlState,
               {
@@ -36874,7 +36686,7 @@ var init_PageHeader = __esm({
         info: "bg-info/10 text-info"
       };
       return /* @__PURE__ */ jsxs(Box, { className: cn("mb-6", className), children: [
-        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
           idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
           crumb.href ? /* @__PURE__ */ jsx(
             "a",
@@ -37232,7 +37044,7 @@ var init_Section = __esm({
       as: Component = "section"
     }) => {
       const hasHeader = title || description || action;
-      return React96__default.createElement(
+      return React95__default.createElement(
         Component,
         {
           className: cn(
@@ -37606,7 +37418,7 @@ var init_WizardContainer = __esm({
               const isCompleted = index < currentStep;
               const stepKey = step.id ?? step.tabId ?? `step-${index}`;
               const stepTitle = step.title ?? step.name ?? `Step ${index + 1}`;
-              return /* @__PURE__ */ jsxs(React96__default.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React95__default.Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -40039,7 +39851,7 @@ var init_DetailPanel = __esm({
   }
 });
 function extractTitle(children) {
-  if (!React96__default.isValidElement(children)) return void 0;
+  if (!React95__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -40389,12 +40201,12 @@ var init_Form = __esm({
       const isSchemaEntity = isOrbitalEntitySchema(entity);
       const resolvedEntity = isSchemaEntity ? entity : void 0;
       const entityName = typeof entity === "string" ? entity : resolvedEntity?.name;
-      const normalizedInitialData = React96__default.useMemo(() => {
+      const normalizedInitialData = React95__default.useMemo(() => {
         const entityRowAsInitial = isPlainEntityRow(entity) ? entity : void 0;
         const callerInitial = initialData !== null && typeof initialData === "object" && !Array.isArray(initialData) ? initialData : {};
         return entityRowAsInitial !== void 0 ? { ...entityRowAsInitial, ...callerInitial } : callerInitial;
       }, [entity, initialData]);
-      const entityDerivedFields = React96__default.useMemo(() => {
+      const entityDerivedFields = React95__default.useMemo(() => {
         if (fields && fields.length > 0) return void 0;
         if (!resolvedEntity) return void 0;
         return resolvedEntity.fields.map(
@@ -40415,16 +40227,16 @@ var init_Form = __esm({
       const conditionalFields = typeof conditionalFieldsRaw === "boolean" ? {} : conditionalFieldsRaw;
       const hiddenCalculations = typeof hiddenCalculationsRaw === "boolean" ? [] : hiddenCalculationsRaw;
       const violationTriggers = typeof violationTriggersRaw === "boolean" ? [] : violationTriggersRaw;
-      const [formData, setFormData] = React96__default.useState(
+      const [formData, setFormData] = React95__default.useState(
         normalizedInitialData
       );
-      const [collapsedSections, setCollapsedSections] = React96__default.useState(
+      const [collapsedSections, setCollapsedSections] = React95__default.useState(
         /* @__PURE__ */ new Set()
       );
-      const [submitError, setSubmitError] = React96__default.useState(null);
-      const formRef = React96__default.useRef(null);
+      const [submitError, setSubmitError] = React95__default.useState(null);
+      const formRef = React95__default.useRef(null);
       const formMode = props.mode;
-      const mountedRef = React96__default.useRef(false);
+      const mountedRef = React95__default.useRef(false);
       if (!mountedRef.current) {
         mountedRef.current = true;
         debug("forms", "mount", {
@@ -40437,7 +40249,7 @@ var init_Form = __esm({
         });
       }
       const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-      const evalContext = React96__default.useMemo(
+      const evalContext = React95__default.useMemo(
         () => ({
           formValues: formData,
           globalVariables: externalContext?.globalVariables ?? {},
@@ -40446,7 +40258,7 @@ var init_Form = __esm({
         }),
         [formData, externalContext]
       );
-      React96__default.useEffect(() => {
+      React95__default.useEffect(() => {
         debug("forms", "initialData-sync", {
           mode: formMode,
           normalizedInitialData,
@@ -40457,7 +40269,7 @@ var init_Form = __esm({
           setFormData(normalizedInitialData);
         }
       }, [normalizedInitialData]);
-      const processCalculations = React96__default.useCallback(
+      const processCalculations = React95__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!hiddenCalculations.length) return;
           const context = {
@@ -40482,7 +40294,7 @@ var init_Form = __esm({
         },
         [hiddenCalculations, externalContext, eventBus]
       );
-      const checkViolations = React96__default.useCallback(
+      const checkViolations = React95__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!violationTriggers.length) return;
           const context = {
@@ -40520,7 +40332,7 @@ var init_Form = __esm({
         processCalculations(name, newFormData);
         checkViolations(name, newFormData);
       };
-      const isFieldVisible = React96__default.useCallback(
+      const isFieldVisible = React95__default.useCallback(
         (fieldName) => {
           const condition = conditionalFields[fieldName];
           if (!condition) return true;
@@ -40528,7 +40340,7 @@ var init_Form = __esm({
         },
         [conditionalFields, evalContext]
       );
-      const isSectionVisible = React96__default.useCallback(
+      const isSectionVisible = React95__default.useCallback(
         (section) => {
           if (!section.condition) return true;
           return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -40604,7 +40416,7 @@ var init_Form = __esm({
           eventBus.emit(`UI:${onCancel}`);
         }
       };
-      const renderField = React96__default.useCallback(
+      const renderField = React95__default.useCallback(
         (field) => {
           const fieldName = field.name || field.field;
           if (!fieldName) return null;
@@ -40625,7 +40437,7 @@ var init_Form = __esm({
         [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
       );
       const effectiveFields = entityDerivedFields ?? fields;
-      const normalizedFields = React96__default.useMemo(() => {
+      const normalizedFields = React95__default.useMemo(() => {
         if (!effectiveFields || effectiveFields.length === 0) return [];
         return effectiveFields.map((field) => {
           if (typeof field === "string") {
@@ -40649,7 +40461,7 @@ var init_Form = __esm({
           return field;
         });
       }, [effectiveFields, resolvedEntity]);
-      const schemaFields = React96__default.useMemo(() => {
+      const schemaFields = React95__default.useMemo(() => {
         if (normalizedFields.length === 0) return null;
         if (isDebugEnabled()) {
           debugGroup(`Form: ${entityName || "unknown"}`);
@@ -40659,7 +40471,7 @@ var init_Form = __esm({
         }
         return normalizedFields.map(renderField).filter(Boolean);
       }, [normalizedFields, renderField, entityName, conditionalFields]);
-      const sectionElements = React96__default.useMemo(() => {
+      const sectionElements = React95__default.useMemo(() => {
         if (!sections || sections.length === 0) return null;
         return sections.map((section) => {
           if (!isSectionVisible(section)) {
@@ -41384,7 +41196,7 @@ var init_List = __esm({
         if (entity && typeof entity === "object" && "id" in entity) return [entity];
         return [];
       }, [entity]);
-      const getItemActions = React96__default.useCallback(
+      const getItemActions = React95__default.useCallback(
         (item) => {
           if (!itemActions) return [];
           if (typeof itemActions === "function") {
@@ -41859,7 +41671,7 @@ var init_MediaGallery = __esm({
         [selectable, selectedItems, selectionEvent, eventBus]
       );
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React96__default.useMemo(() => {
+      const items = React95__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -42022,7 +41834,7 @@ var init_MediaGallery = __esm({
   }
 });
 function extractTitle2(children) {
-  if (!React96__default.isValidElement(children)) return void 0;
+  if (!React95__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -42296,7 +42108,7 @@ var init_debugRegistry = __esm({
   }
 });
 function useDebugData() {
-  const [data, setData] = React96.useState(() => ({
+  const [data, setData] = React95.useState(() => ({
     traits: [],
     ticks: [],
     guards: [],
@@ -42310,7 +42122,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React96.useEffect(() => {
+  React95.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -42419,12 +42231,12 @@ function layoutGraph(states, transitions, initialState, width, height) {
   return positions;
 }
 function WalkMinimap() {
-  const [walkStep, setWalkStep] = React96.useState(null);
-  const [traits2, setTraits] = React96.useState([]);
-  const [coveredEdges, setCoveredEdges] = React96.useState([]);
-  const [completedTraits, setCompletedTraits] = React96.useState(/* @__PURE__ */ new Set());
-  const prevTraitRef = React96.useRef(null);
-  React96.useEffect(() => {
+  const [walkStep, setWalkStep] = React95.useState(null);
+  const [traits2, setTraits] = React95.useState([]);
+  const [coveredEdges, setCoveredEdges] = React95.useState([]);
+  const [completedTraits, setCompletedTraits] = React95.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React95.useRef(null);
+  React95.useEffect(() => {
     const interval = setInterval(() => {
       const w = window;
       const step = w.__orbitalWalkStep;
@@ -42860,15 +42672,15 @@ var init_EntitiesTab = __esm({
 });
 function EventFlowTab({ events: events2 }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React96.useState("all");
-  const containerRef = React96.useRef(null);
-  const [autoScroll, setAutoScroll] = React96.useState(true);
-  React96.useEffect(() => {
+  const [filter, setFilter] = React95.useState("all");
+  const containerRef = React95.useRef(null);
+  const [autoScroll, setAutoScroll] = React95.useState(true);
+  React95.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [events2.length, autoScroll]);
-  const filteredEvents = React96.useMemo(() => {
+  const filteredEvents = React95.useMemo(() => {
     if (filter === "all") return events2;
     return events2.filter((e) => e.type === filter);
   }, [events2, filter]);
@@ -42984,7 +42796,7 @@ var init_EventFlowTab = __esm({
 });
 function GuardsPanel({ guards }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React96.useState("all");
+  const [filter, setFilter] = React95.useState("all");
   if (guards.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -42997,7 +42809,7 @@ function GuardsPanel({ guards }) {
   }
   const passedCount = guards.filter((g) => g.result).length;
   const failedCount = guards.length - passedCount;
-  const filteredGuards = React96.useMemo(() => {
+  const filteredGuards = React95.useMemo(() => {
     if (filter === "all") return guards;
     if (filter === "passed") return guards.filter((g) => g.result);
     return guards.filter((g) => !g.result);
@@ -43160,10 +42972,10 @@ function EffectBadge({ effect }) {
 }
 function TransitionTimeline({ transitions }) {
   const { t } = useTranslate();
-  const containerRef = React96.useRef(null);
-  const [autoScroll, setAutoScroll] = React96.useState(true);
-  const [expandedId, setExpandedId] = React96.useState(null);
-  React96.useEffect(() => {
+  const containerRef = React95.useRef(null);
+  const [autoScroll, setAutoScroll] = React95.useState(true);
+  const [expandedId, setExpandedId] = React95.useState(null);
+  React95.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
@@ -43443,9 +43255,9 @@ function getAllEvents(traits2) {
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [log9, setLog] = React96.useState([]);
-  const prevStatesRef = React96.useRef(/* @__PURE__ */ new Map());
-  React96.useEffect(() => {
+  const [log9, setLog] = React95.useState([]);
+  const prevStatesRef = React95.useRef(/* @__PURE__ */ new Map());
+  React95.useEffect(() => {
     for (const trait of traits2) {
       const prev = prevStatesRef.current.get(trait.id);
       if (prev && prev !== trait.currentState) {
@@ -43614,10 +43426,10 @@ function VerifyModePanel({
   localCount
 }) {
   const { t } = useTranslate();
-  const [expanded, setExpanded] = React96.useState(true);
-  const scrollRef = React96.useRef(null);
-  const prevCountRef = React96.useRef(0);
-  React96.useEffect(() => {
+  const [expanded, setExpanded] = React95.useState(true);
+  const scrollRef = React95.useRef(null);
+  const prevCountRef = React95.useRef(0);
+  React95.useEffect(() => {
     if (expanded && transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -43674,10 +43486,10 @@ function RuntimeDebugger({
   schema
 }) {
   const { t } = useTranslate();
-  const [isCollapsed, setIsCollapsed] = React96.useState(mode === "verify" ? true : defaultCollapsed);
-  const [isVisible, setIsVisible] = React96.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
+  const [isCollapsed, setIsCollapsed] = React95.useState(mode === "verify" ? true : defaultCollapsed);
+  const [isVisible, setIsVisible] = React95.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
   const debugData = useDebugData();
-  React96.useEffect(() => {
+  React95.useEffect(() => {
     if (mode === "inline") return;
     return onDebugToggle((enabled) => {
       setIsVisible(enabled);
@@ -43686,7 +43498,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React96.useEffect(() => {
+  React95.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -44206,7 +44018,7 @@ var init_StatCard = __esm({
       const labelToUse = propLabel ?? propTitle;
       const eventBus = useEventBus();
       const { t } = useTranslate();
-      const handleActionClick = React96__default.useCallback(() => {
+      const handleActionClick = React95__default.useCallback(() => {
         if (action?.event) {
           eventBus.emit(`UI:${action.event}`, {});
         }
@@ -44217,7 +44029,7 @@ var init_StatCard = __esm({
       const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
       const isLoading = externalLoading ?? false;
       const error = externalError;
-      const computeMetricValue = React96__default.useCallback(
+      const computeMetricValue = React95__default.useCallback(
         (metric, items) => {
           if (metric.value !== void 0) {
             return metric.value;
@@ -44256,7 +44068,7 @@ var init_StatCard = __esm({
         },
         []
       );
-      const schemaStats = React96__default.useMemo(() => {
+      const schemaStats = React95__default.useMemo(() => {
         if (!metrics || metrics.length === 0) return null;
         return metrics.map((metric) => ({
           label: metric.label,
@@ -44264,7 +44076,7 @@ var init_StatCard = __esm({
           format: metric.format
         }));
       }, [metrics, data, computeMetricValue]);
-      const calculatedTrend = React96__default.useMemo(() => {
+      const calculatedTrend = React95__default.useMemo(() => {
         if (manualTrend !== void 0) return manualTrend;
         if (previousValue === void 0 || currentValue === void 0)
           return void 0;
@@ -44904,8 +44716,8 @@ var init_SubagentTracePanel = __esm({
       ] });
     };
     InlineActivityStream = ({ activities, autoScroll = true, className }) => {
-      const endRef = React96__default.useRef(null);
-      React96__default.useEffect(() => {
+      const endRef = React95__default.useRef(null);
+      React95__default.useEffect(() => {
         if (!autoScroll) return;
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       }, [activities.length, autoScroll]);
@@ -44999,7 +44811,7 @@ var init_SubagentTracePanel = __esm({
     };
     SubagentRichCard = ({ subagent }) => {
       const { t } = useTranslate();
-      const activities = React96__default.useMemo(
+      const activities = React95__default.useMemo(
         () => subagentMessagesToActivities(subagent.messages),
         [subagent.messages]
       );
@@ -45076,8 +44888,8 @@ var init_SubagentTracePanel = __esm({
       ] });
     };
     CoordinatorConversation = ({ messages, autoScroll = true, className }) => {
-      const endRef = React96__default.useRef(null);
-      React96__default.useEffect(() => {
+      const endRef = React95__default.useRef(null);
+      React95__default.useEffect(() => {
         if (!autoScroll) return;
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       }, [messages.length, autoScroll]);
@@ -45507,7 +45319,7 @@ var init_Timeline = __esm({
     }) => {
       const { t } = useTranslate();
       const entityData = entity ?? [];
-      const items = React96__default.useMemo(() => {
+      const items = React95__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -45609,7 +45421,7 @@ var init_Timeline = __esm({
   }
 });
 function extractToastProps(children) {
-  if (!React96__default.isValidElement(children)) {
+  if (!React95__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -45651,7 +45463,7 @@ var init_ToastSlot = __esm({
         eventBus.emit(`${prefix}CLOSE`);
       };
       if (!isVisible) return null;
-      const isCustomContent = React96__default.isValidElement(children) && !message;
+      const isCustomContent = React95__default.isValidElement(children) && !message;
       return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
         Toast,
         {
@@ -45668,7 +45480,7 @@ var init_ToastSlot = __esm({
   }
 });
 function lazyThree(name, loader) {
-  const Lazy = React96__default.lazy(
+  const Lazy = React95__default.lazy(
     () => loader().then((m) => {
       const Resolved = m[name];
       if (!Resolved) {
@@ -45680,13 +45492,13 @@ function lazyThree(name, loader) {
     })
   );
   function ThreeWrapper(props) {
-    return React96__default.createElement(
+    return React95__default.createElement(
       ThreeBoundary,
       { name },
-      React96__default.createElement(
-        React96__default.Suspense,
+      React95__default.createElement(
+        React95__default.Suspense,
         { fallback: null },
-        React96__default.createElement(Lazy, props)
+        React95__default.createElement(Lazy, props)
       )
     );
   }
@@ -45847,6 +45659,7 @@ var init_component_registry_generated = __esm({
     init_Navigation();
     init_NegotiatorBoard();
     init_NumberStepper();
+    init_ObjectRulePanel();
     init_OptionConstraintGroup();
     init_OrbitalVisualization();
     init_Overlay();
@@ -45892,7 +45705,6 @@ var init_component_registry_generated = __esm({
     init_Sidebar();
     init_SignaturePad();
     init_SimpleGrid();
-    init_SimulationCanvas();
     init_SimulatorBoard();
     init_Skeleton();
     init_SocialProof();
@@ -45910,6 +45722,7 @@ var init_component_registry_generated = __esm({
     init_StateArchitectBoard();
     init_StateGraph();
     init_StateIndicator();
+    init_StateJsonView();
     init_StateMachineView();
     init_StatsGrid();
     init_StatsOrganism();
@@ -45956,6 +45769,7 @@ var init_component_registry_generated = __esm({
     init_Typography();
     init_UISlotRenderer();
     init_UploadDropZone();
+    init_VariablePanel();
     init_VersionDiff();
     init_ViolationAlert();
     init_VoteStack();
@@ -45963,7 +45777,7 @@ var init_component_registry_generated = __esm({
     init_WizardContainer();
     init_WizardNavigation();
     init_WizardProgress();
-    ThreeBoundary = class extends React96__default.Component {
+    ThreeBoundary = class extends React95__default.Component {
       constructor() {
         super(...arguments);
         __publicField(this, "state", { failed: false });
@@ -45973,7 +45787,7 @@ var init_component_registry_generated = __esm({
       }
       render() {
         if (this.state.failed) {
-          return React96__default.createElement(
+          return React95__default.createElement(
             "div",
             {
               "data-testid": "three-unavailable",
@@ -46156,6 +45970,7 @@ var init_component_registry_generated = __esm({
       "Navigation": Navigation,
       "NegotiatorBoard": NegotiatorBoard,
       "NumberStepper": NumberStepper,
+      "ObjectRulePanel": ObjectRulePanel,
       "OptionConstraintGroup": OptionConstraintGroup,
       "OrbitalVisualization": OrbitalVisualization,
       "Overlay": Overlay,
@@ -46201,7 +46016,6 @@ var init_component_registry_generated = __esm({
       "Sidebar": Sidebar,
       "SignaturePad": SignaturePad,
       "SimpleGrid": SimpleGrid,
-      "SimulationCanvas": SimulationCanvas,
       "SimulatorBoard": SimulatorBoard,
       "Skeleton": Skeleton,
       "SocialProof": SocialProof,
@@ -46222,6 +46036,7 @@ var init_component_registry_generated = __esm({
       "StateArchitectBoard": StateArchitectBoard,
       "StateGraph": StateGraph,
       "StateIndicator": StateIndicator,
+      "StateJsonView": StateJsonView,
       "StateMachineView": StateMachineView,
       "StatsGrid": StatsGrid,
       "StatsOrganism": StatsOrganism,
@@ -46269,6 +46084,7 @@ var init_component_registry_generated = __esm({
       "UISlotRenderer": UISlotRenderer,
       "UploadDropZone": UploadDropZone,
       "VStack": VStack,
+      "VariablePanel": VariablePanel,
       "VersionDiff": VersionDiff,
       "ViolationAlert": ViolationAlert,
       "VoteStack": VoteStack,
@@ -46294,7 +46110,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React96__default.createElement(
+  return React95__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -46336,7 +46152,7 @@ function enrichFormFields(fields, entityDef) {
       }
       return { name: field, label: field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase()) };
     }
-    if (field && typeof field === "object" && !Array.isArray(field) && !React96__default.isValidElement(field) && !(field instanceof Date)) {
+    if (field && typeof field === "object" && !Array.isArray(field) && !React95__default.isValidElement(field) && !(field instanceof Date)) {
       const obj = field;
       const fieldName = typeof obj.name === "string" ? obj.name : typeof obj.field === "string" ? obj.field : void 0;
       if (!fieldName) return field;
@@ -46789,7 +46605,7 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
         const key = `${parentId}-${index}-trait:${traitName}`;
         return /* @__PURE__ */ jsx(TraitFrame, { traitName }, key);
       }
-      return /* @__PURE__ */ jsx(React96__default.Fragment, { children: child }, `${parentId}-${index}`);
+      return /* @__PURE__ */ jsx(React95__default.Fragment, { children: child }, `${parentId}-${index}`);
     }
     if (!child || typeof child !== "object") return null;
     const childId = `${parentId}-${index}`;
@@ -46829,14 +46645,14 @@ function isPatternConfig(value) {
   if (value === null || value === void 0) return false;
   if (typeof value !== "object") return false;
   if (Array.isArray(value)) return false;
-  if (React96__default.isValidElement(value)) return false;
+  if (React95__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   if (typeof value === "function") return false;
   const record = value;
   return "type" in record && typeof record.type === "string" && getComponentForPattern$1(record.type) !== null;
 }
 function isPlainConfigObject(value) {
-  if (React96__default.isValidElement(value)) return false;
+  if (React95__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
@@ -46962,7 +46778,7 @@ function SlotContentRenderer({
     for (const slotKey of CONTENT_NODE_SLOTS) {
       const slotVal = restProps[slotKey];
       if (slotVal === void 0 || slotVal === null) continue;
-      if (React96__default.isValidElement(slotVal) || typeof slotVal === "string" || typeof slotVal === "number" || typeof slotVal === "boolean") continue;
+      if (React95__default.isValidElement(slotVal) || typeof slotVal === "string" || typeof slotVal === "number" || typeof slotVal === "boolean") continue;
       if (Array.isArray(slotVal) || typeof slotVal === "object" && "type" in slotVal) {
         nodeSlotOverrides[slotKey] = renderPatternChildren(
           slotVal,
@@ -47011,7 +46827,7 @@ function SlotContentRenderer({
     const resolvedItems = Array.isArray(entityVal) && entityVal[0] !== "fn" ? entityVal : null;
     if (resolvedItems && resolvedItems.length > 0 && !finalProps.fields && !finalProps.columns) {
       const sample = resolvedItems[0];
-      if (sample && typeof sample === "object" && !Array.isArray(sample) && !React96__default.isValidElement(sample) && !(sample instanceof Date)) {
+      if (sample && typeof sample === "object" && !Array.isArray(sample) && !React95__default.isValidElement(sample) && !(sample instanceof Date)) {
         const keys = Object.keys(sample).filter((k) => k !== "id" && k !== "_id");
         finalProps.fields = keys.map((k, i) => ({ name: k, variant: i === 0 ? "h4" : "body" }));
       }
@@ -47303,7 +47119,7 @@ function resolveLambdaBindings(body, params, item, index) {
   if (Array.isArray(body)) {
     return body.map((b) => recur(b));
   }
-  if (body !== null && typeof body === "object" && !React96__default.isValidElement(body) && !(body instanceof Date) && typeof body !== "function") {
+  if (body !== null && typeof body === "object" && !React95__default.isValidElement(body) && !(body instanceof Date) && typeof body !== "function") {
     const out = {};
     for (const [k, v] of Object.entries(body)) {
       out[k] = recur(v);
@@ -47322,7 +47138,7 @@ function getSlotContentRenderer2() {
 function makeLambdaFn(params, lambdaBody, callerKey) {
   return (item, index) => {
     const resolvedBody = resolveLambdaBindings(lambdaBody, params, item, index);
-    if (resolvedBody === null || typeof resolvedBody !== "object" || Array.isArray(resolvedBody) || typeof resolvedBody === "function" || React96__default.isValidElement(resolvedBody) || resolvedBody instanceof Date) {
+    if (resolvedBody === null || typeof resolvedBody !== "object" || Array.isArray(resolvedBody) || typeof resolvedBody === "function" || React95__default.isValidElement(resolvedBody) || resolvedBody instanceof Date) {
       return null;
     }
     const record = resolvedBody;
@@ -47341,7 +47157,7 @@ function makeLambdaFn(params, lambdaBody, callerKey) {
       props: childProps,
       priority: 0
     };
-    return React96__default.createElement(SlotContentRenderer2, { content: childContent });
+    return React95__default.createElement(SlotContentRenderer2, { content: childContent });
   };
 }
 function convertNode(node, callerKey) {
@@ -47360,7 +47176,7 @@ function convertNode(node, callerKey) {
     });
     return anyChanged ? mapped : node;
   }
-  if (typeof node === "object" && !React96__default.isValidElement(node) && !(node instanceof Date)) {
+  if (typeof node === "object" && !React95__default.isValidElement(node) && !(node instanceof Date)) {
     return convertObjectProps(node);
   }
   return node;
@@ -47811,42 +47627,14 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     });
   }, [executeTransitionEffects]);
   useEffect(() => {
-    const hasFrameTicks = traitBindingsRef.current.some(
-      (b) => b.trait.ticks?.some((t) => t.interval === "frame")
-    );
-    if (!hasFrameTicks) return;
-    let running = true;
-    let rafId = 0;
-    const frame = () => {
-      if (!running) return;
-      for (const binding of traitBindingsRef.current) {
-        for (const tick of binding.trait.ticks ?? []) {
-          if (tick.interval !== "frame") continue;
-          runTickEffects(tick, binding);
-        }
-      }
-      rafId = requestAnimationFrame(frame);
-    };
-    rafId = requestAnimationFrame(frame);
-    return () => {
-      running = false;
-      cancelAnimationFrame(rafId);
-    };
-  }, [traitBindings, runTickEffects]);
-  useEffect(() => {
-    const intervals = [];
+    const scheduler = createTickScheduler();
     for (const binding of traitBindings) {
       for (const tick of binding.trait.ticks ?? []) {
-        if (tick.interval === "frame") continue;
-        const ms = tick.interval;
-        intervals.push(setInterval(() => {
-          runTickEffects(tick, binding);
-        }, ms));
+        const intervalMs = tick.interval === "frame" ? 0 : tick.interval;
+        scheduler.add(intervalMs, () => runTickEffects(tick, binding));
       }
     }
-    return () => {
-      for (const id of intervals) clearInterval(id);
-    };
+    return () => scheduler.stopAll();
   }, [traitBindings, runTickEffects]);
   const processEventQueued = useCallback(async (eventKey, payload) => {
     const normalizedEvent = normalizeEventKey(eventKey);