@heycys/gallery 0.1.2 → 0.2.1

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

package/browser/editor/page/clipboard/import/read.mjs

@@ -14,7 +14,8 @@ import { addressOf } from "../../links/address.mjs";
 //     formatting" (html.mjs containsRichFormatting; WordPress's always): spans, divs and paragraphs
 //     alone paste as their text.
 //   - Office's HTML (its namespaces) that looks like Word's goes through the Word filter (office.mjs).
-//   - A whole $$ formula $$ → a formula block; several lines from VS Code → code in its language.
+//   - A whole $$ formula $$ → a formula block; IDE Markdown → document blocks, other IDE code →
+//     code in its language. An unspecified IDE language can be Markdown by its parsed structure.
 //   - HTML: several lines of text, or a table → blocks (html.mjs htmlToBlocks); else one rich text.
 //   - No HTML: several lines → Markdown (markdown.mjs); one line → inline Markdown (bold, links,
 //     addresses, formulas) when it has any, else plain text. A whole line that is a display formula
@@ -89,6 +90,20 @@ function sameAddress(one, other) {
   }
 }
 
+// VS Code and Cursor copy syntax-colored HTML beside the source text, even for Markdown. Use
+// the same Markdown reader as an ordinary text paste, not the colored HTML. A Markdown language
+// hint is enough; for an unspecified language, require some structure or inline formatting the
+// reader actually recognizes. Unrecognized lines remain text; the whole selection need not be
+// valid Markdown. A declared programming language wins over lookalike comments and operators.
+function editorMarkdown({ text, language }) {
+  if (language !== "Markdown" && language !== "Plain Text") return null;
+  const specs = fromMarkdown(text);
+  if (language === "Markdown") return specs;
+  const marked = (blocks) => blocks.some((block) => block.type !== "text"
+    || block.title.some((piece) => piece[1]?.length) || marked(block.children));
+  return !addressOf(text) && marked(specs) ? specs : null;
+}
+
 /**
  * Another program's content as { kind: "blocks", specs } | { kind: "rich", title } | { kind: "plain",
  * text } (notion-lite readClipboard, after the editor's own formats).
@@ -98,11 +113,14 @@ export function readExternal(data, options = {}) {
   const yuque = readYuque(data, options);
   if (yuque) return yuque;
   const external = externalContent(data, options);
-  const { text, html } = external;
+  const { text } = external;
   const convert = { colors: external.colors };
   const equation = EQUATION.exec(text)?.[1];
   if (equation?.trim()) return { kind: "blocks", specs: [{ type: "equation", title: [[equation]], props: {}, children: [] }] };
+  const markdown = editorMarkdown(external);
+  if (markdown?.length && (multiline(text) || markdown.some((block) => block.type !== "text"))) return { kind: "blocks", specs: markdown };
   if (multiline(text) && external.language) return { kind: "blocks", specs: [{ type: "code", title: [[text]], props: { language: external.language }, children: [] }] };
+  const html = markdown ? "" : external.html;
   if (html) {
     if (multiline(text) || external.isTable) {
       const specs = mathifySpecs(htmlToBlocks(parseClipboardHTML(html, options), convert));

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

@@ -5,7 +5,7 @@ import { formulaMaker } from "../formula/index.mjs";
 import { inlineItems, spaceAround } from "../../../shared/inline-spacing.mjs";
 import { caretAt, editable, hostOf, select } from "../caret.mjs";
 import { formatRange, joinMarks, outOfMarks, rangeAt, rangeOffsets } from "../marks.mjs";
-import { BASIC_UNITS, HOSTS, KIND_NAMES, accepts, clipboardOf, takesFormula, texOnly } from "../../components/registry.mjs";
+import { BASIC_UNITS, HOSTS, KIND_NAMES, accepts, clipboardOf, replacedByFile, takesFormula, texOnly } from "../../components/registry.mjs";
 import { listType } from "../../components/list/index.mjs";
 import { nodeAround } from "../../components/flowchart/index.mjs";
 import { cellsData } from "../../components/table/index.mjs";
@@ -284,7 +284,9 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
   // anchor.parent, after })): right after the block of `at` (unitElement: a new code block's code stands
   // for the block), whole, where a block pasted there goes (placeFor: the first box out that takes it, a
   // list or quote that does not splitting after the block), one undo step (`put`, handed to the
-  // component, which makes the block and fills it). Returns whether one did.
+  // component, which makes the block and fills it, the fill part of that step). An empty block of a kind
+  // that says `replacedByFile` (an empty paragraph: notion-lite's pasteFiles removes an empty text block)
+  // gives its place to the block instead of staying before it. Returns whether one did.
   const fromFiles = (at, files) => {
     const unit = unitElement(at);
     if (!unit?.closest("main")) return false;
@@ -294,7 +296,12 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
         say(t("这里放不下这种块。"));
         return false;
       }
-      struct(place.parents, [], () => ({ touched: [], focus: null, created: placeAfter(place, [block]) }));
+      const replaced = replacedByFile(unit.getAttribute("data-ge-unit-kind")) && removableEmpty(unit, unit) && !isFirstLine(unit);
+      struct([...new Set([unit.parentElement, ...place.parents])], [], () => {
+        const created = placeAfter(place, [block]);
+        if (replaced) removalTarget(unit).remove();
+        return { touched: [], focus: null, created };
+      });
       return true;
     };
     return pageObjects().some((page) => {

package/browser/editor/page/clipboard/own/blocks.mjs

@@ -2,9 +2,8 @@ import { escapeText } from "../../../../shared/escape.mjs";
 import { heldIn, newContainer, newHost, pastedLines } from "../../core.mjs";
 import { pageBuild } from "../../../components/builders.mjs";
 import { BLOCK_TYPES, COPIED_AS_ITSELF, HOLDS_ONE, TEXT_TYPES, TOGGLES, UNSAID, accepts, clipboardHooks, clipboardOf, isLead, sizeValue } from "../../../components/registry.mjs";
-import { BLOCK_COLORS } from "../../../components/colors.mjs";
 import { MAX_CELL_HTML } from "../../../components/table/index.mjs";
-import { copied, copyOf } from "./describe.mjs";
+import { BLOCK_LOOKS, copied, copyOf } from "./describe.mjs";
 import { imageSource, kindOfBlock, webPage } from "./rules.mjs";
 
 // Described blocks (describe.mjs and selection.mjs, and import/to-blocks.mjs for other programs' content) made (build),
@@ -42,7 +41,7 @@ export function checkBlocks(blocks) {
     const { type } = block;
     const clip = clipboardOf(type);
     if (box && !accepts(box, kindOfBlock(block)) && clip.pastedIn !== box) return false;
-    if (block.color !== undefined && (typeof block.color !== "string" || !block.color.split(" ").every((name) => BLOCK_COLORS.includes(name)))) return false;
+    if (block.color !== undefined && (typeof block.color !== "string" || !block.color.split(" ").every((name) => BLOCK_LOOKS.includes(name)))) return false;
     if (TEXT_TYPES.has(type)) return string(block.html);
     if (type === "copy") return COPIES.has(block.kind) && Number.isInteger(block.unit) && [block.report, block.text, block.html].every((value) => typeof value === "string")
       && (block.data === undefined || (Boolean(clipboardOf(block.data?.type).data) && valid(block.data)));
@@ -120,7 +119,7 @@ function inline(doc, html, { formula = null, mention = null, picture = null } =
 }
 
 
-// A block's colors (`color`: their classes, one of each family), those its kind takes (TOGGLES).
+// A block's colors (`color`: their classes, one of each family, and a text block's alignment and indent), those its kind takes (TOGGLES).
 function colored(element, block) {
   for (const name of block.color?.split(" ") ?? []) if (TOGGLES[element.getAttribute("data-ge-unit-kind")]?.includes(name)) element.classList.add(name);
   return element;

package/browser/editor/page/clipboard/own/describe.mjs

@@ -1,5 +1,6 @@
 import { isHost, nestedBlocks, serializeInner, unitsOf } from "../../core.mjs";
 import { BLOCK_TYPES, COPIED_AS_ITSELF, COPY_KEEPS, TEXT_TYPES, askClipboard, clipboardOf, sizeValue, unitClipboard } from "../../../components/registry.mjs";
+import { ALIGN_TOGGLES, TEXT_BLOCKS } from "../../../components/align.mjs";
 import { BLOCK_COLORS } from "../../../components/colors.mjs";
 import { containerType, typeOf } from "../../convert.mjs";
 import { pageOfType, pageOfUnit } from "../../page-objects.mjs";
@@ -72,8 +73,11 @@ export function copied(doc, block) {
   return (typeof block.data?.html === "string" ? copy.outerHTML === block.html : copy.textContent === block.text) ? unit : null;
 }
 
-/** A block's colors (their classes, space-separated), or null. */
-export const colorOf = (node) => BLOCK_COLORS.filter((name) => node.classList.contains(name)).join(" ") || null;
+/** The classes a block's copy carries as its `color`: its colors, and a paragraph's or a heading's alignment and indent. */
+export const BLOCK_LOOKS = [...BLOCK_COLORS, ...ALIGN_TOGGLES];
+
+/** A block's colors, and a text block's alignment and indent (their classes, space-separated), or null. */
+export const colorOf = (node) => (node.matches?.(TEXT_BLOCKS) ? BLOCK_LOOKS : BLOCK_COLORS).filter((name) => node.classList.contains(name)).join(" ") || null;
 
 /** The type a text block is copied as: its own, the type of the text blocks of what wraps it (a quote's paragraph), or null (code, whose text is no text block's). */
 export function copiedType(host) {

package/browser/editor/page/commit.mjs

@@ -1241,8 +1241,8 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
       else if (element) proposals.set(identityOf(element), id);
     }
     for (const [key, hash] of Object.entries(receipt.hashes ?? {})) if (map.units[Number(key)]) map.units[Number(key)].hash = hash;
