@heycys/gallery 0.1.2 → 0.2.0

package/browser/editor/page/board/index.mjs

@@ -1,9 +1,8 @@
 import { GAP, GRID, cellAt, fitHeight, gridFor, moved, pushDown, sizeFor, spanOf } from "../../../shared/board-places.mjs";
 import { cellsOf } from "../../../shared/card-size.mjs";
 import { language, t } from "../../../shared/i18n/index.mjs";
-import { BLOCK_ICON, svg } from "../../components/icons.mjs";
+import { BLOCK_ICON, SETTINGS_ICON, svg } from "../../components/icons.mjs";
 import { instanceAround, instanceOf, packageOf } from "../../components/instances.mjs";
-import { edgeScroll } from "../edge-scroll.mjs";
 import { gestureLock } from "../gesture.mjs";
 import { ICONS, createMenu } from "../menu.mjs";
 import { say } from "../notices.mjs";
@@ -12,7 +11,8 @@ import { tooltip } from "../tooltip.mjs";
 import { addStyle, element, mount } from "../ui.mjs";
 import { createClient } from "./client.mjs";
 import { createHistory } from "./history.mjs";
-import { showHint, showNews } from "./hint.mjs";
+import { createEdgeScroll, createSettle, glide, isGliding, stopGlide } from "./motion.mjs";
+import { showBlank, showHint, showNews } from "./hint.mjs";
 import { closeSettings, formOpen, openSettings } from "./settings.mjs";
 
 // A custom page's board edited (docs/render.md "A custom page"; the plan's §5.3, the spec §6 and §8):
@@ -31,20 +31,33 @@ import { closeSettings, formOpen, openSettings } from "./settings.mjs";
 //     one that moves less, or a key (Enter, Space) on the grip, opens the card's menu: what is dragged
 //     and selected in a card is its block's (DocKit.drag never moves a card). A bare card (its block's
 //     card.bare) shows where it stands by a dashed line of the guides' gray.
-//   - Moving. The card follows the pointer, and where it would go, the whole cells nearest to it
-//     (shared/board-places.mjs cellAt), shows as a quiet spot (a fill of its own, no line; no guide
-//     lines stand where its edge meets another card's); the cards it would meet are drawn pushed down
-//     under it (pushDown, the service's own rule: DocBoard.draft), never up. Escape, or the pointer taken
-//     away, puts all back; a drop sends `place`, and the board stands as the service answers. The rows
-//     above a board's first card are not drawn (DocBoard.skipped): the pointer's row is the drawn one
-//     plus the rows skipped as the drag began, so that a card let go where it was writes nothing and one
-//     held above the first row goes above it (drawn at the top, the others under it).
+//   - The board while a card is moved or resized (the user's word of 2026-11-09): no landing shadow
+//     under it; the board's lattice drawn as faint grey dots, one where the gaps between four cells
+//     cross (the board's outer edge too), from the gesture's start to its end (.ge-board-dots, light
+//     and dark), and the card snapping to the cells it would land at as it comes within SNAP px of them,
+//     each axis on its own: where it snaps is where a drop puts it.
+//   - Its motion (./motion.mjs; the user's word of 2026-11-09, an iPhone's home-screen widgets): the card
+//     held follows the pointer at once and settles onto the cells it snaps to (or off them) on a spring in
+//     SETTLE ms, never a jump; the cards making way, the card let go (to its cells, or back on Escape), a
+//     resize's and 大小 ›'s, an undo's and a redo's glide from where they were seen to their new place on
+//     that spring (FLIP, GLIDE ms), each starting again from where it is seen when the target changes under
+//     it; near the window's top or bottom edge the page scrolls, timed by the frames, faster nearer the edge
+//     and never past FASTEST px a second. prefers-reduced-motion: no glide or settling.
+//   - Moving. The card follows the pointer, and where it would go is the whole cells nearest to it
+//     (shared/board-places.mjs cellAt), which the card itself is drawn at (DocBoard.draft), moved off
+//     them by the pointer's offset but within SNAP px of them on an axis, where it stands on them; the
+//     cards it would meet are drawn pushed down under it (pushDown, the service's own rule), never up.
+//     Escape, or the pointer taken away, puts all back; a drop sends `place`, and the board stands as
+//     the service answers. The rows above a board's first card are not drawn (DocBoard.skipped): the
+//     pointer's row is the drawn one plus the rows skipped as the drag began, so that a card let go
+//     where it was writes nothing and one held above the first row goes above it (drawn at the top, the
+//     others under it).
 //   - Resizing. A card whose block says card.resize has a grip at its bottom-right: it follows the
