@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/InspectorPanel.tsx

@@ -1,67 +1,220 @@
-// The right rail: Design when a layer is selected, Scene when nothing is.
+// The right rail: Design when a layer is selected, the container when nothing is.
 //
-// ── TWO MODE BITS, AND THE TAB ONLY MOVES ONE ───────────────────────────
+// ── THE RAIL'S SUBJECT FOLLOWS THE CONTEXT BIT ──────────────────────────
 //
-// Clicking these tabs sets `inspectorMode`, which is a VIEW choice. It does NOT
-// set `animateMode`, which is a BEHAVIOUR choice and belongs to ⇧A alone.
-// Collapsing them would mean that looking at the blocks silently armed block
-// authoring on the next canvas drag — a data-corrupting surprise dressed as a
-// convenience.
+// With an empty selection this panel used to mount the same four sections in
+// BOTH contexts — the shot, its camera, its post stack and its transition — all
+// of them reading `state.sceneId`, which is derived from the playhead. So in the
+// scene context the rail described whichever shot the playhead happened to be
+// over and changed under the author on every scrub across a cut, while the
+// document's own fields (name, size, rate) had no panel anywhere in the chrome.
+// Every other panel in this shell already branches on `state.enteredScene`;
+// this one did not, which is the whole of that defect.
 //
-// The reverse dependency DOES exist and is deliberate: turning animate ON moves
-// the tab to Animate, because the author is about to author blocks and wants to
-// see them. One way only.
-import { SegmentedControl } from "@dailies-studio/ui";
-import { useShotEditor, useStore } from "../../state/context.js";
+// The split is by WHAT THE SUBJECT IS, not by taste, and `layout.ts` states
+// it once for both contexts: Camera, Project, Shot, Blur, Postprocessing. The
+// one difference is the SEAM. The project context's shot is "Shot &
+// transition", because a transition is a property of the join between two
+// shots and that join is drawn there; inside a shot the strip is gone and the
+// shot after it is off screen, so the shot section there holds the shot alone.
+//
+// ── ONE PANEL, DRIVEN BY WHAT IS FOCUSED — THE TABS ARE GONE ────────────
+//
+// There used to be a Design/Animate segmented control here and an
+// `inspectorMode` bit behind it. It made sense when animation WAS blocks: two
+// disjoint vocabularies, two faces. It stopped making sense when keyframes
+// became the lead system, because a keyframe is not a second mode of a layer —
+// it is a value of one of the design properties, authored from a diamond that
+// sits in the Design row itself. An author keyframing opacity had to look at
+// the opacity field on one tab and its easing on the other.
+//
+// So the rail is now: a FOCUSED-OBJECT SLOT at the top, then the design stack.
+// At most one object is focused — the store already enforces that pairwise
+// (selecting a camera move clears the keyframe and the marker, and so on) — and the
+// resolution order below matches `deleteSelection`'s subject ladder exactly, so
+// the panel and the Delete key can never be looking at two different things.
+//
+//   marker    -> REPLACES the panel (it has no layer subject at all)
+//   keyframe  -> KeyframeSection on top, design stack below
+//   camera    -> ShotSection on top, container sections below
+//   none      -> the stack alone
+//
+// STACK, NEVER REPLACE, for everything but the marker: hiding the Transform
+// field whose track the focused diamond belongs to would hide the one control
+// the author reaches for next. The marker is the exception because it has no
+// layer behind it, and the store does not clear `selection` when one is picked
+// — so stacking there would show design sections for layers nobody is looking
+// at.
+//
+// ── ⇧A SURVIVES, AS THE BEHAVIOUR BIT IT ALWAYS WAS ────────────────────
+//
+// `animateMode` is NOT the deleted tab. It is record mode: while it is on, an
+// edit writes keyframes at the playhead instead of moving the layer's base
+// value. It is bound to ⇧A and keeps its armed toolbar button. What it lost is
+// the line that also moved the tab — there is no tab to move. Its feedback is
+// the diamonds that appear in the Design rows and the dock.
+//
+// ── THE PANEL OWNS TWO THINGS NO SECTION CAN OWN ───────────────────────
+//
+// The SUBJECT KEY (`subjectKey` below) and the STACK ITSELF. Both are
+// properties of the selection as a whole, so a section asking them of itself
+// would be twenty-one sections each answering separately — and the two failures
+// they close are exactly the failures of a panel that never asked: widget state
+// that outlived its subject, and live controls in front of a layer none of them
+// can reach.
+//
+// WHICH sections and in WHAT ORDER is `layout.ts`'s table, not this file's JSX,
+// where it is one `Record` over the schema's own union and a contract test can
+// read it. It is the CEILING and not the mount: seven sections still refuse a
+// selection whose kind the table declares them for, on a count, an ordering or
+// a document question that a table keyed by kind has no business restating.
+// `sectionsFor`'s own doc names all seven with their exact conditions.
+import type { ComponentType } from "react";
+import { FieldLabels, PanelBoundary } from "@dailies-studio/ui";
+import { useShotEditor } from "../../state/context.js";
 import { useSelectedLayers } from "./useDocWrite.js";
 import { TransformSection } from "./design/TransformSection.js";