-    // The keys of tables the file gave the blocks the commit made and the tables it keyed (a view's
-    // 视图 ›: the key its frame took, an attribute of the unit), other than the page chose
+    // The keys of tables the file gave the blocks the commit made and the tables it keyed (a view
+    // made from a menu: the key its frame took, an attribute of the unit), other than the page chose
     // (source/chart-keys.mjs: one the file had meanwhile): theirs on the page too, so that each card and
     // view reads the table the file links it to ({ old: new | null }, null: off a table); `rekeyed` says
     // which it changed ([element, name, old, new | null]), for the undo steps that recorded them (history.mjs).

package/browser/editor/page/core.mjs

@@ -10,6 +10,7 @@ import { gridOf, tableChange } from "../components/table/grid.mjs";
 import { HELD_TAGS, heldListType, listType } from "../components/list/index.mjs";
 import { isFlowchart, isStep } from "../components/flowchart/index.mjs";
 import { markEmpty } from "../components/placeholder.mjs";
+import { carry } from "../components/align.mjs";
 import { unread } from "./tex.mjs";
 import { MENTION, MENTION_ICON, MENTION_PAGE } from "../../shared/components/mention.mjs";
 import { FLOW_BLOCKS } from "../../shared/components/index.mjs";
@@ -577,7 +578,8 @@ export function newTail(container, type) {
 }
 
 // New blocks split off `from` are paragraphs, or list items in a list.
