@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/fonts/pickerModel.ts

@@ -0,0 +1,265 @@
+// THE FONT PICKER'S LIST, as one flat array (FontPicker.tsx windows it): the
+// sections in their fixed order, each a head row then its families, a family
+// once, in the highest section that has it (case-folded), every section
+// filtered by the search and the category chip at once, empty sections gone.
+import { isGenericFontFamily } from "@dailies-studio/shot/doc";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import { appliesVariableFile, findGoogleFont, pickerShows, searchGoogleFonts } from "../../fonts/googleFonts.js";
+import type { GoogleFontCategory, GoogleFontEntry } from "../../fonts/googleFonts.js";
+import type { WorkspaceFont } from "../../api.js";
+import { projectFontFamilies } from "../../state/fonts.js";
+import type { FontPick, ProjectFontFamily } from "../../state/fonts.js";
+import { fold } from "../../state/fontRecents.js";
+import type { FontRecent } from "../../state/fontRecents.js";
+import { googleFace, projectFace, workspaceFace } from "./faceCache.js";
+import type { PreviewFace } from "./faceCache.js";
+
+export type PickerSection = "project" | "recent" | "workspace" | "google";
+
+export const SECTION_LABELS: Record<PickerSection, string> = {
+  project: "In this Project",
+  recent: "Recent",
+  workspace: "Workspace fonts",
+  google: "Google Fonts",
+};
+
+/** What a row says after its name. */
+export type FontTag =
+  | { kind: "variable" }
+  | { kind: "count"; count: number; unit: "weight" | "style" }
+  | { kind: "machine" };
+
+export interface FontRow {
+  type: "font";
+  /** Unique in the list: the section and the family's key. */
+  id: string;
+  /** The family case-folded: what makes two sources one family. */
+  key: string;
+  family: string;
+  section: PickerSection;
+  /** What Enter applies and the stage previews. Null for a machine font the
+   *  catalog does not have: its way in is Upload. */
+  pick: FontPick | null;
+  /** A family text names with no file (`drawsMachineFont`). */
+  machine: boolean;
+  /** Null draws the name in Inter. Only a Google row (Recent, Google Fonts)
+   *  fetches from jsDelivr: a family the Project holds draws from the
+   *  Project's own file, a machine font from the computer. */
+  face: PreviewFace | null;
+  tag: FontTag;
+  /** Its catalog category, null when the catalog does not know it. */
+  category: GoogleFontCategory | null;
+  /** What picking it records in Recent: where the family comes from. Null for
+   *  a file only this Project holds, which In this Project already lists. */
+  recent: FontRecent | null;
+}
+
+export interface HeadRow {
+  type: "head";
+  id: string;
+  label: string;
+  /** Google Fonts says how many families it lists. */
+  count?: number;
+}
+
+/** A line in the list that is not a family: the catalog loading or failed. */
+export interface NoteRow {
+  type: "note";
+  id: string;
+  text: string;
+  busy: boolean;
+}
+
+export type PickerItem = FontRow | HeadRow | NoteRow;
+
+export interface PickerInput {
+  doc: Doc3D;
+  /** Null while it loads. */
+  catalog: readonly GoogleFontEntry[] | null;
+  /** The catalog's chunk did not load. */
+  catalogFailed: boolean;
+  /** Null while it loads. */
+  workspace: readonly WorkspaceFont[] | null;
+  /** The workspace list did not load. */
+  workspaceFailed: boolean;
+  recents: readonly FontRecent[];
+  query: string;
+  /** The chip; null is All. */
+  category: GoogleFontCategory | null;
+  /** The selected text's family, case-folded; null when it is Mixed. */
+  current: string | null;
+}
+
+/** How well `name` matches the folded `query`, best 0, or -1 for no match:
+ *  the tiers `searchGoogleFonts` ranks the catalog by (exact, prefix, a
+ *  word's prefix, anywhere). */
+function matchTier(name: string, query: string): number {
+  const n = fold(name);
+  if (n === query) return 0;
+  if (n.startsWith(query)) return 1;
+  if (n.split(" ").some((word) => word.startsWith(query))) return 2;
+  return n.includes(query) ? 3 : -1;
+}
+
+const googleTag = (entry: GoogleFontEntry): FontTag =>
+  appliesVariableFile(entry) ? { kind: "variable" } : { kind: "count", count: entry.weights.length, unit: "weight" };
+
+function googleRow(section: PickerSection, entry: GoogleFontEntry): FontRow {
+  const key = fold(entry.family);
+  return {
+    type: "font",
+    id: `${section}:${key}`,
+    key,
+    family: entry.family,
+    section,
+    pick: { kind: "google", entry },
+    machine: false,
+    face: googleFace(entry),
+    tag: googleTag(entry),
+    category: entry.category,
+    recent: { kind: "google", family: entry.family },
+  };
+}
+
+function workspaceRow(section: PickerSection, family: string, fonts: readonly WorkspaceFont[]): FontRow {
+  const key = fold(family);
+  return {
+    type: "font",
+    id: `${section}:${key}`,
+    key,
+    family,
+    section,
+    pick: { kind: "workspace", family, fonts },
+    machine: false,
+    face: workspaceFace(fonts),
+    tag: fonts.some((font) => font.wghtAxis !== undefined)
+      ? { kind: "variable" }
+      : { kind: "count", count: fonts.length, unit: "style" },
+    category: null,
+    recent: { kind: "workspace", family },
+  };
+}
+
+function projectRow(row: ProjectFontFamily, doc: Doc3D, catalog: readonly GoogleFontEntry[] | null): FontRow {
+  const entry = row.source === "catalog" && catalog !== null ? findGoogleFont(catalog, row.family) : undefined;
+  const faces = row.pick.faces;
+  return {
+    type: "font",
+    id: `project:${row.key}`,
+    key: row.key,
+    family: row.family,
+    section: "project",
+    pick: row.pick,
+    machine: false,
+    face: projectFace(row, doc.assets, catalog),
+    tag: entry !== undefined
+      ? googleTag(entry)
+      : faces.some((face) => face.axis !== undefined)
+        ? { kind: "variable" }
+        : { kind: "count", count: faces.length, unit: "style" },
+    category: entry?.category ?? null,
+    recent: row.source === "file" ? null : { kind: row.source === "catalog" ? "google" : "workspace", family: row.family },
+  };
+}
+
+function machineRow(key: string, family: string, catalog: readonly GoogleFontEntry[] | null): FontRow {
+  const entry = catalog === null ? undefined : findGoogleFont(catalog, family);
+  return {
+    type: "font",
+    id: `project:${key}`,
+    key,
+    family,
+    section: "project",
+    pick: entry === undefined ? null : { kind: "google", entry },
+    machine: true,
+    // The face the stage draws it in, the computer's own: nothing is fetched.
+    face: { family, url: null },
+    tag: { kind: "machine" },
+    category: entry?.category ?? null,
+    recent: entry === undefined ? null : { kind: "google", family: entry.family },
+  };
+}
+
+/** Workspace font rows by family, in list order. */
+function workspaceFamilies(fonts: readonly WorkspaceFont[]): [string, WorkspaceFont[]][] {
+  const families = new Map<string, WorkspaceFont[]>();
+  for (const font of fonts) {
+    const held = families.get(font.family);
+    if (held === undefined) families.set(font.family, [font]);
+    else held.push(font);
+  }
+  return [...families];
+}
+
+export function pickerItems(input: PickerInput): PickerItem[] {
+  const { doc, catalog, workspace, query, category } = input;
+  const q = fold(query);
+  // A row the catalog does not know shows under All only.
+  const shows = (row: FontRow): boolean =>
+    row.category === null ? category === null : pickerShows({ category: row.category }, category);
+  const seen = new Set<string>();
+  const items: PickerItem[] = [];
+  /** A section: its rows filtered and (outside Google, which the catalog
+   *  search ranks) ranked by the search, each family once. */
+  const section = (id: PickerSection, rows: readonly FontRow[]): void => {
+    let kept = rows.filter(shows);
+    if (q.length > 0 && id !== "google") {
+      kept = kept
+        .map((row, at) => ({ row, at, tier: matchTier(row.family, q) }))
+        .filter((hit) => hit.tier >= 0)
+        .sort((a, b) => a.tier - b.tier || a.at - b.at)
+        .map((hit) => hit.row);
+    }
+    const once: FontRow[] = [];
+    for (const row of kept) {
+      if (seen.has(row.key)) continue;
+      seen.add(row.key);
+      once.push(row);
+    }
+    if (once.length === 0) return;
+    items.push({ type: "head", id: `head:${id}`, label: SECTION_LABELS[id], ...(id === "google" ? { count: once.length } : {}) }, ...once);
+  };
+
+  const project = projectFontFamilies(doc, catalog, workspace);
+  section("project", [
+    ...project.families.map((row) => projectRow(row, doc, catalog)),
+    // A generic keyword (serif) is no family a pick can write or a file can
+    // be, so only the current family's row shows it, the check on it.
+    ...project.machine
+      .filter((m) => m.key === input.current || !isGenericFontFamily(m.family))
+      .map((m) => machineRow(m.key, m.family, catalog)),
+  ]);
+
+  section(
+    "recent",
+    input.recents.flatMap((recent): FontRow[] => {
+      if (recent.kind === "google") {
+        const entry = catalog === null ? undefined : findGoogleFont(catalog, recent.family);
+        return entry === undefined ? [] : [googleRow("recent", entry)];
+      }
+      const fonts = (workspace ?? []).filter((font) => fold(font.family) === fold(recent.family));
+      return fonts.length === 0 ? [] : [workspaceRow("recent", fonts[0]!.family, fonts)];
+    }),
+  );
+
+  if (workspace !== null) {
+    section("workspace", workspaceFamilies(workspace).map(([family, fonts]) => workspaceRow("workspace", family, fonts)));
+  } else if (input.workspaceFailed) {
+    items.push(
+      { type: "head", id: "head:workspace", label: SECTION_LABELS.workspace },
+      { type: "note", id: "note:workspace", text: "Workspace fonts did not load. Open the picker again to retry.", busy: false },
+    );
+  }
+
+  if (catalog !== null) {
+    section("google", searchGoogleFonts(catalog, query).map((entry) => googleRow("google", entry)));
+  } else {
+    items.push(
+      { type: "head", id: "head:google", label: SECTION_LABELS.google },
+      input.catalogFailed
+        ? { type: "note", id: "note:google", text: "Google Fonts did not load. Open the picker again to retry.", busy: false }
+        : { type: "note", id: "note:google", text: "Loading Google Fonts…", busy: true },
+    );
+  }
+  return items;
+}

