@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/toolbar/InsertButton.tsx

@@ -0,0 +1,38 @@
+// THE DOCK'S + : it opens and closes the Insert drawer (InsertDrawer.tsx),
+// which lists every insert a drag cannot express (a file, a registry choice,
+// an operation on the selection) beside the icons, shaders and backgrounds.
+//
+// It also hosts the media tool's file claim. The media tool draws its box on
+// the stage and only then needs a file, so its geometry parks in the store
+// (`imagePick`) and a mounted `useAddRows` with the claim opens the dialog for
+// it. The dock is mounted whenever the media tool can be armed, so the claim
+// lives here and not in the drawer, which is often closed.
+//
+// A VIEWER sees no +: there is no insert for them to make. The claim's input
+// stays mounted, since it costs nothing and a read-only flip mid-pick must not
+// strand the dialog's answer.
+import { useShotEditor, useStore } from "../../state/context.js";
+import { ADD_ICON } from "../../icons.js";
+import { ToolButton } from "./ToolDockBar.js";
+import { useAddRows } from "./useAddRows.js";
+
+export function InsertButton() {
+  const store = useStore();
+  const inserting = useShotEditor((s) => s.insertDrawer !== null);
+  const viewer = useShotEditor((s) => s.readOnly);
+  const { busy, fileInput } = useAddRows({ wantLibrary: false });
+  return (
+    <>
+      {viewer ? null : (
+        <ToolButton
+          armed={inserting}
+          refusal={busy ? "Waiting for the last file to finish importing" : null}
+          title="Insert: shapes, icons, shaders and backgrounds"
+          icon={ADD_ICON}
+          onClick={() => store.toggleInsertDrawer()}
+        />
+      )}
+      {fileInput}
+    </>
+  );
+}

package/src/panels/toolbar/IsolationTrail.tsx

