@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/files/FilePanel.tsx

@@ -1,44 +1,190 @@
-// The left sidebar's File tab: scenes, the layer tree inside the open one, and
-// how to connect an agent (McpSection.tsx).
+// The left column's panel: the outline of the open container. The column is
+// fixed rows over one scroller: the context head, the search, then
+// `.rail-scroll`. The Project's files (Assets, Branding & References) live in the
+// Storyboard workspace now, so there is no section switch here.
+// Inside a Shot the scan order is deliberate: the context head, then Layers,
+// then the Components library. The header claimed "Layers first" for a release
+// while the JSX put Components above them; the tree is the SUBJECT of a shot
+// and the library is the same list at every level, so the subject is what
+// leads.
 //
-// TWO LEVELS, ONE BIT. `state.sceneId` decides which scene's layers are listed,
-// and it is the same bit the timeline's macro/micro split reads and the URL
-// mirrors. There is no second "which scene am I looking at" anywhere.
+// ── ONE RULE: THE OUTLINE LISTS WHAT IS INSIDE WHERE YOU ARE ─────────────
+//
+//   the SCENE  -> its shots
+//   a SHOT     -> its elements
+//   a DEF      -> its interior
+//
+// It used to list the shots in EVERY context, so inside a shot the panel showed
+// two levels stacked in one column: a shot list whose rows navigate away, above
+// a layer tree of the shot you are in. And the shots were already drawn twice
+// over — the timeline's shot rows carry the same list with the verbs that
+// matter (reorder, trim, delete, transition, open), where their durations are
+// legible. Three pictures of one list, one of which could act on it.
+//
+// The two pictures that are left agree by construction: this list's right-click
+// and the timeline row's are the same `shotMenuEntries`, and both offer the
+// same double-click into the shot.
+//
+// The scene context lost nothing by the change, it GAINED the list: it used to
+// hold a sentence telling the author to go and open a shot, under a shot list it
+// was standing next to.
+//
+// The COMPONENTS block follows that rule too, and it took two goes to get
+// there. It is drawn INSIDE a shot and inside a definition, and not above one.
+// The counter-argument was that a definition is document-scoped and lives in no
+// shot, so "what is inside where you are" never excludes it. That is true, and
+// it argues for the list being reachable from the scene level, not for it being
+// mounted there. Every verb the block offers is refused above a shot except
+// two, and the App menu carries both (Component ▸ Open in Components opens one,
+// and its New empty component is disabled there for the same reason the rail's
+// was not, an inconsistency this removes). What the scene level is FOR is the
+// cut: the shots, in order. A library of things that cannot be placed into it
+// is a second subject in a panel whose whole rule is one.
+//
+// IT LISTS BOTH COMPONENT FAMILIES, in two lists. A definition is one of the
+// two things an author calls a component; the other is a component from their
+// own repo, which is an `instance` layer naming a registry id. Only definitions
+// were ever listed, so a shot built entirely out of repo components showed this
+// header with nothing under it. The second list is `usedInstanceComponentsOf`,
+// scoped to what the document actually places — browsing the whole registry is
+// the Add menu's job. Two lists rather than one merge, because the rows do
+// different things when clicked (one opens an editor, one selects layers) and
+// because "the first row under `component-list` is a definition" is a fact
+// other surfaces resolve against.
+//
+// The per-row `+` is still ABSENT rather than disabled wherever it cannot run,
+// which is this panel's rule for a verb the current level cannot do at all. It
+// just no longer has a level of its own to be absent at.
+//
+// TWO LEVELS, TWO BITS, AND THEY ARE NOT THE SAME BIT.
+//
+//   `state.enteredScene` is the CONTEXT: null lists the shots and no layers at
+//     all, because an element belongs to exactly one shot and in the scene
+//     context nobody has said which.
+//   `state.sceneId` is the SUBJECT: which shot's layers, once one is open. It
+//     is derived from the playhead, and while a shot is entered the clamp holds
+//     the playhead inside it — so here the two always agree, by construction
+//     rather than by a second copy.
+//
+// This header used to claim `sceneId` was "the same bit the timeline's
+// macro/micro split reads". It was, until that split was deleted; the sentence
+// outlived the thing it described by a release, which is the failure mode this
+// lane treats as a bug rather than as prose.
 //
 // THE TREE IS RENDERED FROM `scene.layers` AND `children`, never from
-// `layersById` — the outline is the forest, and `order` is a separate axis that
-// decides PAINT. Listing by `order` would put a group's children next to
-// strangers, and listing by `layersById` would have no order at all.
-import { useEffect, useState } from "react";
-import { IconChevron, useContextMenu } from "@dailies-studio/ui";
-import { componentDefsOf, homeOf, instancesOf, layerChildren, parentOf } from "@dailies-studio/shot/doc";
-import type { Layer3D } from "@dailies-studio/shot/doc";
-import { useShotEditor, useStore } from "../../state/context.js";
-import { layerMenuEntries, menuTargetsFor } from "../../state/menu.js";
+// `layersById`: the outline is the forest, and from schema v35 its lists ARE
+// paint order (back to front, a parent before its children), which `order`
+// only numbers. Listing by `layersById` would have no order at all.
+//
+// FRONT FIRST, as Figma's layers panel reads: each sibling list is shown
+// reversed (`frontFirst`), so the top row is the layer in front, and a parent's
+// row still sits above its children. Only the DISPLAY flips. Every row keeps its
+// index in the stored list, and a drop line is mapped back to that list: the
+// line above a row is in front of it, the line below it is behind it.
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent } from "react";
+import { framesToSeconds } from "@dailies-studio/engine";
+import { LAYER_ROW_H, formatDuration, frontFirst } from "../timeline/model.js";
+import { IconChevron, useCollapsed, useContextMenu } from "@dailies-studio/ui";
+import {
+  canHoldChildren,
+  componentDefsOf,
+  homeOf,
+  instanceExportOf,
+  instancesOf,
+  layerChildren,
+} from "@dailies-studio/shot/doc";
+import type { Layer3D, LayerHome } from "@dailies-studio/shot/doc";
+import { useShotEditor, useShotEditorHot, useStore } from "../../state/context.js";
+import type { ShotEditorStore } from "../../state/store.js";
+import { isSceneContext } from "../../state/viewMode.js";
+import { crumbsFor } from "../../state/isolationTrail.js";
+import { usedComponentsOf } from "../../state/projectComponents.js";
+import {
+  layerMenuEntries,
+  menuTargetsFor,
+  SHOT_MENU_OPTIONS,
+  shotMenuEntries,
+} from "../../state/menu.js";
 import {
   TRIANGLE_SOFT_BUDGET,
   formatTriangles,
   sceneBudgetWarning,
-  sumTriangles,
+  sumTrianglesCached,
 } from "../../state/triangles.js";