+import { MaskSection } from "./design/MaskSection.js";
+import { SplineFollowSection } from "./design/SplineFollowSection.js";
 import { AppearanceSection } from "./design/AppearanceSection.js";
+import { TimeSection } from "./TimeSection.js";
 import { FillSection } from "./design/FillSection.js";
 import { StrokeSection } from "./design/StrokeSection.js";
 import { ShadowSection } from "./design/ShadowSection.js";
 import { CornerSection } from "./design/CornerSection.js";
 import { HtmlSection } from "./design/HtmlSection.js";
-import { TextStaggerSection, TypographySection } from "./design/TypographySection.js";
+import { TextFillSection, TypographySection } from "./design/TypographySection.js";
 import { MeshSection } from "./design/MeshSection.js";
+import { MaterialSection } from "./design/MaterialSection.js";
+import { DeviceSection } from "./design/DeviceSection.js";
 import { ClonerSection } from "./design/ClonerSection.js";
 import { MediaSection } from "./design/MediaSection.js";
+import { PlateStyleSection } from "./design/PlateStyleSection.js";
 import { InstanceSection } from "./design/InstanceSection.js";
 import { ComponentSection } from "./design/ComponentSection.js";
+import { DefinitionSection } from "./design/DefinitionSection.js";
 import { SceneSection } from "./scene/SceneSection.js";
+import { SceneDocSection } from "./scene/SceneDocSection.js";
+import { ShotTransitionSection, StoryboardCutSection } from "./scene/TransitionSection.js";
+// A board card's section rides in the board's chunk, and the two template
+// sections are chunks of their own fetched at idle (app/lazySurfaces.tsx).
+import { MakeItYoursSection, PresetsSection, StoryboardReferenceSection, TemplateFieldSection } from "../../app/lazySurfaces.js";
 import { CameraSection } from "./scene/CameraSection.js";
-import { EffectsSection } from "./scene/EffectsSection.js";
-import { TransitionSection } from "./scene/TransitionSection.js";
-import { InOutPresets } from "./animate/InOutPresets.js";
-import { DuringBlocks } from "./animate/DuringBlocks.js";
-import { BlockTiming } from "./animate/BlockTiming.js";
-import { ResolvedChannels } from "./animate/ResolvedChannels.js";
+import { BlurSection, PostprocessingSection } from "./scene/EffectsSection.js";
 import { ShotSection } from "./animate/ShotSection.js";
 import { MarkerSection } from "./MarkerSection.js";