package/src/panels/fonts/pickerRequest.ts

@@ -0,0 +1,46 @@
+// A request to open the font picker from somewhere other than its own field:
+// the Typography section's machine-font note opens it on the upload view
+// ("Upload font file"). The Font field listens and opens the picker on the
+// asked view. Kept out of the picker's lazy chunk, so the note can ask
+// before that chunk has loaded.
+import { useSyncExternalStore } from "react";
+
+export type FontPickerView = "list" | "upload";
+
+/** How the picker closed, which says where focus goes: back to the Font
+ *  field ("refocus": a pick, Escape in the editor's window), on from the field
+ *  ("tab": Tab moves to the next control), or where a press outside put it
+ *  ("stay"; a press or Escape on the stage hands focus to its frame). */
+export type FontPickerClose = "refocus" | "tab" | "stay";
+
+/** The dashboard's Fonts tab. The editor host sends `/projects/*` to the main
+ *  host, so the relative link works on both, and on the local CLI. */
+export const MANAGE_FONTS_HREF = "/projects/?view=settings-fonts";
+
+/** One request. `seq` grows with every request, so asking for the same view
+ *  twice still opens the picker the second time. */
+export interface FontPickerRequest {
+  view: FontPickerView;
+  seq: number;
+}
+
+let current: FontPickerRequest | null = null;
+const listeners = new Set<() => void>();
+
+/** Ask the Font field to open the picker on `view`. */
+export function requestFontPicker(view: FontPickerView): void {
+  current = { view, seq: (current?.seq ?? 0) + 1 };
+  for (const listener of listeners) listener();
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** The latest request, or null before the first. */
+export function useFontPickerRequest(): FontPickerRequest | null {
+  return useSyncExternalStore(subscribe, () => current, () => null);
+}

package/src/panels/header/AccountAvatar.tsx

@@ -0,0 +1,76 @@
+// The signed-in author's initials, at the end of the top bar. HOSTED ONLY: the
+// local CLI has no accounts, so `isCloudWorkspace()` keeps this from asking.
+// The name comes off `/auth/me`, the session probe the editor host answers
+// (worker/src/auth.ts), read once per page. A click opens the profile through
+// `leaveFor`, the same way out the app menu's Profile row takes.
+//
+// A guest in the current workspace also gets a "Guest" note beside it. The
+// role is the server's effective one (`/auth/me` says "guest" for a guest), so
+// the editor keeps no rule of its own about who counts as one.
+import { useEffect, useState } from "react";
+import { IconUser, initialsOf, personInitial } from "@dailies-studio/ui";
+import { useStore } from "../../state/context.js";
+import { isCloudWorkspace } from "../../state/posterCapture.js";
+import { leaveFor } from "./leave.js";
+
+/** The signed-in author's name and whether they are a guest here, off
+ *  `/auth/me`. Null locally, before the probe answers, and when it fails.
+ *  The Components footer's avatar reads it too. */
+export function useSignedIn(): { name: string; guest: boolean } | null {
+  const [name, setName] = useState<string | null>(null);
+  const [guest, setGuest] = useState(false);
+  useEffect(() => {
+    if (!isCloudWorkspace()) return;
+    let live = true;
+    // A failed probe draws nothing: the menu's Profile row is still there.
+    void fetch("/auth/me", { credentials: "same-origin" })
+      .then((res) => (res.ok ? res.json() : null))
+      .then(
+        (
+          me: {
+            signedIn?: boolean;
+            login?: string;
+            displayName?: string;
+            workspace?: { role?: string } | null;
+          } | null,
+        ) => {
+          if (!live || me?.signedIn !== true) return;
+          setName(me.displayName ?? me.login ?? null);
+          setGuest(me.workspace?.role === "guest");
+        },
+      )
+      .catch(() => {});
+    return () => {
+      live = false;
+    };
+  }, []);
+  return name === null ? null : { name, guest };
+}
+
+export function AccountAvatar() {
+  const store = useStore();
+  const me = useSignedIn();
+  if (me === null) return null;
+  const { name, guest } = me;
+  return (
+    <>
+      {guest && (
+        <span
+          className="header-guest"
+          title="You see only the projects shared with you, and only the people on those projects."
+        >
+          Guest
+        </span>
+      )}
+      <button
+        type="button"
+        className="header-avatar"
+        aria-label={`Profile: ${name}`}
+        title={name}
+        onClick={() => leaveFor(store, "/projects/?view=profile")}
+      >
+        {personInitial(name) === null ? <IconUser /> : initialsOf(name)}
+      </button>
+    </>
+  );
+}

package/src/panels/header/AgentChip.tsx

@@ -0,0 +1,77 @@
+// The Agent chip, in the top bar before the avatar: whether an outside agent
+// can reach this workspace over MCP, in two words, and the connect rows under
+// it. It replaced the left column's 64px MCP band.
+//
+// The word is HEALTH ONLY (`mcpWord`): "MCP ready", "Read only", "MCP off",
+// "No access". A hosted role without `mcp.connect` wears the off tone.
+// `/api/health` cannot see a client, so the chip never says "connected".
+//
+// One probe (`useMcpHealth`), held here and handed to the details, so the chip
+// and its popover cannot disagree. The popover is portaled to <body>, so the
+// header's `inert` under the Library does not reach it: it closes when the
+// Library opens instead. The Popover's outside-pointerdown ignores its anchor,
+// so a second press on the chip closes it through this toggle.
+import { useEffect, useRef, useState } from "react";
+import { PanelBoundary } from "@dailies-studio/ui";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { ADMINS_ONLY_NOTE, McpPopover, adminsOnly, mcpWord, useMcpHealth } from "../files/McpSection.js";
+import { agentHandoffPrompt } from "./agentHandoff.js";
+
+export function AgentChip() {
+  const name = useShotEditor((s) => s.name);
+  if (name === null) return null;
+  return (
+    <PanelBoundary label="Agent chip">
+      <Chip name={name} />
+    </PanelBoundary>
+  );
+}
+
+function Chip({ name }: { name: string }) {
+  const store = useStore();
+  const title = useShotEditor((s) => s.doc?.title ?? s.name);
+  const libraryOpen = useShotEditor((s) => s.libraryBrowserOpen);
+  const { health, retry } = useMcpHealth(name);
+  const [open, setOpen] = useState(false);
+  const chip = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (libraryOpen) setOpen(false);
+  }, [libraryOpen]);
+
+  const word = mcpWord(health);
+  const tone =
+    health.kind !== "ready"
+      ? "is-unknown"
+      : !health.mounted || !health.allowed
+        ? "is-off"
+        : health.write ? "is-write" : "is-read";
+  return (
+    <>
+      <button
+        ref={chip}
+        type="button"
+        className={`btn agent-chip ${tone}`}
+        data-testid="agent-chip"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        title={adminsOnly(health) ? ADMINS_ONLY_NOTE : "Connect your AI over MCP"}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <span className="agent-chip-dot" aria-hidden="true" />
+        <span className="agent-chip-label">Agent</span>
+        <span className="agent-chip-word">{word}</span>
+      </button>
+      <McpPopover
+        anchor={chip}
+        open={open}
+        onClose={() => setOpen(false)}
+        health={health}
+        onRetry={retry}
+        projectName={name}
+        projectTitle={title}
+        handoff={() => agentHandoffPrompt(store.getState())}
+      />
+    </>
+  );
+}

