@jxsuite/studio 0.32.0 → 0.34.0

package/src/editor/inline-link.ts

@@ -0,0 +1,89 @@
+/// <reference lib="dom" />
+/**
+ * Inline link + template-token application for contenteditable editing.
+ *
+ * Realm-agnostic: every DOM access uses ambient `window`/`document`, so bundled into the canvas
+ * iframe these operate on the iframe realm where the edited DOM (and its Selection) live. The
+ * parent format toolbar never calls these — it posts an `applyFormat` intent and the iframe applies
+ * it here (Phase 4b-2).
+ *
+ * `document.execCommand` is uncoverable under happy-dom (no implementation), so it is wrapped in a
+ * one-line shim {@link exec} that the branch logic calls; tests stub `document.execCommand` and
+ * assert at the stub level (documented as stub-level, not behavioral).
+ */
+
+import { normalizeInlineContent } from "./inline-format";
+
+/** The one uncoverable call, isolated so the surrounding branch logic stays unit-testable. */
+const exec = (cmd: string, val?: string): boolean => document.execCommand(cmd, false, val);
+
+/**
+ * Read the link state of the current selection relative to `root`: walk the selection's anchor node
+ * up to `root` looking for an `<a>`. Returns the author-entered `href` attribute (NOT the resolved
+ * `.href` property), so relative/templated URLs round-trip unchanged.
+ */
+export function linkStateForSelection(root: HTMLElement): { active: boolean; href: string | null } {
+  const sel = window.getSelection();
+  if (!sel || !sel.rangeCount) {
+    return { active: false, href: null };
+  }
+  let node: Node | null = sel.anchorNode;
+  while (node && node !== root) {
+    if (node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === "a") {
+      return { active: true, href: (node as Element).getAttribute("href") };
+    }
+    node = node.parentNode;
+  }
+  return { active: false, href: null };
+}
+
+/**
+ * Find the `<a>` that contains the selection anchor (up to `root`), if any.
+ *
+ * @param {HTMLElement} root
+ * @returns {HTMLAnchorElement | null}
+ */
+function anchorInSelection(root: HTMLElement): HTMLAnchorElement | null {
+  const sel = window.getSelection();
+  if (!sel || !sel.rangeCount) {
+    return null;
+  }
+  let node: Node | null = sel.anchorNode;
+  while (node && node !== root) {
+    if (node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === "a") {
+      return node as HTMLAnchorElement;
+    }
+    node = node.parentNode;
+  }
+  return null;
+}
+
+/**
+ * Apply (or remove) a link on the current selection within `root`. With an existing `<a>` in the
+ * selection: rewrite its `href`, or unwrap it when `href` is null/empty. Otherwise create a link
+ * via `execCommand("createLink")`. Always normalizes the inline content afterwards.
+ */
+export function applyLink(root: HTMLElement, href: string | null): void {
+  const existing = anchorInSelection(root);
+  if (existing) {
+    if (href) {
+      existing.setAttribute("href", href);
+    } else {
+      // Unwrap: replace the anchor with its children, preserving the text.
+      const frag = document.createDocumentFragment();
+      while (existing.firstChild) {
+        frag.append(existing.firstChild);
+      }
+      existing.replaceWith(frag);
+    }
+  } else if (href) {
+    exec("createLink", href);
+  }
+  normalizeInlineContent(root);
+}
+
+/** Insert a `${token}` template expression at the caret inside `root` (joins the native undo stack). */
+export function insertTemplateToken(root: HTMLElement, token: string): void {
+  root.focus();
+  exec("insertText", `\${${token}}`);
+}

package/src/editor/insert-zone-action.ts

