@almadar/ui 6.5.0 → 6.7.0

package/dist/components/index.js

@@ -12,7 +12,7 @@ import { useTranslate } from '@almadar/ui/hooks';
 import { useUISlots, useTheme } from '@almadar/ui/context';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
 import { createContextFromBindings, interpolateValue } from '@almadar/runtime';
-import { mergeEntityFrame, isFileValue, isInlineTrait, isSecretConfigType, isRenderBindingMarker } from '@almadar/core';
+import { UI_SLOTS, mergeEntityFrame, isFileValue, isInlineTrait, isSecretConfigType, isRenderBindingMarker } from '@almadar/core';
 import { createPortal } from 'react-dom';
 import { wrapCallbackForEvent, perfStart, perfEnd } from '@almadar/runtime/ui';
 import { Link, Outlet, useLocation } from 'react-router-dom';
@@ -9847,14 +9847,15 @@ function drawArrowHead(ctx, x1, y1, x2, y2, size) {
   ctx.closePath();
   ctx.fill();
 }
-function drawShape(ctx, shape, width, height, allShapes) {
+function drawShape(ctx, shape, width, height, allShapes, fontFamily) {
   ctx.save();
   const opacity = shape.opacity ?? 1;
   ctx.globalAlpha = opacity;
   const stroke = resolveColor2(shape.color, ctx, "#333333");
   const fill = shape.fill ? resolveColor2(shape.fill, ctx, "#cccccc") : void 0;
   ctx.lineWidth = shape.lineWidth ?? 2;
-  if (shape.dash) ctx.setLineDash([...DASH_PATTERNS[shape.dash]]);
+  const dashPattern = shape.dash ? DASH_PATTERNS[shape.dash] : void 0;
+  if (dashPattern) ctx.setLineDash([...dashPattern]);
   switch (shape.type) {
     case "grid": {
       const step = shape.step ?? 40;
@@ -9976,7 +9977,7 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "text": {
       if (shape.x == null || shape.y == null || !shape.text) break;
       ctx.fillStyle = stroke;
-      ctx.font = `${shape.fontSize ?? 14}px ${themeBodyFont(ctx.canvas)}`;
+      ctx.font = `${shape.fontSize ?? 14}px ${shape.fontFamily ?? fontFamily ?? themeBodyFont(ctx.canvas)}`;
       ctx.textAlign = shape.align ?? "left";
       ctx.textBaseline = "middle";
       ctx.fillText(shape.text, shape.x, shape.y);
@@ -10018,7 +10019,7 @@ function drawShape(ctx, shape, width, height, allShapes) {
   }
   ctx.restore();
 }
-function readoutShapes(readouts, width) {
+function readoutShapes(readouts, width, fontFamily) {
   const out = [];
   const chipH = 18;
   const gap = 6;
@@ -10042,13 +10043,14 @@ function readoutShapes(readouts, width) {
       text,
       color: "#ffffff",
       fontSize: 10,
-      align: "center"
+      align: "center",
+      fontFamily
     });
     rightEdge = chipX - gap;
   }
   return out;
 }
-function traceShapes(panel, k, width, height) {
+function traceShapes(panel, k, width, height, fontFamily) {
   const w = panel.width ?? Math.round(width * 0.32);
   const h = panel.height ?? Math.round(height * 0.28);
   const x = panel.x ?? width - w - 8;
@@ -10102,14 +10104,14 @@ function traceShapes(panel, k, width, height) {
       out.push({ type: "circle", x: last.x, y: last.y, radius: 2, color, fill: color });
     }
     if (series.label) {
-      out.push({ type: "text", x: x + 6, y: y + 10 + 11 * j, text: series.label, color, fontSize: 9 });
+      out.push({ type: "text", x: x + 6, y: y + 10 + 11 * j, text: series.label, color, fontSize: 9, fontFamily });
     }
   });
   if (panel.yLabel) {
-    out.push({ type: "text", x: x + w - 6, y: y + 10, text: panel.yLabel, color: "#6b7280", fontSize: 9, align: "right" });
+    out.push({ type: "text", x: x + w - 6, y: y + 10, text: panel.yLabel, color: "#6b7280", fontSize: 9, align: "right", fontFamily });
   }
   if (panel.xLabel) {
-    out.push({ type: "text", x: x + w - 6, y: y + h - 6, text: panel.xLabel, color: "#6b7280", fontSize: 9, align: "right" });
+    out.push({ type: "text", x: x + w - 6, y: y + h - 6, text: panel.xLabel, color: "#6b7280", fontSize: 9, align: "right", fontFamily });
   }
   return out;
 }
@@ -10132,13 +10134,14 @@ var init_LearningCanvas = __esm({
     init_useEventBus();
     init_webPainter2d();
     init_paintDispatch();
-    DASH_PATTERNS = { dashed: [6, 4], dotted: [2, 3] };
+    DASH_PATTERNS = { solid: [], dashed: [6, 4], dotted: [2, 3] };
     TRACE_SERIES_COLORS = ["#2563eb", "#dc2626", "#16a34a", "#f59e0b"];
     LearningCanvas = ({
       className,
       width = 600,
       height = 400,
       backgroundColor,
+      fontFamily,
       shapes = [],
       drawables,
       projector,
@@ -10174,10 +10177,10 @@ var init_LearningCanvas = __esm({
       }, [shapes]);
       const derivedShapes = useMemo(() => {
         if (!traces?.length && !readouts?.length) return shapes;
-        const traceOut = (traces ?? []).flatMap((panel, k) => traceShapes(panel, k, width, height));
-        const readoutOut = readouts?.length ? readoutShapes(readouts, width) : [];
+        const traceOut = (traces ?? []).flatMap((panel, k) => traceShapes(panel, k, width, height, fontFamily));
+        const readoutOut = readouts?.length ? readoutShapes(readouts, width, fontFamily) : [];
         return [...shapes, ...traceOut, ...readoutOut];
-      }, [shapes, traces, readouts, width, height]);
+      }, [shapes, traces, readouts, width, height, fontFamily]);
       const draw = useCallback(() => {
         const _perfT = perfStart("learningcanvas:paint");
         const canvas = canvasRef.current;
@@ -10196,15 +10199,15 @@ var init_LearningCanvas = __esm({
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of derivedShapes) {
-          if (shape.type !== "text") drawShape(ctx, shape, width, height, derivedShapes);
+          if (shape.type !== "text") drawShape(ctx, shape, width, height, derivedShapes, fontFamily);
         }
         for (const shape of derivedShapes) {
-          if (shape.type === "text") drawShape(ctx, shape, width, height, derivedShapes);
+          if (shape.type === "text") drawShape(ctx, shape, width, height, derivedShapes, fontFamily);
         }
         if (drawables?.length && projector) {
           const painter = createWebPainter(ctx, invalidateRef.current);
           const timeMs = needsAnim && typeof performance !== "undefined" ? performance.now() : 0;
-          const dctx = { projector, time: timeMs, invalidate: invalidateRef.current, fontFamily: themeBodyFont(canvas) };
+          const dctx = { projector, time: timeMs, invalidate: invalidateRef.current, fontFamily: fontFamily || themeBodyFont(canvas) };
           for (const node of drawables) {
             paintDrawable(painter, node, dctx);
           }
@@ -13321,6 +13324,250 @@ var init_EmptyState = __esm({
     EmptyState.displayName = "EmptyState";
   }
 });
+
+// lib/editorMotions.ts
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function computeLines(text) {
+  const lines = [];
+  let start = 0;
+  for (let i = 0; i <= text.length; i++) {
+    if (i === text.length || text[i] === "\n") {
+      lines.push({ start, end: i });
+      start = i + 1;
+    }
+  }
+  return lines;
+}
+function lineIndexAt(lines, pos) {
+  for (let i = 0; i < lines.length; i++) {
+    if (pos <= lines[i].end) return i;
+  }
+  return lines.length - 1;
+}
+function findWords(text) {
+  const words = [];
+  const re = /\w+|\S+/g;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    words.push({ start: m.index, end: m.index + m[0].length });
+  }
+  return words;
+}
+function nextWordStart(text, pos) {
+  for (const w of findWords(text)) {
+    if (w.start > pos) return w.start;
+  }
+  return text.length;
+}
+function prevWordStart(text, pos) {
+  let result = 0;
+  for (const w of findWords(text)) {
+    if (w.start < pos) result = w.start;
+    else break;
+  }
+  return result;
+}
+function nextWordEnd(text, pos) {
+  for (const w of findWords(text)) {
+    const lastChar = w.end - 1;
+    if (lastChar > pos) return lastChar;
+  }
+  return text.length > 0 ? text.length - 1 : 0;
+}
+function firstNonBlank(text, line) {
+  let i = line.start;
+  while (i < line.end && (text[i] === " " || text[i] === "	")) i++;
+  return i;
+}
+function nextParagraphBoundary(lines, fromLineIdx, textLength) {
+  for (let i = fromLineIdx + 1; i < lines.length; i++) {
+    if (lines[i].start === lines[i].end) return lines[i].start;
+  }
+  return textLength;
+}
+function prevParagraphBoundary(lines, fromLineIdx) {
+  for (let i = fromLineIdx - 1; i >= 0; i--) {
+    if (lines[i].start === lines[i].end) return lines[i].start;
+  }
+  return 0;
+}
+function applyMotion(text, caret, motion, count) {
+  const n = Math.max(1, count);
+  const lines = computeLines(text);
+  const lineIdx = lineIndexAt(lines, caret);
+  const line = lines[lineIdx];
+  switch (motion) {
+    case "left":
+      return clamp(caret - n, line.start, line.end);
+    case "right":
+      return clamp(caret + n, line.start, line.end);
+    case "up": {
+      const col = caret - line.start;
+      const targetIdx = clamp(lineIdx - n, 0, lines.length - 1);
+      const target = lines[targetIdx];
+      return clamp(target.start + col, target.start, target.end);
+    }
+    case "down": {
+      const col = caret - line.start;
+      const targetIdx = clamp(lineIdx + n, 0, lines.length - 1);
+      const target = lines[targetIdx];
+      return clamp(target.start + col, target.start, target.end);
+    }
+    case "word-forward": {
+      let pos = caret;
+      for (let i = 0; i < n; i++) pos = nextWordStart(text, pos);
+      return pos;
+    }
+    case "word-back": {
+      let pos = caret;
+      for (let i = 0; i < n; i++) pos = prevWordStart(text, pos);
+      return pos;
+    }
+    case "word-end": {
+      let pos = caret;
+      for (let i = 0; i < n; i++) pos = nextWordEnd(text, pos);
+      return pos;
+    }
+    case "line-start":
+      return line.start;
+    case "line-end":
+      return line.end > line.start ? line.end - 1 : line.start;
+    case "first-nonblank":
+      return firstNonBlank(text, line);
+    case "doc-start":
+      return 0;
+    case "doc-end":
+      return text.length;
+    case "paragraph-forward": {
+      let pos = caret;
+      for (let i = 0; i < n; i++) {
+        pos = nextParagraphBoundary(lines, lineIndexAt(lines, pos), text.length);
+      }
+      return pos;
+    }
+    case "paragraph-back": {
+      let pos = caret;
+      for (let i = 0; i < n; i++) {
+        pos = prevParagraphBoundary(lines, lineIndexAt(lines, pos));
+      }
+      return pos;
+    }
+    case "line":
+    case "selection":
+      return caret;
+    default: {
+      const _exhaustive = motion;
+      return _exhaustive;
+    }
+  }
+}
+function motionRange(text, caret, motion, count, selection) {
+  if (motion === "selection") {
+    if (!selection) return [caret, caret];
+    return [Math.min(selection[0], selection[1]), Math.max(selection[0], selection[1])];
+  }
+  const lines = computeLines(text);
+  if (motion === "line") {
+    const n = Math.max(1, count);
+    const startIdx = lineIndexAt(lines, caret);
+    const endIdx = clamp(startIdx + n - 1, 0, lines.length - 1);
+    const start2 = lines[startIdx].start;
+    const rawEnd = lines[endIdx].end;
+    const end2 = rawEnd < text.length ? rawEnd + 1 : rawEnd;
+    return [start2, end2];
+  }
+  const newCaret = applyMotion(text, caret, motion, count);
+  let start = Math.min(caret, newCaret);
+  let end = Math.max(caret, newCaret);
+  if (motion === "word-end" || motion === "line-end") {
+    end = Math.min(Math.max(start, newCaret) + 1, text.length);
+  } else if (motion === "word-forward" && newCaret > caret) {
+    const startLine = lineIndexAt(lines, caret);
+    const endLine = lineIndexAt(lines, newCaret);
+    if (endLine !== startLine) {
+      end = lines[startLine].end;
+    }
+  }
+  return [start, end];
+}
+function applyOperator(text, range, operator, register) {
+  const start = clamp(range[0], 0, text.length);
+  const end = clamp(range[1], start, text.length);
+  const removed = text.slice(start, end);
+  if (operator === "yank") {
+    return { text, caret: start, register: removed };
+  }
+  return { text: text.slice(0, start) + text.slice(end), caret: start, register: removed };
+}
+var init_editorMotions = __esm({
+  "lib/editorMotions.ts"() {
+  }
+});
+function isMotionPayload(payload) {
+  return !!payload && typeof payload.editorId === "string" && typeof payload.motion === "string" && typeof payload.count === "number";
+}
+function isOperatePayload(payload) {
+  return !!payload && typeof payload.editorId === "string" && typeof payload.operator === "string" && typeof payload.motion === "string" && typeof payload.count === "number";
+}
+function isInsertTextPayload(payload) {
+  return !!payload && typeof payload.editorId === "string" && typeof payload.text === "string";
+}
+function isSetModePayload(payload) {
+  return !!payload && typeof payload.editorId === "string" && typeof payload.mode === "string" && typeof payload.caret === "string";
+}
+function useEditorCapabilities(args) {
+  const [caretMode, setCaretMode] = useState("bar");
+  const registerRef = useRef("");
+  useEventListener(`UI:${args.events.onMotion}`, (evt) => {
+    if (!args.editorId || !isMotionPayload(evt.payload) || evt.payload.editorId !== args.editorId) return;
+    const ta = args.textareaRef.current;
+    if (!ta) return;
+    const { motion, count } = evt.payload;
+    const newCaret = applyMotion(ta.value, ta.selectionStart, motion, count);
+    if (ta.selectionStart !== ta.selectionEnd) {
+      ta.setSelectionRange(ta.selectionStart, newCaret);
+    } else {
+      ta.setSelectionRange(newCaret, newCaret);
+    }
+  });
+  useEventListener(`UI:${args.events.onOperate}`, (evt) => {
+    if (!args.editorId || !isOperatePayload(evt.payload) || evt.payload.editorId !== args.editorId) return;
+    const ta = args.textareaRef.current;
+    if (!ta) return;
+    const { operator, motion, count } = evt.payload;
+    const selection = motion === "selection" ? [ta.selectionStart, ta.selectionEnd] : void 0;
+    const range = motionRange(ta.value, ta.selectionStart, motion, count, selection);
+    const result = applyOperator(ta.value, range, operator, registerRef.current);
+    registerRef.current = result.register;
+    if (operator === "yank") {
+      ta.setSelectionRange(range[0], range[0]);
+    } else {
+      ta.setRangeText("", range[0], range[1], "end");
+    }
+    args.applyChange(ta.value);
+  });
+  useEventListener(`UI:${args.events.onInsertText}`, (evt) => {
+    if (!args.editorId || !isInsertTextPayload(evt.payload) || evt.payload.editorId !== args.editorId) return;
+    const ta = args.textareaRef.current;
+    if (!ta) return;
+    ta.setRangeText(evt.payload.text, ta.selectionStart, ta.selectionEnd, "end");
+    args.applyChange(ta.value);
+  });
+  useEventListener(`UI:${args.events.onSetMode}`, (evt) => {
+    if (!args.editorId || !isSetModePayload(evt.payload) || evt.payload.editorId !== args.editorId) return;
+    setCaretMode(evt.payload.caret);
+  });
+  return { caretMode };
+}
+var init_useEditorCapabilities = __esm({
+  "components/core/molecules/markdown/useEditorCapabilities.ts"() {
+    "use client";
+    init_useEventBus();
+    init_editorMotions();
+  }
+});
 function registerCodeLanguageLoader(loader) {
   codeLanguageLoader = loader;
 }
@@ -13409,7 +13656,36 @@ function useLanguageReady(language) {
   }, [language]);
   return ready;
 }
-var dynamicallyLoaded, codeLanguageLoader, orbStyleOverrides, orbStyle, loloStyleOverrides, loloStyle, log5, CODE_LANGUAGES, CODE_LANGUAGE_SET, DIFF_STYLES, DIFF_STYLE_FALLBACK, LINE_PROPS_FN, HIDDEN_LINE_NUMBERS, HIGHLIGHT_CAPACITY_BYTES, CodeBlock;
+function resolveHighlightStyle(lang) {
+  if (lang === "orb") return orbStyle;
+  if (lang === "lolo") return loloStyle;
+  return dark;
+}
+function plainCodeColorOf(style) {
+  return style['code[class*="language-"]']?.color ?? "#d4d4d4";
+}
+function buildLineProps(errorLines, extraClassName) {
+  return (lineNumber) => {
+    const base = {
+      "data-line": String(lineNumber - 1),
+      ...extraClassName ? { className: extraClassName } : {}
+    };
+    const severity = errorLines?.get(lineNumber);
+    if (!severity) return base;
+    return {
+      ...base,
+      style: {
+        display: "block",
+        backgroundColor: severity === "error" ? "rgba(248, 113, 113, 0.18)" : "rgba(251, 191, 36, 0.18)",
+        // amber-400 @ 18%
+        borderLeft: `3px solid ${severity === "error" ? "#ef4444" : "#f59e0b"}`,
+        paddingLeft: "0.5rem",
+        marginLeft: "-0.5rem"
+      }
+    };
+  };
+}
+var dynamicallyLoaded, codeLanguageLoader, orbStyleOverrides, orbStyle, loloStyleOverrides, loloStyle, log5, CODE_LANGUAGES, CODE_LANGUAGE_SET, DIFF_STYLES, DIFF_STYLE_FALLBACK, LINE_PROPS_FN, HIDDEN_LINE_NUMBERS, HIGHLIGHT_CAPACITY_BYTES, MONO_FONT_FAMILY, VIEWER_LINE_NUMBER_STYLE, CodeBlock;
 var init_CodeBlock = __esm({
   "components/core/molecules/markdown/CodeBlock.tsx"() {
     init_cn();
@@ -13425,6 +13701,7 @@ var init_CodeBlock = __esm({
     init_Textarea();
     init_Icon();
     init_useEventBus();
+    init_useEditorCapabilities();
     SyntaxHighlighter.registerLanguage("json", langJson);
     SyntaxHighlighter.registerLanguage("javascript", langJavascript);
     SyntaxHighlighter.registerLanguage("js", langJavascript);
@@ -13643,6 +13920,15 @@ var init_CodeBlock = __esm({
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
     HIGHLIGHT_CAPACITY_BYTES = 512 * 1024;
+    MONO_FONT_FAMILY = 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace';
+    VIEWER_LINE_NUMBER_STYLE = {
+      minWidth: "2.5em",
+      paddingRight: "1rem",
+      textAlign: "right",
+      userSelect: "none",
+      opacity: 0.5,
+      fontVariantNumeric: "tabular-nums"
+    };
     CodeBlock = React79__default.memo(
       ({
         code: rawCode,
@@ -13667,15 +13953,39 @@ var init_CodeBlock = __esm({
         actions,
         isLoading = false,
         error,
-        showCopy
+        showCopy,
+        // editor capability surface — P1 wires these
+        editorId,
+        onEditorFocus = "EDITOR_FOCUS",
+        onEditorBlur = "EDITOR_BLUR",
+        onMotion = "MOTION",
+        onOperate = "OPERATE",
+        onInsertText = "INSERT_TEXT",
+        onSetMode = "SET_MODE",
+        motions = [
+          "left",
+          "right",
+          "up",
+          "down",
+          "word-forward",
+          "word-back",
+          "word-end",
+          "line-start",
+          "line-end",
+          "first-nonblank",
+          "doc-start",
+          "doc-end",
+          "paragraph-forward",
+          "paragraph-back",
+          "line",
+          "selection"
+        ],
+        operators = ["delete", "yank", "change"]
       }) => {
         const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
-        const isOrb = language === "orb";
-        const isLolo = language === "lolo";
-        const activeStyle = isOrb ? orbStyle : isLolo ? loloStyle : dark;
+        const activeStyle = resolveHighlightStyle(language);
         const overCapacity = code.length > HIGHLIGHT_CAPACITY_BYTES;
-        const plainCodeColor = activeStyle['code[class*="language-"]']?.color ?? "#d4d4d4";
-        const languageReady = useLanguageReady(language);
+        const plainCodeColor = plainCodeColorOf(activeStyle);
         const eventBus = useEventBus();
         const { t } = useTranslate();
         const scrollRef = useRef(null);
@@ -13687,6 +13997,9 @@ var init_CodeBlock = __esm({
         const activeFile = files?.[activeFileIndex];
         const activeCode = activeFile?.code ?? code;
         const activeLanguage = activeFile?.language ?? language;
+        const languageReady = useLanguageReady(activeLanguage);
+        const viewerStyle = resolveHighlightStyle(activeLanguage);
+        const viewerPlainCodeColor = plainCodeColorOf(viewerStyle);
         const diffLines = useMemo(() => {
           if (propDiff) return propDiff;
           if (mode === "diff" && oldValue !== void 0 && newValue !== void 0) {
@@ -13716,28 +14029,28 @@ var init_CodeBlock = __esm({
             ov.scrollLeft = ta.scrollLeft;
           }
         }, []);
-        const errorLineProps = useMemo(() => {
-          if (!errorLines || errorLines.size === 0) {
-            return LINE_PROPS_FN;
-          }
-          return (lineNumber) => {
-            const severity = errorLines.get(lineNumber);
-            if (!severity) {
-              return { "data-line": String(lineNumber - 1) };
-            }
-            return {
-              "data-line": String(lineNumber - 1),
-              style: {
-                display: "block",
-                backgroundColor: severity === "error" ? "rgba(248, 113, 113, 0.18)" : "rgba(251, 191, 36, 0.18)",
-                // amber-400 @ 18%
-                borderLeft: `3px solid ${severity === "error" ? "#ef4444" : "#f59e0b"}`,
-                paddingLeft: "0.5rem",
-                marginLeft: "-0.5rem"
-              }
-            };
-          };
-        }, [errorLines]);
+        const handleEditableChange = useCallback((v) => {
+          lastPropCodeRef.current = v;
+          setEditableValue(v);
+          onChange?.(v);
+        }, [onChange]);
+        const { caretMode } = useEditorCapabilities({
+          editorId: editable ? editorId : void 0,
+          textareaRef: editableTextareaRef,
+          events: { onMotion, onOperate, onInsertText, onSetMode },
+          applyChange: handleEditableChange
+        });
+        const [caretIndex, setCaretIndex] = useState(0);
+        const caretRowCol = useMemo(() => {
+          const before = editableValue.slice(0, Math.min(caretIndex, editableValue.length));
+          const lines = before.split("\n");
+          return { row: lines.length - 1, col: lines[lines.length - 1].length };
+        }, [editableValue, caretIndex]);
+        const errorLineProps = useMemo(() => buildLineProps(errorLines), [errorLines]);
+        const viewerLineProps = useMemo(
+          () => buildLineProps(errorLines, "px-4 py-0.5 hover:bg-muted/50"),
+          [errorLines]
+        );
         const isFoldable = foldableProp ?? true;
         const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
         const foldRegions = useMemo(
@@ -13860,6 +14173,110 @@ var init_CodeBlock = __esm({
           ),
           [code, overCapacity, plainCodeColor, language, activeStyle, languageReady]
         );
+        const viewerOverCapacity = activeCode.length > HIGHLIGHT_CAPACITY_BYTES;
+        const viewerHighlightedElement = useMemo(
+          () => viewerOverCapacity ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "px-4 py-0.5",
+              style: {
+                margin: 0,
+                whiteSpace: wrap ? "pre-wrap" : "pre",
+                wordBreak: wrap ? "break-all" : "normal",
+                color: viewerPlainCodeColor,
+                fontFamily: MONO_FONT_FAMILY,
+                fontSize: "12px",
+                lineHeight: "1.6"
+              },
+              children: activeCode
+            }
+          ) : /* @__PURE__ */ jsx(
+            SyntaxHighlighter,
+            {
+              PreTag: "div",
+              language: activeLanguage,
+              style: viewerStyle,
+              wrapLines: true,
+              wrapLongLines: wrap,
+              showLineNumbers,
+              lineNumberStyle: VIEWER_LINE_NUMBER_STYLE,
+              lineProps: viewerLineProps,
+              customStyle: {
+                backgroundColor: "transparent",
+                borderRadius: 0,
+                padding: "0.25rem 0",
+                margin: 0,
+                whiteSpace: wrap ? "pre-wrap" : "pre",
+                wordBreak: wrap ? "break-all" : "normal",
+                fontFamily: MONO_FONT_FAMILY,
+                fontSize: "12px",
+                lineHeight: "1.6"
+              },
+              codeTagProps: { style: { fontFamily: MONO_FONT_FAMILY, fontSize: "12px", lineHeight: "1.6" } },
+              children: activeCode
+            }
+          ),
+          [activeCode, viewerOverCapacity, viewerPlainCodeColor, activeLanguage, viewerStyle, wrap, showLineNumbers, viewerLineProps, languageReady]
+        );
+        const diffOverCapacity = useMemo(
+          () => !!diffLines && diffLines.reduce((n, l) => n + l.content.length + 1, 0) > HIGHLIGHT_CAPACITY_BYTES,
+          [diffLines]
+        );
+        const diffRowElements = useMemo(() => {
+          if (!diffLines) return null;
+          return diffLines.map((line, idx) => {
+            const style = DIFF_STYLES[line.type] ?? DIFF_STYLE_FALLBACK;
+            return /* @__PURE__ */ jsxs(HStack, { gap: "none", align: "start", className: cn(style.bg, "px-4 py-0.5"), children: [
+              showLineNumbers && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  color: "secondary",
+                  className: "w-8 text-right mr-3 select-none tabular-nums flex-shrink-0",
+                  children: line.lineNumber ?? ""
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  variant: "caption",
+                  className: cn("font-mono flex-1 min-w-0", style.text, wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"),
+                  children: [
+                    /* @__PURE__ */ jsx(Box, { as: "span", className: "select-none opacity-50 mr-2", children: style.prefix }),
+                    diffOverCapacity ? line.content || " " : /* @__PURE__ */ jsx(
+                      SyntaxHighlighter,
+                      {
+                        PreTag: "span",
+                        CodeTag: "span",
+                        language: activeLanguage,
+                        style: viewerStyle,
+                        customStyle: {
+                          display: "inline",
+                          background: "transparent",
+                          padding: 0,
+                          margin: 0,
+                          whiteSpace: wrap ? "pre-wrap" : "pre",
+                          wordBreak: wrap ? "break-all" : "normal",
+                          fontFamily: "inherit",
+                          fontSize: "inherit",
+                          lineHeight: "inherit"
+                        },
+                        codeTagProps: {
+                          style: {
+                            whiteSpace: wrap ? "pre-wrap" : "pre",
+                            fontFamily: "inherit",
+                            fontSize: "inherit"
+                          }
+                        },
+                        children: line.content || " "
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }, idx);
+          });
+        }, [diffLines, showLineNumbers, wrap, diffOverCapacity, activeLanguage, viewerStyle, languageReady]);
         useLayoutEffect(() => {
           const container = codeRef.current;
           if (!container) return;
@@ -14003,7 +14420,6 @@ var init_CodeBlock = __esm({
             label: file.label,
             content: null
           }));
-          const lines = activeCode.split("\n");
           return /* @__PURE__ */ jsx(Card, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
             tabItems && tabItems.length > 1 && /* @__PURE__ */ jsx(Box, { className: "border-b border-border", children: /* @__PURE__ */ jsx(
               Tabs,
@@ -14066,49 +14482,7 @@ var init_CodeBlock = __esm({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(Box, { className: "overflow-auto bg-muted/20", style: { maxHeight }, children: diffLines ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, className: "font-mono text-xs", children: diffLines.map((line, idx) => {
-              const style = DIFF_STYLES[line.type] ?? DIFF_STYLE_FALLBACK;
-              return /* @__PURE__ */ jsxs(HStack, { gap: "none", align: "start", className: cn(style.bg, "px-4 py-0.5"), children: [
-                showLineNumbers && /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "caption",
-                    color: "secondary",
-                    className: "w-8 text-right mr-3 select-none tabular-nums flex-shrink-0",
-                    children: line.lineNumber ?? ""
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  Typography,
-                  {
-                    variant: "caption",
-                    className: cn("font-mono flex-1 min-w-0", style.text, wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"),
-                    children: [
-                      /* @__PURE__ */ jsx(Box, { as: "span", className: "select-none opacity-50 mr-2", children: style.prefix }),
-                      line.content
-                    ]
-                  }
-                )
-              ] }, idx);
-            }) }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, className: "font-mono text-xs", children: lines.map((line, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "none", align: "start", className: "px-4 py-0.5 hover:bg-muted/50", children: [
-              showLineNumbers && /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "caption",
-                  color: "secondary",
-                  className: "w-8 text-right mr-4 select-none tabular-nums flex-shrink-0",
-                  children: idx + 1
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "caption",
-                  className: cn("font-mono flex-1 min-w-0", wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"),
-                  children: line || " "
-                }
-              )
-            ] }, idx)) }) })
+            /* @__PURE__ */ jsx(Box, { className: "overflow-auto bg-muted/20", style: { maxHeight }, children: diffLines ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, className: "font-mono text-xs", children: diffRowElements }) : /* @__PURE__ */ jsx("div", { className: "font-mono text-xs", children: viewerHighlightedElement }) })
           ] }) });
         }
         const hasHeader = showLanguageBadge || effectiveCopy;
@@ -14195,13 +14569,11 @@ var init_CodeBlock = __esm({
                     {
                       ref: editableTextareaRef,
                       defaultValue: code,
-                      onChange: (e) => {
-                        const v = e.target.value;
-                        lastPropCodeRef.current = v;
-                        setEditableValue(v);
-                        onChange?.(v);
-                      },
+                      onChange: (e) => handleEditableChange(e.target.value),
                       onScroll: handleEditableScroll,
+                      onSelect: (e) => setCaretIndex(e.currentTarget.selectionStart),
+                      onFocus: editorId ? () => eventBus.emit(`UI:${onEditorFocus}`, { editorId }) : void 0,
+                      onBlur: editorId ? () => eventBus.emit(`UI:${onEditorBlur}`, { editorId }) : void 0,
                       spellCheck: false,
                       style: {
                         position: "absolute",
@@ -14216,7 +14588,7 @@ var init_CodeBlock = __esm({
                         resize: "none",
                         backgroundColor: "transparent",
                         color: "transparent",
-                        caretColor: "#e6e6e6",
+                        caretColor: caretMode === "block" ? "transparent" : "#e6e6e6",
                         WebkitTextFillColor: "transparent",
                         fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
                         fontSize: "13px",
@@ -14227,6 +14599,22 @@ var init_CodeBlock = __esm({
                       }
                     },
                     editableTextareaKey
+                  ),
+                  caretMode !== "bar" && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      style: {
+                        position: "absolute",
+                        top: `calc(1rem + ${caretRowCol.row * 19.5}px)`,
+                        left: `calc(1rem + ${caretRowCol.col}ch)`,
+                        width: "1ch",
+                        height: caretMode === "block" ? "19.5px" : "2px",
+                        backgroundColor: caretMode === "block" ? "rgba(230, 230, 230, 0.5)" : void 0,
+                        borderBottom: caretMode === "underline" ? "2px solid #e6e6e6" : void 0,
+                        pointerEvents: "none"
+                      }
+                    }
                   )
                 ]
               }
@@ -14254,55 +14642,175 @@ var init_CodeBlock = __esm({
           )
         ] });
       },
-      (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.showCopy === next.showCopy && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange && prev.errorLines === next.errorLines && prev.mode === next.mode && prev.title === next.title && prev.diff === next.diff && prev.files === next.files && prev.actions === next.actions && prev.isLoading === next.isLoading && prev.error === next.error
+      (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.showCopy === next.showCopy && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange && prev.errorLines === next.errorLines && prev.mode === next.mode && prev.title === next.title && prev.diff === next.diff && prev.files === next.files && prev.actions === next.actions && prev.isLoading === next.isLoading && prev.error === next.error && prev.editorId === next.editorId && prev.onEditorFocus === next.onEditorFocus && prev.onEditorBlur === next.onEditorBlur && prev.onMotion === next.onMotion && prev.onOperate === next.onOperate && prev.onInsertText === next.onInsertText && prev.onSetMode === next.onSetMode && prev.motions === next.motions && prev.operators === next.operators
     );
     CodeBlock.displayName = "CodeBlock";
   }
 });
+
+// components/core/molecules/markdown/mermaidSource.ts
+function isQuoted(label) {
+  const trimmed = label.trim();
+  return trimmed.length === 0 || trimmed.startsWith('"') && trimmed.endsWith('"') && trimmed.length > 1;
+}
+function quote(label) {
+  return `"${label.replace(/"/g, "#quot;")}"`;
+}
+function isIdentifierChar(ch) {
+  return /[A-Za-z0-9_\-.]/.test(ch);
+}
+function declaredType(code) {
+  for (const line of code.split("\n")) {
+    const trimmed = line.trim();
+    if (trimmed.length === 0 || trimmed.startsWith("%%")) continue;
+    return trimmed;
+  }
+  return "";
+}
+function isFlowchart(code) {
+  return FLOWCHART_DIRECTIVE.test(declaredType(code));
+}
+function quoteNodeLabels(code) {
+  let out = "";
+  let i = 0;
+  while (i < code.length) {
+    const shape = NODE_SHAPES.find(([open2]) => code.startsWith(open2, i));
+    const precededByIdentifier = i > 0 && isIdentifierChar(code[i - 1] ?? "");
+    if (shape === void 0 || !precededByIdentifier) {
+      out += code[i];
+      i += 1;
+      continue;
+    }
+    const [open, close] = shape;
+    const contentStart = i + open.length;
+    const closeAt = code.indexOf(close, contentStart);
+    const newlineAt = code.indexOf("\n", contentStart);
+    if (closeAt === -1 || newlineAt !== -1 && newlineAt < closeAt) {
+      out += code[i];
+      i += 1;
+      continue;
+    }
+    const label = code.slice(contentStart, closeAt);
+    out += open + (isQuoted(label) ? label : quote(label)) + close;
+    i = closeAt + close.length;
+  }
+  return out;
+}
+function quoteEdgeLabels(code) {
+  return code.split("\n").map((line) => {
+    let out = "";
+    let rest = line;
+    for (; ; ) {
+      const open = rest.indexOf("|");
+      if (open === -1) break;
+      const close = rest.indexOf("|", open + 1);
+      if (close === -1) break;
+      const label = rest.slice(open + 1, close);
+      out += rest.slice(0, open + 1) + (isQuoted(label) ? label : quote(label)) + "|";
+      rest = rest.slice(close + 1);
+    }
+    return out + rest;
+  }).join("\n");
+}
+function quoteSubgraphTitles(code) {
+  return code.split("\n").map((line) => {
+    const match = /^(\s*subgraph\s+)(.+?)(\s*)$/.exec(line);
+    if (match === null) return line;
+    const [, prefix, title, trailing] = match;
+    if (title === void 0 || prefix === void 0) return line;
+    if (isQuoted(title) || title.includes("[")) return line;
+    return prefix + quote(title) + (trailing ?? "");
+  }).join("\n");
+}
+function mermaidRepairCandidates(code) {
+  if (!isFlowchart(code)) return [];
+  const nodes = quoteNodeLabels(code);
+  const nodesAndEdges = quoteEdgeLabels(nodes);
+  const all = quoteSubgraphTitles(nodesAndEdges);
+  const ordered2 = [nodes, nodesAndEdges, all];
+  const seen = /* @__PURE__ */ new Set([code]);
+  const candidates = [];
+  for (const candidate of ordered2) {
+    if (seen.has(candidate)) continue;
+    seen.add(candidate);
+    candidates.push(candidate);
+  }
+  return candidates;
+}
+var NODE_SHAPES, FLOWCHART_DIRECTIVE;
+var init_mermaidSource = __esm({
+  "components/core/molecules/markdown/mermaidSource.ts"() {
+    NODE_SHAPES = [
+      ["[[", "]]"],
+      ["[(", ")]"],
+      ["([", "])"],
+      ["((", "))"],
+      ["{{", "}}"],
+      ["[", "]"],
+      ["(", ")"],
+      ["{", "}"]
+    ];
+    FLOWCHART_DIRECTIVE = /^(?:graph|flowchart)\b/;
+  }
+});
 function loadMermaid() {
   mermaidModule ?? (mermaidModule = import('mermaid').then((m) => m.default));
   return mermaidModule;
 }
-var mermaidModule, MermaidDiagram;
+var log6, mermaidModule, MermaidDiagram;
 var init_MermaidDiagram = __esm({
   "components/core/molecules/markdown/MermaidDiagram.tsx"() {
     init_Box();
     init_Typography();
     init_CodeBlock();
+    init_mermaidSource();
     init_cn();
+    log6 = createLogger("almadar:ui:mermaid-diagram");
     mermaidModule = null;
     MermaidDiagram = React79__default.memo(
       ({ code, className }) => {
         const { resolvedMode } = useTheme();
+        const { t } = useTranslate();
         const containerRef = useRef(null);
-        const [error, setError] = useState(null);
+        const [unrenderable, setUnrenderable] = useState(false);
         const reactId = useId();
         useEffect(() => {
           let active = true;
           void (async () => {
-            try {
-              const mermaid = await loadMermaid();
-              mermaid.initialize({
-                startOnLoad: false,
-                securityLevel: "strict",
-                theme: resolvedMode === "dark" ? "dark" : "default"
-              });
-              const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
-              const { svg } = await mermaid.render(domId, code);
-              if (!active || !containerRef.current) return;
-              containerRef.current.innerHTML = svg;
-              setError(null);
-            } catch (err) {
-              if (active) setError(err instanceof Error ? err.message : String(err));
+            const mermaid = await loadMermaid();
+            mermaid.initialize({
+              startOnLoad: false,
+              securityLevel: "strict",
+              theme: resolvedMode === "dark" ? "dark" : "default"
+            });
+            const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
+            let firstError = null;
+            for (const [index, source] of [code, ...mermaidRepairCandidates(code)].entries()) {
+              try {
+                const { svg } = await mermaid.render(domId, source);
+                if (!active) return;
+                const container = containerRef.current;
+                if (container === null) return;
+                container.innerHTML = svg;
+                container.dataset.mermaidRepaired = String(index > 0);
+                setUnrenderable(false);
+                if (index > 0) log6.debug("mermaid:repaired", { candidate: index });
+                return;
+              } catch (err) {
+                firstError ?? (firstError = err instanceof Error ? err : new Error(String(err)));
+              }
             }
+            if (!active) return;
+            log6.warn("mermaid:unrenderable", { error: firstError?.message ?? "", code });
+            setUnrenderable(true);
           })();
           return () => {
             active = false;
           };
         }, [code, resolvedMode, reactId]);
         return /* @__PURE__ */ jsxs(Box, { className: cn("not-prose my-4", className), children: [
-          error !== null && /* @__PURE__ */ jsxs(Box, { className: "space-y-2 mb-2", children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-error whitespace-pre-wrap", children: error }),
+          unrenderable && /* @__PURE__ */ jsxs(Box, { className: "space-y-2 mb-2", "data-testid": "mermaid-unrenderable", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("mermaid.unrenderable") }),
             /* @__PURE__ */ jsx(CodeBlock, { code, language: "mermaid" })
           ] }),
           /* @__PURE__ */ jsx(
@@ -14311,7 +14819,7 @@ var init_MermaidDiagram = __esm({
               ref: containerRef,
               "data-testid": "mermaid-diagram",
               className: "overflow-x-auto",
-              style: error !== null ? { display: "none" } : void 0
+              style: unrenderable ? { display: "none" } : void 0
             }
           )
         ] });
@@ -17716,14 +18224,14 @@ function useSafeEventBus2() {
     } };
   }
 }
-var log6, lookStyles4, ButtonGroup;
+var log7, lookStyles4, ButtonGroup;
 var init_ButtonGroup = __esm({
   "components/core/molecules/ButtonGroup.tsx"() {
     "use client";
     init_cn();
     init_atoms();
     init_useEventBus();
-    log6 = createLogger("almadar:ui:button-group");
+    log7 = createLogger("almadar:ui:button-group");
     lookStyles4 = {
       "right-aligned-buttons": "",
       "floating-bar": "fixed bottom-section left-1/2 -translate-x-1/2 shadow-elevation-toast bg-card p-card-sm rounded-container",
@@ -17804,7 +18312,7 @@ var init_ButtonGroup = __esm({
           {
             variant: "ghost",
             onClick: () => {
-              log6.debug("Filter clicked", { field: filter.field });
+              log7.debug("Filter clicked", { field: filter.field });
             },
             children: filter.label
           },
@@ -18822,7 +19330,7 @@ function collectDrawnItems(nodes) {
   for (const n of nodes) {
     switch (n.type) {
       case "draw-sprite":
-        if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id, anchor: n.anchor, width: n.width, height: n.height });
+        if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id, anchor: n.anchor, width: n.width, height: n.height, rotation: n.rotation });
         break;
       case "draw-shape":
       case "draw-text":
@@ -18832,7 +19340,7 @@ function collectDrawnItems(nodes) {
         break;
       case "draw-sprite-layer":
         for (const it of n.items) {
-          if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id, anchor: it.anchor, width: it.width, height: it.height });
+          if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id, anchor: it.anchor, width: it.width, height: it.height, rotation: it.rotation });
         }
         break;
       case "draw-shape-layer":
@@ -18852,15 +19360,39 @@ function buildHitIndex(items) {
   }
   return m;
 }
+function withPreviewPosition(nodes, id, pos) {
+  return nodes.map((n) => {
+    if (n.type === "draw-sprite-layer" || n.type === "draw-shape-layer" || n.type === "draw-text-layer") {
+      if (!n.items.some((it) => it.id === id)) return n;
+      return { ...n, items: n.items.map((it) => it.id === id ? { ...it, position: pos } : it) };
+    }
+    if (n.type === "draw-group") {
+      if (!Array.isArray(n.items)) return n;
+      return { ...n, items: withPreviewPosition(n.items, id, pos) };
+    }
+    if (n.id === id && "position" in n) {
+      return { ...n, position: pos };
+    }
+    return n;
+  });
+}
 function hitTestSprites(items, projector, point) {
   for (let i = items.length - 1; i >= 0; i--) {
     const it = items[i];
     if (it.id === void 0) continue;
     const r = spriteRect(projector, { position: it.pos, anchor: it.anchor, width: it.width, height: it.height });
-    if (point.x >= r.x && point.x <= r.x + r.w && point.y >= r.y && point.y <= r.y + r.h) return it.id;
+    const test = it.rotation ? rotatePoint(point, { x: r.x + r.w / 2, y: r.y + r.h / 2 }, -it.rotation) : point;
+    if (test.x >= r.x && test.x <= r.x + r.w && test.y >= r.y && test.y <= r.y + r.h) return it.id;
   }
   return void 0;
 }
+function rotatePoint(p, center, radians) {
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  const dx = p.x - center.x;
+  const dy = p.y - center.y;
+  return { x: center.x + dx * cos - dy * sin, y: center.y + dx * sin + dy * cos };
+}
 var init_hitTest = __esm({
   "lib/drawable/hitTest.ts"() {
     init_contract();
@@ -18869,6 +19401,41 @@ var init_hitTest = __esm({
 function normalizeBackdrop(bg) {
   return typeof bg === "string" ? { url: bg, role: "decoration", category: "background" } : bg;
 }
+function selectionOverlayNodes(projector, item) {
+  const r = spriteRect(projector, { position: item.pos, anchor: item.anchor, width: item.width, height: item.height });
+  const tw = projector.tileWidth;
+  const cellTopLeft = projector.anchorPoint(item.pos, "top-left");
+  const offsetX = (r.x - cellTopLeft.x) / tw;
+  const offsetY = (r.y - cellTopLeft.y) / tw;
+  const width = r.w / tw;
+  const height = r.h / tw;
+  const handle = EDIT_HANDLE_SIZE_PX / tw;
+  const ring = {
+    type: "draw-shape",
+    shape: "rect",
+    position: item.pos,
+    anchor: "top-left",
+    offsetX,
+    offsetY,
+    width,
+    height,
+    stroke: EDIT_SELECTION_COLOR,
+    strokeWidth: 2,
+    fill: "none"
+  };
+  const handles = EDIT_SELECTION_CORNERS.map(([cx, cy]) => ({
+    type: "draw-shape",
+    shape: "rect",
+    position: item.pos,
+    anchor: "top-left",
+    offsetX: offsetX + cx * width - handle / 2,
+    offsetY: offsetY + cy * height - handle / 2,
+    width: handle,
+    height: handle,
+    fill: EDIT_SELECTION_COLOR
+  }));
+  return [ring, ...handles];
+}
 function Canvas2D({
   className,
   isLoading = false,
@@ -18882,6 +19449,12 @@ function Canvas2D({
   tileLeaveEvent,
   keyMap,
   keyUpMap,
+  editable = false,
+  selectedId = null,
+  onSelect,
+  onMove,
+  selectEvent,
+  moveEvent,
   camera = "pan-zoom",
   scale = 0.4,
   tileWidth,
@@ -19139,10 +19712,22 @@ function Canvas2D({
     painter.scale(cam.zoom, cam.zoom);
     painter.translate(-viewportSize.width / 2 - cam.x, -viewportSize.height / 2 - cam.y);
     const dctx = { projector, time: timeMs, invalidate: bumpAtlas };
-    for (const node of drawables) paintDrawable(painter, node, dctx);
+    let paintNodes = drawables;
+    if (editable) {
+      const drag = editDragRef.current;
+      if (drag && drag.moved) {
+        paintNodes = withPreviewPosition(paintNodes, drag.id, { x: drag.previewX, y: drag.previewY });
+      }
+      const selectedItem = selectedId != null ? drawnItems.find((it) => it.id === selectedId) : void 0;
+      if (selectedItem) {
+        const overlaySource = drag && drag.moved && drag.id === selectedId ? { ...selectedItem, pos: { x: drag.previewX, y: drag.previewY } } : selectedItem;
+        paintNodes = [...paintNodes, ...selectionOverlayNodes(projector, overlaySource)];
+      }
+    }
+    for (const node of paintNodes) paintDrawable(painter, node, dctx);
     painter.restore();
-    scheduleAnimation(drawables);
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
+    scheduleAnimation(paintNodes);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance, editable, selectedId, drawnItems]);
   useEffect(() => {
     drawTimeRef.current = draw;
   }, [draw]);
@@ -19187,23 +19772,83 @@ function Canvas2D({
     };
   }, [camera, followTarget, lerpToTarget, draw]);
   const singlePointerActiveRef = useRef(false);
+  const editDragRef = useRef(null);
+  const pointerToScene = useCallback((clientX, clientY) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return { x: 0, y: 0 };
+    const world = screenToWorld(clientX, clientY, canvas, viewportSize);
+    const adjustedX = world.x - scaledTileWidth / 2;
+    const adjustedY = squareGrid ? world.y - scaledTileWidth / 2 : world.y - scaledDiamondTopY - scaledFloorHeight / 2;
+    return unproject(adjustedX, adjustedY);
+  }, [screenToWorld, viewportSize, scaledTileWidth, squareGrid, scaledDiamondTopY, scaledFloorHeight, unproject]);
   const handleCanvasPointerDown = useCallback((e) => {
     singlePointerActiveRef.current = true;
+    if (editable) {
+      if (!canvasRef.current) return;
+      const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
+      const hitId = hitTestSprites(drawnItems, projector, world);
+      if (hitId === void 0) return;
+      const item = [...drawnItems].reverse().find((it) => it.id === hitId);
+      if (!item) return;
+      editDragRef.current = {
+        id: hitId,
+        pointerId: e.pointerId,
+        startClientX: e.clientX,
+        startClientY: e.clientY,
+        startSceneX: item.pos.x,
+        startSceneY: item.pos.y,
+        moved: false,
+        previewX: item.pos.x,
+        previewY: item.pos.y
+      };
+      return;
+    }
     if (enableCamera) handlePointerDown(e);
-  }, [enableCamera, handlePointerDown]);
+  }, [editable, screenToWorld, viewportSize, drawnItems, projector, enableCamera, handlePointerDown]);
   const handleCanvasPointerMove = useCallback((e) => {
+    if (editable) {
+      const drag = editDragRef.current;
+      if (!drag || drag.pointerId !== e.pointerId) return;
+      const dxPx = e.clientX - drag.startClientX;
+      const dyPx = e.clientY - drag.startClientY;
+      if (!drag.moved && Math.abs(dxPx) + Math.abs(dyPx) <= 5) return;
+      drag.moved = true;
+      const nowScene = pointerToScene(e.clientX, e.clientY);
+      const startScene = pointerToScene(drag.startClientX, drag.startClientY);
+      drag.previewX = drag.startSceneX + (nowScene.x - startScene.x);
+      drag.previewY = drag.startSceneY + (nowScene.y - startScene.y);
+      draw();
+      return;
+    }
     if (enableCamera) handlePointerMove(e, () => draw());
-  }, [enableCamera, handlePointerMove, draw]);
+  }, [editable, pointerToScene, draw, enableCamera, handlePointerMove]);
   const handleCanvasHover = useCallback((e) => {
     if (singlePointerActiveRef.current) return;
     if (!tileHoverEvent || !canvasRef.current) return;
-    const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
-    const adjustedX = world.x - scaledTileWidth / 2;
-    const adjustedY = squareGrid ? world.y - scaledTileWidth / 2 : world.y - scaledDiamondTopY - scaledFloorHeight / 2;
-    const isoPos = unproject(adjustedX, adjustedY);
+    const isoPos = pointerToScene(e.clientX, e.clientY);
     eventBus.emit(`UI:${tileHoverEvent}`, { x: isoPos.x, y: isoPos.y });
-  }, [screenToWorld, viewportSize, scaledTileWidth, squareGrid, scaledDiamondTopY, scaledFloorHeight, unproject, tileHoverEvent, eventBus]);
+  }, [pointerToScene, tileHoverEvent, eventBus]);
   const handleCanvasPointerUp = useCallback((e) => {
+    if (editable) {
+      singlePointerActiveRef.current = false;
+      const drag = editDragRef.current;
+      if (drag && drag.pointerId === e.pointerId) {
+        editDragRef.current = null;
+        if (drag.moved) {
+          onMove?.(drag.id, drag.previewX, drag.previewY);
+          if (moveEvent) eventBus.emit(`UI:${moveEvent}`, { id: drag.id, x: drag.previewX, y: drag.previewY });
+          draw();
+          return;
+        }
+        const next = selectedId === drag.id ? null : drag.id;
+        onSelect?.(next);
+        if (selectEvent) eventBus.emit(`UI:${selectEvent}`, { id: next });
+        return;
+      }
+      onSelect?.(null);
+      if (selectEvent) eventBus.emit(`UI:${selectEvent}`, { id: null });
+      return;
+    }
     singlePointerActiveRef.current = false;
     if (enableCamera) handlePointerUp();
     if (dragDistance() > 5) return;
@@ -19214,16 +19859,14 @@ function Canvas2D({
       eventBus.emit(`UI:${unitClickEvent}`, { unitId: spriteHit });
       return;
     }
-    const adjustedX = world.x - scaledTileWidth / 2;
-    const adjustedY = squareGrid ? world.y - scaledTileWidth / 2 : world.y - scaledDiamondTopY - scaledFloorHeight / 2;
-    const isoPos = unproject(adjustedX, adjustedY);
+    const isoPos = pointerToScene(e.clientX, e.clientY);
     const hitId = hitIndex.get(`${isoPos.x},${isoPos.y}`);
     if (hitId !== void 0 && unitClickEvent) {
       eventBus.emit(`UI:${unitClickEvent}`, { unitId: hitId });
     } else if (tileClickEvent) {
       eventBus.emit(`UI:${tileClickEvent}`, { x: isoPos.x, y: isoPos.y });
     }
-  }, [enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, scaledTileWidth, squareGrid, scaledDiamondTopY, scaledFloorHeight, unproject, hitIndex, drawnItems, projector, tileClickEvent, unitClickEvent, eventBus]);
+  }, [editable, selectedId, onMove, moveEvent, onSelect, selectEvent, eventBus, draw, enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, drawnItems, projector, tileClickEvent, unitClickEvent, hitIndex, pointerToScene]);
   const handleCanvasPointerLeave = useCallback(() => {
     handleMouseLeave();
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
@@ -19242,7 +19885,7 @@ function Canvas2D({
   }, [enableCamera, handlePointerUp]);
   const gestureHandlers = useCanvasGestures({
     canvasRef,
-    enabled: enableCamera || !!tileHoverEvent || !!tileClickEvent || !!unitClickEvent,
+    enabled: enableCamera || !!tileHoverEvent || !!tileClickEvent || !!unitClickEvent || editable,
     onPointerDown: handleCanvasPointerDown,
     onPointerMove: handleCanvasPointerMove,
     onPointerUp: handleCanvasPointerUp,
@@ -19374,7 +20017,7 @@ function Canvas2D({
     }
   ) });
 }
-var canvas2DLog;
+var canvas2DLog, EDIT_SELECTION_COLOR, EDIT_HANDLE_SIZE_PX, EDIT_SELECTION_CORNERS;
 var init_Canvas2D = __esm({
   "components/game/molecules/Canvas2D.tsx"() {
     "use client";
@@ -19399,8 +20042,12 @@ var init_Canvas2D = __esm({
     init_DrawGroup();
     init_registry();
     init_hitTest();
+    init_contract();
     init_isometric();
     canvas2DLog = createLogger("almadar:ui:game-canvas");
+    EDIT_SELECTION_COLOR = "#3b82f6";
+    EDIT_HANDLE_SIZE_PX = 8;
+    EDIT_SELECTION_CORNERS = [[0, 0], [1, 0], [0, 1], [1, 1]];
     Canvas2D.displayName = "Canvas2D";
   }
 });
@@ -19442,6 +20089,12 @@ function Canvas({
   featureClickEvent,
   keyMap,
   keyUpMap,
+  editable,
+  selectedId,
+  onSelect,
+  onMove,
+  selectEvent,
+  moveEvent,
   children
 }) {
   canvasLog.debug("Canvas render", { mode, drawablesCount: drawables?.length, projection, camera: camera ? JSON.stringify(camera) : void 0 });
@@ -19519,6 +20172,12 @@ function Canvas({
       tileLeaveEvent,
       keyMap,
       keyUpMap,
+      editable,
+      selectedId,
+      onSelect,
+      onMove,
+      selectEvent,
+      moveEvent,
       ...children !== void 0 ? { children } : {}
     }
   );
@@ -21901,6 +22560,12 @@ function commandMatches(command, query) {
   if (matchesQuery(query, command.label)) return true;
   return (command.keywords ?? []).some((keyword) => matchesQuery(query, keyword));
 }
+function dispatchCommandPaletteCommand(command, deps) {
+  if (command.disabled) return;
+  if (command.event) deps.emit(`UI:${command.event}`, { commandId: command.id });
+  if (command.action) deps.emit(`UI:${command.action}`, command.actionPayload ?? {});
+  deps.onSelect?.(command);
+}
 var UNGROUPED, CommandPalette;
 var init_CommandPalette = __esm({
   "components/core/molecules/CommandPalette.tsx"() {
@@ -21955,9 +22620,7 @@ var init_CommandPalette = __esm({
       const handleSelect = useCallback(
         (command) => {
           if (command.disabled) return;
-          if (command.event) eventBus.emit(`UI:${command.event}`, { commandId: command.id });
-          if (command.action) eventBus.emit(`UI:${command.action}`, command.actionPayload ?? {});
-          onSelect?.(command);
+          dispatchCommandPaletteCommand(command, { emit: eventBus.emit, onSelect });
           handleClose();
         },
         [eventBus, onSelect, handleClose]
@@ -28177,9 +28840,9 @@ function debug(...args) {
   const [first, ...rest] = args;
   const message = typeof first === "string" ? first : "<debug>";
   if (rest.length === 0 && typeof first === "string") {
-    log7.debug(message);
+    log8.debug(message);
   } else {
-    log7.debug(message, { args: rest.length > 0 ? formatArgs(rest) : formatArgs([first]) });
+    log8.debug(message, { args: rest.length > 0 ? formatArgs(rest) : formatArgs([first]) });
   }
 }
 function debugGroup(label) {
@@ -28207,11 +28870,11 @@ function toLogMetaValue(v) {
   }
   return String(v);
 }
-var NAMESPACE, log7;
+var NAMESPACE, log8;
 var init_debug = __esm({
   "lib/debug.ts"() {
     NAMESPACE = "almadar:ui:debug";
-    log7 = createLogger(NAMESPACE);
+    log8 = createLogger(NAMESPACE);
     createLogger("almadar:ui:debug:input");
     createLogger("almadar:ui:debug:collision");
     createLogger("almadar:ui:debug:physics");
@@ -30897,15 +31560,19 @@ function GameAudioToggle({
   size = "sm",
   className,
   onAsset,
-  offAsset
+  offAsset,
+  toggleEvent
 }) {
   const ctx = useGameAudioContextOptional();
   const [localMuted, setLocalMuted] = useState(false);
   const muted = ctx ? ctx.muted : localMuted;
   const setMuted = ctx ? ctx.setMuted : setLocalMuted;
+  const eventBus = useEventBus();
   const handleToggle = useCallback(() => {
-    setMuted(!muted);
-  }, [muted, setMuted]);
+    const next = !muted;
+    setMuted(next);
+    if (toggleEvent) eventBus.emit(`UI:${toggleEvent}`, { muted: next });
+  }, [muted, setMuted, toggleEvent, eventBus]);
   const activeAsset = muted ? offAsset : onAsset;
   return /* @__PURE__ */ jsx(
     Button,
@@ -30924,6 +31591,7 @@ var init_GameAudioToggle = __esm({
     "use client";
     init_atoms();
     init_cn();
+    init_useEventBus();
     init_GameIcon();
     GameAudioToggle.displayName = "GameAudioToggle";
   }
@@ -31195,6 +31863,47 @@ var init_useGameAudio = __esm({
     useGameAudio.displayName = "useGameAudio";
   }
 });
+function GameAudioCue({
+  cue,
+  cueSeq,
+  music,
+  muted,
+  volume,
+  manifest,
+  baseUrl
+}) {
+  const { play, playMusic, stopMusic, setMuted, setMasterVolume } = useGameAudio({
+    manifest,
+    baseUrl,
+    initialMuted: muted,
+    initialVolume: volume
+  });
+  const prevCueSeqRef = useRef(cueSeq);
+  useEffect(() => {
+    if (cue && cueSeq !== void 0 && cueSeq !== prevCueSeqRef.current) {
+      play(cue);
+    }
+    prevCueSeqRef.current = cueSeq;
+  }, [cue, cueSeq, play]);
+  useEffect(() => {
+    if (music) playMusic(music);
+    else stopMusic();
+  }, [music, playMusic, stopMusic]);
+  useEffect(() => {
+    if (muted !== void 0) setMuted(muted);
+  }, [muted, setMuted]);
+  useEffect(() => {
+    if (volume !== void 0) setMasterVolume(volume);
+  }, [volume, setMasterVolume]);
+  return null;
+}
+var init_GameAudioCue = __esm({
+  "components/game/atoms/GameAudioCue.tsx"() {
+    "use client";
+    init_useGameAudio();
+    GameAudioCue.displayName = "GameAudioCue";
+  }
+});
 function isKnownState(s) {
   return s in DEFAULT_STATE_STYLES;
 }
@@ -32091,15 +32800,18 @@ var init_physicsPresets = __esm({
     ];
   }
 });
-var GAME_FONTS, GameShell;
-var init_GameShell = __esm({
-  "components/game/templates/GameShell.tsx"() {
-    init_cn();
-    init_Box();
-    init_Card();
-    init_Typography();
-    init_AtlasImage();
-    GAME_FONTS = {
+
+// lib/gameFonts.ts
+function resolveGameFontFamily(input) {
+  if (!input) return void 0;
+  const resolved = GAME_FONT_KEYS[input];
+  if (resolved) return `'${resolved}', ui-sans-serif, system-ui, sans-serif`;
+  return input;
+}
+var GAME_FONT_KEYS;
+var init_gameFonts = __esm({
+  "lib/gameFonts.ts"() {
+    GAME_FONT_KEYS = {
       fredoka: "Fredoka",
       future: "Kenney Future",
       "future-narrow": "Kenney Future Narrow",
@@ -32107,6 +32819,17 @@ var init_GameShell = __esm({
       blocks: "Kenney Blocks",
       mini: "Kenney Mini"
     };
+  }
+});
+var GameShell;
+var init_GameShell = __esm({
+  "components/game/templates/GameShell.tsx"() {
+    init_cn();
+    init_gameFonts();
+    init_Box();
+    init_Card();
+    init_Typography();
+    init_AtlasImage();
     GameShell = ({
       appName = "Game",
       hud,
@@ -32120,7 +32843,7 @@ var init_GameShell = __esm({
       fontFamily,
       "data-theme": dataTheme
     }) => {
-      const font = fontFamily ? GAME_FONTS[fontFamily] ?? fontFamily : void 0;
+      const displayFont = resolveGameFontFamily(fontFamily);
       return /* @__PURE__ */ jsxs(
         Box,
         {
@@ -32139,7 +32862,7 @@ var init_GameShell = __esm({
             // passed — an always-on inline stamp would shadow the orbital's
             // inline-theme font-family-display token (inline style beats the
             // theme provider's vars for the whole shell subtree).
-            ...font ? { "--font-family-display": `'${font}', ui-sans-serif, system-ui, sans-serif` } : {}
+            ...displayFont ? { "--font-family-display": displayFont } : {}
           },
           children: [
             backgroundAsset && /* @__PURE__ */ jsx(
@@ -32272,6 +32995,7 @@ var init_molecules = __esm({
     init_Canvas();
     init_useUnitSpriteAtlas();
     init_GameAudioToggle();
+    init_GameAudioCue();
     init_useGameAudio();
     init_useCamera();
     init_TraitStateViewer();
@@ -32300,6 +33024,7 @@ var init_MathCanvas = __esm({
     init_perf();
     init_atoms();
     init_Stack();
+    init_gameFonts();
     init_LearningCanvas();
     MathCanvas = ({
       className,
@@ -32319,6 +33044,7 @@ var init_MathCanvas = __esm({
       showTickLabels = false,
       tickLabelFontSize = 10,
       labelFontSize = 12,
+      fontFamily: fontFamilyProp,
       showCurveLabels = false,
       curves = [],
       points = [],
@@ -32341,6 +33067,7 @@ var init_MathCanvas = __esm({
       error
     }) => {
       const eventBus = useEventBus();
+      const fontFamily = resolveGameFontFamily(fontFamilyProp);
       const keyMapKey = keyMap ? JSON.stringify(keyMap) : null;
       const keyUpMapKey = keyUpMap ? JSON.stringify(keyUpMap) : null;
       const stableKeyMap = useMemo(() => keyMap, [keyMapKey]);
@@ -32390,18 +33117,18 @@ var init_MathCanvas = __esm({
           let kx = 0;
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep, kx++) {
             if (kx % labelEveryX === 0 && x !== 0) {
-              out.push({ type: "text", x: mapX(x), y: xAxisY + 12, text: formatTick(x), color: "#6b7280", fontSize: tickLabelFontSize, align: "center" });
+              out.push({ type: "text", fontFamily, x: mapX(x), y: xAxisY + 12, text: formatTick(x), color: "#6b7280", fontSize: tickLabelFontSize, align: "center" });
             }
           }
           const labelEveryY = Math.max(1, Math.ceil((yMax - yMin) / gridStep / Math.floor(plotH / 28)));
           let ky = 0;
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep, ky++) {
             if (ky % labelEveryY === 0 && y !== 0) {
-              out.push({ type: "text", x: yAxisX - 6, y: mapY(y), text: formatTick(y), color: "#6b7280", fontSize: tickLabelFontSize, align: "right" });
+              out.push({ type: "text", fontFamily, x: yAxisX - 6, y: mapY(y), text: formatTick(y), color: "#6b7280", fontSize: tickLabelFontSize, align: "right" });
             }
           }
           if (xMin <= 0 && xMax >= 0 && yMin <= 0 && yMax >= 0) {
-            out.push({ type: "text", x: yAxisX - 6, y: xAxisY + 12, text: "0", color: "#6b7280", fontSize: tickLabelFontSize, align: "right" });
+            out.push({ type: "text", fontFamily, x: yAxisX - 6, y: xAxisY + 12, text: "0", color: "#6b7280", fontSize: tickLabelFontSize, align: "right" });
           }
         }
         for (const region of regions) {
@@ -32428,6 +33155,7 @@ var init_MathCanvas = __esm({
             const mid = Math.floor(region.samples.length / 2);
             out.push({
               type: "text",
+              fontFamily,
               x: mapX((first.x + last.x) / 2),
               y: (mapY(region.samples[mid].y) + mapY(baseline)) / 2,
               text: region.label,
@@ -32464,14 +33192,14 @@ var init_MathCanvas = __esm({
             const px = mapX(guide.at);
             out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color, dash });
             if (guide.label) {
-              out.push({ type: "text", x: px + 4, y: margin + 10, text: guide.label, color, fontSize: 11 });
+              out.push({ type: "text", fontFamily, x: px + 4, y: margin + 10, text: guide.label, color, fontSize: 11 });
             }
           } else {
             if (guide.at < yMin || guide.at > yMax) continue;
             const py = mapY(guide.at);
             out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color, dash });
             if (guide.label) {
-              out.push({ type: "text", x: width - margin - 4, y: py - 8, text: guide.label, color, fontSize: labelFontSize, align: "right" });
+              out.push({ type: "text", fontFamily, x: width - margin - 4, y: py - 8, text: guide.label, color, fontSize: labelFontSize, align: "right" });
             }
           }
         }
@@ -32510,6 +33238,7 @@ var init_MathCanvas = __esm({
           if (showCurveLabels && curve.label && lastInRange) {
             out.push({
               type: "text",
+              fontFamily,
               x: mapX(lastInRange.x) + 6,
               y: mapY(lastInRange.y) - 6,
               text: curve.label,
@@ -32547,6 +33276,7 @@ var init_MathCanvas = __esm({
           if (hop.label) {
             out.push({
               type: "text",
+              fontFamily,
               x: (x1 + x2) / 2,
               y: xAxisY - peak - 8,
               text: hop.label,
@@ -32574,6 +33304,7 @@ var init_MathCanvas = __esm({
             const rad = mid * Math.PI / 180;
             out.push({
               type: "text",
+              fontFamily,
               x: mapX(angle.x + 1.35 * radius * Math.cos(rad)),
               y: mapY(angle.y + 1.35 * radius * Math.sin(rad)),
               text: angle.label,
@@ -32595,7 +33326,7 @@ var init_MathCanvas = __esm({
             fill: isOpen ? "#ffffff" : p.color ?? "#dc2626"
           });
           if (p.label) {
-            out.push({ type: "text", x: mapX(p.x) + 8, y: mapY(p.y) - 8, text: p.label, color: p.color ?? "#111827", fontSize: labelFontSize });
+            out.push({ type: "text", fontFamily, x: mapX(p.x) + 8, y: mapY(p.y) - 8, text: p.label, color: p.color ?? "#111827", fontSize: labelFontSize });
           }
         }
         for (const v of vectors) {
@@ -32606,7 +33337,7 @@ var init_MathCanvas = __esm({
           const y2 = mapY(v.y + v.vy);
           out.push({ type: "arrow", x1, y1, x2, y2, color: v.color ?? "#7c3aed", lineWidth: 2 });
           if (v.label) {
-            out.push({ type: "text", x: x2 + 6, y: y2 - 6, text: v.label, color: v.color ?? "#7c3aed", fontSize: labelFontSize });
+            out.push({ type: "text", fontFamily, x: x2 + 6, y: y2 - 6, text: v.label, color: v.color ?? "#7c3aed", fontSize: labelFontSize });
           }
         }
         out.push(...shapes);
@@ -32627,6 +33358,7 @@ var init_MathCanvas = __esm({
         showTickLabels,
         tickLabelFontSize,
         labelFontSize,
+        fontFamily,
         showCurveLabels,
         curves,
         points,
@@ -32682,6 +33414,7 @@ var init_MathCanvas = __esm({
             width,
             height,
             backgroundColor,
+            fontFamily,
             shapes: derivedShapes,
             drawables,
             projector,
@@ -33914,13 +34647,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect70, useRef: useRef67, useCallback: useCallback109, useState: useState109 } = React79__default;
+      const { useEffect: useEffect72, useRef: useRef70, useCallback: useCallback109, useState: useState110 } = React79__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 = useRef67({ centerLat, centerLng, zoom });
-        useEffect70(() => {
+        const prevRef = useRef70({ centerLat, centerLng, zoom });
+        useEffect72(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -33931,7 +34664,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect70(() => {
+        useEffect72(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -33959,7 +34692,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState109(null);
+        const [clickedPosition, setClickedPosition] = useState110(null);
         const handleMapClick = useCallback109((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -48897,7 +49630,7 @@ function getAllEvents(traits2) {
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [log19, setLog] = React79.useState([]);
+  const [log20, setLog] = React79.useState([]);
   const prevStatesRef = React79.useRef(/* @__PURE__ */ new Map());
   React79.useEffect(() => {
     for (const trait of traits2) {
@@ -48961,9 +49694,9 @@ function EventDispatcherTab({ traits: traits2, schema }) {
       /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.otherEvents") }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: unavailableEvents.map((event) => /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", className: "opacity-50", children: event }, event)) })
     ] }),
-    log19.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+    log20.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.recentTransitions") }),
-      /* @__PURE__ */ jsx(Stack, { gap: "xs", children: log19.map((entry, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
+      /* @__PURE__ */ jsx(Stack, { gap: "xs", children: log20.map((entry, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
         /* @__PURE__ */ jsx("span", { className: "text-primary", children: entry.traitName }),
         " ",
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: entry.from }),
@@ -51154,6 +51887,7 @@ var init_component_registry_generated = __esm({
     init_FormSection();
     init_FormSectionHeader();
     init_FxOverlay();
+    init_GameAudioCue();
     init_GameAudioToggle();
     init_GameHud();
     init_GameIcon();
@@ -51431,6 +52165,7 @@ var init_component_registry_generated = __esm({
       "FormLayout": FormLayout,
       "FormSectionHeader": FormSectionHeader,
       "FxOverlay": FxOverlay,
+      "GameAudioCue": GameAudioCue,
       "GameAudioToggle": GameAudioToggle,
       "GameHud": GameHud,
       "GameIcon": GameIcon,
@@ -51879,7 +52614,9 @@ function UISlotComponentInner({
   className,
   children,
   pattern,
-  sourceTrait
+  sourceTrait,
+  fallback,
+  mode = "replace"
 }) {
   const { slots, clear } = useUISlots();
   const eventBus = useEventBus();
@@ -51931,12 +52668,26 @@ function UISlotComponentInner({
     );
   }
   if (!content) {
+    if (fallback !== void 0) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          id: `slot-${slot}`,
+          className: cn("ui-slot", `ui-slot-${slot}`, className),
+          "data-testid": `ui-slot-${slot}`,
+          "data-slot-mode": "fallback",
+          children: fallback
+        }
+      );
+    }
     if (!portal) {
       return /* @__PURE__ */ jsx(
         Box,
         {
           id: `slot-${slot}`,
-          className: cn("ui-slot", `ui-slot-${slot}`, className)
+          className: cn("ui-slot", `ui-slot-${slot}`, className),
+          "data-testid": `ui-slot-${slot}`,
+          "data-slot-mode": "empty"
         }
       );
     }
@@ -51953,29 +52704,51 @@ function UISlotComponentInner({
     clear(slot);
   };
   if (portal) {
-    if (contained) {
-      return renderContainedPortal(t, slot, content, handleDismiss);
-    }
-    return /* @__PURE__ */ jsx(
-      SlotPortal,
+    const inlineFallback = mode === "append" && fallback !== void 0 ? /* @__PURE__ */ jsx(
+      Box,
       {
-        slot,
-        content,
-        position,
-        onDismiss: handleDismiss
+        id: `slot-${slot}-fallback`,
+        className: cn("ui-slot", `ui-slot-${slot}-fallback`, className),
+        "data-testid": `ui-slot-${slot}-fallback`,
+        "data-slot-mode": "append",
+        children: fallback
       }
-    );
+    ) : null;
+    if (contained) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        inlineFallback,
+        renderContainedPortal(t, slot, content, handleDismiss)
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      inlineFallback,
+      /* @__PURE__ */ jsx(
+        SlotPortal,
+        {
+          slot,
+          content,
+          position,
+          onDismiss: handleDismiss
+        }
+      )
+    ] });
   }
   const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss: handleDismiss });
   const wrappedContent = suspenseConfig.enabled ? /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, { fallback: getSlotFallback(slot, suspenseConfig), children: slotContent }) }) : /* @__PURE__ */ jsx(ErrorBoundary, { children: slotContent });
-  return /* @__PURE__ */ jsx(
+  const showFallback = mode === "append" && fallback !== void 0;
+  return /* @__PURE__ */ jsxs(
     Box,
     {
       id: `slot-${slot}`,
       className: cn("ui-slot", `ui-slot-${slot}`, className),
       "data-pattern": content.pattern,
       "data-source-trait": content.sourceTrait,
-      children: /* @__PURE__ */ jsx(MaybeTraitScope, { sourceTrait: content.sourceTrait, children: wrappedContent })
+      "data-testid": `ui-slot-${slot}`,
+      "data-slot-mode": showFallback ? "append" : "content",
+      children: [
+        showFallback ? fallback : null,
+        /* @__PURE__ */ jsx(MaybeTraitScope, { sourceTrait: content.sourceTrait, children: wrappedContent })
+      ]
     }
   );
 }
@@ -52917,7 +53690,7 @@ init_AboutPageTemplate();
 
 // components/index.ts
 init_cn();
-var log8 = createLogger("almadar:ui:orbital-history");
+var log9 = createLogger("almadar:ui:orbital-history");
 function useOrbitalHistory(options) {
   const { appId, authToken, userId, onHistoryChange, onRevertSuccess } = options;
   const getHeaders = useCallback(() => {
@@ -52979,7 +53752,7 @@ function useOrbitalHistory(options) {
         setCurrentVersion(mergedTimeline[0].version);
       }
     } catch (err) {
-      log8.error("Failed to load history", { error: err instanceof Error ? err : String(err) });
+      log9.error("Failed to load history", { error: err instanceof Error ? err : String(err) });
       setError(err instanceof Error ? err.message : "Failed to load history");
     } finally {
       setIsLoading(false);
@@ -53012,7 +53785,7 @@ function useOrbitalHistory(options) {
         error: data.error || "Unknown error during revert"
       };
     } catch (err) {
-      log8.error("Failed to revert", { error: err instanceof Error ? err : String(err) });
+      log9.error("Failed to revert", { error: err instanceof Error ? err : String(err) });
       return {
         success: false,
         error: err instanceof Error ? err.message : "Failed to revert"
@@ -53036,7 +53809,7 @@ function useOrbitalHistory(options) {
     refresh
   };
 }
-var log9 = createLogger("almadar:ui:filesystem");
+var log10 = createLogger("almadar:ui:filesystem");
 function useFileSystem() {
   const [status, setStatus] = useState("idle");
   const [error, setError] = useState(null);
@@ -53051,7 +53824,7 @@ function useFileSystem() {
     setError(null);
     setIsLoading(true);
     try {
-      log9.debug("Booting WebContainer");
+      log10.debug("Booting WebContainer");
       await new Promise((resolve) => setTimeout(resolve, 100));
       setStatus("ready");
     } catch (err) {
@@ -53112,7 +53885,7 @@ function useFileSystem() {
       setFiles(newTree);
       setStatus("running");
     } catch (err) {
-      log9.error("Failed to mount files", { error: err instanceof Error ? err : String(err) });
+      log10.error("Failed to mount files", { error: err instanceof Error ? err : String(err) });
     } finally {
       setIsLoading(false);
     }
@@ -53153,7 +53926,7 @@ function useFileSystem() {
     const path = contentArg !== void 0 ? pathOrContent : selectedPath;
     const content = contentArg !== void 0 ? contentArg : pathOrContent;
     if (!path) {
-      log9.warn("updateContent called without path and no file selected");
+      log10.warn("updateContent called without path and no file selected");
       return;
     }
     setFileContents((prev) => {
@@ -53169,14 +53942,14 @@ function useFileSystem() {
     setSelectedFile((prev) => prev ? { ...prev, content, isDirty: true } : null);
   }, []);
   const refreshTree = useCallback(async () => {
-    log9.debug("Refreshing tree");
+    log10.debug("Refreshing tree");
   }, []);
   const runCommand = useCallback(async (command) => {
-    log9.debug("Running command", { command });
+    log10.debug("Running command", { command });
     return { exitCode: 0, output: "" };
   }, []);
   const startDevServer = useCallback(async () => {
-    log9.debug("Starting dev server");
+    log10.debug("Starting dev server");
     setPreviewUrl("http://localhost:5173");
   }, []);
   return {
@@ -53199,7 +53972,7 @@ function useFileSystem() {
     startDevServer
   };
 }
-var log10 = createLogger("almadar:ui:extensions");
+var log11 = createLogger("almadar:ui:extensions");
 var defaultManifest = {
   languages: {
     typescript: { extensions: [".ts", ".tsx"], icon: "ts", color: "#3178c6" },
@@ -53218,7 +53991,7 @@ function useExtensions(options) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const loadExtension = useCallback(async (extensionId) => {
-    log10.debug("Loading extension", { extensionId });
+    log11.debug("Loading extension", { extensionId });
   }, []);
   const loadExtensions = useCallback(async () => {
     setIsLoading(true);
@@ -53290,7 +54063,7 @@ function useExtensions(options) {
     getExtensionForFile
   };
 }
-var log11 = createLogger("almadar:ui:file-editor");
+var log12 = createLogger("almadar:ui:file-editor");
 function useFileEditor(options) {
   const { extensions, fileSystem, onSchemaUpdate } = options;
   const [openFiles, setOpenFiles] = useState([]);
@@ -53315,7 +54088,7 @@ function useFileEditor(options) {
       setOpenFiles((prev) => [...prev, newFile]);
       setActiveFilePath(path);
     } catch (err) {
-      log11.error("Failed to open file", { error: err instanceof Error ? err : String(err) });
+      log12.error("Failed to open file", { error: err instanceof Error ? err : String(err) });
     }
   }, [openFiles, fileSystem, extensions]);
   const closeFile = useCallback((path) => {
@@ -53376,7 +54149,7 @@ function useFileEditor(options) {
         }
       }
     } catch (err) {
-      log11.error("Failed to save file", { error: err instanceof Error ? err : String(err) });
+      log12.error("Failed to save file", { error: err instanceof Error ? err : String(err) });
     } finally {
       setIsSaving(false);
     }
@@ -53405,7 +54178,7 @@ function useFileEditor(options) {
     saveAllFiles
   };
 }
-var log12 = createLogger("almadar:ui:compile");
+var log13 = createLogger("almadar:ui:compile");
 function useCompile() {
   const [isCompiling, setIsCompiling] = useState(false);
   const [stage, setStage] = useState("idle");
@@ -53416,7 +54189,7 @@ function useCompile() {
     setStage("compiling");
     setError(null);
     try {
-      log12.debug("Compiling schema", { name: schema.name });
+      log13.debug("Compiling schema", { name: schema.name });
       const result = {
         success: true,
         files: []
@@ -53442,7 +54215,7 @@ function useCompile() {
     compileSchema
   };
 }
-var log13 = createLogger("almadar:ui:preview");
+var log14 = createLogger("almadar:ui:preview");
 function usePreview(options) {
   const [previewUrl, setPreviewUrl] = useState(null);
   const [isLoading, setIsLoading] = useState(!!options?.appId);
@@ -53476,17 +54249,17 @@ function usePreview(options) {
       setIsLoading(false);
       return;
     }
-    log13.debug("Setting up preview for app", { appId });
+    log14.debug("Setting up preview for app", { appId });
     setPreviewUrl(`/api/orbitals/${appId}`);
     setIsLoading(false);
   }, [options?.appId]);
   const startPreview = useCallback(async () => {
-    log13.debug("startPreview called");
+    log14.debug("startPreview called");
   }, []);
   const stopPreview = useCallback(async () => {
     setIsLoading(true);
     try {
-      log13.debug("Stopping preview server");
+      log14.debug("Stopping preview server");
       setPreviewUrl(null);
       setApp(null);
     } finally {
@@ -53495,15 +54268,15 @@ function usePreview(options) {
   }, []);
   const refresh = useCallback(async () => {
     if (!previewUrl) return;
-    log13.debug("Refreshing preview");
+    log14.debug("Refreshing preview");
     setPreviewUrl(`${previewUrl.split("?")[0]}?t=${Date.now()}`);
   }, [previewUrl]);
   const handleRefresh = useCallback(async () => {
-    log13.debug("Handle refresh");
+    log14.debug("Handle refresh");
     await refresh();
   }, [refresh]);
   const handleReset = useCallback(async () => {
-    log13.debug("Resetting preview");
+    log14.debug("Resetting preview");
     setError(null);
     setLoadError(null);
     setErrorToast(null);
@@ -53537,7 +54310,7 @@ function usePreview(options) {
     dismissErrorToast
   };
 }
-var log14 = createLogger("almadar:ui:agent-chat");
+var log15 = createLogger("almadar:ui:agent-chat");
 function useAgentChat(options) {
   const [messages, setMessages] = useState([]);
   const [status, setStatus] = useState("idle");
@@ -53560,7 +54333,7 @@ function useAgentChat(options) {
         timestamp: Date.now()
       };
       setMessages((prev) => [...prev, userMessage]);
-      log14.debug("Sending message", { content });
+      log15.debug("Sending message", { content });
       const assistantMessage = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
@@ -53583,7 +54356,7 @@ function useAgentChat(options) {
     setError(null);
     const skillName = Array.isArray(skill) ? skill[0] : skill;
     try {
-      log14.debug("Starting generation", () => ({ skillName, prompt, genOptions: JSON.stringify(genOptions) }));
+      log15.debug("Starting generation", () => ({ skillName, prompt, genOptions: JSON.stringify(genOptions) }));
       await new Promise((resolve) => setTimeout(resolve, 100));
       setStatus("complete");
       options?.onComplete?.();
@@ -53595,10 +54368,10 @@ function useAgentChat(options) {
     }
   }, [options]);
   const continueConversation = useCallback(async (message) => {
-    log14.debug("Continue conversation", { message: Array.isArray(message) ? message : [message] });
+    log15.debug("Continue conversation", { message: Array.isArray(message) ? message : [message] });
   }, []);
   const resumeWithDecision = useCallback(async (decisions) => {
-    log14.debug("Resume with decision", () => ({ decisions: JSON.stringify(decisions), count: decisions.length }));
+    log15.debug("Resume with decision", () => ({ decisions: JSON.stringify(decisions), count: decisions.length }));
     setInterrupt(null);
   }, []);
   const cancel = useCallback(() => {
@@ -53635,7 +54408,7 @@ function useAgentChat(options) {
     clearHistory
   };
 }
-var log15 = createLogger("almadar:ui:validation");
+var log16 = createLogger("almadar:ui:validation");
 function useValidation() {
   const [result, setResult] = useState(null);
   const [isValidating, setIsValidating] = useState(false);
@@ -53649,7 +54422,7 @@ function useValidation() {
     setStage("validating");
     setProgressMessage("Validating schema...");
     try {
-      log15.debug("Validating app", { appId });
+      log16.debug("Validating app", { appId });
       const validationResult = {
         valid: true,
         errors: [],
@@ -53702,7 +54475,7 @@ function useValidation() {
     reset
   };
 }
-var log16 = createLogger("almadar:ui:deep-agent");
+var log17 = createLogger("almadar:ui:deep-agent");
 function useDeepAgentGeneration() {
   const [requests, setRequests] = useState([]);
   const [currentRequest, setCurrentRequest] = useState(null);
@@ -53726,7 +54499,7 @@ function useDeepAgentGeneration() {
     setCurrentRequest(request);
     setRequests((prev) => [...prev, request]);
     try {
-      log16.debug("Generating from prompt", { prompt });
+      log17.debug("Generating from prompt", { prompt });
       await new Promise((resolve) => setTimeout(resolve, 100));
       request.status = "completed";
       setCurrentRequest(request);
@@ -53746,7 +54519,7 @@ function useDeepAgentGeneration() {
     }
   }, []);
   const startGeneration = useCallback(async (skill, prompt, _options) => {
-    log16.debug("Starting generation with skill", { skill });
+    log17.debug("Starting generation with skill", { skill });
     await generate(prompt);
   }, [generate]);
   const cancelGeneration = useCallback(() => {
@@ -53768,7 +54541,7 @@ function useDeepAgentGeneration() {
     setIsComplete(false);
   }, []);
   const submitInterruptDecisions = useCallback((decisions) => {
-    log16.debug("Submitting interrupt decisions", () => ({ decisions: JSON.stringify(decisions), count: decisions.length }));
+    log17.debug("Submitting interrupt decisions", () => ({ decisions: JSON.stringify(decisions), count: decisions.length }));
     setInterrupt(null);
   }, []);
   return {
@@ -53790,6 +54563,66 @@ function useDeepAgentGeneration() {
 
 // hooks/index.ts
 init_useEventBus();
+
+// hooks/useKeyboardRouter.ts
+init_useEventBus();
+function useKeyboardRouter(options) {
+  const {
+    captureTable,
+    editorFocusEvent = "EDITOR_FOCUS",
+    editorBlurEvent = "EDITOR_BLUR",
+    keyEvent = "KEY",
+    enabled = true
+  } = options;
+  const eventBus = useEventBus();
+  const captureTableRef = useRef(captureTable);
+  captureTableRef.current = captureTable;
+  const focusedEditorIdRef = useRef(null);
+  useEffect(() => {
+    const unsubFocus = eventBus.on(`UI:${editorFocusEvent}`, (event) => {
+      const editorId = event.payload?.editorId;
+      if (typeof editorId === "string") {
+        focusedEditorIdRef.current = editorId;
+      }
+    });
+    const unsubBlur = eventBus.on(`UI:${editorBlurEvent}`, (event) => {
+      const editorId = event.payload?.editorId;
+      if (typeof editorId === "string" && focusedEditorIdRef.current === editorId) {
+        focusedEditorIdRef.current = null;
+      }
+    });
+    return () => {
+      unsubFocus();
+      unsubBlur();
+    };
+  }, [eventBus, editorFocusEvent, editorBlurEvent]);
+  useEffect(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (event.isComposing) return;
+      const target = focusedEditorIdRef.current ?? "shell";
+      const entry = captureTableRef.current[target];
+      const captured = entry !== void 0 && (entry.mode === "any" || entry.keys.has(event.key));
+      if (captured) {
+        event.preventDefault();
+      }
+      eventBus.emit(`UI:${keyEvent}`, {
+        editorId: target,
+        key: event.key,
+        code: event.code,
+        ctrl: event.ctrlKey,
+        alt: event.altKey,
+        shift: event.shiftKey,
+        meta: event.metaKey,
+        repeat: event.repeat
+      });
+    };
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+    };
+  }, [eventBus, enabled, keyEvent]);
+}
 function expressionEqual(a, b) {
   if (Object.is(a, b)) return true;
   if (Array.isArray(a) && Array.isArray(b)) {
@@ -53872,21 +54705,12 @@ function reconcileSlotProps(prev, next) {
 }
 
 // hooks/useUISlots.ts
-var log17 = createLogger("almadar:ui:ui-slots");
+var log18 = createLogger("almadar:ui:ui-slots");
 var DEFAULT_SOURCE_KEY = "__default__";
 var MULTI_SOURCE_STACK_TRAIT = "__multi_source_stack__";
-var ALL_SLOTS2 = [
-  "main",
-  "sidebar",
-  "modal",
-  "drawer",
-  "overlay",
-  "center",
-  "toast",
-  "hud-top",
-  "hud-bottom",
-  "floating"
-];
+var ALL_SLOTS2 = UI_SLOTS.filter(
+  (slot) => !slot.includes(".") && slot !== "hud" && slot !== "screen"
+);
 var DEFAULT_SLOTS = ALL_SLOTS2.reduce(
   (acc, slot) => {
     acc[slot] = null;
@@ -53949,7 +54773,7 @@ function useUISlotManager() {
       try {
         callback(slot, content);
       } catch (error) {
-        log17.error("Subscriber error", { error: error instanceof Error ? error : String(error) });
+        log18.error("Subscriber error", { error: error instanceof Error ? error : String(error) });
       }
     });
   }, []);
@@ -53961,7 +54785,7 @@ function useUISlotManager() {
         try {
           callback(content);
         } catch (error) {
-          log17.error("Trait subscriber error", { traitName, error: error instanceof Error ? error : String(error) });
+          log18.error("Trait subscriber error", { traitName, error: error instanceof Error ? error : String(error) });
         }
       });
     },
@@ -54018,7 +54842,7 @@ function useUISlotManager() {
         const slotSources = prev[config.target] ?? {};
         const existing = slotSources[sourceKey];
         if (existing && existing.priority > content.priority) {
-          log17.warn("Slot already has higher priority content", {
+          log18.warn("Slot already has higher priority content", {
             slot: config.target,
             sourceKey,
             existingPriority: existing.priority,
@@ -54029,7 +54853,7 @@ function useUISlotManager() {
         if (existing && existing.priority === content.priority && existing.pattern === content.pattern && existing.animation === content.animation && existing.transitionEvent === content.transitionEvent && existing.fromState === content.fromState && existing.entity === content.entity && existing.nodeId === content.nodeId && existing.autoDismissAt === void 0 && content.autoDismissAt === void 0 && existing.onDismiss === void 0 === (content.onDismiss === void 0)) {
           const reconciled = reconcileSlotProps(existing.props, content.props);
           if (reconciled.equal) {
-            log17.debug("slot:flush-bail", { slot: config.target, sourceKey, pattern: content.pattern });
+            log18.debug("slot:flush-bail", { slot: config.target, sourceKey, pattern: content.pattern });
             return prev;
           }
           content.props = reconciled.value;
@@ -54041,7 +54865,7 @@ function useUISlotManager() {
         const nextAll = { ...prev, [config.target]: nextSources };
         const priorWriters = Object.keys(slotSources);
         if (priorWriters.length === 1 && priorWriters[0] !== sourceKey) {
-          log17.warn("slot:contention", {
+          log18.warn("slot:contention", {
             slot: config.target,
             writers: [priorWriters[0], sourceKey],
             patternTypes: [slotSources[priorWriters[0]].pattern, content.pattern]
@@ -54051,7 +54875,7 @@ function useUISlotManager() {
           indexTraitRender(content.sourceTrait, content);
           notifyTraitSubscribers(content.sourceTrait, content);
         }
-        log17.info("slot:written", {
+        log18.info("slot:written", {
           slot: config.target,
           sourceKey,
           sourceTrait: content.sourceTrait,
@@ -54096,7 +54920,7 @@ function useUISlotManager() {
       setSources((prev) => {
         const slotSources = prev[slot];
         if (!slotSources || !(sourceKey in slotSources)) {
-          log17.debug("slot:clear-noop", { slot, sourceTrait, reason: !slotSources ? "no-slot" : "no-source" });
+          log18.debug("slot:clear-noop", { slot, sourceTrait, reason: !slotSources ? "no-slot" : "no-source" });
           return prev;
         }
         const content = slotSources[sourceKey];
@@ -54112,7 +54936,7 @@ function useUISlotManager() {
         }
         const nextSources = { ...slotSources };
         delete nextSources[sourceKey];
-        log17.info("slot:cleared", { slot, sourceTrait, lastPatternType: content.pattern });
+        log18.info("slot:cleared", { slot, sourceTrait, lastPatternType: content.pattern });
         notifySubscribers(slot, aggregateSlot(nextSources));
         return { ...prev, [slot]: nextSources };
       });
@@ -54288,7 +55112,7 @@ function useTraitListens(dispatch, listens, eventBusInstance) {
     };
   }, [eventBus, dispatch, stableListens]);
 }
-var log18 = createLogger("almadar:ui:shared-entity-store");
+var log19 = createLogger("almadar:ui:shared-entity-store");
 var EMPTY_ENTITY_STATE = {};
 function createSharedEntityStore() {
   const states = /* @__PURE__ */ new Map();
@@ -54318,7 +55142,7 @@ function createSharedEntityStore() {
       try {
         callback();
       } catch (error) {
-        log18.error("Shared entity subscriber error", {
+        log19.error("Shared entity subscriber error", {
           entityId,
           error: error instanceof Error ? error : String(error)
         });
@@ -54924,7 +55748,8 @@ var en_default = {
   "richTextEditor.image": "Insert image",
   "richTextEditor.imagePrompt": "Image URL",
   "richTextEditor.placeholder": "Start writing\u2026",
-  "form.imageUrlFallback": "\u2026or paste an image address"
+  "form.imageUrlFallback": "\u2026or paste an image address",
+  "mermaid.unrenderable": "This diagram could not be displayed. Its source is shown below."
 };
 
 // hooks/useTranslate.ts
@@ -54945,7 +55770,7 @@ var I18nContext = createContext({
 });
 I18nContext.displayName = "I18nContext";
 var I18nProvider = I18nContext.Provider;
-function useTranslate116() {
+function useTranslate117() {
   return useContext(I18nContext);
 }
 function createTranslate(messages) {
@@ -55131,4 +55956,18 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgoGraphCanvas, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CommandPalette, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DockLayout, DocumentDetails, DocumentPanel, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmojiPicker, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, FloatingToolbar, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, FxOverlay, GameAudioToggle, GameHud, GameIcon, GameMenu, GameShell, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, ImportPreviewTree, ImportProgress, ImportSourcePicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, LearningScene3D, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, Modal, ModalSlot, ModuleCard, Navigation, NodeSlotEditor, NotifyListener, NumberStepper, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, PageTransition, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, Presence, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, RichTextEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, ServiceCatalog, SharedEntityStoreContext, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateGraph, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StepFlow, StepFlowOrganism, SubagentTracePanel, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VersionDiff, ViolationAlert, VoteStack, WizardContainer, WizardNavigation, WizardProgress, arrowBetween, billboardLabel, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createSharedEntityStore, createTranslate, createUnitAnimationState, cylinderBetween, get3DClickPayload, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, meshSphere, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, registerCodeLanguageLoader, renderPatternValue, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, runTickFrame, sanitizeRichHtml, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useMediaQuery, useOrbitalHistory, usePresence, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate116 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };
+// types/slot-host.ts
+function assertUniqueSlotsPerHost(manifest) {
+  const seenBySlot = /* @__PURE__ */ new Map();
+  for (const [regionId, region] of Object.entries(manifest.regions)) {
+    const existingRegionId = seenBySlot.get(region.slot);
+    if (existingRegionId !== void 0) {
+      throw new Error(
+        `assertUniqueSlotsPerHost: regions "${existingRegionId}" and "${regionId}" both bind slot "${region.slot}" \u2014 a slot may be mounted by only one region per host.`
+      );
+    }
+    seenBySlot.set(region.slot, regionId);
+  }
+}
+
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgoGraphCanvas, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CommandPalette, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DockLayout, DocumentDetails, DocumentPanel, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmojiPicker, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, FloatingToolbar, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, FxOverlay, GameAudioCue, GameAudioToggle, GameHud, GameIcon, GameMenu, GameShell, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, ImportPreviewTree, ImportProgress, ImportSourcePicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, LearningScene3D, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, Modal, ModalSlot, ModuleCard, Navigation, NodeSlotEditor, NotifyListener, NumberStepper, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, PageTransition, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, Presence, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, RichTextEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, ServiceCatalog, SharedEntityStoreContext, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateGraph, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StepFlow, StepFlowOrganism, SubagentTracePanel, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VersionDiff, ViolationAlert, VoteStack, WizardContainer, WizardNavigation, WizardProgress, arrowBetween, assertUniqueSlotsPerHost, billboardLabel, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createSharedEntityStore, createTranslate, createUnitAnimationState, cylinderBetween, dispatchCommandPaletteCommand, get3DClickPayload, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, meshSphere, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, registerCodeLanguageLoader, renderPatternValue, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, runTickFrame, sanitizeRichHtml, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useKeyboardRouter, useLongPress, useMediaQuery, useOrbitalHistory, usePresence, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate117 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };