@heycys/gallery 0.1.2 → 0.2.1

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

@@ -3,27 +3,31 @@ import { postAnswer } from "../post.mjs";
 import { say } from "../notices.mjs";
 import { addStyle, element } from "../ui.mjs";
 
-// The home page's first-open note (notes/plans/component-pages-plan-2026-11-07.md §5.2; docs/render.md
-// "A custom page", **The default home page**): at the top of the home page, while the page map says
-// `hint` (src/server/routes.mjs: the home page, its note not yet closed in this workspace), a short
-// note on its cards: how to move one (the grip at its top-right: drag it), open its menu (a click on
-// the same grip: 大小, 设置, 删除), add one (添加自定义块: the first item of the ··· menu at the top right of the workbench's bar; a page open
-// alone in a tab has it at the top right of its board) and take one out (the menu's 删除), and that a new
-// card or a new page is the Agent's to make, with a sentence the reader can copy and say to one (its 复制
-// button). Its × closes it for good, for the workspace (POST
-// /__gallery/pages/home/hint: .gallery/hints.json), whichever browser shows the page next. In the
+// A custom page's first-open note (notes/plans/component-pages-plan-2026-11-07.md §5.2; docs/render.md
+// "A custom page", **Notes of a page**): at the top of a page whose page.json says `hint` (the default home
+// page's), while the page map says `hint` (src/server/routes.mjs: its note not yet closed in this
+// workspace), a short note on its cards: how to move one (the grip at its top-right: drag it), open its
+// menu (a click on the same grip: 大小, 设置, 删除), add one (添加自定义块: the first item of the ··· menu at the
+// top right of the workbench's bar; a page open alone in a tab has it at the top right of its board) and
+// take one out (the menu's 删除), and that a new card or a new page is the Agent's to make, with a sentence
+// the reader can copy and say to one (its 复制 button). Its × closes it for good, for the workspace (POST
+// /__gallery/pages/<slug>/hint: .gallery/hints.json), whichever browser shows the page next. In the
 // editor's look: grays alone, a quiet fill, no colour; the kit's own light and dark through the
 // editor's tokens (look.mjs).
 //
-// And its note of new default cards (showNews: the plan's 3.4), on a home page made before them (a phase 2
-// home: 问候与日期 and 便签 alone), while the page map says `news`: which default cards it does not hold
-// that came since (我的待办, 最近编辑, 工作区统计, 编辑热力图), and that 加到首页 puts them in the empty spots
-// as 恢复默认卡片 in the home page's menu in the sidebar does (the board's restoreDefaults: what is missing
-// alone, the cards there untouched, one step of the page's undo). A home already made is never changed by
-// itself: the reader is told once, at the top of the page, where the first-open note stands, and nothing
-// moves on the board until they ask. Its × (or 加到首页) says it for the workspace (POST
-// /__gallery/pages/home/hint with { cards: true }), which 恢复默认卡片 from the sidebar does too.
-
+// Its note of new default cards (showNews: the plan's 3.4), on a page with the default cards (its page.json's
+// defaultCards) made before some of them, while the page map says `news`: which default cards it does not
+// hold that came since, and that 加到这一页 puts them in the empty spots as 恢复默认卡片 in the page's menu
+// does (the board's restoreDefaults: what is missing alone, the cards there untouched, one step of the
+// page's undo). A page already made is never changed by itself: the reader is told once, at the top of
+// the page, where the first-open note stands, and nothing moves on the board until they ask. Its × (or
+// 加到这一页) says it for the workspace (POST /__gallery/pages/<slug>/hint with { cards: true }), which
+// 恢复默认卡片 does too.
+//
+// And the middle of a blank page (showBlank: the workbench's 新建页面, which no one has written yet, while
+// the page map says `blank`): that an Agent writes a custom page, any page it likes, a board of cards or
+// not, with a request the reader can copy and say to one, as the first-open note's. Nothing of it is the
+// file's: once an Agent writes page.html the page is shown again without it.
 const STYLE = `
   .ge-home-hint { box-sizing: border-box; max-width: var(--gallery-board-width, 944px); margin: 0 auto 12px; }
   .ge-home-hint-box { position: relative; box-sizing: border-box; max-width: 720px; padding: 14px 44px 14px 16px; border-radius: 10px;
@@ -47,6 +51,9 @@ const STYLE = `
   .ge-home-hint-box .ge-home-hint-add { margin-left: -2px; background: var(--ge-btn-primary); color: var(--ge-btn-primary-text); }
   .ge-home-hint-box .ge-home-hint-add:hover:not(:disabled) { background: var(--ge-btn-primary-hover); color: var(--ge-btn-primary-text); }
   .ge-home-hint-box .ge-home-hint-add:disabled { opacity: .5; cursor: default; }
+  .ge-page-blank { box-sizing: border-box; display: flex; justify-content: center; padding: max(48px, 18vh) 16px 48px; }
+  .ge-page-blank .ge-home-hint-box { width: 100%; max-width: 520px; padding: 20px 20px 18px; }
+  .ge-page-blank .ge-home-hint-title { font-size: 16px; }
 `;
 
 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>';
@@ -70,15 +77,15 @@ export function showNews(map, { restore }) {
   if (!map?.news?.length || !main) return null;
   addStyle(STYLE);
   const named = ({ block, name }) => name?.[language === "en" ? "en" : "zh"] ?? name?.zh ?? block;
-  const add = element("button", { type: "button", class: "ge-home-hint-copy ge-home-hint-add", text: t("加到首页") });
+  const add = element("button", { type: "button", class: "ge-home-hint-copy ge-home-hint-add", text: t("加到这一页") });
   const close = element("button", { type: "button", class: "ge-home-hint-close", "aria-label": t("关闭这条说明"), title: t("关闭"), html: CLOSE });
   const box = element("div", { class: "ge-home-hint-box" },
-    element("p", { class: "ge-home-hint-title", text: t("首页有了新的卡片") }),
+    element("p", { class: "ge-home-hint-title", text: t("有了新的默认卡片") }),
     element("p", { text: map.news.map(named).join(t("、")) }),
-    element("p", { class: "ge-home-hint-ask", text: t("点「加到首页」放进空位，已有的卡片不动。以后也可以在侧栏里首页的菜单中点「恢复默认卡片」。") }),
+    element("p", { class: "ge-home-hint-ask", text: t("点「加到这一页」放进空位，已有的卡片不动。以后也可以在这一页的菜单中点「恢复默认卡片」。") }),
     element("div", { class: "ge-home-hint-act" }, add),
     close);
-  const note = noteOf("ge-home-news", t("首页的新卡片"), box);
+  const note = noteOf("ge-home-news", t("新的默认卡片"), box);
   for (const button of [add, close]) button.addEventListener("mousedown", (event) => event.preventDefault());
   const told = () => postAnswer(`/__gallery/pages/${map.slug}/hint`, map.token, { cards: true });
   add.addEventListener("click", async () => {
@@ -86,7 +93,7 @@ export function showNews(map, { restore }) {
     const answer = await restore();
     if (!answer?.ok) {
       add.disabled = false;
-      return say(t("没能把卡片放到首页"), "error");
+      return say(t("没能把卡片放到这一页"), "error");
     }
     note.remove();
     const added = answer.added ?? [];
@@ -104,7 +111,7 @@ export function showNews(map, { restore }) {
 }
 
 /**
- * The note shown, on the home page whose map (`map`: slug, token) says `hint`, at the top of the page
+ * The note shown, on the page whose map (`map`: slug, token) says `hint`, at the top of the page
  * (`main.gallery-page`, before what the page holds). `hosted`: the page stands in a workbench, whose top
  * bar's ··· menu has 添加自定义块 (the words say so), else the page's own at the top right of its board. Returns the
  * note, or null where none is shown.
@@ -114,16 +121,16 @@ export function showHint(map, { hosted = false } = {}) {
   if (!map?.hint || !main) return null;
   addStyle(STYLE);
   // The sentence offered: one that names Gallery, so that the Agent takes up its skill.
-  const ask = t("用 Gallery 在首页加一张卡片，记我每天喝了几杯水。别动我摆好的卡片。");
+  const ask = t("用 Gallery 在「{0}」这一页加一张卡片，记我每天喝了几杯水。别动我摆好的卡片。", map.title ?? document.title);
   const copy = element("button", { type: "button", class: "ge-home-hint-copy", text: t("复制") });
   const close = element("button", { type: "button", class: "ge-home-hint-close", "aria-label": t("关闭这条说明"), title: t("关闭"), html: CLOSE });
   const box = element("div", { class: "ge-home-hint-box" },
-    element("p", { class: "ge-home-hint-title", text: t("这是你的首页") }),
+    element("p", { class: "ge-home-hint-title", text: t("这一页的卡片可以自己摆") }),
     element("p", {}, ...filled(hosted ? t("拖卡片右上角的 {0} 移动它，点一下它打开菜单（大小、设置、删除），点页面右上角的 ··· 里的「添加自定义块」加一张。") : t("拖卡片右上角的 {0} 移动它，点一下它打开菜单（大小、设置、删除），点页面右上方的「添加自定义块」加一张。"), [icon(DOTS)])),
     element("p", { class: "ge-home-hint-ask", text: t("想要新卡片或新页面，跟 Agent 说，比如：") }),
     element("div", { class: "ge-home-hint-say" }, element("span", { text: ask }), copy),
     close);
-  const note = noteOf("", t("首页的说明"), box);
+  const note = noteOf("", t("这一页的说明"), box);
   for (const button of [copy, close]) button.addEventListener("mousedown", (event) => event.preventDefault());
   copy.addEventListener("click", () => {
     // The frame given the focus first: in a workbench a press its mousedown keeps from moving the focus
@@ -143,3 +150,33 @@ export function showHint(map, { hosted = false } = {}) {
   main.prepend(note);
   return note;
 }
+
+/**
+ * The middle of a blank page (the page map's `blank`: the workbench's 新建页面, which no one has written yet):
+ * that an Agent writes it, any page it likes, with a request to copy and say to one. Returns the note, or
+ * null where none is shown (no blank page, or no main.gallery-page to show it in).
+ */
+export function showBlank(map) {
+  const main = document.querySelector("main.gallery-page");
+  if (!map?.blank || !main) return null;
+  addStyle(STYLE);
+  const title = map.title ?? document.title;
+  const ask = t("用 Gallery 把「{0}」这个自定义页写出来：放上我这周的待办，和离月底还有几天。", title);
+  const copy = element("button", { type: "button", class: "ge-home-hint-copy", text: t("复制") });
+  const box = element("div", { class: "ge-home-hint-box" },
+    element("p", { class: "ge-home-hint-title", text: t("这一页还是空的") }),
+    element("p", { text: t("自定义页由 Agent 来写：可以是一页卡片，也可以是它为你做的任何网页。") }),
+    element("p", { class: "ge-home-hint-ask", text: t("跟 Agent 说你想在这里放什么，比如：") }),
+    element("div", { class: "ge-home-hint-say" }, element("span", { text: ask }), copy));
+  const note = noteOf("ge-page-blank", t("空白的自定义页"), box);
+  copy.addEventListener("mousedown", (event) => event.preventDefault());
+  copy.addEventListener("click", () => {
+    window.focus(); // as the first-open note's 复制: Chrome writes no clipboard of a document without the focus
+    navigator.clipboard?.writeText(ask).then(() => {
+      copy.textContent = t("已复制");
+      say(t("已复制这句话，发给 Agent 就行"));
+    }, () => say(t("没能复制：浏览器不允许写剪贴板。"), "error"));
+  });
+  main.append(note);
+  return note;
+}

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 };