-//     pointer, the spot showing the size it snaps to, the nearest of card.sizes, else whole cells
-//     between card.min and card.max (sizeFor), never past the row's end; one of fit content only
-//     gets wider (its height is its content's); one whose manifest frees it (`any`) reaches every
-//     whole size. The menu's 大小 › gives the listed sizes (the common ones), in a card of rows of
-//     words alone, only as wide as they are.
+//     pointer, snapping to the size a drop gives (within SNAP px of its width or height), the nearest of
+//     card.sizes, else whole cells between card.min and card.max (sizeFor), never past the row's end;
+//     one of fit content only gets wider (its height is its content's); one whose manifest frees it
+//     (`any`) reaches every whole size. The menu's 大小 › gives the listed sizes (the common ones), in a
+//     card of rows of words alone, only as wide as they are.
 //   - The card's menu (the grip's click): 设置… (a block with settings: ./settings.mjs, written by the
 //     service's `settings`), 大小 ›, 删除 (`remove`).
 //   - 添加自定义块: in a workbench (`hosted`) the workbench's top bar has its button, which asks by the
@@ -53,7 +66,8 @@ import { closeSettings, formOpen, openSettings } from "./settings.mjs";
 //     centred, and adds to the page's FIRST board; a page open alone in a tab has the button of its own
 //     at the top right of each board, above it. The library (the service's GET library: the blocks
 //     whose places hold page and are not turned off, with their previews, Gallery's own not yet in the
-//     workspace too, which the service puts in): the card put at the first free spot by its block's
+//     workspace too, which the service puts in), in a section of each pack under its name (no pack's
+//     name in grey after a block's): the card put at the first free spot by its block's
 //     default size (`add`); the page is then shown again (the host's hidden-frame swap), which brings
 //     the block's script and style.
 //   - A block's own write (context.edit, the kit's cancellable doc-component-edit): taken here, its
@@ -88,12 +102,14 @@ import { closeSettings, formOpen, openSettings } from "./settings.mjs";
 const BOARD = ".gallery-board";
 const CARD = ".gallery-card";
 const THRESHOLD = 4; // px a press moves before it is a drag
+const SNAP = 14; // px from the place (or the size) a drop gives within which a moved (or resized) card stands on it
+const DOT = 3; // px of room around each of the board's dots while a card is moved or resized (their tile's corner)
 const GRIP = { size: 28, inset: 6 }; // the grip's box, and its room from the card's top and right edges (inside the card)
 const FIELDS = "input, textarea, select, [contenteditable]:not([contenteditable=false])";
 
 const DOTS = '<svg viewBox="0 0 10 16" aria-hidden="true"><circle cx="2.5" cy="2" r="1.25"/><circle cx="7.5" cy="2" r="1.25"/><circle cx="2.5" cy="8" r="1.25"/><circle cx="7.5" cy="8" r="1.25"/><circle cx="2.5" cy="14" r="1.25"/><circle cx="7.5" cy="14" r="1.25"/></svg>';
 const CORNER = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M13 6.5 6.5 13M13 10.5 10.5 13"/></svg>';
-const GEAR = svg('<circle cx="10" cy="10" r="2.25"/><path d="M10 3.25v1.5M10 15.25v1.5M3.25 10h1.5M15.25 10h1.5M5.2 5.2l1.06 1.06M13.74 13.74l1.06 1.06M5.2 14.8l1.06-1.06M13.74 6.26l1.06-1.06"/>');
+const GEAR = SETTINGS_ICON;
 const SIZE = svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2.5"/><path d="M10 3.25v13.5M3.25 10H10"/>');
 const BLOCK = BLOCK_ICON;
 
