@heycys/gallery 0.1.0 → 0.1.2

package/browser/editor/page/convert.mjs

@@ -12,9 +12,9 @@ import { asTitle, flowchartFromList, flowchartFromPanel, itemFromStep, listFromF
 
 // Turning blocks into other types on the page (DOM only; tested with jsdom): text, small text
 // (小字, the kit's .doc-note), four heading levels, bulleted, numbered and to-do lists and flow charts (流程图), disclosures
-// (折叠列表), callouts (提示块), highlight panels (高亮块: a container with the opening summary's
-// look, whose blocks keep their own types, lists and headings among them; a block turned into one, or
-// into a disclosure, goes into it as it is), code blocks, quotes and
+// (折叠列表), highlight panels (高亮块: a container with the opening summary's look, whose blocks keep
+// their own types, lists and headings among them) and callouts (提示块: the same kind of container, its
+// look its own; a block turned into either, or into a disclosure, goes into it as it is), code blocks, quotes and
 // dividers; the types are the components' (src/editor/components/, registry.mjs), and so is how a
 // type that is no text block is made (its `create`). The "/" menu,
 // Markdown shortcuts, the block menu and its "在下方新建一块" all come here (editor.mjs:
@@ -48,7 +48,8 @@ const ownAttribute = (host, name) => Boolean(ATTRIBUTES[host.getAttribute("data-
 
 // The types a block, or a group of blocks, goes into as it is (each keeping its type: `takesAsIs`): a
 // highlight block (notion-lite's callout, whose body is its children: transformBlocks moves the blocks
-// into a new one) and, as the reader asked, a disclosure (into its content; its title left empty to type).
+// into a new one), a callout (the same kind of block) and, as the reader asked, a disclosure (into its
+// content; its title left empty to type).
 const TAKES_AS_IS = new Set(Object.keys(typesWith("takesAsIs")));
 
 // Whether a box takes the block of a type: what its role accepts, and none of a type that does not
@@ -181,7 +182,7 @@ export function containerType(unit) {
 const contentOf = (unit) => BLOCK_TYPES[containerType(unit)]?.content?.(unit) ?? unit;
 
 // The containers that turn into one another, what they hold carried along (Notion's: HOLDERS): a
-// disclosure, a quote, a highlight block. Each is the kind of box it is, as well as of block.
+// disclosure, a quote, a highlight block, a callout. Each is the kind of box it is, as well as of block.
 
 // The blocks a disclosure, quote or highlight block holds (a highlight block's icon not among them).
 const heldBy = (unit) => heldIn(contentOf(unit));
@@ -272,8 +273,8 @@ function standIn(host, type) {
   return standsFor(next, host);
 }
 
-// Whether a block already is the text block of a type: its tag, and the class that tells a
-// callout from a div; of the paragraph types, the one its class makes it.
+// Whether a block already is the text block of a type: its tag, and its class where its type has
+// one; of the paragraph types, the one its class makes it.
 function isOfType(host, type) {
   const spec = BLOCK_TYPES[type];
   if (host.localName !== spec.tag) return false;

package/browser/editor/page/core.mjs

@@ -40,7 +40,7 @@ const WRAPPERS = new Set(["UL", "OL", "BLOCKQUOTE"]);
 
 // An inline element of the report's own, as the scanner judges it (source/blocks.mjs): its
 // attributes as the file writes them (not the page's data-ge-* markers).
-const isOwnAtom = (node) => ownInline(node.localName, [...node.attributes].filter(({ name }) => !MARKER.test(name)), node.textContent.trim() !== "");
+const isOwnAtom =(node) => ownInline(node.localName, [...node.attributes].filter(({ name }) => !MARKER.test(name)), node.textContent.trim() !== "");
 
 // A block's atoms in `root` (its source parsed), in the order of the file, as the scanner lists
 // them (source/blocks.mjs inlineMode): the outermost formulas, links shown with their icon and inline
@@ -88,6 +88,7 @@ export function prepareBlock(element, { inner, atoms, kind = "flow", caps = [] }
   const template = element.ownerDocument.createElement("template");
   template.innerHTML = inner;
   template.content.querySelectorAll("*").forEach((node) => node.setAttribute("data-ge-src", ""));
+  HOSTS[kind]?.pictures?.show(template.content); // a cell's pictures shown where the server serves them
   const sourceAtoms = atomsIn(template.content, kind === "text" && caps.includes("plain"));
   const drawnAtoms = sourceAtoms.filter((atom) => atom.matches(ATOM_SELECTOR)); // a formula as the kit drew it
   // The blocks a list item holds are blocks of their own: only its text before them is rebuilt.
@@ -342,15 +343,16 @@ export function matchesSource(element, inner) {
 export function serializeInner(element) {
   const inner = HOSTS[element.getAttribute?.("data-ge-kind")]?.inner;
   if (inner) return inner(element);
-  // A table cell's lists are its text (单元格里的列表); any other block's are blocks of their own.
-  const lists = element.getAttribute?.("data-ge-kind") === "cell";
-  return ownNodes(element).map((node) => serializeNode(node, lists)).join("").replace(/<br>\s*$/, "");
+  // A table cell's lists are its text (单元格里的列表); any other block's are blocks of their own. A
+  // kind of text block that holds pictures (a cell's: HOSTS `pictures`) writes them; any other none.
+  const kind = element.getAttribute?.("data-ge-kind");
+  return serializeNodes(ownNodes(element), kind === "cell", HOSTS[kind]?.pictures ?? null).replace(/<br>\s*$/, "");
 }
 
 // A list in a table cell, its items' inline content (a line break holding an empty item's caret left out).
-function serializeList(list) {
+function serializeList(list, pictures = null) {
   const tag = list.tagName.toLowerCase();
-  const items = [...list.children].filter((item) => item.tagName === "LI").map((item) => `<li>${[...item.childNodes].map((child) => serializeNode(child)).join("").replace(/<br>\s*$/, "")}</li>`);
+  const items = [...list.children].filter((item) => item.tagName === "LI").map((item) => `<li>${serializeNodes([...item.childNodes], false, pictures).replace(/<br>\s*$/, "")}</li>`);
   return items.length > 0 ? `<${tag}>${items.join("")}</${tag}>` : "";
 }
 
@@ -383,11 +385,16 @@ export function textEnd(element) {
 
 const ownNodes = (element) => [...element.childNodes].slice(0, textEnd(element));
 
-/** A block's own content as HTML (innerHTML, without the blocks a list item holds). */
+/**
+ * A block's own content as HTML (innerHTML, without the blocks a list item holds, nor the words an
+ * Agent took out that the page shows in it: GONE_WORDS), what undo and redo record of it.
+ */
 export function ownHTML(element) {
-  if (nestedBlocks(element).length === 0) return element.innerHTML;
+  const shown = element.querySelector(GONE_WORDS);
+  if (nestedBlocks(element).length === 0 && !shown) return element.innerHTML;
   const copy = element.ownerDocument.createElement("div");
   copy.append(...ownNodes(element).map((node) => node.cloneNode(true)));
+  if (shown) copy.querySelectorAll(GONE_WORDS).forEach((node) => node.remove());
   return copy.innerHTML;
 }
 
@@ -429,12 +436,42 @@ export const parentItem = (item) => item?.tagName === "LI" && item.parentElement
 // edits becomes a space too.
 const spaced = (text) => escapeTyped(text).replace(/ *\u00a0[ \u00a0]*/g, " ");
 
-function serializeNode(node, lists = false) {
+// The editor's own nodes in a text block (data-doc-dev: the words an Agent took out, which the page
+// shows where they were, changes/) are no content: left out, the text on either side of one is
+// written as one text, as it was before the node split it (a space either side of it the one space
+// it was, never two).
+function serializeNodes(nodes, lists = false, pictures = null) {
+  let html = "";
+  let text = null; // a text node's, not written yet: the text after an editor's node joins it
+  let across = false; // an editor's node stands between it and what comes next
+  for (const node of nodes) {
+    if (node.nodeType === 1 && node.hasAttribute("data-doc-dev")) {
+      across = text !== null;
+      continue;
+    }
+    if (node.nodeType === 3 && node.data !== ZWSP) {
+      if (text !== null && !across) html += spaced(text);
+      text = text !== null && across ? text + node.data : node.data;
+      across = false;
+      continue;
+    }
+    if (text !== null) html += spaced(text);
+    text = null;
+    across = false;
+    html += serializeNode(node, lists, pictures);
+  }
+  return text === null ? html : html + spaced(text);
+}
+
+// `pictures`: the host's (HOSTS `pictures`: write(element) its markup, "" for one of no file, null for no picture).
+function serializeNode(node, lists = false, pictures = null) {
   // A text node holding nothing but a zero-width space keeps the caret after a mark the editor
   // made (markdown/, typing shortcuts); it is never content.
   if (node.nodeType === 3) return node.data === ZWSP ? "" : spaced(node.data);
   if (node.nodeType !== 1) return "";
-  if (isList(node)) return lists ? serializeList(node) : "";
+  if (isList(node)) return lists ? serializeList(node, pictures) : "";
+  const picture = pictures?.write(node) ?? null;
+  if (picture !== null) return picture;
   const atom = node.getAttribute("data-ge-atom");
   if (atom !== null && ATOM_SOURCE.has(atom)) return ATOM_SOURCE.get(atom);
   // Elements from the source keep the author's tag and attributes; only elements the browser
@@ -443,7 +480,7 @@ function serializeNode(node, lists = false) {
   // and their text kept.
   const fromSource = node.hasAttribute("data-ge-src") && node.tagName in TAGS;
   const tag = fromSource ? node.tagName.toLowerCase() : TAGS[node.tagName];
-  const inner = [...node.childNodes].map((child) => serializeNode(child)).join("");
+  const inner = serializeNodes([...node.childNodes], false, pictures);
   const ink = node.tagName === "SPAN" ? [...node.classList].filter(isInkClass) : [];
   if (ink.length > 0) return inner ? `<span class="${ink.join(" ")}">${inner}</span>` : "";
   // Small text's end part (its Tab: components/paragraph/page.mjs), at the line's right end.
@@ -498,8 +535,9 @@ export function isEmpty(element) {
 const siblingTag = (element) => element.tagName === "LI" ? "li" : "p";
 
 /**
- * A text block made on the page: data-ge-new, with its type and unit kind. Inside a component it
- * leaves the frame to the component, as `from` (the block it was split off) does.
+ * A text block made on the page: data-ge-new, with its type and unit kind, a text block of the flow
+ * (every type's that is one: a callout's words, its own kind until 2026-11-07, are a paragraph of it
+ * now). Inside a component it leaves the frame to the component, as `from` (the block it was split off) does.
  */
 export function newHost(doc, type, from = null) {
   const spec = BLOCK_TYPES[type];
@@ -509,9 +547,8 @@ export function newHost(doc, type, from = null) {
   block.setAttribute("data-ge-new", "");
   block.setAttribute("data-ge-type", type);
   block.setAttribute("data-ge-unit-kind", spec.kind);
-  const kind = spec.host ?? "flow";
-  block.setAttribute("data-ge-kind", kind);
-  block.setAttribute("data-ge-caps", capsFor(kind));
+  block.setAttribute("data-ge-kind", "flow");
+  block.setAttribute("data-ge-caps", capsFor("flow"));
   if (from?.hasAttribute("data-ge-framed")) block.setAttribute("data-ge-framed", "");
   return block;
 }
@@ -542,6 +579,9 @@ 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 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);
+
 // The element a text block made on the page is part of when it is not a block of its own: the
 // summary of a new disclosure, a new code block (its code's pre, its title's block), the header of a
 // new detail card.
@@ -688,10 +728,12 @@ const isFormula = (node) => node.matches(".doc-math-inline");
  * text with the format bar's marks (marks: false drops them, links: false drops links), a formula
  * of this page as its chip (another one, KaTeX's or the kit's \(…\), as the chip formula(tex) makes,
  * or else as its TeX source; `formulas` false, each as its source), a link shown with its icon as the
- * chip mention(mentionOf(it)) makes (else a link of its title); blocks and line breaks start new
- * lines, and everything else gives only its text.
+ * chip mention(mentionOf(it)) makes (else a link of its title), an element what picture(element)
+ * makes of it (a cell's picture: page/table/pictures.mjs; null nothing, undefined no picture: none
+ * given, no picture is one); blocks and line breaks start new lines, and everything else gives only
+ * its text.
  */
-export function pastedLines(doc, html, { marks = true, links = true, formula = null, formulas = true, mention = null } = {}) {
+export function pastedLines(doc, html, { marks = true, links = true, formula = null, formulas = true, mention = null, picture = null } = {}) {
   const template = doc.createElement("template");
   template.innerHTML = html;
   const lines = [[]];
@@ -745,6 +787,12 @@ export function pastedLines(doc, html, { marks = true, links = true, formula = n
         }
       }
       if (/^(STYLE|SCRIPT|TEMPLATE|META|TITLE|LINK|NOSCRIPT|BUTTON|SVG)$/i.test(child.tagName) || child.matches('[aria-hidden="true"], .ge-code-gutter, [data-doc-dev]')) continue;
+      // A picture, where `picture` takes it (undefined: no picture): what it makes of it, else nothing.
+      const made = picture?.(child);
+      if (made !== undefined) {
+        if (made) push(target, made);
+        continue;
+      }
       if (child.tagName === "BR") {
         if (target) push(target, doc.createTextNode(" "));
         else newLine();
@@ -762,7 +810,7 @@ export function pastedLines(doc, html, { marks = true, links = true, formula = n
         continue;
       }
       walk(child, mark);
-      if (mark.textContent.trim() || mark.querySelector("[data-ge-atom]")) push(target, mark);
+      if (mark.textContent.trim() || mark.querySelector("[data-ge-atom]") || (picture && mark.firstElementChild)) push(target, mark);
       else if (mark.textContent) push(target, doc.createTextNode(mark.textContent));
     }
   };
@@ -872,6 +920,9 @@ export function mergeInto(into, from, { anyKind = false } = {}) {
 // with its own.
 
 export const ELEMENT_ID = "data-ge-id";
+
+/** The words an Agent took out of a text block, shown where they were (changes/): never its content. */
+export const GONE_WORDS = "[data-ge-gone-words]";
 const ELEMENT_ID_PREFIX = Math.random().toString(36).slice(2, 6); // a page's own, as formulas' keys
 let elementIds = 0;
 
@@ -927,10 +978,10 @@ export const inTable = (node) => /^(TR|TD|TH)$/.test(node?.tagName ?? "") && nod
 export function unitElement(node) {
   let found = node?.closest?.(UNIT_OR_LEAD) ?? null;
   while (inTable(found)) found = found.parentElement?.closest(UNIT_OR_LEAD) ?? null;
-  // Text that is part of a block made on the page (a new disclosure's title, a new code block's
-  // code) stands for that block.
+  // Text made on the page that is part of a block (a new code block's code, a media block's new
+  // caption) stands for that block: the part's own block, not the one around it.
   const part = found && !found.hasAttribute("data-ge-unit") ? partOf(found) : null;
-  if (part) found = (part.matches("pre, .doc-code") ? part : part.parentElement).closest(UNIT);
+  if (part) found = part.closest(UNIT);
   if (!found?.hasAttribute("data-ge-lead")) return found;
   const id = found.getAttribute("data-ge-lead");
   let next = found.nextElementSibling;
@@ -1180,12 +1231,12 @@ export function snapshotLayout(root) {
 }
 
 // Whether a text block may be written with no text: it is of a type whose component says so (its
-// `empty`: a paragraph, a heading, a list item, a callout; the server's emptyLeaf reads the same)
+// `empty`: a paragraph, a heading, a list item; the server's emptyLeaf reads the same)
 // and can be emptied (can "empty"), an item holding blocks too, its line kept over them (keepLine). A
 // field that may be emptied (a cell, a caption) is no block written empty; a new code block is
 // written empty by its type (describeNode).
 const clearable = (element) => can(element, "empty");
-/** Whether an empty text block stays, written with no text (a paragraph, a heading, a list item, a callout, a code block). */
+/** Whether an empty text block stays, written with no text (a paragraph, a heading, a list item, a code block). */
 const keepsWhenEmpty = (element) => BLOCK_TYPES[textTypeOf(element)]?.empty === true && clearable(element);
 
 /** Whether a text block may go: it can be removed, is not kept (data-ge-keep) and holds no blocks (it would show no line of its own). */
@@ -1208,8 +1259,11 @@ const leaves = (node, emptied) => gone(node) || emptied.has(node);
 // The text block of a block: the block itself, or where its component says (a code block's code).
 const textOf = (node) => BLOCK_TYPES[blockTypeOf(node)]?.textHost?.(node) ?? node;
 
-// What a component's description is given to say what goes with a block (`extras`).
+// What a component's description is given to say what goes with a block (`extras`). `nodes(box)`: the
+// blocks of a box of its own as the commit writes them (nodeOf), a block written whole holding those of
+// boxes of its own apart from its markup (an instance's slots: installed/index.mjs).
 const HELPERS = { sizeValue, serializeInner, unitsOf };
+const helpersFor = (emptied) => ({ ...HELPERS, nodes: (box) => unitsOf(box).map((child) => nodeOf(child, emptied)).filter(Boolean) });
 
 /**
  * The first element in `root` (in document order, `root` itself left out) carrying each value of
@@ -1351,7 +1405,7 @@ function describeNode(element, emptied) {
   // (`content`: a disclosure's content region), its title (`title`), its id (`keyed`: a detail
   // card's), when it is written at all (`written`: a row once each of its columns has something, a
   // detail card while a link opens it; else once it holds something).
-  const extras = spec.extras?.(element, HELPERS) ?? {};
+  const extras = spec.extras?.(element, helpersFor(emptied)) ?? {};
   if (spec.bare) return spec.written?.(element, []) === false ? null : { type, ...extras };
   if (!spec.box) {
     const text = textOf(element);

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

@@ -0,0 +1,106 @@
+import { startBoard } from "./board/index.mjs";
+import { relayTo } from "./notices.mjs";
+import { connectWorkbench } from "./session.mjs";
+
+// A custom page inside a workbench (src/server/routes.mjs serves it at /pages/<slug> with this module;
+// docs/workbench.md "Custom pages"): no document editor, the session, by which the workbench shows it
+// as it shows a document's page, and its boards' editing (./board/: the cards moved, resized, added,
+// taken out, their settings and their blocks' writes, through the page service, by the page map the
+// server writes in its head), which shows the page again only once nothing of it waits. Its session's
+// 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 撤销),
+// 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
+// session: its board edits all the same, and the live script reloads it.
+
+const slug = decodeURIComponent(location.pathname.split("/")[2] ?? "");
+const IDLE = { editing: false, pending: false, saving: false, offline: false, conflicts: 0, unfit: 0, changed: false };
+// Nothing stands over a custom page as a modal.
+const NO_MODALS = { open: () => [], listen() {}, closeTop: () => false };
+
+let board = null;
+const session = connectWorkbench({
+  slug: `@${slug}`,
+  snapshot: () => ({ title: document.title, icon: null, state: IDLE }),
+  commands: {
+    "prepare-close": async () => {
+      await board?.idle();
+      return { ok: true };
+    },
+    // 添加自定义块 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" ? {
+      "restore-defaults": async () => (board ? board.restoreDefaults() : { ok: false, reason: "board" }),
+      "undo-restore": async ({ cards }) => (board ? board.undoRestore(cards) : { ok: false, reason: "board" }),
+    } : {}),
+  },
+  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.
+if (board) window.__galleryEditReload = () => board.swap();
+
+if (session) {
+  // Its notices (a card someone else changed) are the workbench's toasts, as a document's page's are.
+  relayTo(session.notice, session.noticeRoom);
+  if (!board) window.__galleryEditReload = () => session.reload();
+
+  // A block's context.workspace.open (the kit's runtime/workspace.js: 我的待办's item, 最近编辑's
+  // document): a document, at its block where it names one, or a custom page, opened in the workbench.
+  addEventListener("doc-open-request", (event) => {
+    const { slug = null, block = null, page = null } = event.detail ?? {};
+    event.preventDefault();
+    session.open(page ? { hash: `@${page}` } : { target: slug, block });
+  });
+
+  // A link to a document or a page of the workbench goes there in the workbench, never in this frame:
+  // a workbench's address (#<link>, #@<slug>, /#…), a document's page (/generated/<slug>.html) or its
+  // file (../<slug>/doc.html), a custom page's served path (/pages/<slug>, the page alone that gallery
+  // page open gives, or written relative to this one: "reading" from /pages/home). Another site's
+  // opens in a tab of its own.
+  addEventListener("click", (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
+    if (!link || link.hasAttribute("download")) return;
+    const raw = link.getAttribute("href") ?? "";
+    // A place in this page (an element of that id) is the browser's to go to.
+    if (raw.startsWith("#") && raw.length > 1 && document.getElementById(decodeURIComponent(raw.slice(1)))) return;
+    let url;
+    try {
+      url = new URL(raw, location.href);
+    } catch {
+      return;
+    }
+    if (url.origin !== location.origin) {
+      event.preventDefault();
+      window.open(url.href, "_blank", "noopener");
+      return;
+    }
+    const custom = /^\/pages\/([a-z0-9-]+)\/?$/.exec(url.pathname)?.[1];
+    const page = /^\/generated\/([a-z0-9-]+)\.html$/.exec(url.pathname)?.[1] ?? /^\/([a-z0-9-]+)\/(?:doc|report)\.html$/.exec(url.pathname)?.[1];
+    if (custom) {
+      event.preventDefault();
+      session.open({ hash: `@${custom}` });
+    } else if (page) {
+      event.preventDefault();
+      session.open({ target: page, block: url.hash.slice(1) || null });
+    } else if ((url.pathname === "/" || raw.startsWith("#")) && url.hash.length > 1) {
+      event.preventDefault();
+      session.open({ hash: decodeURIComponent(url.hash.slice(1)) });
+    }
+  });
+}

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

@@ -28,6 +28,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 // cancels, and so does anything that ends the press another way (the handle losing the pointer
 // capture, the window losing the focus, the page hidden): never a drop. Ending is idempotent, and
 // the line, tint and copy belong to their drag (overlays.mjs). Ctrl+Shift+arrows move selected blocks standing next to each other by one place (moveBy).
+// A folded heading goes with what it hides, or as the section it covers whole (fold/ takenWith); its
+// copy shows what is in sight, and Ctrl+Shift+↑/↓ take it a section of its level at a time.
 
 const STYLE = `
   ${gestureLock("data-ge-drag", { cursor: "grabbing", select: true })}
@@ -43,9 +45,9 @@ const STYLE = `
  * info: block-info.mjs. selection: selection/index.mjs. struct(parents, touched, mutate): the
  * editor's undoable structural change (history.mjs). say: the status line. closeMenu(): the block
  * menu closes. schedule(): the block tools' next frame (blocks.mjs), which calls step() while a
- * drag lasts.
+ * drag lasts. folds: the headings' folds (fold/).
  */
-export function createDrag({ info, selection, struct, say, closeMenu, schedule }) {
+export function createDrag({ info, selection, struct, say, closeMenu, schedule, folds }) {
   addStyle(STYLE);
   const { addColumn, columnsOf, rowAround } = columnOps() ?? {};
   const { kindOf, nameOf, named, fixedText, boxKindOf } = info;
@@ -105,7 +107,8 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
   }
 
   // Put blocks beside a block (drop.mjs `aside`): { target, side }, the two side by side in a new
-  // row of columns; { row, index, whole }, a new column of that row at `index` holding them, or,
+  // row of columns (a folded heading's column taking what it hides: fold/ withHidden); { row, index,
+  // whole }, a new column of that row at `index` holding them, or,
   // when they are all of one column of it (`whole`), that column moved there. One undo step that
   // keeps them selected; a container they leave empty goes, as when they move (and a row left
   // with one column gives its blocks back: history.mjs).
@@ -122,7 +125,7 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
     const leftovers = leftoversOf(targets, aside.row ?? aside.target);
     const parents = [...new Set([...targets.map((target) => target.parentNode), aside.row ?? aside.target.parentElement, ...leftovers.map((node) => node.parentNode)].filter(Boolean))];
     struct(parents, [], () => {
-      const { created } = aside.row ? addColumn(aside.row, aside.index, parts) : rowAround(aside.target, [parts], aside.side);
+      const { created } = aside.row ? addColumn(aside.row, aside.index, parts) : rowAround(folds.withHidden(aside.target), [parts], aside.side);
       leftovers.forEach((node) => node.remove());
       return { touched: [], focus: null, select: targets, reselect: true, created };
     });
@@ -134,30 +137,40 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
    */
   function moveBy(targets, delta, { keepFocus = false } = {}) {
     closeMenu();
-    targets = ordered([targets].flat().filter(alive));
+    const picked = ordered([targets].flat().filter(alive));
+    targets = folds.takenWith(picked);
     if (targets.length === 0) return false;
     const reason = targets.map(fixedText).find(Boolean);
     if (reason) {
       say(reason);
       return false;
     }
-    // The blocks to move among: not a box's lead (a highlight block's icon stays first in it).
+    const name = folds.namedWith(picked, targets, named);
+    // The blocks to move among: not a box's lead (a highlight block's icon stays first in it), as the
+    // reader sees them: a folded heading and what it hides one (fold/ groupsOf).
     const boxKind = boxKindOf(targets[0].parentElement);
     const list = unitsOf(targets[0].parentElement).filter((unit) => !isLead(boxKind, kindOf(unit)));
-    const first = list.indexOf(targets[0]);
-    if (!targets.every((target, index) => list[first + index] === target)) {
+    const groups = folds.groupsOf(list);
+    const first = groups.findIndex((group) => group[0] === targets[0]);
+    let last = first;
+    let count = first < 0 ? 0 : groups[first].length;
+    while (first >= 0 && count < targets.length && last + 1 < groups.length) count += groups[++last].length;
+    if (first < 0 || !groups.slice(first, last + 1).flat().every((unit, index) => targets[index] === unit) || count !== targets.length) {
       say(t("选中的块不相邻，不能一起上下移动；可以拖动其中一块的手柄，把它们一起移到别处。"));
       return false;
     }
-    const neighbour = list[delta < 0 ? first - 1 : first + targets.length];
-    if (!neighbour) {
-      say(list.length === targets.length ? t("这里只有{0}；可以拖动手柄移到别处。", targets.length === 1 ? t("这一个{0}", nameOf(targets[0])) : t("这几块")) : t("{0}已经在{1}。", named(targets), delta < 0 ? t("最前面") : t("最后面")));
+    // A folded heading alone goes a section of its level at a time (fold/ stepOver); others a block in sight at a time.
+    const alone = first === last && folds.isFolded(targets[0]);
+    const step = alone ? folds.stepOver(targets[0], delta, list) : null;
+    const over = alone ? step && [step.first, step.last] : groups[delta < 0 ? first - 1 : last + 1];
+    if (!over) {
+      say(groups.length === last - first + 1 ? t("这里只有{0}；可以拖动手柄移到别处。", targets.length === 1 ? t("这一个{0}", nameOf(targets[0])) : t("这几块")) : t("{0}已经在{1}。", name, delta < 0 ? t("最前面") : t("最后面")));
       return false;
     }
-    moveTo(targets, targets[0].parentElement, delta < 0 ? withLeads(neighbour)[0] : neighbour.nextSibling);
+    moveTo(targets, targets[0].parentElement, delta < 0 ? withLeads(over[0])[0] : over.at(-1).nextSibling);
     if (!keepFocus) selection.select(targets, { quiet: true });
     targets[delta < 0 ? 0 : targets.length - 1].scrollIntoView({ block: "nearest", inline: "nearest" });
-    say(t("已移动{0} · Ctrl+Z 撤销", named(targets)));
+    say(t("已移动{0} · Ctrl+Z 撤销", name));
     return true;
   }
 
@@ -165,7 +178,8 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
   // the drag started (a block that cannot move says why).
   function start(target, x, y) {
     const picked = selection.picked;
-    const targets = picked.length > 1 && picked.includes(target) ? [...picked] : [target];
+    const chosen = picked.length > 1 && picked.includes(target) ? [...picked] : [target];
+    const targets = folds.takenWith(chosen); // a folded heading with what it hides (fold/)
     const reason = targets.map(fixedText).find(Boolean);
     if (reason) {
       say(reason);
@@ -174,7 +188,7 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
     closeMenu();
     selection.select(targets, { quiet: true });
     const session = {
-      targets, target, from: target.parentElement, x, y, drop: null, rest: null, opened: new Set(),
+      targets, target, from: target.parentElement, x, y, drop: null, rest: null, opened: new Set(), name: folds.namedWith(chosen, targets, named),
       line: element("div", { class: "ge-drop-line", hidden: "" }),
       tint: element("div", { class: "ge-drop-tint", hidden: "" }),
       preview: null,
@@ -184,12 +198,12 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
     // The line and the tint go in the layer of where the blocks would go
     // (overlay-layer.mjs), when there is one; the copy follows the pointer in the window.
     for (const kind of ["line", "tint"]) own(session[kind], `drag ${kind}`, { owner: target, alive });
-    session.preview = createPreview(targets, x, y, { owner: target, alive });
+    session.preview = createPreview(targets.filter((node) => !folds.hidden(node)), x, y, { owner: target, alive }); // what is in sight
     drag = session;
     note("drag", `start ${targets.map(describe).join(", ")}`);
     targets.flatMap(withLeads).forEach((part) => part.setAttribute("data-ge-dragging", ""));
     document.documentElement.setAttribute("data-ge-drag", "");
-    say(t("正在移动{0} · 拖到要放的位置后松开 · 停在选项卡上切换，停在折叠块标题上展开 · Esc 取消", named(targets)), "prompt");
+    say(t("正在移动{0} · 拖到要放的位置后松开 · 停在选项卡上切换，停在折叠块标题上展开 · Esc 取消", session.name), "prompt");
     update();
     schedule();
     return true;
@@ -219,8 +233,9 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
       : items ? accepts(box.kind, "item") || accepts(box.kind, "list")
       : steps ? accepts(box.kind, "step") || (accepts(box.kind, "flowchart") && box.kind !== "nest" && !box.el.closest("ol.doc-flow"))
       : [...kinds].every((kind) => accepts(box.kind, kind)));
-    // Blocks a column takes may go beside a block, into a column (分栏).
-    const aside = !tabs && [...kinds].every((kind) => accepts("column", kind)) && ((unit) => accepts("column", unit.kind));
+    // Blocks a column takes may go beside a block, into a column (分栏); beside a folded heading when a
+    // column takes what it hides too, which goes into its column with it (besideTo).
+    const aside = !tabs && [...kinds].every((kind) => accepts("column", kind)) && ((unit) => folds.withHidden(unit.el).every((node) => accepts("column", kindOf(node))));
     return resolveDrop(drag.tree, x + scrollX, y + scrollY, { takes, dragged: (unit) => targets.includes(unit.el), count: targets.length, items, aside, edge: scrollX });
   }
 
@@ -272,7 +287,7 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
   // Releasing (commit) or cancelling: the blocks go where the line showed, or stay.
   function end(commit) {
     if (!drag) return;
-    const { targets, target, drop, line, tint, preview, opened } = drag;
+    const { targets, target, drop, line, tint, preview, opened, name } = drag;
     clearTimeout(drag.rest?.timer);
     drag = null;
     line.remove();
@@ -293,16 +308,17 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
       besideTo(targets, drop.aside);
       selection.select(targets, { quiet: true });
       target.scrollIntoView({ block: "nearest", inline: "nearest" });
-      say(t("{0} · 拖动栏间的竖线调宽度 · Ctrl+Z 撤销", drop.aside.whole ? t("已移动这一栏") : drop.aside.row ? t("已把{0}放进新的一栏", named(targets)) : t("已把{0}并排分栏", named(targets))));
+      say(t("{0} · 拖动栏间的竖线调宽度 · Ctrl+Z 撤销", drop.aside.whole ? t("已移动这一栏") : drop.aside.row ? t("已把{0}放进新的一栏", name) : t("已把{0}并排分栏", name)));
       return;
     }
     const others = unitsOf(drop.container).filter((unit) => !targets.includes(unit) && extentOf(unit));
-    // The place is never before a box's lead (a highlight block's icon): drop.mjs.
-    const reference = drop.slot < others.length ? withLeads(others[drop.slot])[0] : others.length > 0 ? others.at(-1).nextSibling : null;
+    // The place is never before a box's lead (a highlight block's icon): drop.mjs. At the end, after
+    // what the last block in sight hides too (a folded heading's section: fold/), never between them.
+    const reference = drop.slot < others.length ? withLeads(others[drop.slot])[0] : others.length > 0 ? folds.lastOf(others.at(-1)).nextSibling : null;
     const emptied = moveTo(targets, drop.nest ?? drop.container, drop.nest ? null : reference);
     selection.select(targets, { quiet: true });
     target.scrollIntoView({ block: "nearest", inline: "nearest" });
-    say(t("已移动{0}{1}{2} · Ctrl+Z 撤销", named(targets), drop.nest ? t("到上一项下面") : "", emptied ? t("（原来的外层已空，一并去掉）") : ""));
+    say(t("已移动{0}{1}{2} · Ctrl+Z 撤销", name, drop.nest ? t("到上一项下面") : "", emptied ? t("（原来的外层已空，一并去掉）") : ""));
   }
 
   // The window losing the focus, or the page going out of sight, ends a drag: cancelled.

package/browser/editor/page/drag/preview.mjs

@@ -11,8 +11,12 @@ import { element, mount } from "../ui.mjs";
 // (theirs stay theirs, a chart's gradients among them). The page's own rules are brought in as one
 // stylesheet (made once, applied at once: no unstyled first frame), and each copy stands in a frame
 // of its ancestors as the page has them (shallow copies, display: contents), so a list item keeps its
-// marker and its number, and a section's paragraph its section's look. At most MAX blocks, each at
-// most TALL of the window (cut, fading out at the bottom).
+// marker and its number, and a section's paragraph its section's look. A frame draws nothing of its
+// own (visibility: hidden, the copy visible): display: contents leaves an element's ::before and
+// ::after and a <details>'s own summary drawn (Chrome's "▶ 详细信息" for one without a summary, an
+// ancestor item's marker, a flowchart step's number, each at the window's left or top), which would
+// follow the pointer (the user's report of 2026-11-06). At most MAX blocks, each at most TALL of the
+// window (cut, fading out at the bottom).
 
 const MAX = 12;
 const TALL = 0.6;
@@ -72,9 +76,9 @@ function copyOf(part, rect, top) {
   }
   const cut = rect.height > innerHeight * TALL;
   if (cut) copy.classList.add("ge-cut");
-  // Its own size, as it was on the page: no share of a row or of its box (the window is the box here); inline, so the page's rules for the block cannot undo it.
+  // Its own size, as it was on the page: no share of a row or of its box (the window is the box here); inline, so the page's rules for the block cannot undo it. Visible, in frames that are not.
   Object.assign(copy.style, {
-    position: "absolute", margin: "0", maxWidth: "none", minWidth: "0", maxHeight: "none", flex: "none",
+    position: "absolute", margin: "0", maxWidth: "none", minWidth: "0", maxHeight: "none", flex: "none", visibility: "visible",
     left: `${rect.left}px`, top: `${rect.top}px`, width: `${rect.width}px`,
     height: `${cut ? Math.round(innerHeight * TALL) : rect.height}px`,
   });
@@ -82,6 +86,7 @@ function copyOf(part, rect, top) {
   for (let node = part.parentElement; node && node !== top.parentElement; node = node.parentElement) {
     const shell = clean(node.cloneNode(false));
     shell.style.display = "contents";
+    shell.style.visibility = "hidden"; // a frame lends the copy its rules and draws nothing of its own
     shell.append(outer);
     outer = shell;
   }