-import { McpSection } from "./McpSection.js";
+import { selectionMembership } from "../../state/selection.js";
 import {
+  CHEVRON_LEFT_ICON,
+  ADD_ICON,
   COMPONENT_ICON,
   EYE_ICON,
   EYE_OFF_ICON,
   LOCK_ICON,
+  MASK_ICON,
   SCENE_ICON,
+  SEARCH_ICON,
   UNLOCK_ICON,
+  iconFor,
+  isComponentGlyph,
   kindIcon,
-} from "./icons.js";
+} from "../../icons.js";
+import { pinnedWindowSpans, useFixedVirtualWindow } from "../virtualWindow.js";
+import { backTarget } from "../toolbar/BackChip.js";
+import { PeerDots } from "../header/PresenceStack.js";
+import { LayerMarks } from "./LayerMarks.js";
+import { MaskBracket, NO_CONTENT_HINT, maskMarksOf } from "../maskMarks.js";
+import type { MaskMarks } from "../maskMarks.js";
 
 export function FilePanel() {
   const store = useStore();
   const doc = useShotEditor((s) => s.doc);
-  const sceneId = useShotEditor((s) => s.sceneId);
+  const name = useShotEditor((s) => s.name);
+  // Hot: the cold lane sleeps through a cut the transport plays (store
+  // `set`), and the Shots list marks what is playing. A string, so this
+  // renders at a cut and not per frame; inside a Shot it never moves.
+  const sceneId = useShotEditorHot((s) => s.sceneId);
+  const enteredScene = useShotEditor((s) => s.enteredScene);
   const isolation = useShotEditor((s) => s.isolation);
   const editingDef = useShotEditor((s) => s.editingDef);
+  /** The registry, for the DISPLAY NAME of a code component. The list renders
+   *  without it (the export name is parsed from the id), so this is a
+   *  refinement arriving late, never a gate on the rows appearing. */
+  const library = useShotEditor((s) => s.library);
+  const libraryLoaded = useShotEditor((s) => s.libraryLoaded);
+  /** The SCENE context: arranging shots, so nothing here may insert an element.
+   *  A definition counts as a container, which is why `isSceneContext` excludes
+   *  one. Both are the shared predicates rather than this panel's own copy: the
+   *  rail, the dock and the store answered "where am I" from three spellings. */
+  const inScene = useShotEditor(isSceneContext);
   const [query, setQuery] = useState("");
+  /** `/` asks for the caret here (`searchFocus`, a mailbox keyed on identity),
+   *  and the field takes it. The store already refused the key while focus was
+   *  in a field, so this never steals the caret from one.
+   *
+   *  ONE REQUEST, ONE FOCUS. The panel sleeps in a hidden `<Activity>` on the
+   *  board (LeftColumn.tsx), and waking re-runs every effect: keyed on the
+   *  value alone, an old request would pull the caret here on each return
+   *  from the board. So the effect remembers the last request it answered,
+   *  and a wake (the layout effect, which runs first) counts a request made
+   *  while the panel slept as answered: it was not this panel's to take. */
+  const searchRef = useRef<HTMLInputElement>(null);
+  const searchFocus = useShotEditor((s) => s.searchFocus);
+  const answeredFocus = useRef<typeof searchFocus>(null);
+  useLayoutEffect(() => {
+    answeredFocus.current = store.getState().searchFocus;
+  }, [store]);
+  useEffect(() => {
+    if (searchFocus === null || searchFocus === answeredFocus.current) return;
+    answeredFocus.current = searchFocus;
+    searchRef.current?.focus();
+  }, [searchFocus]);
   /** Collapsed subtree roots. PER-SESSION on purpose, never a workspace pref:
    *  prefs survive document switches and layer ids are document-scoped, so a
    *  persisted set would carry stale ids into every other document. */
@@ -46,6 +192,21 @@ export function FilePanel() {
   /** The last plainly-clicked row — shift-click ranges from it over the
    *  VISIBLE flattened order, the Figma/Blender behaviour. */
   const [anchor, setAnchor] = useState<string | null>(null);
+  /** Which shot row is being renamed inline, or null. The menu says "Rename"
+   *  and the surface decides what that looks like — see `shotMenuEntries`. */
+  const [renamingShot, setRenamingShot] = useState<string | null>(null);
+  /** ONE MENU for the shot list. The layer rows own theirs per row (they carry
+   *  their own drag state); this list has one opener and one open menu. */
+  const menu = useContextMenu();
+  /**
+   * COMPONENTS FOLDS, and this one IS a workspace pref, unlike the collapsed
+   * layer subtrees above. It keys on nothing document-scoped: the group is the
+   * same group in every Project, so a fold carried across a document switch is
+   * the author's answer to "do I want this library open", not a stale id.
+   */
+  const [componentsCollapsed, toggleComponents] = useCollapsed({
+    persistKey: "shot:rail:components",
+  });
   /**
    * BOTH ARE DROPPED WHEN THE DOCUMENT CHANGES, and that is not tidiness.
    * This panel is mounted unconditionally and never keyed (App.tsx), and a
@@ -54,12 +215,33 @@ export function FilePanel() {
    * every shot. Kept, the set folds a group in the NEW document that nobody
    * folded, and the anchor makes the author's first shift-click there a range
    * measured from a click they made in a different document.
+   *
+   * Only on a REAL change: a wake from the board's hidden `<Activity>` re-runs
+   * this effect with the same id, and must not unfold the author's tree.
    */
   const docId = doc?.id ?? null;
+  const clearedFor = useRef(docId);
   useEffect(() => {
+    if (clearedFor.current === docId) return;
+    clearedFor.current = docId;
     setCollapsed(new Set());
     setAnchor(null);
   }, [docId]);
+  /** The code components this document places, grouped. Memoised because it
+   *  walks every layer in every scene AND every definition, and this panel
+   *  re-renders on selection. */
+  const usedComponents = useMemo(
+    () => (doc === null ? [] : usedComponentsOf(doc)),
+    [doc],
+  );
+  /** Fetched ONLY when there is something to name. A shot with no code
+   *  components never touches the route, which keeps the panel silent in every
+   *  document that has no use for the registry. */
+  const wantsLibrary = usedComponents.length > 0 && !libraryLoaded;
+  useEffect(() => {
+    if (wantsLibrary) void store.refreshLibrary();
+  }, [wantsLibrary, store]);
+  const justPlaced = useShotEditor((s) => s.justPlaced);
 
   if (doc === null) return null;
   const scene = sceneId === null ? undefined : doc.scenesById[sceneId];
@@ -67,6 +249,7 @@ export function FilePanel() {
   // The forest the outline shows: a definition's while one is being edited,
   // the open shot's otherwise. ONE lookup, so the rows below never branch.
   const home = homeOf(doc, editingDef ?? sceneId ?? "");
+  const placedHere = justPlaced !== null && home?.layersById[justPlaced] !== undefined;
   const trimmedQuery = query.trim().toLowerCase();
   const rootIds =
     home === null
@@ -75,6 +258,123 @@ export function FilePanel() {
         ? home.layers
         : layerChildren(home.layersById[isolation] ?? ({} as Layer3D));
 
+  // ── WHAT THE HEAD IS DESCRIBING ─────────────────────────────────────────
+  //
+  // Four contexts, ONE decision, made here rather than four times in the JSX.
+  // The chrome always knew which one it was in (`enteredScene`, `editingDef`,
+  // `isolation`); what it never did was say so in a shape the author could act
+  // on, and a head that branches inline is how the old crumb strip ended up
+  // stating each fact in a different grammar.
+  //
+  // A DEFINITION WINS over an isolation. The two have been mutually exclusive
+  // since v14, so they should never disagree; if they ever do, the definition
+  // is the one whose interior is actually on screen.
+  const editedDef = editingDef === null ? undefined : defs[editingDef];
+  const isolatedLayer =
+    editedDef !== undefined || isolation === null || scene === undefined
+      ? undefined
+      : scene.layersById[isolation];
+  const subject: "project" | "shot" | "isolation" | "definition" =
+    editedDef !== undefined
+      ? "definition"
+      : isolatedLayer !== undefined
+        ? "isolation"
+        : enteredScene !== null && scene !== undefined
+          ? "shot"
+          : "project";
+  /** The isolated layer and its ancestors, outermost first. Empty unless an
+   *  isolation is the subject. Its length says whether one level up is the
+   *  shot (1) or a group. */
+  const isolationTrail =
+    isolatedLayer === undefined || scene === undefined
+      ? []
+      : crumbsFor(scene, isolatedLayer.id);
+  const projectName = doc.title ?? name ?? doc.name;
+  const PROJECT_TITLE = "The whole Project: arrange its Shots";
+  /** All the way out to the Project, from whichever level the author is on.
+   *  The three calls are one gesture and have always travelled together. */
+  const exitToProject = (): void => {
+    store.exitIsolationAll();
+    store.editComponent(null);
+    store.leaveScene();
+  };
+
+  /**
+   * THE WAY BACK, EXACTLY ONE LEVEL, which is the rule Escape already follows.
+   *
+   * This is the control the chrome did not have. The only thing that looked
+   * like a way out was a dim 11px crumb, and the one control that read as a
+   * button was the timeline head's chip carrying the Project's own name, which
+   * reads as a title. A row with a chevron and full ink is the affordance.
+   *
+   * `testId` keeps the old crumb ids on whichever control now performs their
+   * job: `scene-crumb` is whatever lands the author in the Project context,
+   * `shot-crumb` is whatever lands them in the Shot. Between contexts the
+   * control moves between the back row and the subject; the promise the id
+   * makes does not. A back row that climbs to a group is `isolation-back`.
+   *
+   * The destination and its verb are `backTarget`'s, the one the canvas bar's
+   * back chip reads, so the two ways back cannot disagree.
+   *
+   * AN ISOLATION GETS THE SAME HEAD as a shot or a definition: one level
+   * back, then the subject. The full trail lives over the canvas
+   * (IsolationTrail.tsx), so the rail does not repeat it. The Project is the
+   * top, and a back row there would point at nothing.
+   */
+  const backRow = (): {
+    label: string;
+    title: string;
+    testId: string;
+    onClick: () => void;
+  } | null => {
+    if (subject === "project") return null;
+    const target = backTarget(store.getState());
+    if (target === null) return null;
+    if (subject === "isolation") {
+      const toShot = isolationTrail.length <= 1;
+      return {
+        label: target.label ?? "",
+        title: `Back to ${target.label ?? ""}`,
+        testId: toShot ? "shot-crumb" : "isolation-back",
+        onClick: () => target.run(store),
+      };
+    }
+    // Inside a definition the way back is the Components home (mock C6).
+    if (subject === "definition") {
+      return {
+        label: "All components",
+        title: "Every component of this Project",
+        testId: "components-home-back",
+        onClick: () => target.run(store),
+      };
+    }
+    return {
+      label: target.label ?? "All shots",
+      title: target.label === null ? PROJECT_TITLE : `Back to ${target.label}`,
+      testId: target.label === null ? "scene-crumb" : "shot-crumb",
+      onClick: () => target.run(store),
+    };
+  };
+  const back = backRow();
+  /** The subject's glyph, from the same typed maps the outliner rows read. The
+   *  Project deliberately has none: `icons.tsx` is the one source for chrome
+   *  glyphs, it carries no Doc3D glyph, and minting one at a call site would
+   *  put a second source of truth beside it. */
+  const subjectIcon =
+    subject === "definition"
+      ? COMPONENT_ICON
+      : isolatedLayer !== undefined
+        ? iconFor(isolatedLayer)
+        : subject === "shot"
+          ? SCENE_ICON
+          : null;
+  /** The component family keeps the accent here for the reason it keeps it in
+   *  the outliner: a definition is a different KIND of subject, not just
+   *  another one. */
+  const subjectIsComponent =
+    subject === "definition" ||
+    (isolatedLayer !== undefined && isComponentGlyph(isolatedLayer));
+
   const toggleCollapse = (id: string): void => {
     setCollapsed((prev) => {
       const next = new Set(prev);
@@ -84,201 +384,855 @@ export function FilePanel() {
     });
   };
 
-  const rowClick = (id: string, e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }): void => {
-    const selection = store.getState().selection;
-    if (e.shiftKey && anchor !== null && home !== null) {
-      // The range is over WHAT IS ON SCREEN — the same flattening the rows
-      // render from, so a collapsed group's invisible children are never
-      // swept into a selection the author cannot see.
-      const flat = flattenVisible(home, rootIds, collapsed, trimmedQuery);
-      const a = flat.indexOf(anchor);
-      const b = flat.indexOf(id);
-      if (a !== -1 && b !== -1) {
-        store.select(flat.slice(Math.min(a, b), Math.max(a, b) + 1));
-        return;
-      }
-      // A stale anchor (deleted, scoped away) falls through to a plain click.
-    }
-    if (e.ctrlKey || e.metaKey) {
-      store.select(selection.includes(id) ? selection.filter((x) => x !== id) : [...selection, id]);
-      setAnchor(id);
-      return;
-    }
-    store.select([id]);
-    setAnchor(id);
-  };
+  const { rowClick, rowKeyMove } = layerRowSelection({
+    store,
+    scene: home,
+    ids: rootIds,
+    collapsed,
+    query: trimmedQuery,
+    anchor,
+    setAnchor,
+  });
 
   return (
     <div className="file-panel" data-testid="file-panel">
-      <label className="file-search">
-        <input
-          type="search"
-          value={query}
-          placeholder="Search layers"
-          aria-label="Search layers"
-          onChange={(e) => setQuery(e.target.value)}
-        />
-      </label>
-
-      <div className="file-section-label">Shots</div>
-      <ul className="scene-list">
-        {doc.scenes.map((id) => {
-          const s = doc.scenesById[id];
-          if (s === undefined) return null;
-          return (
-            <li key={id}>
+      {/* ── NO SECTION SWITCH ──────────────────────────────────────────────
+          The column used to open on a three-way switch (the outline, Assets,
+          Branding & References). The Paper redesign moved the two Project
+          libraries to the Storyboard workspace, so this column is ONE thing in
+          every context: the outline (Shots at the Project level, Layers inside
+          a shot or a definition) and, inside a container, Components. */}
+      {/* ── THE CONTEXT HEAD ───────────────────────────────────────────────
+          It used to sit mid-panel, directly above the layer list it scoped,
+          which was right while the list below it was the only thing here. The
+          panel's contents change with the context now, so the rows that say
+          WHICH context go above all of them, and this is the panel's FIRST
+          child in every context: the column's head, one panel head tall.
+
+          IT USED TO BE A FLAT CRUMB STRIP, and that is the defect. Every level
+          was 11px --text-dim with no chevron and no back affordance, so the
+          only control on screen that read as a way out was the timeline head's
+          chip carrying the Project's own name, which reads as a title. Two
+          rows answer the two questions the one strip answered neither of: row
+          one is the way OUT, one level, in full ink; row two is the SUBJECT
+          the tree under it belongs to, at heading size.
+
+          ONE SHAPE FOR EVERY MODE. Isolation and the component context are
+          mutually exclusive since v14, but each scopes this outline, and
+          differently-shaped heads per mode would make "where am I" a lesson the
+          author has to learn once per mode. */}
+          <nav className="rail-head" data-testid="rail-head">
+            {back === null ? null : (
               <button
                 type="button"
-                className={`scene-row${id === sceneId ? " is-current" : ""}`}
-                aria-current={id === sceneId}
-                // `focusScene`, not `setScene`: a bare pin leaves the playhead
-                // in whatever scene it was already in, and every store call
-                // that pairs `state.sceneId` with `masterToScene(state.frame)`
-                // — insertion, block placement, split, camera shots — then
-                // reads its scene from one scene and its frame from another.
-                // The stage renders the playhead's scene, so a pin the playhead
-                // is not in is also a scene the author cannot see.
-                onClick={() => store.focusScene(id)}
+                className="rail-back"
+                data-testid={back.testId}
+                title={back.title}
+                onClick={back.onClick}
               >
-                <span className="layer-kind" aria-hidden="true">
-                  {SCENE_ICON}
-                </span>
-                <span className="row-label">{s.name}</span>
+                {CHEVRON_LEFT_ICON}
+                {back.label}
               </button>
-            </li>
-          );
-        })}
-      </ul>
-
-      {/* COMPONENTS, above the layers and below the shots — a definition is
-          not in any shot, and the list is what makes a zero-instance one
-          reachable at all. Absent entirely when the document has none, so a
-          shot that never made one looks exactly as it did. */}
-      {Object.keys(defs).length === 0 ? null : (
-        <>
-          <div className="file-section-label">Components</div>
-          <ul className="component-list" data-testid="component-list">
-            {Object.values(defs).map((d) => (
-              <li key={d.id} className={`component-row${d.id === editingDef ? " is-current" : ""}`}>
-                <span className="layer-kind" aria-hidden="true">
-                  {COMPONENT_ICON}
+            )}
+            <div
+              className={`rail-subject${subject === "definition" ? " is-definition" : ""}`}
+            >
+              {subjectIcon === null ? null : (
+                <span
+                  className={`rail-subject-icon${subjectIsComponent ? " is-component" : ""}`}
+                  aria-hidden="true"
+                >
+                  {subjectIcon}
+                </span>
+              )}
+              {/* THE SUBJECT'S NAME, and in two of the four contexts it is also a
+              control, so it carries the crumb id that used to name that
+              control. In the Project context it is the only thing standing for
+              "the whole Project", which is what `scene-crumb` has always
+              meant. In the Shot context it is the way back UP to the shot from
+              a subtree or a definition, unchanged. Where the subject cannot
+              act (a definition) it is a plain span: the back row above owns
+              leaving, and a heading that navigates away on click is the
+              crumb-as-title confusion again. */}
+              {subject === "project" ? (
+                <button
+                  type="button"
+                  className="rail-subject-name"
+                  aria-current
+                  data-testid="scene-crumb"
+                  title={PROJECT_TITLE}
+                  onClick={exitToProject}
+                >
+                  {projectName}
+                </button>
+              ) : subject === "shot" ? (
+                <button
+                  type="button"
+                  className="rail-subject-name"
+                  aria-current={isolation === null && editingDef === null}
+                  data-testid="shot-crumb"
+                  onClick={() => {
+                    store.exitIsolationAll();
+                    store.editComponent(null);
+                  }}
+                >
+                  {scene?.name}
+                </button>
+              ) : subject === "isolation" ? (
+                <span
+                  className="rail-subject-name"
+                  aria-current
+                  data-testid="isolation-subject"
+                  title="Isolated: only this layer and what is inside it can be picked"
+                >
+                  {isolatedLayer?.label}
                 </span>
+              ) : (
+                <span
+                  className="rail-subject-name"
+                  aria-current
+                  data-testid="definition-crumb"
+                  title="Editing this definition: every instance follows"
+                >
+                  {editedDef?.name}
+                </span>
+              )}
+            </div>
+          </nav>
+
+      {/* SEARCH, IN EVERY CONTEXT, because every context has a list under it.
+          It used to render only inside a shot, on the reasoning that it belongs
+          to the layer tree. True, and it left the Project context with a list
+          and no way to filter it. One box, filtering whatever the list below
+          it is: the placeholder says which.
+
+          The ui package's `.search-field` recipe: the wrapper carries the edge
+          so the magnifier and the "/" hint sit inside it. The key is real
+          (`focusSearch` in keymap.ts, with a row in the manual); the `kbd` is
+          `aria-hidden` because it repeats that binding and names nothing. */}
+      <div className="file-search">
+        <label className="search-field">
+          {SEARCH_ICON}
+          <input
+            ref={searchRef}
+            type="search"
+            value={query}
+            placeholder={inScene ? "Search shots" : "Search layers"}
+            aria-label={inScene ? "Search shots" : "Search layers"}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+          <kbd className="kbd" aria-hidden="true">
+            /
+          </kbd>
+        </label>
+      </div>
+
+      {/* THE ONE SCROLLER. Everything above it is fixed; its height is
+          bounded by the column, which is what lets the outline virtualise. */}
+      <div className="rail-scroll">
+        <>
+          {/* THE SCENE CONTEXT'S OUTLINE: the document's children are its shots.
+          Absent inside one, where the children are elements and the tree below
+          lists them. */}
+          {!inScene ? null : (
+            <>
+              {menu.menu}
+              {/* The count is a SIBLING of `.file-section-label`, never a child:
+              two rail tests compare that element's textContent by equality, so
+              a nested span would rename the section rather than annotate it.
+              `.file-section-head` (left-column.css) lays the row out as a flex
+              line, so the count's `margin-left: auto` pulls it to the right.
+              The Layers head below uses the same markup. */}
+              <div className="file-section-head file-section-label--actions">
+                <div className="file-section-label">Shots</div>
+                <span className="file-section-count">{doc.scenes.length}</span>
+              </div>
+              <ul className="scene-list">
+                {doc.scenes.map((id) => {
+                  const s = doc.scenesById[id];
+                  if (s === undefined) return null;
+                  // The same predicate the layer tree filters on, on the one field
+                  // a shot row shows. A shot has no children in this list, so
+                  // there is no subtree rule to mirror here.
+                  if (
+                    trimmedQuery.length > 0 &&
+                    !s.name.toLowerCase().includes(trimmedQuery)
+                  ) {
+                    return null;
+                  }
+                  // The LI is the row: the band has to run under the Open
+                  // button too, so hover and the current mark live here.
+                  return (
+                    <li
+                      key={id}
+                      className={`scene-list-item${id === sceneId ? " is-current" : ""}`}
+                    >
+                      {renamingShot === id ? (
+                        <input
+                          className="shot-rename"
+                          defaultValue={s.name}
+                          autoFocus
+                          aria-label={`Rename ${s.name}`}
+                          data-testid={`shot-rename-row-${id}`}
+                          onBlur={(e) => {
+                            setRenamingShot(null);
+                            store.renameScene(id, e.currentTarget.value);
+                          }}
+                          onKeyDown={(e) => {
+                            e.stopPropagation();
+                            if (e.key === "Enter") {
+                              setRenamingShot(null);
+                              store.renameScene(id, e.currentTarget.value);
+                            } else if (e.key === "Escape")
+                              setRenamingShot(null);
+                          }}
+                        />
+                      ) : (
+                        <button
+                          type="button"
+                          className={`scene-row${id === sceneId ? " is-current" : ""}`}
+                          aria-current={id === sceneId}
+                          // THE WAY IN, on the gesture every file browser gives "go
+                          // inside". The `›` beside it stays: a double-click is fast
+                          // and a chevron is discoverable, and the two cost one 12px
+                          // button between them.
+                          onDoubleClick={() => store.enterScene(id)}
+                          // ONE MENU, TWO SURFACES. The same entries the timeline's
+                          // shot row opens. `shotMenuEntries` is the single builder,
+                          // for `layerMenuEntries`' reason: a Delete that meant one
+                          // thing here and another there is worse than one of them.
+                          onContextMenu={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            store.focusScene(id);
+                            menu.open(
+                              { x: e.clientX, y: e.clientY },
+                              shotMenuEntries(store, store.getState(), id, () =>
+                                setRenamingShot(id),
+                              ),
+                              SHOT_MENU_OPTIONS,
+                            );
+                          }}
+                          // `focusScene`, not `setScene`: a bare pin leaves the
+                          // playhead in whatever scene it was already in, and every
+                          // store call that pairs `state.sceneId` with
+                          // `masterToScene(state.frame)` (insertion, placement,
+                          // split, camera shots) then reads its scene from one scene
+                          // and its frame from another. The stage renders the
+                          // playhead's scene, so a pin the playhead is not in is also
+                          // a scene the author cannot see.
+                          onClick={() => store.focusScene(id)}
+                        >
+                          <span className="layer-kind" aria-hidden="true">
+                            {SCENE_ICON}
+                          </span>
+                          <span className="row-label">{s.name}</span>
+                          {/* THE SHOT'S LENGTH, in the chrome's one duration
+                          string (`formatDuration`), so the column and the
+                          timeline never spell one duration two ways. Inside the
+                          button, so the whole row stays one click and one
+                          double-click target. */}
+                          <span className="scene-row-duration">
+                            {formatDuration(framesToSeconds(s.durationFrames, doc.fps))}
+                          </span>
+                        </button>
+                      )}
+                      {/* The SECOND door in, beside the timeline row's. A row click
+                      seeks (the scene context's own gesture — look at this shot)
+                      and this OPENS. Two verbs on one row rather than one that
+                      guesses, because the two are different requests and the
+                      second one changes the whole chrome. */}
+                      <button
+                        type="button"
+                        className="layer-flag"
+                        data-testid={`shot-open-${id}`}
+                        aria-label={`Open ${s.name}`}
+                        title="Open this shot: add and animate its elements"
+                        onClick={() => store.enterScene(id)}
+                      >
+                        ›
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+              {/* ADD SHOT, the dock's `+ Shot` verb (`store.addScene`) where the
+              list it grows is. Paper's dashed "add one more" slot, the ui
+              package's `.btn.is-dashed`. Only here: inside a shot this list is
+              not on screen, and the dock keeps its own door. */}
+              <div className="scene-list-add">
                 <button
                   type="button"
-                  className="layer-name"
-                  aria-current={d.id === editingDef}
-                  // Scoping the OUTLINE, not the stage: a definition's layers
-                  // are in no scene and have no camera to point at them.
-                  onClick={() => store.editComponent(d.id === editingDef ? null : d.id)}
+                  className="btn is-dashed"
+                  data-testid="rail-add-shot"
+                  onClick={() => store.addScene()}
                 >
-                  {d.name}
+                  {ADD_ICON}
+                  Add shot
                 </button>
-                <span className="component-count" aria-hidden="true">
-                  {instancesOf(doc, d.id).length}
+              </div>
+            </>
+          )}
+
+          {/* ── NO LAYER TREE IN THE SCENE CONTEXT ────────────────────────────
+          An element belongs to exactly ONE shot, and in the scene context the
+          author has not said which. Listing the playhead's shot instead would
+          be a tree that silently changed under every scrub across a cut, with
+          every row a door into a context the panel does not say it is in, the
+          same failure the two-level dock was deleted for.
+          There is no placeholder here any more, and that is the point: the shots
+          list ABOVE is the scene context's outline, so there is no empty panel
+          to explain. The sentence that used to stand here pointed at the
+          timeline for a `›` this panel carries itself.
+
+          IT RENDERS BEFORE COMPONENTS, which the header at the top of this file
+          has claimed for a release while the JSX did the opposite. The layer
+          tree is the SUBJECT of the shot context; the components list is a
+          library every context shows, above and below and inside a shot alike.
+          The subject goes first. Nothing in state depends on the order. */}
+          {inScene || home === null ? null : (
+            <>
+              {/* Count outside the label, for the reason the Shots head gives. It
+              counts what is directly INSIDE this container, not what the search
+              leaves on screen: the section names the container, and a number
+              that shrank as the author typed would be naming the filter. */}
+              <div className="file-section-head file-section-label--actions">
+                <div className="file-section-label">
+                  Layers
+                </div>
+                <span className="file-section-count">{rootIds.length}</span>
+              </div>
+              <WindowedLayerRows
+                // The CONTAINER, which is a definition while one is being edited.
+                // Every op the rows drive takes a container id, so the drag, the
+                // rename and the flags all work inside a definition unchanged.
+                scene={home}
+                containerId={editingDef ?? sceneId ?? ""}
+                // SCOPED to the isolated subtree's own children, so the outline
+                // says the same thing the stage does about what is being edited.
+                ids={rootIds}
+                parent={editingDef === null ? isolation : null}
+                query={trimmedQuery}
+                collapsed={collapsed}
+                onToggleCollapse={toggleCollapse}
+                onRowClick={rowClick}
+                onRowKeyMove={rowKeyMove}
+              />
+              {/* Says where an unselected placement went and how to reach it:
+                  a locked layer is skipped by stage clicks, so its row is the
+                  way in. */}
+              {placedHere ? (
+                <p className="layer-placed-note" role="status">
+                  Just added. Locked at the back. Unlock to edit or delete.
+                </p>
+              ) : null}
+            </>
+          )}
+
+          {/* COMPONENTS, INSIDE A CONTAINER ONLY. See the file header for the
+          argument. Above a shot the block's verbs are all refused (`+` places
+          an instance, and `insertContext` refuses every insert in the scene
+          context) or better reached from the App menu (Component ▸ Edit
+          definition), and the scene level's subject is the cut.
+
+          The header is always present at the levels that DO draw it (unify P2):
+          New Component is how a definition can exist from NOTHING, so the way
+          in cannot hide behind having one already.
+
+          A NATIVE `details`, and NOT `InspectorSection`: that one unmounts its
+          body when collapsed, and these rows have to stay queryable at rest.
+          The library is the one block here that is not about where the author
+          is standing, so it is also the one worth folding out of the way, and
+          the fold persists because the answer to "do I want this open" is the
+          author's habit rather than anything document-scoped. */}
+          {/* Not inside a definition: Components is the workspace there, with
+              its own list one press away (All components). Not inside an
+              isolation either: the rail is about the subtree there, and a
+              library under it reads as part of what is isolated. Add and the
+              Assets tab still place components into it. */}
+          {inScene || editingDef !== null || subject === "isolation" ? null : (
+            <details className="rail-group" open={!componentsCollapsed}>
+              <summary
+                onClick={(e) => {
+                  // The native toggle is refused and the store answers instead: `open`
+                  // is a controlled prop here, so letting the browser flip the DOM
+                  // attribute would leave it disagreeing with React until some
+                  // unrelated render put it back.
+                  e.preventDefault();
+                  toggleComponents();
+                }}
+              >
+                <span className="rail-group-chevron" aria-hidden="true">
+                  <IconChevron />
                 </span>
+                <span className="file-section-label">Components</span>
+                {/* BOTH LISTS, because the count exists to say what a CLOSED group
+              holds and this group holds two lists: the authored definitions
+              and the code components the document actually places. Counting
+              only `defs` read "0" over seven visible rows in every project
+              that writes its components in code rather than authoring them
+              here, which is the common case. */}
+                <span className="file-section-count">
+                  {Object.keys(defs).length + usedComponents.length}
+                </span>
+                {/* NOT `.layer-flag`, which is what this was. That class rests at 0.28
+              outside a row that lifts it, and this button is not inside a row,
+              so the one way to make a definition from nothing sat permanently
+              dimmed with no hover that could reach it.
+              Both handlers matter: `stopPropagation` keeps the summary's React
+              toggle out of it, and `preventDefault` keeps the browser's own
+              summary activation out of it too. */}
                 <button
                   type="button"
-                  className="layer-flag"
-                  aria-label={`Place ${d.name}`}
-                  title="Place another one"
-                  onClick={() => store.placeComponent(d.id)}
+                  className="rail-group-action"
+                  data-testid="new-component"
+                  aria-label="New component"
+                  title="New component"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    store.createEmptyComponent("Component");
+                  }}
                 >
                   +
                 </button>
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-
-      <div className="file-section-label">{editingDef === null ? "Layers" : "Inside"}</div>
-      {/* THE WAY BACK OUT. Isolation scopes the outline to one subtree, and a
-          scoped list with no path above it reads as "the rest of my layers are
-          gone" — which is exactly what an author reports. Each crumb is a
-          button, so leaving is one click from any depth rather than N presses
-          of Escape. */}
-      {scene !== undefined && isolation !== null ? (
-        <nav className="isolation-crumbs" data-testid="isolation-crumbs">
-          <button type="button" className="crumb" onClick={() => store.exitIsolationAll()}>
-            {scene.name}
-          </button>
-          {crumbsFor(scene, isolation).map((id, i, all) => (
-            <button
-              key={id}
-              type="button"
-              className={`crumb${i === all.length - 1 ? " is-current" : ""}`}
-              aria-current={i === all.length - 1}
-              onClick={() => store.enterIsolation(id)}
-            >
-              {scene.layersById[id]?.label ?? id}
-            </button>
-          ))}
-        </nav>
-      ) : null}
-      {home === null ? null : (
-        <ul className="layer-list" data-testid="layer-list">
-          <LayerRows
-            // The CONTAINER, which is a definition while one is being edited.
-            // Every op the rows drive takes a container id, so the drag, the
-            // rename and the flags all work inside a definition unchanged.
-            scene={home}
-            containerId={editingDef ?? sceneId ?? ""}
-            // SCOPED to the isolated subtree's own children, so the outline
-            // says the same thing the stage does about what is being edited.
-            ids={rootIds}
-            depth={0}
-            parent={editingDef === null ? isolation : null}
-            query={trimmedQuery}
-            collapsed={collapsed}
-            onToggleCollapse={toggleCollapse}
-            onRowClick={rowClick}
-          />
-        </ul>
-      )}
+              </summary>
+              {Object.keys(defs).length === 0 ? null : (
+                <ul className="component-list" data-testid="component-list">
+                  {Object.values(defs).map((d) => (
+                    <li
+                      key={d.id}
+                      className={`component-row${d.id === editingDef ? " is-current" : ""}`}
+                    >
+                      {/* The four-diamond is the component family's own glyph, so it
+                  carries the family's accent like every other diamond. */}
+                      <span
+                        className="layer-kind is-component"
+                        aria-hidden="true"
+                      >
+                        {COMPONENT_ICON}
+                      </span>
+                      <button
+                        type="button"
+                        className="layer-name"
+                        aria-current={d.id === editingDef}
+                        // OPENS THE COMPONENT ITSELF: this row names a definition and
+                        // no layer inside it, so `editComponent` lands on the Studio.
+                        // Its interior is one hand-off further in.
+                        onClick={() =>
+                          store.editComponent(d.id === editingDef ? null : d.id)
+                        }
+                      >
+                        {d.name}
+                      </button>
+                      <span className="component-count" aria-hidden="true">
+                        {instancesOf(doc, d.id).length}
+                      </span>
+                      {/* Placing an instance is an INSERT: it lands an element at the
+                  playhead, and `insertContext` refuses every insert in the
+                  scene context. ABSENT rather than disabled, which is this
+                  panel's rule for a verb the current level cannot do at all:
+                  the store's refusal stays the backstop underneath it. */}
+                      {inScene ? null : (
+                        <button
+                          type="button"
+                          className="layer-flag"
+                          aria-label={`Place ${d.name}`}
+                          title="Place another one"
+                          onClick={() => store.placeComponent(d.id)}
+                        >
+                          +
+                        </button>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              )}
 
-      {/* Last, and below the layer tree: connecting an agent is about the
-          workspace, not the document being edited right now. */}
-      <McpSection />
+              {/* THE OTHER COMPONENT FAMILY, and the reason this section used to look
+          empty in a shot full of components. A definition above is authored
+          here and lives in `doc.components`; a row below is a component from
+          the author's own repo, placed as an `instance` layer, which nothing in
+          this chrome ever listed — so a shot built entirely from repo
+          components showed a header and nothing else.
+          A SEPARATE list, not merged into the one above: the two families are
+          different things (one can be entered and edited, one is a .tsx file
+          the author owns) and the rows do different things when clicked. */}
+              {usedComponents.length === 0 ? null : (
+                <ul
+                  className="component-list"
+                  data-testid="used-component-list"
+                >
+                  {usedComponents.map((used) => {
+                    // The registry's display name once it has loaded, the export name
+                    // parsed out of the id until then. Never a spinner and never an
+                    // empty row: the id always carries a usable name.
+                    const row = library.find((r) => r.id === used.component);
+                    const name = row?.name ?? instanceExportOf(used.component);
+                    // The ones in the CONTAINER the author is looking at. A count is
+                    // document-wide, but selecting reaches only what is in front of
+                    // them, so a row whose instances all live elsewhere does not
+                    // pretend the click did something.
+                    const here = used.layerIds.filter(
+                      (id) => home?.layersById[id] !== undefined,
+                    );
+                    return (
+                      <li
+                        key={used.component}
+                        className="component-row component-row--code"
+                      >
+                        <span
+                          className="layer-kind is-component"
+                          aria-hidden="true"
+                        >
+                          {kindIcon("instance")}
+                        </span>
+                        {/* OPENS THE COMPONENT, which is what a row naming a component
+                    should do — the definition row above opens one too. For this
+                    family that means the code studio: the source file on the
+                    left and a render of it on the right, because a code
+                    component's interior IS its source.
+                    NEVER DISABLED. Whether a shot happens to place this
+                    component in the container the author is standing in has
+                    nothing to do with whether its file can be opened. */}
+                        <button
+                          type="button"
+                          className="layer-name"
+                          // The module path, which is the "which file is this" this row
+                          // owes: it is a file in the author's own repo.
+                          title={used.component}
+                          onClick={() =>
+                            void store.openCodeComponent(used.component)
+                          }
+                        >
+                          {name}
+                        </button>
+                        {/* THE COUNT IS THE OTHER DOOR. It was the whole row's click
+                    before the code studio existed, and selecting the placements
+                    is still worth reaching — so it moved onto the number that
+                    names them rather than being lost. Disabled when they all
+                    live in another container, because selection reaches only
+                    what is in front of the author. */}
+                        <button
+                          type="button"
+                          className="component-count"
+                          aria-label={`Select the ${here.length} placed here`}
+                          title="Select this component's layers in the open container"
+                          disabled={here.length === 0}
+                          onClick={() => store.select(here)}
+                        >
+                          {used.layerIds.length}
+                        </button>
+                        {/* Same insert gate as a definition's `+` above, and the same
+                    verb the Add menu places registry components with. */}
+                        {inScene ? null : (
+                          <button
+                            type="button"
+                            className="layer-flag"
+                            aria-label={`Place ${name}`}
+                            title="Place another one"
+                            onClick={() =>
+                              void store
+                                .addInstanceLayer(used.component)
+                                .catch(() => {})
+                            }
+                          >
+                            +
+                          </button>
+                        )}
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+              {Object.keys(defs).length === 0 && usedComponents.length === 0 ? (
+                <div className="resource-empty">
+                  Nothing yet. Group layers into a component, or add one from
+                  the + menu.
+                </div>
+              ) : null}
+            </details>
+          )}
+        </>
+      </div>
     </div>
   );
 }
 
-function LayerRows({
+const OUTLINE_WINDOW_THRESHOLD = 60;
+
+interface LayerEntry {
+  layer: Layer3D;
+  /** Its index in the STORED sibling list (0 = the back), not its row. */
+  index: number;
+  parent: string | null;
+  depth: number;
+  siblingCount: number;
+  hasChildren: boolean;
+  open: boolean;
+}
+
+interface VirtualLayerInteraction {
+  tabIndex: number;
+  registerName(id: string, node: HTMLButtonElement | null): void;
+  onNameFocus(id: string): void;
+  onNameKeyDown(id: string, event: ReactKeyboardEvent<HTMLButtonElement>): void;
+  onRenameChange(id: string, active: boolean): void;
+  onDragChange(id: string | null): void;
+}
+
+/** A cell a host panel adds at the END of every row (the board's Layers tab
+ *  puts each layer's life bar there). The Files panel passes none, so its rows
+ *  are unchanged. */
+export type LayerRowTrailing = (layer: Layer3D) => React.ReactNode;
+
+/** Large outlines are flattened to the same visible order shift-selection
+ * uses, then windowed. Small trees keep the original nested DOM and guide
+ * rails exactly. */
+export function WindowedLayerRows(props: {
+  scene: LayerHome;
+  containerId: string;
+  ids: readonly string[];
+  parent: string | null;
+  query: string;
+  collapsed: ReadonlySet<string>;
+  onToggleCollapse: (id: string) => void;
+  onRowClick: (
+    id: string,
+    e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean },
+  ) => void;
+  onRowKeyMove: (fromId: string, toId: string, extend: boolean) => void;
+  trailing?: LayerRowTrailing;
+}) {
+  const entries = useMemo(
+    () =>
+      flattenLayerEntries(
+        props.scene,
+        props.ids,
+        props.parent,
+        props.collapsed,
+        props.query,
+      ),
+    [props.scene, props.ids, props.parent, props.collapsed, props.query],
+  );
+  const listRef = useRef<HTMLUListElement>(null);
+  const nameRefs = useRef(new Map<string, HTMLButtonElement>());
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [focusRequest, setFocusRequest] = useState<string | null>(null);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const virtual = entries.length > OUTLINE_WINDOW_THRESHOLD;
+  const range = useFixedVirtualWindow({
+    listRef,
+    scrollSelector: ".rail-scroll",
+    count: entries.length,
+    rowHeight: LAYER_ROW_H,
+    enabled: virtual,
+  });
+
+  const entryIndex = useMemo(
+    () =>
+      new Map(entries.map((entry, index) => [entry.layer.id, index] as const)),
+    [entries],
+  );
+  const effectiveActiveId =
+    activeId !== null && entryIndex.has(activeId)
+      ? activeId
+      : (entries[0]?.layer.id ?? null);
+  const registerName = useCallback(
+    (id: string, node: HTMLButtonElement | null): void => {
+      if (node === null) nameRefs.current.delete(id);
+      else nameRefs.current.set(id, node);
+    },
+    [],
+  );
+
+  useLayoutEffect(() => {
+    if (focusRequest === null) return;
+    const button = nameRefs.current.get(focusRequest);
+    if (button === undefined) return;
+    // The requested row is already pinned into the correct logical position.
+    // Let the browser reveal it, then focus without asking for a second scroll.
+    if (typeof button.scrollIntoView === "function") {
+      button.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+    button.focus({ preventScroll: true });
+    setFocusRequest(null);
+  }, [focusRequest]);
+
+  const focusEntry = (
+    fromId: string,
+    index: number,
+    extend: boolean,
+    select: boolean,
+  ): void => {
+    const target = entries[index];
+    if (target === undefined) return;
+    const id = target.layer.id;
+    if (select) props.onRowKeyMove(fromId, id, extend);
+    setActiveId(id);
+    setFocusRequest(id);
+  };
+
+  const onNameKeyDown = (
+    id: string,
+    event: ReactKeyboardEvent<HTMLButtonElement>,
+  ): void => {
+    const index = entryIndex.get(id);
+    if (index === undefined) return;
+    const entry = entries[index]!;
+    let target: number | null = null;
+    if (event.key === "ArrowDown")
+      target = Math.min(entries.length - 1, index + 1);
+    else if (event.key === "ArrowUp") target = Math.max(0, index - 1);
+    else if (event.key === "Home") target = 0;
+    else if (event.key === "End") target = entries.length - 1;
+    else if (event.key === "ArrowRight") {
+      if (entry.hasChildren && !entry.open && props.query.length === 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        props.onToggleCollapse(id);
+        return;
+      }
+      if (entry.hasChildren && entry.open)
+        target = Math.min(entries.length - 1, index + 1);
+    } else if (event.key === "ArrowLeft") {
+      if (entry.hasChildren && entry.open && props.query.length === 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        props.onToggleCollapse(id);
+        return;
+      }
+      if (entry.parent !== null) target = entryIndex.get(entry.parent) ?? null;
+    }
+    if (target === null || target === index) return;
+    event.preventDefault();
+    event.stopPropagation();
+    // Ctrl/Cmd moves focus without changing selection. Shift extends from the
+    // stable range anchor; an ordinary move selects and moves that anchor.
+    focusEntry(id, target, event.shiftKey, !event.ctrlKey && !event.metaKey);
+  };
+
+  const pinnedIndexes = [effectiveActiveId, renamingId, draggingId]
+    .map((id) => (id === null ? undefined : entryIndex.get(id)))
+    .filter((index): index is number => index !== undefined);
+  const spans = pinnedWindowSpans(range, entries.length, pinnedIndexes);
+  const virtualRows: React.ReactNode[] = [];
+  let cursor = 0;
+  for (const span of spans) {
+    if (span.start > cursor) {
+      virtualRows.push(
+        <li
+          key={`outline-gap-${cursor}-${span.start}`}
+          aria-hidden="true"
+          role="presentation"
+          data-outline-spacer="true"
+          style={{ height: (span.start - cursor) * LAYER_ROW_H }}
+        />,
+      );
+    }
+    for (let index = span.start; index < span.end; index += 1) {
+      const entry = entries[index]!;
+      virtualRows.push(
+        <LayerRow
+          key={entry.layer.id}
+          layer={entry.layer}
+          index={entry.index}
+          parent={entry.parent}
+          containerId={props.containerId}
+          hasChildren={entry.hasChildren && props.query.length === 0}
+          open={entry.open}
+          childRowBelow={entries[index + 1]?.parent === entry.layer.id}
+          mask={maskMarksOf(props.scene, entry.layer.id, entry.depth)}
+          onToggleCollapse={props.onToggleCollapse}
+          onRowClick={props.onRowClick}
+          {...(props.trailing === undefined ? {} : { trailing: props.trailing })}
+          tree={{
+            level: entry.depth + 1,
+            // Where the row SITS among its siblings, which is front first; the
+            // array index counts from the back.
+            position: entry.siblingCount - entry.index,
+            size: entry.siblingCount,
+          }}
+          interaction={{
+            tabIndex: entry.layer.id === effectiveActiveId ? 0 : -1,
+            registerName,
+            onNameFocus: setActiveId,
+            onNameKeyDown,
+            onRenameChange: (id, active) => setRenamingId(active ? id : null),
+            onDragChange: setDraggingId,
+          }}
+        />,
+      );
+    }
+    cursor = span.end;
+  }
+  if (cursor < entries.length) {
+    virtualRows.push(
+      <li
+        key={`outline-gap-${cursor}-${entries.length}`}
+        aria-hidden="true"
+        role="presentation"
+        data-outline-spacer="true"
+        style={{ height: (entries.length - cursor) * LAYER_ROW_H }}
+      />,
+    );
+  }
+
+  return (
+    <ul
+      ref={listRef}
+      className="layer-list"
+      data-testid="layer-list"
+      role="tree"
+    >
+      {!virtual ? <LayerRows {...props} depth={0} /> : virtualRows}
+    </ul>
+  );
+}
+
+export function LayerRows({
   scene,
   containerId,
   ids,
-  depth,
   parent,
   query,
   collapsed,
   onToggleCollapse,
   onRowClick,
+  trailing,
+  depth = 0,
 }: {
-  scene: { layersById: Record<string, Layer3D> };
+  scene: LayerHome;
   /** The scene OR component definition these layers live in. Every op the rows
    *  drive takes one, so a definition's interior is editable through exactly
    *  the same drag, rename and flag handlers. */
   containerId: string;
   ids: readonly string[];
-  depth: number;
   /** The layer these rows are children of, or null at the scene root. A drop
    *  BETWEEN rows lands here; a drop ON one lands inside that row. */
   parent: string | null;
   query: string;
   collapsed: ReadonlySet<string>;
   onToggleCollapse: (id: string) => void;
-  onRowClick: (id: string, e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }) => void;
+  onRowClick: (
+    id: string,
+    e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean },
+  ) => void;
+  trailing?: LayerRowTrailing;
+  depth?: number;
 }) {
   return (
     <>
-      {ids.map((id, index) => {
+      {frontFirst(ids).map(({ id, index }) => {
         const layer = scene.layersById[id];
         if (layer === undefined) return null;
         const children = layerChildren(layer);
         // A search hides a row only when NEITHER it nor anything below it
         // matches — hiding a matching layer because its group did not match
         // would make the search unable to find anything nested.
-        if (query.length > 0 && !subtreeMatches(scene, layer, query)) return null;
+        if (query.length > 0 && !subtreeMatches(scene, layer, query))
+          return null;
         // A SEARCH OVERRIDES A COLLAPSE: a match under a collapsed group must
         // still be findable, the same rule the subtree gate above states. The
         // one flattening in `flattenVisible` mirrors both, so a range select
@@ -288,7 +1242,6 @@ function LayerRows({
           <LayerRow
             key={id}
             layer={layer}
-            depth={depth}
             index={index}
             parent={parent}
             containerId={containerId}
@@ -300,21 +1253,38 @@ function LayerRows({
             // what is on screen, so the row simply does not offer one.
             hasChildren={children.length > 0 && query.length === 0}
             open={open}
+            // A search hides the chevron and still lists the matching
+            // children, and a parent matched by its own label may list none.
+            childRowBelow={
+              open &&
+              children.some((c) => {
+                const kid = scene.layersById[c];
+                return kid !== undefined && (query.length === 0 || subtreeMatches(scene, kid, query));
+              })
+            }
             onToggleCollapse={onToggleCollapse}
             onRowClick={onRowClick}
+            {...(trailing === undefined ? {} : { trailing })}
+            mask={maskMarksOf(scene, id, depth)}
+            tree={{ level: depth + 1 }}
           >
+            {/* Each row indents by its own `--depth` (set on its LI), in the
+                nested tree and the windowed list alike. The nesting `ul` only
+                draws the guide, see `.layer-children`, so the step
+                cannot be applied twice. */}
             {children.length > 0 && open ? (
-              <ul className="layer-children">
+              <ul className="layer-children" role="group">
                 <LayerRows
                   scene={scene}
                   containerId={containerId}
                   ids={children}
-                  depth={depth + 1}
                   parent={layer.id}
                   query={query}
                   collapsed={collapsed}
                   onToggleCollapse={onToggleCollapse}
                   onRowClick={onRowClick}
+                  {...(trailing === undefined ? {} : { trailing })}
+                  depth={depth + 1}
                 />
               </ul>
             ) : null}
@@ -325,6 +1295,84 @@ function LayerRows({
   );
 }
 
+/**
+ * THE OUTLINE'S CLICK POLICY, shared by every panel that lists layer rows
+ * (this one and the board's Layers tab): shift = range over the visible order,
+ * ctrl/meta = toggle, plain = select + anchor. The panel owns the anchor and
+ * the collapsed set; this only reads them.
+ */
+export function layerRowSelection(o: {
+  store: ShotEditorStore;
+  scene: { layersById: Record<string, Layer3D> } | null;
+  ids: readonly string[];
+  collapsed: ReadonlySet<string>;
+  query: string;
+  anchor: string | null;
+  setAnchor: (id: string) => void;
+}): {
+  rowClick: (id: string, e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }) => void;
+  rowKeyMove: (fromId: string, toId: string, extend: boolean) => void;
+} {
+  const { store, scene: home, ids: rootIds, collapsed, query: trimmedQuery, anchor, setAnchor } = o;
+  const rowClick = (
+    id: string,
+    e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean },
+  ): void => {
+    const selection = store.getState().selection;
+    if (e.shiftKey && anchor !== null && home !== null) {
+      // The range is over WHAT IS ON SCREEN — the same flattening the rows
+      // render from, so a collapsed group's invisible children are never
+      // swept into a selection the author cannot see.
+      const flat = flattenVisible(home, rootIds, collapsed, trimmedQuery);
+      const a = flat.indexOf(anchor);
+      const b = flat.indexOf(id);
+      if (a !== -1 && b !== -1) {
+        store.select(flat.slice(Math.min(a, b), Math.max(a, b) + 1));
+        store.revealSelection(id, false);
+        return;
+      }
+      // A stale anchor (deleted, scoped away) falls through to a plain click.
+    }
+    if (e.ctrlKey || e.metaKey) {
+      store.select(
+        selection.includes(id)
+          ? selection.filter((x) => x !== id)
+          : [...selection, id],
+      );
+      // Nothing when this click took the row OUT: `revealSelection` checks.
+      store.revealSelection(id, false);
+      setAnchor(id);
+      return;
+    }
+    store.select([id]);
+    store.revealSelection(id, true);
+    setAnchor(id);
+  };
+
+  /** Keyboard range navigation starts from the focused row when no pointer
+   * anchor exists, then keeps that same anchor while Shift extends/retracts.
+   * It operates over the complete visible flattening, not the mounted window. */
+  const rowKeyMove = (fromId: string, toId: string, extend: boolean): void => {
+    if (home === null) return;
+    const flat = flattenVisible(home, rootIds, collapsed, trimmedQuery);
+    if (!extend) {
+      store.select([toId]);
+      store.revealSelection(toId, true);
+      setAnchor(toId);
+      return;
+    }
+    const candidate =
+      anchor !== null && flat.includes(anchor) ? anchor : fromId;
+    const from = flat.indexOf(candidate);
+    const to = flat.indexOf(toId);
+    if (from === -1 || to === -1) return;
+    store.select(flat.slice(Math.min(from, to), Math.max(from, to) + 1));
+    store.revealSelection(toId, false);
+    setAnchor(candidate);
+  };
+  return { rowClick, rowKeyMove };
+}
+
 /**
  * The row order AS RENDERED — same recursion, same predicates as `LayerRows`
  * (subtree match, collapse-with-search-override) — for the shift range.
@@ -336,36 +1384,76 @@ function flattenVisible(
   collapsed: ReadonlySet<string>,
   query: string,
 ): string[] {
-  const out: string[] = [];
-  for (const id of ids) {
+  return flattenLayerEntries(scene, ids, null, collapsed, query).map(
+    (entry) => entry.layer.id,
+  );
+}
+
+function flattenLayerEntries(
+  scene: { layersById: Record<string, Layer3D> },
+  ids: readonly string[],
+  parent: string | null,
+  collapsed: ReadonlySet<string>,
+  query: string,
+  depth = 0,
+): LayerEntry[] {
+  const out: LayerEntry[] = [];
+  for (const { id, index } of frontFirst(ids)) {
     const layer = scene.layersById[id];
     if (layer === undefined) continue;
     if (query.length > 0 && !subtreeMatches(scene, layer, query)) continue;
-    out.push(id);
     const children = layerChildren(layer);
     const open = !collapsed.has(id) || query.length > 0;
-    if (children.length > 0 && open) out.push(...flattenVisible(scene, children, collapsed, query));
+    out.push({
+      layer,
+      index,
+      parent,
+      depth,
+      siblingCount: ids.length,
+      hasChildren: children.length > 0,
+      open,
+    });
+    if (children.length > 0 && open) {
+      out.push(
+        ...flattenLayerEntries(
+          scene,
+          children,
+          layer.id,
+          collapsed,
+          query,
+          depth + 1,
+        ),
+      );
+    }
   }
   return out;
 }
 
-/** The isolated layer and every ancestor above it, outermost first. The path
- *  the breadcrumb walks, and the reason entering a nested subtree is reversible
- *  one level at a time. */
-function crumbsFor(scene: { layersById: Record<string, Layer3D> }, id: string): string[] {
-  const out: string[] = [];
-  let at: string | null = id;
-  for (let i = 0; at !== null && i <= Object.keys(scene.layersById).length; i += 1) {
-    out.push(at);
-    at = parentOf(scene as never, at);
-  }
-  return out.reverse();
+/**
+ * What a drag from `grabbed` carries: the whole selection when that row is part
+ * of it, otherwise just that row — Figma's rule, and the only one that does not
+ * lie about what is selected.
+ *
+ * Order is NOT decided here: `moveLayersTo` sorts into paint order (the walk)
+ * against the container it is moving within. Doing it there and not here means
+ * an MCP or menu caller gets the same guarantee.
+ */
+function dragPayload(
+  state: { selection: readonly string[] },
+  grabbed: string,
+): string[] {
+  return state.selection.includes(grabbed) ? [...state.selection] : [grabbed];
 }
 
 /** Which third of a row the pointer is over. The middle is the biggest, so
  *  "drop it in there" is the easy gesture and reordering is the deliberate
- *  one — Figma's proportions, and for the same reason. */
-function dropZone(e: { clientY: number }, row: HTMLElement): "before" | "into" | "after" {
+ *  one: Figma's proportions, and for the same reason. "before" and "after"
+ *  name where the line is DRAWN, above and below the row, which in a front
+ *  first outline is in front of it and behind it. */
+function dropZone(
+  e: { clientY: number },
+  row: HTMLElement,
+): "before" | "into" | "after" {
   const rect = row.getBoundingClientRect();
   const t = (e.clientY - rect.top) / Math.max(1, rect.height);
   if (t < 0.28) return "before";
@@ -385,48 +1473,99 @@ function subtreeMatches(
   });
 }
 
-function LayerRow({
+export function LayerRow({
   layer,
-  depth,
   index,
   parent,
   containerId,
   hasChildren,
   open,
+  childRowBelow,
   onToggleCollapse,
   onRowClick,
+  trailing,
   children,
+  tree,
+  interaction,
+  mask,
 }: {
   layer: Layer3D;
-  depth: number;
   index: number;
   parent: string | null;
   /** Scene or definition — see `LayerRows`. */
   containerId: string;
+  /** Offers the disclosure chevron, which a search takes away. */
   hasChildren: boolean;
   open: boolean;
+  /** The row directly below this one is one of its own children, so the
+   *  lower drop line sits over that child, not over the next row out. */
+  childRowBelow: boolean;
   onToggleCollapse: (id: string) => void;
-  onRowClick: (id: string, e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }) => void;
-  children: React.ReactNode;
+  onRowClick: (
+    id: string,
+    e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean },
+  ) => void;
+  /** A host panel's cell after the flags, see `LayerRowTrailing`. */
+  trailing?: LayerRowTrailing;
+  children?: React.ReactNode;
+  /** `level` is 1-based (it is `aria-level`), so the depth is one less. */
+  tree: { level: number; position?: number; size?: number };
+  interaction?: VirtualLayerInteraction;
+  /** The row's mask icon, badge and bracket slices (gap 7), see maskMarks. */
+  mask?: MaskMarks;
 }) {
   const store = useStore();
-  const selected = useShotEditor((s) => s.selection.includes(layer.id));
+  const selected = useShotEditor((s) =>
+    selectionMembership(s.selection).has(layer.id),
+  );
+  // The drawer placed this WITHOUT selecting it ("Use as background"), so the
+  // row lights once to show where it went. The next selection clears it.
+  const justPlaced = useShotEditor((s) => s.justPlaced === layer.id);
   // Two primitives, never the record: `useShotEditor` compares with `Object.is`
   // per notification, so returning a slice of the map would re-render every row
   // on every unrelated change.
   const triangles = useShotEditor((s) => s.meshTriangles[layer.id]);
-  const sceneTriangles = useShotEditor((s) => sumTriangles(s.meshTriangles));
-  const overBudget = triangles !== undefined && sceneTriangles > TRIANGLE_SOFT_BUDGET;
+  const sceneTriangles = useShotEditor((s) =>
+    sumTrianglesCached(s.meshTriangles),
+  );
+  const overBudget =
+    triangles !== undefined && sceneTriangles > TRIANGLE_SOFT_BUDGET;
   const [renaming, setRenaming] = useState(false);
+  // A viewer cannot restack, so the row does not lift.
+  const readOnly = useShotEditor((s) => s.readOnly);
   const [over, setOver] = useState<"before" | "into" | "after" | null>(null);
   const menu = useContextMenu();
+  /** The lower line of an EXPANDED parent sits over its first child row, the
+   *  frontmost, so it drops into the parent at the front (founder decision 7),
+   *  and it is drawn at the children's indent to say so. Expanded means a
+   *  child row is on screen under it, a search's forced open included. */
+  const intoFront = childRowBelow;
+  const overClass =
+    over === null
+      ? ""
+      : over === "after" && intoFront
+        ? " is-drop-inside"
+        : ` is-drop-${over}`;
 
   return (
-    <li className="layer-item">
+    <li
+      className="layer-item"
+      role="treeitem"
+      // On the LI and not the row, so a nested `.layer-children` inherits its
+      // parent's depth and draws the guide at the parent's indent.
+      // `--mask-inset` rides the same LI, so the nested guide moves with it.
+      style={{ "--depth": tree.level - 1, "--mask-inset": `${mask?.inset ?? 0}px` } as CSSProperties}
+      aria-level={tree.level}
+      {...(tree.position === undefined
+        ? {}
+        : { "aria-posinset": tree.position })}
+      {...(tree.size === undefined ? {} : { "aria-setsize": tree.size })}
+      {...(hasChildren ? { "aria-expanded": open } : {})}
+      aria-selected={selected}
+    >
       {menu.menu}
       <div
-        className={`layer-row${selected ? " is-selected" : ""}${over === null ? "" : ` is-drop-${over}`}`}
-        style={{ paddingLeft: 8 + depth * 12 }}
+        className={`layer-row${selected ? " is-selected" : ""}${justPlaced ? " is-just-placed" : ""}${mask?.off === true ? " is-mask-off" : ""}${overClass}`}
         data-layer={layer.id}
         // The SAME menu the stage opens, from the same builder. A row and a
         // click on the canvas are two ways of pointing at one layer, and a
@@ -434,36 +1573,95 @@ function LayerRow({
         // having only one of them.
         onContextMenu={(e) => {
           e.preventDefault();
+          interaction?.onNameFocus(layer.id);
           // Select first, unless the row is already part of the selection — in
           // which case the whole selection stands and the menu acts on all of
           // it. The stage's `onContextMenu` policy, deliberately identical.
           const state = store.getState();
-          const ids = state.selection.includes(layer.id) ? state.selection : [layer.id];
+          const ids = state.selection.includes(layer.id)
+            ? state.selection
+            : [layer.id];
           if (!state.selection.includes(layer.id)) store.select([layer.id]);
           const next = store.getState();
-          menu.open({ x: e.clientX, y: e.clientY }, layerMenuEntries(store, next, menuTargetsFor(next, ids)));
+          menu.open(
+            { x: e.clientX, y: e.clientY },
+            // Rename here is the row's own inline edit, the one F2 opens.
+            layerMenuEntries(store, next, menuTargetsFor(next, ids), {
+              subject: layer.id,
+              onRename: () => {
+                interaction?.onRenameChange(layer.id, true);
+                setRenaming(true);
+              },
+            }),
+          );
         }}
+        // Any focusable control owns this row while it is active. Pinning only
+        // the name would still let a scroll unmount the disclosure or flag a
+        // keyboard user was operating.
+        onFocusCapture={() => interaction?.onNameFocus(layer.id)}
         // THE OUTLINE DRAG. Dropping on the MIDDLE of a row puts the layer
-        // inside it; dropping near an edge puts it beside it, among that row's
-        // own siblings. Both go through `moveLayer`, which re-bases the
-        // transform so the tree changes and the picture does not.
-        draggable
-        onDragStart={(e) => e.dataTransfer.setData("text/plain", layer.id)}
+        // inside it, at the front of its children (their top row); dropping
+        // near an edge puts it beside it, among that row's own siblings, at the
+        // gap the line shows. The rows are FRONT FIRST, so the line ABOVE a row
+        // is in front of it (stored index + 1) and the line BELOW it is behind
+        // it (its own index). The lower line of an EXPANDED parent sits over
+        // its first child row, so it means "into it, at the front" (Figma's
+        // rule, founder decision 7), not "behind its whole subtree". All go
+        // through `moveLayer`, which re-bases the transform on a reparent so
+        // the layer keeps its place in the frame; the list is paint order, so
+        // a drop is a paint edit.
+        //
+        // THE WHOLE SELECTION TRAVELS, when the grabbed row is part of it.
+        // Dragging one of three selected rows and watching one move is the
+        // gesture lying about what is selected. `moveLayersTo` lands them
+        // together at the gap, in the order they painted in.
+        draggable={!readOnly}
+        onDragStart={(e) => {
+          e.dataTransfer.setData(
+            "text/plain",
+            dragPayload(store.getState(), layer.id).join("\n"),
+          );
+          interaction?.onDragChange(layer.id);
+        }}
+        onDragEnd={() => interaction?.onDragChange(null)}
         onDragOver={(e) => {
           e.preventDefault();
-          setOver(dropZone(e, e.currentTarget));
+          const zone = dropZone(e, e.currentTarget);
+          // REFUSE BEFORE THE DROP, not after. A leaf cannot hold children
+          // (`canHoldChildren` — the schema's rule, not the panel's), so the
+          // into-zone shows the not-allowed cursor and paints no ring rather
+          // than accepting a gesture whose only outcome is an error strip.
+          //
+          // NAMED CEILING: this is the only refusal expressible here. A cycle
+          // ("inside itself") needs the dragged ids, and `dataTransfer` data is
+          // unreadable during dragover by spec, so cycles stay drop-time
+          // refusals — `moveLayer` still produces them and `sayRefusal` still
+          // shows them.
+          const refused = zone === "into" && !canHoldChildren(layer);
+          e.dataTransfer.dropEffect = refused ? "none" : "move";
+          setOver(refused ? null : zone);
         }}
         onDragLeave={() => setOver(null)}
         onDrop={(e) => {
           e.preventDefault();
           const zone = dropZone(e, e.currentTarget);
           setOver(null);
-          const from = e.dataTransfer.getData("text/plain");
-          if (from.length === 0 || from === layer.id) return;
-          if (zone === "into") store.moveLayerTo(from, { parent: layer.id });
-          else store.moveLayerTo(from, { parent, index: zone === "before" ? index : index + 1 });
+          const ids = e.dataTransfer
+            .getData("text/plain")
+            .split("\n")
+            .filter((id) => id.length > 0);
+          interaction?.onDragChange(null);
+          if (ids.length === 0 || ids.includes(layer.id)) return;
+          if (zone === "into" || (zone === "after" && intoFront))
+            store.moveLayersTo(ids, { parent: layer.id });
+          else
+            store.moveLayersTo(ids, {
+              parent,
+              index: zone === "before" ? index + 1 : index,
+            });
         }}
       >
+        {mask === undefined ? null : <MaskBracket segments={mask.segments} base="var(--space-6)" />}
         {/* The disclosure chevron, a SEPARATE button so the name button's
             textContent stays the label alone. Leaf rows get a spacer, so the
             kind icons line up whether or not a row can fold. */}
@@ -483,8 +1681,14 @@ function LayerRow({
         {/* OUTSIDE the name button, never inside it: the button's textContent is
             the layer's label and nothing else — filePanel.test.tsx compares it
             by equality, and the label is also what a screen reader announces. */}
-        <span className="layer-kind" aria-hidden="true">
-          {kindIcon(layer.kind)}
+        <span
+          className={`layer-kind${mask?.icon === "mask" ? " is-mask" : isComponentGlyph(layer) && mask?.icon == null ? " is-component" : ""}`}
+          aria-hidden="true"
+        >
+          {/* Keyed on the THING, not the kind: a Box row shows a box, an
+              emitter row its spark — the seam the shape-as-mesh decision must
+              never leak (basics plan, Part F). */}
+          {mask?.icon == null ? iconFor(layer) : MASK_ICON}
         </span>
         {renaming ? (
           <input
@@ -495,25 +1699,63 @@ function LayerRow({
             onBlur={(e) => {
               store.renameLayer(layer.id, e.target.value);
               setRenaming(false);
+              interaction?.onRenameChange(layer.id, false);
             }}
             onKeyDown={(e) => {
               if (e.key === "Enter") e.currentTarget.blur();
-              if (e.key === "Escape") setRenaming(false);
+              if (e.key === "Escape") {
+                setRenaming(false);
+                interaction?.onRenameChange(layer.id, false);
+              }
             }}
           />
         ) : (
           <button
             type="button"
             className="layer-name"
+            ref={(node) => interaction?.registerName(layer.id, node)}
+            {...(interaction === undefined
+              ? {}
+              : { tabIndex: interaction.tabIndex })}
             // The panel owns the click policy (shift = range over the visible
             // order, ctrl/meta = toggle, plain = select + anchor) because only
             // it knows the flattened row order a range is measured over.
             onClick={(e) => onRowClick(layer.id, e)}
-            onDoubleClick={() => setRenaming(true)}
+            onFocus={() => interaction?.onNameFocus(layer.id)}
+            onKeyDown={(e) => {
+              if (e.key === "F2") {
+                e.preventDefault();
+                e.stopPropagation();
+                if (store.viewOnly()) return;
+                interaction?.onRenameChange(layer.id, true);
+                setRenaming(true);
+                return;
+              }
+              interaction?.onNameKeyDown(layer.id, e);
+            }}
+            onDoubleClick={() => {
+              if (store.viewOnly()) return;
+              interaction?.onRenameChange(layer.id, true);
+              setRenaming(true);
+            }}
           >
             {layer.label}
           </button>
         )}
+        {/* The mask's mode, a sibling of the name for the kind icon's reason.
+            In the windowed list a row is one fixed height, so the empty-run
+            hint rides the badge's title there instead of its own line. */}
+        {mask?.badge == null ? null : (
+          <span
+            className="mask-badge"
+            title={mask.empty && interaction !== undefined ? NO_CONTENT_HINT : mask.badge}
+          >
+            {mask.badge}
+          </span>
+        )}
+        {/* Who else holds this layer (Paper page 21), a dot each. */}
+        <PeerDots at={(p) => p.sel.includes(layer.id)} />
+        <LayerMarks layer={layer} />
         {/* The model's cost, for the layers that HAVE one. A sibling span for
             the kind icon's reason: `layer-name`'s textContent is the label and
             nothing else. Absent until the model has loaded, and absent forever
@@ -523,17 +1765,23 @@ function LayerRow({
           <span
             className={`layer-tris${overBudget ? " is-over-budget" : ""}`}
             aria-hidden="true"
-            title={overBudget ? sceneBudgetWarning(sceneTriangles) : `${triangles.toLocaleString()} triangles`}
+            title={
+              overBudget
+                ? sceneBudgetWarning(sceneTriangles)
+                : `${triangles.toLocaleString()} triangles`
+            }
           >
             {formatTriangles(triangles)}
           </span>
         )}
-        {/* The hover-eye and the lock. `aria-pressed` rather than a checkbox
-            because they are toggles on a row, and a screen reader should hear
-            the layer's name with them. */}
+        {/* The eye and the lock, VISIBLE AT REST in the tertiary ink (Paper's
+            layer rows), so a row's hidden and locked state reads without a
+            hover. `aria-pressed` rather than a checkbox because they are
+            toggles on a row, and a screen reader should hear the layer's name
+            with them. */}
         <button
           type="button"
-          className="layer-flag"
+          className="layer-flag is-eye"
           aria-pressed={layer.hidden === true}
           aria-label={`${layer.hidden === true ? "Show" : "Hide"} ${layer.label}`}
           onClick={() => {
@@ -545,7 +1793,7 @@ function LayerRow({
         </button>
         <button
           type="button"
-          className="layer-flag"
+          className="layer-flag is-lock"
           aria-pressed={layer.locked === true}
           aria-label={`${layer.locked === true ? "Unlock" : "Lock"} ${layer.label}`}
           onClick={() => {
@@ -555,10 +1803,12 @@ function LayerRow({
         >
           {layer.locked === true ? LOCK_ICON : UNLOCK_ICON}
         </button>
+        {trailing?.(layer)}
       </div>
+      {mask?.empty === true && interaction === undefined ? (
+        <div className="layer-mask-hint">{NO_CONTENT_HINT}</div>
+      ) : null}
       {children}
     </li>
   );
 }
-
-