-import { CAMERA_ROW_ID } from "../timeline/model.js";
+import { KeyframeSection } from "./KeyframeSection.js";
+import { InspectorHead } from "./InspectorHead.js";
+import { CodeDefaultsPanel, CodeSubjectHead } from "../code/CodeDefaultsPanel.js";
+import { ComponentActions, ComponentHistory } from "../studio/ComponentSidePanel.js";
+import { ComponentOriginPanel, InTheStudioBlock, ThisUseBlock, ThisUsePanel } from "../studio/ThisUsePanel.js";
+import {
+  componentEditOpen,
+  componentsSubject,
+  layerUseKey,
+  sameComponent,
+  usesViewOf,
+  workspaceOf,
+} from "../../state/workspace.js";
+import { CONTAINER_LAYOUT, sectionsFor } from "./layout.js";
+import type { ContainerSectionId, ContainerSubject, SectionId } from "./layout.js";
+
+/** The Studio face's selection: none (see `studioFace`). One array, so the
+ *  panel's memoised readers see the same empty selection every render. */
+const NO_LAYERS: ReturnType<typeof useSelectedLayers> = [];
+
+/**
+ * The section id -> component map, and the only place the two vocabularies
+ * meet.
+ *
+ * A `Record` over `SectionId`, so a section named in `SECTION_ORDER` with no
+ * component behind it does not compile — the table there and this registry
+ * cannot drift into a layout that asks for a section this file cannot render.
+ */
+const SECTIONS: Record<SectionId, ComponentType> = {
+  mask: MaskSection,
+  transform: TransformSection,
+  appearance: AppearanceSection,
+  time: TimeSection,
+  presets: PresetsSection,
+  mesh: MeshSection,
+  material: MaterialSection,
+  device: DeviceSection,
+  instance: InstanceSection,
+  component: ComponentSection,
+  cloner: ClonerSection,
+  media: MediaSection,
+  plateStyle: PlateStyleSection,
+  textFill: TextFillSection,
+  fill: FillSection,
+  stroke: StrokeSection,
+  corner: CornerSection,
+  shadow: ShadowSection,
+  typography: TypographySection,
+  html: HtmlSection,
+  templateField: TemplateFieldSection,
+  splineFollow: SplineFollowSection,
+};
+
+/** The container section id -> component map. A `Record` over the union, for
+ *  `SECTIONS`' reason: a layout naming an id with no component does not
+ *  compile. */
+const CONTAINER_SECTIONS: Record<ContainerSectionId, ComponentType> = {
+  project: SceneDocSection,
+  makeItYours: MakeItYoursSection,
+  shot: SceneSection,
+  shotTransition: ShotTransitionSection,
+  camera: CameraSection,
+  blur: BlurSection,
+  postprocessing: PostprocessingSection,
+  definition: DefinitionSection,
+  storyboardReference: StoryboardReferenceSection,
+  storyboardCut: StoryboardCutSection,
+};
 
 export function InspectorPanel() {
-  const store = useStore();
   const doc = useShotEditor((s) => s.doc);
-  const mode = useShotEditor((s) => s.inspectorMode);
-  // The camera's row holds SHOTS, not blocks, and a shot belongs to the scene
-  // rather than to any layer. So it is the one Animate subject that does not
-  // come from the selection, and it wins: a bar the author just clicked is what
-  // they are looking at.
+  // The Field labels pref (Preferences > Inspector): every number field in
+  // the inspector shows its glyph, or its full name above the pill. Only the
+  // inspector provides it, so toolbar fields keep their glyphs.
+  const fieldLabels = useShotEditor((s) => s.fieldLabels);
+  // A camera move belongs to the scene rather than to any layer. So it is the
+  // one focused subject that does not come from the selection, and it wins: a
+  // bar the author just clicked is what they are looking at.
   //
   // It RESOLVES THE SHOT rather than testing the row id, because this branch
   // replaces the whole tab: a focus that ShotSection cannot resolve would render
-  // the Animate tab as literally nothing, no placeholder and no layer sections.
+  // the top slot as a heading over nothing, with no shot behind it.
   // Two ways to get there, both reachable — focusing a bar in one scene and
   // scrubbing into another (the panel reads the PLAYHEAD's scene), and undoing
   // the ⇧C that created the shot the focus points at.
   const cameraShot = useShotEditor((s) => {
-    const focused = s.selectedBlock;
-    if (focused === null || focused.layerId !== CAMERA_ROW_ID || focused.sceneId !== s.sceneId) return false;
-    return s.doc?.scenesById[focused.sceneId]?.shots.some((shot) => shot.id === focused.blockId) ?? false;
+    const focused = s.selectedMove;
+    if (focused === null || focused.sceneId !== s.sceneId) return false;
+    return s.doc?.scenesById[focused.sceneId]?.shots.some((shot) => shot.id === focused.shotId) ?? false;
   });
-  const layers = useSelectedLayers();
+  // ON COMPONENTS' PREVIEW TAB THE SUBJECT IS THE DEFINITION, whatever is
+  // selected inside it: a selection carried over from Edit, or a click on the
+  // subject in the hole, would otherwise swap the definition's published
+  // surface for one layer's sections. The Edit tab is the full inspector (a
+  // selected layer's sections, the definition's with nothing selected).
+  // `InspectorHead` reads the same rule.
+  const studioFace = useShotEditor(
+    (s) => workspaceOf(s) === "components" && s.codeComponent === null && !componentEditOpen(s),
+  );
+  /** A definition open in Components, on either tab. */
+  const defOpen = useShotEditor(
+    (s) => workspaceOf(s) === "components" && s.codeComponent === null && s.editingDef !== null,
+  );
+  const selectedLayers = useSelectedLayers();
+  const layers = studioFace ? NO_LAYERS : selectedLayers;
+  // THE BOARD IS A SUBJECT OF ITS OWN, above the layer selection: the shell
+  // still holds a layer selection under the board, but nothing on screen is
+  // that layer, and the head and the stack must describe what is on screen.
+  const storyboardOpen = useShotEditor((s) => s.storyboardOpen);
+  const storyboardKey = useShotEditor((s) => s.storyboardSelection.join(","));
   // THE FIRST SUBJECT, above the mode fork and above the selection. It matches
-  // `deleteSelection`'s order — marker, then block, then layers — so the panel
+  // `deleteSelection`'s order — marker, then camera move, then layers — so the panel
   // and the Delete key can never be looking at two different things. A marker
   // is neither a design property nor an animation, so it replaces the body
   // rather than living in one of the tabs.
@@ -70,109 +223,240 @@ export function InspectorPanel() {
   // the camera branch below does: this replaces the whole panel, so a selection
   // pointing at a marker that is gone would render the rail as literally
   // nothing. Undoing the `M` that created it is the one-keystroke way there.
-  const markerSelected = useShotEditor(
-    (s) => s.selectedMarker !== null && (s.doc?.markers ?? []).some((m) => m.id === s.selectedMarker),
+  //
+  // Returns the ID and not a boolean, because it is also this branch's remount
+  // key — see `subjectKey`.
+  const markerId = useShotEditor((s) =>
+    s.selectedMarker !== null && (s.doc?.markers ?? []).some((m) => m.id === s.selectedMarker)
+      ? s.selectedMarker
+      : null,
+  );
+  // ── THE ONE KEY THAT KILLS WIDGET-LOCAL STALENESS ──────────────────────
+  //
+  // Deriving the panel is already live: nothing here is memoized, so a
+  // document edit repaints every row. What is NOT live is the state the shared
+  // widgets keep INSIDE themselves, which React happily carries across a
+  // selection change because neither the element type nor its position moved:
+  //
+  //   ColorPicker's `picked` resyncs only when `value` changes IDENTITY, so
+  //     selecting a second layer whose fill is the same hex string never
+  //     resyncs the square, the hue bar or the alpha bar;
+  //   NumberField's `draft` survives while its input holds focus, so the next
+  //     Enter commits layer A's typed text into layer B;
+  //   a section's own error/busy flag (HtmlSection's `syncing`,
+  //     InstanceSection's `rebindError`) is raised against a layer and outlives
+  //     the selection that raised it.
+  //
+  // One remount closes all three, and the key is the SUBJECT and nothing else:
+  //
+  //   the SCENE, because `sceneId` follows the playhead and layer ids are
+  //     scene-local, so the same id names a different layer after a crossing;
+  //   the SELECTED IDS, JOINED rather than compared by array identity, because
+  //     the store mints a fresh array on edits that do not move the selection —
+  //     and a key on identity would remount on every one of them.
+  //
+  // Deliberately NOT in it: any value, the document rev, and the playhead
+  // frame. This panel re-renders on every coalesced frame and on every
+  // keystroke, and a key that moved with any of those would remount MID-DRAG.
+  // That is not cosmetic: NumberField, ColorPicker's DragArea and the store's
+  // scrub bracket all cancel an open gesture from their unmount effect, so
+  // every drag would die on its first move. A scene crossing DURING playback
+  // is the one remount a gesture can meet, and it is a real subject change.
+  const sceneId = useShotEditor((s) => s.sceneId);
+  const editingDef = useShotEditor((s) => s.editingDef);
+  /** Inside a shot. NOT `sceneId !== null`, which is never null with a document
+   *  open: this is the context bit, written only by enter/leave. */
+  const inShot = useShotEditor((s) => s.enteredScene !== null);
+  const selectionKey = useShotEditor((s) => s.selection.join(","));
+  // ── CODE STUDIO'S SUBJECT: ONE CODE COMPONENT, ABOVE EVERYTHING ────────
+  // The stage draws that component alone, so no layer, shot or marker is on
+  // screen, and the panel describes the component's defaults on both faces.
+  // Above the document check: the subject is a file, not the document. Keyed
+  // on the component, so a row's widget-local draft dies with its subject.
+  const codeComponent = useShotEditor((s) => (workspaceOf(s) === "components" ? s.codeComponent : null));
+  // COMPONENTS' WAYS OUT AND ITS HISTORY (C1, C2): the actions block under the
+  // head, and History in the props' place while it is open.
+  const historyOpen = useShotEditor((s) => s.componentHistory !== null);
+  // THE USE PICKED IN EVERY USE (C4) is the subject while it is picked: the
+  // centre lists uses, so the panel describes the one in focus. Keyed on it,
+  // so one use's drafts never land in the next.
+  const pickedUse = useShotEditor((s) => usesViewOf(s)?.use ?? null);
+  // A SHOT DOOR'S COMPONENT ON PREVIEW (C7): the use the author came from is
+  // the subject, so the panel says what changes here and where it sits.
+  const origin = useShotEditor((s) =>
+    s.componentsOrigin !== null &&
+    workspaceOf(s) === "components" &&
+    s.componentsTab === "preview" &&
+    sameComponent(s.componentsOrigin.sel, componentsSubject(s))
+      ? s.componentsOrigin
+      : null,
   );
+  if (pickedUse !== null) {
+    return (
+      <aside className="inspector" data-testid="inspector">
+        <PanelBoundary label="Inspector">
+          <FieldLabels value={fieldLabels}>
+            <div className="inspector-body">
+              <ThisUsePanel key={pickedUse} useKey={pickedUse} />
+            </div>
+          </FieldLabels>
+        </PanelBoundary>
+      </aside>
+    );
+  }
+  if (origin !== null) {
+    return (
+      <aside className="inspector" data-testid="inspector">
+        <PanelBoundary label="Inspector">
+          <FieldLabels value={fieldLabels}>
+            <div className="inspector-body">
+              <ComponentOriginPanel key={origin.useKey} origin={origin} />
+            </div>
+          </FieldLabels>
+        </PanelBoundary>
+      </aside>
+    );
+  }
+  if (codeComponent !== null) {
+    return (
+      <aside className="inspector" data-testid="inspector">
+        <PanelBoundary label="Inspector">
+          <FieldLabels value={fieldLabels}>
+            <CodeSubjectHead componentId={codeComponent} />
+            <ComponentActions />
+            <div className="inspector-body" data-testid="code-defaults-rail">
+              {historyOpen ? (
+                <ComponentHistory />
+              ) : (
+                <CodeDefaultsPanel key={codeComponent} componentId={codeComponent} />
+              )}
+            </div>
+          </FieldLabels>
+        </PanelBoundary>
+      </aside>
+    );
+  }
   if (doc === null) return null;
-  if (markerSelected) {
+  if (markerId !== null && !storyboardOpen) {
     return (
       <aside className="inspector" data-testid="inspector">
-        <MarkerSection />
+        <PanelBoundary label="Inspector">
+          {/* The head renders on THIS branch too. It is the branch that
+              replaces the whole panel, so leaving it out would make the marker
+              the one subject in the rail that is never named. */}
+          <InspectorHead />
+          <div className="inspector-body">
+            <FieldLabels value={fieldLabels}>
+              <MarkerSection key={markerId} />
+            </FieldLabels>
+          </div>
+        </PanelBoundary>
       </aside>
     );
   }
+  // The open definition is part of the SUBJECT: entering or leaving one swaps
+  // what every section describes, which is exactly a remount.
+  //
+  // ONE SECTION IS KEYED APART, `project` (`SceneDocSection`), because the
+  // scene is not its subject: the project's name, size, rate and length are
+  // the same facts on both sides of a cut. Keying it on the scene threw away a
+  // name the author was mid-way through typing whenever the playhead crossed
+  // one. It is keyed on the CONTEXT instead, because its collapse bit and its
+  // default differ per context and `useCollapsed` reads them once, at mount.
+  const subjectKey = storyboardOpen
+    ? `sb|${storyboardKey}`
+    : `${editingDef ?? sceneId ?? "-"}|${studioFace ? "" : selectionKey}`;
+  // WHAT THE STACK IS A PANEL OF. Null means the selection, and otherwise the
+  // ladder is `InspectorHead`'s own — an open definition, then the entered
+  // shot, then the project the panel is a view of — so the head can never name
+  // something the sections below it are not describing.
+  const container: ContainerSubject | null = storyboardOpen
+    ? "storyboard"
+    : layers.length > 0
+      ? null
+      : editingDef !== null
+        ? "definition"
+        : inShot
+          ? "shot"
+          : "project";
 
   return (
     <aside className="inspector" data-testid="inspector">
-      <SegmentedControl
-        ariaLabel="Inspector mode"
-        value={mode}
-        options={[
-          { value: "design", label: "Design" },
-          { value: "animate", label: "Animate" },
-        ]}
-        onChange={(next) => store.setInspectorMode(next as "design" | "animate")}
-      />
+      {/* INSIDE the positioned aside, per the boundary's placement rule: a
+          section reading an unexpected node shape shows the card here, and
+          the stage keeps the document's unsaved edits alive. */}
+      <PanelBoundary label="Inspector">
+      <FieldLabels value={fieldLabels}>
+      {/* ── WHAT THE RAIL IS LOOKING AT ──────────────────────────────────
+          FIRST, and OUTSIDE the subject-keyed stack below. Its own resolution
+          walks the same ladder this component does, so it always names the
+          sections that follow it; keeping it out of the key is what stops it
+          replaying its entrance on every selection change, and the one piece
+          of it that must not survive a subject change (a rename draft) is
+          keyed inside the head instead. It also sits OUTSIDE the scroller
+          below, so the subject stays named however far the stack scrolls. */}
+      <InspectorHead />
+      {defOpen && layers.length === 0 ? <ComponentActions /> : null}
+
+      <div className="inspector-body">
+      {defOpen && layers.length === 0 && historyOpen ? <ComponentHistory /> : <>
+      {/* ── THE FOCUSED-OBJECT SLOT ──────────────────────────────────────
+          At most one of these renders: the store keeps `selectedKeyframe`,
+          `selectedMove` and `selectedMarker` pairwise exclusive, and the
+          marker took its own branch above. Each self-gates, so with nothing
+          focused this whole slot is nothing at all.
+
+          NOT keyed like the stack below. Its remount key is the SUBJECT
+          (scene + selection), and these three are focused and cleared without
+          the selection moving — keying them on it would leave a stale editor
+          up, while folding their identity INTO the key would remount every
+          design section whenever a bar was clicked. Each carries its own key
+          instead. */}
+      {storyboardOpen ? null : <KeyframeSection />}
+      {storyboardOpen || !cameraShot ? null : <ShotSection />}
 
-      {mode === "animate" ? (
-        cameraShot ? (
-          <ShotSection />
-        ) : layers.length === 0 ? (
-          // Nothing selected: the tab has no subject. Saying what to do beats an
-          // empty panel that reads as broken.
-          <p className="inspector-empty" data-testid="animate-placeholder">
-            Select a layer to add an entrance, an exit, or a During block.
-          </p>
-        ) : (
-          <>
-            {/* First, because it is the only thing here that describes the
-                layer rather than proposing an edit to it: what the stack adds
-                up to at this frame is the context every choice below is made
-                against. */}
-            <ResolvedChannels />
-            <InOutPresets slot="in" title="In" />
-            <DuringBlocks />
-            <InOutPresets slot="out" title="Out" />
-            {/* Last, because it is about ONE block and everything above chooses
-                which. A timing editor above the list it belongs to would read as
-                the panel's subject rather than the focused row's. */}
-            <BlockTiming />
-          </>
-        )
-      ) : layers.length === 0 ? (
-        <>
-          <SceneSection />
-          {/* Between the scene and its post stack, which is the order the
-              picture is made in: the scene, the camera looking at it, then what
-              happens to the frame after. */}
-          <CameraSection />
-          <EffectsSection />
-          {/* …and last, what happens when the frame stops being this shot's. */}
-          <TransitionSection />
-        </>
-      ) : (
-        <>
-          <TransformSection />
-          <AppearanceSection />
-          {/* Above the paint sections: a mesh's look comes from its material,
-              and `paint` is inert on it (types.ts), so the model IS the
-              subject the fills below have nothing to say about. */}
-          <MeshSection />
-          {/* Beside the model section for the same reason it sits above the
-              paint ones: an instance paints itself, so its contract IS the
-              subject and the fills below have nothing to say about it. */}
-          <InstanceSection />
-          {/* …and a component placement, for the same reason again: what it
-              draws comes from its definition, so the fills below are inert. */}
-          <ComponentSection />
-          {/* Beside the model section and above the paint ones for the same
-              reason: a cloner paints nothing of its own, so what it DOES is the
-              subject the fills below have nothing to say about. */}
-          <ClonerSection />
-          {/* Above the paint sections for the same reason the three geometry
-              sections are: a media layer PAINTS ITSELF from its asset, and
-              `paint.fill` never reaches it (the runtime asks the rasterizer
-              only for a "mask" and a "plate", and the fill branch lives in
-              neither) — so the source IS the subject the fill below has
-              nothing to say about. Corner, stroke and shadow still apply,
-              through exactly those two rasters. */}
-          <MediaSection />
-          <FillSection />
-          <StrokeSection />
-          <CornerSection />
-          <ShadowSection />
-          <TypographySection />
-          {/* Beside Typography, because it is the other kind whose content is
-              authored here rather than dragged on the stage. Below it because a
-              snippet's two fields are taller than everything above them. */}
-          <HtmlSection />
-          {/* Directly under Typography, because it says how that type moves —
-              and it is the one Design-tab section that only matters once a
-              `stagger` block exists, so it sits last and collapsed. */}
-          <TextStaggerSection />
-        </>
-      )}
+      {/* THE STACK IS A LIST, not a run of self-gating JSX. `layout.ts` says
+          which sections and in what order; the registries above say what each
+          one is.
+
+          EACH SECTION CARRIES THE SUBJECT IN ITS KEY, and not a keyed Fragment
+          around them all, because one of them must NOT remount with the
+          subject: `project` survives a cut (see `subjectKey`). Keys on the
+          children of one array let that one section opt out while every other
+          still remounts when the subject changes, which is the whole point:
+          widget-local drafts must not leak from one subject into the next. */}
+      {container === null
+        ? (() => {
+            const kinds = layers.map((layer) => layer.kind);
+            const ids = sectionsFor(kinds);
+            const stack = ids.map((id) => {
+              const Section = SECTIONS[id];
+              return <Section key={`${subjectKey}:${id}`} />;
+            });
+            // ONE COMPONENT USE SELECTED: THIS USE's head over its own rows
+            // (what it links to, Edit master, Detach, Reset all to master).
+            const only = layers.length === 1 ? layers[0] : undefined;
+            const home = editingDef ?? sceneId;
+            const use =
+              only !== undefined && home !== null && (only.kind === "component" || only.kind === "instance")
+                ? layerUseKey(home, only.id)
+                : null;
+            const head = use === null ? [] : [<ThisUseBlock key={`${subjectKey}:this-use`} useKey={use} resetAll />];
+            // In a Shot, the way into Components comes first, at rest.
+            const door =
+              use !== null && editingDef === null && sceneId !== null && only !== undefined
+                ? [<InTheStudioBlock key={`${subjectKey}:in-the-studio`} sceneId={sceneId} layerId={only.id} />]
+                : [];
+            return [...door, ...head, ...stack];
+          })()
+        : CONTAINER_LAYOUT[container].map((id) => {
+            const Section = CONTAINER_SECTIONS[id];
+            return <Section key={id === "project" ? `project|${container}` : `${subjectKey}:${id}`} />;
+          })}
+      </>}
+      </div>
+      </FieldLabels>
+      </PanelBoundary>
     </aside>
   );
 }
-