@@ -0,0 +1,156 @@
+// Where the author is while isolated, over the canvas they are looking at.
+//
+// It replaces the stage's old "INSIDE X. ESC TO LEAVE" strip (a 22px accent
+// bar across the top of the pane) and the canvas bar's one-level back chip.
+// One trail says the mode, the path, and every way out:
+//
+//   Shot › … › Group › [icon] line   Not on screen   Done
+//
+// - The shot crumb and Done leave isolation entirely (`exitIsolationAll`).
+// - An ancestor crumb climbs to that level with the store's one-level verb,
+//   once per level. `enterIsolation(ancestor)` only looks like it: it selects
+//   the ancestor instead of the group just left.
+// - The current crumb does nothing on click: it is where the author is.
+// - Past two ancestors, all but the nearest fold into a `…` menu, so the bar
+//   keeps its width at any depth.
+//
+// Done names no key on purpose: Escape deselects first and climbs one level,
+// while Done leaves every level at once. See BackChip.tsx for the same call.
+import { useContextMenu } from "@dailies-studio/ui";
+import { useRef } from "react";
+import { CHEVRON_RIGHT_ICON, iconFor, isComponentGlyph } from "../../icons.js";
+import { useShotEditor, useShotEditorHot, useStore } from "../../state/context.js";
+import { crumbsFor, isolationOffscreen } from "../../state/isolationTrail.js";
+
+/** Ancestors shown inline before the rest fold into the `…` menu. */
+const INLINE_ANCESTORS = 2;
+
+export function IsolationTrail() {
+  const store = useStore();
+  // The doc reference moves on edits only, never on playback frames, so this
+  // re-renders when a label or the tree changes and not 60 times a second.
+  const doc = useShotEditor((s) => s.doc);
+  const sceneId = useShotEditor((s) => s.sceneId);
+  const isolation = useShotEditor((s) => (s.editingDef === null ? s.isolation : null));
+  const { open, menu } = useContextMenu();
+  const moreRef = useRef<HTMLButtonElement | null>(null);
+
+  const scene = doc === null || sceneId === null ? undefined : doc.scenesById[sceneId];
+  const layer = isolation === null ? undefined : scene?.layersById[isolation];
+  if (scene === undefined || layer === undefined || isolation === null) return null;
+
+  const trail = crumbsFor(scene, isolation);
+  const ancestors = trail.slice(0, -1);
+  const folded = ancestors.length > INLINE_ANCESTORS ? ancestors.slice(0, -1) : [];
+  const inline = folded.length > 0 ? ancestors.slice(-1) : ancestors;
+  const labelOf = (id: string): string => scene.layersById[id]?.label ?? id;
+  /** Up to `id`, one level per call, the way Escape climbs. */
+  const climbTo = (id: string): void => {
+    const levels = trail.length - 1 - trail.indexOf(id);
+    for (let n = 0; n < levels; n += 1) store.exitIsolation();
+  };
+  const showFolded = (): void => {
+    const el = moreRef.current;
+    if (el === null) return;
+    const r = el.getBoundingClientRect();
+    open(
+      { x: r.left, y: r.bottom + 6 },
+      folded.map((id) => ({
+        kind: "action" as const,
+        id: `isolation.crumb.${id}`,
+        label: labelOf(id),
+        onSelect: () => climbTo(id),
+      })),
+    );
+  };
+  const sep = (
+    <span className="iso-trail-sep" aria-hidden="true">
+      {CHEVRON_RIGHT_ICON}
+    </span>
+  );
+
+  return (
+    <>
+      <nav className="iso-trail" aria-label="Isolation path" data-testid="isolation-trail">
+        <button
+          type="button"
+          className="iso-crumb"
+          data-testid="trail-shot"
+          title={`Back to ${scene.name}`}
+          onClick={() => store.exitIsolationAll()}
+        >
+          {scene.name}
+        </button>
+        {folded.length === 0 ? null : (
+          <span className="iso-trail-step">
+            {sep}
+            <button
+              ref={moreRef}
+              type="button"
+              className={`iso-crumb is-more${menu !== null ? " is-open" : ""}`}
+              aria-haspopup="menu"
+              aria-expanded={menu !== null}
+              aria-label={`${folded.length} more levels`}
+              title={folded.map(labelOf).join(" › ")}
+              data-testid="trail-more"
+              onClick={showFolded}
+            >
+              …
+            </button>
+            {menu}
+          </span>
+        )}
+        {inline.map((id) => (
+          <span key={id} className="iso-trail-step">
+            {sep}
+            <button
+              type="button"
+              className="iso-crumb"
+              title={`Back to ${labelOf(id)}`}
+              onClick={() => climbTo(id)}
+            >
+              {labelOf(id)}
+            </button>
+          </span>
+        ))}
+        {sep}
+        <span className="iso-crumb is-current" aria-current="location" data-testid="trail-current">
+          <span
+            className={`iso-crumb-icon${isComponentGlyph(layer) ? " is-component" : ""}`}
+            aria-hidden="true"
+          >
+            {iconFor(layer)}
+          </span>
+          <span className="iso-crumb-label">{layer.label}</span>
+        </span>
+        <OffscreenChip />
+      </nav>
+      <button
+        type="button"
+        className="btn is-ghost iso-done"
+        data-testid="isolation-done"
+        title={`Leave isolation, back to ${scene.name}`}
+        onClick={() => store.exitIsolationAll()}
+      >
+        Done
+      </button>
+    </>
+  );
+}
+
+/** The playhead moves on the clock tick, which `useShotEditor` is deaf to, so
+ *  this leaf alone subscribes hot. The selector is a boolean: it re-renders
+ *  only when the answer flips, never per frame. */
+function OffscreenChip() {
+  const offscreen = useShotEditorHot(isolationOffscreen);
+  if (!offscreen) return null;
+  return (
+    <span
+      className="status-chip status-chip-quiet iso-offscreen"
+      data-testid="trail-offscreen"
+      title="Nothing in this layer is drawing at the playhead"
+    >
+      Not on screen
+    </span>
+  );
+}

package/src/panels/toolbar/PanelToggles.tsx

@@ -0,0 +1,86 @@
+// Show and hide the three panels, from the canvas bar.
+//
+// ON THE CANVAS BAR, not on the panels themselves: a control that lives on the
+// thing it hides disappears with it. The canvas cell never collapses, so the
+// bar is the one place that can always bring a panel back.
+//
+// ONE TRIGGER, NOT THREE BUTTONS (Paper 27, "7 · Canvas bar"). Three glyph
+// toggles cost the bar ~92px it needed for the plane and shading controls,
+// and their state was a fill the eye had to decode. The menu says it in words
+// with a check per panel, plus "Every panel", and shows each row's key, read
+// off the shortcut table like every other accelerator in the chrome.
+//
+// The rows are built at OPEN time from `getState()` (StageMenu's rule), so a
+// key pressed while the menu is closed is reflected the next time it opens.
+import { useContextMenu, type MenuEntry } from "@dailies-studio/ui";
+import { useRef } from "react";
+import { CHEVRON_DOWN_ICON, PANELS_ICON } from "../../icons.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { shortcutFor, shortcutHint } from "../../state/shortcuts.js";
+
+export function PanelToggles() {
+  const store = useStore();
+  const docOpen = useShotEditor((s) => s.name !== null);
+  const { open, menu } = useContextMenu();
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  // DERIVED from `menu`, never mirrored: see AppMenu.
+  const isOpen = menu !== null;
+  if (!docOpen) return null;
+
+  const row = (menuId: string, label: string, on: boolean, run: () => void): MenuEntry => ({
+    kind: "action",
+    id: menuId,
+    label,
+    checked: on,
+    shortcut: shortcutFor(menuId),
+    onSelect: run,
+  });
+
+  const show = (): void => {
+    const el = buttonRef.current;
+    if (el === null) return;
+    const s = store.getState();
+    const r = el.getBoundingClientRect();
+    open(
+      { x: r.left, y: r.bottom + 6 },
+      [
+        { kind: "separator", heading: "Panels" },
+        row("view.panel.rail", "Layers", !s.railCollapsed, () => store.setRailCollapsed(!s.railCollapsed)),
+        row("view.panel.dock", "Timeline", !s.dockCollapsed, () => store.setDockCollapsed(!s.dockCollapsed)),
+        row("view.panel.inspector", "Inspector", !s.inspectorCollapsed, () =>
+          store.setInspectorCollapsed(!s.inspectorCollapsed),
+        ),
+        { kind: "separator" },
+        row(
+          "view.panel.all",
+          "Every panel",
+          !s.railCollapsed && !s.dockCollapsed && !s.inspectorCollapsed,
+          () => store.togglePanels(),
+        ),
+      ],
+      { lanes: "always" },
+    );
+  };
+
+  return (
+    <div className="panel-toggles">
+      <button
+        ref={buttonRef}
+        type="button"
+        className={`tool-button panel-menu-trigger${isOpen ? " is-open" : ""}`}
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-label="Panels"
+        title={`Panels${shortcutHint("view.panel.all")}`}
+        data-testid="panel-menu-trigger"
+        onClick={show}
+      >
+        {PANELS_ICON}
+        <span className="panel-menu-caret" aria-hidden="true">
+          {CHEVRON_DOWN_ICON}
+        </span>
+      </button>
+      {menu}
+    </div>
+  );
+}

