@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/insert/InsertDrawer.tsx

@@ -0,0 +1,723 @@
+// THE INSERT DRAWER: everything an author can add, in the left column.
+//
+// ── WHERE IT LIVES ──────────────────────────────────────────────────────
+//
+// Docked in the left cell, over the outline (or a mode's column), never a
+// modal and never floating over the stage. LeftColumn mounts it directly and
+// marks the rail `is-inserting`, which hides the Files panel and the mode slot
+// without unmounting them, so the outline keeps its scroll and open rows for
+// the trip back. The dock's + (InsertButton), the Scene section's "Shader
+// background…" and the first open of an empty Project all open the same
+// drawer (`openInsertDrawer`).
+//
+// ── NO TABS ─────────────────────────────────────────────────────────────
+//
+// The left column has no tabs (a founder ruling), so the drawer is one search
+// field, a row of jump chips and ONE scrolling list with sticky section heads.
+// A chip scrolls the list; scrolling the list moves the chip.
+//
+// ── WHAT EACH SECTION READS ─────────────────────────────────────────────
+//
+// - Basics: `useAddRows`, the same rows calling the same `run` the Insert
+//   button uses. Nothing here knows what a shape or a device is.
+// - Icons: Lucide, imported the first time the section is asked for
+//   (`loadIconSet`), so first paint pays nothing for 1850 icons.
+// - Shaders: the registry's TSL effects (`row.effect`), grouped by the
+//   catalog's own category, in the order the catalog lists them.
+// - Backgrounds: scene paints written to the Shot's `background` through the
+//   inspector's own seam (`patchScene`), and the effects tagged "ground".
+//
+// ── VIEWERS ─────────────────────────────────────────────────────────────
+//
+// Nothing renders for a viewer: the + is hidden too, and the store's set()
+// seam closes the drawer when `readOnly` turns on.
+import { createElement, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { paintCss } from "@dailies-studio/shot/doc";
+import type { IconNode, Paint } from "@dailies-studio/shot/doc";
+import type { ComponentRow } from "../../api.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { INSERT_SECTIONS } from "../../state/types.js";
+import type { InsertSection } from "../../state/types.js";
+import { isSceneContext } from "../../state/viewMode.js";
+import { sceneContextRefusal } from "../../state/keymap.js";
+import { isolationInsertRefusal } from "../../state/isolationTrail.js";
+import { ADD_FAMILIES, promotedBuiltinLabel } from "../../addFamilies.js";
+import {
+  ADD_ICON,
+  CLOSE_ICON,
+  IMAGE_UP_ICON,
+  LIBRARY_ICON,
+  MORE_ICON,
+  SEARCH_ICON,
+  addRowIcon,
+  effectCategoryIcon,
+} from "../../icons.js";
+import { useAddRows } from "../toolbar/useAddRows.js";
+import type { AddRow } from "../toolbar/useAddRows.js";
+import { useDismiss } from "../toolbar/useDismiss.js";
+import { useFixedVirtualWindow } from "../virtualWindow.js";
+import { patchScene } from "../inspector/scene/SceneSection.js";
+import { loadIconSet, searchIcons } from "./iconSet.js";
+import type { IconEntry } from "./iconSet.js";
+
+/** One icon cell (32) and the grid's gap (2). */
+const ICON_PITCH = 34;
+/** The icon grid's own scroller shows this many rows. */
+const ICON_ROWS_SHOWN = 7;
+/** Columns before the grid has been measured (jsdom, the first frame). */
+const ICON_COLS_FALLBACK = 6;
+
+/** The effects a Backgrounds list offers: the catalog tags them "ground". */
+const GROUND_TAG = "ground";
+
+/** The scene paint presets. Solids first, then the gradients, as drawn. */
+export const SCENE_PAINTS: readonly Paint[] = [
+  { type: "solid", color: "#000000" },
+  { type: "solid", color: "#0a0a0a" },
+  { type: "solid", color: "#0e1a2b" },
+  { type: "solid", color: "#f5f5f5" },
+  { type: "solid", color: "#ff4d1f" },
+  { type: "solid", color: "#0099ff" },
+  { type: "linear-gradient", angleDeg: 135, stops: [{ at: 0, color: "#1b2a4a" }, { at: 1, color: "#0a0a0a" }] },
+  { type: "linear-gradient", angleDeg: 135, stops: [{ at: 0, color: "#ff8a3d" }, { at: 1, color: "#7a2bff" }] },
+  { type: "linear-gradient", angleDeg: 180, stops: [{ at: 0, color: "#f5f5f5" }, { at: 1, color: "#bfc6d1" }] },
+  { type: "radial-gradient", stops: [{ at: 0, color: "#2b3a67" }, { at: 1, color: "#05070d" }] },
+  { type: "radial-gradient", stops: [{ at: 0, color: "#ffe1c2" }, { at: 1, color: "#ff5c69" }] },
+  { type: "linear-gradient", angleDeg: 135, stops: [{ at: 0, color: "#2fd4bf" }, { at: 1, color: "#0e1a2b" }] },
+];
+
+/** The swatch side the stylesheet gives a swatch (insert-drawer.css). */
+const SWATCH_PX = 32;
+/** The frame before a document is open. */
+const SQUARE_FRAME = { width: 1, height: 1 } as const;
+
+/** A scene paint swatch: the Project frame in small, so it shows what the
+ *  stage draws over that frame. The box is the frame's aspect inside the
+ *  stylesheet's square, and the paint is `paintCss` over the frame, the
+ *  stage's own geometry (`paintCss` reads only the aspect). A raw
+ *  `${angleDeg}deg` read the angle as CSS's, so a 135 preset ran top-left to
+ *  bottom-right here and the other way on stage, and a square box showed a
+ *  diagonal at the wrong angle on any frame that is not square. */
+function swatchStyle(paint: Paint, frame: { width: number; height: number }): CSSProperties {
+  const { width, height } = frame;
+  const wide = width >= height;
+  return {
+    width: wide ? SWATCH_PX : (SWATCH_PX * width) / height,
+    height: wide ? (SWATCH_PX * height) / width : SWATCH_PX,
+    background: paintCss(paint, width, height),
+  };
+}
+
+function paintName(paint: Paint): string {
+  if (paint.type === "solid") return paint.color;
+  const stops = paint.stops.map((s) => s.color).join(" to ");
+  return `${paint.type === "linear-gradient" ? "Linear" : "Radial"} ${stops}`;
+}
+
+const samePaint = (a: Paint | undefined, b: Paint): boolean => JSON.stringify(a) === JSON.stringify(b);
+
+/** Every word of the query appears in the text. */
+function matches(text: string, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (q === "") return true;
+  const hay = text.toLowerCase();
+  return q.split(/\s+/).every((word) => hay.includes(word));
+}
+
+/** A Basics tile's caption: the drawer's own short words for two rows. */
+function captionOf(row: AddRow): string {
+  if (row.key === "media") return "Media…";
+  if (row.key === "html") return "Html";
+  return row.label;
+}
+
+const capitalise = (s: string): string => s.charAt(0).toUpperCase() + s.slice(1);
+
+/** Effect rows grouped by catalog category, in first-appearance order. */
+function byCategory(rows: readonly ComponentRow[]): Array<{ category: string; rows: ComponentRow[] }> {
+  const groups = new Map<string, ComponentRow[]>();
+  for (const row of rows) {
+    const category = row.effect?.category ?? "other";
+    const list = groups.get(category);
+    if (list === undefined) groups.set(category, [row]);
+    else list.push(row);
+  }
+  return [...groups].map(([category, list]) => ({ category, rows: list }));
+}
+
+export function InsertDrawer() {
+  const open = useShotEditor((s) => s.insertDrawer !== null && !s.readOnly);
+  return open ? <Drawer /> : null;
+}
+
+function Drawer() {
+  const store = useStore();
+  const drawer = useShotEditor((s) => s.insertDrawer);
+  const above = useShotEditor((s) => s.doc === null || isSceneContext(s));
+  const library = useShotEditor((s) => s.library);
+  const searchFocus = useShotEditor((s) => s.searchFocus);
+  const { rows, busy, fileInput } = useAddRows({ wantLibrary: true, claimImagePick: false });
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState<InsertSection>(drawer?.section ?? "Basics");
+  const [menu, setMenu] = useState<{ id: string; left: number; top: number } | null>(null);
+  const listRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const sectionRefs = useRef(new Map<InsertSection, HTMLElement>());
+
+  const contextRefusal = above ? sceneContextRefusal("Insert", "adds") : null;
+  // Every tile here adds a layer, which a leaf isolation cannot hold. Scene
+  // paint is the exception: it sets the Shot's background, not a layer.
+  const leafRefusal = useShotEditor(isolationInsertRefusal);
+  const refusal = contextRefusal ?? leafRefusal;
+  const searching = query.trim() !== "";
+
+  // `/` (focusSearch) puts the caret in the drawer's field while it is open.
+  // The outline's own field is hidden under it, so its focus is a no-op.
+  const firstFocus = useRef(searchFocus);
+  useEffect(() => {
+    if (searchFocus !== firstFocus.current) inputRef.current?.focus();
+  }, [searchFocus]);
+
+  // A chip, the inspector's button or an open at a section: scroll to it. Keyed
+  // on the drawer OBJECT, which every open makes anew, so asking for the
+  // section already shown still scrolls back to its head.
+  useLayoutEffect(() => {
+    if (drawer === null) return;
+    setActive(drawer.section);
+    const list = listRef.current;
+    const head = sectionRefs.current.get(drawer.section);
+    if (list === null || head === undefined) return;
+    list.scrollTop = head.offsetTop;
+  }, [drawer]);
+
+  const onScroll = (): void => {
+    const list = listRef.current;
+    if (list === null) return;
+    const atEnd = list.scrollTop + list.clientHeight >= list.scrollHeight - 1;
+    let next: InsertSection = "Basics";
+    for (const section of INSERT_SECTIONS) {
+      const head = sectionRefs.current.get(section);
+      if (head !== undefined && (atEnd || head.offsetTop <= list.scrollTop + 1)) next = section;
+    }
+    setActive(next);
+  };
+
+  const sectionRef = (section: InsertSection) => (el: HTMLElement | null) => {
+    if (el === null) sectionRefs.current.delete(section);
+    else sectionRefs.current.set(section, el);
+  };
+
+  // ── the rows ───────────────────────────────────────────────────────────
+  const basics = rows.filter((r) => r.section !== "Effects" && matches(r.label, query));
+  const effects = useMemo(
+    () => library.filter((r) => r.host === "three" && r.effect !== undefined && promotedBuiltinLabel(r.id) === null),
+    [library],
+  );
+  const effectText = (r: ComponentRow): string => `${r.name} ${r.effect?.category ?? ""} ${(r.effect?.tags ?? []).join(" ")}`;
+  const shaders = effects.filter((r) => !(r.effect?.tags.includes(GROUND_TAG) ?? false) && matches(effectText(r), query));
+  const grounds = effects.filter((r) => (r.effect?.tags.includes(GROUND_TAG) ?? false) && matches(effectText(r), query));
+  const paints = searching ? [] : SCENE_PAINTS;
+
+  const report = (e: unknown): void => store.reportError(e instanceof Error ? e.message : String(e));
+  const addEffect = (id: string): void => void store.addInstanceLayer(id).catch(report);
+  const useAsBackground = (id: string): void => void store.useAsBackground(id).catch(report);
+
+  // The "…" closes the menu on its own press (useDismiss sees a press outside
+  // the menu), so the click that follows must not open it straight back.
+  const closed = useRef<{ id: string; at: number } | null>(null);
+  const openMenu = (id: string, tile: HTMLElement): void => {
+    const last = closed.current;
+    if (last !== null && last.id === id && performance.now() - last.at < 400) return;
+    const box = tile.getBoundingClientRect();
+    setMenu({ id, left: box.right + 4, top: Math.max(8, Math.min(box.top, window.innerHeight - 160)) });
+  };
+  const closeMenu = (): void => {
+    if (menu !== null) closed.current = { id: menu.id, at: performance.now() };
+    setMenu(null);
+  };
+
+  const effectTile = (row: ComponentRow) => (
+    <ShaderTile
+      key={row.id}
+      row={row}
+      refusal={refusal}
+      menuOpen={menu?.id === row.id}
+      onAdd={() => addEffect(row.id)}
+      onMenu={(tile) => openMenu(row.id, tile)}
+    />
+  );
+
+  return (
+    <section className="insert-drawer" aria-label="Insert">
+      <header className="insert-head">
+        <span className="insert-title">Insert</span>
+        <kbd className="insert-hint">Esc</kbd>
+        <button
+          type="button"
+          className="insert-close"
+          aria-label="Close Insert"
+          title="Close (Esc)"
+          onClick={() => store.closeInsertDrawer()}
+        >
+          {CLOSE_ICON}
+        </button>
+      </header>
+      <div className="insert-search-row">
+        <label className={`insert-search${searching ? " has-query" : ""}`}>
+          <span className="insert-search-icon" aria-hidden="true">
+            {SEARCH_ICON}
+          </span>
+          <input
+            ref={inputRef}
+            type="search"
+            className="insert-search-input"
+            placeholder="Search"
+            aria-label="Search everything you can insert"
+            value={query}
+            onChange={(e) => setQuery(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              if (e.key !== "Escape") return;
+              // The field's Escape: a query clears first, then the drawer
+              // closes. Stopped here so no stage lane sees it.
+              e.preventDefault();
+              e.stopPropagation();
+              if (query !== "") setQuery("");
+              else store.closeInsertDrawer();
+            }}
+          />
+          {searching ? (
+            <button type="button" className="insert-search-clear" aria-label="Clear search" onClick={() => setQuery("")}>
+              {CLOSE_ICON}
+            </button>
+          ) : (
+            <kbd className="insert-hint">/</kbd>
+          )}
+        </label>
+      </div>
+      <nav className="insert-chips" aria-label="Jump to a section">
+        {INSERT_SECTIONS.map((section) => (
+          <button
+            key={section}
+            type="button"
+            className={`insert-chip${active === section ? " is-active" : ""}`}
+            aria-current={active === section ? "true" : undefined}
+            onClick={() => store.openInsertDrawer(section)}
+          >
+            {section}
+          </button>
+        ))}
+      </nav>
+      <div ref={listRef} className="insert-list" onScroll={onScroll}>
+        <Section name="Basics" count={basics.length} sectionRef={sectionRef("Basics")}>
+          {ADD_FAMILIES.map((family) => {
+            const members = basics.filter((r) => r.family === family);
+            if (members.length === 0) return null;
+            return (
+              <div key={family} className="insert-family">
+                <div className="insert-sub">{family}</div>
+                <div className="insert-tiles">
+                  {members.map((row) => {
+                    const why =
+                      refusal ?? (row.disabled === true ? (row.title ?? row.label) : null) ??
+                      (busy && (row.key === "media" || row.key === "mesh") ? "Waiting for the last file to finish importing" : null);
+                    return (
+                      <button
+                        key={row.key}
+                        type="button"
+                        className="insert-tile"
+                        disabled={why !== null}
+                        title={why ?? row.title ?? row.label}
+                        onClick={row.run}
+                      >
+                        <span className="insert-tile-icon" aria-hidden="true">
+                          {addRowIcon(row.key)}
+                        </span>
+                        <span className="insert-tile-label">{captionOf(row)}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </Section>
+        <IconsSection
+          query={query}
+          asked={drawer?.section === "Icons"}
+          refusal={refusal}
+          listRef={listRef}
+          sectionRef={sectionRef("Icons")}
+        />
+        {/* NOT VIRTUALISED, unlike Icons: the catalog's three-host effects
+            are a few dozen tiles, and each thumb is `loading="lazy"`, so the
+            browser fetches only the ones scrolled near. A windowed grid is
+            for the 1850 icons. Revisit if the registry grows into hundreds. */}
+        <Section name="Shaders" count={shaders.length} sectionRef={sectionRef("Shaders")}>
+          {byCategory(shaders).map((group) => (
+            <div key={group.category} className="insert-family">
+              <div className="insert-sub">
+                {capitalise(group.category)}
+                <span className="insert-count">{group.rows.length}</span>
+              </div>
+              <div className="insert-tiles">{group.rows.map(effectTile)}</div>
+            </div>
+          ))}
+          {searching ? null : (
+            <button type="button" className="insert-link" onClick={() => store.setLibraryBrowserOpen(true)}>
+              <span className="insert-link-icon" aria-hidden="true">
+                {LIBRARY_ICON}
+              </span>
+              Materials and blueprints are in the Library
+            </button>
+          )}
+        </Section>
+        <Section name="Backgrounds" count={paints.length + grounds.length} sectionRef={sectionRef("Backgrounds")}>
+          {paints.length === 0 ? null : <ScenePaints refusal={contextRefusal} />}
+          {grounds.length === 0 ? null : (
+            <div className="insert-family">
+              <div className="insert-sub">
+                Shader grounds
+                <span className="insert-count">{grounds.length}</span>
+              </div>
+              <div className="insert-tiles">{grounds.map(effectTile)}</div>
+            </div>
+          )}
+        </Section>
+        {searching ? (
+          <p className="insert-footnote">Search looks in every section. A section with no match stays as one line.</p>
+        ) : null}
+      </div>
+      {menu === null ? null : (
+        <TileMenu
+          left={menu.left}
+          top={menu.top}
+          onClose={closeMenu}
+          onAdd={() => {
+            closeMenu();
+            addEffect(menu.id);
+          }}
+          onBackground={() => {
+            closeMenu();
+            useAsBackground(menu.id);
+          }}
+        />
+      )}
+      {fileInput}
+    </section>
+  );
+}
+
+function Section(props: {
+  name: InsertSection;
+  count: number | null;
+  sectionRef: (el: HTMLElement | null) => void;
+  children?: ReactNode;
+}) {
+  return (
+    <section ref={props.sectionRef} className="insert-section" aria-label={props.name} data-section={props.name}>
+      <div className="insert-section-head">
+        <span className="insert-section-label">{props.name}</span>
+        {props.count === null ? null : <span className="insert-count">{props.count}</span>}
+      </div>
+      {props.count === 0 ? null : props.children}
+    </section>
+  );
+}
+
+/** A shader tile: its thumb (or its category's glyph), its name, and a "…"
+ *  that offers "Use as background". A click adds it to the shot. */
+function ShaderTile(props: {
+  row: ComponentRow;
+  refusal: string | null;
+  menuOpen: boolean;
+  onAdd: () => void;
+  onMenu: (tile: HTMLElement) => void;
+}) {
+  const { row } = props;
+  const [broken, setBroken] = useState(false);
+  const thumb = row.effect?.thumb;
+  return (
+    <div className={`insert-shader${props.menuOpen ? " is-menu-open" : ""}`}>
+      <button
+        type="button"
+        className="insert-shader-add"
+        disabled={props.refusal !== null}
+        title={props.refusal ?? row.name}
+        onClick={props.onAdd}
+      >
+        <span className="insert-thumb">
+          {thumb === undefined || broken ? (
+            <span className="insert-thumb-glyph" aria-hidden="true">
+              {effectCategoryIcon(row.effect?.category ?? "")}
+            </span>
+          ) : (
+            <img src={thumb} alt="" loading="lazy" decoding="async" onError={() => setBroken(true)} />
+          )}
+        </span>
+        <span className="insert-shader-label">{row.name}</span>
+      </button>
+      <button
+        type="button"
+        className="insert-shader-more"
+        aria-label={`More for ${row.name}`}
+        aria-haspopup="menu"
+        aria-expanded={props.menuOpen}
+        disabled={props.refusal !== null}
+        onClick={(e) => props.onMenu(e.currentTarget.parentElement ?? e.currentTarget)}
+      >
+        {MORE_ICON}
+      </button>
+    </div>
+  );
+}
+
+/** The shader tile's menu. Portalled to the body, at the tile's right edge,
+ *  so the left rail's stacking context cannot paint it under the canvas. */
+function TileMenu(props: {
+  left: number;
+  top: number;
+  onClose: () => void;
+  onAdd: () => void;
+  onBackground: () => void;
+}) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useDismiss(true, ref, props.onClose);
+  // The first row takes focus, so Enter adds (the row's own hint says so).
+  useLayoutEffect(() => ref.current?.querySelector("button")?.focus(), []);
+  return createPortal(
+    <div ref={ref} className="insert-menu" role="menu" style={{ left: props.left, top: props.top }}>
+      <button type="button" role="menuitem" className="insert-menu-row" onClick={props.onAdd}>
+        <span className="insert-menu-icon" aria-hidden="true">
+          {ADD_ICON}
+        </span>
+        <span className="insert-menu-label">Add to shot</span>
+        <kbd className="insert-hint">Enter</kbd>
+      </button>
+      <button type="button" role="menuitem" className="insert-menu-row is-background" onClick={props.onBackground}>
+        <span className="insert-menu-icon" aria-hidden="true">
+          {IMAGE_UP_ICON}
+        </span>
+        <span className="insert-menu-label">Use as background</span>
+      </button>
+      <div className="insert-menu-divider" role="separator" />
+      <p className="insert-menu-note">Places it at the back, sized to the frame, locked and named Background. One undo.</p>
+    </div>,
+    document.body,
+  );
+}
+
+/** The Shot's background as presets: a click writes `background` through the
+ *  inspector's seam, so an animated background takes a key at the playhead. */
+function ScenePaints(props: { refusal: string | null }) {
+  const store = useStore();
+  const sceneId = useShotEditor((s) => s.enteredScene);
+  const current = useShotEditor((s) =>
+    s.enteredScene === null ? undefined : s.doc?.scenesById[s.enteredScene]?.background,
+  );
+  const frame = useShotEditor((s) => s.doc?.size) ?? SQUARE_FRAME;
+  const why = props.refusal ?? (sceneId === null ? sceneContextRefusal("Scene paint", "sets") : null);
+  return (
+    <div className="insert-family">
+      <div className="insert-sub">
+        Scene paint
+        <span className="insert-count">solid · gradient</span>
+      </div>
+      <div className="insert-swatches">
+        {SCENE_PAINTS.map((paint) => {
+          const on = samePaint(current, paint);
+          return (
+            <button
+              key={paintName(paint)}
+              type="button"
+              className={`insert-swatch${on ? " is-active" : ""}`}
+              style={swatchStyle(paint, frame)}
+              aria-pressed={on}
+              aria-label={paintName(paint)}
+              title={why ?? paintName(paint)}
+              disabled={why !== null}
+              onClick={() => {
+                if (sceneId === null) return;
+                store.edit((d) => patchScene(d, sceneId, { background: paint }, store.getState().frame));
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/** One Lucide icon, drawn from its nodes with `createElement`: no innerHTML. */
+function IconGlyph(props: { node: readonly IconNode[] }): ReactElement {
+  return createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+    },
+    ...props.node.map(([tag, attrs], index) => createElement(tag, { key: index, ...attrs })),
+  );
+}
+
+/**
+ * The Icons section. Lucide loads the first time the section is ASKED FOR:
+ * scrolled into view, jumped to, or searched. Its grid is its own scroller,
+ * seven rows tall, and only the rows near its viewport are mounted.
+ */
+function IconsSection(props: {
+  query: string;
+  asked: boolean;
+  refusal: string | null;
+  listRef: React.RefObject<HTMLDivElement | null>;
+  sectionRef: (el: HTMLElement | null) => void;
+}) {
+  const store = useStore();
+  const [set, setSet] = useState<readonly IconEntry[] | null>(null);
+  const [failed, setFailed] = useState(false);
+  const [wanted, setWanted] = useState(false);
+  const own = useRef<HTMLElement | null>(null);
+
+  const want = props.asked || props.query.trim() !== "" || wanted;
+
+  // Scrolled into view: the list is the root, so a drawer that opens at
+  // Basics does not load the set until the author scrolls down to it.
+  useEffect(() => {
+    const el = own.current;
+    const root = props.listRef.current;
+    if (wanted || el === null || root === null || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) setWanted(true);
+      },
+      { root },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [wanted, props.listRef]);
+
+  const [attempt, setAttempt] = useState(0);
+  useEffect(() => {
+    if (!want || set !== null) return;
+    let live = true;
+    setFailed(false);
+    loadIconSet().then(
+      (loaded) => {
+        if (live) setSet(loaded);
+      },
+      () => {
+        if (live) setFailed(true);
+      },
+    );
+    return () => {
+      live = false;
+    };
+  }, [want, set, attempt]);
+
+  const found = useMemo(() => (set === null ? null : searchIcons(set, props.query)), [set, props.query]);
+
+  return (
+    <section
+      ref={(el) => {
+        own.current = el;
+        props.sectionRef(el);
+      }}
+      className="insert-section"
+      aria-label="Icons"
+      data-section="Icons"
+    >
+      <div className="insert-section-head">
+        <span className="insert-section-label">Icons</span>
+        {found === null ? null : <span className="insert-count">{found.length}</span>}
+      </div>
+      {found !== null ? (
+        found.length === 0 ? null : (
+          <IconGrid icons={found} refusal={props.refusal} onPick={(e) => store.addIconLayer(e.name, e.node)} />
+        )
+      ) : failed ? (
+        <div className="insert-status">
+          Icons did not load.
+          <button type="button" className="insert-retry" onClick={() => setAttempt((n) => n + 1)}>
+            Retry
+          </button>
+        </div>
+      ) : want ? (
+        <div className="insert-status">Loading icons…</div>
+      ) : null}
+    </section>
+  );
+}
+
+function IconGrid(props: { icons: readonly IconEntry[]; refusal: string | null; onPick: (entry: IconEntry) => void }) {
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const gridRef = useRef<HTMLDivElement | null>(null);
+  const [cols, setCols] = useState(ICON_COLS_FALLBACK);
+  const [scrollTop, setScrollTop] = useState(0);
+
+  // Columns from the scroller's width: a wider rail fits more icons a row.
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (el === null) return;
+    const measure = (): void => {
+      const width = el.clientWidth;
+      setCols(width > 0 ? Math.max(1, Math.floor((width + 2) / ICON_PITCH)) : ICON_COLS_FALLBACK);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const rowCount = Math.ceil(props.icons.length / cols);
+  const range = useFixedVirtualWindow({
+    listRef: gridRef,
+    scrollSelector: ".insert-icons",
+    count: rowCount,
+    rowHeight: ICON_PITCH,
+    enabled: true,
+  });
+  const seenRows = Math.ceil((scrollTop + ICON_ROWS_SHOWN * ICON_PITCH) / ICON_PITCH);
+  const below = Math.max(0, props.icons.length - seenRows * cols);
+
+  const rows: ReactElement[] = [];
+  for (let r = range.start; r < range.end; r += 1) {
+    rows.push(
+      <div key={r} className="insert-icon-row">
+        {props.icons.slice(r * cols, r * cols + cols).map((entry) => (
+          <button
+            key={entry.name}
+            type="button"
+            className="insert-icon"
+            data-name={entry.name}
+            aria-label={entry.name}
+            title={props.refusal ?? entry.name}
+            disabled={props.refusal !== null}
+            onClick={() => props.onPick(entry)}
+          >
+            <IconGlyph node={entry.node} />
+          </button>
+        ))}
+      </div>,
+    );
+  }
+
+  return (
+    <>
+      <div ref={scrollRef} className="insert-icons" onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}>
+        <div ref={gridRef} className="insert-icon-grid">
+          <div style={{ height: range.before }} />
+          {rows}
+          <div style={{ height: range.after }} />
+        </div>
+      </div>
+      {below === 0 ? null : <div className="insert-more">{below} more below</div>}
+    </>
+  );
+}