@jxsuite/studio 5.3.0 → 5.4.0

package/src/browse/library-commands.ts

@@ -5,8 +5,9 @@
  * between this and the Manage view it replaces. That view's category filter, its search box and its
  * grid/table switch existed ONLY as buttons inside a modal, so `scripts/screenshots/automation.ts`
  * carried a hand-maintained `BROWSE_CATEGORY_LABELS` table and pressed the buttons through an XPath
- * matched on their rendered text — plan §13's exact complaint. `library.setCategory` is the same
- * action the button runs, and the button is now a rendering of the record.
+ * matched on their rendered text, exactly what the shot contract's R1 forbids
+ * (`scripts/screenshots/README.md`). `library.setCategory` is the same action the button runs, and
+ * the button is now a rendering of the record.
  *
  * Every setter is idempotent and names the STATE it reaches, never a delta: there is no
  * `library.toggleLayout`, because a toggle against unstated state is what silently inverted
@@ -51,7 +52,7 @@ export function libraryCommands(): AnyCommand[] {
     {
       category: "Project",
       id: "library.open",
-      // ⌘⇧E — §9.1's "File: Browse Library (⌘⇧E)". The Library is the content surface for a site
+      // ⌘⇧E, as studio.md §9.1.2 names it. The Library is the content surface for a site
       // With a collection, and it was reachable only by palette search and one overflow menu item.
       keybinding: "mod+shift+e",
       level: "project",
@@ -59,9 +60,9 @@ export function libraryCommands(): AnyCommand[] {
       group: "1_file",
       requires: "an open project",
       when: (ctx) => ctx.project.open,
-      /* No `aiTool`, by §12.4's first deletion rule: chrome. None of the Library family is
-         projected — every one of these verbs shapes a listing a person reads, and the model has
-         `list_files` / `search_files` for the same facts. */
+      /* No `aiTool`, by studio-ui-guidelines.md §12.4's first deletion rule: chrome. None of the
+         Library family is projected — every one of these verbs shapes a listing a person reads,
+         and the model has `list_files` / `search_files` for the same facts. */
       run: () => {
         openLibraryTab();
       },
@@ -81,7 +82,7 @@ export function libraryCommands(): AnyCommand[] {
       group: "1_file",
       requires: "an open project",
       when: (ctx) => ctx.project.open,
-      /* No `aiTool`: a listing filter for a person (§12.4, rule 1). */
+      /* No `aiTool`: a listing filter for a person (studio-ui-guidelines.md §12.4, rule 1). */
       run: (_ctx, args) => {
         const key = enumArg("library.setCategory", args, "category", LIBRARY_CATEGORY_KEYS);
         setLibraryCategory(key);
@@ -104,7 +105,7 @@ export function libraryCommands(): AnyCommand[] {
       group: "1_file",
       requires: "an open project",
       when: (ctx) => ctx.project.open,
-      /* No `aiTool`: a listing filter for a person (§12.4, rule 1). */
+      /* No `aiTool`: a listing filter for a person (studio-ui-guidelines.md §12.4, rule 1). */
       run: (_ctx, args) => {
         const layout = enumArg<LibraryLayout>("library.setLayout", args, "layout", LIBRARY_LAYOUTS);
         setLibraryLayout(layout);
@@ -126,7 +127,8 @@ export function libraryCommands(): AnyCommand[] {
       group: "1_file",
       requires: "an open project",
       when: (ctx) => ctx.project.open,
-      /* No `aiTool`: a listing filter for a person; the model has `search_files` (§12.4, rule 1). */
+      /* No `aiTool`: a listing filter for a person; the model has `search_files`
+         (studio-ui-guidelines.md §12.4, rule 1). */
       run: (_ctx, args) => {
         setLibrarySearch(optionalStringArg("library.setSearch", args, "query") ?? "");
       },
@@ -154,7 +156,7 @@ export function libraryCommands(): AnyCommand[] {
       // A monolingual project has no facet to set: the Library draws no picker, and offering the
       // Verb would name a value space with one member in it.
       when: (ctx) => ctx.project.open && ctx.project.isMultilingual,
-      /* No `aiTool`: a listing filter for a person (§12.4, rule 1). */
+      /* No `aiTool`: a listing filter for a person (studio-ui-guidelines.md §12.4, rule 1). */
       run: (_ctx, args) => {
         const choice = enumArg("library.setLocale", args, "locale", localeChoices());
         setLibraryLocale(choice === "all" ? "" : choice);
@@ -169,7 +171,7 @@ export function libraryCommands(): AnyCommand[] {
       group: "1_file",
       requires: "an open project",
       when: (ctx) => ctx.project.open,
-      /* No `aiTool`: chrome (§12.4, rule 1). */
+      /* No `aiTool`: chrome (studio-ui-guidelines.md §12.4, rule 1). */
       run: () => refreshLibrary(),
       title: "Library: Rescan Files",
     },
@@ -193,8 +195,8 @@ export function libraryCommands(): AnyCommand[] {
       requires: "an open project",
       when: (ctx) => ctx.project.open,
       undo: "project",
-      /* No `aiTool`, by §12.4's second deletion rule: it waits on the New File prompt;
-         `create_page` / `create_component` cover the job. */
+      /* No `aiTool`, by studio-ui-guidelines.md §12.4's second deletion rule: it waits on the New
+         File prompt; `create_page` / `create_component` cover the job. */
       run: async (_ctx, args) => {
         const declared = libraryNewEntries().map((entry) => entry.key);
         const key = enumArg("library.newEntry", args, "type", declared);

package/src/browse/library-pane.ts

@@ -798,8 +798,8 @@ export async function createLibraryEntry(key: string): Promise<string | null> {
  *
  * The active category's directory when it has one — printed on the drop zone, so the destination is
  * visible BEFORE the drop. "All" has none, and rather than falling back to a default nobody chose,
- * it asks. That fallback is exactly the surprise §7 names: the file arrives, the toast says it
- * worked, and it is in a directory the author never picked.
+ * it asks. That fallback is exactly the surprise studio.md §16 exists to refuse: the file arrives,
+ * the toast says it worked, and it is in a directory the author never picked.
  */
 export async function resolveUploadDir(): Promise<string | null> {
   const named = uploadDirForCategory(libraryView.category);

package/src/canvas/canvas-render.ts

@@ -35,8 +35,9 @@ import {
 import { collabSourceContext } from "../collab/collab-session";
 import { buildChangeMap } from "./diff-marks";
 import type { ChangeMap, ChangeMark } from "./diff-marks";
-import { clearDiffView, diffViewOf, setDiffChangeMap } from "./diff-view";
+import { clearDiffView, diffShowsCode, setDiffChangeMap } from "./diff-view";
 import { canRenderComparison } from "../panels/git-diff-open";
+import { releaseStageScrollbar, trackStageScrollbar } from "./stage-scrollbar";
 import { renderDiffToolbar, setDiffRepaint, setDiffToolbarHost } from "./diff-toolbar";
 import { attachCursorStyles } from "../collab/monaco-cursors";
 import type { AwarenessLike } from "../collab/monaco-cursors";
@@ -44,7 +45,7 @@ import type { BindingAwareness } from "../collab/monaco-binding";
 import { monacoTheme, shell } from "../shell";
 import { parseSourceForPath } from "../files/file-ops";
 import { serializeDocument } from "../files/serialize-document";
-import { parseJsonDocument, serializeJson } from "../files/json-layout";
+import { parseJsonDocument, serializeJson } from "@jxsuite/schema/json-layout";
 import { detachGridPanel, gridPanelMounted, renderGridMode } from "../grid/grid-panel";
 import { detachLibraryPane, libraryPaneMounted, renderLibraryMode } from "../browse/library-pane";
 import { detachEntryPane, entryPaneMounted, renderEntryMode } from "../content/entry-editor";
@@ -165,7 +166,7 @@ async function sourceContent(tab: Tab) {
   if (formatByName(tab.doc.sourceFormat)) {
     return serializeDocument(tab);
   }
-  // The file's own layout (`files/json-layout.ts`), so the buffer shows the bytes a save writes and
+  // The file's own layout (`@jxsuite/schema/json-layout`), so the buffer shows the bytes a save writes and
   // A commit from it reads the same layout back — what `serializeDocument`'s JSON branch does.
   return serializeJson(tab.doc.document, tab.doc.layout ?? null);
 }
@@ -231,7 +232,7 @@ function hardClearCanvasWrap(canvasWrap: HTMLElement) {
 
 /**
  * Where each stage's non-artboard hosts landed, keyed by part (and by the static mark that tells
- * two of one part apart: a handle's side, a card's placement).
+ * the two width handles apart: `data-side`, the one part the stage document draws twice).
  *
  * Per STAGE rather than per module, for the reason every other field on `CanvasSurface` is: two
  * panes each have a Monaco host and a card slot, and one slot would hand the second pane's stage
@@ -345,7 +346,6 @@ function drawStage(
  */
 function editorStageView(frame: "source" | "code"): CanvasStageView {
   return {
-    columnHeader: "hidden",
     frame,
     framePart: "panzoom",
     frameVars: "",
@@ -514,6 +514,25 @@ function disposeDiffEditor(surface: CanvasSurface): void {
   surface.monacoDiffEditor = null;
 }
 
+/**
+ * One artboard's marks, with a modification given the face that side wears.
+ *
+ * {@link ChangeMap} names a modification once, semantically; the two artboards draw it as the before
+ * and the after. The split happens here because this is the only place that knows which document
+ * each mark set is about to be painted on.
+ */
+function sideMarks(
+  marks: readonly ChangeMark[] | undefined,
+  modified: "modified-before" | "modified-after",
+): WireDiffMarks | null {
+  return (
+    marks?.map((mark) => ({
+      kind: mark.kind === "modified" ? modified : mark.kind,
+      path: mark.path,
+    })) ?? null
+  );
+}
+
 /**
  * Mount the comparison's Monaco diff editor: HEAD on the left, the working copy on the right.
  *
@@ -532,40 +551,10 @@ function disposeDiffEditor(surface: CanvasSurface): void {
  * A RETARGET is the second, independent race, and `mountStillWanted` cannot catch it: it answers
  * false when the slot is already filled, so a comparison switching to a different file would keep
  * the old editor and its claimed URIs. That one is disposed synchronously, before the await.
- */
-/**
- * Whether this pane draws the comparison as TEXT.
  *
- * One definition, because two callers must never disagree about it: the render branch chooses which
- * half to build, and the mount's post-await guard re-asks whether that half is still wanted. They
- * were two spellings — the branch said "not renderable OR the author chose Code", the guard said
- * only "the author chose Code" — so for a file with no visual half the branch built the Code
- * container and the guard then refused to mount into it. An empty stage, no error, and a toolbar
- * correctly describing an editor that was never there.
+ * The guard asks {@link diffShowsCode}, the same predicate the render branch chose the half with
+ * (`canvas/diff-view.ts` says why there is only one).
  */
-/**
- * One artboard's marks, with a modification given the face that side wears.
- *
- * {@link ChangeMap} names a modification once, semantically; the two artboards draw it as the before
- * and the after. The split happens here because this is the only place that knows which document
- * each mark set is about to be painted on.
- */
-function sideMarks(
-  marks: readonly ChangeMark[] | undefined,
-  modified: "modified-before" | "modified-after",
-): WireDiffMarks | null {
-  return (
-    marks?.map((mark) => ({
-      kind: mark.kind === "modified" ? modified : mark.kind,
-      path: mark.path,
-    })) ?? null
-  );
-}
-
-function diffShowsCode(paneId: string, filePath: string): boolean {
-  return !canRenderComparison(filePath) || diffViewOf(paneId) === "code";
-}
-
 async function mountDiffEditor(
   surface: CanvasSurface,
   container: Element,
@@ -581,7 +570,8 @@ async function mountDiffEditor(
     !mountStillWanted(
       container,
       surface.monacoDiffEditor,
-      () => canvasModeOfPane(paneId) === "git-diff" && diffShowsCode(paneId, key),
+      () =>
+        canvasModeOfPane(paneId) === "git-diff" && diffShowsCode(paneId, canRenderComparison(key)),
     )
   ) {
     return;
@@ -629,6 +619,7 @@ function resetCanvasView(surface: CanvasSurface) {
     surface.centerObserver.disconnect();
     surface.centerObserver = null;
   }
+  releaseStageScrollbar(surface);
   for (const p of surface.panels) {
     p.renderScope?.stop();
     p.renderScope = null;
@@ -641,6 +632,7 @@ function resetCanvasView(surface: CanvasSurface) {
   canvasWrap.style.padding = "";
   canvasWrap.style.alignItems = "";
   canvasWrap.style.flexDirection = "";
+  canvasWrap.style.gap = "";
   canvasWrap.style.display = "";
   canvasWrap.style.overflow = "";
   dismissBlockActionBar();
@@ -1029,23 +1021,24 @@ function renderCanvasImpl(surface: CanvasSurface) {
   // Re-rendering the previous mode's panels in place.
   const canvasMode = canvasModeOfPane(surface.paneId);
 
-  /* The Document Header card (§3.2 ⑧) is drawn by the STAGE, not by a band above it. Two surfaces
-     draw a page you can author: the centered Edit column, where the card goes INSIDE the document
-     column and scrolls with the artefact, and the Design artboards, where it is pinned above the
-     panzoom surface because a form drawn at the artboard's scale is a picture of a form, not a
-     control. `hasDocumentHeader` is the only remaining predicate and it is a fact about the
-     DOCUMENT — the one condition left, because the mode is the only other thing that decides
-     whether a page is being authored. It used to carry two more clauses, suppressing the card while
-     a function body or a formula was open on the grounds that those sub-editors took the whole
-     stage. They open in the dock's Logic tab now (P8) and the page is still on screen behind it, so
-     those clauses only DETACHED the visible card: it stopped re-rendering and quietly showed
-     frontmatter from before the edit. */
+  /* The Document Header card is drawn by the STAGE, and only by Edit's. It is docked
+     above the page's scroller, a band across the pane at 1:1: its width is the PANE's rather than
+     the breakpoint's, and the page scrolls under it rather than taking it along. It used to go
+     INSIDE Edit's column, where it was exactly as wide as whatever breakpoint or dragged width the
+     column had and scrolled off with the first screen of the page, and it was pinned above Design's
+     artboards as well. Design omits it now, so the artboards get the whole pane, and nothing is
+     lost by that: the Navigator's Page panel carries the same fields in every mode.
+     `hasDocumentHeader` is the other predicate, and it is a fact about the DOCUMENT. It used to
+     carry two more clauses, suppressing the card while a function body or a formula was open on
+     the grounds that those sub-editors took the whole stage. They open in the dock's Logic tab now
+     (§16.3) and the page is still on screen behind it, so those clauses only DETACHED the visible
+     card: it stopped re-rendering and quietly showed frontmatter from before the edit. */
   /* …and NOT in a lens. The Document Header is an editing surface — Title, Route, SEO, the raw
      frontmatter — over a document this pane does not own, and two cards editing one document's
      frontmatter side by side is two writers for one field. A lens is a view; the card belongs to
      the pane that owns the tab. */
   const wantsDocHeader =
-    (canvasMode === "edit" || canvasMode === "design") &&
+    canvasMode === "edit" &&
     derivationOfPane(surface.paneId)?.kind !== "lens" &&
     hasDocumentHeader(tab);
   if (!wantsDocHeader) {
@@ -1084,9 +1077,9 @@ function renderCanvasImpl(surface: CanvasSurface) {
 
   /* There are no `editingFunction` / `editingFormula` branches here, and that is the point.
      Both used to RETURN from this function, which is what made the logic editors a takeover: the
-     stage kept whatever DOM it was last painted with and stopped tracking the document. P8 moved
-     both into the dock's Logic tab, `panels/bottom-dock.ts` reveals it from its own effect, and
-     `panels/editors.ts`'s `syncFunctionEditor` owns the Monaco instance from the panel's
+     stage kept whatever DOM it was last painted with and stopped tracking the document. Both open
+     in the dock's Logic tab now (§16.3), `panels/bottom-dock.ts` reveals it from its own effect,
+     and `panels/editors.ts`'s `syncFunctionEditor` owns the Monaco instance from the panel's
      `afterRender` — including disposing it. Nothing about the canvas render depends on a logic
      target any more, so the page underneath the dock keeps rendering while you edit a formula. */
 
@@ -1235,12 +1228,15 @@ function renderCanvasImpl(surface: CanvasSurface) {
       surface.centerObserver.disconnect();
       surface.centerObserver = null;
     }
+    /* Edit's scroller leaves with its stage, and the pod must not keep Edit's inset in a mode that
+       has no scrollbar under it: missed here, Design's pod would float 15px short of its corner. */
+    releaseStageScrollbar(surface);
 
     // Destroy the grid panel if switching away from grid mode
     detachGridPanel(surface.paneId);
 
     // The Library holds an IntersectionObserver and an LRU of live runtime subtrees; leaving the
-    // Mode without releasing them is exactly the unbounded retention P7.1 exists to remove.
+    // Mode without releasing them is exactly the unbounded retention its LRU cap exists to remove.
     detachLibraryPane(surface.paneId);
 
     // Same for the entry form, whose effect scope subscribes to the document's frontmatter
@@ -1268,9 +1264,9 @@ function renderCanvasImpl(surface: CanvasSurface) {
     canvasWrap.style.padding = "";
     canvasWrap.style.alignItems = "";
     canvasWrap.style.flexDirection = "";
+    canvasWrap.style.gap = "";
     canvasWrap.style.display = "";
     canvasWrap.style.overflow = "";
-    canvasWrap.style.overflow = "";
 
     // Dismiss open popovers/toolbars that are no longer relevant
     dismissBlockActionBar();
@@ -1342,7 +1338,6 @@ function renderCanvasImpl(surface: CanvasSurface) {
     void drawStage(
       surface,
       {
-        columnHeader: "hidden",
         frame: "boards",
         framePart: "preview-stage",
         frameVars: `--preview-w:${previewWidth}px`,
@@ -1362,7 +1357,7 @@ function renderCanvasImpl(surface: CanvasSurface) {
     return;
   }
 
-  /* Settings mode: the Project Settings document (plan §9.3). Same non-iframe-editor pattern as
+  /* Settings mode: the Project Settings document (§17.1). Same non-iframe-editor pattern as
      grid and stylebook — the panel owns its own reactivity from here — and the reason the seven
      settings screenshots now crop `pane.primary` instead of `overlay.dialog:settings` without one
      manifest step changing. */
@@ -1468,7 +1463,7 @@ function renderCanvasImpl(surface: CanvasSurface) {
        a Diff lens, the Editor axis) and only this one sees every arrival. Forcing it here also
        leaves `diffView` alone, so a document opened after a `.css` still comes up Visual. */
     const renderable = canRenderComparison(gitDiffState.filePath ?? "");
-    if (diffShowsCode(surface.paneId, gitDiffState.filePath ?? "")) {
+    if (diffShowsCode(surface.paneId, renderable)) {
       /* A null map is how the toolbar learns there is no visual half to offer: it draws Code as a
          static label rather than as half of a choice, and reports the line marks instead of a node
          count. Cleared rather than left, so a pane that compared a document and then a stylesheet
@@ -1504,7 +1499,6 @@ function renderCanvasImpl(surface: CanvasSurface) {
     const diffStage = drawStage(
       surface,
       {
-        columnHeader: "hidden",
         frame: "boards",
         framePart: "panzoom",
         frameVars: "",
@@ -1632,8 +1626,9 @@ function renderCanvasImpl(surface: CanvasSurface) {
      * that computes the SAME width it last committed skips the write — and the imperative value
      * stays. That is not hypothetical: drag a page down to 330px, open a different document in the
      * pane, and the new one is 330px wide too, because both passes computed the base width and lit
-     * wrote neither. One writer, applied after the render, is the fix (§9.4 of the UI guidelines);
-     * `applyEditZoom` below already has exactly this shape for exactly this reason.
+     * wrote neither. One writer, applied after the render, is the fix
+     * (studio-ui-guidelines.md §9.4); `applyEditZoom` below already has exactly this shape for
+     * exactly this reason.
      */
     const entry = canvasPanelEntry(null, null, true);
     // A component-definition doc (root tag is a custom element) is a fragment, not a page: it should
@@ -1641,21 +1636,38 @@ function renderCanvasImpl(surface: CanvasSurface) {
     const rootTag = (S.document as { tagName?: unknown }).tagName;
     const isComponentDoc = typeof rootTag === "string" && rootTag.includes("-");
     const { featureToggles: editToggles } = S.ui;
+    /* The stage stacks when it carries the card: the band first, the page's scroller below it.
+       Set on every render rather than on the transition, because whether a document HAS a header
+       changes with the tab and not with the mode. `editors.ts` and `formula-workspace.ts` already
+       claim the column this way — `#canvas-wrap` is a row by default and each surface states its
+       own axis. Stretched, because the band is as wide as the PANE: that is the whole difference
+       between docking the card here and drawing it in the column, whose width is the breakpoint's
+       or the drag's.
+       And FLUSH: the cell's own 24px gap (`pane-grid.json`) between two side-by-side surfaces is
+       dead space between a docked band and the box below it. The scroller clips its content at its
+       top edge, so the gap put that edge 24px below the band's border with nothing drawn in
+       between — the page ended at an invisible line and the band read as a hairline over one
+       continuous surface. At 0 the clip happens AT the border, which is what makes the border read
+       as the band's edge; the scroller's own 32px of top padding is the breathing room. */
+    canvasWrap.style.flexDirection = wantsDocHeader ? "column" : "";
+    canvasWrap.style.alignItems = wantsDocHeader ? "stretch" : "";
+    canvasWrap.style.gap = wantsDocHeader ? "0px" : "";
     void drawStage(
       surface,
       {
-        /* The card is the column's FIRST child by contract (`tests/canvas-render.test.ts`, "Edit
-           puts it INSIDE the document column"). The two handles are not in the column at all: they
-           are `jx-split`s standing beside it in the canvas's row, because the canvas is the track
-           a splitter has to measure and the column is the thing being resized. */
-        columnHeader: wantsDocHeader ? "shown" : "hidden",
+        /* The card LEADS the frame (`tests/canvas-render.test.ts`, "Edit docks it above the page's
+           scroller"): a sibling of the scroller rather than a block of the column, so the page
+           scrolls under it and the breakpoint does not size it. The two handles are not in the
+           column either: they are `jx-split`s standing beside it in the canvas's row, because the
+           canvas is the track a splitter has to measure and the column is the thing being
+           resized. */
         frame: "boards",
         framePart: "edit-canvas",
         frameVars: "",
         handles: "shown",
         hug: isComponentDoc,
         innerPart: "edit-column",
-        lead: "none",
+        lead: wantsDocHeader ? "header" : "none",
         panels: [entry.item],
       },
       [entry],
@@ -1664,7 +1676,13 @@ function renderCanvasImpl(surface: CanvasSurface) {
         return;
       }
       const editColumn = stageHost(surface, "edit-column");
-      entry.panel.scrollContainer = stageHost(surface, "edit-canvas") as HTMLElement;
+      const scroller = stageHost(surface, "edit-canvas");
+      entry.panel.scrollContainer = scroller as HTMLElement;
+      /* The one mode whose stage SCROLLS under the zoom pod, so the one that tells the pane how
+         wide its scrollbar is. The pod floats in the pane's chrome layer, which spans the gutter
+         too, and without this it sat 3px into the track. A same-scroller repaint is a no-op, and
+         every teardown below releases it back to 0. See `canvas/stage-scrollbar.ts`. */
+      trackStageScrollbar(surface, scroller);
       // The one writer of the column's width — see the note above.
       if (editColumn) {
         editColumn.style.maxWidth = `${Math.round(columnWidth)}px`;
@@ -1696,13 +1714,9 @@ function renderCanvasImpl(surface: CanvasSurface) {
     canvasWrap.style.padding = "0";
     canvasWrap.style.overflow = "hidden";
   }
-  /* The stage stacks when it carries the card: header first, artboards below. Set on every render
-     rather than on the transition, because whether a document HAS a header changes with the tab and
-     not with the mode. `editors.ts` and `formula-workspace.ts` already claim the column this way —
-     `#canvas-wrap` is a row by default and each surface states its own axis. */
-  canvasWrap.style.flexDirection = wantsDocHeader ? "column" : "";
-  canvasWrap.style.alignItems = wantsDocHeader ? "stretch" : "";
-  const designLead = wantsDocHeader ? "header" : "none";
+  /* No Document Header here, so the stage cell stays the row it is by default: the card is Edit's
+     alone (see `wantsDocHeader`), and the transition into this mode has already cleared the two
+     inline writes Edit makes to stack it. */
 
   const {
     sizeBreakpoints,
@@ -1727,14 +1741,13 @@ function renderCanvasImpl(surface: CanvasSurface) {
     void drawStage(
       surface,
       {
-        columnHeader: "hidden",
         frame: "boards",
         framePart: "panzoom",
         frameVars: "",
         handles: "hidden",
         hug: false,
         innerPart: "boards",
-        lead: designLead,
+        lead: "none",
         panels: [entry.item],
       },
       [entry],
@@ -1793,14 +1806,13 @@ function renderCanvasImpl(surface: CanvasSurface) {
   const stageDrawn = drawStage(
     surface,
     {
-      columnHeader: "hidden",
       frame: "boards",
       framePart: "panzoom",
       frameVars: "",
       handles: "hidden",
       hug: false,
       innerPart: "boards",
-      lead: designLead,
+      lead: "none",
       panels: panelEntries.map((e) => e.item),
     },
     panelEntries,
@@ -1968,6 +1980,7 @@ setSurfaceTeardown((surface) => {
   disposeSourceEditor(surface);
   surface.centerObserver?.disconnect();
   surface.centerObserver = null;
+  releaseStageScrollbar(surface);
   surface.panzoomWrap = null;
   detachCanvasStage(surface);
 });
@@ -2109,10 +2122,11 @@ export function selectionCommands(): AnyCommand[] {
       requires: "an open document",
       when: (ctx) => ctx.document.open,
       /*
-       * No `aiTool`, by §12.4's fourth deletion rule (redundant with a tool the model has): the
-       * assistant's bridge runs THIS record by id as the selector step of every selection-level
-       * tool — `delete_node(paths)` is `selection.setPaths` then `selection.delete` — so a second
-       * selection tool beside `select_node` would be prompt cost with no second job.
+       * No `aiTool`, by studio-ui-guidelines.md §12.4's fourth deletion rule (redundant with a
+       * tool the model has): the assistant's bridge runs THIS record by id as the selector step of
+       * every selection-level tool — `delete_node(paths)` is `selection.setPaths` then
+       * `selection.delete` — so a second selection tool beside `select_node` would be prompt cost
+       * with no second job.
        */
       /**
        * The idempotent SET for the whole selection, beside `selection.set`'s single path.

package/src/canvas/canvas-surface.ts

@@ -2,8 +2,8 @@
 /**
  * Canvas surfaces — one stage per pane, asked about the pane it belongs to.
  *
- * A pane is the unit of split, focus and zoom (§4.1), so it is also the unit of RENDER. The panels
- * a pass mounted, the host element they mounted into, the mode that pass was drawn in and the full
+ * A pane is the unit of split, focus and zoom (§18), so it is also the unit of RENDER. The panels a
+ * pass mounted, the host element they mounted into, the mode that pass was drawn in and the full
  * render a failed patch escalates to are all facts about ONE pane; they were app-level singletons
  * only because the shell had a single stage.
  *