@@ -118,10 +134,21 @@ const STYLE = `
   .ge-board-add:hover { background: var(--ge-hover); color: var(--ge-tx); }
   .ge-board-add:active, .ge-board-add[data-pressed] { background: var(--ge-press); color: var(--ge-tx); }
   .ge-board-add svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
-  .gallery-board > .ge-board-spot { box-sizing: border-box; grid-column: calc(var(--gallery-x, 0) + 1) / span var(--gallery-w, 4); grid-row: calc(var(--gallery-y, 0) + 1) / span var(--gallery-h, 2);
-    border-radius: var(--gallery-card-radius, 12px); background: light-dark(rgb(55 53 47 / 7%), rgb(255 255 255 / 8%)); pointer-events: none; }
-  .gallery-board > .gallery-card[data-ge-lifted] { z-index: 3; box-shadow: var(--ge-shadow-pop); cursor: grabbing; }
-  .gallery-board > .gallery-card[data-ge-sizing] { z-index: 3; }
+  /* The board's lattice while a card is moved or resized: a faint grey dot where the gaps between four cells cross, under the cards (first in the board, which stands as their containing block meanwhile), placed by dotsOn. */
+  .gallery-board[data-ge-dotted] { position: relative; }
+  .gallery-board > .ge-board-dots { position: absolute; pointer-events: none; background-image: radial-gradient(circle at ${DOT}px ${DOT}px, light-dark(rgb(55 53 47 / 24%), rgb(255 255 255 / 20%)) 0 1.1px, transparent 1.6px); background-repeat: repeat; animation: ge-board-dots-in .14s ease-out; }
+  @keyframes ge-board-dots-in { from { opacity: 0; } }
+  @media (prefers-reduced-motion: reduce) { .gallery-board > .ge-board-dots { animation: none; } }
+  /* The card held lifts: its own shadow kept as it is, layer for layer, and a soft lift added after it, so
+     that only the lift eases in and out (a menu's shadow in its place made each of the card's layers turn
+     into another's, the shadow swelling and shrinking on the way: the user, 2026-11-09); a frameless card
+     takes the lift alone. One let go stays over the others while it glides to its cells. */
+  .gallery-board { --ge-board-lift: 0 10px 28px -10px light-dark(rgb(15 15 15 / 16%), rgb(0 0 0 / 55%)), 0 3px 10px -4px light-dark(rgb(15 15 15 / 8%), rgb(0 0 0 / 30%)); }
+  .gallery-board > .gallery-card[data-ge-lifted], .gallery-board > .gallery-card[data-ge-landing] { transition: box-shadow .2s ease-out; }
+  .gallery-board > .gallery-card[data-ge-lifted] { z-index: 3; box-shadow: var(--gallery-card-shadow), var(--ge-board-lift); cursor: grabbing; }
+  .gallery-board > .gallery-card[data-ge-bare][data-ge-lifted] { box-shadow: var(--ge-board-lift); }
+  .gallery-board > .gallery-card[data-ge-sizing], .gallery-board > .gallery-card[data-ge-landing] { z-index: 3; }
+  @media (prefers-reduced-motion: reduce) { .gallery-board > .gallery-card[data-ge-lifted], .gallery-board > .gallery-card[data-ge-landing] { transition: none; } }
   .gallery-board > .gallery-card[data-ge-bare][data-ge-hover] { outline: 1px dashed var(--ge-guide); outline-offset: 2px; }
   /* The card the grip stands in: a head's quiet note in its corner fades (the kit's --gallery-grip-shown, board.css). */
   .gallery-board > .gallery-card[data-ge-hover] { --gallery-grip-shown: 1; }
@@ -218,7 +245,7 @@ export function startBoard({ map, reload, hosted = false }) {
   };
   const drawn = (card) => globalThis.DocBoard?.drawn(card) ?? cellsOf(card);
   // How many rows above its first card the board does not draw (the kit's DocBoard.skipped): its drawn row
-  // r is the file's row r + skipped, which the spot, a dragged card's place and a drop are reckoned by.
+  // r is the file's row r + skipped, which a dragged card's place and a drop are reckoned by.
   const skipped = (board) => globalThis.DocBoard?.skipped?.(board) ?? 0;
   const draft = (board, cells) => globalThis.DocBoard?.draft(board, cells);
 
@@ -226,16 +253,20 @@ export function startBoard({ map, reload, hosted = false }) {
   // has not, or one the page has that it does not name, is someone else's doing: the page is shown again.
   function took(answer, { own = [] } = {}) {
     const named = new Set();
-    for (const card of answer.cards ?? []) {
-      named.add(card.id);
-      const node = cardById(card.id);
-      if (!node) {
-        if (!own.includes(card.id) && !leaving.has(card.id)) wantSwap(); // one the page took out meanwhile, its remove asked, is its own
-        continue;
+    // Where the page drew a card elsewhere than the service put it, it glides there (a held card follows the pointer).
+    glide(allCards(), () => {
+      for (const card of answer.cards ?? []) {
+        named.add(card.id);
+        const node = cardById(card.id);
+        if (!node) {
+          if (!own.includes(card.id) && !leaving.has(card.id)) wantSwap(); // one the page took out meanwhile, its remove asked, is its own
+          continue;
+        }
+        setCells(node, card);
+        node.dataset.geBase = card.base;
       }
-      setCells(node, card);
-      node.dataset.geBase = card.base;
-    }
+      if (!gesture) for (const board of boards()) globalThis.DocBoard?.layout(board);
+    }, { still: gesture?.card ?? null, settled: placeAgain });
     if (allCards().some((card) => !named.has(card.dataset.cardId))) wantSwap();
     history.know(basesNow());
   }
@@ -403,7 +434,8 @@ export function startBoard({ map, reload, hosted = false }) {
     if (resizable(card) && sizes.length > 1) {
       items.push({
         label: t("大小"), icon: SIZE, icons: false, compact: true,
-        submenu: () => sizes.map(([w, h]) => ({ label: `${w} × ${h}`, current: w === cells.w && h === cells.h, run: () => placeCard(card, { ...cells, w, h }) })),
+        // By width, then height (the user's word of 2026-11-09; the manifest lists its default first).
+        submenu: () => [...sizes].sort(([aw, ah], [bw, bh]) => aw - bw || ah - bh).map(([w, h]) => ({ label: `${w} × ${h}`, current: w === cells.w && h === cells.h, run: () => layOut(board, () => placeCard(card, { ...cells, w, h }), { lift: card }) })),
       });
     }
     if (items.length) items.push({ separator: true });
@@ -435,37 +467,58 @@ export function startBoard({ map, reload, hosted = false }) {
   }, true);
 
   // ---------- moving and resizing ----------
-  const spot = element("div", { class: "ge-board-spot", "data-doc-dev": "" });
-  // Near the window's top or bottom edge a drag or a resize scrolls the page (the editor's edge-scroll.mjs
-  // rule, faster the nearer the edge), each frame, and follows what came into view.
+  const dots = element("div", { class: "ge-board-dots", "data-doc-dev": "", "aria-hidden": "true" });
+  // The board's dots over all it draws now (its rows grow as a draft puts a card lower), each at a point of
+  // its lattice: where the gaps between four cells cross, and as far out on its edges, a DOT px room
+  // around each (the tile's corner the gradient draws it in).
+  const dotsOn = (board) => {
+    const { rect, step } = geometry(board);
+    const box = board.getBoundingClientRect();
+    const columns = Math.round((rect.right - rect.left + GAP) / step);
+    const rows = Math.max(1, Math.round((board.clientHeight + GAP) / step));
+    Object.assign(dots.style, {
+      left: `${rect.left - box.left - board.clientLeft - GAP / 2 - DOT}px`, top: `${-GAP / 2 - DOT}px`,
+      width: `${columns * step + 2 * DOT}px`, height: `${rows * step + 2 * DOT}px`, backgroundSize: `${step}px ${step}px`,
+    });
+  };
+  // Each frame of a gesture: near the window's top or bottom edge the page scrolls (./motion.mjs
+  // createEdgeScroll: timed by the frames, faster nearer the edge, never past FASTEST px a second) and the
+  // gesture follows what came into view; a card settling onto (or off) what it snaps to is drawn again.
   let pointer = null;
   let scrolling = 0;
-  const scrollNear = () => {
+  const edge = createEdgeScroll();
+  const frame = () => {
     scrolling = 0;
     if (!gesture || !pointer) return;
-    if (edgeScroll(pointer.clientX, pointer.clientY)) follow(pointer);
-    scrolling = requestAnimationFrame(scrollNear);
-  };
-  // The spot at cells of the file, drawn where its board draws them.
-  const placeSpot = (board, cells) => {
-    for (const axis of ["x", "y", "w", "h"]) spot.style.setProperty(`--gallery-${axis}`, String(axis === "y" ? cells.y - skipped(board) : cells[axis]));
+    if (edge.frame(pointer.clientY, performance.now())) follow(pointer);
+    else if (gesture.settle.gliding()) draw();
+    scrolling = requestAnimationFrame(frame);
   };
+  // The cards of `board` laid out by `change` (cells set), those it moves gliding there (./motion.mjs), the grip
+  // put again on its card once they stand.
+  const layOut = (board, change, options = {}) => glide(cardsIn(board), () => {
+    const result = change();
+    globalThis.DocBoard?.layout(board);
+    return result;
+  }, { settled: placeAgain, ...options });
 
   function begin(kind, card, event) {
+    stopGlide(card); // still gliding from a drop: taken up where its cells are
     const board = card.parentElement;
     const file = cellsOf(card);
     const rect = card.getBoundingClientRect();
     // skip: the rows the board skipped as the gesture began, which the kit keeps while its draft is shown
     // (a card held above the first row skips fewer): the pointer's row is reckoned by it throughout.
-    gesture = { kind, card, board, file, skip: skipped(board), target: { ...file }, grab: { x: event.clientX - rect.left, y: event.clientY - rect.top }, start: { x: event.clientX, y: event.clientY, width: rect.width, height: rect.height, scroll: scrollY } };
+    gesture = { kind, card, board, file, skip: skipped(board), target: { ...file }, grab: { x: event.clientX - rect.left, y: event.clientY - rect.top }, start: { x: event.clientX, y: event.clientY, width: rect.width, height: rect.height, scroll: scrollY }, settle: createSettle(SNAP), size: null };
     document.documentElement.setAttribute(kind === "move" ? "data-ge-dragging" : "data-ge-sizing", "");
     card.setAttribute(kind === "move" ? "data-ge-lifted" : "data-ge-sizing", "");
-    placeSpot(board, drawn(card));
-    board.append(spot);
+    board.setAttribute("data-ge-dotted", "");
+    board.prepend(dots);
+    dotsOn(board);
     grip.removeAttribute("data-shown");
     corner.removeAttribute("data-shown");
     follow(event);
-    scrolling = requestAnimationFrame(scrollNear);
+    scrolling = requestAnimationFrame(frame);
   }
   function follow(event) {
     const { kind, card, board, file, skip, grab, start } = gesture;
@@ -479,7 +532,7 @@ export function startBoard({ map, reload, hosted = false }) {
       target = { ...file, x: clamp(cellAt(left, cell), 0, 12 - file.w), y: Math.max(0, cellAt(top, cell) + skip) };
     } else {
       // The card follows the pointer between the least and the most it can snap to (its listed sizes', or
-      // its min and max), never past its row's end; the spot shows what it snaps to.
+      // its min and max), never past its row's end, standing at the size a drop gives where it is near it.
       const block = infoOf(card)?.card ?? {};
       const listed = block.any ? null : block.sizes?.filter(([w]) => file.x + w <= 12); // a card its block frees (any) takes every whole size
       const least = listed?.length ? { w: Math.min(...listed.map(([w]) => w)), h: Math.min(...listed.map(([, h]) => h)) } : { w: block.min?.w ?? 1, h: block.min?.h ?? 1 };
@@ -490,36 +543,59 @@ export function startBoard({ map, reload, hosted = false }) {
       const asked = { w: Math.max(1, Math.round((width + GAP) / step)), h: Math.max(1, Math.round((height + GAP) / step)) };
       const size = listed?.length ? sizeFor({ sizes: listed }, asked) : sizeFor(block, { w: Math.min(asked.w, 12 - file.x), h: asked.h }, 12 - file.x);
       target = { ...file, w: size.w, h: fits ? file.h : size.h };
-      card.style.width = `${Math.round(width)}px`;
-      if (!fits) card.style.height = `${Math.round(height)}px`;
+      gesture.size = { width, height, w: spanOf(size.w, cell), h: spanOf(size.h, cell), fits };
     }
     if (!cellsSame(target, gesture.target) || !gesture.drafted) {
       gesture.target = target;
       gesture.drafted = true;
-      draft(board, new Map([[card, target]]));
-      placeSpot(board, drawn(card));
+      // The cards it meets make way, gliding (the held card follows the pointer: draw).
+      glide(cardsIn(board), () => draft(board, new Map([[card, target]])), { still: card });
     }
+    draw();
+    dotsOn(board);
+  }
+  // The held card drawn where the pointer has it: moved, at the cells it would land at (the draft's), off them
+  // by the pointer's offset but where that is within SNAP px; resized, at the pointer's size but where that is
+  // within SNAP px of the size a drop gives. Each axis settles onto (or off) what it snaps to (createSettle).
+  function draw() {
+    const { kind, card, board, grab, settle, size } = gesture;
+    const time = performance.now();
     if (kind === "move") {
+      const { rect, step } = geometry(board);
       const now = drawn(card);
-      card.style.translate = `${Math.round(event.clientX - grab.x - rect.left - now.x * step)}px ${Math.round(event.clientY - grab.y - rect.top - (now.y - skipped(board)) * step)}px`;
+      const cells = { x: now.x * step, y: (now.y - skipped(board)) * step };
+      const x = settle.at("x", pointer.clientX - grab.x - rect.left, cells.x, time);
+      const y = settle.at("y", pointer.clientY - grab.y - rect.top, cells.y, time);
+      card.style.translate = `${Math.round(x - cells.x)}px ${Math.round(y - cells.y)}px`;
+    } else {
+      card.style.width = `${Math.round(settle.at("w", size.width, size.w, time))}px`;
+      if (!size.fits) card.style.height = `${Math.round(settle.at("h", size.height, size.h, time))}px`;
     }
   }
   function finish(drop) {
     const done = gesture;
     gesture = null;
     cancelAnimationFrame(scrolling);
+    edge.stop();
     pointer = null;
     const { card, board, file, target, kind } = done;
     document.documentElement.removeAttribute("data-ge-dragging");
     document.documentElement.removeAttribute("data-ge-sizing");
+    card.setAttribute("data-ge-landing", ""); // its lifted shadow eases out (and it stays over the others while it glides)
     card.removeAttribute("data-ge-lifted");
     card.removeAttribute("data-ge-sizing");
-    card.style.translate = "";
-    card.style.width = "";
-    card.style.height = "";
-    spot.remove();
-    if (drop && !cellsSame(target, file)) placeCard(card, target, { kind });
-    draft(board, null);
+    // Let go: it glides from where it is seen to its cells (dropped) or back to its own (Escape), over the
+    // others meanwhile, and they to theirs.
+    glide(cardsIn(board), () => {
+      card.style.translate = "";
+      card.style.width = "";
+      card.style.height = "";
+      dots.remove();
+      board.removeAttribute("data-ge-dotted");
+      if (drop && !cellsSame(target, file)) placeCard(card, target, { kind });
+      draft(board, null);
+    }, { lift: card, settled: placeAgain });
+    if (!isGliding(card)) setTimeout(() => { if (!isGliding(card)) card.removeAttribute("data-ge-landing"); }, 220);
     trySwap();
     hideSoon(); // the grip comes back where the pointer is
   }
@@ -722,14 +798,26 @@ export function startBoard({ map, reload, hosted = false }) {
       say(t("连不上本地服务"), "error");
       return false;
     }
-    const rows = (text = "") => listed.filter((block) => {
-      const words = `${said(block.name)} ${said(block.description)} ${block.id}`.toLowerCase();
-      return !text.trim() || words.includes(text.trim().toLowerCase());
-    }).map((block) => ({
-      label: said(block.name) || block.id, icon: BLOCK, hint: block.installed ? `${block.size.w} × ${block.size.h}` : t("自带"), ...(block.of ? { of: block.of } : {}),
-      ...(block.preview || block.description ? { preview: block.preview ? { src: block.preview, says: said(block.description) } : { says: said(block.description) } } : {}),
-      run: () => addBlock(board, block),
-    }));
+    // A section of each pack (the user's word of 2026-11-09), its name over its blocks, in the service's order
+    // (the packs as 设置 › 组件列表 has them, each's blocks by name); what is typed keeps the sections it finds blocks in.
+    const rows = (text = "") => {
+      const items = [];
+      let pack;
+      for (const block of listed) {
+        const words = `${said(block.name)} ${said(block.description)} ${block.id}`.toLowerCase();
+        if (text.trim() && !words.includes(text.trim().toLowerCase())) continue;
+        if (block.pack?.id !== pack) {
+          pack = block.pack?.id;
+          if (pack) items.push({ title: said(block.pack.name) || pack });
+        }
+        items.push({
+          label: said(block.name) || block.id, icon: BLOCK, hint: block.installed ? `${block.size.w} × ${block.size.h}` : t("自带"),
+          ...(block.preview || block.description ? { preview: block.preview ? { src: block.preview, says: said(block.description) } : { says: said(block.description) } } : {}),
+          run: () => addBlock(board, block),
+        });
+      }
+      return items;
+    };
     button?.setAttribute("data-pressed", "");
     const closed = () => menu.close();
     if (!button) addEventListener("blur", closed);
@@ -773,7 +861,7 @@ export function startBoard({ map, reload, hosted = false }) {
   });
 
   // ---------- 恢复默认卡片 ----------
-  // The home page's default cards it misses put back (the service's restore-defaults), a task as every
+  // The default cards a page with them misses put back (the service's restore-defaults), a task as every
   // op is: one step of undo for all of them (a group of adds), the page shown again with their blocks'
   // scripts and styles. Gives the service's answer ({ ok, added: [{ card, block, name }], skipped }),
   // which the workbench says, or its refusal.
@@ -822,7 +910,7 @@ export function startBoard({ map, reload, hosted = false }) {
       const cards = step.cards.filter(({ id }) => cardById(id));
       if (cards.length === 0) return false;
       const to = way === "undo" ? "before" : "after";
-      for (const one of cards) setCells(cardById(one.id), one[to]);
+      layOut(cardById(cards[0].id).parentElement, () => { for (const one of cards) setCells(cardById(one.id), one[to]); });
       const answer = await send({ op: "arrange", cards: cards.map((one) => ({ card: one.id, ...one[to], base: cardById(one.id).dataset.geBase })) });
       if (!answer?.ok) return failed(answer) ?? false;
       took(answer);
@@ -960,10 +1048,11 @@ export function startBoard({ map, reload, hosted = false }) {
       watch.observe(document.documentElement, { attributes: true, attributeFilter: ["data-doc-drawn"] });
     }
   }
-  // The home page's first-open note, while its map says so, and its note of new default cards (put in as
-  // 恢复默认卡片 puts them: restoreDefaults).
+  // The page's first-open note, while its map says so, its note of new default cards (put in as
+  // 恢复默认卡片 puts them: restoreDefaults), and the middle of a blank page (an Agent writes it).
   if (map.hint) showHint(map, { hosted });
   if (map.news) showNews(map, { restore: restoreDefaults });
+  if (map.blank) showBlank(map);
   // Its blocks may write from now on (the kit's context.canEdit, editable).
   dispatchEvent(new Event("doc-editable"));
   return { swap: wantSwap, undo, redo, idle: () => Promise.all([client.idle(), todos.idle()]), restoreDefaults, undoRestore, addCard };

package/browser/editor/page/board/motion.mjs

@@ -0,0 +1,177 @@
+// How a board's cards move while they are edited (./index.mjs; docs/render.md "Its cards edited"), the user's
+// word of 2026-11-09: as smooth as the widgets of an iPhone's home screen, nothing that jumps or stutters.
+//
+//   - glide(): the cards a change of the layout moves (a draft while a card is dragged or resized, a drop, an
+//     undo, 大小 ›) glide from where they were seen to where the layout now puts them (FLIP: their box before
+//     and after, a transform from the one to the other run to none) on a spring's ease (spring: a little
+//     less than critically damped, its overshoot under 2%), GLIDE ms; a card whose size changed glides its
+//     width and height too. A card already gliding to where the layout still puts it is left to go on; one
+//     the change sends elsewhere starts again from where it is seen then, so a target that changes under a
+//     drag never makes a card jump (interruptible).
+//   - createSettle(): a held card's place (or a resized card's size), axis by axis: the pointer's, or within
+//     `snap` px of the cells (or the size) a drop gives, those; where that changes (the card comes within the
+//     snap or leaves it, or the cells it stands on move) it settles from where it was carried to the new
+//     place in SETTLE ms on the same spring, the pointer's own motion never delayed.
+//   - createEdgeScroll(): near the window's top or bottom edge a gesture scrolls the page, timed by the frames'
+//     clock (not by the pointer's events): within BAND px of the edge, faster as the pointer is nearer it (the
+//     square of how far into the band, past the edge the most), FASTEST px a second at the most (12 a frame
+//     at 60 frames a second), and growing from nothing over RAMP ms once the pointer comes into the band, so
+//     that a card picked up near the edge does not set the page running.
+//   - prefers-reduced-motion: no glide and no settling (the layout and the snap at once); the scroll as it is.
+
+export const GLIDE = 280; // ms a card glides to where a layout puts it
+export const SETTLE = 180; // ms a held (or resized) card settles on what it snaps to, or comes off it
+export const BAND = 64; // px from the window's top or bottom edge within which a gesture scrolls the page
+export const FASTEST = 720; // px a second the page scrolls at the most
+export const RAMP = 320; // ms over which that speed grows from nothing once the pointer is in the band
+
+export const reduced = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+// The step response of a spring (damping ZETA, settled within 0.2% at t = 1): 0 at 0, 1 at 1, still at both
+// ends, a crest of under 2% past 1 at t ≈ 0.65.
+const ZETA = 0.8;
+const OMEGA = 6.4 / ZETA;
+const DAMPED = OMEGA * Math.sqrt(1 - ZETA * ZETA);
+export function spring(t) {
+  if (t <= 0) return 0;
+  if (t >= 1) return 1;
+  return 1 - Math.exp(-ZETA * OMEGA * t) * (Math.cos(DAMPED * t) + ((ZETA * OMEGA) / DAMPED) * Math.sin(DAMPED * t));
+}
+// The same as an easing a Web Animation takes (CSS linear() of 40 points), else a close cubic Bézier.
+const EASE = (() => {
+  const points = Array.from({ length: 41 }, (_, index) => Math.round(spring(index / 40) * 10000) / 10000).join(", ");
+  const curve = `linear(${points})`;
+  return typeof CSS !== "undefined" && CSS.supports?.("transition-timing-function", curve) ? curve : "cubic-bezier(.2, .9, .25, 1)";
+})();
+
+const running = new WeakMap(); // a card -> its glide under way
+// Where the kit's board script draws a card now: its cells as the CSS takes them (the board's row skip in).
+const keyOf = (card) => ["x", "y", "w", "h"].map((name) => card.style.getPropertyValue(`--gallery-${name}`)).join();
+
+/** Whether a card is gliding now. */
+export const isGliding = (card) => running.has(card);
+
+/** A card's glide stopped where it is (a gesture takes it up): it stands where the layout puts it. */
+export function stopGlide(card) {
+  running.get(card)?.cancel();
+}
+
+/**
+ * `change()` run (it lays the board out at once: DocBoard.draft or .layout), and each of `cards` it moves
+ * glided from where it was seen to its new place. `still`: a card left out (the one a gesture holds, which
+ * follows the pointer); `lift`: a card kept over the others while it glides (data-ge-landing: one let go);
+ * `settled()`: run once every glide this started has ended (at once where none started). Gives what change() gave.
+ */
+export function glide(cards, change, { still = null, lift = null, duration = GLIDE, settled = null } = {}) {
+  if (reduced()) {
+    const result = change();
+    settled?.();
+    return result;
+  }
+  const started = [];
+  const before = cards.filter((card) => card !== still).map((card) => ({ card, key: keyOf(card), box: card.getBoundingClientRect() }));
+  const result = change();
+  for (const { card, key, box } of before) {
+    if (!card.isConnected) continue;
+    const going = running.get(card);
+    if (going && keyOf(card) === key) continue; // on its way to where it still goes
+    going?.cancel();
+    const now = card.getBoundingClientRect();
+    const dx = box.left - now.left;
+    const dy = box.top - now.top;
+    const sized = Math.abs(box.width - now.width) > 0.5 || Math.abs(box.height - now.height) > 0.5;
+    if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5 && !sized) continue;
+    const from = { transform: `translate(${dx}px, ${dy}px)` };
+    const to = { transform: "translate(0px, 0px)" };
+    if (sized) {
+      Object.assign(from, { width: `${box.width}px`, height: `${box.height}px` });
+      Object.assign(to, { width: `${now.width}px`, height: `${now.height}px` });
+    }
+    const animation = card.animate([from, to], { duration, easing: EASE });
+    running.set(card, animation);
+    if (card === lift) card.setAttribute("data-ge-landing", "");
+    const end = () => {
+      if (running.get(card) !== animation) return;
+      running.delete(card);
+      card.removeAttribute("data-ge-landing");
+    };
+    animation.addEventListener("finish", end);
+    animation.addEventListener("cancel", end);
+    started.push(animation.finished.catch(() => {}));
+  }
+  if (settled) {
+    if (started.length) Promise.all(started).then(settled);
+    else settled();
+  }
+  return result;
+}
+
+/**
+ * A held card's place, or a resized card's size, axis by axis (`name`: "x", "y", "w", "h"): at(name, raw,
+ * target, time) gives what is drawn for the pointer's `raw` and the `target` a drop gives (the cells' place
+ * or size, px): the target within `snap` px of it, else raw; a change of which (or of the target while on
+ * it) settles from where the card was carried, in `duration` ms. gliding(): whether any axis still settles.
+ */
+export function createSettle(snap, duration = SETTLE) {
+  const axes = new Map();
+  return {
+    at(name, raw, target, time) {
+      const on = Math.abs(raw - target) <= snap;
+      const want = on ? target : raw;
+      const axis = axes.get(name);
+      if (!axis) {
+        axes.set(name, { raw, target, on, shown: want, glide: null });
+        return want;
+      }
+      // Where it would be had it gone with the pointer since the last time: what a settling starts from.
+      const carried = axis.shown + (raw - axis.raw);
+      if (on !== axis.on || (on && target !== axis.target)) axis.glide = reduced() ? null : { offset: carried - want, start: time };
+      Object.assign(axis, { raw, target, on });
+      let shown = want;
+      if (axis.glide) {
+        const progress = (time - axis.glide.start) / duration;
+        if (progress >= 1) axis.glide = null;
+        else shown = want + axis.glide.offset * (1 - spring(progress));
+      }
+      axis.shown = shown;
+      return shown;
+    },
+    gliding: () => [...axes.values()].some((axis) => axis.glide !== null),
+  };
+}
+
+/**
+ * The page scrolled near the window's edge while a gesture lasts: frame(y, time) once a frame (the pointer's
+ * y in the window, the frame's time), whether the page moved; stop() as the gesture ends.
+ */
+export function createEdgeScroll({ band = BAND, fastest = FASTEST, ramp = RAMP } = {}) {
+  let since = null; // when the pointer came into the band
+  let last = null; // the last frame's time
+  let carry = 0; // px asked and not yet scrolled (a frame's share is seldom whole)
+  return {
+    frame(y, time) {
+      const step = last === null ? 0 : Math.min(34, Math.max(0, time - last)); // a stalled frame scrolls no more than two
+      last = time;
+      const into = y < band ? -(band - y) / band : y > innerHeight - band ? (y - (innerHeight - band)) / band : 0;
+      if (into === 0) {
+        since = null;
+        carry = 0;
+        return false;
+      }
+      since ??= time;
+      const depth = Math.min(1, Math.abs(into));
+      carry += Math.sign(into) * fastest * depth * depth * Math.min(1, (time - since) / ramp) * (step / 1000);
+      const whole = Math.trunc(carry);
+      if (!whole) return false;
+      carry -= whole;
+      const was = scrollY;
+      scrollBy(0, whole);
+      return scrollY !== was;
+    },
+    stop() {
+      since = null;
+      last = null;
+      carry = 0;
+    },
+  };
+}

package/browser/editor/page/board/settings.mjs

@@ -14,7 +14,8 @@ import { addStyle, button, element, mount } from "../ui.mjs";
 // workspace's documents by title (the workbench's outline: GET /__gallery/workspace/outline, its web
 // links no documents), the slug what is kept. A choice from a list (select, document) is a field that
 // opens the editor's own menu card under it (menu.mjs: rows, the chosen one checked, ↑/↓ Enter Escape from
-// the field), not a native <select>: the page cannot style that one's popup, which a browser draws in
+// the field), a choice of the caller's (type "choice", `choices`: [[value, words]], what a document block adds
+// to its fields: the table a view reads) too, not a native <select>: the page cannot style that one's popup, which a browser draws in
 // the system's colours (a white list with pale words in a dark page, the user's picture of 2026-11-09).
 // While the form stands, the page is not shown again under it (the board's idle).
 
@@ -92,9 +93,9 @@ export async function openSettings({ fields, values, name, anchor, save }) {
       continue;
     }
     let control;
-    const choice = field.type === "select" || field.type === "document"; // chosen from a list
+    const choice = field.type === "select" || field.type === "document" || field.type === "choice"; // chosen from a list
     if (choice) {
-      const options = field.type === "select" ? field.options.map((option) => [String(option), String(option)]) : [["", t("（未选择）")], ...listed.map(({ slug, title }) => [slug, title])];
+      const options = field.type === "select" ? field.options.map((option) => [String(option), String(option)]) : field.type === "choice" ? field.choices : [["", t("（未选择）")], ...listed.map(({ slug, title }) => [slug, title])];
       if (field.type === "document" && value && !listed.some(({ slug }) => slug === value)) options.push([String(value), String(value)]);
       const text = element("span", { class: "ge-board-pick-text" });
       control = element("button", { type: "button", class: "ge-board-pick", "data-key": field.key, "aria-haspopup": "menu", "aria-expanded": "false" }, text, element("span", { html: CHEVRON }));