@jxsuite/studio 6.1.1 → 8.0.0

package/src/panels/pane-context.ts

@@ -45,6 +45,7 @@
  * the document it is warning you about.
  */
 
+import { writesEntryOnCanvas } from "../content/content-collections";
 import { projectState, updateUi } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { PRIMARY_PANE, focusPane, workspace } from "../workspace/workspace";
@@ -68,10 +69,14 @@ import { openMenu } from "../surfaces/menu";
 import { emptyPaneContextView, mountPaneContextSurface } from "../surfaces/pane-context";
 import { PANE_SELECTOR } from "../surfaces/pane-grid";
 import { diffShowsCode } from "../canvas/diff-view";
+import { backTargetOf, goBack } from "../workspace/workspace-back";
+import type { WorkspaceId } from "../workspace/workspace-ids";
 import { canRenderComparison } from "./git-diff-open";
 import { shell } from "../shell";
 import { paneRegion } from "../ui/regions";
+import { isNumber, isString } from "@jxsuite/schema/guards";
 import {
+  CANVAS_VIEWS,
   fitToScreen,
   getFit,
   resetZoom,
@@ -87,7 +92,12 @@ import {
 import { editorKindOf, editorKindsOf, modeForEditorKind } from "../tabs/tab";
 import { collabState } from "../collab/collab-state";
 import { activeRegistry } from "../commands/active-registry";
-import { getEffectiveLayoutPath, getEffectiveLocales, getEffectiveMedia } from "../site-context";
+import {
+  getEffectiveLayoutPath,
+  getEffectiveLocales,
+  getEffectiveMedia,
+  getEffectiveRenderLocale,
+} from "../site-context";
 import { localeLabel, localeOfPath } from "@jxsuite/schema/locale";
 import { isSchemeQuery } from "../utils/canvas-media";
 import { dynamicRouteParams, loadParamValues, pagePathsDef } from "../page-params";
@@ -95,8 +105,8 @@ import { componentPropEntries, isComponentDoc } from "../component-props";
 import { mediaDisplayName } from "./shared";
 import type { CanvasView, FitMode } from "../canvas/canvas-utils";
 import { EDITOR_KIND_LABELS } from "../commands/context";
-import type { EditorKind } from "../commands/context";
 import type { ParamValues } from "../page-params";
+import type { CommandArgValues } from "../commands/command-args";
 import type { Tab } from "../tabs/tab";
 import type { ResolvedI18n } from "@jxsuite/schema/locale";
 import type { JsonValue } from "../types";
@@ -141,6 +151,14 @@ export interface PaneContextCtx {
    * Editor picker a control over the primary's document.
    */
   setCanvasMode: (tab: Tab, mode: string) => void;
+  /**
+   * Close a tab through the strip's guarded close (`panels/tab-strip.ts` `requestClose`): what the
+   * Back control does to a media viewer or a comparison. Absent (a test's partial bootstrap), the
+   * control runs `pane.backToHome` instead, whose bootstrap deps carry the same close.
+   */
+  closeTab?: (tabId: string) => void | Promise<void>;
+  /** Give the keyboard to the home a Back landed on (`WorkspaceBackDeps.focusHome`). */
+  focusHome?: (paneId: string, id: WorkspaceId) => void;
   parseMediaEntries: (media: Record<string, string> | null | undefined) => {
     sizeBreakpoints: {
       name: string;
@@ -217,10 +235,51 @@ export function attachPaneChromeHost(paneId: string, host: HTMLElement | null):
 
 /** Take one pane's document down and forget it. Idempotent. */
 function disposePane(paneId: string): void {
+  _bandWatches.get(paneId)?.observer.disconnect();
+  _bandWatches.delete(paneId);
   _surfaces.get(paneId)?.dispose();
   _surfaces.delete(paneId);
 }
 
+/**
+ * Each pane's band, as the observer that keeps the stage offset in step with it watches it.
+ *
+ * The offset used to be MEASURED on every projection, synchronously, right after the update that
+ * may have changed the band. A projection runs inside whatever changed the pane (a tab activation,
+ * a workspace switch, a mode change) with the rest of that change still to be written, so the read
+ * paid a style recalculation of the whole half-written document every time: 12 to 18 ms per tab
+ * activation in the perf trace, the hottest forced recalculation once the tab strip stopped
+ * reading. A `ResizeObserver` reports the band's height after the frame's own layout, when it is
+ * free to read, and only when it actually changed.
+ */
+const _bandWatches = new Map<string, { band: HTMLElement; observer: ResizeObserver }>();
+
+/**
+ * Keep `paneId`'s stage offset following its band: measure it once now, and again whenever it
+ * resizes. Re-binds when the document has drawn a new band element; a no-op for the one it holds.
+ * Without `ResizeObserver` (a DOM with no layout engine) every call measures, as before.
+ */
+function watchBand(paneId: string, host: HTMLElement, surface: PaneContextSurfaceHandle): void {
+  const band = surface.band();
+  const held = _bandWatches.get(paneId);
+  if (held && held.band === band) {
+    return;
+  }
+  held?.observer.disconnect();
+  _bandWatches.delete(paneId);
+  applyPaneContextOffset(topBandHeight(surface), host);
+  if (!band || typeof ResizeObserver === "undefined") {
+    return;
+  }
+  const observer = new ResizeObserver(() => {
+    if (_surfaces.get(paneId) === surface) {
+      applyPaneContextOffset(topBandHeight(surface), host);
+    }
+  });
+  observer.observe(band);
+  _bandWatches.set(paneId, { band, observer });
+}
+
 /**
  * Mount the pane chrome. Idempotent.
  *
@@ -257,7 +316,7 @@ export function mount(host: HTMLElement, ctx: PaneContextCtx) {
         }
         // Read reactive properties to establish tracking — mirrors the toolbar's subset.
         void tab.doc.document;
-        void tab.doc.document?.$layout;
+        void tab.doc.document.$layout;
         void tab.doc.mode;
         void tab.documentPath;
         void tab.capabilities.modes;
@@ -331,21 +390,6 @@ function topBandHeight(surface: PaneContextSurfaceHandle): number {
   return Math.max(surface.band()?.offsetHeight ?? 0, PANE_CONTEXT_HEIGHT);
 }
 
-/**
- * Whether this tab's editor has any of the bar's three axes to offer.
- *
- * Project Settings has none: it declares one editor kind, no canvas view, and no rendering context
- * — and the one control the bar WOULD contribute, "Manage contexts…", routes to a section of the
- * very document on screen. A bar of three inert controls above the definition site they point at is
- * chrome that says nothing, so the stage takes the whole pane.
- *
- * @param {Tab} tab
- * @returns {boolean}
- */
-function wantsContextBar(tab: Tab): boolean {
-  return tab.session.ui.canvasMode !== "settings";
-}
-
 /** Project every attached pane's chrome. */
 export function render() {
   for (const [paneId, host] of _hosts) {
@@ -360,13 +404,12 @@ function renderPane(paneId: string, host: HTMLElement) {
   }
   try {
     const tab = tabOfPane(paneId);
-    const show = Boolean(tab) && wantsContextBar(tab as Tab);
-    if (!show) {
+    if (tab === null) {
       disposePane(paneId);
       applyPaneContextOffset(0, host);
       return;
     }
-    const view = viewFor(tab as Tab, paneId, _ctx);
+    const view = viewFor(tab, paneId, _ctx);
     let surface = _surfaces.get(paneId);
     if (!surface || !surface.connected()) {
       disposePane(paneId);
@@ -380,13 +423,15 @@ function renderPane(paneId: string, host: HTMLElement) {
       void surface.ready.then(() => {
         const live = _surfaces.get(paneId);
         if (live) {
-          applyPaneContextOffset(topBandHeight(live), host);
+          watchBand(paneId, host, live);
         }
       });
       return;
     }
     surface.update(view);
-    applyPaneContextOffset(topBandHeight(surface), host);
+    /* No read here: the band's observer writes the offset once the frame has laid the band out
+       ({@link watchBand}). Only a band element the update REPLACED is re-measured now. */
+    watchBand(paneId, host, surface);
   } catch (error) {
     console.error("pane-context render error:", error);
   }
@@ -458,12 +503,11 @@ function openPresetMenu(paneId: string, anchor: HTMLElement): void {
  * `check-lens-mutants.ts` said so, by surviving.
  */
 function menuRow(row: PresetRow): MenuRowProjection {
-  return {
+  const projection: MenuRowProjection = {
     destructive: false,
     disabled: row.disabled !== null,
     dividerAbove: false,
     id: rowId(row),
-    ...(row.disabled === null ? {} : { requires: row.disabled }),
     run: () => {
       /* THE PANE THE MENU IS ABOUT, before the verb that resolves the focus runs.
          See {@link PresetRow.pane}: all three of these commands take the focused pane as their
@@ -476,6 +520,10 @@ function menuRow(row: PresetRow): MenuRowProjection {
     },
     title: row.label,
   };
+  if (row.disabled !== null) {
+    projection.requires = row.disabled;
+  }
+  return projection;
 }
 
 /**
@@ -487,7 +535,7 @@ function rowId(row: PresetRow): string {
   const parts = [row.command];
   for (const key of ["preset", "media", "locale"] as const) {
     const value = row.args[key];
-    if (typeof value === "string") {
+    if (isString(value)) {
       parts.push(value);
     }
   }
@@ -498,7 +546,7 @@ function rowId(row: PresetRow): string {
 export interface PresetRow {
   label: string;
   command: string;
-  args: Record<string, unknown>;
+  args: CommandArgValues;
   /**
    * The pane this row is ABOUT — the one whose ⟲ opened the menu.
    *
@@ -658,10 +706,27 @@ function viewFor(tab: Tab, paneId: string, ctx: PaneContextCtx): PaneContextView
     view.summary = lensSummary(paneId);
     return view;
   }
+  /* The way out of a view in a workspace with no tab strip: named for where it leads. Never in a
+     lens, whose tab is the source pane's, and whose own exit is the derivation's. */
+  const back = backTargetOf(tab);
+  if (back) {
+    view.backState = "shown";
+    view.backLabel = back.label;
+    view.backHint = back.hint;
+  }
   Object.assign(view, editorAxis(tab));
   if (editorKindOf(tab) === "canvas") {
     Object.assign(view, viewAxis(tab));
   }
+  /* A workspace home (the Content, Media or Publish home) draws its workspace's own surface over a
+     stub document, so there is no rendering context to choose: "Context: Base" over the Publish
+     workspace was a control that could change nothing on screen. The ⟲ menu goes for the same
+     reason: every projection it offers is of the document, and a home has none to project. */
+  if (editorKindOf(tab) === "home") {
+    view.contextState = "hidden";
+    view.presetState = "hidden";
+    return view;
+  }
   Object.assign(view, contextAxis(tab, paneId, ctx));
   /* THIS tab's effective mode. `ctx.getCanvasMode()` answered for the focused pane, so a document
      opened as Code in either pane put an Export button in the OTHER pane's bar as well — over a
@@ -805,10 +870,8 @@ interface PaneLocale {
  * A single declared locale is the same as none for this control — there is nothing to switch TO,
  * and "groups a document declares nothing for are absent" is the rule the whole popover follows.
  *
- * The fallback chain is what makes the control honest about a file it has not been told about:
- * `previewLocale` is the author's explicit choice, the path is the file's own language
- * (`site-architecture.md` §13.3 puts a translation in its own directory), and the default locale is
- * what an unprefixed page renders as.
+ * The language itself is `getEffectiveRenderLocale`'s answer (`site-context.ts`), the rule every
+ * artboard draws by: the choice, else the file's own language, else the default locale.
  */
 function localeOf(tab: Tab | null): PaneLocale | null {
   const i18n = getEffectiveLocales();
@@ -816,20 +879,22 @@ function localeOf(tab: Tab | null): PaneLocale | null {
     return null;
   }
   const pathLocale = localeOfPath(tab.documentPath ?? "", i18n);
-  const own = pathLocale ?? i18n.defaultLocale;
-  const effective = tab.session.ui.previewLocale ?? own;
+  /* The artboard's own rule, so the segment and the canvas cannot name two languages; a stored
+     choice the project no longer declares is not reported, because it is not drawn. */
+  const own = getEffectiveRenderLocale(null, tab.documentPath) ?? i18n.defaultLocale;
+  const effective = getEffectiveRenderLocale(tab.session.ui.previewLocale, tab.documentPath) ?? own;
   return { effective, i18n, overridden: effective !== own, pathLocale };
 }
 
 function contextAxis(tab: Tab, paneId: string, ctx: PaneContextCtx): Partial<PaneContextView> {
   const { ui } = tab.session;
   const { featureQueries, sizeBreakpoints } = ctx.parseMediaEntries(
-    getEffectiveMedia(tab.doc.document?.$media as Record<string, string> | undefined),
+    getEffectiveMedia(tab.doc.document.$media),
   );
   const schemeQueries = featureQueries.filter(({ query }) => isSchemeQuery(query));
   const plainQueries = featureQueries.filter(({ query }) => !isSchemeQuery(query));
-  const scheme = (ui.previewColorScheme ?? "auto") as string;
-  const activeMedia = (ui.activeMedia ?? null) as string | null;
+  const scheme = ui.previewColorScheme;
+  const { activeMedia } = ui;
   const sizeLabel = activeMedia ? mediaDisplayName(activeMedia) : "Base";
   const schemeLabel = SCHEMES.find(([value]) => value === scheme)?.[1] ?? "Auto";
   const locale = localeOf(tab);
@@ -843,7 +908,12 @@ function contextAxis(tab: Tab, paneId: string, ctx: PaneContextCtx): Partial<Pan
   ]
     .filter((part) => part !== null)
     .join(" · ");
-  const hasLayout = isPageDoc(tab) && Boolean(getEffectiveLayoutPath(tab.doc.document?.$layout));
+  /* An entry written on the canvas is wrapped in its template's layout like a page (§22.5), so it
+     offers the same "show layout" choice. Whether a layout resolves for it is read asynchronously
+     by the canvas; the project default is the answer this bar can give synchronously. */
+  const hasLayout =
+    (isPageDoc(tab) && Boolean(getEffectiveLayoutPath(tab.doc.document.$layout))) ||
+    (Boolean(projectState?.isSiteProject) && writesEntryOnCanvas(tab.documentPath));
   const page = isPageDoc(tab);
   const params = page ? paramRows(tab) : [];
   const props = page ? [] : propRows(tab, paneId);
@@ -851,7 +921,7 @@ function contextAxis(tab: Tab, paneId: string, ctx: PaneContextCtx): Partial<Pan
      way the Context trigger says `Base · Auto` — a chevron with no reading is a control you have to
      open in order to learn whether it was worth opening. */
   const resolvingSet = page
-    ? Object.values(ui.previewParams ?? {}).filter((v) => v !== "" && v !== undefined).length
+    ? Object.values(ui.previewParams).filter((v) => v !== "").length
     : Object.keys(ui.previewProps ?? {}).length;
   const hasResolving = page ? params.length > 0 : props.length > 0;
 
@@ -922,8 +992,9 @@ function sizeRows(
  * cannot and must not claim to translate the page. What it does change is real: the artboard's
  * `lang` and its `dir`, and an RTL locale mirrors the layout on the stage. A control that let an
  * author believe it had translated anything would be worse than no control — which is also why the
- * sentence stops there: the build's `$page.locale` is not injected into the canvas render today, so
- * a tooltip promising it would be describing the site rather than the pane.
+ * sentence stops there: the page's `$page.locale` comes from its route on the canvas as in the
+ * build (studio.md §4.1), so this control does not change it, and a tooltip promising otherwise
+ * would describe something the pane does not do.
  *
  * Labelled with each locale's AUTONYM, for the reason `localeLabel` gives: a reader looking for
  * their own language scans for their own word for it.
@@ -965,7 +1036,7 @@ const FIT_CHOICES: readonly { value: string; fit: FitMode; label: string }[] = [
 
 /** Which entry the pod shows as chosen — a numeric fit reads as "actual size" only at 1. */
 function fitChoiceValue(fit: FitMode): string {
-  if (typeof fit === "number") {
+  if (isNumber(fit)) {
     return fit === 1 ? "actual" : "";
   }
   return fit;
@@ -1006,7 +1077,7 @@ function podFor(tab: Tab, paneId: string): Partial<PaneContextView> {
      computed from the side pane's own zoom, and its "100%" button reset the primary. */
   const surface = surfaceForPane(paneId);
   if (mode === "edit") {
-    const editZoom = tab.session.ui.editZoom ?? 1;
+    const { editZoom } = tab.session.ui;
     return { podState: "shown", zoomLabel: `${Math.round(editZoom * 100)}%` };
   }
   if (!STAGE_ZOOM_MODES.has(mode)) {
@@ -1041,7 +1112,7 @@ function podFor(tab: Tab, paneId: string): Partial<PaneContextView> {
  * `__jxAutomation` had no name for it. Going through the registry makes the control and the verb
  * one thing (one definition site per action, §13) and gets the breakpoint refusal for free.
  */
-function runContextCommand(paneId: string, id: string, args: Record<string, unknown>): void {
+function runContextCommand(paneId: string, id: string, args: CommandArgValues): void {
   // THIS pane, named. The bar is drawn once per pane and the side bar's controls write the side
   // Pane's tab; a verb defaulting to the focused pane would have made the side bar edit the
   // Foreground document the moment its control became a command.
@@ -1063,7 +1134,8 @@ function actionsFor(paneId: string, ctx: PaneContextCtx): PaneContextActions {
       if (!tab) {
         return;
       }
-      const mode = modeForEditorKind(tab, kind as EditorKind);
+      const editorKind = editorKindsOf(tab).find((candidate) => candidate === kind);
+      const mode = editorKind && modeForEditorKind(tab, editorKind);
       if (!mode) {
         return;
       }
@@ -1086,11 +1158,28 @@ function actionsFor(paneId: string, ctx: PaneContextCtx): PaneContextActions {
     },
     chooseView: (value) => {
       const tab = tabNow();
-      if (tab) {
-        setCanvasView(tab, value as CanvasView, ctx.setCanvasMode);
+      const view = CANVAS_VIEWS.find((candidate) => candidate === value);
+      if (tab && view) {
+        setCanvasView(tab, view, ctx.setCanvasMode);
       }
     },
     exportFile: ctx.exportFile,
+    /* The flow directly rather than `pane.backToHome`: the command's `when` keeps Escape away from
+       a text field and the code editor, and the CONTROL must work in both (Back from Code is the
+       Styles case). The pane is focused first, because the view going back is this pane's. */
+    goBack: () => {
+      focusPane(paneId);
+      const { closeTab } = ctx;
+      if (!closeTab) {
+        runContextCommand(paneId, "pane.backToHome", {});
+        return;
+      }
+      void goBack(paneId, {
+        closeTab,
+        setCanvasMode: ctx.setCanvasMode,
+        ...(ctx.focusHome && { focusHome: ctx.focusHome }),
+      });
+    },
     manageContexts: () => {
       void activeRegistry()?.run("settings.open", { section: "contexts" });
     },
@@ -1285,7 +1374,7 @@ function paramValuesFor(tab: Tab): ParamValues | null {
  * @param {ParamValues} values
  */
 function autoSelectParams(tab: Tab, values: ParamValues) {
-  const current = tab.session.ui.previewParams ?? {};
+  const current = tab.session.ui.previewParams;
   const additions: Record<string, string> = {};
   for (const [name, list] of Object.entries(values)) {
     if (!current[name] && list.length > 0) {
@@ -1314,7 +1403,7 @@ function paramRows(tab: Tab): PaneContextView["params"] {
     label: `Preview value for [${name}]`,
     name,
     options: (values?.[name] ?? []).map((value: string) => ({ label: value, value })),
-    value: previewParams?.[name] ?? "",
+    value: previewParams[name] ?? "",
   }));
 }
 
@@ -1330,6 +1419,8 @@ function paramRows(tab: Tab): PaneContextView["params"] {
  */
 function parsePropValue(raw: string): JsonValue {
   try {
+    // SAFETY: JSON.parse only ever yields null, a boolean, a number, a string, an array or a plain
+    // Object of those, which is exactly the JsonValue union.
     return JSON.parse(raw) as JsonValue;
   } catch {
     return raw;
@@ -1347,7 +1438,7 @@ function propRows(tab: Tab, paneId: string): PaneContextView["props"] {
   }
   const { previewProps } = tab.session.ui;
   const display = (v: JsonValue | undefined) =>
-    v === undefined ? "" : typeof v === "string" ? v : JSON.stringify(v);
+    v === undefined ? "" : isString(v) ? v : JSON.stringify(v);
   return componentPropEntries(doc).map(({ name }) => ({
     key: name,
     label: `Test value for ${name}`,

package/src/panels/pane-grid.ts

@@ -62,6 +62,7 @@ import {
   dropTargetForElements,
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { isString } from "@jxsuite/schema/guards";
 import { isTabDropSource } from "./tab-drop";
 import { rectOf } from "../utils/geometry";
 import {
@@ -100,8 +101,22 @@ export interface PaneCell {
   surface: CanvasSurface;
 }
 
-/** A cell's record, plus the disposers its stage gestures and its drop zone live behind. */
-interface CellState extends PaneCell {
+/**
+ * A cell's record while the runtime fills it in, plus the disposers its stage gestures and its drop
+ * zone live behind.
+ *
+ * Every element field starts null and is written once, when the runtime creates that box (see
+ * {@link cellPart}). The runtime creates a row's nodes depth-first inside one synchronous render
+ * pass, so by the time anything outside that pass asks, {@link isDrawnCell} holds.
+ */
+interface CellState {
+  paneId: string;
+  root: HTMLElement | null;
+  strip: HTMLElement | null;
+  chrome: HTMLElement | null;
+  stage: HTMLElement | null;
+  dropZone: HTMLElement | null;
+  surface: CanvasSurface | null;
   /** 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. */
@@ -128,9 +143,22 @@ let _scope: EffectScope | null = null;
  */
 let _dragMonitor: (() => void) | null = null;
 
+/** Whether every box of a cell has been created, which is what makes it a {@link PaneCell}. */
+function isDrawnCell(cell: CellState): cell is CellState & PaneCell {
+  return (
+    cell.root !== null &&
+    cell.strip !== null &&
+    cell.chrome !== null &&
+    cell.stage !== null &&
+    cell.dropZone !== null &&
+    cell.surface !== 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;
+  const cell = _cells.get(paneId);
+  return cell !== undefined && isDrawnCell(cell) ? cell : null;
 }
 
 /**
@@ -149,9 +177,9 @@ export function paneGridReady(): Promise<void> {
  * The record for a pane, created when its cell's outermost box is, and reused for the life of the
  * cell.
  *
- * Every element field is typed non-null and starts null, the same bargain `CanvasSurface` makes:
- * the runtime creates a row's nodes depth-first inside one synchronous render pass, so the record
- * is complete before anything outside that pass can hold it.
+ * Every element field starts null: the runtime creates a row's nodes depth-first inside one
+ * synchronous render pass, so the record is complete before anything outside that pass can hold it
+ * through {@link cellForPane}.
  */
 function cellState(paneId: string): CellState {
   const existing = _cells.get(paneId);
@@ -159,15 +187,15 @@ function cellState(paneId: string): CellState {
     return existing;
   }
   const cell: CellState = {
-    chrome: null as unknown as HTMLElement,
-    dropZone: null as unknown as HTMLElement,
+    chrome: null,
+    dropZone: null,
     paneId,
     releaseDropZone: null,
     releaseGestures: null,
-    root: null as unknown as HTMLElement,
-    stage: null as unknown as HTMLElement,
-    strip: null as unknown as HTMLElement,
-    surface: null as unknown as CanvasSurface,
+    root: null,
+    stage: null,
+    strip: null,
+    surface: null,
   };
   _cells.set(paneId, cell);
   return cell;
@@ -229,12 +257,16 @@ function watchPaneFocus(paneId: string, root: HTMLElement): void {
  */
 function attachStage(cell: CellState, stage: HTMLElement): void {
   cell.stage = stage;
-  cell.surface = createPaneSurface(cell.paneId);
+  const surface = createPaneSurface(cell.paneId);
+  cell.surface = surface;
   registerCanvasSurface(cell.paneId, stage);
-  cell.releaseGestures = installStageGestures(cell.surface);
+  cell.releaseGestures = installStageGestures(surface);
   scheduleCanvasRender(cell.paneId);
 }
 
+/** What a cell's drop zone reports to a drag: refused, or the pane a drop would split beside. */
+type PaneEdgeData = { type: "pane-edge-refused" } | { paneId: string; type: "pane-edge" };
+
 /**
  * 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
@@ -245,11 +277,7 @@ function attachStage(cell: CellState, stage: HTMLElement): void {
  * 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> {
+function edgeData(paneId: string, input: { clientX: number }, element: HTMLElement): PaneEdgeData {
   if (workspace.panes.length >= MAX_PANES || workspace.panes.at(-1)?.id !== paneId) {
     return { type: "pane-edge-refused" };
   }
@@ -284,12 +312,12 @@ function attachDropZone(paneId: string, element: HTMLElement): () => void {
  * One of a cell's five boxes has been created. Fill the record in, and wire what belongs to it.
  *
  * The context bar is HANDED its host rather than resolving a region, the same way
- * `panels/frontmatter-panel.ts` is handed the stage. It cannot resolve one the way the tab strip
- * does: the strip's host carries `pane.<id>/tabs` and nothing inside it re-stamps that id, while
- * the context bar stamps `pane.<id>/context` on markup it renders INSIDE its box — so a region on
- * the wrapper as well would put the same id on two nested elements, and `resolveRegion` takes the
- * LAST match. Sixty shots crop `pane.primary/context`; a second, larger element carrying it is a
- * silently widened crop.
+ * `content/writing-banner.ts` is handed its host on the stage. It cannot resolve one the way the
+ * tab strip does: the strip's host carries `pane.<id>/tabs` and nothing inside it re-stamps that
+ * id, while the context bar stamps `pane.<id>/context` on markup it renders INSIDE its box — so a
+ * region on the wrapper as well would put the same id on two nested elements, and `resolveRegion`
+ * takes the LAST match. Sixty shots crop `pane.primary/context`; a second, larger element carrying
+ * it is a silently widened crop.
  */
 function cellPart(paneId: string, part: PaneCellPart, element: HTMLElement): void {
   const cell = cellState(paneId);
@@ -467,7 +495,8 @@ export function mount(): void {
     },
     onDrag({ location }) {
       const [target] = location.current.dropTargets;
-      const edgePane = target?.data.type === "pane-edge" ? (target.data.paneId as string) : "";
+      const paneId = target?.data.paneId;
+      const edgePane = target?.data.type === "pane-edge" && isString(paneId) ? paneId : "";
       _surface?.drag({ armed: true, edgePane });
     },
     onDragStart() {