-const newBlock = (doc, tag, from) => newHost(doc, tag === "li" ? "item" : "paragraph", from);
+// A paragraph split off a paragraph or a heading keeps its alignment and indent (components/align.mjs carry).
+const newBlock = (doc, tag, from) => (tag === "li" ? newHost(doc, "item", from) : carry(from, newHost(doc, "paragraph", from)));
 
 /** A new, empty paragraph, as a split makes one outside a list (the page's title's Enter: typing/ enterBody). */
 export const newParagraphHost = (doc) => newBlock(doc, "p", null);

package/browser/editor/page/custom-page.mjs

@@ -10,10 +10,12 @@ import { connectWorkbench } from "./session.mjs";
 // slug is "@<slug>", the page's address in the workbench (#@<slug>), which no document's slug can be.
 // It answers the session's own commands (theme, keys, scroll-top: src/editor/page/session.mjs),
 // prepare-close (once the board's ops sent are answered: each is written at once, nothing else waits),
-// add-card (the top bar's 添加自定义块: the library of the page's first board, under the button's place that
-// the workbench sends) and, on the home page, restore-defaults (恢复默认卡片, the sidebar's: the board's, one step of its
-// undo; its answer { ok, added, skipped } the workbench says) and undo-restore ({ cards }: that step
-// undone while it is the board's last, the workbench's 撤销),
+// add-card where it has a board (the top bar's 添加自定义块: the library of the page's first board, under the
+// button's place that the workbench sends; a page with none, a blank one or one an Agent wrote with no
+// board, offers no 添加自定义块) and, on a page with the default cards (its page map's `defaults`: its
+// page.json's defaultCards, the default home page's), restore-defaults (恢复默认卡片, its menu's: the board's,
+// one step of its undo; its answer { ok, added, skipped } the workbench says) and undo-restore ({ cards }:
+// that step undone while it is the board's last, the workbench's 撤销),
 // and sends ready, reload (its live script heard that page.html or page.json changed, or a block it
 // holds: the workbench loads it again in a hidden frame and swaps it in once drawn), open (a link to a
 // document or another page, or a block's context.workspace.open: doc-open-request) and key. Opened on its own (not in a frame of the workbench), it has no
