@almadar/ui 5.134.0 → 5.136.0

package/dist/avl/index.cjs

@@ -7,6 +7,8 @@ var logger = require('@almadar/logger');
 var ELK = require('elkjs/lib/elk.bundled.js');
 var react = require('@xyflow/react');
 var hooks = require('@almadar/ui/hooks');
+var runtime = require('@almadar/runtime');
+var core = require('@almadar/core');
 var LucideIcons2 = require('lucide-react');
 var reactDom = require('react-dom');
 var context = require('@almadar/ui/context');
@@ -66,15 +68,14 @@ var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
 var remarkMath = require('remark-math');
 var rehypeKatex = require('rehype-katex');
-var core = require('@almadar/core');
 var core$1 = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
+var emojilib = require('emojilib');
 var d3Force = require('d3-force');
 var patterns = require('@almadar/core/patterns');
 var OrbitalServerRuntime = require('@almadar/runtime/OrbitalServerRuntime');
 var registry = require('@almadar/std/registry');
-var runtime = require('@almadar/runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -3238,6 +3239,32 @@ function formatValue(value, format) {
       return String(value);
   }
 }
+function compareCellValues(a, b) {
+  const aEmpty = a === null || a === void 0 || a === "";
+  const bEmpty = b === null || b === void 0 || b === "";
+  if (aEmpty || bEmpty) return aEmpty && bEmpty ? 0 : aEmpty ? 1 : -1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
+  const aNum = Number(a);
+  const bNum = Number(b);
+  if (Number.isFinite(aNum) && Number.isFinite(bNum)) return aNum - bNum;
+  const aTime = dateLikeTime(a);
+  const bTime = dateLikeTime(b);
+  if (aTime !== null && bTime !== null) return aTime - bTime;
+  return String(a).localeCompare(String(b));
+}
+function dateLikeTime(value) {
+  if (value instanceof Date) return value.getTime();
+  const text = String(value);
+  if (!/\d/.test(text) || !/[-/:T]/.test(text)) return null;
+  const time = Date.parse(text);
+  return Number.isNaN(time) ? null : time;
+}
+function sortRows(rows, field, direction = "asc") {
+  if (!field) return rows;
+  const dir = direction === "desc" ? -1 : 1;
+  return [...rows].sort((a, b) => dir * compareCellValues(a?.[field], b?.[field]));
+}
 var init_format = __esm({
   "lib/format.ts"() {
   }
@@ -4620,6 +4647,75 @@ var init_BehaviorView = __esm({
     exports.BehaviorView.displayName = "BehaviorView";
   }
 });
+function resolveMarkerExpression(expression, entity, config, state) {
+  const ctx = runtime.createContextFromBindings({
+    entity,
+    payload: {},
+    state,
+    ...config !== void 0 ? { config } : {}
+  });
+  return runtime.interpolateValue(expression, ctx);
+}
+function isPlainObject(value) {
+  if (value === null || value === void 0 || typeof value !== "object") return false;
+  if (Array.isArray(value)) return false;
+  if (React92__namespace.default.isValidElement(value)) return false;
+  if (value instanceof Date) return false;
+  if (typeof value === "function") return false;
+  return true;
+}
+function walkValue(value, scopeTrait, entity, config, state) {
+  if (core.isRenderBindingMarker(value)) {
+    return { resolved: resolveMarkerExpression(value.expression, entity, config, state), changed: true };
+  }
+  if (Array.isArray(value)) {
+    const out = [];
+    let changed = false;
+    for (const item of value) {
+      const element = item;
+      const wasMarker = core.isRenderBindingMarker(element);
+      const { resolved, changed: itemChanged } = walkValue(element, scopeTrait, entity, config, state);
+      if (wasMarker && Array.isArray(resolved)) {
+        out.push(...resolved);
+        changed = true;
+        continue;
+      }
+      out.push(resolved);
+      if (itemChanged) changed = true;
+    }
+    return changed ? { resolved: out, changed: true } : { resolved: value, changed: false };
+  }
+  if (isPlainObject(value)) {
+    const sourceTrait = value._sourceTrait;
+    if (typeof sourceTrait === "string" && sourceTrait !== scopeTrait) {
+      return { resolved: value, changed: false };
+    }
+    const out = {};
+    let changed = false;
+    for (const [key, item] of Object.entries(value)) {
+      const { resolved, changed: itemChanged } = walkValue(item, scopeTrait, entity, config, state);
+      out[key] = resolved;
+      if (itemChanged) changed = true;
+    }
+    return changed ? { resolved: out, changed: true } : { resolved: value, changed: false };
+  }
+  return { resolved: value, changed: false };
+}
+function resolveRenderBindingMarkers(props, scopeTrait, entity, config, state) {
+  const out = {};
+  let changed = false;
+  for (const [key, value] of Object.entries(props)) {
+    const { resolved, changed: propChanged } = walkValue(value, scopeTrait, entity, config, state);
+    out[key] = resolved;
+    if (propChanged) changed = true;
+  }
+  return changed ? out : props;
+}
+var init_resolve_render_bindings = __esm({
+  "lib/resolve-render-bindings.ts"() {
+    "use client";
+  }
+});
 function getCurrentIconFamily() {
   if (typeof window === "undefined" || typeof document === "undefined") {
     return DEFAULT_FAMILY;
@@ -4862,9 +4958,13 @@ function getAtlas(url, onReady) {
     onReady();
   }).catch(() => {
     atlasCache.set(url, null);
+    onReady();
   });
   return void 0;
 }
+function atlasFailed(url) {
+  return atlasCache.get(url) === null;
+}
 function subRectFor(atlas, sprite) {
   if (isTilesheet(atlas)) {
     let col;
@@ -6922,6 +7022,20 @@ var init_Input = __esm({
         const { t } = hooks.useTranslate();
         const eventBus = useEventBus();
         const type = inputType || htmlType || "text";
+        const isDeclarative = typeof onChange === "string";
+        const [localValue, setLocalValue] = React92__namespace.default.useState(value);
+        const pendingEchoRef = React92__namespace.default.useRef(/* @__PURE__ */ new Set());
+        React92__namespace.default.useEffect(() => {
+          if (!isDeclarative) return;
+          const incoming = value == null ? "" : String(value);
+          if (pendingEchoRef.current.has(incoming)) {
+            pendingEchoRef.current.delete(incoming);
+            return;
+          }
+          pendingEchoRef.current.clear();
+          setLocalValue(value);
+        }, [value, isDeclarative]);
+        const displayValue = isDeclarative ? localValue : value;
         const resolveIconNode = (i, cls) => {
           if (!i) return null;
           if (typeof i === "string") return /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: i, className: cls });
@@ -6931,7 +7045,7 @@ var init_Input = __esm({
         const iconCls = "h-icon-default w-icon-default";
         const IconComponent = typeof iconProp === "string" ? resolveIcon(iconProp) : iconProp;
         const resolvedLeftIcon = (leftIcon ? resolveIconNode(leftIcon, iconCls) : null) || IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: iconCls });
-        const showClearButton = clearable && value && String(value).length > 0;
+        const showClearButton = clearable && displayValue && String(displayValue).length > 0;
         const isMultiline = type === "textarea";
         const baseClassName = cn(
           "block w-full rounded-sm transition-all duration-fast",
@@ -6950,6 +7064,10 @@ var init_Input = __esm({
           if (typeof onChange === "string") {
             const target = e.target;
             const payload = type === "checkbox" ? { checked: target.checked } : { value: target.value };
+            if (type !== "checkbox") {
+              pendingEchoRef.current.add(target.value);
+              setLocalValue(target.value);
+            }
             eventBus.emit(`UI:${onChange}`, payload);
           } else {
             onChange?.(e);
@@ -6980,7 +7098,7 @@ var init_Input = __esm({
                 "select",
                 {
                   ref,
-                  value,
+                  value: displayValue,
                   onChange: handleChange,
                   className: cn(baseClassName, "appearance-none pr-10", className),
                   ...props,
@@ -7000,7 +7118,7 @@ var init_Input = __esm({
               "textarea",
               {
                 ref,
-                value,
+                value: displayValue,
                 onChange: handleChange,
                 rows,
                 className: baseClassName,
@@ -7039,7 +7157,7 @@ var init_Input = __esm({
               {
                 ref,
                 type,
-                value,
+                value: displayValue,
                 onChange: handleChange,
                 onKeyDown: handleKeyDown,
                 className: baseClassName,
@@ -10876,46 +10994,45 @@ var init_useImageCache = __esm({
 });
 
 // lib/isometric.ts
-function isoToScreen(tileX, tileY, scale, baseOffsetX, layout = "isometric") {
-  const scaledTileWidth = TILE_WIDTH * scale;
-  const scaledFloorHeight = FLOOR_HEIGHT * scale;
+function isoToScreen(tileX, tileY, cellWidth, baseOffsetX, layout = "isometric") {
+  const w = cellWidth;
+  const fh = cellWidth / 2;
   if (layout === "hex") {
-    const screenX2 = tileX * scaledTileWidth + (tileY & 1) * (scaledTileWidth / 2) + baseOffsetX;
-    const screenY2 = tileY * (scaledFloorHeight * 0.75);
+    const screenX2 = tileX * w + (tileY & 1) * (w / 2) + baseOffsetX;
+    const screenY2 = tileY * (fh * 0.75);
     return { x: screenX2, y: screenY2 };
   }
   if (layout === "flat") {
-    const screenX2 = tileX * scaledTileWidth + baseOffsetX;
-    const screenY2 = tileY * scaledTileWidth;
+    const screenX2 = tileX * w + baseOffsetX;
+    const screenY2 = tileY * w;
     return { x: screenX2, y: screenY2 };
   }
-  const screenX = (tileX - tileY) * (scaledTileWidth / 2) + baseOffsetX;
-  const screenY = (tileX + tileY) * (scaledFloorHeight / 2);
+  const screenX = (tileX - tileY) * (w / 2) + baseOffsetX;
+  const screenY = (tileX + tileY) * (fh / 2);
   return { x: screenX, y: screenY };
 }
-function screenToIso(screenX, screenY, scale, baseOffsetX, layout = "isometric") {
-  const scaledTileWidth = TILE_WIDTH * scale;
-  const scaledFloorHeight = FLOOR_HEIGHT * scale;
+function screenToIso(screenX, screenY, cellWidth, baseOffsetX, layout = "isometric") {
+  const w = cellWidth;
+  const fh = cellWidth / 2;
   if (layout === "hex") {
-    const row = Math.round(screenY / (scaledFloorHeight * 0.75));
-    const col = Math.round((screenX - (row & 1) * (scaledTileWidth / 2) - baseOffsetX) / scaledTileWidth);
+    const row = Math.round(screenY / (fh * 0.75));
+    const col = Math.round((screenX - (row & 1) * (w / 2) - baseOffsetX) / w);
     return { x: col, y: row };
   }
   if (layout === "flat") {
-    const col = Math.round((screenX - baseOffsetX) / scaledTileWidth);
-    const row = Math.round(screenY / scaledTileWidth);
+    const col = Math.round((screenX - baseOffsetX) / w);
+    const row = Math.round(screenY / w);
     return { x: col, y: row };
   }
   const adjustedX = screenX - baseOffsetX;
-  const tileX = (adjustedX / (scaledTileWidth / 2) + screenY / (scaledFloorHeight / 2)) / 2;
-  const tileY = (screenY / (scaledFloorHeight / 2) - adjustedX / (scaledTileWidth / 2)) / 2;
+  const tileX = (adjustedX / (w / 2) + screenY / (fh / 2)) / 2;
+  const tileY = (screenY / (fh / 2) - adjustedX / (w / 2)) / 2;
   return { x: Math.round(tileX), y: Math.round(tileY) };
 }
-var TILE_WIDTH, FLOOR_HEIGHT, DIAMOND_TOP_Y, BACKGROUND_FALLBACK_COLOR, MINIMAP_TERRAIN_COLORS;
+var TILE_WIDTH, DIAMOND_TOP_Y, BACKGROUND_FALLBACK_COLOR, MINIMAP_TERRAIN_COLORS;
 var init_isometric = __esm({
   "lib/isometric.ts"() {
     TILE_WIDTH = 256;
-    FLOOR_HEIGHT = 128;
     DIAMOND_TOP_Y = 374;
     BACKGROUND_FALLBACK_COLOR = "#1a1a2e";
     MINIMAP_TERRAIN_COLORS = {
@@ -11400,210 +11517,6 @@ var init_ChoiceButton = __esm({
     ChoiceButton.displayName = "ChoiceButton";
   }
 });
-function SvgStage({
-  cols,
-  rows,
-  tileSize = 32,
-  background = "var(--color-background)",
-  tileClickEvent,
-  tileHoverEvent,
-  tileLeaveEvent,
-  keyMap,
-  keyUpMap,
-  className,
-  children
-}) {
-  const eventBus = useEventBus();
-  const svgRef = React92.useRef(null);
-  const pointerDownRef = React92.useRef(null);
-  const cellFromClient = React92.useCallback((clientX, clientY) => {
-    const svg = svgRef.current;
-    if (!svg) return null;
-    const rect = svg.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) return null;
-    const vbW = cols * tileSize;
-    const vbH = rows * tileSize;
-    const meet = Math.min(rect.width / vbW, rect.height / vbH);
-    const offsetX = (rect.width - vbW * meet) / 2;
-    const offsetY = (rect.height - vbH * meet) / 2;
-    const svgX = (clientX - rect.left - offsetX) / meet;
-    const svgY = (clientY - rect.top - offsetY) / meet;
-    return {
-      x: Math.min(Math.max(Math.floor(svgX / tileSize), 0), cols - 1),
-      y: Math.min(Math.max(Math.floor(svgY / tileSize), 0), rows - 1)
-    };
-  }, [cols, rows, tileSize]);
-  const handlePointerDown = React92.useCallback((e) => {
-    pointerDownRef.current = { clientX: e.clientX, clientY: e.clientY };
-  }, []);
-  const handlePointerUp = React92.useCallback((e) => {
-    const down = pointerDownRef.current;
-    pointerDownRef.current = null;
-    if (!tileClickEvent) return;
-    if (down && Math.hypot(e.clientX - down.clientX, e.clientY - down.clientY) > 5) return;
-    const cell = cellFromClient(e.clientX, e.clientY);
-    if (cell) eventBus.emit(`UI:${tileClickEvent}`, cell);
-  }, [cellFromClient, tileClickEvent, eventBus]);
-  const handlePointerMove = React92.useCallback((e) => {
-    if (!tileHoverEvent) return;
-    const cell = cellFromClient(e.clientX, e.clientY);
-    if (cell) eventBus.emit(`UI:${tileHoverEvent}`, cell);
-  }, [cellFromClient, tileHoverEvent, eventBus]);
-  const handlePointerLeave = React92.useCallback(() => {
-    pointerDownRef.current = null;
-    if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
-  }, [tileLeaveEvent, eventBus]);
-  React92.useEffect(() => {
-    if (!keyMap && !keyUpMap) return;
-    const onDown = (e) => {
-      const ev = keyMap?.[e.code];
-      if (ev) {
-        eventBus.emit(`UI:${ev}`, {});
-        e.preventDefault();
-      }
-    };
-    const onUp = (e) => {
-      const ev = keyUpMap?.[e.code];
-      if (ev) eventBus.emit(`UI:${ev}`, {});
-    };
-    window.addEventListener("keydown", onDown);
-    window.addEventListener("keyup", onUp);
-    return () => {
-      window.removeEventListener("keydown", onDown);
-      window.removeEventListener("keyup", onUp);
-    };
-  }, [keyMap, keyUpMap, eventBus]);
-  React92.useEffect(() => {
-    if (!keyMap && !keyUpMap) return;
-    svgRef.current?.focus();
-  }, [keyMap, keyUpMap]);
-  const stageContext = React92.useMemo(() => ({ tileSize }), [tileSize]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      ref: svgRef,
-      "data-testid": "svg-stage",
-      viewBox: `0 0 ${cols * tileSize} ${rows * tileSize}`,
-      preserveAspectRatio: "xMidYMid meet",
-      className: cn("block h-full w-full", className),
-      tabIndex: keyMap || keyUpMap ? 0 : void 0,
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerLeave: handlePointerLeave,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: cols * tileSize, height: rows * tileSize, fill: background }),
-        /* @__PURE__ */ jsxRuntime.jsx(SvgStageContext.Provider, { value: stageContext, children })
-      ]
-    }
-  );
-}
-var SvgStageContext;
-var init_SvgStage = __esm({
-  "components/game/molecules/SvgStage.tsx"() {
-    "use client";
-    init_cn();
-    init_useEventBus();
-    SvgStageContext = React92__namespace.createContext({ tileSize: 1 });
-    SvgStage.displayName = "SvgStage";
-  }
-});
-function SvgDrawShape({
-  shape,
-  x,
-  y,
-  width,
-  height,
-  radius,
-  radiusY,
-  points,
-  d,
-  x2,
-  y2,
-  fill,
-  stroke,
-  strokeWidth,
-  opacity,
-  className
-}) {
-  const { tileSize } = React92.useContext(SvgStageContext);
-  const cell = (v) => v === void 0 ? void 0 : v * tileSize;
-  const paint = {
-    fill: fill ?? (stroke === void 0 ? "var(--color-primary)" : "none"),
-    stroke,
-    strokeWidth,
-    opacity,
-    className
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x * tileSize} ${y * tileSize})`, children: [
-    shape === "rect" && /* @__PURE__ */ jsxRuntime.jsx("rect", { width: cell(width), height: cell(height), ...paint }),
-    shape === "circle" && /* @__PURE__ */ jsxRuntime.jsx("circle", { r: cell(radius), ...paint }),
-    shape === "ellipse" && /* @__PURE__ */ jsxRuntime.jsx("ellipse", { rx: cell(radius), ry: cell(radiusY ?? radius), ...paint }),
-    shape === "polygon" && /* @__PURE__ */ jsxRuntime.jsx("polygon", { points, ...paint }),
-    shape === "polyline" && /* @__PURE__ */ jsxRuntime.jsx("polyline", { points, ...paint }),
-    shape === "path" && /* @__PURE__ */ jsxRuntime.jsx("path", { d, ...paint }),
-    shape === "line" && /* @__PURE__ */ jsxRuntime.jsx("line", { x2: cell(x2), y2: cell(y2), ...paint })
-  ] });
-}
-var init_SvgDrawShape = __esm({
-  "components/game/atoms/SvgDrawShape.tsx"() {
-    "use client";
-    init_SvgStage();
-    SvgDrawShape.displayName = "SvgDrawShape";
-  }
-});
-function SvgDrawGroup({
-  x = 0,
-  y = 0,
-  scale,
-  rotate,
-  opacity,
-  className,
-  children
-}) {
-  const { tileSize } = React92.useContext(SvgStageContext);
-  const transforms = [`translate(${x * tileSize} ${y * tileSize})`];
-  if (rotate !== void 0) transforms.push(`rotate(${rotate})`);
-  if (scale !== void 0) transforms.push(`scale(${scale})`);
-  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: transforms.join(" "), opacity, className, children });
-}
-var init_SvgDrawGroup = __esm({
-  "components/game/atoms/SvgDrawGroup.tsx"() {
-    "use client";
-    init_SvgStage();
-    SvgDrawGroup.displayName = "SvgDrawGroup";
-  }
-});
-function SvgDrawText({
-  x,
-  y,
-  text,
-  size = 12,
-  fill = "var(--color-foreground)",
-  anchor = "middle",
-  className
-}) {
-  const { tileSize } = React92.useContext(SvgStageContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "text",
-    {
-      x: x * tileSize,
-      y: y * tileSize,
-      fontSize: size,
-      fill,
-      textAnchor: anchor,
-      className,
-      children: text
-    }
-  );
-}
-var init_SvgDrawText = __esm({
-  "components/game/atoms/SvgDrawText.tsx"() {
-    "use client";
-    init_SvgStage();
-    SvgDrawText.displayName = "SvgDrawText";
-  }
-});
 function ControlGrid({
   kind,
   buttons = DEFAULT_BUTTONS,
@@ -12307,6 +12220,7 @@ function MiniMap({
     const cached = imgCacheRef.current.get(url);
     if (cached) return cached.complete ? cached : null;
     const img = new Image();
+    img.crossOrigin = "anonymous";
     img.src = url;
     img.onload = () => {
       const canvas = canvasRef.current;
@@ -12474,7 +12388,7 @@ function useCamera(initial) {
   const handleWheel = React92.useCallback((e, drawFn) => {
     e.preventDefault();
     const zoomDelta = e.deltaY > 0 ? 0.9 : 1.1;
-    cameraRef.current.zoom = Math.max(0.5, Math.min(3, cameraRef.current.zoom * zoomDelta));
+    cameraRef.current.zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, cameraRef.current.zoom * zoomDelta));
     drawFn?.();
   }, []);
   const handlePointerDown = React92.useCallback((e) => {
@@ -12495,7 +12409,7 @@ function useCamera(initial) {
   const zoomAtPoint = React92.useCallback((factor, centerX, centerY, viewportSize, drawFn) => {
     const cam = cameraRef.current;
     const oldZoom = cam.zoom;
-    const newZoom = Math.max(0.5, Math.min(3, oldZoom * factor));
+    const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, oldZoom * factor));
     if (newZoom === oldZoom) {
       drawFn?.();
       return;
@@ -12547,9 +12461,12 @@ function useCamera(initial) {
     lerpToTarget
   };
 }
+var MIN_ZOOM, MAX_ZOOM;
 var init_useCamera = __esm({
   "hooks/useCamera.ts"() {
     "use client";
+    MIN_ZOOM = 0.05;
+    MAX_ZOOM = 10;
   }
 });
 function localPoint(canvas, clientX, clientY) {
@@ -12670,6 +12587,7 @@ function getOrLoadImage(url, onReady) {
     return null;
   }
   const img = new Image();
+  img.crossOrigin = "anonymous";
   const entry = { img, status: "pending", onReady };
   cache.set(url, entry);
   updateAssetStatus(url, "pending");
@@ -12681,10 +12599,14 @@ function getOrLoadImage(url, onReady) {
   img.onerror = () => {
     entry.status = "failed";
     updateAssetStatus(url, "failed");
+    entry.onReady?.();
   };
   img.src = url;
   return null;
 }
+function getImageStatus(url) {
+  return cache.get(url)?.status;
+}
 var cache;
 var init_imageCache = __esm({
   "lib/imageCache.ts"() {
@@ -12793,6 +12715,15 @@ function createWebPainter(ctx, onAssetLoad) {
       ctx.lineWidth = lineWidth;
       ctx.stroke();
     },
+    fillPath(d, color) {
+      ctx.fillStyle = color;
+      ctx.fill(new Path2D(d));
+    },
+    strokePath(d, color, lineWidth = 1) {
+      ctx.strokeStyle = color;
+      ctx.lineWidth = lineWidth;
+      ctx.stroke(new Path2D(d));
+    },
     text(str, x, y, style) {
       if (style.font) ctx.font = style.font;
       ctx.fillStyle = style.color;
@@ -12814,12 +12745,13 @@ var init_webPainter2d = __esm({
 
 // lib/drawable/projector.ts
 function create2DProjector(opts) {
-  const { scale, baseOffsetX, layout } = opts;
-  const tileWidth = layout === "free" ? 1 : TILE_WIDTH * scale;
-  const floorHeight = layout === "free" ? 1 : FLOOR_HEIGHT * scale;
-  const diamondTopY = layout === "free" ? 0 : (opts.diamondTopY ?? DIAMOND_TOP_Y) * scale;
+  const { baseOffsetX, layout } = opts;
+  const tw = opts.tileWidth ?? TILE_WIDTH;
+  const tileWidth = layout === "free" ? 1 : tw;
+  const floorHeight = layout === "free" ? 1 : tw / 2;
+  const diamondTopY = layout === "free" ? 0 : opts.diamondTopY ?? tw * (DIAMOND_TOP_Y / TILE_WIDTH);
   const squareGrid = layout === "flat" || layout === "free";
-  const project = (pos) => layout === "free" ? { x: pos.x, y: pos.y } : isoToScreen(pos.x, pos.y, scale, baseOffsetX, layout);
+  const project = (pos) => layout === "free" ? { x: pos.x, y: pos.y } : isoToScreen(pos.x, pos.y, tw, baseOffsetX, layout);
   const anchorPoint = (pos, anchor) => {
     const base = project(pos);
     if (anchor === "top-left") return base;
@@ -12850,7 +12782,7 @@ function create2DProjector(opts) {
       { x: base.x, y: topY + floorHeight / 2 }
     ];
   };
-  return { project, anchorPoint, cellPath, tileWidth, floorHeight, diamondTopY, scale, squareGrid };
+  return { project, anchorPoint, cellPath, tileWidth, floorHeight, diamondTopY, squareGrid, worldPixelDirect: layout === "free" };
 }
 var init_projector = __esm({
   "lib/drawable/projector.ts"() {
@@ -12866,32 +12798,67 @@ var init_contract = __esm({
   "lib/drawable/contract.ts"() {
   }
 });
-
-// components/game/atoms/DrawSprite.tsx
+function warnMissingOnce(reason, node) {
+  const key = `${reason}:${node.asset.url}:${String(node.asset.atlas)}:${String(node.asset.sprite)}`;
+  if (loggedMissing.has(key)) return;
+  loggedMissing.add(key);
+  spriteLog.warn("draw-sprite asset unresolvable \u2014 painting fallback square", { reason, url: node.asset.url, atlas: node.asset.atlas, sprite: node.asset.sprite });
+}
+function paintFallbackSquare(painter, node, dctx, reason) {
+  warnMissingOnce(reason, node);
+  const tw = dctx.projector.tileWidth;
+  const natural = dctx.projector.worldPixelDirect ? FALLBACK_WORLD_PX : tw;
+  const w = node.width !== void 0 ? node.width * tw : natural;
+  const h = node.height !== void 0 ? node.height * tw : natural;
+  const anchor = node.anchor ?? "top-left";
+  const p = dctx.projector.anchorPoint(node.position, anchor);
+  const dx = anchor === "top-left" ? p.x : p.x - w / 2;
+  const dy = anchor === "ground" ? p.y - h : anchor === "center" ? p.y - h / 2 : p.y;
+  painter.save();
+  if (node.opacity !== void 0 && node.opacity !== 1) painter.setAlpha(node.opacity);
+  painter.fillRect(dx, dy, w, h, "#9b8f7f");
+  painter.strokeRect(dx, dy, w, h, "#5e564b", Math.max(1, tw / 32));
+  painter.restore();
+}
 function DrawSprite(_props) {
   return null;
 }
-var paintSprite;
+var spriteLog, loggedMissing, FALLBACK_WORLD_PX, paintSprite;
 var init_DrawSprite = __esm({
   "components/game/atoms/DrawSprite.tsx"() {
     "use client";
     init_atlasSlice();
+    init_imageCache();
     init_contract();
+    spriteLog = logger.createLogger("almadar:ui:draw-sprite");
+    loggedMissing = /* @__PURE__ */ new Set();
+    FALLBACK_WORLD_PX = 32;
     paintSprite = (painter, node, dctx) => {
       if (!node.asset?.url || !isValidScenePos(node.position)) return;
       const tex = painter.resolveTexture(node.asset.url);
-      if (!tex) return;
+      if (!tex) {
+        if (getImageStatus(node.asset.url) === "failed") paintFallbackSquare(painter, node, dctx, "texture-failed");
+        return;
+      }
       let src = typeof node.frame === "object" ? node.frame : void 0;
       if (!src && isAtlasAsset(node.asset)) {
         const atlas = getAtlas(node.asset.atlas, dctx.invalidate);
-        if (!atlas) return;
+        if (!atlas) {
+          if (atlasFailed(node.asset.atlas)) paintFallbackSquare(painter, node, dctx, "atlas-failed");
+          return;
+        }
         const r2 = subRectFor(atlas, node.asset.sprite);
-        if (!r2) return;
+        if (!r2) {
+          paintFallbackSquare(painter, node, dctx, "sprite-missing");
+          return;
+        }
         src = { x: r2.sx, y: r2.sy, w: r2.sw, h: r2.sh };
       }
       const tw = dctx.projector.tileWidth;
-      const w = node.width !== void 0 ? node.width * tw : src ? src.w : tex.width;
-      const h = node.height !== void 0 ? node.height * tw : src ? src.h : tex.height;
+      const fallbackW = dctx.projector.worldPixelDirect ? src ? src.w : tex.width : tw;
+      const fallbackH = dctx.projector.worldPixelDirect ? src ? src.h : tex.height : tw;
+      const w = node.width !== void 0 ? node.width * tw : fallbackW;
+      const h = node.height !== void 0 ? node.height * tw : fallbackH;
       const anchor = node.anchor ?? "top-left";
       const p = dctx.projector.anchorPoint(node.position, anchor);
       const dx = anchor === "top-left" ? p.x : p.x - w / 2;
@@ -12968,6 +12935,16 @@ var init_DrawShape = __esm({
           if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
           break;
         }
+        case "path": {
+          if (!node.d) break;
+          const base = dctx.projector.project(node.position);
+          const tw = dctx.projector.tileWidth;
+          painter.translate(base.x, base.y);
+          painter.scale(tw, tw);
+          if (node.fill) painter.fillPath(node.d, node.fill);
+          if (node.stroke) painter.strokePath(node.d, node.stroke, (node.strokeWidth ?? 1) / tw);
+          break;
+        }
       }
       painter.restore();
     };
@@ -13059,6 +13036,19 @@ function paintDrawable(painter, node, dctx) {
     case "draw-text":
       paintText(painter, node, dctx);
       break;
+    case "draw-group": {
+      if (!isValidScenePos(node.position)) break;
+      if (!Array.isArray(node.items)) break;
+      const p = dctx.projector.project(node.position);
+      painter.save();
+      painter.translate(p.x, p.y);
+      if (node.scale !== void 0) painter.scale(node.scale, node.scale);
+      if (node.rotate !== void 0) painter.rotate(node.rotate);
+      if (node.opacity !== void 0 && node.opacity !== 1) painter.setAlpha(node.opacity);
+      for (const item of node.items) paintDrawable(painter, item, dctx);
+      painter.restore();
+      break;
+    }
     case "draw-sprite-layer":
       paintSpriteLayer(painter, node, dctx);
       break;
@@ -13072,6 +13062,7 @@ function paintDrawable(painter, node, dctx) {
 }
 var init_paintDispatch = __esm({
   "lib/drawable/paintDispatch.ts"() {
+    init_contract();
     init_DrawSprite();
     init_DrawShape();
     init_DrawText();
@@ -13089,6 +13080,7 @@ function collectDrawnItems(nodes) {
       case "draw-sprite":
       case "draw-shape":
       case "draw-text":
+      case "draw-group":
         if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id });
         break;
       case "draw-sprite-layer":
@@ -13132,6 +13124,8 @@ function Canvas2D({
   keyUpMap,
   camera = "pan-zoom",
   scale = 0.4,
+  tileWidth,
+  fit = false,
   showMinimap = true,
   followTarget,
   cameraPos,
@@ -13174,9 +13168,32 @@ function Canvas2D({
     observer2.observe(el);
     return () => observer2.disconnect();
   }, []);
-  const scaledTileWidth = TILE_WIDTH * scale;
-  const scaledFloorHeight = FLOOR_HEIGHT * scale;
-  const scaledDiamondTopY = DIAMOND_TOP_Y * scale;
+  const [atlasVersion, setAtlasVersion] = React92.useState(0);
+  const bumpAtlas = React92.useCallback(() => setAtlasVersion((v) => v + 1), []);
+  const detectedTileWidth = React92.useMemo(() => {
+    for (const n of drawables ?? []) {
+      const refs = [];
+      if (n.type === "draw-sprite") refs.push(n.asset);
+      else if (n.type === "draw-sprite-layer") for (const it of n.items) refs.push(it.asset);
+      for (const a of refs) {
+        if (a && isAtlasAsset(a) && a.atlas) {
+          const atlas = getAtlas(a.atlas, bumpAtlas);
+          if (atlas) {
+            if ("tileWidth" in atlas) return atlas.tileWidth;
+            if ("subTextures" in atlas) {
+              const first = Object.values(atlas.subTextures)[0];
+              if (first && typeof first.width === "number") return first.width;
+            }
+          }
+        }
+      }
+    }
+    return void 0;
+  }, [drawables, atlasVersion]);
+  const nativeTileW = tileWidth ?? detectedTileWidth ?? TILE_WIDTH;
+  const scaledTileWidth = nativeTileW;
+  const scaledFloorHeight = nativeTileW / 2;
+  const scaledDiamondTopY = nativeTileW * (DIAMOND_TOP_Y / TILE_WIDTH);
   const drawnItems = React92.useMemo(() => collectDrawnItems(drawables ?? []), [drawables]);
   const scenePositions = React92.useMemo(() => drawnItems.map((i) => i.pos), [drawnItems]);
   const hitIndex = React92.useMemo(() => buildHitIndex(drawnItems), [drawnItems]);
@@ -13194,14 +13211,36 @@ function Canvas2D({
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
   }, [isFree, projection, gridExtent.height, scaledTileWidth]);
+  const effectiveZoom = React92.useMemo(() => {
+    if (isFree || projection === "side") return scale;
+    if (!fit) {
+      const z2 = TILE_WIDTH * scale * scale / nativeTileW;
+      return Number.isFinite(z2) && z2 > 0 ? z2 : scale;
+    }
+    if (!viewportSize.width || gridExtent.width < 2 || gridExtent.height < 2) return scale;
+    let boardW;
+    let boardH;
+    if (projection === "flat") {
+      boardW = gridExtent.width * nativeTileW;
+      boardH = gridExtent.height * nativeTileW;
+    } else if (projection === "hex") {
+      boardW = (gridExtent.width + 0.5) * nativeTileW;
+      boardH = gridExtent.height * (nativeTileW / 2) * 0.75 + nativeTileW / 2;
+    } else {
+      boardW = (gridExtent.width + gridExtent.height) * (nativeTileW / 2);
+      boardH = (gridExtent.width + gridExtent.height) * (nativeTileW / 4);
+    }
+    const z = Math.min(viewportSize.width * 0.85 / boardW, viewportSize.height * 0.85 / boardH);
+    return Number.isFinite(z) && z > 0 ? z : scale;
+  }, [isFree, projection, fit, viewportSize, gridExtent, nativeTileW, scale]);
   const projector = React92.useMemo(
-    () => create2DProjector({ scale, baseOffsetX, layout }),
-    [scale, baseOffsetX, layout]
+    () => create2DProjector({ tileWidth: nativeTileW, baseOffsetX, layout }),
+    [nativeTileW, baseOffsetX, layout]
   );
   const unproject = React92.useCallback((screenX, screenY) => {
     if (projection === "free" || projection === "side") return { x: Math.round(screenX), y: Math.round(screenY) };
-    return screenToIso(screenX, screenY, scale, baseOffsetX, projection);
-  }, [projection, scale, baseOffsetX]);
+    return screenToIso(screenX, screenY, nativeTileW, baseOffsetX, projection);
+  }, [projection, nativeTileW, baseOffsetX]);
   const bgUrls = React92.useMemo(() => backgroundImage ? [backgroundImage.url] : [], [backgroundImage]);
   const { getImage, pendingCount: _imagePendingCount } = useImageCache(bgUrls);
   React92.useEffect(() => {
@@ -13228,9 +13267,7 @@ function Canvas2D({
     zoomAtPoint,
     screenToWorld,
     lerpToTarget
-  } = useCamera({ zoom: scale });
-  const [atlasVersion, setAtlasVersion] = React92.useState(0);
-  const bumpAtlas = React92.useCallback(() => setAtlasVersion((v) => v + 1), []);
+  } = useCamera({ zoom: effectiveZoom });
   const miniMapTiles = React92.useMemo(() => {
     if (!showMinimap) return [];
     const color = MINIMAP_TERRAIN_COLORS.default;
@@ -13305,6 +13342,13 @@ function Canvas2D({
   React92.useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  const userZoomedRef = React92.useRef(false);
+  React92.useEffect(() => {
+    if (userZoomedRef.current) return;
+    if (cameraRef.current.zoom === effectiveZoom) return;
+    cameraRef.current.zoom = effectiveZoom;
+    draw();
+  }, [effectiveZoom, cameraRef, draw]);
   React92.useEffect(() => {
     draw();
   }, [atlasVersion, draw]);
@@ -13361,7 +13405,9 @@ function Canvas2D({
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
   }, [handleMouseLeave, tileLeaveEvent, eventBus]);
   const applyZoom = React92.useCallback((factor, centerX, centerY) => {
-    if (enableCamera) zoomAtPoint(factor, centerX, centerY, viewportSize, () => draw());
+    if (!enableCamera) return;
+    userZoomedRef.current = true;
+    zoomAtPoint(factor, centerX, centerY, viewportSize, () => draw());
   }, [enableCamera, zoomAtPoint, viewportSize, draw]);
   const applyPanDelta = React92.useCallback((dx, dy) => {
     if (enableCamera) panBy(dx, dy, () => draw());
@@ -13546,6 +13592,8 @@ function Canvas({
   isLoading,
   unitScale,
   showMinimap,
+  fit,
+  tileWidth,
   backgroundImage,
   backgroundColor,
   worldWidth,
@@ -13603,6 +13651,8 @@ function Canvas({
       projection,
       camera: to2DCamera(camera?.mode),
       ...zoom !== void 0 ? { scale: zoom } : {},
+      ...fit !== void 0 ? { fit } : {},
+      ...tileWidth !== void 0 ? { tileWidth } : {},
       ...camera?.target !== void 0 ? { followTarget: camera.target } : {},
       ...camera?.pos !== void 0 ? { cameraPos: camera.pos } : {},
       showMinimap,
@@ -13629,32 +13679,6 @@ var init_Canvas = __esm({
     Canvas.displayName = "Canvas";
   }
 });
-function SvgDrawShapeLayer({
-  items,
-  fill,
-  stroke,
-  strokeWidth,
-  opacity
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("g", { children: items.map(({ id, ...shape }) => /* @__PURE__ */ jsxRuntime.jsx(
-    SvgDrawShape,
-    {
-      ...shape,
-      fill: shape.fill ?? fill,
-      stroke: shape.stroke ?? stroke,
-      strokeWidth: shape.strokeWidth ?? strokeWidth,
-      opacity: shape.opacity ?? opacity
-    },
-    id
-  )) });
-}
-var init_SvgDrawShapeLayer = __esm({
-  "components/game/molecules/SvgDrawShapeLayer.tsx"() {
-    "use client";
-    init_SvgDrawShape();
-    SvgDrawShapeLayer.displayName = "SvgDrawShapeLayer";
-  }
-});
 function GameAudioToggle({
   size = "sm",
   className,
@@ -26144,6 +26168,8 @@ function DataList({
   hasMore,
   children,
   pageSize = 5,
+  sortBy,
+  sortDirection,
   renderItem: schemaRenderItem,
   dragGroup,
   accepts,
@@ -26172,7 +26198,11 @@ function DataList({
     dndItemIdField,
     dndRoot
   });
-  const allData = dnd.orderedItems;
+  const orderedData = dnd.orderedItems;
+  const allData = React92__namespace.default.useMemo(
+    () => sortRows(orderedData, sortBy, sortDirection),
+    [orderedData, sortBy, sortDirection]
+  );
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
   const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
   const hasRenderProp = typeof children === "function";
@@ -26209,7 +26239,7 @@ function DataList({
     };
     eventBus.emit(`UI:${action.event}`, payload);
   };
-  const renderItemActions = (itemData) => {
+  const renderItemActions = (itemData, onPrimary = false) => {
     if (!itemActions || itemActions.length === 0) return null;
     const inline = maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions;
     const overflow = maxInlineActions != null ? itemActions.slice(maxInlineActions) : [];
@@ -26222,7 +26252,12 @@ function DataList({
           onClick: handleActionClick(action, itemData),
           "data-testid": `action-${action.event}`,
           "data-row-id": String(itemData.id),
-          className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
+          className: cn(
+            action.variant === "danger" && "text-error hover:bg-error/10",
+            // Must sit on the Button itself: the variant's own text colour
+            // beats an inherited one from the row wrapper.
+            onPrimary && "!text-primary-foreground hover:bg-primary-foreground/15"
+          ),
           children: [
             action.icon && renderIconInput2(action.icon, { size: "xs", className: "mr-1" }),
             action.label
@@ -26322,7 +26357,11 @@ function DataList({
                     metaFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "mt-1 flex-wrap", children: metaFields.map((f3) => {
                       const v = getNestedValue(itemData, f3.name);
                       if (v === void 0 || v === null || v === "") return null;
-                      return f3.variant === "badge" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant3(String(v)), children: String(v) }, f3.name) : /* @__PURE__ */ jsxRuntime.jsx(
+                      return f3.variant === "badge" ? (
+                        // `format` applies here too — a boolean field badged
+                        // without it renders the raw "false" instead of "No".
+                        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant3(String(v)), children: formatValue2(v, f3.format) }, f3.name)
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
                         Typography,
                         {
                           variant: "caption",
@@ -26341,7 +26380,7 @@ function DataList({
                           children: formatDate(timestamp)
                         }
                       ) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-                      renderItemActions(itemData)
+                      renderItemActions(itemData, isSent)
                     ] })
                   ]
                 }
@@ -26434,7 +26473,7 @@ function DataList({
                     if (val === void 0 || val === null) return null;
                     return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center flex-shrink-0", children: [
                       field.icon && renderIconInput2(field.icon, { size: "xs" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant3(String(val)), children: String(val) })
+                      /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant3(String(val)), children: formatValue2(val, field.format) })
                     ] }, field.name);
                   })
                 ] }),
@@ -26673,6 +26712,182 @@ var init_FormSection = __esm({
     FormActions.displayName = "FormActions";
   }
 });
+var ALL_CATEGORY, MAX_RENDERED, GridPicker;
+var init_GridPicker = __esm({
+  "components/core/molecules/GridPicker.tsx"() {
+    "use client";
+    init_cn();
+    init_Input();
+    init_Badge();
+    init_Stack();
+    ALL_CATEGORY = "__all__";
+    MAX_RENDERED = 300;
+    GridPicker = ({
+      items,
+      value,
+      onChange,
+      categories,
+      searchPlaceholder,
+      renderThumbnail,
+      cellSize = 32,
+      className
+    }) => {
+      const [search, setSearch] = React92.useState("");
+      const [activeCategory, setActiveCategory] = React92.useState(ALL_CATEGORY);
+      const gridRef = React92.useRef(null);
+      const categoryChips = React92.useMemo(() => {
+        if (categories !== void 0) return categories;
+        const seen = [];
+        for (const item of items) {
+          if (!seen.includes(item.category)) seen.push(item.category);
+        }
+        return seen;
+      }, [categories, items]);
+      const filtered = React92.useMemo(() => {
+        const needle = search.trim().toLowerCase();
+        return items.filter((item) => {
+          const matchesCategory = activeCategory === ALL_CATEGORY || item.category === activeCategory;
+          const matchesSearch = needle === "" || item.label.toLowerCase().includes(needle) || item.keywords !== void 0 && item.keywords.some((k) => k.toLowerCase().includes(needle));
+          return matchesCategory && matchesSearch;
+        });
+      }, [items, search, activeCategory]);
+      const visible = React92.useMemo(() => filtered.slice(0, MAX_RENDERED), [filtered]);
+      const truncated = filtered.length - visible.length;
+      const select = React92.useCallback(
+        (item) => {
+          onChange(item.id);
+        },
+        [onChange]
+      );
+      const handleKeyDown = React92.useCallback(
+        (e, index) => {
+          const cells = gridRef.current?.querySelectorAll(
+            "[data-gridpicker-cell]"
+          );
+          if (cells === void 0 || cells.length === 0) return;
+          const columns = (() => {
+            const grid = gridRef.current;
+            if (grid === null) return 1;
+            const style = window.getComputedStyle(grid);
+            const cols = style.gridTemplateColumns.split(" ").filter(Boolean).length;
+            return cols > 0 ? cols : 1;
+          })();
+          let next = -1;
+          if (e.key === "ArrowRight") next = index + 1;
+          else if (e.key === "ArrowLeft") next = index - 1;
+          else if (e.key === "ArrowDown") next = index + columns;
+          else if (e.key === "ArrowUp") next = index - columns;
+          else if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            select(filtered[index]);
+            return;
+          } else {
+            return;
+          }
+          e.preventDefault();
+          if (next >= 0 && next < cells.length) {
+            cells[next].focus();
+          }
+        },
+        [filtered, select]
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: cn("w-full", className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            type: "search",
+            icon: "search",
+            value: search,
+            placeholder: searchPlaceholder,
+            clearable: true,
+            onClear: () => setSearch(""),
+            onChange: (e) => setSearch(e.target.value)
+          }
+        ),
+        categoryChips.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", wrap: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Badge,
+            {
+              variant: activeCategory === ALL_CATEGORY ? "primary" : "neutral",
+              size: "sm",
+              role: "button",
+              tabIndex: 0,
+              "aria-pressed": activeCategory === ALL_CATEGORY,
+              className: "cursor-pointer",
+              onClick: () => setActiveCategory(ALL_CATEGORY),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setActiveCategory(ALL_CATEGORY);
+                }
+              },
+              children: "All"
+            }
+          ),
+          categoryChips.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+            Badge,
+            {
+              variant: activeCategory === category ? "primary" : "neutral",
+              size: "sm",
+              role: "button",
+              tabIndex: 0,
+              "aria-pressed": activeCategory === category,
+              className: "cursor-pointer",
+              onClick: () => setActiveCategory(category),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setActiveCategory(category);
+                }
+              },
+              children: category
+            },
+            category
+          ))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: gridRef,
+            role: "listbox",
+            className: "grid gap-1 overflow-y-auto max-h-64 p-1",
+            style: {
+              gridTemplateColumns: `repeat(auto-fill, minmax(${cellSize}px, 1fr))`
+            },
+            children: visible.map((item, index) => {
+              const selected = item.id === value;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": selected,
+                  "aria-label": item.label,
+                  title: item.label,
+                  "data-gridpicker-cell": true,
+                  tabIndex: selected || value === void 0 && index === 0 ? 0 : -1,
+                  onClick: () => select(item),
+                  onKeyDown: (e) => handleKeyDown(e, index),
+                  className: cn(
+                    "flex items-center justify-center rounded-sm",
+                    "transition-colors hover:bg-muted",
+                    "focus:outline-none focus:ring-1 focus:ring-ring",
+                    selected && "bg-primary/10 ring-1 ring-primary"
+                  ),
+                  style: { width: cellSize, height: cellSize },
+                  children: renderThumbnail(item)
+                },
+                item.id
+              );
+            })
+          }
+        ),
+        truncated > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1 text-xs text-muted-foreground", children: `+${truncated} more \u2014 refine your search` })
+      ] });
+    };
+    GridPicker.displayName = "GridPicker";
+  }
+});
 function fileIcon(name) {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
   switch (ext) {
@@ -27701,9 +27916,16 @@ var init_Popover = __esm({
       position = "bottom",
       trigger = "click",
       showArrow = true,
+      open,
+      onOpenChange,
       className
     }) => {
-      const [isOpen, setIsOpen] = React92.useState(false);
+      const [uncontrolledOpen, setUncontrolledOpen] = React92.useState(false);
+      const isOpen = open !== void 0 ? open : uncontrolledOpen;
+      const setIsOpen = (next) => {
+        if (open === void 0) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      };
       const [triggerRect, setTriggerRect] = React92.useState(null);
       const [popoverWidth, setPopoverWidth] = React92.useState(0);
       const triggerRef = React92.useRef(null);
@@ -27736,6 +27958,23 @@ var init_Popover = __esm({
           updatePosition();
         }
       }, [isOpen]);
+      React92.useEffect(() => {
+        if (!isOpen) return;
+        let raf = 0;
+        let lastTop = Number.NaN;
+        let lastLeft = Number.NaN;
+        const track = () => {
+          const rect = triggerRef.current?.getBoundingClientRect();
+          if (rect && (rect.top !== lastTop || rect.left !== lastLeft)) {
+            lastTop = rect.top;
+            lastLeft = rect.left;
+            updatePosition();
+          }
+          raf = requestAnimationFrame(track);
+        };
+        raf = requestAnimationFrame(track);
+        return () => cancelAnimationFrame(raf);
+      }, [isOpen]);
       React92.useEffect(() => {
         if (!mounted) setPopoverWidth(0);
       }, [mounted]);
@@ -29084,6 +29323,80 @@ var init_FlipCard = __esm({
     FlipCard.displayName = "FlipCard";
   }
 });
+var EMOJI_ITEMS, EmojiPicker;
+var init_EmojiPicker = __esm({
+  "components/core/molecules/EmojiPicker.tsx"() {
+    "use client";
+    init_useEventBus();
+    init_Button();
+    init_GridPicker();
+    init_Popover();
+    EMOJI_ITEMS = (() => {
+      const items = [];
+      for (const name of emojilib.ordered) {
+        const entry = emojilib.lib[name];
+        if (entry === void 0 || entry.char === null || entry.char === "") continue;
+        items.push({
+          id: entry.char,
+          label: name.replace(/_/g, " "),
+          category: entry.category.replace(/_/g, " "),
+          keywords: entry.keywords
+        });
+      }
+      return items;
+    })();
+    EmojiPicker = ({
+      pickEvent,
+      position = "top",
+      triggerIcon = "smile",
+      triggerLabel = "Add emoji",
+      className
+    }) => {
+      const eventBus = useEventBus();
+      const [open, setOpen] = React92.useState(false);
+      const handlePick = (glyph) => {
+        if (pickEvent !== void 0) {
+          const payload = { emoji: glyph };
+          eventBus.emit(`UI:${pickEvent}`, payload);
+        }
+        setOpen(false);
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Popover,
+        {
+          position,
+          trigger: "click",
+          showArrow: false,
+          open,
+          onOpenChange: setOpen,
+          content: /* @__PURE__ */ jsxRuntime.jsx(
+            GridPicker,
+            {
+              items: EMOJI_ITEMS,
+              onChange: handlePick,
+              searchPlaceholder: "Search emoji\u2026",
+              renderThumbnail: (item) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl leading-none", "aria-hidden": "true", children: item.id }),
+              cellSize: 32,
+              className: "w-80"
+            }
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              icon: triggerIcon,
+              "aria-label": triggerLabel,
+              title: triggerLabel,
+              className,
+              "data-testid": "emoji-picker-trigger"
+            }
+          )
+        }
+      );
+    };
+    EmojiPicker.displayName = "EmojiPicker";
+  }
+});
 function toISODate(d) {
   return d.toISOString().slice(0, 10);
 }
@@ -30036,13 +30349,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect64, useRef: useRef63, useCallback: useCallback95, useState: useState97 } = React92__namespace.default;
+      const { useEffect: useEffect63, useRef: useRef63, useCallback: useCallback95, useState: useState99 } = React92__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef63({ centerLat, centerLng, zoom });
-        useEffect64(() => {
+        useEffect63(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -30053,7 +30366,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect64(() => {
+        useEffect63(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -30081,7 +30394,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState97(null);
+        const [clickedPosition, setClickedPosition] = useState99(null);
         const handleMapClick = useCallback95((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -30926,6 +31239,7 @@ function TableView({
   fields,
   itemActions,
   maxInlineActions,
+  itemClickEvent,
   selectable = false,
   selectEvent,
   selectedIds,
@@ -30970,9 +31284,9 @@ function TableView({
     dndItemIdField,
     dndRoot
   });
-  const ordered = dnd.orderedItems;
-  const data = pageSize > 0 ? ordered.slice(0, visibleCount) : ordered;
-  const hasMore = pageSize > 0 && visibleCount < ordered.length;
+  const ordered2 = dnd.orderedItems;
+  const data = pageSize > 0 ? ordered2.slice(0, visibleCount) : ordered2;
+  const hasMore = pageSize > 0 && visibleCount < ordered2.length;
   const hasRenderProp = typeof children === "function";
   const idField = dndItemIdField ?? "id";
   const isCoarsePointer = useMediaQuery("(pointer: coarse)");
@@ -31025,6 +31339,14 @@ function TableView({
     };
     eventBus.emit(`UI:${action.event}`, payload);
   };
+  const handleRowClick = (row) => () => {
+    if (!itemClickEvent) return;
+    const payload = {
+      id: row.id,
+      row
+    };
+    eventBus.emit(`UI:${itemClickEvent}`, payload);
+  };
   const colFloors = React92__namespace.default.useMemo(
     () => colDefs.map((col) => {
       const longest = data.reduce((widest, row) => {
@@ -31101,10 +31423,12 @@ function TableView({
         role: "row",
         "data-entity-row": true,
         "data-entity-id": id,
+        onClick: itemClickEvent ? handleRowClick(row) : void 0,
         style: !hasRenderProp ? { gridTemplateColumns } : void 0,
         className: cn(
           "group items-center gap-3 transition-colors duration-fast",
           hasRenderProp ? "flex" : "grid",
+          itemClickEvent && "cursor-pointer",
           lk.rowPad,
           lk.divider && "border-b border-[var(--color-border)]",
           lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
@@ -31112,7 +31436,7 @@ function TableView({
           look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center", onClick: itemClickEvent ? (e) => e.stopPropagation() : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
             Checkbox,
             {
               checked: selected.has(id),
@@ -31137,6 +31461,7 @@ function TableView({
             HStack,
             {
               gap: "xs",
+              onClick: itemClickEvent ? (e) => e.stopPropagation() : void 0,
               className: cn(
                 // Pinned: the fixed column tracks routinely overflow the caller's
                 // scroll container, which used to leave the actions off-screen.
@@ -31206,7 +31531,7 @@ function TableView({
           /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-down", size: "xs", className: "mr-1" }),
           t("common.showMore"),
           " (",
-          t("common.remaining", { count: ordered.length - visibleCount }),
+          t("common.remaining", { count: ordered2.length - visibleCount }),
           ")"
         ] }) })
       ]
@@ -40236,6 +40561,16 @@ var init_DetailPanel = __esm({
     DetailPanel.displayName = "DetailPanel";
   }
 });
+
+// components/game/atoms/DrawGroup.tsx
+function DrawGroup(_props) {
+  return null;
+}
+var init_DrawGroup = __esm({
+  "components/game/atoms/DrawGroup.tsx"() {
+    "use client";
+  }
+});
 function extractTitle(children) {
   if (!React92__namespace.default.isValidElement(children)) return void 0;
   const props = children.props;
@@ -45958,6 +46293,7 @@ var init_component_registry_generated = __esm({
     init_DocSidebar();
     init_DocTOC();
     init_DocumentViewer();
+    init_DrawGroup();
     init_DrawShape();
     init_DrawShapeLayer();
     init_DrawSprite();
@@ -45967,6 +46303,7 @@ var init_component_registry_generated = __esm({
     init_Drawer();
     init_DrawerSlot();
     init_EdgeDecoration();
+    init_EmojiPicker();
     init_EmptyState();
     init_ErrorBoundary();
     init_ErrorState();
@@ -46101,10 +46438,6 @@ var init_component_registry_generated = __esm({
     init_SubagentTracePanel();
     init_SvgBranch();
     init_SvgConnection();
-    init_SvgDrawGroup();
-    init_SvgDrawShape();
-    init_SvgDrawShapeLayer();
-    init_SvgDrawText();
     init_SvgFlow();
     init_SvgGrid();
     init_SvgLobe();
@@ -46115,7 +46448,6 @@ var init_component_registry_generated = __esm({
     init_SvgRing();
     init_SvgShield();
     init_SvgStack();
-    init_SvgStage();
     init_SwipeableRow();
     init_Switch();
     init_TabbedContainer();
@@ -46229,6 +46561,7 @@ var init_component_registry_generated = __esm({
       "DocSidebar": DocSidebar,
       "DocTOC": DocTOC,
       "DocumentViewer": DocumentViewer,
+      "DrawGroup": DrawGroup,
       "DrawShape": DrawShape,
       "DrawShapeLayer": DrawShapeLayer,
       "DrawSprite": DrawSprite,
@@ -46238,6 +46571,7 @@ var init_component_registry_generated = __esm({
       "Drawer": Drawer,
       "DrawerSlot": DrawerSlot,
       "EdgeDecoration": EdgeDecoration,
+      "EmojiPicker": EmojiPicker,
       "EmptyState": EmptyState,
       "ErrorBoundary": ErrorBoundary,
       "ErrorState": ErrorState,
@@ -46377,10 +46711,6 @@ var init_component_registry_generated = __esm({
       "SubagentTracePanel": SubagentTracePanel,
       "SvgBranch": SvgBranch,
       "SvgConnection": SvgConnection,
-      "SvgDrawGroup": SvgDrawGroup,
-      "SvgDrawShape": SvgDrawShape,
-      "SvgDrawShapeLayer": SvgDrawShapeLayer,
-      "SvgDrawText": SvgDrawText,
       "SvgFlow": SvgFlow,
       "SvgGrid": SvgGrid,
       "SvgLobe": SvgLobe,
@@ -46391,7 +46721,6 @@ var init_component_registry_generated = __esm({
       "SvgRing": SvgRing,
       "SvgShield": SvgShield,
       "SvgStack": SvgStack,
-      "SvgStage": SvgStage,
       "SwipeableRow": SwipeableRow,
       "Switch": Switch,
       "TabbedContainer": TabbedContainer,
@@ -46670,7 +46999,19 @@ function UISlotComponent({
   const suspenseConfig = React92.useContext(SuspenseConfigContext);
   const contained = React92.useContext(SlotContainedContext);
   const schemaCtx = providers.useEntitySchemaOptional();
-  const content = slots[slot];
+  const rawContent = slots[slot];
+  const binding = providers.useEntityBindingSnapshot(rawContent?.sourceTrait);
+  const content = React92.useMemo(() => {
+    if (!rawContent) return rawContent;
+    const resolvedProps = resolveRenderBindingMarkers(
+      rawContent.props,
+      rawContent.sourceTrait,
+      binding.entity,
+      binding.config,
+      binding.state
+    );
+    return resolvedProps === rawContent.props ? rawContent : { ...rawContent, props: resolvedProps };
+  }, [rawContent, binding.entity, binding.config, binding.state]);
   if (children !== void 0) {
     if (pattern === "clear") {
       return null;
@@ -47014,6 +47355,7 @@ function isPlainConfigObject(value) {
   return proto === Object.prototype || proto === null;
 }
 function substituteTraitRefsDeep(value, pathKey) {
+  if (core.isRenderBindingMarker(value)) return value;
   if (typeof value === "string") {
     const match = TRAIT_BINDING_RE.exec(value);
     if (match) {
@@ -47086,7 +47428,14 @@ function SlotContentRenderer({
   onDismiss,
   patternPath
 }) {
-  const entityProp = content.props.entity;
+  const ambientScope = providers.useTraitScope();
+  const bindingTrait = content.sourceTrait ?? ambientScope?.trait;
+  const binding = providers.useEntityBindingSnapshot(bindingTrait);
+  const liveProps = React92.useMemo(
+    () => resolveRenderBindingMarkers(content.props, bindingTrait, binding.entity, binding.config, binding.state),
+    [content.props, bindingTrait, binding.entity, binding.config, binding.state]
+  );
+  const entityProp = liveProps.entity;
   if (content.pattern === "form-section") {
     slotLog.debug("SlotContentRenderer:form-section-render", {
       contentId: content.id,
@@ -47117,7 +47466,7 @@ function SlotContentRenderer({
   const orbitalName = schemaCtx && content.sourceTrait !== void 0 ? schemaCtx.orbitalsByTrait.get(content.sourceTrait) : void 0;
   const PatternComponent = getComponentForPattern(content.pattern);
   if (PatternComponent) {
-    const childrenConfig = content.props.children;
+    const childrenConfig = liveProps.children;
     const isSingleChild = typeof childrenConfig === "string" || typeof childrenConfig === "object" && childrenConfig !== null && !Array.isArray(childrenConfig) && "type" in childrenConfig;
     const hasChildren = PATTERNS_WITH_CHILDREN.has(content.pattern) || Array.isArray(childrenConfig) && childrenConfig.length > 0 || isSingleChild;
     const isDrawHost = patterns.isDrawHostPattern(content.pattern);
@@ -47128,9 +47477,9 @@ function SlotContentRenderer({
       fromState: content.fromState,
       entity: content.entity
     }) : void 0;
-    const incomingChildren = content.props.children;
+    const incomingChildren = liveProps.children;
     const childrenIsRenderFn = typeof incomingChildren === "function";
-    const { children: _childrenConfig, ...restPropsNoChildren } = content.props;
+    const { children: _childrenConfig, ...restPropsNoChildren } = liveProps;
     const restProps = childrenIsRenderFn ? { ...restPropsNoChildren, children: incomingChildren } : restPropsNoChildren;
     const nodeSlotOverrides = {};
     for (const slotKey of CONTENT_NODE_SLOTS) {
@@ -47239,7 +47588,7 @@ function SlotContentRenderer({
       "data-orb-path": patternPath ?? "root",
       "data-orb-pattern": content.pattern,
       "data-orb-orbital": orbitalName,
-      children: content.props.children ?? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "p-4 text-sm text-muted-foreground border border-dashed border-border rounded", children: [
+      children: liveProps.children ?? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "p-4 text-sm text-muted-foreground border border-dashed border-border rounded", children: [
         "Unknown pattern: ",
         content.pattern,
         content.sourceTrait && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "ml-2", children: [
@@ -47311,6 +47660,7 @@ var scopeWrapLog, TRAIT_BINDING_RE, SuspenseConfigContext, SlotContainedContext,
 var init_UISlotRenderer = __esm({
   "components/core/organisms/UISlotRenderer.tsx"() {
     "use client";
+    init_resolve_render_bindings();
     init_Modal();
     init_Drawer();
     init_Toast();
@@ -50812,6 +51162,9 @@ function resolveLambdaBindings(body, params, item, index) {
     const arr = body;
     const substituted = arr.map((b) => recur(b));
     if (isOperatorCall(substituted) && core.isSExpr(substituted)) {
+      if (core.containsEntityBinding(substituted)) {
+        return substituted;
+      }
       const evaluated = evaluator.evaluate(substituted, evaluator.createMinimalContext());
       return core.isEventPayloadValue(evaluated) ? evaluated : String(evaluated);
     }
@@ -50833,9 +51186,37 @@ function getSlotContentRenderer2() {
   _slotContentRenderer2 = mod.SlotContentRenderer;
   return _slotContentRenderer2;
 }
+function deferLambdaEntityExprs(value) {
+  if (typeof value === "string") {
+    if (core.containsEntityBinding(value)) {
+      const marker = { [core.RENDER_BINDING_MARKER]: true, expression: value };
+      return marker;
+    }
+    return value;
+  }
+  if (Array.isArray(value)) {
+    if (isFnFormLambda(value)) return value;
+    const arr = value;
+    if (isOperatorCall(arr) && core.isSExpr(arr) && core.containsEntityBinding(arr)) {
+      const marker = { [core.RENDER_BINDING_MARKER]: true, expression: arr };
+      return marker;
+    }
+    return arr.map((v) => deferLambdaEntityExprs(v));
+  }
+  if (value !== null && typeof value === "object" && !React92__namespace.default.isValidElement(value) && !(value instanceof Date) && typeof value !== "function" && !core.isRenderBindingMarker(value)) {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+      out[k] = deferLambdaEntityExprs(v);
+    }
+    return out;
+  }
+  return value;
+}
 function makeLambdaFn(params, lambdaBody, callerKey) {
   return (item, index) => {
-    const resolvedBody = resolveLambdaBindings(lambdaBody, params, item, index);
+    const resolvedBody = deferLambdaEntityExprs(
+      resolveLambdaBindings(lambdaBody, params, item, index)
+    );
     if (resolvedBody === null || typeof resolvedBody !== "object" || Array.isArray(resolvedBody) || typeof resolvedBody === "function" || React92__namespace.default.isValidElement(resolvedBody) || resolvedBody instanceof Date) {
       return null;
     }
@@ -50860,6 +51241,7 @@ function makeLambdaFn(params, lambdaBody, callerKey) {
 }
 function convertNode(node, callerKey) {
   if (node === null || node === void 0) return node;
+  if (core.isRenderBindingMarker(node)) return node;
   if (Array.isArray(node)) {
     if (isFnFormLambda(node)) {
       const arr2 = node;
@@ -51033,6 +51415,7 @@ var tickLog = logger.createLogger("almadar:ui:tick-effects");
 logger.setNamespaceLevel("almadar:ui:tick-effects", "WARN");
 var sharedEntityLog = logger.createLogger("almadar:ui:shared-entity");
 logger.setNamespaceLevel("almadar:ui:shared-entity", "WARN");
+var EMPTY_BINDING_SNAPSHOT = {};
 var SYNC_TICK_OPERATORS = /* @__PURE__ */ new Set([
   "set",
   "emit",
@@ -51053,11 +51436,6 @@ var SYNC_TICK_OPERATORS = /* @__PURE__ */ new Set([
   "do",
   "when"
 ]);
-var REACTIVE_REPAINT_PATTERN_TYPES = /* @__PURE__ */ new Set([
-  "canvas",
-  "game-hud",
-  "game-shell"
-]);
 var LIFECYCLE_EVENTS = ["INIT", "LOAD", "$MOUNT"];
 function toTraitDefinition(binding) {
   return {
@@ -51098,6 +51476,27 @@ function classifySharedTick(tick) {
   if (renders) return "renderer";
   return "neither";
 }
+function buildTraitRenderConfig(binding, traitConfigsByName, payload) {
+  const declaredDefaults = runtime.collectDeclaredConfigDefaults(binding.trait);
+  const resolvedDefaults = traitConfigsByName?.[binding.trait.name];
+  const callSiteConfig = getBindingConfig(binding);
+  const callSiteOverrides = callSiteConfig ? runtime.resolveCallSitePayloadCaptures(
+    Object.fromEntries(
+      Object.entries(callSiteConfig).filter(
+        ([, v]) => !containsConfigForward(v)
+      )
+    ),
+    payload
+  ) : void 0;
+  if (declaredDefaults || resolvedDefaults || callSiteOverrides) {
+    return {
+      ...declaredDefaults ?? {},
+      ...resolvedDefaults ?? {},
+      ...callSiteOverrides ?? {}
+    };
+  }
+  return void 0;
+}
 function createSharedEntityWriter(binding, tick, traitStatesRef, emit) {
   return (scratch) => {
     const traitName = binding.trait.name;
@@ -51318,8 +51717,24 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
   }, [traitStates]);
   const traitSnapshotDataRef = React92.useRef(/* @__PURE__ */ new Map());
   const traitFieldStatesRef = React92.useRef(/* @__PURE__ */ new Map());
-  const lastCanvasRenderUiRef = React92.useRef(/* @__PURE__ */ new Map());
-  const executeTransitionEffectsRef = React92.useRef(null);
+  const bridgeEchoPendingRef = React92.useRef(/* @__PURE__ */ new Map());
+  const bindingSnapshotsRef = React92.useRef(/* @__PURE__ */ new Map());
+  const bindingListenersRef = React92.useRef(/* @__PURE__ */ new Map());
+  const publishBindingSnapshot = React92.useCallback((traitName, row) => {
+    bindingSnapshotsRef.current.set(traitName, { ...row });
+    const listeners7 = bindingListenersRef.current.get(traitName);
+    if (!listeners7) return;
+    listeners7.forEach((callback) => {
+      try {
+        callback();
+      } catch (error) {
+        stateLog.error("binding-snapshot listener error", {
+          traitName,
+          error: error instanceof Error ? error.message : String(error)
+        });
+      }
+    });
+  }, []);
   React92.useEffect(() => {
     const mgr = managerRef.current;
     const bindings = traitBindingsRef.current;
@@ -51447,15 +51862,6 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           const existing = pendingSlots.get(slot) || [];
           existing.push({ pattern, props: props || {} });
           pendingSlots.set(slot, existing);
-          const patternType = pattern?.type;
-          if (patternType !== void 0 && REACTIVE_REPAINT_PATTERN_TYPES.has(patternType)) {
-            const rawForSlot = effects.filter(
-              (e) => Array.isArray(e) && (e[0] === "render-ui" || e[0] === "render") && e[1] === slot
-            );
-            if (rawForSlot.length > 0) {
-              lastCanvasRenderUiRef.current.set(traitName, rawForSlot);
-            }
-          }
         },
         clearSlot: (slot) => {
           pendingSlots.set(slot, []);
@@ -51527,11 +51933,13 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       };
     }
     const sharedWrites = [];
+    let didWrite = false;
     const baseSet = handlers.set;
     handlers = {
       ...handlers,
       set: async (targetId, field, value) => {
         if (baseSet) await baseSet(targetId, field, value);
+        didWrite = true;
         if (sharedKey !== void 0) {
           sharedWrites.push({ field, value });
         }
@@ -51548,23 +51956,9 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       payload: payload || {},
       state: previousState
     };
-    const declaredDefaults = runtime.collectDeclaredConfigDefaults(binding.trait);
-    const resolvedDefaults = traitConfigsByName?.[traitName];
-    const callSiteConfig = getBindingConfig(binding);
-    const callSiteOverrides = callSiteConfig ? runtime.resolveCallSitePayloadCaptures(
-      Object.fromEntries(
-        Object.entries(callSiteConfig).filter(
-          ([, v]) => !containsConfigForward(v)
-        )
-      ),
-      payload || {}
-    ) : void 0;
-    if (declaredDefaults || resolvedDefaults || callSiteOverrides) {
-      bindingCtx.config = {
-        ...declaredDefaults ?? {},
-        ...resolvedDefaults ?? {},
-        ...callSiteOverrides ?? {}
-      };
+    const renderConfig = buildTraitRenderConfig(binding, traitConfigsByName, payload || {});
+    if (renderConfig !== void 0) {
+      bindingCtx.config = renderConfig;
     }
     if (traitName === "Authority" || traitName === "Hero") {
       sharedEntityLog.debug("executeTransitionEffects config tiles", {
@@ -51598,7 +51992,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         effectHeads: effects.map((e) => Array.isArray(e) ? String(e[0]) : "??")
       });
     }
-    const executor = new runtime.EffectExecutor({ handlers: trackingHandlers, bindings: bindingCtx, context: effectContext });
+    const executor = new runtime.EffectExecutor({ handlers: trackingHandlers, bindings: bindingCtx, context: effectContext, deferRenderBindings: true });
     try {
       await executor.executeAll(effects);
       if (traitName === "Authority" || traitName === "Hero") {
@@ -51639,37 +52033,8 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           entity: binding.linkedEntity
         });
       }
-      if (pendingSlots.size === 0 && effectsCallOp(effects, SHARED_ENTITY_WRITE_OPS)) {
-        const stashed = lastCanvasRenderUiRef.current.get(traitName);
-        if (stashed !== void 0 && stashed.length > 0) {
-          await executor.executeAll(stashed);
-          for (const [slot, patterns] of pendingSlots) {
-            flushSlot(traitName, slot, patterns, {
-              event: flushEvent,
-              state: previousState,
-              entity: binding.linkedEntity
-            });
-          }
-        }
-        if (sharedKey !== void 0 && executeTransitionEffectsRef.current !== null) {
-          for (const sibling of traitBindingsRef.current) {
-            const siblingName = sibling.trait.name;
-            if (siblingName === traitName) continue;
-            if (sharedKeyByTraitNameRef.current.get(siblingName) !== sharedKey) continue;
-            const siblingStash = lastCanvasRenderUiRef.current.get(siblingName);
-            if (siblingStash === void 0 || siblingStash.length === 0) continue;
-            const siblingState = traitStatesRef.current.get(siblingName)?.currentState ?? "";
-            await executeTransitionEffectsRef.current({
-              binding: sibling,
-              effects: siblingStash,
-              previousState: siblingState,
-              newState: siblingState,
-              flushEvent: `${flushEvent}:repaint`,
-              syncOnly,
-              log: log11
-            });
-          }
-        }
+      if (didWrite && sharedKey === void 0) {
+        publishBindingSnapshot(traitName, liveEntity);
       }
     } catch (error) {
       log11.error("effects:error", {
@@ -51681,10 +52046,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       });
     }
     return emittedDuringExec;
-  }, [eventBus, flushSlot, sharedEntityStore]);
-  React92.useEffect(() => {
-    executeTransitionEffectsRef.current = executeTransitionEffects;
-  }, [executeTransitionEffects]);
+  }, [eventBus, flushSlot, sharedEntityStore, publishBindingSnapshot]);
   const runTickEffects = React92.useCallback((tick, binding) => {
     const traitName = binding.trait.name;
     const currentState = traitStatesRef.current.get(traitName)?.currentState ?? "";
@@ -51747,24 +52109,6 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
             ({ binding, tick }) => createSharedEntityWriter(binding, tick, traitStatesRef, emitFromSharedWriter)
           );
           runTickFrame(group.storeKey, writers, sharedEntityStore);
-          const repaint = executeTransitionEffectsRef.current;
-          if (repaint !== null) {
-            for (const renderBinding of group.renderBindings) {
-              const renderTraitName = renderBinding.trait.name;
-              const stash = lastCanvasRenderUiRef.current.get(renderTraitName);
-              if (stash === void 0 || stash.length === 0) continue;
-              const renderState = traitStatesRef.current.get(renderTraitName)?.currentState ?? "";
-              void repaint({
-                binding: renderBinding,
-                effects: stash,
-                previousState: renderState,
-                newState: renderState,
-                flushEvent: "tick:repaint",
-                syncOnly: true,
-                log: sharedEntityLog
-              });
-            }
-          }
         };
         if (interval === "frame") {
           scheduler.add(0, onDue);
@@ -51835,6 +52179,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       executedTraits: results.map((r2) => r2.traitName).join(",")
     });
     const emittedByTrait = /* @__PURE__ */ new Map();
+    bridgeEchoPendingRef.current.clear();
     for (const { traitName, result } of results) {
       const binding = bindingMap.get(traitName);
       const traitState = currentManager.getState(traitName);
@@ -51889,6 +52234,12 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           log: stateLog
         });
         emittedByTrait.set(traitName, emittedDuringExec);
+        for (const emittedKey of emittedDuringExec) {
+          bridgeEchoPendingRef.current.set(
+            emittedKey,
+            (bridgeEchoPendingRef.current.get(emittedKey) ?? 0) + 1
+          );
+        }
       } else if (!result.executed) {
         if (result.guardResult === false) {
           stateLog.debug("guard-blocked-transition", {
@@ -52038,8 +52389,13 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         crossTraitLog.debug("self:subscribe", { traitName, busKey: selfBusKey, eventKey });
         const unsub = eventBus.on(selfBusKey, (event) => {
           if (event.source && event.source.dispatched) {
-            crossTraitLog.debug("self:fire-skipped-bridge-echo", { traitName, busKey: selfBusKey, eventKey });
-            return;
+            const pendingEchoes = bridgeEchoPendingRef.current.get(eventKey) ?? 0;
+            if (pendingEchoes > 0) {
+              bridgeEchoPendingRef.current.set(eventKey, pendingEchoes - 1);
+              crossTraitLog.debug("self:fire-skipped-bridge-echo", { traitName, busKey: selfBusKey, eventKey });
+              return;
+            }
+            crossTraitLog.debug("self:fire-server-cascade", { traitName, busKey: selfBusKey, eventKey });
           }
           crossTraitLog.debug("self:fire", { traitName, busKey: selfBusKey, eventKey });
           enqueueAndDrain(eventKey, event.payload, traitName);
@@ -52131,11 +52487,47 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       initedTraitsRef.current = /* @__PURE__ */ new Set();
     };
   }, [traitBindings, enqueueAndDrain]);
+  const entityBindingSource = React92.useMemo(() => ({
+    getEntitySnapshot: (traitName) => {
+      const sharedKey = sharedKeyByTraitNameRef.current.get(traitName);
+      if (sharedKey !== void 0) {
+        return sharedEntityStore.getSnapshot(sharedKey);
+      }
+      return bindingSnapshotsRef.current.get(traitName) ?? EMPTY_BINDING_SNAPSHOT;
+    },
+    getConfig: (traitName) => {
+      const binding = traitBindingsRef.current.find((b) => b.trait.name === traitName);
+      if (binding === void 0) return void 0;
+      return buildTraitRenderConfig(binding, traitConfigsByName, {});
+    },
+    getState: (traitName) => traitStatesRef.current.get(traitName)?.currentState ?? "",
+    subscribe: (traitName, callback) => {
+      const sharedKey = sharedKeyByTraitNameRef.current.get(traitName);
+      if (sharedKey !== void 0) {
+        return sharedEntityStore.subscribe(sharedKey, callback);
+      }
+      let listeners7 = bindingListenersRef.current.get(traitName);
+      if (!listeners7) {
+        listeners7 = /* @__PURE__ */ new Set();
+        bindingListenersRef.current.set(traitName, listeners7);
+      }
+      listeners7.add(callback);
+      return () => {
+        const current = bindingListenersRef.current.get(traitName);
+        if (!current) return;
+        current.delete(callback);
+        if (current.size === 0) {
+          bindingListenersRef.current.delete(traitName);
+        }
+      };
+    }
+  }), [sharedEntityStore, traitConfigsByName]);
   return {
     traitStates,
     sendEvent,
     getTraitState,
-    canHandleEvent
+    canHandleEvent,
+    entityBindingSource
   };
 }
 
@@ -52224,7 +52616,7 @@ function collectServerActiveTraits(ir, allTraits, mountedTraitNames) {
   }
   return active;
 }
-function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNavigate, onLocalFallback, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, serverActiveTraits }) {
+function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNavigate, onLocalFallback, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, serverActiveTraits, children }) {
   const bridge = providers.useServerBridge();
   const activeTraitNames = React92.useMemo(
     () => new Set(traits2.map((b) => b.trait.name).filter((n) => !!n)),
@@ -52254,7 +52646,7 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
     }
   }, [bridge.connected, bridge.sendEvent, orbitalNames, uiSlots, onNavigate, embeddedTraits, activeTraitNames, withActiveTraits]);
   const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate, traitConfigsByName, orbitalsByTrait, embeddedTraits, initPayload: routeParams } : { navigate: onNavigate, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, initPayload: routeParams };
-  const { sendEvent } = useTraitStateMachine(traits2, uiSlots, opts);
+  const { sendEvent, entityBindingSource } = useTraitStateMachine(traits2, uiSlots, opts);
   const initSentRef = React92.useRef(false);
   const prevTraitsRef = React92.useRef(void 0);
   const paramsKey = JSON.stringify(routeParams ?? {});
@@ -52300,7 +52692,7 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
           { type: "fetch", args: [], status: "executed" },
           ...effects.map((eff) => ({
             type: eff.type,
-            args: eff.type === "render-ui" ? [eff.slot] : [],
+            args: eff.type === "render-ui" && eff.slot !== void 0 ? [eff.slot] : [],
             status: "executed"
           }))
         ];
@@ -52316,7 +52708,7 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
       }
     })();
   }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, embeddedTraits, activeTraitNames, withActiveTraits, routeParams]);
-  return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(providers.EntityBindingContext.Provider, { value: entityBindingSource, children });
 }
 function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, routeParams, onNavigate, onLocalFallback, persistence }) {
   const { traits: traits2, allEntities, allTraits, ir } = useResolvedSchema(schema, pageName);
@@ -52449,30 +52841,28 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, routeP
     }
     return schema.orbitals[0]?.theme;
   }, [schema, pageName]);
-  const inner = /* @__PURE__ */ jsxRuntime.jsx(providers.VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const inner = /* @__PURE__ */ jsxRuntime.jsx(providers.VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(
     providers.EntitySchemaProvider,
     {
       entities: entitiesArray,
       traitLinkedEntities: traitLinkedEntitiesMap,
       orbitalsByTrait: orbitalsByTraitMap,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          TraitInitializer,
-          {
-            traits: allPageTraits,
-            routeParams,
-            orbitalNames: serverUrl || transport ? pageOrbitalNames : void 0,
-            traitConfigsByName,
-            orbitalsByTrait,
-            embeddedTraits,
-            serverActiveTraits,
-            onNavigate,
-            onLocalFallback,
-            persistence
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(providers.OrbitalThemeProvider, { theme: activeOrbitalTheme, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-full min-h-full overflow-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) }) })
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        TraitInitializer,
+        {
+          traits: allPageTraits,
+          routeParams,
+          orbitalNames: serverUrl || transport ? pageOrbitalNames : void 0,
+          traitConfigsByName,
+          orbitalsByTrait,
+          embeddedTraits,
+          serverActiveTraits,
+          onNavigate,
+          onLocalFallback,
+          persistence,
+          children: /* @__PURE__ */ jsxRuntime.jsx(providers.OrbitalThemeProvider, { theme: activeOrbitalTheme, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-full min-h-full overflow-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) }) })
+        }
+      )
     }
   ) });
   if (serverUrl || transport) {