@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/header/HistoryControls.tsx

@@ -1,19 +1,45 @@
+import { REDO_ICON, UNDO_ICON } from "../../icons.js";
 import { useShotEditor, useStore } from "../../state/context.js";
+import { shortcutHint } from "../../state/shortcuts.js";
+import { commandBlocker } from "../../state/workspace.js";
 
 /** Undo/redo. The enabled state comes from engine's history, never from a
  *  count this chrome keeps — a second source of truth for "can I undo" is a
- *  button that lies exactly when it matters. */
+ *  button that lies exactly when it matters.
+ *
+ *  THE HINTS COME OFF THE TABLE. They were literal "⌘Z"/"⌘⇧Z", which is wrong
+ *  on every Windows machine the editor runs on — `formatCombo` spells those
+ *  Ctrl+Z and Ctrl+Shift+Z. `shortcutFor` is the same lookup the menu
+ *  accelerators use, so the tooltip and the menu row can no longer disagree,
+ *  and a rebind moves both. */
 export function HistoryControls() {
   const store = useStore();
   const canUndo = useShotEditor((s) => s.canUndo);
   const canRedo = useShotEditor((s) => s.canRedo);
+  const blocked = useShotEditor((s) => commandBlocker(s, "edit.undo"));
+  // Under live sync undo is the author's own (Paper page 21, "Undo note").
+  const own = useShotEditor((s) => s.syncStatus !== null) ? " · Undo covers only your changes." : "";
   return (
     <div className="history-controls">
-      <button type="button" disabled={!canUndo} title="Undo (⌘Z)" onClick={() => store.undo()}>
-        ↶
+      <button
+        type="button"
+        className="btn is-icon"
+        aria-label="Undo"
+        disabled={!canUndo || blocked !== null}
+        title={blocked ?? `Undo${shortcutHint("edit.undo")}${own}`}
+        onClick={() => store.undo()}
+      >
+        {UNDO_ICON}
       </button>
-      <button type="button" disabled={!canRedo} title="Redo (⌘⇧Z)" onClick={() => store.redo()}>
-        ↷
+      <button
+        type="button"
+        className="btn is-icon"
+        aria-label="Redo"
+        disabled={!canRedo || blocked !== null}
+        title={blocked ?? `Redo${shortcutHint("edit.redo")}`}
+        onClick={() => store.redo()}
+      >
+        {REDO_ICON}
       </button>
     </div>
   );

package/src/panels/header/PresenceStack.tsx

@@ -0,0 +1,329 @@
+// WHO ELSE IS HERE (lane R7, Paper page 21): one face per person in the
+// Project's live session, in their peer colour, three faces and then "+N".
+// Hovering a face says who and where; clicking one follows them (their Shot,
+// frame and selection) until Escape, an edit of our own, or they leave.
+//
+// The Agent is a mint face while it runs. It is this tab's own agent, so it
+// has no place to follow.
+//
+// People are live sync only: with sync off the presence store is not live and
+// draws no faces. The local CLI is one user, so it never has a face to draw
+// either. An MCP AGENT working on this Project (state/agentActivity.ts) shows
+// on both hosts, sync or not: a mint face per agent, and a status chip naming
+// its step ("Claude: Writing VolumetricClouds.tsx") with Follow when it is
+// writing a file, which opens Code Studio following it. The view never moves
+// on its own from here.
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import type { ReactNode } from "react";
+import { initialsOf, useToasts } from "@dailies-studio/ui";
+import type { ToastHandle } from "@dailies-studio/ui";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { AGENT_COLOR } from "../../state/presence.js";
+import type { PresencePerson, PresenceState } from "../../state/presence.js";
+import { shotNameOf, shotNumberOf } from "../../state/storyboardModel.js";
+import { agentsIn } from "../../state/agentActivity.js";
+import type { AgentWork } from "../../state/agentActivity.js";
+import { AgentDots, useAgentActivity } from "../agent/AgentDots.js";
+
+/** Faces before the "+N". */
+export const PRESENCE_FACES = 3;
+
+export function usePresence(): PresenceState {
+  const { presence } = useStore();
+  return useSyncExternalStore(presence.subscribe, presence.getState);
+}
+
+/** Where a person is, as the hover card says it: the Shot's number and name,
+ *  and the first layer they hold. Null for a place this document lacks. */
+export function placeOf(
+  doc: Doc3D | null,
+  person: Pick<PresencePerson, "scene" | "sel">,
+): { number: string; shot: string; layer: string | null } | null {
+  if (doc === null || person.scene === null) return null;
+  const scene = doc.scenesById[person.scene];
+  if (scene === undefined) return null;
+  const number = shotNumberOf(doc, person.scene) ?? String(doc.scenes.indexOf(person.scene) + 1).padStart(2, "0");
+  const first = person.sel.find((id) => scene.layersById[id] !== undefined);
+  return {
+    number,
+    shot: shotNameOf(doc, person.scene),
+    layer: first === undefined ? null : (scene.layersById[first]?.label ?? null),
+  };
+}
+
+const AGENT = "agent";
+
+export function PresenceStack(): ReactNode {
+  const store = useStore();
+  const presence = usePresence();
+  const agentRunning = useShotEditor((s) => s.agentRunning);
+  const doc = useShotEditor((s) => s.doc);
+  const projectName = useShotEditor((s) => s.name);
+  const activity = useAgentActivity();
+  const mcpAgents = agentsIn(activity, projectName);
+  const [card, setCard] = useState<string | null>(null);
+
+  // Escape stops a follow, from anywhere in the editor.
+  const following = presence.following;
+  useEffect(() => {
+    if (following === null) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      store.presence.follow(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [following, store]);
+
+  // A follow that ended on its own says why, once.
+  const { toast, node } = useToasts();
+  const shown = useRef<ToastHandle | null>(null);
+  useEffect(() => {
+    if (presence.notice === null) return;
+    shown.current?.dismiss();
+    shown.current = toast({ message: presence.notice });
+    store.presence.dismissNotice();
+  }, [presence.notice, store, toast]);
+
+  const people = presence.live ? presence.people : [];
+  const agent = presence.live && agentRunning;
+  const total = people.length + (agent ? 1 : 0) + mcpAgents.length;
+  if (total === 0) return node;
+
+  const shownPeople = people.slice(0, Math.max(0, PRESENCE_FACES - (agent ? 1 : 0) - mcpAgents.length));
+  const more = people.length - shownPeople.length;
+  const followed = people.find((p) => p.user === following) ?? null;
+
+  return (
+    <>
+      {node}
+      {mcpAgents.length > 0 ? <AgentStatusChip agent={mcpAgents[mcpAgents.length - 1]!} /> : null}
+      <div className="presence-stack" data-testid="presence-stack" role="group" aria-label="People here">
+        {mcpAgents.map((a) => (
+          <span
+            key={a.sessionId}
+            className="presence-face presence-face-agent"
+            data-testid="presence-mcp-agent"
+            style={{ background: AGENT_COLOR }}
+            tabIndex={0}
+            aria-label={`${a.name}, ${a.step}`}
+            onPointerEnter={() => setCard(a.sessionId)}
+            onPointerLeave={() => setCard(null)}
+            onFocus={() => setCard(a.sessionId)}
+            onBlur={() => setCard(null)}
+          >
+            AI
+            {card === a.sessionId ? (
+              <span className="presence-card" role="tooltip">
+                <span className="presence-card-who">
+                  <span className="presence-card-avatar" style={{ background: AGENT_COLOR }}>
+                    AI
+                  </span>
+                  <span className="presence-card-name">
+                    <span>{a.name}</span>
+                    <span className="presence-card-role">Agent over MCP · {a.step}</span>
+                  </span>
+                </span>
+              </span>
+            ) : null}
+          </span>
+        ))}
+        {agent ? (
+          <span
+            className="presence-face presence-face-agent"
+            data-testid="presence-agent"
+            style={{ background: AGENT_COLOR }}
+            tabIndex={0}
+            aria-label="Agent, working"
+            onPointerEnter={() => setCard(AGENT)}
+            onPointerLeave={() => setCard(null)}
+            onFocus={() => setCard(AGENT)}
+            onBlur={() => setCard(null)}
+          >
+            AI
+            {card === AGENT ? (
+              <span className="presence-card" role="tooltip">
+                <span className="presence-card-who">
+                  <span className="presence-card-avatar" style={{ background: AGENT_COLOR }}>
+                    AI
+                  </span>
+                  <span className="presence-card-name">
+                    <span>Agent</span>
+                    <span className="presence-card-role">Working in this tab</span>
+                  </span>
+                </span>
+              </span>
+            ) : null}
+          </span>
+        ) : null}
+        {shownPeople.map((person) => {
+          const place = placeOf(doc, person);
+          const isFollowed = person.user === following;
+          return (
+            <button
+              key={person.user}
+              type="button"
+              className={`presence-face${isFollowed ? " presence-face-followed" : ""}`}
+              data-testid="presence-face"
+              data-user={person.user}
+              // The followed face is ringed in its own colour, outside the
+              // bar-coloured border every face has.
+              style={{
+                background: person.color,
+                ...(isFollowed ? { boxShadow: `0 0 0 2px ${person.color}` } : {}),
+              }}
+              aria-pressed={isFollowed}
+              aria-label={`${person.name}, ${isFollowed ? "following. Escape stops" : "click to follow"}`}
+              onClick={() => store.presence.follow(isFollowed ? null : person.user)}
+              onPointerEnter={() => setCard(person.user)}
+              onPointerLeave={() => setCard(null)}
+              onFocus={() => setCard(person.user)}
+              onBlur={() => setCard(null)}
+            >
+              {person.avatarUrl === null ? initialsOf(person.name) : <img src={person.avatarUrl} alt="" />}
+              {card === person.user ? (
+                <span className="presence-card" role="tooltip" data-testid="presence-card">
+                  <span className="presence-card-who">
+                    <span className="presence-card-avatar" style={{ background: person.color }}>
+                      {person.avatarUrl === null ? initialsOf(person.name) : <img src={person.avatarUrl} alt="" />}
+                    </span>
+                    <span className="presence-card-name">
+                      <span>{person.name}</span>
+                      <span className="presence-card-role">
+                        {person.role === "edit" ? "Editor" : "Viewer"}
+                        {person.tabs > 1 ? ` · ${person.tabs} tabs` : ""}
+                      </span>
+                    </span>
+                  </span>
+                  {place === null ? null : (
+                    <span className="presence-card-where">
+                      <span className="presence-card-number">{place.number}</span>
+                      <span className="presence-card-shot">{place.shot}</span>
+                      {place.layer === null ? null : (
+                        <>
+                          <span className="presence-card-slash">/</span>
+                          <span className="presence-card-swatch" style={{ borderColor: person.color }} />
+                          <span className="presence-card-layer">{place.layer}</span>
+                        </>
+                      )}
+                    </span>
+                  )}
+                  <span className="presence-card-foot">
+                    <span>{isFollowed ? "Following" : "Click to follow"}</span>
+                    <span>Esc stops</span>
+                  </span>
+                </span>
+              ) : null}
+            </button>
+          );
+        })}
+        {more > 0 ? (
+          <span
+            className="presence-face presence-more"
+            data-testid="presence-more"
+            title={people
+              .slice(shownPeople.length)
+              .map((p) => p.name)
+              .join(", ")}
+          >
+            +{more}
+          </span>
+        ) : null}
+      </div>
+      {/* An MCP agent editing the Project as a whole (ops naming no layer):
+          the canvas cell's frame in the Agent's colour, the follow frame's
+          shape. Its layers, when it names some, are outlined on the stage
+          instead (setPeerSelections). */}
+      {followed === null && mcpAgents.some((a) => a.busy && a.tool === "shot_batch" && a.layers.length === 0) ? (
+        <div
+          className="presence-follow-frame is-agent"
+          data-testid="agent-frame"
+          aria-hidden="true"
+        />
+      ) : null}
+      {followed === null ? null : (
+        <>
+          <div
+            className="presence-follow-frame"
+            data-testid="presence-follow-frame"
+            aria-hidden="true"
+            style={{ borderColor: followed.color }}
+          />
+          <div className="presence-follow-pill" data-testid="presence-follow-pill" role="status">
+            <span className="presence-follow-dot" style={{ background: followed.color }} />
+            Following {followed.name} · Esc to stop
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+/**
+ * WHAT THE AGENT IS DOING NOW, beside its face: its step, with dots while a
+ * call is in flight, and Follow while it is writing a file this tab is not
+ * following yet.
+ */
+function AgentStatusChip({ agent }: { agent: AgentWork }): ReactNode {
+  const store = useStore();
+  const follow = useShotEditor((s) => s.codeFollow);
+  const question = useSyncExternalStore(store.agentQuestion.subscribe, store.agentQuestion.getState);
+  const docId = useShotEditor((s) => s.doc?.id ?? null);
+  const rel = agent.wroteFile;
+  // Asking, or waiting on the answer, with this Project's dialog closed:
+  // Answer opens it.
+  const offerAnswer =
+    (agent.tool === "ask_user" || agent.tool === "get_answer") &&
+    question.question?.status === "open" &&
+    question.question.projectId === docId &&
+    !question.open;
+  const offerFollow = !offerAnswer && rel !== null && rel !== follow;
+  return (
+    <span className="agent-status-chip" data-testid="agent-status-chip" role="status">
+      {agent.busy ? <AgentDots label={`${agent.name} is working`} /> : <span className="agent-status-dot" aria-hidden="true" />}
+      <span className="agent-status-text">
+        <span className="agent-status-name">{agent.name}:</span> {agent.step}
+      </span>
+      {offerAnswer ? (
+        <button
+          type="button"
+          className="agent-status-follow"
+          data-testid="agent-status-answer"
+          title="Open the agent's question"
+          onClick={() => store.agentQuestion.show()}
+        >
+          Answer
+        </button>
+      ) : null}
+      {offerFollow ? (
+        <button
+          type="button"
+          className="agent-status-follow"
+          data-testid="agent-status-follow"
+          title={`Open ${rel} in Code Studio and follow each write`}
+          onClick={() => void store.followAgentFile(rel)}
+        >
+          Follow
+        </button>
+      ) : null}
+    </span>
+  );
+}
+
+/** The people whose place matches `at`, as small dots in their colours after
+ *  a row's label or a frame's caption (page 21: "Badge lands ●●"). Null with
+ *  nobody there. */
+export function PeerDots({ at }: { at: (person: PresencePerson) => boolean }): ReactNode {
+  const { live, people } = usePresence();
+  if (!live) return null;
+  const here = people.filter(at);
+  if (here.length === 0) return null;
+  return (
+    <span className="peer-dots" data-testid="peer-dots" title={here.map((p) => p.name).join(", ")}>
+      {here.map((p) => (
+        <span key={p.user} className="peer-dot" style={{ background: p.color }} />
+      ))}
+    </span>
+  );
+}

package/src/panels/header/ProjectTitle.tsx

@@ -0,0 +1,232 @@
+// The editor has exactly one Project open. Project lifecycle lives at
+// /projects/; this header only names the current one and offers the way back:
+// `Projects › title › shot`, where the root crumb is a link that leaves through
+// `leaveFor` like the app menu's row.
+//
+// ── AND IT NAMES THE LEVEL, NOT JUST THE PROJECT ─────────────────────────
+//
+// The chrome always knew which shot the author was in (`enteredScene`) and
+// never said so up here. The trail that did name it lives in the left rail's
+// head, which is gone the moment the rail is collapsed, and the only other way
+// out was a chip in the timeline dock's head, which is gone with the dock.
+// Collapse both and there was no route back to the project level anywhere on
+// screen. The header never collapses, so the crumb belongs here.
+//
+// A component is not a level of this trail: it opens in the Components
+// workspace, which the workspace switch names, and its canvas bar and left
+// column carry the way back to All components.
+//
+// The crumb is a SWITCHER and not only a back button: "which shot am I in" and
+// "take me to another one" are the same question at this level, and a menu
+// costs the same one click a plain back button would have.
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+import { Popover } from "@dailies-studio/ui";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import { CHEVRON_DOWN_ICON, CHEVRON_RIGHT_ICON, SCENE_ICON } from "../../icons.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { commandBlocker } from "../../state/workspace.js";
+import { leaveFor } from "./leave.js";
+
+/** The rows the switcher shows: one per shot, in document order.
+ *
+ *  A free function taking the document rather than a selector, because it
+ *  ALLOCATES. See the subscription note below: anything this component
+ *  subscribes to is compared with `Object.is` on every store notification, so a
+ *  selector shaped like this one would re-render the whole header on each one. */
+function sceneRows(doc: Doc3D | null): ReadonlyArray<{ id: string; name: string }> {
+  if (doc === null) return [];
+  return doc.scenes.map((id) => ({ id, name: doc.scenesById[id]?.name ?? id }));
+}
+
+const NO_ROWS: ReadonlyArray<{ id: string; name: string }> = [];
+
+/** THE LABEL OWNS THE CLIP, not the button.
+ *
+ *  `.project-crumb` is an `inline-flex` with `max-width`, so a bare text child
+ *  becomes an anonymous flex item. `text-overflow` is not inherited and applies
+ *  to a block container's own inline content, so it never reaches that item:
+ *  the button clipped a long shot name mid-glyph instead of ellipsizing it.
+ *  A real element with `min-width: 0` is a flex item that can shrink, and it
+ *  carries the ellipsis itself.
+ *
+ *  Inline rather than a class because `styles.css` belongs to another lane this
+ *  round; move it to `.project-crumb-label` whenever that file is next open. */
+const CRUMB_LABEL: CSSProperties = { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" };
+
+export function ProjectTitle() {
+  const store = useStore();
+  const docId = useShotEditor((state) => state.doc?.id ?? null);
+  const title = useShotEditor((state) => state.doc?.title ?? state.name ?? "Untitled Project");
+  const open = useShotEditor((state) => state.doc !== null);
+  // ── SUBSCRIBE TO STRINGS, NEVER TO `doc` ────────────────────────────────
+  //
+  // This sits in the header, which must survive playback: `useShotEditor`
+  // compares with `Object.is` per notification, so a selector returning a
+  // computed object or array re-renders every control up here on each one, and
+  // a `doc` subscription re-renders them on each keystroke of any edit. Both
+  // labels are resolved INSIDE the selector, so what crosses the boundary is a
+  // string that changes only when the words change.
+  const enteredScene = useShotEditor((state) => state.enteredScene);
+  const shotLabel = useShotEditor((state) =>
+    state.enteredScene === null
+      ? "All shots"
+      : (state.doc?.scenesById[state.enteredScene]?.name ?? "Shot"),
+  );
+  const [draft, setDraft] = useState(title);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const anchor = useRef<HTMLButtonElement>(null);
+  const cancel = useRef(false);
+
+  useEffect(() => setDraft(title), [docId, title]);
+
+  const commit = (): void => {
+    if (cancel.current) {
+      cancel.current = false;
+      setDraft(title);
+      return;
+    }
+    store.setProjectTitle(draft);
+    const committed = store.getState().doc?.title ?? store.getState().name ?? "Untitled Project";
+    if (committed !== draft) setDraft(committed);
+  };
+
+  // THE LIST IS READ WHEN THE MENU OPENS, not subscribed to. `doc.scenesById`
+  // is a fresh object after any edit inside any shot, so subscribing to it
+  // would cost the header a render per keystroke of a layer rename, for a list
+  // nobody is looking at.
+  //
+  // THE IDS ARE SUBSCRIBED THOUGH, as one joined string, because the menu can
+  // outlive the list it drew. `Popover` intercepts Escape only, so ⌘Z reaches
+  // the keymap (`state/keymap.ts`) and an undo can delete a shot with the menu
+  // still open; none of the four labels above change when some OTHER shot
+  // appears or disappears, so nothing would re-render and the row would stay
+  // clickable, reaching `enterSceneAt`'s `scene === undefined` refusal as a
+  // dead click. A string still crosses the boundary, so the `Object.is` rule
+  // holds and the header re-renders only when the shot list itself changes.
+  // A rename while the menu is open still shows the old word until the next
+  // render, which is cosmetic and does not make the row lie about where it goes.
+  // Joined on a comma, which no generated shot id carries (`sc_<slug>`), so two
+  // different lists cannot produce the same key.
+  const sceneKey = useShotEditor((state) => state.doc?.scenes.join(",") ?? "");
+  const switchBlocked = useShotEditor((state) => commandBlocker(state, "ctx.shot"));
+  // The Project level, refused on the board: the row says why, as the app
+  // menu's does, rather than closing on a leave that never happens.
+  const allBlocked = useShotEditor((state) => commandBlocker(state, "ctx.scene"));
+  const rows = menuOpen && sceneKey !== "" ? sceneRows(store.getState().doc) : NO_ROWS;
+
+  /** The same triple the rail's back crumb runs, in the same order: leave the
+   *  definition and any isolation before leaving the shot, because each of
+   *  those is scoped by the one after it. */
+  const allShots = (): void => {
+    store.exitIsolationAll();
+    store.editComponent(null);
+    store.leaveScene();
+    setMenuOpen(false);
+  };
+
+  return (
+    <div className="project-identity">
+      {/* THE ROOT CRUMB IS BACK (Paper redesign, 2026-10-04): Projects ›
+          Project › Shot, the trail the design system's breadcrumb draws. A
+          real link, so a middle click opens the list in a new tab; a plain
+          click goes through `leaveFor`, which flushes autosave first and
+          stays put when the save fails. */}
+      <a
+        className="project-home"
+        href="/projects/"
+        onClick={(event) => {
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+          event.preventDefault();
+          leaveFor(store, "/projects/");
+        }}
+      >
+        Projects
+      </a>
+      <span className="project-crumb-sep" aria-hidden="true">
+        {CHEVRON_RIGHT_ICON}
+      </span>
+      <input
+        className="project-title-input"
+        aria-label="Project title"
+        value={draft}
+        disabled={!open}
+        maxLength={80}
+        onChange={(event) => setDraft(event.target.value)}
+        onBlur={commit}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") event.currentTarget.blur();
+          if (event.key === "Escape") {
+            cancel.current = true;
+            setDraft(title);
+            event.currentTarget.blur();
+          }
+        }}
+      />
+      {!open ? null : (
+        <>
+          <span className="project-crumb-sep" aria-hidden="true">
+            {CHEVRON_RIGHT_ICON}
+          </span>
+          <button
+            ref={anchor}
+            type="button"
+            className="btn project-crumb is-current"
+            data-testid="header-shot-crumb"
+            aria-haspopup="menu"
+            aria-expanded={menuOpen}
+            // A mode shows one object or one component: jumping to a shot
+            // from inside it would leave the mode showing the wrong thing.
+            disabled={switchBlocked !== null}
+            title={switchBlocked ?? "Switch shot"}
+            onClick={() => setMenuOpen((was) => !was)}
+          >
+            <span style={CRUMB_LABEL}>{shotLabel}</span>
+            {/* AN SVG, NOT "▾". Every glyph button in this header draws a real
+                icon, and header.test.tsx holds that line by asserting the
+                toggle group's textContent is empty. A text arrow here would be
+                the one character in the bar that reads as content. */}
+            {CHEVRON_DOWN_ICON}
+          </button>
+          <Popover open={menuOpen} anchor={anchor} onClose={() => setMenuOpen(false)}>
+            <div className="project-crumb-menu" role="menu">
+              <button
+                type="button"
+                role="menuitem"
+                className={`project-crumb-item${enteredScene === null ? " is-current" : ""}`}
+                disabled={allBlocked !== null}
+                title={allBlocked ?? undefined}
+                onClick={allShots}
+              >
+                All shots
+              </button>
+              {rows.map((row) => (
+                <button
+                  key={row.id}
+                  type="button"
+                  role="menuitem"
+                  className={`project-crumb-item${row.id === enteredScene ? " is-current" : ""}`}
+                  onClick={() => {
+                    // LEAVE THE DEFINITION FIRST, the order `allShots` above
+                    // and the rail's back crumb both use. `editComponentAt`
+                    // never writes `enteredScene` and `enterSceneAt` never
+                    // writes `editingDef`, so the two coexist: without this,
+                    // picking the shot you are already in is swallowed by
+                    // `enterSceneAt`'s `sceneId === state.enteredScene` early
+                    // return and picking another one swaps the shot while the
+                    // stage keeps rendering the definition.
+                    store.editComponent(null);
+                    store.enterScene(row.id);
+                    setMenuOpen(false);
+                  }}
+                >
+                  {SCENE_ICON}
+                  {row.name}
+                </button>
+              ))}
+            </div>
+          </Popover>
+        </>
+      )}
+    </div>
+  );
+}

package/src/panels/header/ShareButton.tsx

@@ -0,0 +1,59 @@
+// "Share" in the top bar, beside Export. HOSTED ONLY: the local CLI has no
+// accounts to share between, so `isCloudWorkspace()` keeps it from asking.
+//
+// The editor keeps no rule about who may share. It asks `/auth/me?project=`
+// (worker/src/auth.ts), which answers this Project's actions from the same
+// grants the dashboard list reads, and draws the button only when they hold
+// `project.share`.
+//
+// The access dialog lives in the dashboard (Members.tsx `ProjectAccessDialog`),
+// so the button opens it there, in a new tab so the editor stays open. `ws`
+// lets the dashboard tell when its session sits in another workspace, rather
+// than opening a same-named project there.
+import { useEffect, useState } from "react";
+import { IconShare } from "@dailies-studio/ui";
+import { useShotEditor } from "../../state/context.js";
+import { isCloudWorkspace } from "../../state/posterCapture.js";
+
+interface MeProject {
+  signedIn?: boolean;
+  workspace?: { id?: string } | null;
+  projectActions?: string[];
+}
+
+export function ShareButton() {
+  const name = useShotEditor((s) => s.name);
+  const [workspace, setWorkspace] = useState<string | null>(null);
+  useEffect(() => {
+    setWorkspace(null);
+    if (name === null || !isCloudWorkspace()) return;
+    let live = true;
+    // A failed probe draws nothing: the dashboard's Share stays the way in.
+    void fetch(`/auth/me?project=${encodeURIComponent(`shot/${name}`)}`, { credentials: "same-origin" })
+      .then((res) => (res.ok ? (res.json() as Promise<MeProject>) : null))
+      .then((me) => {
+        const id = me?.workspace?.id;
+        if (live && me?.signedIn === true && typeof id === "string" && me.projectActions?.includes("project.share") === true) {
+          setWorkspace(id);
+        }
+      })
+      .catch(() => {});
+    return () => {
+      live = false;
+    };
+  }, [name]);
+  if (name === null || workspace === null) return null;
+  const href = `/projects/?${new URLSearchParams({ share: `shot/${name}`, ws: workspace }).toString()}`;
+  return (
+    <button
+      type="button"
+      className="btn header-share"
+      aria-label="Share"
+      title="Share this project"
+      onClick={() => window.open(href, "_blank", "noopener")}
+    >
+      <IconShare aria-hidden="true" />
+      Share
+    </button>
+  );
+}