@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/fonts/faceCache.ts

@@ -0,0 +1,207 @@
+// THE FONT PICKER'S FACES: one cache for the page, shared by the picker's rows
+// and the Font field, so a family draws its name in its own face and the file
+// is fetched once per page.
+//
+// - EVERY FACE REGISTERS UNDER A PRIVATE FAMILY ("dailies-gf-<id>",
+//   "dailies-ws-<hash8>", "dailies-pf-<hash8>"), never under the family's
+//   own name: a Google copy of "Inter" must not take over the chrome's Inter.
+//   A file's family is keyed by its bytes (the stores name a file
+//   `<hash8>-<name>`), so a reused asset id or another Project never draws
+//   one file's name in another file's glyphs.
+// - ONLY A GOOGLE ROW CONTACTS JSDELIVR (Recent, Google Fonts). A family the
+//   Project holds draws from the Project's own file, a machine font from the
+//   computer, so selecting text fetches nothing from anyone (privacy.html:
+//   new text's Inter "contacts no one").
+// - ONLY WHAT IS ON SCREEN LOADS. A row asks for its face while it is in the
+//   viewport (the picker mounts a few rows past each edge, and those ask for
+//   nothing), at most `MAX_LOADS` at once, in the order asked. An ask whose
+//   row scrolled away before its turn waits unstarted until a row asks
+//   again, so a fast scroll never queues the rows it passed ahead of the
+//   ones it stopped on.
+// - NOTHING IS DELETED. A face stays in `document.fonts` for the page's life,
+//   so reopening the picker or scrolling back draws at once.
+//
+// Kept out of the picker's lazy chunk: the Font field draws through it too.
+import { useEffect, useSyncExternalStore } from "react";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import { isGenericFontFamily, quoteFontFamily } from "@dailies-studio/shot/doc";
+import { findGoogleFont, hasNonLatinDefault, previewFile } from "../../fonts/googleFonts.js";
+import type { GoogleFontEntry } from "../../fonts/googleFonts.js";
+import { workspaceFontUrl } from "../../api.js";
+import type { WorkspaceFont } from "../../api.js";
+import { fold } from "../../state/fontRecents.js";
+import { chooseFace, projectFontFamilies, workspaceFacts } from "../../state/fonts.js";
+import type { ProjectFontFamily } from "../../state/fonts.js";
+
+/** What a family's name is drawn in. `url` null is a face this computer may
+ *  have (a machine font): nothing loads, the stack names the family itself. */
+export interface PreviewFace {
+  family: string;
+  url: string | null;
+}
+
+/** How a face stands: loading (queued or fetching), ready, or failed (drawn
+ *  in the chrome's Inter). */
+export type FaceStatus = "loading" | "ready" | "failed";
+
+const MAX_LOADS = 4;
+
+interface Entry {
+  face: PreviewFace;
+  status: "queued" | FaceStatus;
+  /** Mounted rows asking for it now. */
+  wants: number;
+}
+
+const entries = new Map<string, Entry>();
+/** Unstarted asks, in the order asked. */
+const queue: Entry[] = [];
+let running = 0;
+const listeners = new Set<() => void>();
+
+function notify(): void {
+  for (const listener of listeners) listener();
+}
+
+function start(entry: Entry): void {
+  if (typeof FontFace === "undefined" || typeof document === "undefined" || document.fonts === undefined) {
+    entry.status = "failed";
+    return;
+  }
+  entry.status = "loading";
+  running++;
+  // Every weight maps to the one file, so a name is never drawn in a
+  // synthesized bold.
+  const face = new FontFace(entry.face.family, `url(${JSON.stringify(entry.face.url)})`, { weight: "1 1000" });
+  document.fonts.add(face);
+  face.load().then(
+    () => {
+      entry.status = "ready";
+    },
+    () => {
+      entry.status = "failed";
+    },
+  ).finally(() => {
+    running--;
+    pump();
+    notify();
+  });
+}
+
+function pump(): void {
+  while (running < MAX_LOADS) {
+    const at = queue.findIndex((entry) => entry.wants > 0);
+    if (at < 0) return;
+    start(queue.splice(at, 1)[0]!);
+  }
+}
+
+/** Hold `face` wanted while a row shows it; answers the release. */
+function want(face: PreviewFace): () => void {
+  let entry = entries.get(face.family);
+  if (entry === undefined) {
+    entry = { face, status: face.url === null ? "ready" : "queued", wants: 0 };
+    entries.set(face.family, entry);
+    if (entry.status === "queued") queue.push(entry);
+  }
+  const held = entry;
+  held.wants++;
+  pump();
+  notify();
+  return () => {
+    held.wants--;
+  };
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function statusOf(face: PreviewFace | null): FaceStatus | null {
+  if (face === null) return null;
+  if (face.url === null) return "ready";
+  const status = entries.get(face.family)?.status ?? "queued";
+  return status === "queued" ? "loading" : status;
+}
+
+/** `face`'s status while the calling row is mounted, asking for it to load;
+ *  null for no face (the name is drawn in Inter). */
+export function usePreviewFace(face: PreviewFace | null): FaceStatus | null {
+  const family = face?.family ?? null;
+  useEffect(() => {
+    if (face === null) return;
+    return want(face);
+    // One family is one file: the url never changes under it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [family]);
+  return useSyncExternalStore(subscribe, () => statusOf(face), () => statusOf(face));
+}
+
+/** The CSS stack a ready face draws a name in, the chrome's Inter behind it.
+ *  A generic keyword stays bare: a quoted "serif" names a family called
+ *  serif, which no computer has, so the name would draw in Inter. */
+export const faceStack = (face: PreviewFace): string =>
+  `${isGenericFontFamily(face.family) ? face.family.trim() : quoteFontFamily(face.family)}, var(--font-sans)`;
+
+// ── WHICH FACE A FAMILY DRAWS IN ──────────────────────────────────────────
+
+const assetUrl = (path: string): string => `/studio/assets/${encodeURIComponent(path)}`;
+
+/** A Google family: its preview file (`previewFile`), or null for a family
+ *  whose own face cannot spell its name (a non-Latin default), drawn in
+ *  Inter with nothing fetched. */
+export function googleFace(entry: GoogleFontEntry): PreviewFace | null {
+  const file = previewFile(entry);
+  return file === null ? null : { family: `dailies-gf-${entry.id}`, url: file.url };
+}
+
+/** A workspace family: its regular file, or the one nearest it. */
+export function workspaceFace(fonts: readonly WorkspaceFont[]): PreviewFace | null {
+  if (fonts.length === 0) return null;
+  const font = chooseFace(fonts, workspaceFacts, 400, "normal").face;
+  return { family: `dailies-ws-${font.id.slice(0, 8)}`, url: workspaceFontUrl(font.id) };
+}
+
+/** A family the Project holds, from the Project's own file of its regular
+ *  face (or the one nearest it): a catalog face's first file is its default
+ *  subset's. A workspace copy shares the workspace row's face (the same
+ *  bytes, the same `<hash8>`). A catalog copy draws in Inter while the
+ *  catalog is not loaded and for a non-Latin default, since only the catalog
+ *  says whether its default subset can spell its name. */
+export function projectFace(
+  row: ProjectFontFamily,
+  assets: Doc3D["assets"],
+  catalog: readonly GoogleFontEntry[] | null,
+): PreviewFace | null {
+  if (row.pick.faces.length === 0) return null;
+  if (row.source === "catalog") {
+    if (catalog === null) return null;
+    const entry = findGoogleFont(catalog, row.family);
+    if (entry !== undefined && hasNonLatinDefault(entry)) return null;
+  }
+  const asset = assets[chooseFace(row.pick.faces, (face) => face, 400, "normal").face.fontAsset];
+  if (asset?.kind !== "font") return null;
+  const family = row.source === "workspace" ? `dailies-ws-${asset.path.slice(0, 8)}` : `dailies-pf-${asset.hash.slice(0, 8)}`;
+  return { family, url: assetUrl(asset.path) };
+}
+
+/** The face the Font field draws `family` in: the In this Project row's face,
+ *  else the family itself, a machine font this computer may have (the face
+ *  the stage draws). Null draws Inter.
+ *
+ *  The families are grouped without the catalog: its 1,984-name map is what
+ *  costs, and the field runs this on every edit while text is selected. Only
+ *  the non-Latin check (`projectFace`) reads the catalog. */
+export function familyFace(
+  doc: Doc3D,
+  family: string,
+  catalog: readonly GoogleFontEntry[] | null,
+  workspace: readonly WorkspaceFont[] | null,
+): PreviewFace | null {
+  const key = fold(family);
+  const row = projectFontFamilies(doc, null, workspace).families.find((f) => f.key === key);
+  return row === undefined ? { family, url: null } : projectFace(row, doc.assets, catalog);
+}

package/src/panels/fonts/fontPicker.css

@@ -0,0 +1,271 @@
+@layer component-sheets {
+  /* THE FONT PICKER (FontPicker.tsx), a component sheet: it styles its own
+     classes and the layout around the house controls it holds (the search
+     field, the chips, the badge, the buttons, the drop zone, the empty
+     state), never those controls.
+
+     The surface is the house popover (`.popover`: the panel ground, the
+     strong edge, the control's corners, the popover shadow), a fixed 340
+     hung from the field's right edge, and the list is its only scroller.
+     Its frame's height is set inline, the room beside the field up to
+     min(560px, 70vh), and stays put while a search narrows the list. */
+  .font-picker {
+    width: 340px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .font-picker-frame {
+    max-height: min(560px, 70vh);
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* The row height is FONT_PICKER_ROW_H (FontPicker.tsx), which the list's
+     window arithmetic reads; the body also sets it inline from that constant,
+     so the inline value wins and the two cannot drift. */
+  .font-picker-body {
+    --font-picker-row-h: 32px;
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .font-picker-top {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    padding: var(--space-4);
+    border-bottom: 1px solid var(--line-soft);
+  }
+
+  .font-picker-scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* No padding and no margin: an item's top is its index times the row
+     height, which the scroll arithmetic and the window read. */
+  .font-picker-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .font-picker-gap {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* A section head is a list item of the row height, in the caps label. */
+  .font-picker-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--font-picker-row-h);
+    padding: 0 var(--space-6);
+  }
+
+  .font-picker-num {
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+  }
+
+  .font-picker-note {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    height: var(--font-picker-row-h);
+    padding: 0 var(--space-6);
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  /* An option: the menu row's anatomy at the list's fixed height. The check
+     lane, the family in its own face, the tag. The active option (the
+     arrows' or the pointer's) wears the menu's quiet wash; its words keep
+     their ink. */
+  .font-picker-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    height: var(--font-picker-row-h);
+    margin: 0 var(--space-3);
+    padding: 0 var(--space-4);
+    border-radius: var(--radius-sm);
+    color: var(--ink-1);
+    cursor: default;
+    user-select: none;
+  }
+
+  .font-picker-row.is-active {
+    background: var(--accent-quiet);
+  }
+
+  .font-picker-check {
+    flex: none;
+    display: inline-flex;
+    justify-content: center;
+    width: 16px;
+    color: var(--accent-ink);
+  }
+
+  .font-picker-check > svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  .font-picker-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-title);
+    line-height: var(--leading-md);
+  }
+
+  /* Its face still on its way: the name in Inter, in the third ink. */
+  .font-picker-row.is-loading .font-picker-name {
+    color: var(--ink-3);
+  }
+
+  .font-picker-count {
+    flex: none;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  .font-picker-machine {
+    flex: none;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--warn);
+  }
+
+  /* The loading ring: it turns only where motion is wanted, and stands still
+     otherwise, so the row says "loading" by its shape as well as its ink. */
+  .font-picker-spinner {
+    flex: none;
+    width: 10px;
+    height: 10px;
+    border: 1.5px solid var(--line-strong);
+    border-top-color: var(--ink-2);
+    border-radius: var(--radius-full);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .font-picker-spinner {
+      animation: font-picker-turn 900ms linear infinite;
+    }
+  }
+
+  @keyframes font-picker-turn {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .font-picker-foot {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
+    border-top: 1px solid var(--line-soft);
+  }
+
+  .font-picker-keys {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  /* THE UPLOAD VIEW: Back and the title, the drop zone holding Choose file and
+     the accepted types, then the count, the reasons and the quiet lines. */
+  .font-picker-upload {
+    gap: var(--space-4);
+    padding: var(--space-4) var(--space-6) var(--space-6);
+  }
+
+  .font-picker-upload-head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
+  .font-picker-back > svg {
+    transform: rotate(180deg);
+  }
+
+  .font-picker-title {
+    font-size: var(--type-title);
+    line-height: var(--leading-md);
+    font-weight: var(--weight-medium);
+    color: var(--ink-1);
+  }
+
+  .font-picker-drop {
+    flex-direction: column;
+  }
+
+  /* Disabled with its reason under it: the words step down to the disabled
+     ink (Choose file dims itself, `aria-disabled`). */
+  .font-picker-drop.is-disabled > span {
+    color: var(--ink-disabled);
+  }
+
+  .font-picker-limits {
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+  }
+
+  .font-picker-line {
+    margin: 0;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-2);
+  }
+
+  .font-picker-line.is-quiet {
+    color: var(--ink-3);
+  }
+
+  .font-picker-line.is-warn {
+    color: var(--warn);
+  }
+
+  .font-picker-retry {
+    align-self: flex-start;
+  }
+
+  .font-picker-manage {
+    align-self: flex-start;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--accent-ink);
+    text-decoration: none;
+    border-radius: var(--radius-xs);
+  }
+
+  .font-picker-manage:hover {
+    text-decoration: underline;
+  }
+
+  .font-picker-manage:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+}