@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/library/LibraryBrowser.tsx

@@ -0,0 +1,435 @@
+// The Library: the whole shipped catalog, and the door that adds any of it to
+// this Project's board. Three columns under the top bar (the rail, the
+// catalog, the selected item's preview) and a status bar across the foot.
+//
+// A DIALOG, NOT A FIFTH MODE, and that is the load-bearing choice. `Dialog`
+// portals to `document.body` at `--z-dialog` 1100, above the whole shell
+// (whose top tier is the overlay, 10), and it brings its own focus trap and
+// its own Escape that stops propagating before the shell's key path sees it.
+// So this surface costs no workspace in `workspaceOf`, no shell class in
+// `App.tsx`, no cell slots, no keymap lane, no `edgesOf` key, no
+// `measureInset` interaction and no URL block. Every one of those is a
+// hand-maintained per-mode entry in this codebase, and a fifth copy of each is
+// more places to forget.
+//
+// It also has to be a dialog to be USABLE. A fifth mode would join the modes'
+// one-at-a-time rule (`workspaceOf`: opening one closes the others), so it
+// could not share the screen with the board, which is precisely where an
+// author decides what to build with. This opens over anything, the board
+// included.
+//
+// IT STARTS BELOW THE TOP BAR, with no scrim and no padding (library.css), so
+// the 64px bar stays on screen and the library reads as the workspace's own
+// page rather than a box floating over it.
+//
+// ADD PLACES A LAYER (D2). Add, Enter and a double click on a component are
+// `dropLibraryOnFrame`: it installs, places it in the open Shot through
+// `placeInShot`, selected, and the Library closes on it, from the board or
+// from Studio alike. PIN TO BOARD is the explicit second action,
+// `addStoryboardLibraryItem`: a component card, or a `library` card for a kind
+// with no layer (whose only action it is), for the whole film. From Studio a
+// pin opens the board first (`openBoardForPin`, F32). A SHOT'S PRIMARY is
+// "Use as new Project" (`claimLibraryShot`): the copy opens in place of this
+// Project and the Library closes on it. It is a press of its own, never Enter
+// or a double click, which still pin a shot: a stray double click must not
+// leave the Project the author is in. There is no shortlist
+// (`resources.library` is legacy, never written). A sound pack adds or pins
+// one sound at a time, from the preview column.
+//
+// STOCK SOUNDS (Openverse) is a rail row with no catalog behind it: it fills
+// the catalog and preview columns with its own search, list and picked sound
+// (`StockSounds`), and adds one sound at a time like a pack.
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { Dialog } from "@dailies-studio/ui";
+import { LIBRARY_CATEGORY_ICONS, SEARCH_ICON } from "../../icons.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { isEditable } from "../../state/keymap.js";
+import { openBoardForPin } from "../../state/store.js";
+import type { LibraryItem } from "../../api.js";
+import {
+  CATEGORY_LABEL,
+  CATEGORY_SUBTITLE,
+  SORT_LABEL,
+  categoryCounts,
+  countNoun,
+  groupByKind,
+  kindOf,
+  placesAsLayer,
+  onBoardCounts,
+  plural,
+  shippedRows,
+  visibleRows,
+} from "./libraryModel.js";
+import type { LibraryCategory, LibrarySort } from "./libraryModel.js";
+import { LibraryGrid } from "./LibraryGrid.js";
+import type { LibrarySection } from "./LibraryGrid.js";
+import { LibraryExpandedPreview, LibraryPreviewPanel, canExpand } from "./LibraryPreviewPanel.js";
+import { LibraryRail } from "./LibraryRail.js";
+import { lazyPanel } from "../../app/lazyPanel.js";
+
+// The two sound catalogs are chunks of their own, fetched the first time
+// their category is picked: most opens of the Library browse components, and
+// neither is a component library. The fallback holds the catalog's place.
+const StockSounds = lazyPanel(
+  "Stock sounds",
+  () => import("./StockSounds.js").then((m) => m.StockSounds),
+  <section className="library-catalog" aria-busy="true" />,
+);
+const SoundHistory = lazyPanel(
+  "Generated sounds",
+  () => import("./SoundHistory.js").then((m) => m.SoundHistory),
+  <section className="library-catalog" aria-busy="true" />,
+);
+
+const NONE: never[] = [];
+
+export function LibraryBrowser() {
+  const store = useStore();
+  const open = useShotEditor((s) => s.libraryBrowserOpen);
+  const catalog = useShotEditor((s) => s.libraryCatalog) ?? NONE;
+  const loaded = useShotEditor((s) => s.libraryCatalogLoaded);
+  const error = useShotEditor((s) => s.libraryCatalogError);
+  const problems = useShotEditor((s) => s.libraryCatalogProblems) ?? NONE;
+  const references = useShotEditor((s) => s.doc?.resources?.references) ?? NONE;
+  const hasDoc = useShotEditor((s) => s.doc !== null);
+  // WHERE "BACK" LANDS, as strings (an object selector would re-render this
+  // on every edit). Closing returns to whatever is under the library, so the
+  // row names that: the entered Shot, else the board when it is up, else the
+  // Project's own context.
+  const shotName = useShotEditor((s) =>
+    s.enteredScene === null ? null : (s.doc?.scenesById[s.enteredScene]?.name ?? "Shot"),
+  );
+  const boardOpen = useShotEditor((s) => s.storyboardOpen);
+  const project = useShotEditor((s) => (s.doc === null ? null : (s.doc.title ?? s.name ?? s.doc.name)));
+  const [query, setQuery] = useState("");
+  const [category, setCategory] = useState<LibraryCategory>("component");
+  const [sort, setSort] = useState<LibrarySort>("curated");
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  // ONE ADD AT A TIME across the whole surface: an install is a server write,
+  // and a double click while one is out would land a second card.
+  const [adding, setAdding] = useState<string | null>(null);
+  // The last refused add, by item: the shell's error strip is under this
+  // dialog, so the preview column prints it under the Add.
+  const [addError, setAddError] = useState<{ id: string; message: string } | null>(null);
+  // THE EXPANDED PREVIEW, by item id: it shows while that item is still the
+  // selection, so picking another card or category closes it with no effect.
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [retrying, setRetrying] = useState(false);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const detailsRef = useRef<HTMLButtonElement>(null);
+  const detailsBoxRef = useRef<HTMLDivElement>(null);
+  const detailsId = useId();
+  // The Details box floats like a popover, so a press anywhere else closes it.
+  useEffect(() => {
+    if (!detailsOpen) return;
+    const onDown = (event: PointerEvent): void => {
+      const target = event.target as Node;
+      if (detailsBoxRef.current?.contains(target) || detailsRef.current?.contains(target)) return;
+      setDetailsOpen(false);
+    };
+    window.addEventListener("pointerdown", onDown, true);
+    return () => window.removeEventListener("pointerdown", onDown, true);
+  }, [detailsOpen]);
+
+  // "/" FOCUSES SEARCH, the hint the field prints. A window listener rather
+  // than a handler on the dialog because the shell's own keys are off while
+  // the library is up (store `libraryBrowserOpen`), and never while the
+  // author is typing: "/" is a character in every field, the search included.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key !== "/" || event.ctrlKey || event.metaKey || event.altKey || isEditable(event.target)) return;
+      event.preventDefault();
+      searchRef.current?.focus();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  const shipped = useMemo(() => shippedRows(catalog), [catalog]);
+  const counts = useMemo(() => categoryCounts(shipped), [shipped]);
+  const rows = useMemo(() => visibleRows(shipped, category, query, sort), [shipped, category, query, sort]);
+  const selected = shipped.find((row) => row.id === selectedId) ?? null;
+  const onBoard = useMemo(() => onBoardCounts(shipped, references), [shipped, references]);
+  const onBoardHere = shipped.filter((row) => onBoard.has(row.id)).length;
+
+  const close = (): void => {
+    setDetailsOpen(false);
+    store.setLibraryBrowserOpen(false);
+  };
+
+  const run = (row: LibraryItem, how: "place" | "claim" | "pin"): void => {
+    // A pack adds one sound at a time (the preview column), so Enter or a
+    // double click on its card only picks it.
+    setSelectedId(row.id);
+    if (adding !== null || !hasDoc || kindOf(row) === "sounds") return;
+    setAdding(row.id);
+    setAddError(null);
+    // The store reports a refusal to the shell's strip and resolves; clear
+    // the strip first so whatever is there afterwards is this add's.
+    store.dismissError();
+    let job: Promise<unknown> = Promise.resolve();
+    if (how === "place") job = store.dropLibraryOnFrame(row.id);
+    else if (how === "claim") job = store.claimLibraryShot(row.id);
+    else if (openBoardForPin(store)) job = store.addStoryboardLibraryItem(row.id, null);
+    void job.finally(() => {
+      setAdding(null);
+      const message = store.getState().error;
+      if (message !== null) setAddError({ id: row.id, message });
+      // The placed layer is selected under this dialog, or the claimed
+      // Project opened under it: show it (F32).
+      else if (how !== "pin") store.setLibraryBrowserOpen(false);
+    });
+  };
+  // ADD PLACES what can be a layer (a three component); every other row
+  // pins on Enter and a double click (a shot's claim is its button alone).
+  const add = (row: LibraryItem): void => run(row, placesAsLayer(row) ? "place" : "pin");
+  const pin = (row: LibraryItem): void => run(row, "pin");
+
+  const retry = (): void => {
+    setRetrying(true);
+    void store.refreshLibraryCatalog().finally(() => setRetrying(false));
+  };
+
+  const expanded = selected !== null && expandedId === selected.id && canExpand(selected);
+  const pickCategory = (next: LibraryCategory): void => {
+    setExpandedId(null);
+    setCategory(next);
+  };
+  // A CATEGORY ASKED FOR by the door that opened this (`setLibraryBrowserOpen`
+  // with one). The store parks it until close, so it applies once per ask.
+  const asked = useShotEditor((s) => s.libraryBrowserCategory);
+  useEffect(() => {
+    if (open && asked !== null) pickCategory(asked);
+  }, [open, asked]);
+
+  const noun = countNoun(category);
+  const kindWords = CATEGORY_LABEL[category].toLowerCase();
+
+  const catalogBody = (): ReactNode => {
+    if (!loaded) {
+      if (error === null || retrying) return <LibraryState icon="all" message="Loading the library…" />;
+      return (
+        <LibraryState
+          icon="all"
+          message="The library could not be read."
+          detail={error}
+          action={
+            <button type="button" className="btn is-outline" onClick={retry}>
+              Retry
+            </button>
+          }
+        />
+      );
+    }
+    if (shipped.length === 0) return <LibraryState icon="all" message="This build ships no library items." />;
+    if (rows.length === 0) {
+      if (query.trim() === "") {
+        return <LibraryState icon={category} message={`This build ships no ${kindWords}.`} />;
+      }
+      return (
+        <LibraryState
+          icon={category}
+          message={`No ${category === "all" ? "items" : kindWords} match ${JSON.stringify(query.trim())}.`}
+          action={
+            <button
+              type="button"
+              className="btn is-outline"
+              onClick={() => {
+                // This button leaves with its state; focus goes where the
+                // author types next, not to <body>.
+                setQuery("");
+                searchRef.current?.focus();
+              }}
+            >
+              Clear search
+            </button>
+          }
+        />
+      );
+    }
+    const sections: LibrarySection[] =
+      category === "all"
+        ? groupByKind(rows).map((s) => ({ heading: CATEGORY_LABEL[s.kind], label: CATEGORY_LABEL[s.kind], rows: s.rows }))
+        : [{ label: CATEGORY_LABEL[category], rows }];
+    return <LibraryGrid sections={sections} selected={selectedId} onSelect={setSelectedId} onAdd={add} />;
+  };
+
+  // THE BOARD FIRST: it enters a Shot of its own on the way in, and closing
+  // the library lands back on the board, not in Studio inside that Shot.
+  let backLabel = `Back to ${project ?? "the editor"}`;
+  if (boardOpen) backLabel = "Back to storyboard";
+  else if (shotName !== null) backLabel = `Back to ${shotName}`;
+
+  return (
+    <Dialog open={open} className="library-browser" title="Library" onClose={close}>
+      <div className="library-main">
+        <LibraryRail
+          category={category}
+          counts={counts}
+          onCategory={pickCategory}
+          backLabel={backLabel}
+          onBack={close}
+          project={project}
+          onBoard={onBoardHere}
+        />
+        {category === "stock" ? (
+          <StockSounds canAdd={hasDoc} />
+        ) : category === "generated" ? (
+          <SoundHistory canAdd={hasDoc} />
+        ) : expanded && selected !== null ? (
+          <LibraryExpandedPreview item={selected} backTo={kindWords} onClose={() => setExpandedId(null)} />
+        ) : (
+          <section className="library-catalog" aria-label={CATEGORY_LABEL[category]}>
+            <header className="library-catalog-head">
+              <div>
+                <h2>{CATEGORY_LABEL[category]}</h2>
+                <p>{CATEGORY_SUBTITLE[category]}</p>
+              </div>
+              <span data-testid="library-count">{plural(rows.length, noun)}</span>
+            </header>
+            <div className="library-search-row">
+              {/* A plain `<input type="search">` and not `TextField`, which
+                  commits on blur and Enter: this box filters the gallery as you
+                  type. */}
+              <label className="search-field">
+                {SEARCH_ICON}
+                <input
+                  ref={searchRef}
+                  type="search"
+                  value={query}
+                  placeholder="Search library"
+                  aria-label="Search library"
+                  data-testid="library-search"
+                  onChange={(event) => setQuery(event.target.value)}
+                />
+                <kbd className="kbd" aria-hidden="true">
+                  /
+                </kbd>
+              </label>
+              <select
+                className="select is-quiet"
+                aria-label="Sort"
+                data-testid="library-sort"
+                value={sort}
+                onChange={(event) => setSort(event.target.value as LibrarySort)}
+              >
+                {(Object.keys(SORT_LABEL) as LibrarySort[]).map((s) => (
+                  <option key={s} value={s}>
+                    {SORT_LABEL[s]}
+                  </option>
+                ))}
+              </select>
+            </div>
+            {catalogBody()}
+          </section>
+        )}
+        {category === "stock" || category === "generated" ? null : (
+          <LibraryPreviewPanel
+            key={selected?.id}
+            item={selected}
+            destination="Project storyboard"
+            onBoard={selected === null ? 0 : (onBoard.get(selected.id) ?? 0)}
+            canAdd={hasDoc}
+            adding={adding !== null}
+            onAdd={() => {
+              if (selected !== null) add(selected);
+            }}
+            onClaim={() => {
+              if (selected !== null) run(selected, "claim");
+            }}
+            onPin={() => {
+              if (selected !== null) pin(selected);
+            }}
+            error={addError !== null && addError.id === selected?.id ? addError.message : null}
+            expanded={expanded}
+            onExpand={(open) => setExpandedId(open && selected !== null ? selected.id : null)}
+          />
+        )}
+      </div>
+      {/* THE STATUS BAR replaces the old problems strip. THE REFUSED ITEMS
+          are still named: a drifted item is otherwise a card that is simply
+          not there, and an author reads that as a build that never shipped it
+          rather than one whose manifest needs rebuilding. The count says how
+          many; Details says which and why. */}
+      {/* THE DETAILS LIST IS INSIDE THE DIALOG, a disclosure the button
+          controls, and not a portaled Popover: a portal is a sibling of this
+          aria-modal dialog, so screen readers that honour aria-modal never
+          reached the list. Escape here closes the list, not the Library. */}
+      <footer
+        className="library-status"
+        data-testid="library-status"
+        onKeyDown={(event) => {
+          if (event.key !== "Escape" || !detailsOpen) return;
+          event.stopPropagation();
+          setDetailsOpen(false);
+          detailsRef.current?.focus();
+        }}
+      >
+        <span>
+          {expanded
+            ? "Play the preview to see the motion."
+            : category === "sounds"
+              ? "Choose a pack, then preview an individual sound."
+              : category === "stock"
+                ? "Search, then press Enter. Only sounds you may use in a video are listed."
+                : category === "generated"
+                  ? "Pick a take to hear it, then add it to the timeline."
+                  : "Click an item to preview it."}
+        </span>
+        {problems.length === 0 ? null : (
+          <span className="library-status-problems" data-testid="library-browser-problems">
+            {plural(problems.length, "item")} unavailable
+            <button
+              ref={detailsRef}
+              type="button"
+              className="library-status-details"
+              aria-expanded={detailsOpen}
+              aria-controls={detailsId}
+              onClick={() => setDetailsOpen((v) => !v)}
+            >
+              Details
+            </button>
+          </span>
+        )}
+        {detailsOpen && problems.length > 0 ? (
+          <div ref={detailsBoxRef} id={detailsId} className="popover library-problems" role="region" aria-label="Unavailable items">
+            <ul data-testid="library-problems-list">
+              {problems.map((problem) => (
+                <li key={problem.id}>
+                  <span>{problem.id}</span>
+                  <span>{problem.error}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+      </footer>
+    </Dialog>
+  );
+}
+
+/** A catalog with nothing to show: quiet centred copy under the category's
+ *  icon, and the one action that can change it, when there is one. */
+function LibraryState({
+  icon,
+  message,
+  detail,
+  action,
+}: {
+  icon: LibraryCategory;
+  message: string;
+  detail?: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="library-state" role="status">
+      {LIBRARY_CATEGORY_ICONS[icon]}
+      <p>{message}</p>
+      {detail === undefined ? null : <p className="library-state-detail">{detail}</p>}
+      {action}
+    </div>
+  );
+}

package/src/panels/library/LibraryGrid.tsx

@@ -0,0 +1,190 @@
+// The Library's gallery: quiet cards, one picked at a time.
+//
+// QUIET CARDS. A card is a picture, a name and one sentence, and nothing to
+// press: no per-card Add. Click picks it and the browser's right column
+// previews it, which is where the Add, the destination and the detail live,
+// once, instead of twenty times. A double click or Enter adds straight away,
+// for the author who already knows.
+//
+// A LISTBOX PER SECTION, ONE ROVING TAB STOP OVER ALL OF THEM. Each section
+// (one in a kind, one per kind under "All items") is a `listbox` of `option`s,
+// labelled by its heading, because a heading may not sit inside a listbox.
+// The arrows walk every option on the gallery in DOM order, across sections,
+// and exactly one option is in the tab order: the picked one, or the first.
+// Selection follows focus, so walking with the arrows previews as it goes,
+// which is the point of a browse surface.
+//
+// THE CARD PICTURE IS `row.thumb`, NEVER `ComponentStage`. A live preview
+// sits behind a module-level `LIVE_CAP = 6` slot budget against the browser's
+// WebGL context ceiling (liveCap.ts), so a twenty-card grid would draw six
+// live and fourteen placeholders, silently and in whatever order they
+// happened to mount. A shipped PNG is the honest picture here, and it is
+// already on the row.
+import { useId, useRef } from "react";
+import type { KeyboardEvent as ReactKeyboardEvent } from "react";
+import { LIBRARY_CATEGORY_ICONS } from "../../icons.js";
+import type { LibraryItem, LibraryItemKind } from "../../api.js";
+import { displayNameOf, kindOf } from "./libraryModel.js";
+
+export interface LibrarySection {
+  /** The section's kind, for its icon-free small heading; omitted for the one
+   *  section of a single kind, whose heading is the catalog's own. */
+  heading?: string;
+  /** The listbox's accessible name when there is no visible heading. */
+  label: string;
+  rows: readonly LibraryItem[];
+}
+
+/** How many cards one row of this grid holds. A browser resolves
+ *  `grid-template-columns` to one px track per column; jsdom returns the
+ *  declared `repeat(...)` text, which counts as one column. */
+function columnsOf(list: Element | null): number {
+  if (list === null) return 1;
+  const tracks = getComputedStyle(list).gridTemplateColumns.split(" ").filter((t) => /px$/.test(t));
+  return Math.max(1, tracks.length);
+}
+
+export function LibraryGrid({
+  sections,
+  selected,
+  onSelect,
+  onAdd,
+}: {
+  sections: readonly LibrarySection[];
+  selected: string | null;
+  onSelect: (id: string) => void;
+  onAdd: (row: LibraryItem) => void;
+}) {
+  const root = useRef<HTMLDivElement>(null);
+  const baseId = useId();
+  const all = sections.flatMap((s) => s.rows);
+  // The tab stop: the picked card when it is on screen, else the first.
+  const stop = all.some((row) => row.id === selected) ? selected : (all[0]?.id ?? null);
+
+  const onKeyDown = (event: ReactKeyboardEvent<HTMLElement>, row: LibraryItem): void => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onAdd(row);
+      return;
+    }
+    if (event.key === " ") {
+      event.preventDefault();
+      onSelect(row.id);
+      return;
+    }
+    const options = [...(root.current?.querySelectorAll<HTMLElement>('[role="option"]') ?? [])];
+    const at = options.indexOf(event.currentTarget);
+    if (at < 0) return;
+    // Up and down step by the CURRENT grid's row length. Crossing into a
+    // section whose last row is short lands in DOM order rather than in the
+    // same column; ponytail: column-exact crossing needs per-card geometry.
+    const cols = columnsOf(event.currentTarget.parentElement);
+    const next =
+      event.key === "ArrowRight"
+        ? at + 1
+        : event.key === "ArrowLeft"
+          ? at - 1
+          : event.key === "ArrowDown"
+            ? at + cols
+            : event.key === "ArrowUp"
+              ? at - cols
+              : event.key === "Home"
+                ? 0
+                : event.key === "End"
+                  ? options.length - 1
+                  : null;
+    if (next === null) return;
+    event.preventDefault();
+    const target = options[Math.max(0, Math.min(options.length - 1, next))];
+    if (target === undefined) return;
+    const id = target.dataset.library;
+    if (id !== undefined) onSelect(id);
+    target.focus();
+  };
+
+  return (
+    <div className="library-gallery" ref={root}>
+      {sections.map((section, i) => {
+        const headingId = `${baseId}-h${i}`;
+        return (
+          <section key={section.label} className="library-section">
+            {section.heading === undefined ? null : (
+              <h3 className="library-section-head" id={headingId}>
+                {section.heading}
+                <span>{section.rows.length}</span>
+              </h3>
+            )}
+            <ul
+              className="library-grid"
+              role="listbox"
+              aria-label={section.heading === undefined ? section.label : undefined}
+              aria-labelledby={section.heading === undefined ? undefined : headingId}
+            >
+              {section.rows.map((row) => (
+                <LibraryCard
+                  key={row.id}
+                  row={row}
+                  selected={row.id === selected}
+                  tabbable={row.id === stop}
+                  onSelect={() => onSelect(row.id)}
+                  onAdd={() => onAdd(row)}
+                  onKeyDown={(event) => onKeyDown(event, row)}
+                />
+              ))}
+            </ul>
+          </section>
+        );
+      })}
+    </div>
+  );
+}
+
+function LibraryCard({
+  row,
+  selected,
+  tabbable,
+  onSelect,
+  onAdd,
+  onKeyDown,
+}: {
+  row: LibraryItem;
+  selected: boolean;
+  tabbable: boolean;
+  onSelect: () => void;
+  onAdd: () => void;
+  onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => void;
+}) {
+  const kind: LibraryItemKind = kindOf(row);
+  const name = displayNameOf(row);
+  return (
+    <li
+      className={`library-card is-${kind}`}
+      role="option"
+      aria-selected={selected}
+      tabIndex={tabbable ? 0 : -1}
+      data-library={row.id}
+      title={row.id}
+      onClick={onSelect}
+      onDoubleClick={onAdd}
+      onKeyDown={onKeyDown}
+      // Not a drag source: the browser is a dialog over the board, and its
+      // preview column owns the Add.
+      draggable={false}
+    >
+      {/* The art box reserves its 16:9 BEFORE any image loads, so a late
+          thumb never shifts the grid under the pointer mid-click. */}
+      <div className="library-card-art">
+        {row.thumb === undefined ? (
+          <span className="library-card-placeholder" aria-hidden="true">
+            {LIBRARY_CATEGORY_ICONS[kind]}
+            <span>{name}</span>
+          </span>
+        ) : (
+          <img src={row.thumb} alt="" loading="lazy" draggable={false} />
+        )}
+      </div>
+      <span className="library-card-name">{name}</span>
+      {row.description === undefined ? null : <span className="library-card-note">{row.description}</span>}
+    </li>
+  );
+}