@jxsuite/studio 5.1.0 → 5.3.0

package/src/ui/ai-credentials-form.ts

@@ -23,7 +23,7 @@
  * @license MIT
  */
 
-import { fetchAvailableModels } from "../services/ai-models";
+import { fetchAvailableModels, proxyModelsErrorMessage } from "../services/ai-models";
 import {
   getBaseUrl,
   getOpenAiKey,
@@ -165,6 +165,17 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
         },
         force: true,
       });
+      /*
+       * A 200 from the proxy does not mean the UPSTREAM listing worked — handleModels answers with
+       * defaults and `configured: true` even when the provider's /models route failed, so the list
+       * fetch never throws for that case. Cloudflare Workers AI's OpenAI-compatible surface has no
+       * /models route at all, so this is the only way that failure ever reaches the form; without
+       * it, the field silently filled with OpenAI's default ids instead of the user's own models.
+       */
+      const upstreamMessage = proxyModelsErrorMessage();
+      if (upstreamMessage) {
+        modelsError = `${upstreamMessage} — type the model ID directly instead.`;
+      }
     } catch (error: unknown) {
       modelsError = (error as Error).message || "Failed to fetch models";
     } finally {

package/src/ui/panel-resize.ts

@@ -43,8 +43,7 @@ import {
 } from "../shell";
 import type { DockId } from "../shell";
 import { effect } from "../reactivity";
-import { rectOf } from "../utils/geometry";
-import { splitModifiersOf } from "@jxsuite/ui/behaviors/split";
+import { splitModifiersOf, trackOf } from "@jxsuite/ui/behaviors/split";
 import type { SplitModifiers } from "@jxsuite/ui/behaviors/split";
 
 /**
@@ -160,25 +159,6 @@ export interface SplitElement extends HTMLElement {
   collapse: number;
 }
 
-/**
- * The length of the box a handle divides, along its axis — the same box `jx-split` measures at
- * pointerdown, read here so the share this adapter writes and the one the element drags against are
- * two readings of one number.
- */
-function trackOf(handle: HTMLElement, axis: "x" | "y"): number {
-  for (let node = handle.parentElement; node; node = node.parentElement) {
-    if (globalThis.getComputedStyle(node).display === "contents") {
-      continue;
-    }
-    const box = rectOf(node);
-    const length = axis === "x" ? box.width : box.height;
-    if (length > 0) {
-      return length;
-    }
-  }
-  return 0;
-}
-
 /**
  * A target's pixel size as the leading side's share of the track, and back.
  *
@@ -231,7 +211,7 @@ function sizeOf(target: ResizeTarget, share: number, track: number): number {
  */
 export function bindSplit(handle: SplitElement, target: ResizeTarget): () => void {
   const sync = (): void => {
-    const track = trackOf(handle, target.axis);
+    const track = trackOf(handle, target.axis === "x");
     if (track <= 0) {
       return;
     }
@@ -243,7 +223,7 @@ export function bindSplit(handle: SplitElement, target: ResizeTarget): () => voi
     handle.value = shareOf(target, target.read(), track);
   };
   const onInput = (event: Event): void => {
-    const track = trackOf(handle, target.axis);
+    const track = trackOf(handle, target.axis === "x");
     if (track <= 0) {
       return;
     }

package/src/ui/virtual-window.ts

@@ -300,6 +300,44 @@ export function nearestScroller(el: HTMLElement | null): HTMLElement | null {
   return null;
 }
 
+/**
+ * The scroller that resolved for `list` last time, memoized while the tree still holds it.
+ *
+ * Every render pass asks {@link nearestScroller} the same question about the same list, and each
+ * ask is a walk whose reads (scrollHeight, clientHeight, computed overflow) land on a tree that is
+ * mid-paint — they force the flush the DevTools timeline charges to whatever function happened to
+ * read first. Profiling the program boot put 400 ms of style recalculation behind a handful of
+ * these walks (`trackOf` and this one together), and the answer did not change between any two
+ * repaints.
+ *
+ * Only a POSITIVE resolution is cached, and negative answers are never: a list that has not grown
+ * its rows yet has nothing to scroll (the first paint of every session), and a null answer memoized
+ * at that instant would never be revisited. Once a scroller is found it is kept while
+ * `cached.contains(list)` and both are connected — containment and connectivity are plain node
+ * walks that never read layout, so the cache invalidates itself on reparenting or teardown without
+ * paying for it.
+ *
+ * **The one semantic residue is deliberate**: the original walk additionally required the scroller
+ * to HAVE something to scroll right then (the "declares overflow but never scrolls" guard above). A
+ * memoized scroller that has since stopped scrolling stays answered — which is harmless for the
+ * window: `computeWindow` then yields the whole list (a list that fits has no window to cut), and
+ * the watch's own ResizeObserver drives a measure when the box moves so the empty answer of the
+ * next moment arrives without a walk.
+ */
+export function scrollerFor(list: HTMLElement): HTMLElement | null {
+  const cached = scrollerCache.get(list);
+  if (cached && cached.isConnected && list.isConnected && cached.contains(list)) {
+    return cached;
+  }
+  const found = nearestScroller(list);
+  if (found) {
+    scrollerCache.set(list, found);
+  } else {
+    scrollerCache.delete(list);
+  }
+  return found;
+}
+
 /**
  * How far `list`'s first row has scrolled above the top of `scroller`'s viewport.
  *
@@ -327,7 +365,7 @@ export function listWindow(
   list: HTMLElement | null,
   spec: { count: number; rowHeight: number; columns?: number; overscanRows?: number },
 ): WindowRange {
-  const scroller = list?.isConnected === true ? nearestScroller(list) : null;
+  const scroller = list?.isConnected === true ? scrollerFor(list) : null;
   if (!scroller || !list) {
     const count = Math.max(0, Math.trunc(spec.count));
     return { end: count, padBottom: 0, padTop: 0, start: 0, totalRows: count };
@@ -377,7 +415,7 @@ export function scrollTopToReveal(spec: {
  * would paint twice for one keystroke.
  */
 export function revealListRow(list: HTMLElement | null, index: number, rowHeight: number): boolean {
-  const scroller = list?.isConnected === true ? nearestScroller(list) : null;
+  const scroller = list?.isConnected === true ? scrollerFor(list) : null;
   if (!scroller || !list || index < 0 || !(rowHeight > 0)) {
     return false;
   }
@@ -437,9 +475,24 @@ export interface ListWindowWatch {
   window: VirtualWindow;
 }
 
+const scrollerCache = new WeakMap<HTMLElement, HTMLElement>();
+
 /**
  * Bind — or keep — the scroll watch that repaints a windowed list.
  *
+ * Runs synchronously, on purpose. Deferring the resolve-and-bind to the next animation frame was
+ * tried and measured (`scripts/perf/REPORT.md`, "deferring the first measure a frame"): it moved
+ * the boot trace's forced-flush cost rather than removing it, since the layout work still runs on
+ * the frame's own pass either way, and it cost eight test-semantics changes in this file's test
+ * suite for the same totals — so it was reverted. What actually removed the repeated flush is
+ * `scrollerFor`'s identity memoization (alongside `trackOf`'s, in `split.ts`): once a scroller is
+ * resolved for a list, later calls skip the ancestor walk entirely instead of re-reading
+ * `scrollHeight`/`clientHeight` on a dirty tree every render.
+ *
+ * A steady state where the SAME list and scroller are bound hands back `previous` unchanged — no
+ * work happens when nothing changed. Only a rebind (new list, changed scroller, first bind) creates
+ * a new watch.
+ *
  * Called from the surface's `afterRender`, where the rows exist and the scroller can be resolved,
  * and handed back its own previous handle so re-binding is the exception rather than the rule: the
  * tree element survives every re-render (lit reuses it), so the steady state is "same list, same
@@ -450,14 +503,14 @@ export interface ListWindowWatch {
  * the element whose box moves when the ROWS change height, so it is what the window observes to
  * learn that `rowHeight()` now answers differently ({@link createVirtualWindow}).
  *
- * Returns the handle to keep, or null when nothing scrolls this list.
+ * @returns The handle to keep, or null when nothing scrolls this list.
  */
 export function watchListWindow(
   previous: ListWindowWatch | null,
   list: HTMLElement,
   spec: { count: () => number; rowHeight: () => number; onChange: () => void },
 ): ListWindowWatch | null {
-  const scroller = nearestScroller(list);
+  const scroller = scrollerFor(list);
   if (previous && previous.list === list && previous.scroller === scroller) {
     return previous;
   }

package/src/workspace/pane-derive.ts

@@ -43,9 +43,9 @@ import {
   activePane,
   detachTab,
   insertIntoPane,
+  paneBeside,
   paneById,
   promoteTab,
-  sidePane,
   workspace,
 } from "./workspace";
 import {
@@ -1143,9 +1143,11 @@ function pinnablePane(): Pane | null {
  * **Unlike `pane.derive`, the COMMAND's subject is the grid rather than the focused pane**, and
  * that is deliberate: the author reaches "Keep This Document" from the palette while the keyboard
  * is in the page they are editing, and a grid holds at most one derived pane — `pane.derive` puts
- * the projection in `sidePane()`, and `workspace.ts`'s `MAX_PANES` is 2. {@link pinnablePane} finds
- * it by scanning, which reads no focus and is therefore the same answer from anywhere — so the
- * preset menu can ask it about its own pane and get an answer about its own pane.
+ * the projection in `paneBeside(source.id)`, and `workspace.ts`'s `MAX_PANES` is 2.
+ * {@link
+ * pinnablePane} finds it by scanning, which reads no focus and is therefore the same answer
+ * from anywhere — so the preset menu can ask it about its own pane and get an answer about its own
+ * pane.
  *
  * @param {string} paneId
  * @returns {string | null}
@@ -1227,7 +1229,7 @@ export function derivationCommands(deps: DerivationDeps): AnyCommand[] {
             `command "pane.derive" argument "preset": "${preset}" requires ${refusal}`,
           );
         }
-        const target = sidePane();
+        const target = paneBeside(source.id);
         /* The DERIVATION IS PUBLISHED FIRST, and the order is not cosmetic.
            §18.1 rule 3 removes a pane with no subject, and `detachTab` applies it as each tab
            leaves — so handing the side pane's tabs back before it had a derivation collapsed the

package/src/workspace/session.ts

@@ -217,9 +217,9 @@ export interface RestoreDeps {
   /**
    * Make sure the grid HAS a second pane, without moving anything into it.
    *
-   * `receivingPane()`, not `splitRight()`: a split moves the focused pane's active tab, and at this
-   * point nothing is open — so `splitRight()` returns `null`, the pane is never created, and the
-   * second pane's documents all land in the first.
+   * `receivingPane(PRIMARY_PANE)`, not `splitRight()`: a split moves the focused pane's active tab,
+   * and at this point nothing is open — so `splitRight()` returns `null`, the pane is never
+   * created, and the second pane's documents all land in the first.
    */
   ensureSecondPane: () => void;
 }

package/src/workspace/workspace.ts

@@ -368,68 +368,82 @@ export function focusOtherPane() {
  */
 
 /**
- * Split the grid and move the focused tab into the new pane, which becomes focused.
+ * Split the grid and move a tab into the new pane, which becomes focused.
  *
  * Moves rather than duplicates: one tab is one document with one undo history and one collab
  * session, and two strips claiming the same id is the duplicate-`repeat`-key bug §4.3 describes.
  *
+ * The subject is `tabId` when given, else the focused pane's active tab. The drag resolver names
+ * the tab it is carrying — the gesture points at a chip, not at whatever the keyboard is in — and
+ * `⌘\` and `pane.splitRight` call it bare, which is the focused tab as it has always been.
+ *
+ * @param {string} [tabId] The tab to move; defaults to the focused pane's active tab.
  * @returns {Pane | null} The pane the tab landed in, or null when the split was refused
  */
-export function splitRight(): Pane | null {
-  const source = activePane();
-  const tabId = source.activeTabId;
-  const tab = tabId ? workspace.tabs.get(tabId) : null;
-  if (!tabId || !tab) {
+export function splitRight(tabId?: string): Pane | null {
+  const id = tabId ?? activePane().activeTabId;
+  const tab = id ? workspace.tabs.get(id) : null;
+  if (!id || !tab) {
+    return null;
+  }
+  const source = paneOfTab(id);
+  if (!source) {
     return null;
   }
   /* The tab moves AS IT IS. `capToPaneKind` used to run here and rewrite `session.ui.canvasMode`
      when the target pane could not host the tab's kind — which, for a Design tab, meant `⌘\`
      silently reopened your page as Code in the pane you had just made. Both panes host every kind
      now, so a split is a move and nothing else. */
-  const target = receivingPane();
-  detachTab(tabId);
-  insertIntoPane(target, tabId);
+  const target = receivingPane(source.id);
+  detachTab(id);
+  insertIntoPane(target, id);
   /* Focus moves LAST, and every write above went through {@link addPane}'s reactive record.
      Publishing the focus first made the pane observable while it still showed nothing: the
      `activeTab` computed re-ran, cached null, and the jump bar, the Inspector and the toolbar all
      printed "no document" over a stage that was drawing one. The write that should have corrected
      them notified nobody, because it went through the raw literal this used to push. */
-  target.activeTabId = tabId;
+  target.activeTabId = id;
   workspace.activePaneId = target.id;
   resetTabCycle();
-  promoteMru(tabId);
+  promoteMru(id);
   return target;
 }
 
 /**
- * The pane BESIDE the focused one, created if the grid has only one.
+ * The pane beside `paneId`, created if the grid has only one.
  *
  * The `existing ?? addPane(SECONDARY_PANE)` shape {@link splitRight} has always used, named because
- * three callers now want it: the split, `pane.compareWith` and `pane.derive`. Unlike `splitRight`
- * it moves NOTHING — "give me the other pane" and "send my document to it" are two requests, and
- * only the split makes both.
+ * four callers now want it: the split, `pane.compareWith`, `pane.derive` and the drag resolver.
+ * Unlike `splitRight` it moves NOTHING — "give me the other pane" and "send my document to it" are
+ * two requests, and only the split makes both.
+ *
+ * Takes the pane it is asked about rather than reading the focus, because a drag names the pane its
+ * chip came from and `pane.derive`'s preset menu asks about its own pane — and
+ * `scripts/check-pane-singletons.ts` rule 4 refuses a function handed a `paneId` that reads the
+ * focus. The one caller that means "beside ME" passes `activePane().id`.
  *
  * `SECONDARY_PANE` unconditionally, and it is free unconditionally: {@link closePane} refuses to
  * remove the primary, so "there is no other pane" can only mean the grid is exactly `[primary]` and
- * the focused pane is that primary. This used to be `existing?.id ?? SECONDARY_PANE` handed
+ * the asked-about pane is that primary. This used to be `existing?.id ?? SECONDARY_PANE` handed
  * straight to `addPane` with no check that the id was free — which, on a grid of `["secondary"]`,
  * pushed a SECOND record under that id and gave lit's keyed `repeat` a duplicate key. Both ends are
  * closed: the state is unreachable, and {@link addPane} would not mint the duplicate even if it
  * were. {@link MAX_PANES} is therefore satisfied by construction — there are two ids in play.
  *
+ * @param {string} paneId The pane to answer "beside" for.
  * @returns {Pane}
+ * @docs studio/interface/tabs
  */
-export function sidePane(): Pane {
-  const source = activePane();
-  return workspace.panes.find((pane) => pane.id !== source.id) ?? addPane(SECONDARY_PANE);
+export function paneBeside(paneId: string): Pane {
+  return workspace.panes.find((pane) => pane.id !== paneId) ?? addPane(SECONDARY_PANE);
 }
 
 /**
- * The pane beside the focused one, ready to OWN a tab.
+ * The pane beside `paneId`, ready to OWN a tab.
  *
- * {@link sidePane} answers "which pane is beside me". This answers "which pane may I put a document
- * IN", and they differ by exactly one case — a LENS, whose invariant D2 is that it owns no tab at
- * all. Three callers mean the second question and all three were asking the first:
+ * {@link paneBeside} answers "which pane is beside that one". This answers "which pane may I put a
+ * document IN", and they differ by exactly one case — a LENS, whose invariant D2 is that it owns no
+ * tab at all. Four callers mean the second question and all four were asking the first:
  *
  * - `splitRight` moved the focused tab into a lens. Between that write and the follow's next frame
  *   the pane held both a derivation and a tab — D2 violated and observable — and `applyDerivation`
@@ -441,6 +455,8 @@ export function sidePane(): Pane {
  *   touches — never ran to repair it.
  * - `navigateToComponent` read `tabOfPane(target.id)` back and got the SOURCE tab, so the §14.2
  *   `openedFrom` relationship the function exists to record was silently skipped.
+ * - The drag resolver dropped a tab or a file onto a lens's strip, where the same three failures
+ *   apply with a gesture instead of a command.
  *
  * **The derivation is released rather than the request refused.** "Put this document over there" is
  * an explicit instruction about the pane a projection is currently borrowing, and a projection is a
@@ -456,10 +472,11 @@ export function sidePane(): Pane {
  * `activeTabId` — promotes whichever document is on top, which after `⌘\` is the page, not the
  * layout the author was keeping. A gesture that empties a derivation of its meaning ends it.
  *
+ * @param {string} paneId The pane the receiving pane sits beside.
  * @returns {Pane}
  */
-export function receivingPane(): Pane {
-  const target = sidePane();
+export function receivingPane(paneId: string): Pane {
+  const target = paneBeside(paneId);
   if (target.derived) {
     /* The same write {@link closePane} makes for D4, for the same reason and in the same module:
        clearing a derivation is a fact about the PANE GRID. `pane-derive.ts`'s
@@ -582,8 +599,11 @@ export function closePane(paneId: string) {
  * same question while every pane's subject was its tabs. A lens pane's subject is its derivation —
  * its `tabOrder` is empty BY DESIGN — so the literal test would collapse it the instant it was
  * created.
+ *
+ * Exported for `panels/tab-drop.ts`, whose edge-drop resolution refuses to leave a pane it minted
+ * standing empty over a refused open — the same rule `document.openToSide` applies in-module.
  */
-function paneIsEmpty(pane: Pane): boolean {
+export function paneIsEmpty(pane: Pane): boolean {
   return pane.tabOrder.length === 0 && pane.derived === null;
 }
 
@@ -759,12 +779,12 @@ function syncTreeSelection(tab: Tab) {
 /**
  * Make `tabId` the active tab OF ITS OWN PANE. The one place activation happens.
  *
- * `focus: false` is "put it on screen there, and leave the keyboard where it is" — the shape a
- * side-open needs. It writes `pane.activeTabId` and stops: no `activePaneId` write, no
- * `resetTabCycle`, no `promoteMru`, no `syncTreeSelection`, because every one of those describes
- * where the AUTHOR is and the author has not moved. Drilling into a component with the focus
- * following it is the failure it exists to prevent: the pane the author is typing in changes under
- * them, and their next keystroke edits the definition instead of the page.
+ * `focus: false` is "put it on screen there, and leave the keyboard where it is" — the shape a READ
+ * needs: the derivation follow, `pane.compareWith`, session restore. It writes `pane.activeTabId`
+ * and stops: no `activePaneId` write, no `resetTabCycle`, no `promoteMru`, no `syncTreeSelection`,
+ * because every one of those describes where the AUTHOR is and the author has not moved. The
+ * gestures that OPEN something — drilling into a component, Open to the Side — follow instead: the
+ * pane they open into takes the keyboard, because the author asked to go there.
  *
  * Legal here and nowhere else — this module is `check-pane-singletons.ts`'s `FOCUS_OWNER`, and the
  * default is still to move the focus, so no existing caller changes behaviour.
@@ -809,10 +829,12 @@ function setActiveTab(tabId: string, opts: { cycling?: boolean; focus?: boolean
  *
  * `paneId` says WHERE, and `focus` says whether the keyboard goes with it. Both default to today's
  * answer — the focused pane, and yes — because "open this document" has always meant "in front of
- * me". They exist because drilling into a component, comparing two documents and following a
- * selection all mean the opposite: put it in the pane beside this one and leave me where I am. A
- * `paneId` no pane carries falls back to the focused pane rather than dropping the open, which is
- * the same answer a stale persisted layout gets everywhere else in this module.
+ * me". They exist because the gestures that mean the opposite are the READS: comparing two
+ * documents and following a derivation put it in the pane beside this one and leave the author
+ * where they are. The gestures that OPEN something — drill-in, Open to the Side — pass neither: the
+ * pane they open into takes the keyboard, because the author asked to go there. A `paneId` no pane
+ * carries falls back to the focused pane rather than dropping the open, which is the same answer a
+ * stale persisted layout gets everywhere else in this module.
  *
  * @param {{
  *   id: string;
@@ -960,12 +982,33 @@ export function moveTab(tabId: string, toIndex: number) {
   if (!tab || !pane) {
     return;
   }
+  pane.tabOrder = reorderWithinPane(pane, tabId, toIndex);
+}
+
+/**
+ * The order `pane`'s strip takes when `tabId` moves to `toIndex`, clamped into the region the tab's
+ * pinned state allows — the pinned prefix and the unpinned tail never interleave.
+ *
+ * Extracted from `moveTab` because the cross-pane move needs the SAME clamp: a tab dragged into
+ * another pane's strip at index 0 must land after that pane's pinned prefix, not inside it, and
+ * duplicating the boundary arithmetic is how the two moves drift apart.
+ *
+ * @param {Pane} pane
+ * @param {string} tabId
+ * @param {number} toIndex
+ * @returns {string[]} The pane's new `tabOrder`.
+ */
+function reorderWithinPane(pane: Pane, tabId: string, toIndex: number): string[] {
+  const tab = workspace.tabs.get(tabId);
+  if (!tab) {
+    return pane.tabOrder;
+  }
   const without = pane.tabOrder.filter((id) => id !== tabId);
   const boundary = without.filter((id) => workspace.tabs.get(id)?.pinned === true).length;
   const lower = tab.pinned ? 0 : boundary;
   const upper = tab.pinned ? boundary : without.length;
   const at = Math.min(Math.max(toIndex, lower), upper);
-  pane.tabOrder = [...without.slice(0, at), tabId, ...without.slice(at)];
+  return [...without.slice(0, at), tabId, ...without.slice(at)];
 }
 
 /**
@@ -1177,20 +1220,30 @@ export function activateTab(tabId: string, opts: { focus?: boolean } = {}) {
  *
  * Idempotent for a tab already in `paneId`, which is what makes it safe on the follow path.
  *
+ * `index` is the slot in `paneId`'s order the tab takes, clamped into the region the tab's pinned
+ * state allows — the same clamp `moveTab` applies, so a cross-pane move can never interleave a
+ * pinned tab with an unpinned one. Omitted, the tab takes the default slot: inside the pinned
+ * prefix if pinned, else at the end. A same-pane move with an index delegates to `moveTab`, so the
+ * drag-reorder and the cross-pane move share one clamp rather than two.
+ *
  * @param {string} tabId
  * @param {string} paneId
+ * @param {number} [index]
  * @returns {Pane | null} The pane it landed in, or null when either id names nothing.
  */
-export function moveTabToPane(tabId: string, paneId: string): Pane | null {
+export function moveTabToPane(tabId: string, paneId: string, index?: number): Pane | null {
   const pane = paneById(paneId);
   if (!pane || !workspace.tabs.has(tabId)) {
     return null;
   }
   if (pane.tabOrder.includes(tabId)) {
+    if (index !== undefined) {
+      pane.tabOrder = reorderWithinPane(pane, tabId, index);
+    }
     return pane;
   }
   detachTab(tabId);
-  insertIntoPane(pane, tabId);
+  insertIntoPane(pane, tabId, index);
   return pane;
 }
 
@@ -1226,8 +1279,16 @@ export function renameTab(oldId: string, newId: string, newDocumentPath: string)
 
 /** What the tab commands need from the rest of Studio. */
 export interface TabCommandDeps {
-  /** Read a file from disk and show it — `files/files.ts`'s `openFileInTab`. */
-  openFile: (path: string) => void | Promise<void>;
+  /**
+   * Read a file from disk and show it — `files/files.ts`'s `openFileInTab`. The options are the
+   * opener's own: `paneId` names the pane the tab lands in (defaulting to the focused one), and
+   * `focus: false` browses without moving the keyboard — the shape session restore and the
+   * derivation follow need.
+   */
+  openFile: (
+    path: string,
+    opts?: { paneId?: string; focus?: boolean; preview?: boolean },
+  ) => void | Promise<void>;
   /**
    * Read a file from disk and show it in a NAMED pane, browsing rather than committing and leaving
    * the keyboard where it is — `files/files.ts`'s `openFileInPane`.
@@ -1357,6 +1418,58 @@ export function tabCommands(deps: TabCommandDeps): AnyCommand[] {
         }
       },
     },
+    {
+      args: argsSchema({
+        file: stringProperty(
+          'Project-relative path of the file to open in the other pane, e.g. "pages/about.json". ' +
+            "It must exist.",
+        ),
+      }),
+      id: "document.openToSide",
+      title: "Open to the Side",
+      category: "Document",
+      /* PROJECT level for the same reason `document.open` is: it adds a tab to the workspace, and
+         a second pane may not exist yet — the record mints one. */
+      level: "project",
+      menus: ["context/file", "palette"],
+      group: "1_file",
+      when: (ctx) => ctx.project.open,
+      requires: "an open project",
+      /* No `aiTool`, by §12.4's first deletion rule: chrome — it arranges what the person is
+         looking at. No `undo`: opening a tab is not a state the undo stack owns. */
+      undo: "none",
+      /* The non-drag equivalent of dragging a file row onto the other pane's strip (SC 2.5.7): the
+         same `receivingPane` the drag resolver uses, so a file tree row and this command can never
+         disagree about where "the side" is. The open is a FOLLOW — the pane it lands in takes the
+         keyboard, which is what "open to the side" means when the side pane did not exist a moment
+         ago. */
+      run: async (_ctx, args) => {
+        const file = stringArg("document.openToSide", args, "file");
+        const target = receivingPane(activePane().id);
+        await deps.openFile(file, { paneId: target.id });
+        if (![...workspace.tabs.values()].some((tab) => tab.documentPath === file)) {
+          /* The open failed (a missing file, or no editor claims the format) and `openFileInTab`
+             reported it as a Problem rather than throwing. If the target pane was minted for this
+             open and holds nothing, close it — a command that fails must not leave a new empty
+             pane behind.
+
+             `target.id !== PRIMARY_PANE` GUARDS it, and the guard is load-bearing rather than
+             defensive: `receivingPane` answers PRIMARY when the author is focused on the secondary,
+             and an empty primary is a legitimate state on its own (`detachTab`'s "welcome screen
+             beside the document" exemption) — not a hole this command minted. `closePane`'s own
+             contract reads `PRIMARY_PANE` as "collapse the OTHER pane", so calling it unguarded here
+             would close the secondary the author was just looking at, over a refusal about a
+             completely different pane. */
+          if (paneIsEmpty(target) && target.id !== PRIMARY_PANE) {
+            closePane(target.id);
+          }
+          throw new RangeError(
+            `command "document.openToSide" argument "file": "${file}" could not be opened — it ` +
+              `does not exist, or no editor claims its format. Problems has the reason.`,
+          );
+        }
+      },
+    },
     {
       id: "document.reopenClosed",
       title: "Reopen Closed Document",
@@ -1470,6 +1583,10 @@ export function paneCommands(deps: TabCommandDeps): AnyCommand[] {
       requires: "an open document",
       undo: "none",
       run: () => {
+        /* The non-drag equivalent of every drag move (SC 2.5.7): `splitRight` moves the active tab
+           to a new pane at the right of the grid, which is what dragging a tab onto the grid's
+           right edge does, and `document.openToSide` is its file-tree counterpart. A keyboard-only
+           author can reach every arrangement the drag offers. */
         splitRight();
       },
     },
@@ -1508,11 +1625,11 @@ export function paneCommands(deps: TabCommandDeps): AnyCommand[] {
           );
         }
         /* Nothing closes, nothing unsplits, and the FOCUS DOES NOT MOVE: comparing is a read.
-           {@link receivingPane} rather than `sidePane`, because the pane beside this one may be a
+           {@link receivingPane} rather than `paneBeside`, because the pane beside this one may be a
            LENS — and a lens owns no tab, so the document landed in a `tabOrder` that `tabOfPane`
            hops straight past. Nothing was on screen, nothing was in a strip, and
            `workspace.activeTabId` went on reporting the source. */
-        await deps.openFileInPane(receivingPane().id, path);
+        await deps.openFileInPane(receivingPane(here.id).id, path);
       },
     },
     {

package/styles/shell-frame.css

@@ -54,6 +54,14 @@
 #toolbar.electrobun-webkit-app-region-drag {
   -webkit-app-region: drag;
 }
+/* The mirror of #toolbar's own drag class above: every interactive control inside the Command Bar
+   carries this (commandbar.json) so Electrobun's ancestry walk finds a working no-drag signal on
+   the button itself instead of falling through to the toolbar's drag region. Unscoped, like
+   .resize-edge below, because the class name is self-describing and used nowhere else. A no-op
+   outside Electrobun. */
+.electrobun-webkit-app-region-no-drag {
+  -webkit-app-region: no-drag;
+}
 /* Resize edge zones */
 .resize-edge {
   position: fixed;

package/styles/shell-frame.json

@@ -35,6 +35,10 @@
     "#toolbar.electrobun-webkit-app-region-drag": {
       "-webkit-app-region": "drag"
     },
+    ".electrobun-webkit-app-region-no-drag": {
+      "$description": "The mirror of #toolbar's own drag class above: every interactive control inside the Command Bar carries this (commandbar.json) so Electrobun's ancestry walk finds a working no-drag signal on the button itself instead of falling through to the toolbar's drag region. Unscoped, like .resize-edge below, because the class name is self-describing and used nowhere else. A no-op outside Electrobun.",
+      "-webkit-app-region": "no-drag"
+    },
     ".resize-edge": {
       "$description": "Resize edge zones",
       "position": "fixed",

package/dist/chunks/content-source-5mex4x1h.js

@@ -1,46 +0,0 @@
-import {
-  collectionInfo2,
-  collectionDirs2,
-  listCollectionEntryIds2,
-  reloadDraftAwareGrids2,
-  createCollectionSource2,
-  createPagesSource2
-} from "./studio-1knfqgy7.js";
-import"./studio-gb13095a.js";
-import"./studio-g3jevyjt.js";
-import"./studio-q0a3yk4n.js";
-import"./studio-3773086z.js";
-import"./studio-tqgryxwg.js";
-import"./studio-mhhyamxf.js";
-import"./studio-8scdew0e.js";
-import"./studio-nq5yf5mp.js";
-import"./studio-1z1kcjv4.js";
-import"./studio-qk90fgqm.js";
-import"./studio-zdn2g6dt.js";
-import"./studio-y9zedyjn.js";
-import"./studio-jxp12rnj.js";
-import"./studio-nzzpvzx9.js";
-import"./studio-k75n7vhp.js";
-import"./studio-q3x06vmj.js";
-import"./studio-6ewqv390.js";
-import"./studio-esrxgwh6.js";
-import"./studio-vw7mzp6z.js";
-import"./studio-6nzaktvy.js";
-import"./studio-aj37eer3.js";
-import"./studio-vfq8qpjt.js";
-import"./studio-1k325pwf.js";
-import"./studio-kkqkcp3d.js";
-import"./studio-p1dw8wfw.js";
-import"./studio-yxa81f45.js";
-import"./studio-7r42c6ca.js";
-export {
-  collectionDirs2 as collectionDirs,
-  collectionInfo2 as collectionInfo,
-  createCollectionSource2 as createCollectionSource,
-  createPagesSource2 as createPagesSource,
-  listCollectionEntryIds2 as listCollectionEntryIds,
-  reloadDraftAwareGrids2 as reloadDraftAwareGrids
-};
-
-//# debugId=597BB9A23802D85864756E2164756E21
-//# sourceMappingURL=content-source-5mex4x1h.js.map