@almadar/ui 6.8.0 → 6.9.0

package/dist/runtime/index.js

@@ -1740,7 +1740,7 @@ var init_Button = __esm({
       secondary: [
         "bg-transparent text-accent",
         "border border-accent",
-        "hover:bg-accent hover:text-white hover:border-accent",
+        "hover:bg-accent hover:text-accent-foreground hover:border-accent",
         "active:scale-[var(--active-scale)]"
       ].join(" "),
       ghost: [
@@ -2080,8 +2080,17 @@ var init_Typography = __esm({
             weight && weightStyles[weight],
             size && typographySizeStyles[size],
             align && `text-${align}`,
-            truncate && "truncate overflow-hidden text-ellipsis",
-            overflow && overflowStyles2[overflow],
+            // `min-w-0` rides along with truncate/wrap/clamp: a flex or grid
+            // item's default `min-width: auto` refuses to shrink below its
+            // content's intrinsic width, so ellipsis/wrap silently does nothing
+            // in the single most common placement (a row next to a fixed-width
+            // control) unless the item can also shrink to zero. (Spelled out as
+            // just "truncate", not "truncate overflow-hidden text-ellipsis" —
+            // tailwind-merge treats those as the same conflict group and drops
+            // "truncate" as the earlier-declared class, silently losing its
+            // `white-space: nowrap`.)
+            truncate && "truncate min-w-0",
+            overflow && cn(overflowStyles2[overflow], overflow !== "visible" && "min-w-0"),
             className
           ),
           style
@@ -10422,6 +10431,10 @@ var init_paintDispatch = __esm({
 });
 
 // lib/drawable/hitTest.ts
+function shapeDrawnItem(n) {
+  if (n.shape !== "rect") return { pos: n.position, id: n.id };
+  return { pos: n.position, id: n.id, anchor: n.anchor, width: n.width, height: n.height, rotation: n.rotate };
+}
 function collectDrawnItems(nodes) {
   const out = [];
   for (const n of nodes) {
@@ -10430,6 +10443,8 @@ function collectDrawnItems(nodes) {
         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":
+        if (isValidScenePos(n.position)) out.push(shapeDrawnItem(n));
+        break;
       case "draw-text":
       case "draw-group":
       case "draw-mesh":
@@ -10441,6 +10456,10 @@ function collectDrawnItems(nodes) {
         }
         break;
       case "draw-shape-layer":
+        for (const it of n.items) {
+          if (isValidScenePos(it.position)) out.push(shapeDrawnItem(it));
+        }
+        break;
       case "draw-text-layer":
         for (const it of n.items) {
           if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id });
@@ -17559,6 +17578,12 @@ var init_EmptyState = __esm({
 });
 
 // lib/editorMotions.ts
+function isEditorMotion(value) {
+  return EDITOR_MOTION_SET.has(value);
+}
+function isEditorOperator(value) {
+  return EDITOR_OPERATOR_SET.has(value);
+}
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
@@ -17626,6 +17651,30 @@ function prevParagraphBoundary(lines, fromLineIdx) {
   }
   return 0;
 }
+function matchBracket(text, pos) {
+  const ch = text[pos];
+  const partner = ch !== void 0 ? BRACKET_PARTNER[ch] : void 0;
+  if (partner === void 0) return null;
+  let depth = 1;
+  if (OPEN_BRACKETS.has(ch)) {
+    for (let i = pos + 1; i < text.length; i++) {
+      if (text[i] === ch) depth++;
+      else if (text[i] === partner) {
+        depth--;
+        if (depth === 0) return i;
+      }
+    }
+  } else {
+    for (let i = pos - 1; i >= 0; i--) {
+      if (text[i] === ch) depth++;
+      else if (text[i] === partner) {
+        depth--;
+        if (depth === 0) return i;
+      }
+    }
+  }
+  return null;
+}
 function applyMotion(text, caret, motion, count) {
   const n = Math.max(1, count);
   const lines = computeLines(text);
@@ -17687,6 +17736,20 @@ function applyMotion(text, caret, motion, count) {
       }
       return pos;
     }
+    case "match-bracket": {
+      const chAtCaret = text[caret];
+      if (chAtCaret !== void 0 && BRACKET_PARTNER[chAtCaret] !== void 0) {
+        const target = matchBracket(text, caret);
+        return target === null ? caret : target;
+      }
+      for (let i = caret; i < line.end; i++) {
+        if (BRACKET_PARTNER[text[i]] !== void 0) {
+          const target = matchBracket(text, i);
+          return target === null ? caret : target;
+        }
+      }
+      return caret;
+    }
     case "line":
     case "selection":
       return caret;
@@ -17714,8 +17777,8 @@ function motionRange(text, caret, motion, count, selection) {
   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);
+  if ((motion === "word-end" || motion === "line-end" || motion === "match-bracket") && newCaret !== caret) {
+    end = Math.min(Math.max(caret, newCaret) + 1, text.length);
   } else if (motion === "word-forward" && newCaret > caret) {
     const startLine = lineIndexAt(lines, caret);
     const endLine = lineIndexAt(lines, newCaret);
@@ -17725,17 +17788,198 @@ function motionRange(text, caret, motion, count, selection) {
   }
   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 };
+function toggleCase(s) {
+  return s.replace(/[a-zA-Z]/g, (c) => c === c.toUpperCase() ? c.toLowerCase() : c.toUpperCase());
+}
+function applyJoin(text, caret, count, register, registerLinewise) {
+  const lines = computeLines(text);
+  const startIdx = lineIndexAt(lines, caret);
+  const n = Math.max(2, count);
+  const endIdx = clamp(startIdx + n - 1, 0, lines.length - 1);
+  if (endIdx <= startIdx) {
+    return { text, caret, register, registerLinewise };
+  }
+  const joinCaret = lines[startIdx].end;
+  let joined = text.slice(lines[startIdx].start, lines[startIdx].end);
+  for (let i = startIdx + 1; i <= endIdx; i++) {
+    const raw = text.slice(lines[i].start, lines[i].end);
+    joined += " " + raw.replace(/^[ \t]+/, "");
+  }
+  const newText = text.slice(0, lines[startIdx].start) + joined + text.slice(lines[endIdx].end);
+  return { text: newText, caret: joinCaret, register, registerLinewise };
+}
+function applyIndent(text, start, end, operator, register, registerLinewise) {
+  const lines = computeLines(text);
+  const startLineIdx = lineIndexAt(lines, start);
+  const lastTouchedPos = end > start ? end - 1 : start;
+  const endLineIdx = lineIndexAt(lines, lastTouchedPos);
+  let result = text;
+  for (let i = endLineIdx; i >= startLineIdx; i--) {
+    const lineStart = lines[i].start;
+    if (operator === "indent") {
+      result = result.slice(0, lineStart) + INDENT_UNIT + result.slice(lineStart);
+    } else if (result[lineStart] === "	") {
+      result = result.slice(0, lineStart) + result.slice(lineStart + 1);
+    } else {
+      let removeCount = 0;
+      while (removeCount < INDENT_UNIT.length && result[lineStart + removeCount] === " ") removeCount++;
+      result = result.slice(0, lineStart) + result.slice(lineStart + removeCount);
+    }
+  }
+  const newLines = computeLines(result);
+  const caret = firstNonBlank(result, newLines[startLineIdx]);
+  return { text: result, caret, register, registerLinewise };
+}
+function applyPut(text, caret, operator, register, registerLinewise, count) {
+  if (register.length === 0) {
+    return { text, caret, register, registerLinewise };
+  }
+  const content = register.repeat(count);
+  const lines = computeLines(text);
+  const line = lines[lineIndexAt(lines, caret)];
+  if (registerLinewise) {
+    if (operator === "put-before") {
+      const insertPos3 = line.start;
+      return {
+        text: text.slice(0, insertPos3) + content + text.slice(insertPos3),
+        caret: insertPos3,
+        register,
+        registerLinewise
+      };
+    }
+    const nextLineIdx = lineIndexAt(lines, caret) + 1;
+    if (nextLineIdx < lines.length) {
+      const insertPos3 = lines[nextLineIdx].start;
+      return {
+        text: text.slice(0, insertPos3) + content + text.slice(insertPos3),
+        caret: insertPos3,
+        register,
+        registerLinewise
+      };
+    }
+    const insertPos2 = text.length;
+    return {
+      text: text.slice(0, insertPos2) + "\n" + content,
+      caret: insertPos2 + 1,
+      register,
+      registerLinewise
+    };
+  }
+  const insertPos = operator === "put-before" ? clamp(caret, 0, text.length) : clamp(caret + 1, line.start, line.end);
+  return {
+    text: text.slice(0, insertPos) + content + text.slice(insertPos),
+    caret: insertPos + content.length - 1,
+    register,
+    registerLinewise
+  };
+}
+function applyOperator(input) {
+  const { text, caret, operator, motion, register, registerLinewise } = input;
+  const count = Math.max(1, input.count);
+  const start = clamp(input.range[0], 0, text.length);
+  const end = clamp(input.range[1], start, text.length);
+  switch (operator) {
+    case "yank":
+      return { text, caret: start, register: text.slice(start, end), registerLinewise: motion === "line" };
+    case "delete":
+    case "replace": {
+      const removed = text.slice(start, end);
+      return {
+        text: text.slice(0, start) + text.slice(end),
+        caret: start,
+        register: removed,
+        registerLinewise: motion === "line"
+      };
+    }
+    case "change": {
+      if (motion === "line") {
+        const hasTrailingNewline = end > start && text[end - 1] === "\n";
+        const removeEnd = hasTrailingNewline ? end - 1 : end;
+        const removed2 = text.slice(start, removeEnd);
+        return {
+          text: text.slice(0, start) + text.slice(removeEnd),
+          caret: start,
+          register: removed2,
+          registerLinewise: true
+        };
+      }
+      const removed = text.slice(start, end);
+      return {
+        text: text.slice(0, start) + text.slice(end),
+        caret: start,
+        register: removed,
+        registerLinewise: false
+      };
+    }
+    case "put":
+    case "put-before":
+      return applyPut(text, caret, operator, register, registerLinewise, count);
+    case "join":
+      return applyJoin(text, caret, count, register, registerLinewise);
+    case "toggle-case": {
+      const toggled = toggleCase(text.slice(start, end));
+      return { text: text.slice(0, start) + toggled + text.slice(end), caret: end, register, registerLinewise };
+    }
+    case "indent":
+    case "dedent":
+      return applyIndent(text, start, end, operator, register, registerLinewise);
+    case "undo":
+    case "redo":
+      return { text, caret, register, registerLinewise };
+    default: {
+      const _exhaustive = operator;
+      return _exhaustive;
+    }
   }
-  return { text: text.slice(0, start) + text.slice(end), caret: start, register: removed };
 }
+var EDITOR_MOTIONS, EDITOR_OPERATORS, EDITOR_MOTION_SET, EDITOR_OPERATOR_SET, INDENT_UNIT, BRACKET_PARTNER, OPEN_BRACKETS;
 var init_editorMotions = __esm({
   "lib/editorMotions.ts"() {
+    EDITOR_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",
+      "match-bracket"
+    ];
+    EDITOR_OPERATORS = [
+      "delete",
+      "yank",
+      "change",
+      "put",
+      "put-before",
+      "undo",
+      "redo",
+      "join",
+      "toggle-case",
+      "indent",
+      "dedent",
+      "replace"
+    ];
+    EDITOR_MOTION_SET = new Set(EDITOR_MOTIONS);
+    EDITOR_OPERATOR_SET = new Set(EDITOR_OPERATORS);
+    INDENT_UNIT = "  ";
+    BRACKET_PARTNER = {
+      "(": ")",
+      ")": "(",
+      "[": "]",
+      "]": "[",
+      "{": "}",
+      "}": "{"
+    };
+    OPEN_BRACKETS = /* @__PURE__ */ new Set(["(", "[", "{"]);
   }
 });
 function isMotionPayload(payload) {
@@ -17750,14 +17994,103 @@ function isInsertTextPayload(payload) {
 function isSetModePayload(payload) {
   return !!payload && typeof payload.editorId === "string" && typeof payload.mode === "string" && typeof payload.caret === "string";
 }
+function typedDelta(prev, next) {
+  const maxPrefix = Math.min(prev.length, next.length);
+  let prefixLen = 0;
+  while (prefixLen < maxPrefix && prev[prefixLen] === next[prefixLen]) prefixLen++;
+  const maxSuffix = Math.min(prev.length - prefixLen, next.length - prefixLen);
+  let suffixLen = 0;
+  while (suffixLen < maxSuffix && prev[prev.length - 1 - suffixLen] === next[next.length - 1 - suffixLen]) {
+    suffixLen++;
+  }
+  const removed = prev.slice(prefixLen, prev.length - suffixLen);
+  const inserted = next.slice(prefixLen, next.length - suffixLen);
+  return removed + inserted;
+}
 function useEditorCapabilities(args) {
   const [caretMode, setCaretMode] = useState("bar");
   const registerRef = useRef("");
+  const registerLinewiseRef = useRef(false);
+  const pastRef = useRef([]);
+  const futureRef = useRef([]);
+  const openTypingStepRef = useRef(false);
+  const insertSessionOpenRef = useRef(false);
+  const closeOpenTypingStep = useCallback(() => {
+    openTypingStepRef.current = false;
+  }, []);
+  const pushHistoryStep = useCallback(
+    (text, caret) => {
+      closeOpenTypingStep();
+      pastRef.current.push({ text, caret });
+      futureRef.current = [];
+    },
+    [closeOpenTypingStep]
+  );
+  const recordKeystroke = useCallback(
+    (prevText, prevCaret, nextText) => {
+      if (!openTypingStepRef.current) {
+        pastRef.current.push({ text: prevText, caret: prevCaret });
+        futureRef.current = [];
+        openTypingStepRef.current = true;
+      }
+      if (!insertSessionOpenRef.current && /\s/.test(typedDelta(prevText, nextText))) {
+        openTypingStepRef.current = false;
+      }
+    },
+    []
+  );
+  const performUndo = useCallback(
+    (count) => {
+      const ta = args.textareaRef.current;
+      if (!ta) return;
+      closeOpenTypingStep();
+      let moved = false;
+      for (let i = 0; i < Math.max(1, count) && pastRef.current.length > 0; i++) {
+        const prev = pastRef.current.pop();
+        futureRef.current.push({ text: ta.value, caret: ta.selectionStart });
+        ta.value = prev.text;
+        ta.setSelectionRange(prev.caret, prev.caret);
+        moved = true;
+      }
+      if (moved) args.applyChange(ta.value, "capability");
+    },
+    [args, closeOpenTypingStep]
+  );
+  const performRedo = useCallback(
+    (count) => {
+      const ta = args.textareaRef.current;
+      if (!ta) return;
+      closeOpenTypingStep();
+      let moved = false;
+      for (let i = 0; i < Math.max(1, count) && futureRef.current.length > 0; i++) {
+        const next = futureRef.current.pop();
+        pastRef.current.push({ text: ta.value, caret: ta.selectionStart });
+        ta.value = next.text;
+        ta.setSelectionRange(next.caret, next.caret);
+        moved = true;
+      }
+      if (moved) args.applyChange(ta.value, "capability");
+    },
+    [args, closeOpenTypingStep]
+  );
+  const undo = useCallback(() => performUndo(1), [performUndo]);
+  const redo = useCallback(() => performRedo(1), [performRedo]);
+  const wasFocusedRef = useRef(args.focused);
+  useEffect(() => {
+    if (wasFocusedRef.current && !args.focused) {
+      setCaretMode("bar");
+    }
+    wasFocusedRef.current = args.focused;
+  }, [args.focused]);
   useEventListener(`UI:${args.events.onMotion}`, (evt) => {
     if (!args.editorId || !isMotionPayload(evt.payload) || evt.payload.editorId !== args.editorId) return;
+    const { motion, count } = evt.payload;
+    if (!isEditorMotion(motion)) {
+      console.warn(`useEditorCapabilities: ignoring MOTION with unknown motion "${motion}"`);
+      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);
@@ -17767,32 +18100,63 @@ function useEditorCapabilities(args) {
   });
   useEventListener(`UI:${args.events.onOperate}`, (evt) => {
     if (!args.editorId || !isOperatePayload(evt.payload) || evt.payload.editorId !== args.editorId) return;
+    const { operator, motion, count } = evt.payload;
+    if (!isEditorOperator(operator)) {
+      console.warn(`useEditorCapabilities: ignoring OPERATE with unknown operator "${operator}"`);
+      return;
+    }
+    if (!isEditorMotion(motion)) {
+      console.warn(`useEditorCapabilities: ignoring OPERATE with unknown motion "${motion}"`);
+      return;
+    }
     const ta = args.textareaRef.current;
     if (!ta) return;
-    const { operator, motion, count } = evt.payload;
+    if (operator === "undo") {
+      performUndo(count);
+      return;
+    }
+    if (operator === "redo") {
+      performRedo(count);
+      return;
+    }
+    pushHistoryStep(ta.value, ta.selectionStart);
     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);
+    const result = applyOperator({
+      text: ta.value,
+      caret: ta.selectionStart,
+      range,
+      operator,
+      motion,
+      count,
+      register: registerRef.current,
+      registerLinewise: registerLinewiseRef.current
+    });
     registerRef.current = result.register;
+    registerLinewiseRef.current = result.registerLinewise;
     if (operator === "yank") {
-      ta.setSelectionRange(range[0], range[0]);
+      ta.setSelectionRange(result.caret, result.caret);
     } else {
-      ta.setRangeText("", range[0], range[1], "end");
+      ta.value = result.text;
+      ta.setSelectionRange(result.caret, result.caret);
     }
-    args.applyChange(ta.value);
+    args.applyChange(ta.value, "capability");
   });
   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;
+    pushHistoryStep(ta.value, ta.selectionStart);
     ta.setRangeText(evt.payload.text, ta.selectionStart, ta.selectionEnd, "end");
-    args.applyChange(ta.value);
+    args.applyChange(ta.value, "capability");
   });
   useEventListener(`UI:${args.events.onSetMode}`, (evt) => {
     if (!args.editorId || !isSetModePayload(evt.payload) || evt.payload.editorId !== args.editorId) return;
+    closeOpenTypingStep();
+    insertSessionOpenRef.current = evt.payload.mode === "INSERT";
     setCaretMode(evt.payload.caret);
   });
-  return { caretMode };
+  return { caretMode, recordKeystroke, undo, redo };
 }
 var init_useEditorCapabilities = __esm({
   "components/core/molecules/markdown/useEditorCapabilities.ts"() {
@@ -18208,9 +18572,23 @@ var init_CodeBlock = __esm({
           "paragraph-forward",
           "paragraph-back",
           "line",
-          "selection"
+          "selection",
+          "match-bracket"
         ],
-        operators = ["delete", "yank", "change"]
+        operators = [
+          "delete",
+          "yank",
+          "change",
+          "put",
+          "put-before",
+          "undo",
+          "redo",
+          "join",
+          "toggle-case",
+          "indent",
+          "dedent",
+          "replace"
+        ]
       }) => {
         const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
         const activeStyle = resolveHighlightStyle(language);
@@ -18244,6 +18622,12 @@ var init_CodeBlock = __esm({
         const lastPropCodeRef = useRef(code);
         const editableTextareaRef = useRef(null);
         const editableOverlayRef = useRef(null);
+        const [isFocused, setIsFocused] = useState(false);
+        const prevCaretRef = useRef(0);
+        const [caretIndex, setCaretIndex] = useState(0);
+        const caretMirrorRef = useRef(null);
+        const caretMarkerRef = useRef(null);
+        const [caretGeometry, setCaretGeometry] = useState(null);
         useEffect(() => {
           if (code !== lastPropCodeRef.current) {
             lastPropCodeRef.current = code;
@@ -18259,23 +18643,77 @@ var init_CodeBlock = __esm({
             ov.scrollLeft = ta.scrollLeft;
           }
         }, []);
-        const handleEditableChange = useCallback((v) => {
+        const handleEditableChange = useCallback((v, _origin) => {
           lastPropCodeRef.current = v;
           setEditableValue(v);
+          const ta = editableTextareaRef.current;
+          if (ta) setCaretIndex(ta.selectionStart);
           onChange?.(v);
         }, [onChange]);
-        const { caretMode } = useEditorCapabilities({
+        const { caretMode, recordKeystroke, undo, redo } = useEditorCapabilities({
           editorId: editable ? editorId : void 0,
           textareaRef: editableTextareaRef,
           events: { onMotion, onOperate, onInsertText, onSetMode },
+          focused: isFocused,
           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 handleEditableKeyDown = useCallback(
+          (e) => {
+            const ta = editableTextareaRef.current;
+            if (ta) prevCaretRef.current = ta.selectionStart;
+            const mod = e.metaKey || e.ctrlKey;
+            if (!mod) return;
+            const key = e.key.toLowerCase();
+            if (key === "z" && !e.shiftKey) {
+              e.preventDefault();
+              undo();
+            } else if (key === "z" && e.shiftKey || key === "y") {
+              e.preventDefault();
+              redo();
+            }
+          },
+          [undo, redo]
+        );
+        const showBlockCaret = isFocused && caretMode !== "bar";
+        useLayoutEffect(() => {
+          if (!showBlockCaret) return;
+          const ta = editableTextareaRef.current;
+          const mirror = caretMirrorRef.current;
+          const marker = caretMarkerRef.current;
+          if (!ta || !mirror || !marker) return;
+          const computed = window.getComputedStyle(ta);
+          const MIRRORED_PROPS = [
+            "font-family",
+            "font-size",
+            "font-weight",
+            "font-style",
+            "letter-spacing",
+            "line-height",
+            "padding-top",
+            "padding-right",
+            "padding-bottom",
+            "padding-left",
+            "border-top-width",
+            "border-right-width",
+            "border-bottom-width",
+            "border-left-width",
+            "box-sizing",
+            "width",
+            "white-space",
+            "word-break",
+            "overflow-wrap",
+            "tab-size"
+          ];
+          for (const prop of MIRRORED_PROPS) {
+            mirror.style.setProperty(prop, computed.getPropertyValue(prop));
+          }
+          const lineHeight = parseFloat(computed.getPropertyValue("line-height"));
+          setCaretGeometry({
+            top: marker.offsetTop,
+            left: marker.offsetLeft,
+            lineHeight: Number.isFinite(lineHeight) ? lineHeight : 0
+          });
+        }, [showBlockCaret, editableValue, caretIndex]);
         const errorLineProps = useMemo(() => buildLineProps(errorLines), [errorLines]);
         const viewerLineProps = useMemo(
           () => buildLineProps(errorLines, "px-4 py-0.5 hover:bg-muted/50"),
@@ -18799,11 +19237,24 @@ var init_CodeBlock = __esm({
                     {
                       ref: editableTextareaRef,
                       defaultValue: code,
-                      onChange: (e) => handleEditableChange(e.target.value),
+                      onChange: (e) => {
+                        const next = e.target.value;
+                        recordKeystroke(editableValue, prevCaretRef.current, next);
+                        handleEditableChange(next, "keystroke");
+                      },
                       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,
+                      onKeyUp: (e) => setCaretIndex(e.currentTarget.selectionStart),
+                      onClick: (e) => setCaretIndex(e.currentTarget.selectionStart),
+                      onKeyDown: handleEditableKeyDown,
+                      onFocus: () => {
+                        setIsFocused(true);
+                        if (editorId) eventBus.emit(`UI:${onEditorFocus}`, { editorId });
+                      },
+                      onBlur: () => {
+                        setIsFocused(false);
+                        if (editorId) eventBus.emit(`UI:${onEditorBlur}`, { editorId });
+                      },
                       spellCheck: false,
                       style: {
                         position: "absolute",
@@ -18830,16 +19281,39 @@ var init_CodeBlock = __esm({
                     },
                     editableTextareaKey
                   ),
-                  caretMode !== "bar" && /* @__PURE__ */ jsx(
+                  showBlockCaret && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      ref: caretMirrorRef,
+                      "aria-hidden": true,
+                      "data-testid": "editor-caret-mirror",
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        padding: "1rem",
+                        margin: 0,
+                        border: "none",
+                        visibility: "hidden",
+                        pointerEvents: "none"
+                      },
+                      children: [
+                        editableValue.slice(0, caretIndex),
+                        /* @__PURE__ */ jsx("span", { ref: caretMarkerRef, "data-testid": "editor-caret-marker", children: "\u200B" })
+                      ]
+                    }
+                  ),
+                  showBlockCaret && caretGeometry && /* @__PURE__ */ jsx(
                     "span",
                     {
                       "aria-hidden": true,
+                      "data-testid": "editor-caret",
                       style: {
                         position: "absolute",
-                        top: `calc(1rem + ${caretRowCol.row * 19.5}px)`,
-                        left: `calc(1rem + ${caretRowCol.col}ch)`,
+                        top: caretGeometry.top,
+                        left: caretGeometry.left,
                         width: "1ch",
-                        height: caretMode === "block" ? "19.5px" : "2px",
+                        height: caretMode === "block" ? caretGeometry.lineHeight || "1.2em" : "2px",
                         backgroundColor: caretMode === "block" ? "rgba(230, 230, 230, 0.5)" : void 0,
                         borderBottom: caretMode === "underline" ? "2px solid #e6e6e6" : void 0,
                         pointerEvents: "none"
@@ -26450,6 +26924,7 @@ function SubMenu({
               item.onClick?.();
             },
             "aria-disabled": item.disabled || void 0,
+            title: item.title,
             "data-testid": item.event ? `action-${item.event}` : void 0,
             className: cn(
               "w-full flex items-center gap-3 px-4 py-2 text-start",
@@ -26498,6 +26973,7 @@ function MenuItemRow({
         as: "button",
         onClick: () => onItemClick({ ...item, id: itemId }, itemId),
         "aria-disabled": item.disabled || void 0,
+        title: item.title,
         onMouseEnter: (e) => {
           if (hasSubMenu) openSubMenu(itemId, e.currentTarget);
         },
@@ -33374,13 +33850,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect67, useRef: useRef69, useCallback: useCallback95, useState: useState102 } = React87__default;
+      const { useEffect: useEffect68, useRef: useRef69, useCallback: useCallback96, useState: useState102 } = React87__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 = useRef69({ centerLat, centerLng, zoom });
-        useEffect67(() => {
+        useEffect68(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -33391,7 +33867,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect67(() => {
+        useEffect68(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -33420,7 +33896,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState102(null);
-        const handleMapClick = useCallback95((lat, lng) => {
+        const handleMapClick = useCallback96((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -33429,7 +33905,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback95((marker) => {
+        const handleMarkerClick = useCallback96((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -43038,7 +43514,10 @@ var init_FloatingToolbar = __esm({
     positionClasses = {
       "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
       "bottom-left": "bottom-6 left-6",
-      "bottom-right": "bottom-6 right-6"
+      "bottom-right": "bottom-6 right-6",
+      "top-center": "top-6 left-1/2 -translate-x-1/2",
+      "top-left": "top-6 left-6",
+      "top-right": "top-6 right-6"
     };
     FloatingToolbar = ({
       items,
@@ -50699,6 +51178,7 @@ var init_component_registry_generated = __esm({
       "TrendIndicator": TrendIndicator,
       "TypewriterText": TypewriterText,
       "Typography": Typography,
+      "UISlotComponent": UISlotComponent,
       "UISlotRenderer": UISlotRenderer,
       "UploadDropZone": UploadDropZone,
       "VStack": VStack,
@@ -51004,6 +51484,7 @@ function UISlotComponentInner({
   const contained = useContext(SlotContainedContext);
   const schemaCtx = useEntitySchemaOptional();
   const rawContent = slots[slot];
+  const regionClassName = fallback !== void 0 ? cn("contents", className) : className;
   const binding = useEntityBindingSnapshot(rawContent?.sourceTrait);
   const content = useMemo(() => {
     if (!rawContent) return rawContent;
@@ -51052,7 +51533,7 @@ function UISlotComponentInner({
         Box,
         {
           id: `slot-${slot}`,
-          className: cn("ui-slot", `ui-slot-${slot}`, className),
+          className: cn("ui-slot", `ui-slot-${slot}`, regionClassName),
           "data-testid": `ui-slot-${slot}`,
           "data-slot-mode": "fallback",
           children: fallback
@@ -51087,7 +51568,7 @@ function UISlotComponentInner({
       Box,
       {
         id: `slot-${slot}-fallback`,
-        className: cn("ui-slot", `ui-slot-${slot}-fallback`, className),
+        className: cn("ui-slot", `ui-slot-${slot}-fallback`, regionClassName),
         "data-testid": `ui-slot-${slot}-fallback`,
         "data-slot-mode": "append",
         children: fallback
@@ -51119,7 +51600,7 @@ function UISlotComponentInner({
     Box,
     {
       id: `slot-${slot}`,
-      className: cn("ui-slot", `ui-slot-${slot}`, className),
+      className: cn("ui-slot", `ui-slot-${slot}`, regionClassName),
       "data-pattern": content.pattern,
       "data-source-trait": content.sourceTrait,
       "data-testid": `ui-slot-${slot}`,
@@ -54097,7 +54578,11 @@ function useDeclaredCaptureTable(opts) {
     const keymap = readKeymapConfig(inlineTrait, keymapKnob);
     const currentState = ctx.getState(pluginId, orbital, trait)?.currentState;
     const keys = currentState !== void 0 ? keymap[currentState] ?? [] : [];
-    return { [target]: { mode: currentState ?? "unknown", keys: new Set(keys) } };
+    const entry = { mode: currentState ?? "unknown", keys: new Set(keys) };
+    const targets = Array.isArray(target) ? target : [target];
+    const table = {};
+    for (const t of targets) table[t] = entry;
+    return table;
   }, [ctx, pluginId, orbital, trait, keymapKnob, target]);
 }
 function useOrbitalPluginHost() {
@@ -54105,7 +54590,7 @@ function useOrbitalPluginHost() {
   return { getState: ctx.getState, lastEvent: ctx.lastEvent, errors: ctx.errors };
 }
 function buildMockEffectHandlers(opts) {
-  const { pluginId, denySet, slotsRef, navigateRef, notifyRef } = opts;
+  const { pluginId, denySet, slotsRef, renderedSlotsRef, navigateRef, notifyRef } = opts;
   const handlers = {
     renderUI: (slot, pattern, props, priority) => {
       if (!isUISlot(slot)) {
@@ -54113,9 +54598,10 @@ function buildMockEffectHandlers(opts) {
         return;
       }
       if (pattern === null) {
-        slotsRef.current.clear(slot);
+        slotsRef.current.clearBySource(slot, pluginId);
         return;
       }
+      renderedSlotsRef.current.add(slot);
       slotsRef.current.render({ target: slot, pattern: pattern.type, props, priority, sourceTrait: pluginId });
     }
   };
@@ -54158,6 +54644,7 @@ function PluginRuntimeMount({
   const slots = useUISlots();
   const slotsRef = useRef(slots);
   slotsRef.current = slots;
+  const renderedSlotsRef = useRef(/* @__PURE__ */ new Set());
   const navigateRef = useRef(navigate);
   navigateRef.current = navigate;
   const notifyRef = useRef(notify);
@@ -54171,6 +54658,7 @@ function PluginRuntimeMount({
         pluginId: plugin.id,
         denySet: new Set(deny ?? []),
         slotsRef,
+        renderedSlotsRef,
         navigateRef,
         notifyRef
       })
@@ -54200,9 +54688,12 @@ function PluginRuntimeMount({
         } else if (mode === "server" && transport) {
           void transport.unregister();
         }
+        for (const slot of renderedSlotsRef.current) {
+          slotsRef.current.clearBySource(slot, plugin.id);
+        }
       }, 0);
     };
-  }, [mockRuntime, transport, mode]);
+  }, [mockRuntime, transport, mode, plugin.id]);
   const ownOrbitals = useMemo(
     () => new Set(plugin.schema.orbitals.map((o) => o.name)),
     [plugin.schema]