package/src/panels/header/AppMenu.tsx

@@ -0,0 +1,213 @@
+// THE APP MENU'S BUTTON: the brand mark in the top-left, and every verb this
+// chrome has behind it.
+//
+// ── WHY THE TOP-LEFT ─────────────────────────────────────────────────────
+//
+// The brand button leads the Project identity, in the corner every desktop app
+// reserves for its menu.
+//
+// ── AND WHY THIS FILE IS SO SHORT ────────────────────────────────────────
+//
+// The tree is DATA (`appMenuEntries`) and the framework is shared
+// (`useContextMenu`, which already portals to <body>, clamps and flips against
+// the viewport, nests submenus, drives the arrows, closes on Escape and an
+// outside press, and restores focus). What is left is: a button, a rect to open
+// at, and the four things a menu row cannot do by itself.
+//
+// ── THOSE FOUR THINGS ────────────────────────────────────────────────────
+//
+// A file dialog can only be opened by a click on a real `<input>` (the store is
+// not one, which is why `imagePick` exists), and a name has to be ASKED for. So
+// this file owns one hidden input and one `usePrompt`, and hands the menu
+// callbacks, using the same `onRename` hatch `shotMenuEntries` established. Project
+// lifecycle is deliberately absent here; `/projects/` owns it.
+//
+// The input is HERE and not borrowed from `AddMenu`: that one lives inside
+// `ToolDockBar`, which UNMOUNTS ENTIRELY in the scene context, so it is not in
+// the document at exactly the moment a global row would click it.
+import { useEffect, useRef, useState } from "react";
+import { DailiesMark, useConfirm, usePrompt, useContextMenu, useToasts } from "@dailies-studio/ui";
+import { homeOf } from "@dailies-studio/shot/doc";
+import { useStudioTheme } from "@dailies-studio/ui/theme";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { appMenuEntries } from "../../state/menu.js";
+import type { AppMenuHooks } from "../../state/menu.js";
+import { shortcutFor } from "../../state/shortcuts.js";
+import { CHEVRON_DOWN_ICON } from "../../icons.js";
+import { HelpDialog } from "../help/HelpSection.js";
+import { PreferencesDialog } from "../../app/lazySurfaces.js";
+import { leaveFor } from "./leave.js";
+
+export function AppMenu() {
+  const store = useStore();
+  const { preference: themePreference, setPreference: setThemePreference } = useStudioTheme();
+  const { open, menu } = useContextMenu();
+  const { prompt, dialog } = usePrompt();
+  const { confirm, dialog: confirmDialog } = useConfirm();
+  const { toast, node: toasts } = useToasts();
+  const [helpOpen, setHelpOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const audioRef = useRef<HTMLInputElement | null>(null);
+  // ⌘K's mailbox. The ONE subscription in this component, and it is to an object
+  // identity rather than to any state the tree reads — see `appMenu` in types.ts
+  // and `StageMenu`, which is the same shape for the same reason.
+  const request = useShotEditor((s) => s.appMenu);
+  // `menu` is null while closed, so the button's `aria-expanded` is DERIVED from
+  // it. No second open bit: `useContextMenu` owns the three ways a menu is
+  // dismissed (Escape, an outside press, an action firing) and reports none of
+  // them, so a mirrored boolean here could only ever be the stale one.
+  const isOpen = menu !== null;
+
+  // THE TREE IS READ WITH `getState()` AT OPEN TIME — StageMenu's rule — because
+  // a menu built from subscribed slices would need one subscription per predicate
+  // in it, in the header, which re-renders every control up there on each
+  // notification.
+  const report = (e: unknown): void =>
+    store.reportError(e instanceof Error ? e.message : String(e));
+
+  const hooks: AppMenuHooks = {
+    themePreference,
+    onThemePreference: setThemePreference,
+    onRegenerate: () => {
+      void confirm({
+        title: "Regenerate the component",
+        message:
+          "This overwrites the generated file with what the document says, discarding any hand " +
+          "edits in it. This cannot be undone.",
+        confirmLabel: "Regenerate",
+        danger: true,
+      }).then((yes) => {
+        if (yes) void store.regenerateShot();
+      });
+    },
+    onCopyPath: (path) => {
+      // `navigator.clipboard` is absent over plain http on a non-localhost host,
+      // which the hosted lane is not but a LAN dev server can be, so the failure
+      // path says the path instead of silently doing nothing. A success leaves
+      // the error strip alone: it may hold an unrelated message.
+      const fail = (): void => store.reportError(`Copy failed. The generated file is at ${path}`);
+      if (navigator.clipboard === undefined) return fail();
+      void navigator.clipboard.writeText(path).then(
+        () => void toast({ message: "Path copied", severity: "success" }),
+        fail,
+      );
+    },
+    onRenameScene: (sceneId) => {
+      const scene = store.getState().doc?.scenesById[sceneId];
+      void prompt({
+        title: "Rename shot",
+        label: "Name",
+        initialValue: scene?.name ?? "",
+      }).then((name) => {
+        if (name !== null && name.trim() !== "") store.renameScene(sceneId, name.trim());
+      });
+    },
+    onRenameLayer: (layerId) => {
+      // The container `store.renameLayer` writes to (`layerContainer()`).
+      const s = store.getState();
+      const container = s.editingDef ?? s.sceneId;
+      const layer =
+        s.doc === null || container === null ? undefined : homeOf(s.doc, container)?.layersById[layerId];
+      void prompt({ title: "Rename layer", label: "Name", initialValue: layer?.label ?? "" }).then((name) => {
+        if (name !== null && name.trim() !== "") store.renameLayer(layerId, name.trim());
+      });
+    },
+    onRenameComponent: (defId) => {
+      const def = store.getState().doc?.components?.[defId];
+      void prompt({
+        title: "Rename component",
+        label: "Name",
+        initialValue: def?.name ?? "",
+      }).then((name) => {
+        if (name !== null && name.trim() !== "") store.renameComponent(defId, name.trim());
+      });
+    },
+    onImportAudio: () => audioRef.current?.click(),
+    onOpenHelp: () => setHelpOpen(true),
+    // One way out for every row, shared with the `Projects` crumb and the
+    // avatar: see `leaveFor` on why it flushes first and stays on a failure.
+    onNavigate: (href) => leaveFor(store, href),
+  };
+
+  const show = (): void => {
+    const el = buttonRef.current;
+    if (el === null) return;
+    // A POINT FROM THE BUTTON'S RECT, not a new anchoring API on the menu.
+    // `Popover` already owns anchor-to-element and has no keyboard model;
+    // composing the two would be a third floating primitive for two lines of
+    // arithmetic. The gap matches the header's own 12px inset feel.
+    const r = el.getBoundingClientRect();
+    open({ x: r.left, y: r.bottom + 6 }, appMenuEntries(store, store.getState(), hooks), {
+      // ONE SURFACE, not a menu plus a palette. Framer's list has a search field
+      // at the top AND a "Quick Actions ⌘K" row below it; here ⌘K opens this and
+      // the field is already focused, so the second row would point at itself.
+      search: "Type to search…",
+      // Paper's workspace menu keeps both 16px lanes on every row of every
+      // level, so File's labels line up with the root's when it opens beside it.
+      lanes: "always",
+    });
+  };
+
+  // ⌘K, arriving through the store because the window's keydown listener cannot
+  // reach a popover. Keyed on the mailbox OBJECT, so a second press re-opens.
+  useEffect(() => {
+    if (request === null) return;
+    show();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `show` closes over
+    // fresh hooks/state every render by design; the mailbox identity is the trigger.
+  }, [request]);
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        // `.btn` first: hover, disabled and the `.is-active` accent-soft fill
+        // are the chrome's one button recipe, not a second one written here.
+        className={`btn app-menu-trigger${isOpen ? " is-active" : ""}`}
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-label="Menu"
+        // From the shortcut table, not typed here — `ZoomControls` typed its own
+        // hint and it drifted.
+        title={`Menu (${shortcutFor("app.menu") ?? ""})`}
+        data-testid="app-menu-trigger"
+        onClick={show}
+      >
+        {/* The Dailies mark in `currentColor`, the one brand element the
+            chrome draws (Paper's workspace trigger). */}
+        <DailiesMark className="app-menu-mark" />
+        <span className="app-menu-caret" aria-hidden="true">
+          {CHEVRON_DOWN_ICON}
+        </span>
+      </button>
+      {menu}
+      <input
+        ref={audioRef}
+        type="file"
+        accept="audio/*"
+        hidden
+        onChange={(e) => {
+          const file = e.target.files?.[0] ?? null;
+          // Clear FIRST: picking the same file twice must fire again, and an
+          // unchanged value fires no event at all.
+          e.target.value = "";
+          if (file === null) return;
+          // At the PLAYHEAD and into the entered shot when there is one, which
+          // is `importAudio`'s own convention — a master bed otherwise.
+          const s = store.getState();
+          void store
+            .importAudio(file, s.frame, s.enteredScene ?? undefined)
+            .catch(report);
+        }}
+      />
+      {dialog}
+      {confirmDialog}
+      {toasts}
+      <HelpDialog open={helpOpen} onClose={() => setHelpOpen(false)} />
+      {/* Opened by `prefsOpen` (the menu row, ⌘, and `prefs.open`), and
+          fetched at its first open (app/lazySurfaces.tsx). */}
+      <PreferencesDialog />
+    </>
+  );
+}