@jxsuite/studio 6.1.1 → 8.0.0

package/src/panels/layers-panel.ts

@@ -3,14 +3,16 @@
  * Layers panel — the Outline: the document tree, with collapse, selection, drag-and-drop
  * reordering, and per-row actions that are RENDERINGS of the command registry.
  *
- * **One panel, two bodies, and both of them are documents now.** The tree is
- * `surfaces/panel-outline.json`; the Project Styles catalogue is
+ * **One panel, two bodies, and both of them are documents.** The tree is
+ * `surfaces/panel-outline.json`; the element catalogue a document's Elements view lists is
  * `surfaces/panel-stylebook-layers.json` (`panels/stylebook-layers-panel.ts`). This module renders
- * neither. It owns the record — only the record can know which body the pane is asking for — and
+ * neither. It owns the record (only the record can know which body the pane is asking for) and
  * everything that is a DECISION: which rows exist and in what order, what a row is called, what the
  * window onto them is, which verbs the registry places on which row, and the whole of the keyboard
  * model. The surface reads values. The two bodies are appended into the same `.panel-content`, so
- * each mode takes the other's document down on the way in; that symmetry is the whole of the seam.
+ * each mode takes the other's document down on the way in. The Variables view has no body here:
+ * `project.json`'s custom properties are listed by the Styles workspace's own Navigator panel
+ * (`panels/styles-panel.ts`, §7.1).
  *
  * Four things this file is deliberate about.
  *
@@ -27,7 +29,7 @@
  * **A row says something.** On a real page the tree was a wall of rows all reading "div": only
  * text-bearing nodes got a preview and containers got the tag they already wear as a coloured
  * badge. {@link outlineLabel} derives an identity instead — a title, an `$id`, a class, a landmark