@@ -0,0 +1,35 @@
+/// <reference lib="dom" />
+/**
+ * Insert-zone-action.ts — the click handler for the cross-origin insertion "+" affordance.
+ *
+ * Extracted verbatim from the studio.ts bootstrap so it can carry its own unit test (the inline
+ * arrow form added two uncovered anonymous functions to the hard-to-test bootstrap). Registered by
+ * name via `setInsertZoneClickHandler(runInsertZoneAction)` in studio.ts.
+ *
+ * The cross-origin insertion "+" (drawn by the host from posted zones) runs the parent-realm
+ * slash-menu → mutateInsertNode flow on click. The host captured the zone (parentPath + index); the
+ * new node is selected at its inserted path. Salvaged from the orphaned insertion-helper.ts.
+ */
+
+import { showSlashMenu } from "./slash-menu";
+import { defaultDef } from "../panels/shared";
+import { mutateInsertNode, transactDoc } from "../tabs/transact";
+import { activeTab } from "../workspace/workspace";
+import type { InsertZone } from "../canvas/iframe-protocol";
+import type { JxPath } from "../state";
+
+export function runInsertZoneAction(btn: HTMLElement, zone: InsertZone): void {
+  showSlashMenu(btn, "", {
+    onSelect: (cmd) => {
+      const def = defaultDef(cmd.tag);
+      const insertPath = zone.insertParentPath as JxPath;
+      const idx = zone.index;
+      const newPath = [...insertPath, "children", idx];
+      transactDoc(activeTab.value, (t) => {
+        mutateInsertNode(t, insertPath, idx, def);
+        t.session.selection = newPath;
+      });
+    },
+    showFilter: true,
+  });
+}

package/src/editor/merge-tags.ts

