@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/fonts/FontPicker.tsx

@@ -0,0 +1,762 @@
+// THE FONT PICKER (plans/FONT-PICKER-PLAN.md "The picker", Paper page "28 ·
+// Font picker"): a lazy chunk (app/lazySurfaces.tsx) the Font field mounts
+// only while it is open. This module owns its Popover, so the search input it
+// focuses once the popover is placed exists in the same commit.
+//
+// - FOCUS STAYS IN THE SEARCH. It is the combobox: the arrows, Page Up/Down
+//   and Home/End move ONE active option (`aria-activedescendant`), as the
+//   pointer does, and the active option previews on the stage
+//   (`store.previewFont`, which debounces). Enter or a click applies it
+//   (`store.applyFont`), records it in Recent and closes; with nothing
+//   matching, Enter opens the upload view. Alt+Left and Alt+Right step the
+//   category chip. Escape restores and closes, Tab closes with nothing
+//   chosen. A press on anything in either view that is not a control keeps
+//   focus where it is: on <body>, the editor's keymap would take the next
+//   key (Backspace deletes the selected layer).
+// - NO KEY LEAVES THE PICKER. The frame stops every keydown inside it, so the
+//   window keymap never reads a key pressed on the upload view's buttons (a
+//   focused button owns no Backspace, arrow or tool letter there). The
+//   Popover's Escape runs first, on the window's capture phase.
+// - ITS HEIGHT IS FIXED AT THE ROOM IT HAS: the larger side of the field,
+//   at most min(560px, 70vh). A box sized by its content shrank as a search
+//   narrowed, so the popover re-placed it and its top (the search) moved
+//   while the author typed; one taller than either side ran off the window.
+// - EVERY CLOSE GOES THROUGH `dismiss`, which clears the preview and tells the
+//   field where focus goes. Calling `previewFont(null)` right after an apply
+//   is safe: the store holds a preview through the apply's download.
+// - ONE FLAT, VIRTUAL LIST (pickerModel.ts), windowed at any length, since a
+//   row on screen loads its face (the rows mounted past each edge ask for
+//   none, so they never queue ahead of the ones the author sees): section
+//   heads are items of the row height,
+//   the active option is always mounted (pinned) and scrolled to by its index
+//   times the row height. Each option says its place in the whole list
+//   (`aria-posinset` of `aria-setsize`), which the mounted ones alone do not.
+// - THE STAGE IS ANOTHER DOCUMENT: a press there only closes the picker and
+//   Escape there closes it (`useDismiss`, its frame half), and nothing closes
+//   it on a window blur, which the OS file dialog causes. Either hands focus
+//   to that frame, where the pointer is, so the next arrow nudges the text and
+//   Space plays, as on any press on the stage.
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { DragEvent, KeyboardEvent, PointerEvent, ReactNode, RefObject } from "react";
+import { isGenericFontFamily } from "@dailies-studio/shot/doc";
+import { IconCheck, IconChevron, IconSearch, IconUpload, Popover, SegmentedControl } from "@dailies-studio/ui";
+import { PICKER_CATEGORIES } from "../../fonts/googleFonts.js";
+import type { GoogleFontCategory } from "../../fonts/googleFonts.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { fold, readFontRecents, recordFontRecent } from "../../state/fontRecents.js";
+import { useDismiss } from "../toolbar/useDismiss.js";
+import { pinnedWindowSpans, useFixedVirtualWindow } from "../virtualWindow.js";
+import { faceStack, usePreviewFace } from "./faceCache.js";
+import { pickerItems } from "./pickerModel.js";
+import type { FontRow, FontTag, PickerItem } from "./pickerModel.js";
+import { MANAGE_FONTS_HREF } from "./pickerRequest.js";
+import type { FontPickerClose, FontPickerView } from "./pickerRequest.js";
+import "./fontPicker.css";
+
+/** Every item's height, heads included: what the window and the scroll
+ *  arithmetic read. The sheet takes it from `--font-picker-row-h`. */
+export const FONT_PICKER_ROW_H = 32;
+/** Page Up/Down's step where the list has no measured height (jsdom). */
+const PAGE_FALLBACK = 8;
+/** The tallest the picker stands, and its share of the window. */
+const PICKER_MAX_H = 560;
+const PICKER_MAX_SHARE = 0.7;
+/** Kept clear between the picker and the window's edge: the popover's 4px
+ *  gap and 8 more. */
+const PICKER_EDGE = 12;
+/** The least it stands: the search, the chips, a few rows and the footer. */
+const PICKER_MIN_H = 200;
+
+/** The picker's height beside `anchor`: the larger side's room, capped. */
+function pickerHeight(anchor: DOMRect, windowHeight: number): number {
+  const room = Math.max(windowHeight - anchor.bottom, anchor.top) - PICKER_EDGE;
+  return Math.floor(Math.max(PICKER_MIN_H, Math.min(PICKER_MAX_H, windowHeight * PICKER_MAX_SHARE, room)));
+}
+
+export interface FontPickerProps {
+  /** The field box the popover hangs from. */
+  anchor: RefObject<HTMLElement | null>;
+  view: FontPickerView;
+  onView: (view: FontPickerView) => void;
+  /** The family the selected text draws, or null when it is Mixed. */
+  current: string | null;
+  /** Some selected text names `current` with no file (`drawsMachineFont`),
+   *  so picking the Project's own copy of it still writes. */
+  currentMachine: boolean;
+  onClose: (how: FontPickerClose) => void;
+}
+
+export function FontPicker(props: FontPickerProps) {
+  const store = useStore();
+  const search = useRef<HTMLInputElement>(null);
+  const choose = useRef<HTMLButtonElement>(null);
+
+  const dismiss = (how: FontPickerClose): void => {
+    store.previewFont(null);
+    props.onClose(how);
+  };
+  // Only the frame half, so every call is a press or Escape in a stage frame:
+  // focus goes to that frame. With no frame element to name, back to the field.
+  useDismiss(
+    true,
+    props.anchor,
+    (frame?: Window) => {
+      const into = frame?.frameElement;
+      if (!(into instanceof HTMLElement)) return dismiss("refocus");
+      dismiss("stay");
+      into.focus();
+    },
+    { window: false, blur: false },
+  );
+
+  const focusView = (): void => (props.view === "list" ? search.current : choose.current)?.focus();
+  // Opening goes through `onPlaced` (a hidden popover takes no focus); a
+  // switch between the list and the upload view lands here.
+  useEffect(focusView, [props.view]);
+
+  // Measured before the popover first places it (the anchor is the mounted
+  // field), then again when the window or a scroller moves the field.
+  const room = (): number | null => {
+    const box = props.anchor.current?.getBoundingClientRect();
+    return box === undefined ? null : pickerHeight(box, window.innerHeight);
+  };
+  const [height, setHeight] = useState(room);
+  useEffect(() => {
+    const measure = (): void => setHeight(room());
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, true);
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, true);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Popover
+      open
+      anchor={props.anchor}
+      align="right"
+      className="font-picker"
+      onPlaced={focusView}
+      onClose={(reason) => dismiss(reason === "escape" ? "refocus" : "stay")}
+    >
+      <div
+        className="font-picker-frame"
+        {...(height === null ? {} : { style: { height } })}
+        // Focus stays where it is (the search, or the upload view's control)
+        // through a press on a row, a head, a note, a line, the key hints or
+        // the ground: on <body>, the editor's keymap would take the next key.
+        // A control (the search itself, a chip, a button, the link) takes the
+        // press as it would.
+        onPointerDown={(e) => {
+          if ((e.target as Element).closest("input, button, a") === null) e.preventDefault();
+        }}
+        // No key reaches the window keymap: stopped at the portal's root, so
+        // Enter, Space and Tab keep their default actions.
+        onKeyDown={(e) => e.stopPropagation()}
+      >
+        {props.view === "list" ? (
+          <FontList {...props} search={search} dismiss={dismiss} />
+        ) : (
+          <UploadView choose={choose} onBack={() => props.onView("list")} onDone={() => dismiss("refocus")} />
+        )}
+      </div>
+    </Popover>
+  );
+}
+
+// ── THE LIST ──────────────────────────────────────────────────────────────
+
+function FontList(props: FontPickerProps & { search: RefObject<HTMLInputElement | null>; dismiss: (how: FontPickerClose) => void }) {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const catalog = useShotEditor((s) => s.fontCatalog);
+  const workspace = useShotEditor((s) => s.workspaceFonts);
+  const [catalogFailed, setCatalogFailed] = useState(false);
+  const [workspaceFailed, setWorkspaceFailed] = useState(false);
+  const [recents] = useState(readFontRecents);
+  const [query, setQuery] = useState("");
+  const [category, setCategory] = useState<GoogleFontCategory | null>(null);
+  // The option the arrows or the pointer moved to; null is the default one:
+  // the current family on an open, else the top result.
+  const [activeId, setActiveId] = useState<string | null>(null);
+  // The preview waits for the author's first move: the open alone shows the
+  // stage as it is.
+  const touched = useRef(false);
+  // The next active change scrolls it into view (the arrows, a search, the
+  // open); a hover does not, since the row is under the pointer.
+  const reveal = useRef(true);
+  const lastPointer = useRef<{ x: number; y: number } | null>(null);
+  const scroller = useRef<HTMLDivElement>(null);
+  const list = useRef<HTMLUListElement>(null);
+  const baseId = useId();
+  const listId = `${baseId}-list`;
+  const optionId = (index: number): string => `${baseId}-option-${index}`;
+
+  useEffect(() => {
+    let live = true;
+    void store.loadFontCatalog().then((fonts) => {
+      if (live && fonts === null) setCatalogFailed(true);
+    });
+    // Read again on every open, so a font added in another tab shows.
+    void store.loadWorkspaceFonts(true).then((list) => {
+      if (live && list === null) setWorkspaceFailed(true);
+    });
+    return () => {
+      live = false;
+      // Leaving the list for the upload view takes its preview with it.
+      store.previewFont(null);
+    };
+  }, [store]);
+
+  const currentKey = props.current === null ? null : fold(props.current);
+  const items = useMemo(
+    () =>
+      doc === null
+        ? []
+        : pickerItems({ doc, catalog, catalogFailed, workspace: workspace?.fonts ?? null, workspaceFailed, recents, query, category, current: currentKey }),
+    [doc, catalog, catalogFailed, workspace, workspaceFailed, recents, query, category, currentKey],
+  );
+  const fontIndexes = useMemo(() => items.flatMap((item, at) => (item.type === "font" ? [at] : [])), [items]);
+  // Each option's place among the options, from 1, by its item index.
+  const positions = useMemo(() => new Map(fontIndexes.map((at, n) => [at, n + 1])), [fontIndexes]);
+  const activeIndex = useMemo(() => {
+    if (activeId !== null) {
+      const at = items.findIndex((item) => item.id === activeId);
+      if (at >= 0) return at;
+    }
+    const current = query === "" && currentKey !== null
+      ? items.findIndex((item) => item.type === "font" && item.key === currentKey)
+      : -1;
+    return current >= 0 ? current : (fontIndexes[0] ?? -1);
+  }, [activeId, items, fontIndexes, query, currentKey]);
+  const active = items[activeIndex];
+  const activeRow = active?.type === "font" ? active : null;
+
+  useEffect(() => {
+    if (!touched.current) return;
+    // The current family previews as the stage already draws it, but for the
+    // Project's own file of it while some text draws it from the computer:
+    // that file is the change a pick makes.
+    const asDrawn = activeRow?.key === currentKey && (activeRow.machine || !props.currentMachine);
+    store.previewFont(activeRow === null || asDrawn ? null : activeRow.pick);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeRow?.id]);
+
+  useLayoutEffect(() => {
+    const box = scroller.current;
+    if (!reveal.current || box === null || activeIndex < 0) return;
+    reveal.current = false;
+    // A section's first row brings its head with it.
+    const top = (items[activeIndex - 1]?.type === "head" ? activeIndex - 1 : activeIndex) * FONT_PICKER_ROW_H;
+    const bottom = (activeIndex + 1) * FONT_PICKER_ROW_H;
+    if (top < box.scrollTop) box.scrollTop = top;
+    else if (bottom > box.scrollTop + box.clientHeight) box.scrollTop = bottom - box.clientHeight;
+  }, [activeIndex, items]);
+
+  const range = useFixedVirtualWindow({
+    listRef: list,
+    scrollSelector: ".font-picker-scroll",
+    count: items.length,
+    rowHeight: FONT_PICKER_ROW_H,
+    enabled: true,
+  });
+  // The rows on screen, the window less its overscan: only they ask for a
+  // face (faceCache.ts), so a stop after a fast scroll loads what it shows
+  // first and fetches nothing for the rows mounted past either edge.
+  const onScreen = useFixedVirtualWindow({
+    listRef: list,
+    scrollSelector: ".font-picker-scroll",
+    count: items.length,
+    rowHeight: FONT_PICKER_ROW_H,
+    enabled: true,
+    overscanRows: 0,
+  });
+
+  const moveTo = (index: number | undefined): void => {
+    const item = index === undefined ? undefined : items[index];
+    if (item?.type !== "font") return;
+    touched.current = true;
+    reveal.current = true;
+    setActiveId(item.id);
+  };
+  const step = (delta: number): void => {
+    const at = fontIndexes.indexOf(activeIndex);
+    moveTo(fontIndexes[at < 0 ? 0 : Math.max(0, Math.min(fontIndexes.length - 1, at + delta))]);
+  };
+  const page = (): number => {
+    const height = scroller.current?.clientHeight ?? 0;
+    return height > 0 ? Math.max(1, Math.floor(height / FONT_PICKER_ROW_H) - 1) : PAGE_FALLBACK;
+  };
+
+  const commit = (row: FontRow): void => {
+    // A generic keyword (sans-serif) is no family a file could be: nothing to
+    // apply or upload.
+    if (row.machine && row.pick === null && isGenericFontFamily(row.family)) {
+      props.dismiss("refocus");
+      return;
+    }
+    // A machine font the catalog does not have comes in as a file.
+    if (row.machine && row.pick === null) {
+      props.onView("upload");
+      return;
+    }
+    if (row.machine && row.key === currentKey) {
+      // The selection draws this machine font: give it the catalog's file.
+      void store.selfHostFont();
+    } else if (row.pick !== null && (row.key !== currentKey || props.currentMachine)) {
+      // Another family, or the Project's own copy of the current one for the
+      // text that draws it from the computer (no fetch: the files are held).
+      void store.applyFont(row.pick);
+    }
+    if (row.recent !== null) recordFontRecent(row.recent);
+    props.dismiss("refocus");
+  };
+
+  const pickCategory = (next: GoogleFontCategory | null): void => {
+    setCategory(next);
+    setActiveId(null);
+    touched.current = true;
+    reveal.current = true;
+  };
+  // The chips in turn, as the segmented control's own arrows go: round.
+  const stepCategory = (delta: number): void => {
+    const n = PICKER_CATEGORIES.length;
+    const at = PICKER_CATEGORIES.findIndex((c) => c.category === category);
+    pickCategory(PICKER_CATEGORIES[(((at + delta) % n) + n) % n]!.category);
+  };
+
+  const nothing = query.trim() !== "" && fontIndexes.length === 0 && (catalog !== null || catalogFailed);
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
+    if (e.nativeEvent.isComposing) return;
+    if (e.altKey && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+      stepCategory(e.key === "ArrowRight" ? 1 : -1);
+      e.preventDefault();
+      return;
+    }
+    // The keyboard's way to the upload view while fonts match: focus stays in
+    // the search and Tab closes, so the footer's button needs a key. By the
+    // key's place, not its character: Alt+U types a dead key on a Mac.
+    if (e.altKey && !e.ctrlKey && !e.metaKey && e.code === "KeyU") {
+      props.onView("upload");
+      e.preventDefault();
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        step(1);
+        break;
+      case "ArrowUp":
+        step(-1);
+        break;
+      case "PageDown":
+        step(page());
+        break;
+      case "PageUp":
+        step(-page());
+        break;
+      case "Home":
+        moveTo(fontIndexes[0]);
+        break;
+      case "End":
+        moveTo(fontIndexes[fontIndexes.length - 1]);
+        break;
+      case "Enter":
+        // Nothing matches: the one way on the empty state offers.
+        if (activeRow !== null) commit(activeRow);
+        else if (nothing) props.onView("upload");
+        break;
+      case "Tab":
+        // Not prevented: the field takes focus first, and the browser's Tab
+        // moves on from there (the popover is portaled to the end of <body>).
+        props.dismiss("tab");
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+  };
+
+  const hover = (index: number, e: PointerEvent): void => {
+    // A row scrolled under a still pointer is not a move: the arrows' row
+    // keeps the preview.
+    const at = { x: e.clientX, y: e.clientY };
+    const was = lastPointer.current;
+    lastPointer.current = at;
+    if ((was !== null && was.x === at.x && was.y === at.y) || index === activeIndex) return;
+    touched.current = true;
+    setActiveId(items[index]!.id);
+  };
+
+  const renderItem = (item: PickerItem, index: number): ReactNode => {
+    if (item.type === "head") {
+      return (
+        <li key={item.id} role="presentation" className="caps font-picker-head">
+          {item.label}
+          {item.count !== undefined && <span className="font-picker-num">{item.count.toLocaleString("en-US")}</span>}
+        </li>
+      );
+    }
+    if (item.type === "note") {
+      return (
+        <li key={item.id} role="presentation" className="font-picker-note" aria-busy={item.busy}>
+          {item.busy && <span className="font-picker-spinner" aria-hidden="true" />}
+          {item.text}
+        </li>
+      );
+    }
+    return (
+      <FontOption
+        key={item.id}
+        id={optionId(index)}
+        row={item}
+        position={positions.get(index)!}
+        size={fontIndexes.length}
+        active={index === activeIndex}
+        onScreen={index >= onScreen.start && index < onScreen.end}
+        current={item.key === currentKey}
+        onHover={(e) => hover(index, e)}
+        onPick={() => commit(item)}
+      />
+    );
+  };
+
+  const rows: ReactNode[] = [];
+  let cursor = 0;
+  const gap = (from: number, to: number): void => {
+    if (to > from) {
+      rows.push(
+        <li
+          key={`gap-${from}-${to}`}
+          role="presentation"
+          aria-hidden="true"
+          className="font-picker-gap"
+          style={{ height: (to - from) * FONT_PICKER_ROW_H }}
+        />,
+      );
+    }
+  };
+  for (const span of pinnedWindowSpans(range, items.length, activeIndex >= 0 ? [activeIndex] : [])) {
+    gap(cursor, span.start);
+    for (let at = span.start; at < span.end; at++) rows.push(renderItem(items[at]!, at));
+    cursor = span.end;
+  }
+  gap(cursor, items.length);
+
+  return (
+    <div className="font-picker-body" style={{ ["--font-picker-row-h" as string]: `${FONT_PICKER_ROW_H}px` }}>
+      <div className="font-picker-top">
+        <label className="search-field font-picker-search">
+          <IconSearch aria-hidden="true" />
+          <input
+            ref={props.search}
+            type="text"
+            role="combobox"
+            aria-label="Search fonts"
+            aria-expanded="true"
+            aria-controls={listId}
+            aria-autocomplete="list"
+            aria-keyshortcuts="Alt+ArrowLeft Alt+ArrowRight Alt+U"
+            {...(activeRow !== null ? { "aria-activedescendant": optionId(activeIndex) } : {})}
+            autoComplete="off"
+            spellCheck={false}
+            placeholder="Search fonts"
+            value={query}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setActiveId(null);
+              touched.current = true;
+              reveal.current = true;
+            }}
+            onKeyDown={onKeyDown}
+          />
+        </label>
+        {/* A press on a chip leaves focus in the search. */}
+        <div className="font-picker-chips" onPointerDown={(e) => e.preventDefault()}>
+          <SegmentedControl
+            className="is-chips"
+            ariaLabel="Font category"
+            value={category ?? "all"}
+            options={PICKER_CATEGORIES.map((c) => ({ value: c.category ?? "all", label: c.label }))}
+            onChange={(next) => pickCategory(next === "all" ? null : (next as GoogleFontCategory))}
+          />
+        </div>
+      </div>
+      <div className="font-picker-scroll" ref={scroller}>
+        <ul id={listId} ref={list} role="listbox" aria-label="Fonts" className="font-picker-list">
+          {rows}
+        </ul>
+        {nothing && (
+          <div className="empty font-picker-empty">
+            <p className="empty-line">
+              <IconSearch aria-hidden="true" />
+              No fonts match “{query.trim()}”
+            </p>
+            <button type="button" className="btn" onClick={() => props.onView("upload")}>
+              Upload font file
+            </button>
+          </div>
+        )}
+      </div>
+      <div className="font-picker-foot">
+        <span className="font-picker-keys">
+          <kbd className="kbd">↑</kbd>
+          <kbd className="kbd">↓</kbd> Move
+          <kbd className="kbd">↵</kbd> Apply
+          <kbd className="kbd">Esc</kbd> Close
+        </span>
+        <button
+          type="button"
+          className="btn is-ghost"
+          title="Upload font (Alt+U)"
+          aria-keyshortcuts="Alt+U"
+          onClick={() => props.onView("upload")}
+        >
+          <IconUpload aria-hidden="true" />
+          Upload font
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const tagWords = (tag: FontTag): string =>
+  tag.kind === "variable"
+    ? "variable"
+    : tag.kind === "machine"
+      ? "machine font"
+      : `${tag.count} ${tag.unit}${tag.count === 1 ? "" : "s"}`;
+
+function FontOption(props: {
+  id: string;
+  row: FontRow;
+  /** Its place among all the options, from 1, and how many there are. */
+  position: number;
+  size: number;
+  active: boolean;
+  /** Inside the viewport, not the overscan: only then does it ask for its
+   *  face. Off screen it draws in Inter, which nobody sees. */
+  onScreen: boolean;
+  current: boolean;
+  onHover: (e: PointerEvent) => void;
+  onPick: () => void;
+}) {
+  const { row } = props;
+  const status = usePreviewFace(props.onScreen ? row.face : null);
+  const loading = status === "loading";
+  const tag = row.tag;
+  return (
+    <li
+      id={props.id}
+      role="option"
+      aria-selected={props.active}
+      aria-posinset={props.position}
+      aria-setsize={props.size}
+      aria-busy={loading}
+      aria-label={[row.family, props.current ? "current font" : null, tagWords(tag)].filter(Boolean).join(", ")}
+      className={`font-picker-row${props.active ? " is-active" : ""}${loading ? " is-loading" : ""}`}
+      onPointerMove={props.onHover}
+      onClick={props.onPick}
+    >
+      <span className="font-picker-check" aria-hidden="true">
+        {props.current && <IconCheck />}
+      </span>
+      <span
+        className="font-picker-name"
+        {...(status === "ready" && row.face !== null ? { style: { fontFamily: faceStack(row.face) } } : {})}
+      >
+        {row.family}
+      </span>
+      {loading && <span className="font-picker-spinner" aria-hidden="true" />}
+      {tag.kind === "variable" ? (
+        <span className="badge">Variable</span>
+      ) : tag.kind === "machine" ? (
+        <span className="font-picker-machine">Machine font</span>
+      ) : (
+        <span className="font-picker-count">
+          <span className="font-picker-num">{tag.count}</span> {tag.unit}
+          {tag.count === 1 ? "" : "s"}
+        </span>
+      )}
+    </li>
+  );
+}
+
+// ── THE UPLOAD VIEW ───────────────────────────────────────────────────────
+
+const ACCEPT = ".ttf,.otf,.woff,.woff2";
+/** A byte limit in decimal megabytes, as the server words it: 10, or 2.5. */
+const megabytes = (bytes: number): number => Number((bytes / 1_000_000).toFixed(1));
+
+function UploadView(props: { choose: RefObject<HTMLButtonElement | null>; onBack: () => void; onDone: () => void }) {
+  const store = useStore();
+  const list = useShotEditor((s) => s.workspaceFonts);
+  const [over, setOver] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [refusal, setRefusal] = useState<string | null>(null);
+  // The list could not be read and none is held: said, with a way to retry.
+  const [readFailed, setReadFailed] = useState(false);
+  const input = useRef<HTMLInputElement>(null);
+  const live = useRef(true);
+  const reasonId = useId();
+
+  // The count and the limit as the server has them now.
+  const read = (): void => {
+    setReadFailed(false);
+    void store.loadWorkspaceFonts(true).then((got) => {
+      if (live.current && got === null) setReadFailed(true);
+    });
+  };
+  useEffect(() => {
+    live.current = true;
+    read();
+    return () => {
+      live.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [store]);
+
+  const reason =
+    list === null
+      ? null
+      : !list.canManage
+        ? "Your role can't add workspace fonts."
+        : list.fonts.length >= list.maxFonts
+          ? `This workspace has ${list.fonts.length} of ${list.maxFonts} font files. Remove one in Manage workspace fonts.`
+          : null;
+  const blocked = reason !== null || busy;
+
+  const upload = async (files: readonly File[]): Promise<void> => {
+    if (blocked || files.length === 0) return;
+    setBusy(true);
+    setRefusal(null);
+    const { outcome } = await store.uploadWorkspaceFonts(files);
+    if (!live.current) return;
+    setBusy(false);
+    // The store applied the family: the picker's work is done.
+    if (outcome.status === "applied") props.onDone();
+    else if (outcome.status !== "superseded") setRefusal(outcome.message ?? "The font file did not upload.");
+  };
+
+  const carriesFiles = (e: DragEvent): boolean => [...e.dataTransfer.types].includes("Files");
+  const onDragOver = (e: DragEvent): void => {
+    if (!carriesFiles(e)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = blocked ? "none" : "copy";
+    if (!blocked) setOver(true);
+  };
+
+  // The dialog pattern: Tab and Shift+Tab cycle this view's own controls.
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {
+    if (e.key !== "Tab") return;
+    const all = [...e.currentTarget.querySelectorAll<HTMLElement>("button, a[href]")];
+    const first = all[0];
+    const last = all[all.length - 1];
+    if (first === undefined || last === undefined) return;
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+
+  return (
+    <div className="font-picker-body font-picker-upload" onKeyDown={onKeyDown}>
+      <div className="font-picker-upload-head">
+        <button type="button" className="btn is-ghost font-picker-back" onClick={props.onBack}>
+          <IconChevron aria-hidden="true" />
+          Back
+        </button>
+        <span className="font-picker-title">Upload font</span>
+      </div>
+      <div
+        className={`drop font-picker-drop${over ? " is-over" : ""}${blocked ? " is-disabled" : ""}`}
+        aria-disabled={blocked}
+        aria-busy={busy}
+        {...(reason !== null ? { "aria-describedby": reasonId } : {})}
+        onDragEnter={onDragOver}
+        onDragOver={onDragOver}
+        onDragLeave={(e) => {
+          if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setOver(false);
+        }}
+        onDrop={(e) => {
+          if (!carriesFiles(e)) return;
+          e.preventDefault();
+          setOver(false);
+          void upload([...e.dataTransfer.files]);
+        }}
+      >
+        <span>{busy ? "Uploading…" : "Drop font files here"}</span>
+        <button
+          ref={props.choose}
+          type="button"
+          className="btn"
+          aria-disabled={blocked}
+          {...(reason !== null ? { "aria-describedby": reasonId } : {})}
+          onClick={() => {
+            if (!blocked) input.current?.click();
+          }}
+        >
+          Choose file
+        </button>
+        <span className="font-picker-limits">
+          ttf · otf · woff · woff2
+          {list !== null && (
+            <>
+              {" "}· up to <span className="font-picker-num">{megabytes(list.limitBytes)}</span> MB
+            </>
+          )}
+        </span>
+        <input
+          ref={input}
+          type="file"
+          hidden
+          accept={ACCEPT}
+          multiple
+          onChange={(e) => {
+            const files = [...(e.target.files ?? [])];
+            // Cleared, so choosing the same file again still uploads.
+            e.target.value = "";
+            void upload(files);
+          }}
+        />
+      </div>
+      {list === null && readFailed ? (
+        <>
+          <p className="font-picker-line is-warn" role="alert">
+            Workspace fonts did not load.
+          </p>
+          <button type="button" className="btn font-picker-retry" onClick={read}>
+            Try again
+          </button>
+        </>
+      ) : list === null ? (
+        <p className="font-picker-line is-quiet" aria-busy="true">
+          Reading workspace fonts…
+        </p>
+      ) : (
+        <p className="font-picker-line">
+          <span className="font-picker-num">{list.fonts.length}</span> of <span className="font-picker-num">{list.maxFonts}</span> font files
+        </p>
+      )}
+      {reason !== null && (
+        <p id={reasonId} className="font-picker-line">
+          {reason}
+        </p>
+      )}
+      {refusal !== null && (
+        <p className="font-picker-line is-warn" role="alert">
+          {refusal}
+        </p>
+      )}
+      <p className="font-picker-line is-quiet">Only upload fonts you have a license to use.</p>
+      <a className="font-picker-manage" href={MANAGE_FONTS_HREF} target="_blank" rel="noopener">
+        Manage workspace fonts ↗
+      </a>
+    </div>
+  );
+}