@almadar/ui 5.134.0 → 5.136.0

package/dist/providers/index.cjs

@@ -3,6 +3,8 @@
 var React85 = require('react');
 var providers = require('@almadar/ui/providers');
 var logger = require('@almadar/logger');
+var runtime = require('@almadar/runtime');
+var core = require('@almadar/core');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var LucideIcons2 = require('lucide-react');
@@ -67,10 +69,10 @@ 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 react = require('@xyflow/react');
 var d3Force = require('d3-force');
 var patterns = require('@almadar/core/patterns');
@@ -341,6 +343,75 @@ var init_useEventBus = __esm({
     useEventBus_default = useEventBus;
   }
 });
+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 (React85__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 cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -848,9 +919,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;
@@ -1271,6 +1346,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"() {
   }
@@ -3093,6 +3194,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] = React85__namespace.default.useState(value);
+        const pendingEchoRef = React85__namespace.default.useRef(/* @__PURE__ */ new Set());
+        React85__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 });
@@ -3102,7 +3217,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",
@@ -3121,6 +3236,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);
@@ -3151,7 +3270,7 @@ var init_Input = __esm({
                 "select",
                 {
                   ref,
-                  value,
+                  value: displayValue,
                   onChange: handleChange,
                   className: cn(baseClassName, "appearance-none pr-10", className),
                   ...props,
@@ -3171,7 +3290,7 @@ var init_Input = __esm({
               "textarea",
               {
                 ref,
-                value,
+                value: displayValue,
                 onChange: handleChange,
                 rows,
                 className: baseClassName,
@@ -3210,7 +3329,7 @@ var init_Input = __esm({
               {
                 ref,
                 type,
-                value,
+                value: displayValue,
                 onChange: handleChange,
                 onKeyDown: handleKeyDown,
                 className: baseClassName,
@@ -7133,46 +7252,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 = {
@@ -7657,210 +7775,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 = React85.useRef(null);
-  const pointerDownRef = React85.useRef(null);
-  const cellFromClient = React85.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 = React85.useCallback((e) => {
-    pointerDownRef.current = { clientX: e.clientX, clientY: e.clientY };
-  }, []);
-  const handlePointerUp = React85.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 = React85.useCallback((e) => {
-    if (!tileHoverEvent) return;
-    const cell = cellFromClient(e.clientX, e.clientY);
-    if (cell) eventBus.emit(`UI:${tileHoverEvent}`, cell);
-  }, [cellFromClient, tileHoverEvent, eventBus]);
-  const handlePointerLeave = React85.useCallback(() => {
-    pointerDownRef.current = null;
-    if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
-  }, [tileLeaveEvent, eventBus]);
-  React85.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]);
-  React85.useEffect(() => {
-    if (!keyMap && !keyUpMap) return;
-    svgRef.current?.focus();
-  }, [keyMap, keyUpMap]);
-  const stageContext = React85.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 = React85__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 } = React85.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 } = React85.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 } = React85.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,
@@ -8564,6 +8478,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;
@@ -8731,7 +8646,7 @@ function useCamera(initial) {
   const handleWheel = React85.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 = React85.useCallback((e) => {
@@ -8752,7 +8667,7 @@ function useCamera(initial) {
   const zoomAtPoint = React85.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;
@@ -8804,9 +8719,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) {
@@ -8927,6 +8845,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");
@@ -8938,10 +8857,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"() {
@@ -9050,6 +8973,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;
@@ -9071,12 +9003,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;
@@ -9107,7 +9040,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"() {
@@ -9123,32 +9056,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 r = subRectFor(atlas, node.asset.sprite);
-        if (!r) return;
+        if (!r) {
+          paintFallbackSquare(painter, node, dctx, "sprite-missing");
+          return;
+        }
         src = { x: r.sx, y: r.sy, w: r.sw, h: r.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;
@@ -9225,6 +9193,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();
     };
@@ -9316,6 +9294,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;
@@ -9329,6 +9320,7 @@ function paintDrawable(painter, node, dctx) {
 }
 var init_paintDispatch = __esm({
   "lib/drawable/paintDispatch.ts"() {
+    init_contract();
     init_DrawSprite();
     init_DrawShape();
     init_DrawText();
@@ -9346,6 +9338,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":
@@ -9389,6 +9382,8 @@ function Canvas2D({
   keyUpMap,
   camera = "pan-zoom",
   scale = 0.4,
+  tileWidth,
+  fit = false,
   showMinimap = true,
   followTarget,
   cameraPos,
@@ -9431,9 +9426,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] = React85.useState(0);
+  const bumpAtlas = React85.useCallback(() => setAtlasVersion((v) => v + 1), []);
+  const detectedTileWidth = React85.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 = React85.useMemo(() => collectDrawnItems(drawables ?? []), [drawables]);
   const scenePositions = React85.useMemo(() => drawnItems.map((i) => i.pos), [drawnItems]);
   const hitIndex = React85.useMemo(() => buildHitIndex(drawnItems), [drawnItems]);
@@ -9451,14 +9469,36 @@ function Canvas2D({
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
   }, [isFree, projection, gridExtent.height, scaledTileWidth]);
+  const effectiveZoom = React85.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 = React85.useMemo(
-    () => create2DProjector({ scale, baseOffsetX, layout }),
-    [scale, baseOffsetX, layout]
+    () => create2DProjector({ tileWidth: nativeTileW, baseOffsetX, layout }),
+    [nativeTileW, baseOffsetX, layout]
   );
   const unproject = React85.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 = React85.useMemo(() => backgroundImage ? [backgroundImage.url] : [], [backgroundImage]);
   const { getImage, pendingCount: _imagePendingCount } = useImageCache(bgUrls);
   React85.useEffect(() => {
@@ -9485,9 +9525,7 @@ function Canvas2D({
     zoomAtPoint,
     screenToWorld,
     lerpToTarget
-  } = useCamera({ zoom: scale });
-  const [atlasVersion, setAtlasVersion] = React85.useState(0);
-  const bumpAtlas = React85.useCallback(() => setAtlasVersion((v) => v + 1), []);
+  } = useCamera({ zoom: effectiveZoom });
   const miniMapTiles = React85.useMemo(() => {
     if (!showMinimap) return [];
     const color = MINIMAP_TERRAIN_COLORS.default;
@@ -9562,6 +9600,13 @@ function Canvas2D({
   React85.useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  const userZoomedRef = React85.useRef(false);
+  React85.useEffect(() => {
+    if (userZoomedRef.current) return;
+    if (cameraRef.current.zoom === effectiveZoom) return;
+    cameraRef.current.zoom = effectiveZoom;
+    draw();
+  }, [effectiveZoom, cameraRef, draw]);
   React85.useEffect(() => {
     draw();
   }, [atlasVersion, draw]);
@@ -9618,7 +9663,9 @@ function Canvas2D({
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
   }, [handleMouseLeave, tileLeaveEvent, eventBus]);
   const applyZoom = React85.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 = React85.useCallback((dx, dy) => {
     if (enableCamera) panBy(dx, dy, () => draw());
@@ -9803,6 +9850,8 @@ function Canvas({
   isLoading,
   unitScale,
   showMinimap,
+  fit,
+  tileWidth,
   backgroundImage,
   backgroundColor,
   worldWidth,
@@ -9860,6 +9909,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,
@@ -9886,32 +9937,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,
@@ -23878,6 +23903,8 @@ function DataList({
   hasMore,
   children,
   pageSize = 5,
+  sortBy,
+  sortDirection,
   renderItem: schemaRenderItem,
   dragGroup,
   accepts,
@@ -23906,7 +23933,11 @@ function DataList({
     dndItemIdField,
     dndRoot
   });
-  const allData = dnd.orderedItems;
+  const orderedData = dnd.orderedItems;
+  const allData = React85__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";
@@ -23943,7 +23974,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) : [];
@@ -23956,7 +23987,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
@@ -24056,7 +24092,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",
@@ -24075,7 +24115,7 @@ function DataList({
                           children: formatDate(timestamp)
                         }
                       ) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-                      renderItemActions(itemData)
+                      renderItemActions(itemData, isSent)
                     ] })
                   ]
                 }
@@ -24168,7 +24208,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);
                   })
                 ] }),
@@ -24407,6 +24447,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] = React85.useState("");
+      const [activeCategory, setActiveCategory] = React85.useState(ALL_CATEGORY);
+      const gridRef = React85.useRef(null);
+      const categoryChips = React85.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 = React85.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 = React85.useMemo(() => filtered.slice(0, MAX_RENDERED), [filtered]);
+      const truncated = filtered.length - visible.length;
+      const select = React85.useCallback(
+        (item) => {
+          onChange(item.id);
+        },
+        [onChange]
+      );
+      const handleKeyDown = React85.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) {
@@ -25435,9 +25651,16 @@ var init_Popover = __esm({
       position = "bottom",
       trigger = "click",
       showArrow = true,
+      open,
+      onOpenChange,
       className
     }) => {
-      const [isOpen, setIsOpen] = React85.useState(false);
+      const [uncontrolledOpen, setUncontrolledOpen] = React85.useState(false);
+      const isOpen = open !== void 0 ? open : uncontrolledOpen;
+      const setIsOpen = (next) => {
+        if (open === void 0) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      };
       const [triggerRect, setTriggerRect] = React85.useState(null);
       const [popoverWidth, setPopoverWidth] = React85.useState(0);
       const triggerRef = React85.useRef(null);
@@ -25470,6 +25693,23 @@ var init_Popover = __esm({
           updatePosition();
         }
       }, [isOpen]);
+      React85.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]);
       React85.useEffect(() => {
         if (!mounted) setPopoverWidth(0);
       }, [mounted]);
@@ -26818,6 +27058,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] = React85.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);
 }
@@ -27770,13 +28084,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect63, useRef: useRef61, useCallback: useCallback95, useState: useState91 } = React85__namespace.default;
+      const { useEffect: useEffect62, useRef: useRef61, useCallback: useCallback95, useState: useState93 } = React85__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 = useRef61({ centerLat, centerLng, zoom });
-        useEffect63(() => {
+        useEffect62(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -27787,7 +28101,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect63(() => {
+        useEffect62(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -27815,7 +28129,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState91(null);
+        const [clickedPosition, setClickedPosition] = useState93(null);
         const handleMapClick = useCallback95((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -28660,6 +28974,7 @@ function TableView({
   fields,
   itemActions,
   maxInlineActions,
+  itemClickEvent,
   selectable = false,
   selectEvent,
   selectedIds,
@@ -28704,9 +29019,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)");
@@ -28759,6 +29074,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 = React85__namespace.default.useMemo(
     () => colDefs.map((col) => {
       const longest = data.reduce((widest, row) => {
@@ -28835,10 +29158,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)]",
@@ -28846,7 +29171,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),
@@ -28871,6 +29196,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.
@@ -28940,7 +29266,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 }),
           ")"
         ] }) })
       ]
@@ -38379,6 +38705,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 (!React85__namespace.default.isValidElement(children)) return void 0;
   const props = children.props;
@@ -44082,6 +44418,7 @@ var init_component_registry_generated = __esm({
     init_DocSidebar();
     init_DocTOC();
     init_DocumentViewer();
+    init_DrawGroup();
     init_DrawShape();
     init_DrawShapeLayer();
     init_DrawSprite();
@@ -44091,6 +44428,7 @@ var init_component_registry_generated = __esm({
     init_Drawer();
     init_DrawerSlot();
     init_EdgeDecoration();
+    init_EmojiPicker();
     init_EmptyState();
     init_ErrorBoundary();
     init_ErrorState();
@@ -44225,10 +44563,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();
@@ -44239,7 +44573,6 @@ var init_component_registry_generated = __esm({
     init_SvgRing();
     init_SvgShield();
     init_SvgStack();
-    init_SvgStage();
     init_SwipeableRow();
     init_Switch();
     init_TabbedContainer();
@@ -44353,6 +44686,7 @@ var init_component_registry_generated = __esm({
       "DocSidebar": DocSidebar,
       "DocTOC": DocTOC,
       "DocumentViewer": DocumentViewer,
+      "DrawGroup": DrawGroup,
       "DrawShape": DrawShape,
       "DrawShapeLayer": DrawShapeLayer,
       "DrawSprite": DrawSprite,
@@ -44362,6 +44696,7 @@ var init_component_registry_generated = __esm({
       "Drawer": Drawer,
       "DrawerSlot": DrawerSlot,
       "EdgeDecoration": EdgeDecoration,
+      "EmojiPicker": EmojiPicker,
       "EmptyState": EmptyState,
       "ErrorBoundary": ErrorBoundary,
       "ErrorState": ErrorState,
@@ -44501,10 +44836,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,
@@ -44515,7 +44846,6 @@ var init_component_registry_generated = __esm({
       "SvgRing": SvgRing,
       "SvgShield": SvgShield,
       "SvgStack": SvgStack,
-      "SvgStage": SvgStage,
       "SwipeableRow": SwipeableRow,
       "Switch": Switch,
       "TabbedContainer": TabbedContainer,
@@ -44794,7 +45124,19 @@ function UISlotComponent({
   const suspenseConfig = React85.useContext(SuspenseConfigContext);
   const contained = React85.useContext(SlotContainedContext);
   const schemaCtx = providers.useEntitySchemaOptional();
-  const content = slots[slot];
+  const rawContent = slots[slot];
+  const binding = providers.useEntityBindingSnapshot(rawContent?.sourceTrait);
+  const content = React85.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;
@@ -45138,6 +45480,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) {
@@ -45210,7 +45553,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 = React85.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,
@@ -45241,7 +45591,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);
@@ -45252,9 +45602,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) {
@@ -45363,7 +45713,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: [
@@ -45435,6 +45785,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();
@@ -45829,9 +46180,10 @@ function VerificationProvider({
         }));
         const effectResults = Array.isArray(payload["effectResults"]) ? payload["effectResults"] : [];
         for (const er of effectResults) {
+          const target = er["entity"] ?? er["service"];
           effects.push({
             type: String(er["type"] ?? er["effect"] ?? "server-effect"),
-            args: [er["entity"] ?? er["service"] ?? ""].filter(Boolean),
+            args: typeof target === "string" && target !== "" ? [target] : [],
             status: er["error"] ? "failed" : "executed",
             error: er["error"]
           });
@@ -46620,7 +46972,7 @@ function reEmitServerEvent(eventBus, emitted, origin) {
     sourceTrait: evTrait,
     origin
   });
-  eventBus.emit(key, emitted.payload);
+  eventBus.emit(key, emitted.payload, emitted.source);
 }
 function isBusPushEnvelope(value) {
   return value.type === "bus" && typeof value.event === "string";
@@ -46788,7 +47140,12 @@ function ServerBridgeProvider({
         }
         if (result.emittedEvents) {
           for (const emitted of result.emittedEvents) {
-            reEmitServerEvent(eventBus, emitted, orbitalName);
+            if (emitted.event === event) continue;
+            reEmitServerEvent(
+              eventBus,
+              { ...emitted, source: { ...emitted.source, dispatched: true } },
+              orbitalName
+            );
           }
         }
       } else if (result.error) {
@@ -46926,10 +47283,29 @@ function useTraitScopeChain2() {
   const chain = React85.useContext(TraitScopeContext);
   return chain ?? EMPTY_CHAIN;
 }
-function useTraitScope() {
+function useTraitScope2() {
   const chain = React85.useContext(TraitScopeContext);
   return chain && chain.length > 0 ? chain[0] : null;
 }
+var EntityBindingContext = React85.createContext(null);
+var EMPTY_ENTITY = {};
+var NOOP_SUBSCRIBE = () => () => void 0;
+function useEntityBindingSnapshot2(traitName) {
+  const source = React85.useContext(EntityBindingContext);
+  const entity = React85.useSyncExternalStore(
+    source !== null && traitName !== void 0 ? (onStoreChange) => source.subscribe(traitName, onStoreChange) : NOOP_SUBSCRIBE,
+    () => source !== null && traitName !== void 0 ? source.getEntitySnapshot(traitName) : EMPTY_ENTITY
+  );
+  const config = React85.useMemo(
+    () => source !== null && traitName !== void 0 ? source.getConfig(traitName) : void 0,
+    [source, traitName]
+  );
+  return {
+    entity,
+    config,
+    state: source !== null && traitName !== void 0 ? source.getState(traitName) : ""
+  };
+}
 
 // providers/OfflineModeProvider.tsx
 init_offline_executor();
@@ -47022,6 +47398,10 @@ function GameAudioProvider2({
 }
 GameAudioProvider2.displayName = "GameAudioProvider";
 
+Object.defineProperty(exports, "ANONYMOUS_USER", {
+  enumerable: true,
+  get: function () { return core.ANONYMOUS_USER; }
+});
 Object.defineProperty(exports, "DesignThemeProvider", {
   enumerable: true,
   get: function () { return context.DesignThemeProvider; }
@@ -47030,12 +47410,9 @@ Object.defineProperty(exports, "useDesignTheme", {
   enumerable: true,
   get: function () { return context.useDesignTheme; }
 });
-Object.defineProperty(exports, "ANONYMOUS_USER", {
-  enumerable: true,
-  get: function () { return core.ANONYMOUS_USER; }
-});
 exports.CurrentPagePathContext = CurrentPagePathContext;
 exports.CurrentPagePathProvider = CurrentPagePathProvider;
+exports.EntityBindingContext = EntityBindingContext;
 exports.EntitySchemaProvider = EntitySchemaProvider;
 exports.EventBusContext = EventBusContext2;
 exports.EventBusProvider = EventBusProvider;
@@ -47065,6 +47442,7 @@ exports.matchPathAmong = matchPathAmong2;
 exports.pathMatches = pathMatches2;
 exports.useActivePage = useActivePage2;
 exports.useCurrentPagePath = useCurrentPagePath2;
+exports.useEntityBindingSnapshot = useEntityBindingSnapshot2;
 exports.useEntitySchema = useEntitySchema;
 exports.useEntitySchemaOptional = useEntitySchemaOptional6;
 exports.useGameAudioContext = useGameAudioContext2;
@@ -47083,7 +47461,7 @@ exports.useSelectionOptional = useSelectionOptional;
 exports.useServerBridge = useServerBridge;
 exports.useTrait = useTrait;
 exports.useTraitContext = useTraitContext;
-exports.useTraitScope = useTraitScope;
+exports.useTraitScope = useTraitScope2;
 exports.useTraitScopeChain = useTraitScopeChain2;
 exports.useUser = useUser;
 exports.useUserForEvaluation = useUserForEvaluation;