- * name, the first text inside — and returns "" rather than repeat the badge.
+ * name, the text it owns (never a descendant row's) — and returns "" rather than repeat the badge.
  *
  * **It is a tree, and it is reachable.** `role="tree"` / `role="treeitem"` with a roving tabindex
  * and the arrow-key model ARIA specifies: ↑↓ walk the visible rows, → expands then descends, ←
@@ -47,7 +49,15 @@
  */
 
 import { nothing } from "lit-html";
-import { displayTagName, isTagExpression, tagNameCandidates } from "@jxsuite/schema/guards";
+import {
+  displayTagName,
+  isMappedArray,
+  isNonNullObject,
+  isNumber,
+  isString,
+  isTagExpression,
+  tagNameCandidates,
+} from "@jxsuite/schema/guards";
 import {
   VOID_ELEMENTS,
   childIndex,
@@ -60,7 +70,7 @@ import {
 } from "../store";
 import { activeTab } from "../workspace/workspace";
 import {
-  isSelected as isPathSelected,
+  isSelected,
   primarySelection,
   rangeSelection,
   selectionAnchor,
@@ -72,8 +82,14 @@ import { mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { view } from "../view";
 import { setActivityTab } from "../shell";
 import { registerPanel } from "./panel-registry";
-import { detachStylebookLayers, mountStylebookLayersPanel } from "./stylebook-layers-panel";
+import {
+  INDENT_BASE,
+  INDENT_STEP,
+  detachStylebookLayers,
+  mountStylebookLayersPanel,
+} from "./stylebook-layers-panel";
 import { selectStylebookTag, stylebookMeta } from "./stylebook-panel";
+import { PROJECT_STYLES_VIEW } from "../style/project-styles";
 import { isInlineElement } from "../editor/inline-edit";
 import { showContextMenu } from "../editor/context-menu";
 import { revealPathInCanvas } from "../canvas/popover-state";
@@ -115,17 +131,17 @@ const TEXT_PREVIEW_MAX = 40;
  * Deliberately short. `section`, `ul` and `table` are omitted: "Section" next to a `section` badge
  * is the repetition this function exists to remove.
  */
-const LANDMARK_NAMES: Readonly<Record<string, string>> = {
-  article: "Article",
-  aside: "Sidebar",
-  dialog: "Dialog",
-  figure: "Figure",
-  footer: "Footer",
-  form: "Form",
-  header: "Header",
-  main: "Main",
-  nav: "Navigation",
-};
+const LANDMARK_NAMES: ReadonlyMap<string, string> = new Map([
+  ["article", "Article"],
+  ["aside", "Sidebar"],
+  ["dialog", "Dialog"],
+  ["figure", "Figure"],
+  ["footer", "Footer"],
+  ["form", "Form"],
+  ["header", "Header"],
+  ["main", "Main"],
+  ["nav", "Navigation"],
+]);
 
 /** Trim and ellipsize to {@link LABEL_MAX}. */
 function truncate(text: string): string {
@@ -134,37 +150,38 @@ function truncate(text: string): string {
 }
 
 /**
- * The first text anywhere under `node`, or "".
+ * The text `node` OWNS, or "": its string children, and the text of its inline children.
  *
- * Bounded at three levels and short-circuited on the first hit: a container's identity is usually
- * its heading or its first line, and walking a whole subtree per row would cost the render what the
- * five-buttons-per-row build already cost it.
+ * Inline children (`strong`, `a`, …) never get a row of their own ({@link buildOutlineRows} skips
+ * them), so their words belong to the row that holds them. A block child's text does not: it is
+ * that child's row's to show. Borrowing it — what the bounded "first text under" walk did — made a
+ * `section > div > div > h2` read the heading four times over, one row above the other.
  */
-function firstText(node: JxMutableNode, depth = 0): string {
-  if (typeof node.textContent === "string" && node.textContent.trim()) {
+function ownText(node: JxMutableNode): string {
+  if (isString(node.textContent)) {
     return node.textContent.trim();
   }
-  if (depth >= 3 || !Array.isArray(node.children)) {
+  if (!Array.isArray(node.children)) {
     return "";
   }
+  let text = "";
   for (const child of node.children) {
-    if (typeof child === "string" && child.trim()) {
-      return child.trim();
+    if (isString(child)) {
+      text += child;
+    } else if (isNonNullObject(child) && isInlineElement(child, node)) {
+      text += ownText(child);
     }
-    if (child && typeof child === "object") {
-      const found = firstText(child, depth + 1);
-      if (found) {
-        return found;
-      }
+    if (text.length > LABEL_MAX * 2) {
+      break;
     }
   }
-  return "";
+  return text.trim();
 }
 
 /** The node's first class name, when it has a plain (unbound) `class` attribute. */
 function firstClass(node: JxMutableNode): string {
   const value = node.attributes?.class;
-  return typeof value === "string" ? (value.trim().split(/\s+/u)[0] ?? "") : "";
+  return isString(value) ? (value.trim().split(/\s+/u)[0] ?? "") : "";
 }
 
 /**
@@ -188,20 +205,20 @@ export function outlineLabel(node: JxMutableNode): string {
   if (node.$id) {
     return `#${truncate(node.$id)}`;
   }
-  if (typeof node.textContent === "string" && node.textContent.trim()) {
+  if (isString(node.textContent) && node.textContent.trim()) {
     return truncate(node.textContent);
   }
   const cls = firstClass(node);
   if (cls) {
     return `.${truncate(cls)}`;
   }
-  const landmark = LANDMARK_NAMES[displayTagName(node.tagName).toLowerCase()];
+  const landmark = LANDMARK_NAMES.get(displayTagName(node.tagName).toLowerCase());
   if (landmark) {
     return landmark;
   }
-  const inner = firstText(node);
-  if (inner) {
-    return `“${truncate(inner)}”`;
+  const own = ownText(node);
+  if (own) {
+    return `“${truncate(own)}”`;
   }
   const count = Array.isArray(node.children) ? node.children.length : 0;
   return count > 0 ? `${count} item${count === 1 ? "" : "s"}` : "";
@@ -256,12 +273,11 @@ export function rowCommandViews(
 // ─── The tree, as a keyboard surface ─────────────────────────────────────────
 
 /**
- * Pixels of indent per level, the depth past which the column stops paying, and the row's own
- * gutter.
+ * The depth past which the column stops paying. The pixels per level and the row's own gutter are
+ * the Stylebook layers panel's {@link INDENT_STEP} and {@link INDENT_BASE}, so the two trees indent
+ * alike.
  */
-const INDENT_STEP = 16;
 const INDENT_MAX_DEPTH = 6;
-const INDENT_BASE = 8;
 
 /**
  * The indent for `depth`, capped.
@@ -275,7 +291,7 @@ export function indentWidth(depth: number): number {
 
 /** The inverse of {@link pathKey}: numeric segments come back as numbers, as the doc stores them. */
 function pathFromKey(key: string): JxPath {
-  return key ? (key.split("/").map((s) => (/^\d+$/u.test(s) ? Number(s) : s)) as JxPath) : [];
+  return key ? key.split("/").map((s) => (/^\d+$/u.test(s) ? Number(s) : s)) : [];
 }
 
 // ─── The row model, and the window onto it ───────────────────────────────────
@@ -288,7 +304,7 @@ function pathFromKey(key: string): JxPath {
  * window only. Splitting the two is the whole saving — the expensive half is the kit elements a
  * row's cluster mounts, not the walk that finds it.
  */
-interface OutlineRow {
+interface OutlineRowFacts {
   /** `pathKey(path)` — the drag-and-drop and roving-focus key, and the `$map`'s reconcile key. */
   key: string;
   path: JxPath;
@@ -303,7 +319,6 @@ interface OutlineRow {
    * than quietly start selecting text nodes.
    */
   item: boolean;
-  node: JxMutableNode | string | number | boolean;
   nodeType: string;
   /** 1-based position among the row's `role="treeitem"` siblings — see {@link numberOutlineSets}. */
   posInSet: number;
@@ -311,6 +326,20 @@ interface OutlineRow {
   setSize: number;
 }
 
+/** A `role="treeitem"` row: an element, a repeater, a template or a case, always an object node. */
+interface OutlineItemRow extends OutlineRowFacts {
+  item: true;
+  node: JxMutableNode;
+}
+
+/** A text-node row: drawn, but not a tree item. Its node is the bare child primitive. */
+interface OutlineTextRow extends OutlineRowFacts {
+  item: false;
+  node: JxMutableNode | string | number | boolean;
+}
+
+type OutlineRow = OutlineItemRow | OutlineTextRow;
+
 /**
  * The declared height of one row — `surfaces/panel-outline.json`'s `[part="row"] { block-size }`.
  *
@@ -456,6 +485,11 @@ function watchOutlineTree(): void {
  * reorder, canvas to Outline sync, a collaborator's cursor, a jump from Problems — needs the
  * unambiguous one.
  */
+/** Whether a decoded `data-jx-path` is a path: an array of string and number segments. */
+function isJxPath(value: unknown): value is JxPath {
+  return Array.isArray(value) && value.every((segment) => isString(segment) || isNumber(segment));
+}
+
 export function outlineRowPath(el: Element | null): JxPath | null {
   const row = el?.closest<HTMLElement>("[data-jx-path]");
   if (!row?.dataset.jxPath) {
@@ -463,7 +497,7 @@ export function outlineRowPath(el: Element | null): JxPath | null {
   }
   try {
     const parsed: unknown = JSON.parse(row.dataset.jxPath);
-    return Array.isArray(parsed) ? (parsed as JxPath) : null;
+    return isJxPath(parsed) ? parsed : null;
   } catch {
     return null;
   }
@@ -674,7 +708,7 @@ function outlineRowLabel(row: OutlineRow): string {
     const text = String(row.node);
     return text.length > TEXT_PREVIEW_MAX ? `${text.slice(0, TEXT_PREVIEW_MAX)}…` : text;
   }
-  const node = row.node as JxMutableNode;
+  const { node } = row;
   return row.nodeType === "case-ref" ? node.$ref || "external" : outlineLabel(node);
 }
 
@@ -733,7 +767,7 @@ export function startLayerTitleEdit(path: JxPath, rerender: () => void) {
   /* The row's own node, not a second `getNodeAtPath` walk: the model already holds it, and reading
      it back off the model is what makes "a text line has no `$title` to write" a real branch rather
      than a defensive null check nothing can reach. */
-  if (!row?.item || typeof row.node !== "object") {
+  if (!row?.item) {
     return;
   }
   _editing = { key: row.key, rerender, text: row.node.$title || "" };
@@ -827,9 +861,11 @@ function buildOutlineRows(doc: JxMutableNode, mode: string, collapsed: Set<strin
     }
 
     const isText = nodeType === "text";
+    /** The row's node when it is a tree item; `null` for a text-node row. */
+    let element: JxMutableNode | null = null;
     if (!isText) {
       // After the text-node branch, a row's node is a JxMutableNode or it is not a row at all.
-      if (typeof node !== "object" || node === null) {
+      if (!isNonNullObject(node)) {
         continue;
       }
       if (path.length >= 2 && nodeType === "element") {
@@ -839,22 +875,28 @@ function buildOutlineRows(doc: JxMutableNode, mode: string, collapsed: Set<strin
           continue;
         }
       }
+      element = node;
     }
 
     while (ancestors.length > 0 && rows[ancestors.at(-1)!]!.depth >= depth) {
       ancestors.pop();
     }
-    rows.push({
-      depth,
-      item: !isText,
-      key,
-      node,
-      nodeType,
-      parent: ancestors.at(-1) ?? -1,
-      path,
-      posInSet: 0,
-      setSize: 0,
-    });
+    const parent = ancestors.at(-1) ?? -1;
+    rows.push(
+      element === null
+        ? { depth, item: false, key, node, nodeType, parent, path, posInSet: 0, setSize: 0 }
+        : {
+            depth,
+            item: true,
+            key,
+            node: element,
+            nodeType,
+            parent,
+            path,
+            posInSet: 0,
+            setSize: 0,
+          },
+    );
     ancestors.push(rows.length - 1);
   }
   return numberOutlineSets(rows);
@@ -890,30 +932,20 @@ function numberOutlineSets(rows: OutlineRow[]): OutlineRow[] {
 
 /** Whether the row has anything under it — children, a map template, or `$switch` cases. */
 function isExpandable(row: OutlineRow): boolean {
-  if (!row.item || typeof row.node !== "object") {
+  if (!row.item) {
     return false;
   }
-  const node = row.node as JxMutableNode;
+  const { node } = row;
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
-  const hasMapChildren =
-    node.children !== undefined &&
-    typeof node.children === "object" &&
-    (node.children as unknown as Record<string, unknown>).$prototype === "Array";
+  const hasMapChildren = isMappedArray(node.children);
   const hasCases =
-    Boolean(node.$switch) &&
-    typeof node.cases === "object" &&
-    node.cases !== null &&
-    Object.keys(node.cases).length > 0;
+    Boolean(node.$switch) && isNonNullObject(node.cases) && Object.keys(node.cases).length > 0;
   return hasChildren || hasMapChildren || hasCases || (row.nodeType === "map" && Boolean(node.map));
 }
 
 /** The badge: what it says, which of the six drawings it gets, and what it says on hover. */
-function rowBadge(row: OutlineRow): {
-  badge: string;
-  badgeKind: string;
-  badgeTitle: string | null;
-} {
-  const node = row.node as JxMutableNode;
+function rowBadge(row: OutlineItemRow): Pick<OutlineRowView, "badge" | "badgeKind" | "badgeTitle"> {
+  const { node } = row;
   if (row.nodeType === "map") {
     return { badge: "↻", badgeKind: "map", badgeTitle: "Repeating list — one copy per item" };
   }
@@ -930,9 +962,7 @@ function rowBadge(row: OutlineRow): {
       badge: "▣",
       badgeKind: "slot",
       badgeTitle:
-        typeof slotName === "string" && slotName.trim()
-          ? `Slot "${slotName.trim()}"`
-          : "Default slot",
+        isString(slotName) && slotName.trim() ? `Slot "${slotName.trim()}"` : "Default slot",
     };
   }
   /* The ROW BADGE, which is the one place the tag is shown as itself rather than folded into a
@@ -994,10 +1024,9 @@ function outlineRowView(
   if (!row.item) {
     return textRowView(row);
   }
-  const { depth, key, nodeType, path } = row;
-  const node = row.node as JxMutableNode;
+  const { depth, key, node, nodeType, path } = row;
 
-  const selected = isPathSelected(doc.selection, path);
+  const selected = isSelected(doc.selection, path);
   const expandable = isExpandable(row);
   // Array nodes can't accept dropped children (their content is the single map template), so they
   // Block the make-child drop instruction like void elements do.
@@ -1006,8 +1035,7 @@ function outlineRowView(
   // Array (repeater) nodes are first-class structural nodes — movable/draggable/deletable like
   // Elements. Both sit at a numeric child index; templates (path tail "map") and case nodes do
   // Not, so they stay selectable/editable but not structurally manipulable.
-  const structural =
-    (nodeType === "element" || nodeType === "map") && typeof childIndex(path) === "number";
+  const structural = (nodeType === "element" || nodeType === "map") && isNumber(childIndex(path));
   const isRoot = doc.mode === "content" ? path.length === 0 : path.length < 2;
   const grabbable = structural && !isRoot;
   const open = expandable && !collapsed.has(key);
@@ -1118,9 +1146,9 @@ export function outlineValues(): OutlineValues {
 /**
  * The surface standing in the Navigator, and the node it was mounted into.
  *
- * One slot rather than a per-host map, for the reason `panels/stylebook-layers-panel.ts` gives:
- * there is one Navigator, so a mount into a DIFFERENT node is the old one being replaced, and
- * holding both would leave the first one's effects running against a scope nobody writes any more.
+ * One slot rather than a per-host map, for the reason `panels/elements-panel.ts` gives: there is
+ * one Navigator, so a mount into a DIFFERENT node is the old one being replaced, and holding both
+ * would leave the first one's effects running against a scope nobody writes any more.
  */
 let standing: { host: HTMLElement; handle: OutlineSurfaceHandle } | null = null;
 /** Re-register drag-and-drop once the rows the projection asked for are actually in the DOM. */
@@ -1187,7 +1215,7 @@ function revealChangedSelection(): void {
 function revealSelectedRow(): void {
   const drawn = _outlineList?.querySelector(`${ROW_SELECTOR}[aria-selected="true"]`);
   if (drawn) {
-    drawn.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
+    drawn.scrollIntoView({ behavior: "smooth", block: "nearest" });
     return;
   }
   revealOutlineRow(outlineIndexOfPath(primarySelection(activeTab.value?.session.selection)));
@@ -1244,9 +1272,9 @@ export function mountOutlinePanel(
     standing = {
       handle: mountOutlineSurface(target, values, {
         contextMenu: (_scope, event) => {
-          const path = outlineRowPath(event.target as Element | null);
-          if (path) {
-            showContextMenu(event as MouseEvent, path, { rerender: () => _outlineRerender?.() });
+          const path = outlineRowPath(event.target instanceof Element ? event.target : null);
+          if (path && event instanceof MouseEvent) {
+            showContextMenu(event, path, { rerender: () => _outlineRerender?.() });
             redrawOutline();
           }
         },
@@ -1260,10 +1288,9 @@ export function mountOutlinePanel(
              mount would, and the host decides when it is worth anything. An unconnected input
              cannot take focus. */
           queueMicrotask(() => {
-            const input = element as HTMLInputElement;
-            if (input.isConnected) {
-              input.focus();
-              input.select?.();
+            if (element instanceof HTMLInputElement && element.isConnected) {
+              element.focus();
+              element.select();
             }
           });
         },
@@ -1330,7 +1357,7 @@ export function mountOutlinePanel(
 /**
  * Take the tree down.
  *
- * Called by the record when the pane starts showing Project Styles. Without it the document
+ * Called by the record when the pane starts showing an Elements view. Without it the document
  * survives its own irrelevance: both bodies are appended into the same `.panel-content`, so the one
  * nobody took down sits under the one that replaced it for the rest of the session.
  */
@@ -1365,18 +1392,20 @@ export function registerLayersPanel(): void {
     requiresDocument: "Open a page to see the elements it is built from.",
     /*
      * One panel, two bodies, and neither of them is lit's. The body is a document either way, so
-     * there is nothing for lit to draw here — a document CLEARS nothing and is APPENDED, and lit's
+     * there is nothing for lit to draw here: a document CLEARS nothing and is APPENDED, and lit's
      * own comment markers inside `.panel-content` are what it finds its (empty) content by.
      */
     render: (): PanelBody => nothing,
     /*
-     * `afterRender` runs on every repaint, and both mounts are idempotent — the standing surface is
+     * `afterRender` runs on every repaint, and both mounts are idempotent: the standing surface is
      * updated where it is still there and re-mounted only where something has taken it out. The
      * detach on each side is not symmetry for its own sake: the two documents are appended into the
      * same node, so a body nobody took down would sit under the one that replaced it.
      */
     afterRender: (ctx, host) => {
-      if (ctx.deps.getCanvasMode() === "stylebook") {
+      /* A document's Elements view lists the element catalogue; every other view draws the tree,
+         Variables and Code included. */
+      if (ctx.deps.getCanvasMode() === PROJECT_STYLES_VIEW) {
         detachOutline();
         mountStylebookLayersPanel({ selectStylebookTag, stylebookMeta }, host);
         return;

package/src/panels/left-panel.ts

@@ -27,7 +27,7 @@
  */
 
 import { render as litRender } from "lit-html";
-import { leftPanel } from "../store";
+import { leftPanel, requireShellRef } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
 import { shell } from "../shell";
@@ -72,11 +72,28 @@ export function mount(deps: NavigatorPanelDeps) {
   _deps = deps;
   registerNavigatorPanels();
   _dock = mountNavigatorDock(
-    leftPanel,
+    requireShellRef(leftPanel, "left-panel"),
     { panels: [panelView()] },
     {
       onContent: (panelId, host) => {
+        const switched = _content !== null && _content.panelId !== panelId;
         _content = { host, panelId };
+        /* `#left-panel` is the ONE scroller every panel draws in (the dock's root is `display:
+           contents`), so its offset outlived the panel it belonged to: scrolled down to the Site
+           panel's Components, a click on Outline opened the Outline that far down. A different
+           panel is a different list, and it opens at its top. A repaint of the same panel keeps
+           its place, because the box is keyed on the panel and is not announced again.
+           In the next FRAME, not here: this runs while the dock is still building the new panel,
+           and a scroll write lays out the half-built document to clamp the offset (a forced
+           recalculation on every Navigator panel switch in the perf trace). The frame lays it out
+           anyway, and resets the offset before anything is painted. */
+        if (switched) {
+          requestAnimationFrame(() => {
+            if (_content?.host === host) {
+              requireShellRef(leftPanel, "left-panel").scrollTop = 0;
+            }
+          });
+        }
         /* A MICROTASK, not this call. `onNodeCreated` fires the moment the element is CONSTRUCTED
            and the runtime applies its attributes on the next line, so a panel's `afterRender` run
            from here would be handed a content box with no `part` on it — and several panels find
@@ -93,20 +110,17 @@ export function mount(deps: NavigatorPanelDeps) {
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
-      // Shell state is tracked with no tab open — which panel is showing, and the project-level
-      // State the project-level panels draw from. A document-less rail tab still repaints.
+      // Shell state is tracked with no tab open: which panel is showing. A document-less rail tab
+      // Still repaints.
       void shell.leftTab;
-      void shell.settingsTab;
-      void shell.git.status;
-      void shell.git.loading;
-      void shell.git.error;
-      void shell.git.subTab;
-      void shell.git.logEntries;
       const tab = activeTab.value;
       if (tab) {
         // Track properties the Navigator's panels read
         void tab.doc.document;
         void tab.doc.mode;
+        // The editor too: the Outline draws the element catalogue beside a document's Elements
+        // View, and the tree beside every other.
+        void tab.session.ui.canvasMode;
         // The whole SET, joined — a bare property read would not re-trigger when the selection
         // Changes WITHIN the array, and §6.7's helpers always replace it but nothing enforces that.
         void tab.session.selection.map((path) => path.join("/")).join("|");
@@ -180,7 +194,7 @@ function navigatorDocument(): NavigatorDocument | null {
     return null;
   }
   return {
-    canvas: aTab.session.canvas as Record<string, unknown> | null,
+    canvas: aTab.session.canvas,
     content: aTab.doc.content,
     document: aTab.doc.document,
     documentPath: aTab.documentPath,

package/src/panels/navigator-panels.ts

@@ -7,8 +7,10 @@
  * Nothing here decides what a panel is called, what level it is, or what it draws — that would be
  * the second definition site the registry exists to prevent.
  *
- * **Registration order is rail order** within a level group: PROJECT (Files ⌘1 · Search ⌘2 · Source
- * Control ⌘3) above the divider, DOCUMENT (Outline ⌘4 · Page ⌘5 · Data ⌘6 · Packages ⌘7) below it.
+ * **Registration order is rail order** within a level group: PROJECT (Site, then Files with the
+ * developer panels on) above the divider, DOCUMENT (Outline · Data, then Packages with the
+ * developer panels on) below it (§5.1). Search, Languages and Insert are registered rail-less:
+ * reachable by `view.setActivity` and the palette, with no button.
  *
  * **Every rail button opens the Navigator.** Problems used to hold the fourth PROJECT slot while
  * its body was drawn in the Bottom dock, and paying for that took a per-dock branch in three
@@ -17,21 +19,22 @@
  * The count reaches the user from the status bar the moment there is one.
  *
  * **Search is declared and hidden.** It is a surface a later phase builds (the palette's project
- * index), and it holds a slot in the rail's four-tab budget (`studio-ui-guidelines.md` §12.2). A
+ * index), and it is off the rail like every other panel the Design rail does not list (§5.1). A
  * `when: () => false` record is the honest way to say "this exists in the design and not yet in the
- * app": the id is reserved, the budget already counts it, and the day it ships the only edit is
- * deleting one predicate — as opposed to a stub button that lies to whoever clicks it.
+ * app": the id is reserved, and the day it ships the only edit is deleting one predicate — as
+ * opposed to a stub button that lies to whoever clicks it.
  */
 
 import { registerFilesPanel } from "../files/files";
 import { registerDataPanel } from "./data-explorer";
 import { registerInsertPanel } from "./elements-panel";
-import { registerGitPanel } from "./git-panel";
 import { registerI18nPanel } from "./i18n-panel";
-import { registerPagePanel } from "./head-panel";
 import { registerPackagesPanel } from "./imports-panel";
 import { registerBottomPanels } from "./bottom-dock";
 import { registerLayersPanel } from "./layers-panel";
+import { registerSitePanel } from "./site-panel";
+import { registerCollectionsPanel } from "./collections-panel";
+import { registerStylesPanel } from "./styles-panel";
 import { getPanel, listPanels, railPanelSet, registerPanel, resetPanels } from "./panel-registry";
 import type { PanelRecord } from "./panel-registry";
 
@@ -45,14 +48,21 @@ const NOT_YET_BUILT = () => false;
  * per window in the app, but a test suite mounts it per case.
  */
 export function registerNavigatorPanels(): void {
-  // Keyed on Files rather than on `listPanels("navigator")`, because the Bottom dock composes
+  // Keyed on Site rather than on `listPanels("navigator")`, because the Bottom dock composes
   // Itself independently (`bottomPanelSet()` calls `registerBottomPanels()` directly) and either
   // Order has to leave this function still registering the Navigator's own eight.
-  if (getPanel("files")) {
+  if (getPanel("site")) {
     return;
   }
 
   // ── PROJECT group ───────────────────────────────────────────────────────────
+  registerSitePanel();
+  /* The Content workspace's Navigator (§22.5): off the rail, because Content draws none, and opened
+     by that workspace's frame. */
+  registerCollectionsPanel();
+  /* The Styles workspace's Navigator (§7.1): variables, element defaults and color schemes, off the
+     rail for the same reason. */
+  registerStylesPanel();
   registerFilesPanel();
   registerPanel({
     id: "search",
@@ -60,10 +70,13 @@ export function registerNavigatorPanels(): void {
     level: "project",
     dock: "navigator",
     icon: "magnifying-glass",
+    rail: false,
     when: NOT_YET_BUILT,
     render: () => nothingYet(),
   });
-  registerGitPanel();
+  /* No Source Control panel: its change list, commit and branch picker are the Publish workspace's
+     Review changes and Branches (§5.5, §22.8), and a Navigator beside that workspace would be a
+     second list of the same things. */
   /* Off the rail, and registered in the PROJECT group anyway: registration order is roster order,
      so this is what puts Languages beside the panels it belongs with in the palette and in
      `panel.focus.*`. Its `when` is `project.isMultilingual` — a project written in one language
@@ -72,7 +85,6 @@ export function registerNavigatorPanels(): void {
 
   // ── DOCUMENT group ──────────────────────────────────────────────────────────
   registerLayersPanel();
-  registerPagePanel();
   registerDataPanel();
   registerPackagesPanel();