@heycys/gallery 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,351 @@
+import { IN_LAYER } from "../../../shared/layers.mjs";
+import { gestureLock } from "../gesture.mjs";
+import { nestedBlocks, newContainer, placeBefore, removalTarget, unitsOf, withLeads } from "../core.mjs";
+import { accepts, isLead } from "../../components/registry.mjs";
+import { columnOps } from "../page-objects.mjs";
+import { DIALOG, SHEETS } from "../../components/kit.mjs";
+import { heldListType, listType } from "../../components/list/index.mjs";
+import { extentOf, measure } from "../geometry.mjs";
+import { edgeScroll } from "../edge-scroll.mjs";
+import { alive, ordered } from "../block-info.mjs";
+import { resolveDrop } from "./drop.mjs";
+import { describe, note, own } from "../overlays.mjs";
+import { drawBox, layerOf } from "../overlay-layer.mjs";
+import { createPreview } from "./preview.mjs";
+import { addStyle, element } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// Moving blocks (docs/editor.md, "Moving blocks"). Dragging a block's handle (handle/ starts it once
+// the press has moved a few pixels) moves it, with the others selected when it is one of them,
+// anywhere it may go (accepts(): any flow of the document, a column, a list, the chapters): where
+// is drop.mjs resolveDrop (containers by their edges, a step out per 12px past edges that coincide;
+// lists by indentation, a step right of the item above going under it; beside a block, side by side
+// with it in a new row of columns, and at a column's edge, a new column: 分栏), shown by a blue line and
+// the container tinted (no label: the line and the tint say where); a faded copy of the blocks
+// follows the pointer (preview.mjs, as Notion's). Resting on a Sheet tab switches
+// to its Sheet, resting on a closed disclosure's title opens it; near the window's edges the page
+// scrolls. Releasing moves the very same nodes there as one undo step that keeps them selected; Esc
+// 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 })}
+  [data-ge-dragging] { opacity: .5; }
+  .ge-drop-line { position: absolute; left: 0; top: 0; z-index: ${IN_LAYER.drop}; border-radius: 2px; background: rgb(151 197 241); pointer-events: none; }
+  /* The container the dragged blocks would go into (not the page itself). */
+  .ge-drop-tint { position: absolute; left: 0; top: 0; z-index: ${IN_LAYER.tint}; border-radius: 6px; background: color-mix(in srgb, var(--ge-halo) 50%, transparent); pointer-events: none; }
+  .ge-drop-tint[hidden], .ge-drop-line[hidden] { display: none; }
+`;
+
+
+/**
+ * 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. folds: the headings' folds (fold/).
+ */
+export function createDrag({ info, selection, struct, say, closeMenu, schedule, folds }) {
+  addStyle(STYLE);
+  const { addColumn, columnsOf, rowAround } = columnOps() ?? {};
+  const { kindOf, nameOf, named, fixedText, boxKindOf } = info;
+  let drag = null; // blocks being dragged: { targets, target (the one pressed), from (their container), x, y, line, tint, preview, drop: { container, slot } | null, rest, opened, tree, measured }
+
+  // The containers moving `targets` out leaves empty, which go with them (as when the last block of one
+  // is deleted), except those holding `place` (where they go) or being targets themselves.
+  function leftoversOf(targets, place) {
+    const gone = new Set(targets.flatMap(withLeads));
+    return [...new Set(targets.map((target) => removalTarget(target, gone)))].filter((node) => !targets.includes(node) && !node.contains(place));
+  }
+
+  // Put blocks (with their leads, in their order) into `container` before `reference`, as one undo
+  // step that keeps them selected. A container they leave empty goes too, as when its last block
+  // is deleted. Returns whether an emptied
+  // container went. `container` may be a list item: list items go to the end of its last list (when
+  // it is the last block it holds), or of a new list (of the kind their own list is) put at the end
+  // of the item; other blocks among the blocks it holds, before `reference` (at the end without one).
+  // A flowchart's nodes go among blocks as list items do: into the flowchart they land right beside,
+  // else a flowchart of their own (their list's type, "flowchart"); dropAt never puts them under an item.
+  function moveTo(targets, container, reference) {
+    const parts = targets.flatMap(withLeads);
+    const leftovers = leftoversOf(targets, container);
+    const item = container.tagName === "LI" && targets.every((target) => kindOf(target) === "item") ? container : null;
+    const last = item ? nestedBlocks(item).at(-1) : null;
+    const list = last?.matches("ul, ol") && last.hasAttribute("data-ge-box") ? last : null;
+    // List items dropped among blocks (Feishu's and Notion's: an item goes anywhere): they join a list
+    // of their kind right before or after the place, else they make one there.
+    const kind = listType(targets[0].parentElement); // items join a list of their own type
+    const sameKind = (node) => Boolean(node?.matches?.("ul, ol")) && listType(node) === kind;
+    const loose = !item && targets.every((target) => target.tagName === "LI") && !container.matches("ul, ol");
+    const before = loose ? (reference ? reference.previousElementSibling : container.lastElementChild) : null;
+    // Never the list they leave empty, which goes (it would take them with it).
+    const joins = (node) => sameKind(node) && node.hasAttribute("data-ge-box") && !targets.includes(node) && !leftovers.includes(node);
+    const join = !loose ? null : joins(before) ? { list: before, at: null }
+      : joins(reference) ? { list: reference, at: reference.firstChild } : null;
+    const parents = [...new Set([...targets.map((target) => target.parentNode), list ?? container, join?.list, ...leftovers.map((node) => node.parentNode)].filter(Boolean))];
+    struct(parents, [], () => {
+      let into = list ?? container;
+      const created = [];
+      if (item && !list) {
+        into = newContainer(document, heldListType(listType(targets[0].parentElement))); // a 流程图's steps a numbered list there
+        item.append(into);
+        created.push(into);
+      }
+      if (loose && join) placeBefore(join.list, parts, join.at);
+      else if (loose) {
+        const wrapper = newContainer(document, kind);
+        container.insertBefore(wrapper, reference);
+        created.push(wrapper);
+        placeBefore(wrapper, parts, null);
+      } else placeBefore(into, parts, item ? null : reference);
+      leftovers.forEach((node) => node.remove());
+      return { touched: [], focus: null, select: targets, reselect: true, created };
+    });
+    return leftovers.length > 0;
+  }
+
+  // Put blocks beside a block (drop.mjs `aside`): { target, side }, the two side by side in a new
+  // 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).
+  function besideTo(targets, aside) {
+    if (aside.whole) {
+      const row = aside.row;
+      struct([row], [], () => {
+        row.insertBefore(aside.whole, columnsOf(row)[aside.index] ?? null);
+        return { touched: [], focus: null, select: targets, reselect: true };
+      });
+      return;
+    }
+    const parts = targets.flatMap(withLeads);
+    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(folds.withHidden(aside.target), [parts], aside.side);
+      leftovers.forEach((node) => node.remove());
+      return { touched: [], focus: null, select: targets, reselect: true, created };
+    });
+  }
+
+  /**
+   * Move a block, or selected blocks standing next to each other, one place back (-1) or on (+1)
+   * among their container's blocks. Returns whether they moved.
+   */
+  function moveBy(targets, delta, { keepFocus = false } = {}) {
+    closeMenu();
+    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;
+    }
+    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 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;
+    }
+    // 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(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 撤销", name));
+    return true;
+  }
+
+  // Dragging the handle of `target`: it goes with the others selected, or alone. Returns whether
+  // the drag started (a block that cannot move says why).
+  function start(target, x, y) {
+    const picked = selection.picked;
+    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);
+      return false;
+    }
+    closeMenu();
+    selection.select(targets, { quiet: true });
+    const session = {
+      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,
+      tree: null, measured: 0,
+    };
+    const alive = () => drag === session;
+    // 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.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 取消", session.name), "prompt");
+    update();
+    schedule();
+    return true;
+  }
+
+  // Where dragged blocks go (drop.mjs resolveDrop), from the page's boxes as they are: measured
+  // again at most every 100ms (resting on a tab or a disclosure's title changes them), in an open
+  // modal dialog from its content. The tree is in page coordinates, so scrolling leaves it valid.
+  function dropAt(x, y) {
+    const now = performance.now();
+    if (!drag.tree || now - drag.measured > 100) {
+      const root = drag.target.closest(`${DIALOG.openContent}[data-ge-box]`) ?? document.querySelector(`${DIALOG.openContent}[data-ge-box]`) ?? document.querySelector("main");
+      drag.tree = root && measure(root);
+      drag.measured = now;
+    }
+    if (!drag.tree) return null;
+    const { targets } = drag;
+    const kinds = new Set(targets.map(kindOf));
+    const tabs = kinds.has("tab");
+    // Tabs stay in their row; list items go wherever a list may (among blocks, in a list of their kind
+    // or a new one); a flowchart's nodes into a flowchart, or wherever a flowchart may go outside any
+    // (among blocks: a flowchart of their own there, or the one they land beside: moveTo), never into a
+    // node or under an item (nodes never nest); anything else goes where its box takes every one of them.
+    const items = [...kinds].every((kind) => kind === "item");
+    const steps = [...kinds].every((kind) => kind === "step");
+    const takes = (box) => (tabs ? kinds.size === 1 && targets.every((target) => target.parentElement === box.el)
+      : 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 (分栏); 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 });
+  }
+
+  // Resting on a Sheet tab while dragging switches to that Sheet; resting on the title of a
+  // closed disclosure opens it, so the block can go in (end() closes it again if it did not).
+  function restOn(x, y) {
+    const hit = document.elementFromPoint(x, y);
+    const tab = drag.targets.some((target) => kindOf(target) === "tab") ? null : hit?.closest(SHEETS.tabIn) ?? null;
+    const closed = tab ? null : hit?.closest("details:not([open]) > summary")?.parentElement ?? null;
+    const node = tab ?? (closed && !drag.targets.some((target) => target.contains(closed)) ? closed : null);
+    if (node === (drag.rest?.node ?? null)) return;
+    clearTimeout(drag.rest?.timer);
+    if (!node || (tab && tab.getAttribute("aria-selected") === "true")) {
+      drag.rest = node ? { node, timer: 0 } : null;
+      return;
+    }
+    drag.rest = {
+      node,
+      timer: setTimeout(() => {
+        if (tab) tab.click();
+        else {
+          node.open = true;
+          drag.opened.add(node);
+        }
+      }, 450),
+    };
+  }
+
+  // Where the dragged blocks would go (drag.drop), shown as a line (none where they already are or
+  // where nothing takes them) and the container they would go into tinted (not the page itself).
+  function update() {
+    const { x, y, line, tint } = drag;
+    drag.preview.move(x, y);
+    restOn(x, y);
+    const found = dropAt(x, y);
+    drag.drop = found && { container: found.box, slot: found.slot, nest: found.nest, same: found.same, aside: found.aside ?? null };
+    line.hidden = !found || found.same;
+    tint.hidden = line.hidden || !found.halo;
+    if (line.hidden) return;
+    // The drop's rectangles are in page coordinates (drop.mjs), drawn in the layer of the container
+    // the blocks would go into (overlay-layer.mjs).
+    const layer = layerOf(found.box);
+    const client = (rect) => ({ left: rect.left - scrollX, top: rect.top - scrollY, right: rect.right - scrollX, bottom: rect.bottom - scrollY });
+    const at = client(found.line);
+    drawBox(line, layer, at);
+    if (found.halo) drawBox(tint, layer, client(found.halo), 2);
+  }
+
+  // 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, name } = drag;
+    clearTimeout(drag.rest?.timer);
+    drag = null;
+    line.remove();
+    tint.remove();
+    preview.node.remove();
+    targets.flatMap(withLeads).forEach((part) => part.removeAttribute("data-ge-dragging"));
+    document.documentElement.removeAttribute("data-ge-drag");
+    const lands = commit && drop && !drop.same && targets.every(alive) && drop.container.isConnected && (!drop.aside || (drop.aside.row ?? drop.aside.target).isConnected);
+    note("drag", lands ? "dropped" : commit ? "released in place" : "cancelled");
+    // Disclosures opened on the way close again, unless the blocks went into one of them.
+    for (const details of opened) if (!(lands && details.contains(drop.container))) details.open = false;
+    if (!lands) {
+      selection.select(targets.filter(alive), { quiet: true });
+      say(!commit ? t("已取消移动。") : t("位置没有变化。"));
+      return;
+    }
+    if (drop.aside) {
+      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}放进新的一栏", 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. 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 撤销", name, drop.nest ? t("到上一项下面") : "", emptied ? t("（原来的外层已空，一并去掉）") : ""));
+  }
+
+  // The window losing the focus, or the page going out of sight, ends a drag: cancelled.
+  addEventListener("blur", () => end(false));
+  document.addEventListener("visibilitychange", () => { if (document.hidden) end(false); });
+
+  return {
+    start,
+    /** The pointer moved while dragging. */
+    move(x, y) {
+      if (!drag) return;
+      drag.x = x;
+      drag.y = y;
+      update();
+    },
+    end,
+    /** A frame while dragging: the page scrolls near the window's edges, the drop follows. */
+    step() {
+      if (!drag) return;
+      edgeScroll(drag.x, drag.y, drag.target.closest(DIALOG.openContent)); // the card it started in, else the window
+      update();
+    },
+    moveBy,
+    /** Blocks are being dragged. */
+    get active() { return Boolean(drag); },
+    /** The block whose handle was pressed (its handle stays), while dragging. */
+    get target() { return drag?.target ?? null; },
+    get nodes() { return drag ? [drag.preview.node] : []; },
+  };
+}

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

@@ -0,0 +1,126 @@
+import { Z } from "../../../shared/layers.mjs";
+import { DIALOG } from "../../components/kit.mjs";
+import { withLeads } from "../core.mjs";
+import { own } from "../overlays.mjs";
+import { element, mount } from "../ui.mjs";
+
+// The picture of the blocks being dragged (docs/editor.md, "Moving blocks"), as Notion's: a copy of
+// each, faded, where it stands on the page when the drag starts, moving with the pointer by as much
+// as the pointer moves. The copies live in a shadow root of their own, so nothing of the page ever
+// meets them: not the editor's map and the commit's scans, not the kit's scripts, not the page's ids
+// (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. 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;
+const INSIDE = `
+  .ge-copy { box-sizing: border-box; pointer-events: none; }
+  .ge-copy.ge-cut { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
+`;
+const OUTSIDE = `
+  .ge-drag-preview { position: fixed; inset: 0; overflow: visible; z-index: ${Z.preview}; opacity: .4; pointer-events: none; }
+`;
+
+// The page's rules as one stylesheet, made again only when the page has more or fewer sheets (the
+// editor adds its own as its tools start). Rules that cannot go into a shadow root's sheet are left
+// out: @import (none in the kit) and @font-face (the page's fonts are the page's already).
+let rules = null; // { count, sheet }
+function pageSheet() {
+  const count = document.styleSheets.length;
+  if (rules?.count === count) return rules.sheet;
+  const text = [];
+  for (const sheet of document.styleSheets) {
+    let list;
+    try {
+      list = sheet.cssRules;
+    } catch {
+      continue; // another origin's
+    }
+    for (const rule of list) if (!(rule instanceof CSSImportRule) && !(rule instanceof CSSFontFaceRule)) text.push(rule.cssText);
+  }
+  text.push(INSIDE);
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(text.join("\n"));
+  rules = { count, sheet };
+  return sheet;
+}
+
+// What a copy must not carry: the drag's own marks, a caret to take, media that would play.
+function clean(node) {
+  for (const each of [node, ...node.querySelectorAll("*")]) {
+    each.removeAttribute("data-ge-dragging");
+    each.removeAttribute("contenteditable");
+    each.removeAttribute("autofocus");
+  }
+  node.querySelectorAll("iframe, video, audio, object, embed").forEach((media) => media.remove());
+  return node;
+}
+
+// `part` copied, standing in shallow copies of its ancestors up to the page (or the dialog's
+// content), at `rect` (window coordinates, where it is now).
+function copyOf(part, rect, top) {
+  const copy = clean(part.cloneNode(true));
+  copy.classList.add("ge-copy");
+  // An ordered list's item keeps its number.
+  const list = part.parentElement;
+  if (part.localName === "li" && list?.localName === "ol") {
+    const items = [...list.children].filter((child) => child.localName === "li");
+    copy.setAttribute("value", String((Number(list.getAttribute("start")) || 1) + items.indexOf(part)));
+  }
+  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. Visible, in frames that are not.
+  Object.assign(copy.style, {
+    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`,
+  });
+  let outer = copy;
+  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;
+  }
+  outer.setAttribute("data-ge-editing", ""); // the editor's own rules for blocks being edited apply
+  return outer;
+}
+
+/**
+ * The picture of `targets` (blocks, in page order) for a drag starting at the pointer (`x`, `y`):
+ * { node, move(x, y) }; it belongs to the drag (`alive`, overlays.mjs) and goes with node.remove().
+ */
+export function createPreview(targets, x, y, { owner, alive }) {
+  if (!document.querySelector("style[data-ge-drag-preview]")) {
+    const style = element("style", { text: OUTSIDE, "data-ge-drag-preview": "" });
+    style.dataset.docDev = "";
+    document.head.append(style);
+  }
+  const node = own(element("div", { class: "ge-drag-preview" }), "drag preview", { owner, alive });
+  const root = node.attachShadow({ mode: "open" });
+  root.adoptedStyleSheets = [pageSheet()];
+  for (const target of targets.slice(0, MAX)) {
+    const top = target.closest(DIALOG.openContent) ?? target.closest("main") ?? target.parentElement;
+    for (const part of withLeads(target)) {
+      const rect = part.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) continue;
+      root.append(copyOf(part, rect, top));
+    }
+  }
+  mount(node);
+  return {
+    node,
+    /** The pointer is at `left`, `top`: the copies go with it. */
+    move(left, top) {
+      node.style.transform = `translate(${Math.round(left - x)}px, ${Math.round(top - y)}px)`;
+    },
+  };
+}