package/src/panels/toolbar/ShadingBar.tsx

@@ -1,42 +1,135 @@
 // How the WORKING pane draws: solid clay, wireframe, real materials, or the
 // graded render from the working camera.
 //
-// A floating sibling like ViewModeBar, and its structural twin: a table of
-// modes so glyph, label and cycle order live beside each other. It renders
-// NOTHING when the layout is camera-only — the camera pane is always the
-// graded render, so with no working pane on screen there is nothing this bar
-// addresses and an armed button over an invisible pane would be a lie.
+// A table of GLYPHS, and nothing else: the words and the cycle order come from
+// `stage/shading.ts`, which is where the App menu reads them too. It renders
+// NOTHING when the layout is camera-only — the camera pane is always the graded
+// render, so with no working pane on screen there is nothing this bar addresses
+// and an armed button over an invisible pane would be a lie. It sits in the
+// canvas bar's "3D" group (CanvasBar.tsx), which names the pane.
+//
+// ── ONE BUTTON, NOT FOUR, AND ITS OWN CLASS ─────────────────────────────
+//
+// This used to be four 36px glyph buttons wearing `view-mode-bar`, the
+// view-mode segmented control's own class, borrowed for its layout and
+// carrying that control's track and surface with it. It also cost 160px of a
+// bar that does not wrap.
+//
+// So: one trigger showing what the pane is doing now, and the other three a
+// press away. A mode picker IS one control reporting one value, and four
+// mutually exclusive glyphs only read as four choices to someone who already
+// knows the vocabulary. Every mode keeps its own title text, so "Z cycles"
+// stays discoverable on the rows where the modes are.
+//
+// ── THE MENU PORTALS, IT DOES NOT FLY OUT ───────────────────────────────
+//
+// The reason used to be that `.control-strip` carried `overflow: clip` and
+// would clip an absolutely-positioned child. IT NO LONGER DOES — that rule is
+// gone, because it was clipping the dock's own shapes flyout and the whole Add
+// menu into invisible, unclickable boxes. So `.tool-flyout` would work here.
+//
+// It still portals, and the reason is now the one that was always the better
+// one: `.tool-flyout` is CSS and nothing else — it opens where its anchor is,
+// stays there, and closes only from inside itself (its trigger again, or one
+// of its own rows). Nothing outside it can dismiss it. This menu
+// sits mid-strip over the stage, so it needs the behaviours `Popover` brings
+// and the flyout has none of: it closes on an outside pointerdown and on
+// Escape; it flips above the trigger when the window is short; and it clamps
+// its LEFT EDGE on-screen. Not on blur — `Popover.tsx`'s own header says
+// "outside pointerdown / Escape / blur" and the file registers two listeners,
+// neither of them blur; and the clamp is horizontal only, which is what the
+// flip is for. A menu left open under the author's next click on
+// the picture is the failure the dock's flyout still has and this one does not.
+import { useRef, useState } from "react";
+import { Popover } from "@dailies-studio/ui";
 import { useShotEditor, useStore } from "../../state/context.js";
