@jxsuite/studio 5.1.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -59,23 +59,23 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.2.0",
-    "@jxsuite/ai": "^0.37.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.2.2",
+    "@jxsuite/ai": "^0.37.2",
     "@jxsuite/collab": "^0.9.0",
     "@jxsuite/create": "^1.3.11",
     "@jxsuite/formulas": "^0.0.18",
     "@jxsuite/markup": "^0.4.10",
-    "@jxsuite/protocol": "^2.3.0",
+    "@jxsuite/protocol": "^2.3.1",
     "@jxsuite/runtime": "^4.0.1",
     "@jxsuite/schema": "^2.2.0",
     "@jxsuite/site": "^2.0.1",
     "@jxsuite/ui": "^0.2.0",
-    "@vue/reactivity": "3.5.42",
+    "@vue/reactivity": "3.5.43",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.56.0",
-    "tabulator-tables": "^6.5.2",
+    "tabulator-tables": "^6.5.3",
     "yaml": "^2.9.1"
   },
   "devDependencies": {

package/src/files/files.ts

@@ -60,6 +60,7 @@ import {
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import {
+  PRIMARY_PANE,
   activateTab,
   moveTabToPane,
   openTab,
@@ -405,7 +406,7 @@ export async function openLastSessionOrHome(): Promise<boolean> {
   if (session) {
     const opened = await restoreSession(session, {
       ensureSecondPane: () => {
-        receivingPane();
+        receivingPane(PRIMARY_PANE);
       },
       openFile: (path, paneId) => openFileInTab(path, { focus: false, paneId }),
     });
@@ -1525,6 +1526,11 @@ function fileRowFacts(entry: { path: string; type: string }): Record<string, unk
     }
     return facts;
   }
+  /* Every file row states `file`, because `document.openToSide` takes one and the row is the only
+     thing that knows it — the same reason `content.openEntry`'s `path` is stated here. A command
+     whose required arguments this row cannot answer is skipped, so without this fact the
+     "Open to the Side" row would never render on any file. */
+  facts.file = entry.path;
   if (collectionOfPath(entry.path)) {
     facts.path = entry.path;
   }
@@ -2238,23 +2244,36 @@ export interface OpenFileOpts {
 /**
  * Bring an ALREADY-OPEN tab to where the caller asked for it.
  *
- * Three cases, and the third is the one a following pane depends on:
+ * Three cases, and the third is the one a cross-pane open depends on:
  *
- * | the tab is…                                      | behaviour                                      |
- * | ------------------------------------------------ | ---------------------------------------------- |
- * | in the requested pane (or no pane was requested) | activate it there, honouring `focus`           |
- * | elsewhere, and **not** its pane's active tab     | move it — one tab is one document in one strip |
- * | elsewhere, and **is** its pane's active tab      | **nothing.** You are already looking at it     |
+ * | the tab is…                                                                  | behaviour                                      |
+ * | ---------------------------------------------------------------------------- | ---------------------------------------------- |
+ * | elsewhere, and **not** its pane's active tab                                 | move it — one tab is one document in one strip |
+ * | elsewhere, and **is** its pane's active tab, browsing (`focus: false`)       | **nothing.** You are already looking at it     |
+ * | already in the requested pane, or committing (moving/staying, focus follows) | activate it there, honouring `focus`           |
  *
- * The third exists because moving it would oscillate: a derivation that re-resolves to the document
+ * The first exists because moving it would oscillate: a derivation that re-resolves to the document
  * the author is editing would yank it out of their pane and into the assistant one, and the follow
  * would then re-resolve against whatever landed in its place.
+ *
+ * The third is the first's other half, and it is what "Open to the Side" needs: the tab is
+ * elsewhere and IS its pane's active tab, but the caller asked for it in a DIFFERENT pane with the
+ * focus following — the author asked to go there, so "you are already looking at it" is the wrong
+ * answer. The move is a `moveTabToPane`, which activates nothing and moves no focus; the
+ * `activateTab` below then points the keyboard at the pane it landed in.
+ *
+ * **The guard reads `wanted !== undefined && holder` — not also `holder.id !== wanted`.** A tab
+ * already in the requested pane still passes through: `moveTabToPane` is idempotent for a tab
+ * already in `paneId` (its own doc, next to this call), so entering the block and calling it anyway
+ * costs nothing and reaches the identical final `activateTab`. Naming the extra condition would ask
+ * a reader to verify a distinction that changes nothing — the redundant branch this replaced is
+ * `check-lens-mutants.ts`'s own "delete rather than assert" rule, applied to itself.
  */
 function revealOpenTab(tabId: string, opts: OpenFileOpts): void {
   const wanted = opts.paneId;
   const holder = paneOfTab(tabId);
-  if (wanted !== undefined && holder && holder.id !== wanted) {
-    if (holder.activeTabId === tabId) {
+  if (wanted !== undefined && holder) {
+    if (holder.activeTabId === tabId && opts.focus === false) {
       return;
     }
     moveTabToPane(tabId, wanted);
@@ -2293,7 +2312,7 @@ export async function openFileInTab(path: string, opts: OpenFileOpts = {}) {
    * why a branch anywhere else would send a restored media tab straight back down the error path.
    */
   if (isViewableMedia(path)) {
-    openMediaTab(path);
+    openMediaTab(path, opts);
     if (follows) {
       requireProjectState().selectedPath = path;
     }
@@ -2308,8 +2327,10 @@ export async function openFileInTab(path: string, opts: OpenFileOpts = {}) {
   // CSV files open in the grid editor (source mode remains as the raw-text alternate).
   if (path.toLowerCase().endsWith(".csv")) {
     try {
-      await openCsvGridTab(path);
-      requireProjectState().selectedPath = path;
+      await openCsvGridTab(path, opts);
+      if (follows) {
+        requireProjectState().selectedPath = path;
+      }
       trackRecentFile({
         name: path.split("/").pop() || path,
         path,
@@ -2395,8 +2416,10 @@ export async function openFileInTab(path: string, opts: OpenFileOpts = {}) {
  * Open a file into a NAMED pane, browsing rather than committing, leaving the keyboard behind.
  *
  * The same body as {@link openFileInTab} with the three options a side-open always wants, given a
- * signature that says which pane in the first parameter. It is what "open it beside this" means
- * everywhere it is asked for — drilling into a component, following a layout, `pane.compareWith`.
+ * signature that says which pane in the first parameter. It is what the READS mean by "open it
+ * beside this" — following a layout, `pane.compareWith`. The gestures that open something
+ * (drill-in, Open to the Side) call {@link openFileInTab} directly, because the pane they open into
+ * takes the keyboard.
  *
  * @param {string} paneId
  * @param {string} path

package/src/grid/grid-lazy.ts

@@ -0,0 +1,59 @@
+/**
+ * Lazy grid engine.
+ *
+ * `grid-view.ts` is the only module that imports `tabulator-tables`, and as of 6.5.3 Tabulator's
+ * `Row` class runs `document.createElement` in a static field, so the CLASS DEFINITION — not the
+ * table's construction — needs a DOM to exist. That makes `grid-view.ts` unsafe to reach with a
+ * static value-import from any module that must load with no DOM: `app-commands.ts` pulls
+ * `gridViewCommands` from `grid-panel.ts` for the command set `scripts/check-command-levels.ts` and
+ * its siblings read in a bare Bun process (see `commands/defaults.ts`'s note on
+ * `selection.convertToComponent` for the sibling convention this follows).
+ *
+ * So `grid-panel.ts` never has a static value-import of `./grid-view`; it loads the engine through
+ * here instead, exactly as `services/monaco-lazy.ts` defers Monaco. Real usage pays no cost for it
+ * — a grid tab cannot exist before `document` does — and the two accessors mirror Monaco's: one for
+ * code that MOUNTS a grid (async is free there), one for code that can only run with a grid engine
+ * already loaded.
+ */
+import type * as gridViewModule from "./grid-view";
+
+export type GridEngine = typeof gridViewModule;
+
+let _engine: GridEngine | null = null;
+let _loading: Promise<GridEngine> | null = null;
+
+/**
+ * Load the Tabulator-backed grid engine. Memoized — concurrent callers share one import.
+ *
+ * @returns {Promise<GridEngine>}
+ */
+export function loadGridEngine(): Promise<GridEngine> {
+  if (_engine) {
+    return Promise.resolve(_engine);
+  }
+  // Not `async`: an async function wraps the memo in a fresh promise per call, so concurrent
+  // Callers could not observe that they share one in-flight load.
+  _loading ??= import("./grid-view").then((engine) => {
+    _engine = engine;
+    return engine;
+  });
+  return _loading;
+}
+
+/**
+ * The loaded engine, or null before the first grid mount.
+ *
+ * For call sites that can run synchronously once a grid already exists in the session — they must
+ * not force the module to load, only read it if it is already there.
+ *
+ * @returns {GridEngine | null}
+ */
+export function loadedGridEngine(): GridEngine | null {
+  return _engine;
+}
+
+/** Reset the memo (tests only). */
+export function resetGridLazy(): void {
+  _engine = null;
+  _loading = null;
+}

package/src/grid/grid-open.ts

@@ -30,11 +30,25 @@ import type { AnyCommand, CommandRegistry } from "../commands/registry";
 /** Placeholder document for grid tabs — the grid never reads it; save routes to the controller. */
 const GRID_STUB_DOCUMENT = { children: [], tagName: "div" };
 
-/** Open (or activate) a `.csv` file as a grid tab. */
-export async function openCsvGridTab(path: string): Promise<Tab> {
+/**
+ * Open (or activate) a `.csv` file as a grid tab.
+ *
+ * The options are `openFileInTab`'s own, passed straight through: `paneId` says which pane the tab
+ * lands in (defaulting to the focused one), `focus: false` browses without moving the keyboard, and
+ * `preview` opens a disposable tab. An existing tab is activated with the caller's `focus` — the
+ * same rule the document path follows.
+ *
+ * @param {string} path - Project-relative path of the `.csv`
+ * @param {{ paneId?: string; focus?: boolean; preview?: boolean }} [opts]
+ * @returns {Promise<Tab>}
+ */
+export async function openCsvGridTab(
+  path: string,
+  opts: { paneId?: string; focus?: boolean; preview?: boolean } = {},
+): Promise<Tab> {
   const existing = workspace.tabs.get(path);
   if (existing) {
-    activateTab(path);
+    activateTab(path, { focus: opts.focus !== false });
     return existing;
   }
 
@@ -52,6 +66,9 @@ export async function openCsvGridTab(path: string): Promise<Tab> {
     documentPath: path,
     id: path,
     sourceFormat: formatForPath(path)?.name ?? null,
+    ...(opts.paneId !== undefined && { paneId: opts.paneId }),
+    ...(opts.preview === true && { preview: true }),
+    ...(opts.focus === false && { focus: false }),
   });
   const controller = createGridController(tab, source);
   void controller.load();

package/src/grid/grid-panel.ts

@@ -39,7 +39,7 @@ import { rectOf } from "../utils/geometry";
 import { activeTab, workspace } from "../workspace/workspace";
 import { createGridController, getGridController } from "./grid-controller";
 import { createCsvFileSource } from "./sources/csv-file-source";
-import { createGridView } from "./grid-view";
+import { loadedGridEngine, loadGridEngine } from "./grid-lazy";
 import { parseGridTabId } from "./grid-source";
 import { mountGridPanelSurface } from "../surfaces/grid-panel";
 import { openGridViewsSurface } from "../surfaces/grid-views";
@@ -473,12 +473,45 @@ export function renderGridMode(surface: CanvasSurface, tab: Tab) {
   const engine = controller;
   let hostEl: HTMLElement | null = null;
 
+  /**
+   * (Re)build the Tabulator engine over `host`, destroying whatever view is live first.
+   *
+   * Synchronous when `tabulator-tables` is already loaded — true for every mount after the
+   * session's first, so every existing caller keeps seeing `panel.view` set before this returns. On
+   * a cold first load it goes through `loadGridEngine()` instead (see `grid-lazy.ts`) and `onReady`
+   * — and, symmetrically with the `ready` handling below, `panel.bump()` — run once the import
+   * resolves, guarded against the pane having moved on in the meantime.
+   */
+  function rebuildView(onReady?: (view: GridView) => void) {
+    panel.view?.destroy();
+    panel.view = null;
+    if (!hostEl) {
+      return;
+    }
+    const requestedHost = hostEl;
+    const loaded = loadedGridEngine();
+    if (loaded) {
+      const view = loaded.createGridView(requestedHost, engine);
+      panel.view = view;
+      onReady?.(view);
+      return;
+    }
+    void loadGridEngine().then(({ createGridView }) => {
+      if (activeIn(paneId) !== panel || hostEl !== requestedHost || panel.view) {
+        return;
+      }
+      const view = createGridView(requestedHost, engine);
+      panel.view = view;
+      onReady?.(view);
+      panel.bump();
+    });
+  }
+
   const panel: ActiveGridPanel = {
     applyLayout(layout) {
       void engine.setSort(layout?.sort ?? null);
       engine.setGrouping(layout?.groupBy ?? null);
-      panel.remount();
-      panel.view?.setSearch(layout?.filter ?? "");
+      rebuildView((view) => view.setSearch(layout?.filter ?? ""));
       panel.bump();
     },
     bump() {
@@ -486,8 +519,7 @@ export function renderGridMode(surface: CanvasSurface, tab: Tab) {
     },
     paneId,
     remount() {
-      panel.view?.destroy();
-      panel.view = hostEl ? createGridView(hostEl, engine) : null;
+      rebuildView();
     },
     replace: null,
     scope,
@@ -576,14 +608,16 @@ export function renderGridMode(surface: CanvasSurface, tab: Tab) {
 
       // Create the engine once the columns exist and the host div is in the DOM.
       if (!panel.view && !engine.state.loading && engine.state.columns.length > 0 && hostEl) {
-        panel.view = createGridView(hostEl, engine);
-        if (!restored) {
+        rebuildView((view) => {
+          if (restored) {
+            return;
+          }
           restored = true;
           const layout = loadGridLayout(engine.source.id);
           void engine.setSort(layout?.sort ?? null);
           engine.setGrouping(layout?.groupBy ?? null);
-          panel.view.setSearch(layout?.filter ?? "");
-        }
+          view.setSearch(layout?.filter ?? "");
+        });
       }
     });
   });

package/src/media/media-open.ts

@@ -39,13 +39,22 @@ export function mediaTabModes(path: string): string[] {
 /**
  * Open (or activate) a media file's viewer tab.
  *
+ * The options are `openFileInTab`'s own, passed straight through: `paneId` says which pane the tab
+ * lands in (defaulting to the focused one), `focus: false` browses without moving the keyboard, and
+ * `preview` opens a disposable tab. An existing tab is activated with the caller's `focus` — the
+ * same rule the document path follows.
+ *
  * @param {string} path - Project-relative path of the file
+ * @param {{ paneId?: string; focus?: boolean; preview?: boolean }} [opts]
  * @returns {Tab}
  */
-export function openMediaTab(path: string): Tab {
+export function openMediaTab(
+  path: string,
+  opts: { paneId?: string; focus?: boolean; preview?: boolean } = {},
+): Tab {
   const existing = workspace.tabs.get(path);
   if (existing) {
-    activateTab(path);
+    activateTab(path, { focus: opts.focus !== false });
     return existing;
   }
   return openTab({
@@ -54,5 +63,8 @@ export function openMediaTab(path: string): Tab {
     documentPath: path,
     id: path,
     sourceFormat: null,
+    ...(opts.paneId !== undefined && { paneId: opts.paneId }),
+    ...(opts.preview === true && { preview: true }),
+    ...(opts.focus === false && { focus: false }),
   });
 }

package/src/panels/pane-context.ts

@@ -500,10 +500,11 @@ export interface PresetRow {
    *
    * The previous round made the row's ANSWER a pure function of the pane and left its ACTION
    * resolving the focus: every one of these three commands takes the focused pane as its subject
-   * (`pane.derive`'s `activePane()`/`sidePane()`, `pane.unsplit`'s `workspace.activePaneId`), so a
-   * row read off the secondary pane's menu derived from the primary. Reachable by keyboard and only
-   * by keyboard, which is why it survived a browser pass: `panels/pane-grid.ts` focuses a pane on
-   * POINTERDOWN, and a keyboard activation of a menu item fires `click` alone.
+   * (`pane.derive`'s `activePane()`/`paneBeside(source.id)`, `pane.unsplit`'s
+   * `workspace.activePaneId`), so a row read off the secondary pane's menu derived from the
+   * primary. Reachable by keyboard and only by keyboard, which is why it survived a browser pass:
+   * `panels/pane-grid.ts` focuses a pane on POINTERDOWN, and a keyboard activation of a menu item
+   * fires `click` alone.
    *
    * Carried on the row rather than passed as a command argument. A pane id in `args` would make
    * "which pane" a public input of `pane.derive` — a third property on a record the palette already

package/src/panels/pane-grid.ts

@@ -11,20 +11,22 @@
  * that scaffolding was standing in for, and the handover is deleted with it.
  *
  * **The document owns the frame; this module owns the decisions.** `surfaces/pane-grid.json` is the
- * cells, the four boxes inside each one, the splitter between two of them and every rule that lays
+ * cells, the five boxes inside each one, the splitter between two of them and every rule that lays
  * them out; `surfaces/pane-grid.ts` is the mount. What is left here is the flow: which panes there
  * are, what a cell's stage is furnished with, in what ORDER a departing cell is taken apart, and
  * what the grid's own tracks are. Everything a cell CONTAINS still arrives through the module that
  * owns it — `canvas/canvas-render.ts` is the render root of the stage and this document puts
  * nothing inside it, `panels/jump-bar.ts` and `panels/pane-context.ts` are handed the jump and
- * chrome boxes, and `panels/tab-strip.ts` is handed the strip.
+ * chrome boxes, `panels/tab-strip.ts` is handed the strip, and this module makes the fifth — the
+ * right-edge drop zone — a pragmatic target itself.
  *
  * **Three properties survived the conversion, and each is structural rather than remembered:**
  *
  * 1. _A pane is complete before it is published._ The runtime builds a `$map` row inside its own
- *    effect scope and inserts it afterwards, so the four `cellPart` calls below — the surface
- *    record, the gestures, the two bars' mounts, the pane-focus listener — all happen while the
- *    cell is still detached. There is no frame in which a cell exists with no stage inside it.
+ *    effect scope and inserts it afterwards, so the five `cellPart` calls below — the surface
+ *    record, the gestures, the two bars' mounts, the pane-focus listener, the drop zone's own
+ *    registration — all happen while the cell is still detached. There is no frame in which a cell
+ *    exists with no stage inside it.
  * 2. _A pane's node is never re-parented._ The repeater is keyed on the pane id and the runtime's
  *    forward-cursor pass only moves rows that are out of place. `workspace.panes[0]` is always the
  *    primary and `MAX_PANES` is 2, so no row ever moves — which matters because re-parenting is not
@@ -54,6 +56,12 @@
  */
 
 import { effect, effectScope } from "../reactivity";
+import {
+  dropTargetForElements,
+  monitorForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { isTabDropSource } from "./tab-drop";
+import { rectOf } from "../utils/geometry";
 import {
   DEFAULT_PANE_SPLIT,
   PANE_SPLIT_MAX,
@@ -74,13 +82,13 @@ import { scheduleCanvasRender } from "../canvas/canvas-render";
 import { paneRegion, paneStripRegion } from "../ui/regions";
 import { attachJumpBarHost } from "./jump-bar";
 import { attachPaneChromeHost } from "./pane-context";
-import { focusPane, workspace } from "../workspace/workspace";
+import { MAX_PANES, focusPane, workspace } from "../workspace/workspace";
 import { mountPaneGridSurface } from "../surfaces/pane-grid";
 import type { EffectScope } from "@vue/reactivity";
 import type { CanvasSurface } from "../canvas/canvas-surface";
 import type { PaneCellPart, PaneGridRow, PaneGridSurface } from "../surfaces/pane-grid";
 
-/** One drawn pane: its root and the four surfaces inside it. */
+/** One drawn pane: its root and the five surfaces inside it. */
 export interface PaneCell {
   paneId: string;
   root: HTMLElement;
@@ -88,13 +96,16 @@ export interface PaneCell {
   jump: HTMLElement;
   chrome: HTMLElement;
   stage: HTMLElement;
+  dropZone: HTMLElement;
   surface: CanvasSurface;
 }
 
-/** A cell's record, plus the disposer its stage gestures live behind. */
+/** A cell's record, plus the disposers its stage gestures and its drop zone live behind. */
 interface CellState extends PaneCell {
   /** Stage-gesture disposer, live between the stage's creation and the cell's disposal. */
   releaseGestures: (() => void) | null;
+  /** The drop zone's pragmatic registration, live between its creation and the cell's disposal. */
+  releaseDropZone: (() => void) | null;
 }
 
 const _cells = new Map<string, CellState>();
@@ -110,6 +121,13 @@ let _drawn: string[] = [];
 
 let _scope: EffectScope | null = null;
 
+/**
+ * The monitor that ARMS the right-edge zones — `_surface.drag`'s one writer. It never resolves a
+ * drop; `panels/tab-strip.ts`'s own monitor does that, from the same drop targets this one only
+ * watches.
+ */
+let _dragMonitor: (() => void) | null = null;
+
 /** The cell a pane is drawn in, or null. Test-visible, and the bootstrap's handle on the primary. */
 export function cellForPane(paneId: string): PaneCell | null {
   return _cells.get(paneId) ?? null;
@@ -120,7 +138,7 @@ export function cellForPane(paneId: string): PaneCell | null {
  *
  * The mount is asynchronous — the runtime waits for the kit to be defined and renders one microtask
  * after that — so `mountShell()` starting the grid is not the same event as the grid existing. The
- * bootstrap reads the primary cell's four boxes on the line after it, exactly as `mountShellTree()`
+ * bootstrap reads the primary cell's five boxes on the line after it, exactly as `mountShellTree()`
  * made every caller await the frame for the same reason.
  */
 export function paneGridReady(): Promise<void> {
@@ -142,8 +160,10 @@ function cellState(paneId: string): CellState {
   }
   const cell: CellState = {
     chrome: null as unknown as HTMLElement,
+    dropZone: null as unknown as HTMLElement,
     jump: null as unknown as HTMLElement,
     paneId,
+    releaseDropZone: null,
     releaseGestures: null,
     root: null as unknown as HTMLElement,
     stage: null as unknown as HTMLElement,
@@ -217,7 +237,52 @@ function attachStage(cell: CellState, stage: HTMLElement): void {
 }
 
 /**
- * One of a cell's five boxes has been created. Fill the record in, and wire what belongs to it.
+ * The RIGHT BAND of `paneId`'s cell, and only while it is legal to drop there: the grid is still
+ * under {@link MAX_PANES}, and `paneId` names the LAST pane — the one a second pane would sit
+ * beside. A grid of two panes has no legal edge at all, so the band answers refused everywhere on
+ * it.
+ *
+ * The band itself is `min(120px, half the cell's own width)`: wide enough to aim at, narrow enough
+ * that the rest of the stage keeps ordinary canvas gestures — a drag never reaches this at all
+ * unless `canDrop` already accepted it, so the band only ever competes with itself.
+ */
+function edgeData(
+  paneId: string,
+  input: { clientX: number },
+  element: HTMLElement,
+): Record<string, unknown> {
+  if (workspace.panes.length >= MAX_PANES || workspace.panes.at(-1)?.id !== paneId) {
+    return { type: "pane-edge-refused" };
+  }
+  const rect = rectOf(element);
+  const band = Math.min(120, rect.width / 2);
+  if (input.clientX < rect.right - band) {
+    return { type: "pane-edge-refused" };
+  }
+  return { paneId, type: "pane-edge" };
+}
+
+/**
+ * Make a cell's drop zone a pragmatic target. `canDrop` alone is not enough to keep the zone out of
+ * a two-pane grid's way — {@link edgeData} refuses in the DATA, the same "never fall through" rule
+ * `files.ts`'s row targets use, because the zone sits ABOVE the stage (`z-index: 4`) and a refusal
+ * that let the drop bubble past it would still have kept the pointer from ever reaching the iframe
+ * underneath.
+ */
+function attachDropZone(paneId: string, element: HTMLElement): () => void {
+  return dropTargetForElements({
+    canDrop({ source }) {
+      return isTabDropSource(source.data);
+    },
+    element,
+    getData({ input }) {
+      return edgeData(paneId, input, element);
+    },
+  });
+}
+
+/**
+ * One of a cell's six boxes has been created. Fill the record in, and wire what belongs to it.
  *
  * The two bars are HANDED their host rather than resolving a region, the same way
  * `panels/frontmatter-panel.ts` is handed the stage. They cannot resolve one the way the tab strip
@@ -248,6 +313,11 @@ function cellPart(paneId: string, part: PaneCellPart, element: HTMLElement): voi
     attachPaneChromeHost(paneId, element);
     return;
   }
+  if (part === "dropZone") {
+    cell.dropZone = element;
+    cell.releaseDropZone = attachDropZone(paneId, element);
+    return;
+  }
   attachStage(cell, element);
 }
 
@@ -272,6 +342,8 @@ function cellPart(paneId: string, part: PaneCellPart, element: HTMLElement): voi
  *   the record the hosts resolve through.
  */
 function disposeCell(cell: CellState): void {
+  cell.releaseDropZone?.();
+  cell.releaseDropZone = null;
   attachJumpBarHost(cell.paneId, null);
   attachPaneChromeHost(cell.paneId, null);
   cell.releaseGestures?.();
@@ -396,6 +468,22 @@ export function mount(): void {
     { cellPart, move: setPaneSplit, settle: persistDocks },
   );
   _ready = _surface.ready;
+  _dragMonitor = monitorForElements({
+    canMonitor({ source }) {
+      return isTabDropSource(source.data);
+    },
+    onDrag({ location }) {
+      const [target] = location.current.dropTargets;
+      const edgePane = target?.data.type === "pane-edge" ? (target.data.paneId as string) : "";
+      _surface?.drag({ armed: true, edgePane });
+    },
+    onDragStart() {
+      _surface?.drag({ armed: true, edgePane: "" });
+    },
+    onDrop() {
+      _surface?.drag({ armed: false, edgePane: "" });
+    },
+  });
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -412,6 +500,8 @@ export function mount(): void {
 export function unmount(): void {
   _scope?.stop();
   _scope = null;
+  _dragMonitor?.();
+  _dragMonitor = null;
   /* Every cell is taken apart by the same ordered teardown a departing one gets, and BEFORE the
      document goes: doing it afterwards would hand `releaseCanvasHosts` a stage whose frames the
      runtime had already dropped. */