package/browser/editor/page/edge-scroll.mjs

@@ -0,0 +1,50 @@
+import { task } from "./frames.mjs";
+
+// What scrolls when the pointer of a press gesture nears the top or bottom edge of what it works in
+// (docs/editor.md, "Selecting blocks"): dragging blocks, drawing a box selection, selecting text across
+// blocks. One rule for the three, and one driver: edgeScroll() scrolls once and says whether
+// anything moved; the box selection and the text selection are tasks of the editor's frames
+// (edgeFollower, frames.mjs: no loop of their own), and a drag calls edgeScroll from the block
+// tools' task, which already runs on every frame of a drag. What scrolls is the gesture's: the
+// content of the detail card it started in (the one on top when one was opened from another, never
+// the card under it), else the window.
+
+const EDGE = 56; // how near the edge of what scrolls the pointer is when it starts to
+
+/**
+ * Scroll `scroller` (a detail card's content; null: the window) when the pointer at (x, y) is
+ * within EDGE of its top or bottom edge, faster the nearer the edge. Returns whether it moved.
+ */
+export function edgeScroll(x, y, scroller = null) {
+  const content = scroller?.isConnected ? scroller : null;
+  const rect = content ? content.getBoundingClientRect() : { top: 0, bottom: innerHeight };
+  const step = Math.round(y < rect.top + EDGE ? -(rect.top + EDGE - y) / 3 : y > rect.bottom - EDGE ? (y - rect.bottom + EDGE) / 3 : 0);
+  if (!step) return false;
+  if (content) {
+    const was = content.scrollTop;
+    content.scrollTop += step;
+    return content.scrollTop !== was;
+  }
+  const was = scrollY;
+  scrollBy(0, step);
+  return scrollY !== was;
+}
+
+/**
+ * A task of the editor's frames that scrolls near the edge for a gesture, on each frame from its
+ * wake() until `pointer()` gives null (the gesture is over). pointer(): where the pointer is, { x, y };
+ * scroller(): what the gesture scrolls (a card's content, null: the window); scrolled(): what to do
+ * once a frame has scrolled (the box or the selection follows what came into view); fail(): the
+ * gesture goes when the task throws (frames.mjs).
+ */
+export function edgeFollower(name, { pointer, scroller, scrolled, fail }) {
+  return task(name, {
+    run() {
+      const at = pointer();
+      if (!at) return false;
+      if (edgeScroll(at.x, at.y, scroller())) scrolled();
+      return true;
+    },
+    fail,
+  });
+}