@@ -24,6 +26,13 @@ const IDLE = { editing: false, pending: false, saving: false, offline: false, co
 // Nothing stands over a custom page as a modal.
 const NO_MODALS = { open: () => [], listen() {}, closeTop: () => false };
 
+// The page map (routes.mjs: its slug, its token, the version it was served at, its blocks): the boards edit.
+let map = null;
+try {
+  map = JSON.parse(document.querySelector("script[data-ge-page]")?.textContent ?? "null");
+} catch {}
+const hasBoard = Boolean(document.querySelector(".gallery-board"));
+
 let board = null;
 const session = connectWorkbench({
   slug: `@${slug}`,
@@ -35,8 +44,8 @@ const session = connectWorkbench({
     },
     // 添加自定义块 of the workbench's top bar: the library opens in the page, at `anchor` (the button's place in
     // this frame's coordinates; none: in the middle of the window), the first board's.
-    "add-card": async ({ anchor } = {}) => (board ? board.addCard({ anchor }) : { ok: false, reason: "board" }),
-    ...(slug === "home" ? {
+    ...(hasBoard ? { "add-card": async ({ anchor } = {}) => (board ? board.addCard({ anchor }) : { ok: false, reason: "board" }) } : {}),
+    ...(map?.defaults ? {
       "restore-defaults": async () => (board ? board.restoreDefaults() : { ok: false, reason: "board" }),
       "undo-restore": async ({ cards }) => (board ? board.undoRestore(cards) : { ok: false, reason: "board" }),
     } : {}),
@@ -44,11 +53,6 @@ const session = connectWorkbench({
   modals: NO_MODALS,
 });
 
-// The page map (routes.mjs: its slug, its token, the version it was served at, its blocks): the boards edit.
-let map = null;
-try {
-  map = JSON.parse(document.querySelector("script[data-ge-page]")?.textContent ?? "null");
-} catch {}
 board = map?.token ? startBoard({ map, reload: () => (session ? session.reload() : location.reload()), hosted: Boolean(session) }) : null;
 // The live script (routes.mjs) shows the page again through the workbench, which swaps a new page in
 // once drawn: no reload seen; once the board's own writes, a drag, a form or a field typed in are done.

package/browser/editor/page/editor.mjs

@@ -15,6 +15,7 @@ import { createCommits, kindOf } from "./commit.mjs";
 import { createConflicts, packageChanged, unfit } from "./conflicts.mjs";
 import { checkLeft, createAutosave, keepWith, lostKey, pendingKey, readLost, recover, reloadView, setReloader, takeView, viewNow } from "./autosave.mjs";
 import { SOLO, connectWorkbench } from "./session.mjs";
+import { OUTLINE_OPEN_KEY, onOutlineOpen, outlineOpen, setOutlineOpen } from "../../shared/preferences.mjs";
 import { lookOfElement } from "../../shared/document-look.mjs";
 import { belowTargets, convertBlock, convertGroup, groupParents, groupTargets, noTextToCarry, targetsOf, touchedBy, turnInto, turnParents, turnUnit, typeOf } from "./convert.mjs";
 import { joinCode, rangeAt, rangeOffsets } from "./marks.mjs";
@@ -24,6 +25,7 @@ import { serveFiles } from "./served.mjs";
 import { createFormatting } from "./format-bar/index.mjs";
 import { connectHints, hideHint, readOnlyReason, scheduleHint, trackPointer } from "./hints/index.mjs";
 import { createInsert } from "./insert/index.mjs";
+import { createAfter } from "./after/index.mjs";
 import { connectLinks, dismissLink, drawPasted, followLink, leadsToPage, linkBoxNode, linkHolds, linkNodes, linkOf, linkPending, openLink, pageLinkOf } from "./links/index.mjs";
 import { bookmarkItems, connectViews, linkTitle, offerViews } from "./links/views.mjs";
 import { connectChipFills } from "./chip-fills.mjs";
@@ -36,6 +38,7 @@ import { createResize } from "./resize/index.mjs";
 import { connectPages, fieldOpen, keptByComponent, menuRow, modalOps, pageAt, pageIcon, pageObjects, pageOf, pageOfHost, pageOfType, pageOfUnit, panelOpen, typedAsIs } from "./page-objects.mjs";
 import { preloading } from "./type-grid.mjs";
 import { createColumnGaps } from "./columns/index.mjs";
+import { viewFrames } from "./table/binding.mjs";
 import { createTableEditing } from "./table/index.mjs";
 import { createAtMenu } from "./at-menu/index.mjs";
 import { createSlashMenu } from "./slash-menu/index.mjs";
@@ -72,6 +75,7 @@ import { language, t } from "../../shared/i18n/index.mjs";
 //
 //   typing/       Enter, Backspace/Delete at block edges, auto spacing, placeholders
 //   insert/       new blocks: below a block (its menu), a click below the last block, a paragraph before or after
+//   after/        the caret after a block of no text (a click right of it): Backspace deletes it, Enter or a key a paragraph after it
 //   format-bar/   the bar over selected text and its keys (marks.mjs does the marks)
 //   links/        the link box (Ctrl+K), following links; hints/: why something is read-only
 //   formula/      the formula box: selected text made an inline formula (Ctrl+Shift+E)
@@ -261,7 +265,9 @@ function showLanded(node) {
   modalOps().show(node);
 }
 
-const insert = createInsert({ struct, blocks: () => blocks });
+// The caret after a block of no text, where a click right of one puts it (insert/ clickBlank).
+const after = createAfter({ struct, blocks: () => blocks, keepText: (node) => blocks.keepText(node), removeBlocks: (units) => blocks.remove(units), say, undo: () => undo(), redo: () => redo() });
+const insert = createInsert({ struct, blocks: () => blocks, after });
 const { newParagraph } = insert;
 
 // What a component does on the page beyond what every block does is its own page module
@@ -326,6 +332,8 @@ const typing = createTyping({
   adding: () => slash?.adding ?? null,
   leave: createLeaving({ struct, touchedBy, convertHost, typeOf, targetsOf }),
   showHidden: (node) => blocks?.folds.showAround(node), // a folded heading's section opened before a join takes in its words (fold/)
+  look: lookStep, // a block's alignment and indent taken off by Backspace (align.mjs)
+  afterAbove: (host) => after.back(host), // Backspace right after a block of no text: the caret after it (after/)
 });
 // Selecting text across blocks: its listeners go before the editor's own keys and clipboard.
 const crossText = createTextSelection({
@@ -673,7 +681,7 @@ function convertHost(host, type, typed = null, after = null) {
     if (!focus && !typed) return null;
     const more = focus && after ? after(focus) : [];
     return { touched: [focus ?? host], focus: focus ?? host, created: [...created, ...more] };
-  });
+  }, { attributes: viewFrames(type) });
   if (result) afterConvert(result.focus, type, result.focus !== host ? t("已转换为{0}", menuRow(type).label) : null);
 }
 
@@ -703,10 +711,9 @@ function afterConvert(focus, type, said) {
  * heading) and the new block turns into the type; below any other block, an empty paragraph of its
  * box does (the first box out that takes one). One undo step.
  */
-// `also` (a table's 视图 ›: page/table/views.mjs): `attributes` ([element, names]) the step records too, and
-// `done(made)` run in it on the new block (the element where the empty paragraph was), so that what binds
-// the block to the one above it is the same step.
-function insertBelow(target, type, typed = null, also = null) {
+// A view of a table (a custom block that reads tables) is bound to the table above it as it is made
+// (installed/page.mjs create), the tables' keys recorded in the same step (viewFrames).
+function insertBelow(target, type, typed = null) {
   const splits = isHost(target) && can(target, "split");
   let after = target;
   while (!splits && after && !accepts(after.parentElement?.getAttribute("data-ge-box-kind"), "paragraph")) after = after.parentElement?.closest(OUTER);
@@ -724,12 +731,10 @@ function insertBelow(target, type, typed = null, also = null) {
       after.after(fresh);
     }
     if (!fresh) return null;
-    const prior = fresh.previousSibling; // what the new block stands right after, made where the paragraph was
     const turned = type === "paragraph" && fresh.localName === "p" ? { focus: null, created: [] } : convertBlock(fresh, type, { fresh: true });
-    also?.done?.(fresh.isConnected ? fresh : prior?.nextElementSibling ?? null);
     const focus = turned.focus ?? fresh;
     return { touched: splits ? [target, focus] : [focus], focus, created: turned.created };
-  }, { attributes: also?.attributes ?? [] });
+  }, { attributes: viewFrames(type) });
   if (result) afterConvert(result.focus, type, t("已插入{0}", menuRow(type).label));
 }
 
@@ -782,7 +787,7 @@ function convertUnit(unit, type, { loaded = false } = {}) {
     const turned = turnUnit(unit, type);
     emptied = Boolean(turned.emptied);
     return turned.focus ? { touched: [turned.focus], focus: turned.focus, created: turned.created, select: emptied ? null : unit } : null;
-  });
+  }, { attributes: viewFrames(type) });
   if (!result) return;
   if (!made || !onCreated(type, result.focus)) {
     if (emptied && isHost(result.focus)) caretAt(result.focus, "start");
@@ -823,6 +828,7 @@ function convertAll(group, type, { select = true } = {}) {
 function onKeydown(event) {
   compositionOver(event);
   if (!editing) return;
+  if (after.key(event)) return; // the caret after a block: its keys are its own (after/)
   // A 批注's card is a field of its own: its keys are its own, but for Ctrl+S, which saves it and the report.
   if (annotate?.holds(event.target)) {
     const mod = event.ctrlKey || event.metaKey;
@@ -928,7 +934,8 @@ function onKeydown(event) {
     moveHostBlock(host, event.key === "ArrowUp" ? -1 : 1);
   } else if (event.key.startsWith("Arrow") && !mod && !event.altKey && !event.shiftKey && !renamed) {
     // ←/→ stop on both sides of inline code's edges (typing/code-edges.mjs); a tab's caret stays in its name.
-    if ((textFilters(host) && codeArrow(host, event.key)) || arrow(host, event.key)) event.preventDefault();
+    // ← or ↑ at the start of the text right after a block of no text: the caret after that block (after/).
+    if ((textFilters(host) && codeArrow(host, event.key)) || after.up(host, event.key) || arrow(host, event.key)) event.preventDefault();
   }
 }
 
@@ -1243,6 +1250,15 @@ const COMMANDS = {
     if (!editing || !annotate) return { ok: false, reason: "editing" };
     return annotate.action(message);
   },
+  // The outline (目录) switched by the workbench's 更多: a draft of another workspace is shown from that workspace's own origin,
+  // whose storage the workbench cannot write (the switch is kept per origin: shared/preferences.mjs outlineOpen), so it asks and
+  // this page keeps it, shown as another tab's change is (the storage event the outline listens for). Answers the switch as kept.
+  async outline({ open }) {
+    if (typeof open !== "boolean") return { ok: false, reason: "open" };
+    setOutlineOpen(MAP.slug, open);
+    dispatchEvent(new StorageEvent("storage", { key: OUTLINE_OPEN_KEY }));
+    return { ok: true, outline: outlineOpen(MAP.slug) };
+  },
   // Rename the report: its title, selected for typing (saving it updates <title> and report.json).
   async "edit-title"() {
     const title = document.querySelector('[data-ge-kind="title"]');
@@ -1473,8 +1489,9 @@ function connect() {
   // The look the page shows (字体与布局: its <html>'s, src/shared/document-look.mjs), which the workbench's
   // 更多 marks as chosen; told again when it changes (the kit's ui.js, doc-look-change).
   // `title`: null for a page with no title at all (the workbench names it by its doc.json); "" an untitled one (未命名文档).
-  workbench = connectWorkbench({ slug: MAP.slug, snapshot: () => ({ title: titleNode() ? currentTitle() : null, icon: pageIcon(), look: lookOfElement(document.documentElement), state: sessionState(), annotations: annotate?.count() }), commands: COMMANDS, modals: modalOps() });
+  workbench = connectWorkbench({ slug: MAP.slug, snapshot: () => ({ title: titleNode() ? currentTitle() : null, icon: pageIcon(), look: lookOfElement(document.documentElement), state: sessionState(), annotations: annotate?.count(), outline: outlineOpen(MAP.slug) }), commands: COMMANDS, modals: modalOps() });
   addEventListener("doc-look-change", () => workbench?.update());
+  onOutlineOpen(() => workbench?.update()); // the switch changed in another tab of this origin: the workbench's 目录 follows it (a draft's)
   // A block's context.workspace.open (the kit's runtime/workspace.js): a document, or a block of one, goes
   // where a link to it goes (goTo: in the workbench, its address; on its own, the page once saved); a custom
   // page, the workbench's #@<slug>, or /pages/<slug> once saved.
@@ -1655,8 +1672,8 @@ function boot() {
   gaps = createColumnGaps({ active, struct, look: lookStep, say, settle });
   for (const page of pageObjects()) page.install?.(); // the round "+" at a flowchart node's right, renaming Sheet tabs
   tables = createTableEditing({
-    active, struct, look: lookStep, selectBlock: (unit) => blocks.select(unit), resizeTable: (event, unit, axis) => resize.startTable(event, unit, axis), say, cellsOf: (data) => clipboard.cellsOf(data), upload: uploadTo, typedKey,
-    recordStep, insertBelow: (unit, type, also) => insertBelow(unit, type, null, also),
+    active, struct, look: lookStep, selectBlock: (unit) => blocks.select(unit), resizeTable: (event, unit, axis) => resize.startTable(event, unit, axis), say, settle, cellsOf: (data) => clipboard.cellsOf(data), upload: uploadTo, typedKey,
+    recordStep,
   });
   selectAll = createSelectAll({ blocks, say, cells: { table: () => tables.selectedTable, clear: () => tables.clear() } });
   createFrame(() => editing);