-import { SHADING_MODES } from "../../stage/shading.js";
+import { inDefinition, shownLayoutMode } from "../../state/viewMode.js";
+// `shadingLabel` and not four labels of our own: this bar hand-wrote the same
+// words the App menu prints, so renaming a mode moved one and left the other.
+import { SHADING_MODES, shadingLabel } from "../../stage/shading.js";
 import type { ShadingMode } from "../../bridgeTypes.js";
 
-const SHADING_GLYPHS: Readonly<Record<ShadingMode, { glyph: string; label: string }>> = {
-  solid: { glyph: "◯", label: "Solid" },
-  wireframe: { glyph: "◇", label: "Wireframe" },
-  material: { glyph: "◑", label: "Material" },
-  rendered: { glyph: "✦", label: "Rendered" },
+/** The face for each mode. The drawing is this file's; the word is not. */
+const SHADING_GLYPHS: Readonly<Record<ShadingMode, string>> = {
+  solid: "◯",
+  wireframe: "◇",
+  material: "◑",
+  rendered: "✦",
 };
 
+/** One hover string for a mode, worn by the trigger and by that mode's row. */
+function titleFor(mode: ShadingMode): string {
+  return `${shadingLabel(mode)}: working pane (Z cycles)`;
+}
+
 export function ShadingBar() {
   const store = useStore();
   const shading = useShotEditor((s) => s.shadingMode);
-  const layoutMode = useShotEditor((s) => s.stageLayout.mode);
+  // ON SCREEN, not chosen: see CameraViewBar.
+  const layoutMode = useShotEditor(shownLayoutMode);
+  // A definition always draws the working pane alone (StageApp forces it),
+  // whatever layout the shot left stashed. WorkPlaneBar keeps the same rule.
+  const inDef = useShotEditor(inDefinition);
   const open = useShotEditor((s) => s.name !== null);
-  if (!open || layoutMode === "camera") return null;
+  const anchor = useRef<HTMLButtonElement>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  if (!open || (layoutMode === "camera" && !inDef)) {
+    // ── AND THE GATE CLOSES THE MENU ──────────────────────────────────
+    //
+    // Returning null is not an unmount: React keeps this component and its
+    // state, so a menu left open when the layout went camera-only came back
+    // OPEN the next time the working pane did — a popover over the picture
+    // that nobody pressed, reporting `aria-expanded="true"` nobody set.
+    // Setting state during this component's own render is React's documented
+    // answer to "reset state when an input changes": it re-renders before
+    // anything is committed, so there is no extra paint and no effect.
+    if (menuOpen) setMenuOpen(false);
+    return null;
+  }
   return (
-    <div className="view-mode-bar" role="group" aria-label="Working-pane shading" data-testid="shading-bar">
-      {SHADING_MODES.map((mode) => (
-        <button
-          key={mode}
-          type="button"
-          className={`tool-button${shading === mode ? " is-armed" : ""}`}
-          aria-pressed={shading === mode}
-          title={`${SHADING_GLYPHS[mode].label} — working pane (Z cycles)`}
-          onClick={() => store.setShadingMode(mode)}
-        >
-          {SHADING_GLYPHS[mode].glyph}
-        </button>
-      ))}
+    <div className="shading-bar" role="group" aria-label="Working-pane shading" data-testid="shading-bar">
+      <button
+        ref={anchor}
+        type="button"
+        className="tool-button has-caret"
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        // THE NAME CARRIES THE VALUE. A bare glyph has no accessible name at
+        // all, and `title` alone is the last resort the accname spec reaches
+        // for — the one control here whose face changes with its state is the
+        // one that must say so out loud.
+        aria-label={`Shading: ${shadingLabel(shading)}`}
+        title={titleFor(shading)}
+        onClick={() => setMenuOpen((v) => !v)}
+      >
+        {SHADING_GLYPHS[shading]}
+        <span className="tool-caret" aria-hidden="true" />
+      </button>
+      <Popover open={menuOpen} anchor={anchor} onClose={() => setMenuOpen(false)}>
+        {/* `menuitemradio` and not `menuitem`: the four rows ARE the whole
+            menu, so the `role="menu"` element is the group the radio semantics
+            need — which is what the old bar's four `aria-pressed` buttons
+            said, kept rather than dropped on the way into a menu. */}
+        <div className="shading-menu" role="menu" data-testid="shading-menu">
+          {SHADING_MODES.map((mode) => (
+            <button
+              key={mode}
+              type="button"
+              role="menuitemradio"
+              aria-checked={shading === mode}
+              className={`tool-button${shading === mode ? " is-armed" : ""}`}
+              title={titleFor(mode)}
+              onClick={() => {
+                setMenuOpen(false);
+                store.setShadingMode(mode);
+              }}
+            >
+              <span aria-hidden="true">{SHADING_GLYPHS[mode]}</span>
+              {shadingLabel(mode)}
+            </button>
+          ))}
+        </div>
+      </Popover>
     </div>
   );
 }