@@ -74,8 +74,8 @@ function walk(value: unknown, prefix: string, category: string, depth: number, o
  *
  * @param state - The document's `state` definitions (`tab.doc.document.state`), used for names and
  *   classification (functions are skipped — they are not text-insertable values).
- * @param scope - The live resolved scope (`panel.liveCtx.scope`) for type/preview hints and the
- *   nested-property walk. May be null before the canvas has rendered.
+ * @param scope - The live resolved scope for type/preview hints and the nested-property walk. May
+ *   be null (the iframe canvas holds the render scope, so the parent passes null).
  * @param localScope - The editing element's recorded render scope (`elToScope.get(el)`). When it
  *   carries a `$map` (repeater) context, `item` / `item.*` / `index` tags are appended.
  */
@@ -118,3 +118,27 @@ export function buildMergeTags(
 
   return out;
 }
+
+/**
+ * Build repeater-scope merge tags from a flat list of pre-resolved tokens (e.g. `item`, `index`,
+ * `item.data.title`). Unlike {@link buildMergeTags}'s live-scope branch, these carry no live value —
+ * in edit mode the iframe holds no `$map`, so fields are resolved parent-side from schema and the
+ * hint is empty. `item` and `index` are guaranteed first; the list is deduped preserving order.
+ *
+ * @param tokens - Insertion tokens (see `resolveRepeaterItemFields`); typically leads
+ *   `item`/`index`.
+ * @returns One {@link MergeTag} per unique token, `category: "repeater"`, `label === token`.
+ */
+export function buildRepeaterTagsFromFields(tokens: string[]): MergeTag[] {
+  const ordered = ["item", "index", ...tokens];
+  const seen = new Set<string>();
+  const out: MergeTag[] = [];
+  for (const token of ordered) {
+    if (!token || seen.has(token)) {
+      continue;
+    }
+    seen.add(token);
+    out.push({ category: "repeater", hint: "", label: token, token });
+  }
+  return out;
+}

package/src/editor/repeater-scope.ts

@@ -0,0 +1,144 @@
+/**
+ * Repeater scope resolution — enumerate the local `item` / `index` / field tokens available when
+ * the author inline-edits text INSIDE a repeater (`$prototype: "Array"`) on the design canvas.
+ *
+ * There is no live `$map` in edit mode: `prepareForEditMode` renders a mapped array as a
+ * `repeater-perimeter` wrapping one glyph-ified template instance, so `renderMappedArrayInto`
+ * (which sets `child.$map`) never runs. Instead we resolve field names PARENT-SIDE from the
+ * repeater's binding + the project's content-type / state schema, keyed off the selected element's
+ * document path (which carries a real `"map"` segment — see canvas/path-mapping.ts
+ * `classifyRenderNode`).
+ *
+ * Pure and DOM-free: deps limited to `@jxsuite/schema` guards/types + {@link getNodeAtPath}.
+ */
+
+import { isRef } from "@jxsuite/schema/guards";
+import { getNodeAtPath } from "../state";
+
+import type { JxPath } from "../state";
+import type {
+  JxMappedArray,
+  JxMutableNode,
+  ProjectConfig,
+  ContentTypeSchema,
+} from "@jxsuite/schema/types";
+
+/** Cap on how many inferred/declared fields we enumerate (mirrors merge-tags BREADTH_CAP breadth). */
+const FIELD_CAP = 50;
+
+/**
+ * Find the repeater (`$prototype: "Array"`) that encloses the node at `path`. The stamper rewrites
+ * an edit-mode perimeter render path back to `[...P, "map", …]` where `P` is the repeater's own doc
+ * path, so an element inside a repeater carries a real-doc path containing a `"map"` segment. We
+ * take the LAST `"map"` (innermost repeater wins for nesting) and resolve the node at the prefix
+ * before it.
+ *
+ * @param doc - The tab's document root (`tab.doc.document`).
+ * @param path - The selected element's document path.
+ * @returns The enclosing `JxMappedArray` node, or `null` when the path is not inside a repeater.
+ */
+export function findEnclosingRepeater(
+  doc: JxMutableNode,
+  path: JxPath | null | undefined,
+): JxMappedArray | null {
+  if (!Array.isArray(path) || path.length === 0) {
+    return null;
+  }
+  const mapIdx = path.lastIndexOf("map");
+  if (mapIdx <= 0) {
+    return null;
+  }
+  const node = getNodeAtPath(doc, path.slice(0, mapIdx)) as
+    | (Record<string, unknown> & JxMappedArray)
+    | undefined;
+  return node && node.$prototype === "Array" ? (node as JxMappedArray) : null;
+}
+
+/** Strip a `#/state/<name>` JSON-Pointer ref to its bare state name (null when it is not one). */
+function refToStateName(ref: unknown): string | null {
+  if (!isRef(ref)) {
+    return null;
+  }
+  const { $ref: target } = ref;
+  return target.startsWith("#/state/") ? target.slice("#/state/".length) : null;
+}
+
+/** Cap + $-filter a field-name list to a stable, author-facing subset. */
+function safeFields(names: string[]): string[] {
+  return names.filter((k) => !k.startsWith("$")).slice(0, FIELD_CAP);
+}
+
+/**
+ * Resolve the local scope tokens for text edited inside `arrayNode`. Always leads with `item` and
+ * `index`; appends field tokens resolved from the repeater's binding:
+ *
+ * - **Content collection** — `items` refs a `{ contentType }` state def. Item shape is `{ id, data: {
+ *   …fields }, body }`, so fields come from
+ *   `projectConfig.contentTypes[contentType].schema.properties` and emit as `item.data.<f>` (the
+ *   `.data.` nesting is LOAD-BEARING — runtime templates use `${item.data.title}`), plus `item.id`
+ *   / `item.body`.
+ * - **State array** — `items` refs a state def that is an array of objects. Fields come from a
+ *   declared `items.properties`, else are inferred from a sample `default[0]`. Emitted FLAT
+ *   (`item.<f>`, no `.data.`).
+ * - **Inline array** — `items` is a literal array; fields inferred from `items[0]` object keys.
+ * - **Fallback** — anything unresolvable yields exactly `["item", "index"]`.
+ *
+ * @param arrayNode - The repeater node from {@link findEnclosingRepeater}.
+ * @param state - The document's `state` definitions (`tab.doc.document.state`).
+ * @param projectConfig - Parsed `project.json` (`projectState?.projectConfig`).
+ * @returns Token strings, e.g. `["item", "index", "item.id", "item.body", "item.data.title"]`.
+ */
+export function resolveRepeaterItemFields(
+  arrayNode: JxMappedArray,
+  state: Record<string, unknown> | null | undefined,
+  projectConfig: ProjectConfig | null | undefined,
+): string[] {
+  const base = ["item", "index"];
+  const { items } = arrayNode as { items?: unknown };
+  const defs = state ?? {};
+
+  const stateName = refToStateName(items);
+  if (stateName) {
+    const def = defs[stateName] as Record<string, unknown> | undefined;
+    if (def && typeof def === "object") {
+      // (a) Content collection — `{ contentType: "<name>" }`. Import-aliased `$prototype` still
+      // Matches because we detect on the `contentType` string, not the prototype name.
+      if (typeof def.contentType === "string") {
+        const ct = projectConfig?.contentTypes?.[def.contentType];
+        const schema = ct?.schema as ContentTypeSchema | undefined;
+        const props = schema?.properties;
+        const out = [...base, "item.id", "item.body"];
+        if (props && typeof props === "object") {
+          for (const f of safeFields(Object.keys(props))) {
+            out.push(`item.data.${f}`);
+          }
+        }
+        return out;
+      }
+
+      // (b) State array — declared object item-schema, or inferred from a sample default[0].
+      const itemsSchema = def.items as Record<string, unknown> | undefined;
+      const declared = itemsSchema?.properties as Record<string, unknown> | undefined;
+      if (declared && typeof declared === "object") {
+        return [...base, ...safeFields(Object.keys(declared)).map((f) => `item.${f}`)];
+      }
+      const defaults = def.default as unknown[] | undefined;
+      const sample: unknown = Array.isArray(defaults) ? defaults[0] : undefined;
+      if (sample && typeof sample === "object" && !Array.isArray(sample)) {
+        return [...base, ...safeFields(Object.keys(sample)).map((f) => `item.${f}`)];
+      }
+    }
+    return base;
+  }
+
+  // (c) Inline literal array — infer fields from the first object element.
+  if (Array.isArray(items)) {
+    const [first] = items as unknown[];
+    if (first && typeof first === "object" && !Array.isArray(first)) {
+      return [...base, ...safeFields(Object.keys(first)).map((f) => `item.${f}`)];
+    }
+  }
+
+  // (d) Fallback — unresolvable binding, primitive/empty items, or missing schema.
+  return base;
+}

package/src/editor/shortcuts.ts

@@ -20,6 +20,7 @@ import { isEditing, stopEditing } from "./inline-edit";
 import { copyNode, cutNode, pasteNode } from "./context-menu";
 import { openQuickSearch } from "../panels/quick-search";
 import { showConfirmDialog } from "../ui/layers";
+import { rectOf } from "../utils/geometry";
 
 import type { JxPath } from "../state";
 
@@ -33,10 +34,8 @@ import type { JxPath } from "../state";
  *   setPan: (x: number, y: number) => void;
  *   applyTransform: () => void;
  *   positionZoomIndicator: () => void;
- *   componentInlineEdit: object | null;
  *   saveFile: () => void;
  *   openProject: () => void;
- *   enterEditOnPath: (path: JxPath) => void;
  * }} getContext
  */
 export function initShortcuts(
@@ -47,10 +46,8 @@ export function initShortcuts(
     setPan: (x: number, y: number) => void;
     applyTransform: () => void;
     positionZoomIndicator: () => void;
-    componentInlineEdit: Record<string, unknown> | null;
     saveFile: () => void;
     openProject: () => void;
-    enterEditOnPath: (path: JxPath) => void;
   },
 ) {
   // Wheel handler: Ctrl+Scroll = zoom (cursor-centered), plain scroll = pan
@@ -58,8 +55,16 @@ export function initShortcuts(
     "wheel",
     (e: WheelEvent) => {
       const { canvasMode, panX, panY, setPan, applyTransform } = getContext();
-      // Edit (content) mode: let the scroll container handle scrolling natively
+      // Edit (content) mode: scroll the edit-mode container ourselves. The canvas iframe is sized to
+      // Its content (no internal scroll) and a cross-origin OOPIF doesn't bubble wheel to the parent,
+      // So the wheel reaches us forwarded (or over the canvas chrome) but never triggers native scroll.
       if (canvasMode === "edit") {
+        const sc = canvasWrap.querySelector<HTMLElement>(".content-edit-canvas");
+        if (sc) {
+          e.preventDefault();
+          sc.scrollTop += e.deltaY;
+          sc.scrollLeft += e.deltaX;
+        }
         return;
       }
       // Manage mode: browse table handles its own scrolling
@@ -69,7 +74,7 @@ export function initShortcuts(
       e.preventDefault();
       if (e.ctrlKey || e.metaKey) {
         // Zoom towards cursor
-        const rect = canvasWrap.getBoundingClientRect();
+        const rect = rectOf(canvasWrap);
         const cursorX = e.clientX - rect.left;
         const cursorY = e.clientY - rect.top;
         const oldZoom = activeTab.value?.session.ui.zoom ?? 1;
@@ -124,15 +129,7 @@ export function initShortcuts(
   window.addEventListener("resize", () => getContext().positionZoomIndicator());
 
   document.addEventListener("keydown", (e) => {
-    const {
-      canvasMode,
-      setPan,
-      applyTransform,
-      componentInlineEdit,
-      saveFile,
-      openProject,
-      enterEditOnPath,
-    } = getContext();
+    const { canvasMode, setPan, applyTransform, saveFile, openProject } = getContext();
     const tab = activeTab.value;
     const mod = e.ctrlKey || e.metaKey;
 
@@ -163,18 +160,6 @@ export function initShortcuts(
       }
       return;
     }
-    if (componentInlineEdit) {
-      if (mod && e.key === "s") {
-        e.preventDefault();
-        stopEditing();
-        saveFile();
-      }
-      if (mod && e.key === "w") {
-        e.preventDefault();
-      }
-      return;
-    }
-
     if (mod) {
       switch (e.key) {
         case "w": {
@@ -305,7 +290,8 @@ export function initShortcuts(
             mutateInsertNode(t, pp, idx + 1, { tagName: "p", textContent: "" });
             t.session.selection = newPath;
           });
-          enterEditOnPath(newPath);
+          // The iframe canvas re-enters inline edit for the freshly-selected node via its own
+          // Posted enterEdit flow, so no parent-side enterEditOnPath is needed here.
         }
         break;
       }

package/src/editor/slash-menu.ts

@@ -11,6 +11,7 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 import { getLayerSlot } from "../ui/layers";
+import { rectOf } from "../utils/geometry";
 
 interface SlashCommand {
   label: string;
@@ -40,16 +41,26 @@ const SLASH_COMMANDS = [
 
 // ─── State ────────────────────────────────────────────────────────────────────
 
-let callbacks: {
+/** Callbacks a caller passes to {@link showSlashMenu}/{@link showSlashMenuAtRect}. */
+export interface SlashMenuCallbacks {
   onSelect: (cmd: SlashCommand) => void;
+  /** Fired whenever the menu closes (outside click, Escape, no matches, and just before select). */
+  onDismiss?: () => void;
   showFilter?: boolean;
   commands?: SlashCommand[];
-} | null = null;
+}
+
+/** The anchor geometry the menu positions from (a DOMRect satisfies this). */
+export interface SlashMenuAnchorRect {
+  left: number;
+  bottom: number;
+}
+
+let callbacks: SlashMenuCallbacks | null = null;
 let activeIdx = 0;
 let filteredItems: SlashCommand[] = [];
 let open = false;
-let _anchorEl: HTMLElement | null = null;
-let _anchorRect: DOMRect | null = null;
+let _anchorRect: SlashMenuAnchorRect | null = null;
 let _filterEl: HTMLInputElement | null = null;
 let _popoverEl: HTMLElement | null = null;
 
@@ -70,24 +81,33 @@ export function isSlashMenuOpen() {
  *
  * @param {HTMLElement} anchorEl — the element being edited (for positioning)
  * @param {string} filter — current typed filter text (after the "/")
- * @param {{
- *   onSelect: (cmd: SlashCommand) => void;
- *   showFilter?: boolean;
- *   commands?: SlashCommand[];
- * }} cbs
+ * @param {SlashMenuCallbacks} cbs
+ */
+export function showSlashMenu(anchorEl: HTMLElement, filter: string, cbs: SlashMenuCallbacks) {
+  showAt(rectOf(anchorEl), filter, cbs);
+}
+
+/**
+ * Show (or update) the slash menu anchored below a PARENT-VIEWPORT rect — for callers with no
+ * anchor element in this realm (the canvas iframe posts the edited element's rect across the bridge
+ * and the host converts it).
+ *
+ * @param {SlashMenuAnchorRect} rect
+ * @param {string} filter
+ * @param {SlashMenuCallbacks} cbs
  */
-export function showSlashMenu(
-  anchorEl: HTMLElement,
+export function showSlashMenuAtRect(
+  rect: SlashMenuAnchorRect,
   filter: string,
-  cbs: {
-    onSelect: (cmd: SlashCommand) => void;
-    showFilter?: boolean;
-    commands?: SlashCommand[];
-  },
+  cbs: SlashMenuCallbacks,
 ) {
+  showAt(rect, filter, cbs);
+}
+
+/** Shared body of the two show entry points. */
+function showAt(rect: SlashMenuAnchorRect, filter: string, cbs: SlashMenuCallbacks) {
   callbacks = cbs;
-  _anchorEl = anchorEl;
-  _anchorRect = anchorEl.getBoundingClientRect();
+  _anchorRect = rect;
 
   const source = cbs.commands || SLASH_COMMANDS;
   filteredItems = filter
@@ -103,7 +123,7 @@ export function showSlashMenu(
 
   activeIdx = 0;
 
-  render(anchorEl, cbs.showFilter || false);
+  render(cbs.showFilter || false);
 
   if (!open) {
     open = true;
@@ -126,9 +146,9 @@ export function dismissSlashMenu() {
   if (!open) {
     return;
   }
+  const cbs = callbacks;
   open = false;
   callbacks = null;
-  _anchorEl = null;
   _anchorRect = null;
   _filterEl = null;
   _popoverEl = null;
@@ -136,16 +156,19 @@ export function dismissSlashMenu() {
   document.removeEventListener("keydown", onKeydown, true);
   document.removeEventListener("mousedown", onOutsideClick, true);
   litRender(nothing, getHost());
+  // After teardown so a re-entrant show from the callback sees a closed menu. select() relies on
+  // This ordering too: dismiss (→ onDismiss) fires BEFORE onSelect.
+  cbs?.onDismiss?.();
 }
 
 // ─── Internal ─────────────────────────────────────────────────────────────────
 
-/**
- * @param {HTMLElement} anchorEl
- * @param {boolean} showFilter
- */
-function render(anchorEl: HTMLElement, showFilter: boolean) {
-  const rect = _anchorRect || anchorEl.getBoundingClientRect();
+/** @param {boolean} showFilter */
+function render(showFilter: boolean) {
+  const rect = _anchorRect;
+  if (!rect) {
+    return;
+  }
 
   litRender(
     html`
@@ -224,9 +247,7 @@ function onFilterInput(e: Event) {
     : source;
 
   activeIdx = 0;
-  if (_anchorEl) {
-    render(_anchorEl, true);
-  }
+  render(true);
 
   // Re-focus input after re-render
   requestAnimationFrame(() => {
@@ -238,17 +259,21 @@ function onFilterInput(e: Event) {
   });
 }
 
-/** @param {KeyboardEvent} e */
-function onKeydown(e: KeyboardEvent) {
+/**
+ * Drive the open menu with a navigation key. The canvas-iframe bridge calls this DIRECTLY (the key
+ * was pressed in the iframe realm — a synthetic keydown redispatch on this document would lose the
+ * capture-first + stopPropagation semantics the menu relies on to shield other handlers).
+ *
+ * @param {string} key — "ArrowDown" | "ArrowUp" | "Enter" | "Escape"
+ */
+export function handleSlashMenuKey(key: string): void {
   if (!open) {
     return;
   }
 
   const items = getHost().querySelectorAll("sp-menu-item:not([disabled])") as NodeListOf<Element>;
 
-  if (e.key === "ArrowDown") {
-    e.preventDefault();
-    e.stopPropagation();
+  if (key === "ArrowDown") {
     if (items.length === 0) {
       return;
     }
@@ -256,9 +281,7 @@ function onKeydown(e: KeyboardEvent) {
     activeIdx = (activeIdx + 1) % items.length;
     items[activeIdx]?.setAttribute("focused", "");
     items[activeIdx]?.scrollIntoView({ block: "nearest" });
-  } else if (e.key === "ArrowUp") {
-    e.preventDefault();
-    e.stopPropagation();
+  } else if (key === "ArrowUp") {
     if (items.length === 0) {
       return;
     }
@@ -266,16 +289,24 @@ function onKeydown(e: KeyboardEvent) {
     activeIdx = (activeIdx - 1 + items.length) % items.length;
     items[activeIdx]?.setAttribute("focused", "");
     items[activeIdx]?.scrollIntoView({ block: "nearest" });
-  } else if (e.key === "Enter") {
-    e.preventDefault();
-    e.stopPropagation();
+  } else if (key === "Enter") {
     const cmd = filteredItems[activeIdx];
     if (cmd) {
       select(cmd);
     }
-  } else if (e.key === "Escape") {
+  } else if (key === "Escape") {
+    dismissSlashMenu();
+  }
+}
+
+/** @param {KeyboardEvent} e */
+function onKeydown(e: KeyboardEvent) {
+  if (!open) {
+    return;
+  }
+  if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) {
     e.preventDefault();
     e.stopPropagation();
-    dismissSlashMenu();
+    handleSlashMenuKey(e.key);
   }
 }

package/src/files/files.ts

@@ -41,6 +41,7 @@ import type { JxMutableNode } from "@jxsuite/schema/types";
 import type { StudioState } from "../state.js";
 import type { Tab } from "../tabs/tab.js";
 import type { RenameResult } from "../types";
+import { rectOf } from "../utils/geometry";
 
 // ─── File icon map ────────────────────────────────────────────────────────────
 
@@ -738,7 +739,7 @@ function showFileContextMenu(
         }
         requestAnimationFrame(() => {
           const popover = el as HTMLElement;
-          const menuRect = popover.getBoundingClientRect();
+          const menuRect = rectOf(popover);
           if (x + menuRect.width > window.innerWidth) {
             x = window.innerWidth - menuRect.width - 4;
           }