@heycys/gallery 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,307 @@
+// Where dragged blocks go (docs/editor.md, "Moving blocks"): a pure function of the tree
+// geometry.mjs measure() reads (no DOM is read here: an empty box's place is its `content` rect), so
+// the rules are tested without a browser (tests/unit/geometry.mjs).
+// Geometry proposes, the page's structure (boxes, units) decides the level, and accepts() decides
+// what may go where (`takes`, from drag/index.mjs); nothing here changes the page. The tree's shape
+// is described in geometry.mjs.
+
+import { MAX_COLUMNS } from "../../components/columns/index.mjs";
+import { BLOCK_TYPES, firstBlockOf, isLead } from "../../components/registry.mjs";
+import { ADD, HANDLE } from "../handle-sizes.mjs";
+
+const STEP = 12; // past edges that coincide, each step this far out leaves one more container
+const NEAR = 3 * STEP; // how far past its edge a container left behind still counts
+const SAME = 4; // edges this close are one edge
+const NEST = 24; // list items a step right of the item above go under it
+const LEAVE = 20; // and leave a list only past its markers, this far left of where its items start
+// Beside a block (分栏, as Feishu's and Notion's): the right third of a block and right of it (no
+// further than REACH), or left of it, a band as Notion's, REACH out from the block, but starting past
+// all of its handle (OUT: the grip and the "+" column left of it) where Notion's starts at the grip's
+// edge; a framed Sheet panel's blocks, set in from the page by its padding, take that start from the
+// page's left edge, the handle of a page block going by there. In a row of columns: within SIDE of the
+// last column's right edge (Feishu's) and past it, left of the first by the same band, or left of the
+// handle of a column past the first (BETWEEN wide, OUT from that column; the gap, narrower than the
+// handle standing in it, leaves the band only the end of the column before). Over a block's text and
+// down the handles, whichever way a hand drifts on a drag that goes up or down, a drop goes between
+// blocks as ever. Where the band would fall off the window, its start stays in it, as far from where
+// the grip then stands as SLACK (FIRST).
+const REACH = 200; // the farthest from a block a drop still goes beside it (Notion's)
+const OUT = HANDLE.gap + HANDLE.width + ADD.width; // where the band left of a block starts, from its left edge
+const SLACK = 16; // the least between the grip's left edge and that start
+const FIRST = ADD.edge + ADD.width - SLACK; // the same from the window's left edge, the grip kept in from it there (handle/)
+const SIDE = 16; // near a column's edge (Feishu's)
+const BETWEEN = 2 * SIDE; // how wide the band for a new column between two is, as wide as within SIDE of an edge either way
+
+// How many of a box's units come before its places: its lead (a highlight block's icon, a flowchart
+// node's) is its own, no block to fall between, so a place before it is the place after it; so is a
+// node's first line, its title (`firstBlock`): nothing lands before it, a place there is the place after it.
+const headOf = (box, units) => {
+  const lead = isLead(box.kind, units[0]?.kind) ? 1 : 0;
+  const first = firstBlockOf(box.kind);
+  return lead + (first && units[lead]?.kind === BLOCK_TYPES[first]?.kind ? 1 : 0);
+};
+
+// Where a list's items start (their text; the markers stand left of it).
+const itemsLeft = (list) => Math.min(list.rect.left + NEST, ...list.children.filter((child) => child.type === "unit").map((item) => item.start));
+
+// In a box whose rows wrap (geometry.mjs sideBySide: a flowchart's nodes), a block alone in its row
+// (no other of `rects` at its height: a node holding a picture, a node of a 纵向 flowchart) is one of
+// a column there: the places before and after it are above and below it, by its middle height, the
+// line across it. In a row of several, the places go across, by their middles, as in any row.
+const alone = (box, rects, rect) => box.row === "wrap" && !rects.some((other) => other !== rect && Math.abs(other.top - rect.top) < SAME);
+
+const isRow = (node) => node.kind === "columns";
+
+// The x a point at (x, y) counts at: over the handle of a column's blocks (OUT left of a column past
+// the first), at that column's left edge, as one left of the page counts at the page's, so that a drag
+// by that handle that goes up or down stays among that column's blocks.
+function overHandle(node, x, y) {
+  const next = node.children.find(({ rect }) => x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom);
+  if (!next) return x;
+  const column = isRow(next) ? next.children.find(({ rect }) => x < rect.left && x >= rect.left - OUT) : null;
+  return overHandle(column ?? next, column ? column.rect.left + 1 : x, y);
+}
+
+/**
+ * Where dragged blocks go with the pointer at (x, y) (page coordinates; beside the page counts as
+ * the page), or null where nothing takes them (over a Sheet's tab row, anything but its own tabs):
+ * { box, slot, nest, same, line, halo }. `box` takes them before its `slot`-th block (dragged ones
+ * not counted), or, with `nest`, at the end of that list item's lists; `same`: that is where they
+ * are already; `line`: where to show the place, `halo`: the container to tint (none for the page
+ * itself), both { left, top, right, bottom } in page coordinates.
+ *
+ * The box is the innermost one around the point that takes the blocks (`takes(box)`), the place in
+ * it between two of its blocks by their middles (in a row: by rows, then across). How deep a drop
+ * goes follows each container's own layout. Containers with edges (sections, panels, disclosures,
+ * Sheet panels) go by those edges: inside one, its places; past its edge, the container around it.
+ * Where edges coincide (the last section of a Sheet panel ends where the panel does), each further
+ * STEP past them leaves one more container, so every one of those places can be reached; the
+ * innermost one is reached from inside. Lists go by indentation, as their items show it: at a
+ * list's end, left of its markers (LEAVE past where its items start) the blocks leave it for the list around it (after the
+ * item holding it), and a step right of the item above they go under that item (`items`: every
+ * block dragged is a list item). Blocks of other kinds (a paragraph, an image…: notion-lite's children
+ * of a list item) go under an item too: among the blocks it holds, below its own line, or a step
+ * right of the item above the place (over a list, or right after one: the deepest item so reached),
+ * at the end of what it holds. `dragged(unit)`: a unit being dragged (`count` of them), which
+ * nothing goes into.
+ *
+ * With `aside(unit)` (the blocks may go into a column; whether a unit may: asideOf), beside a block they go beside it, the
+ * two side by side in a new row of columns, and at a column's edge into a new column there:
+ * { aside: { target, side } } or { aside: { row, index, whole } } (`whole`: the dragged blocks are
+ * all of one column of that row, which then moves instead). `edge`: the window's left edge, in page
+ * coordinates, which the band left of a block keeps some of.
+ */
+export function resolveDrop(tree, x, y, { takes, dragged = () => false, count = 1, items = false, aside = false, edge = -Infinity }) {
+  const px = overHandle(tree, Math.min(Math.max(x, tree.rect.left + 1), tree.rect.right - 1), y);
+  const holds = (rect, at = px) => at >= rect.left && at <= rect.right && y >= rect.top && y <= rect.bottom;
+  const units = (box) => box.children.filter((child) => child.type === "unit" && !dragged(child));
+  // An item's box for what it holds ("nest") takes list items through its lists only; other blocks
+  // go into it among the blocks it holds, below the item's own line.
+  const open = (node) => node.type === "box" && takes(node) && (node.kind !== "nest" || (!items && units(node).length > 0 && y >= units(node)[0].rect.top - SAME));
+  const placeIn = (box) => {
+    const here = units(box);
+    const rects = here.map((unit) => unit.rect);
+    const slot = here.findIndex(({ rect }) => (box.row
+      ? y < rect.top || (y <= rect.bottom && (alone(box, rects, rect) ? y < (rect.top + rect.bottom) / 2 : px < (rect.left + rect.right) / 2))
+      : y < (rect.top + rect.bottom) / 2));
+    return Math.max(headOf(box, here), slot < 0 ? here.length : slot);
+  };
+
+  // The boxes and units around the point, from the page down, never into a dragged block. `flush`: a
+  // point left of the blocks of a detail card or a Sheet panel counts as at their left edge, as one left
+  // of the page's does: the padding between leaves them no less at that side.
+  const around = (flush) => {
+    const nodes = [tree];
+    let at = flush ? Math.max(px, tree.content.left + 1) : px;
+    for (let node = tree, next; (next = node.children.find((child) => holds(child.rect, at) && !(child.type === "unit" && dragged(child)))); node = next) {
+      nodes.push(next);
+      if (flush && next.type === "box" && next.role === "root") at = Math.max(at, next.content.left + 1);
+    }
+    return nodes;
+  };
+  const path = around(false);
+  if (path.some((node) => node.type === "box" && node.role === "tabs" && !takes(node))) return null; // resting there switches Sheets
+  if (aside) {
+    const beside = asideOf(around(true), x, dragged, count, aside, edge);
+    if (beside) return beside;
+  }
+  let box = path.findLast(open) ?? null;
+  let slot = box ? placeIn(box) : 0;
+
+  // Edges just passed: the containers that take the blocks inside the blocks either side of the
+  // place and end (above it) or start (below it) flush with that block, when the point has left
+  // that edge by at most NEAR.
+  const outer = box ?? path.findLast((node) => node.type === "box");
+  const near = units(outer);
+  const at = box ? slot : placeIn(outer);
+  const passed = [];
+  const collect = (unit, side) => {
+    const flush = unit && (side === "bottom" ? unit.rect.bottom : unit.rect.top);
+    const visit = (node, depth) => {
+      for (const inner of node.children) {
+        if (inner.type === "unit") {
+          if (!dragged(inner)) visit(inner, depth);
+          continue;
+        }
+        const edge = side === "bottom" ? inner.rect.bottom : inner.rect.top;
+        const past = side === "bottom" ? y - edge : edge - y;
+        if (open(inner) && Math.abs(edge - flush) <= SAME && px >= inner.rect.left && px <= inner.rect.right && past > 0 && past <= NEAR) passed.push({ box: inner, edge, side, depth });
+        visit(inner, depth + 1);
+      }
+    };
+    if (unit) visit(unit, 0);
+  };
+  collect(near[at - 1], "bottom");
+  collect(near[at], "top");
+  if (passed.length > 0) {
+    const nearest = passed.reduce((best, entry) => (Math.abs(y - entry.edge) < Math.abs(y - best.edge) ? entry : best));
+    const stack = passed.filter((entry) => entry.side === nearest.side && Math.abs(entry.edge - nearest.edge) <= SAME).sort((a, b) => b.depth - a.depth);
+    let chosen = null;
+    if (stack.every((entry) => entry.box.kind === "list")) {
+      // Lists by indentation: the deepest whose markers start left of the pointer, else the outermost.
+      chosen = (stack.find((entry) => itemsLeft(entry.box) - LEAVE <= px) ?? stack.at(-1)).box;
+    } else {
+      const levels = [...stack.slice(1).map((entry) => entry.box), ...(box ? [box] : [])];
+      if (levels.length > 0) chosen = levels[Math.min(Math.floor(Math.abs(y - nearest.edge) / STEP), levels.length - 1)];
+    }
+    if (chosen && chosen !== box) {
+      box = chosen;
+      slot = nearest.side === "bottom" ? units(box).length : headOf(box, units(box));
+    }
+  }
+  if (!box) return null;
+
+  // At a list's end, left of its markers (past where its items start, by LEAVE): the list around it, after the item holding it
+  // (on the path: that list, the item, the item's own box for lists, this list). Having left it,
+  // they do not go back under that item.
+  let left = false;
+  for (let index = path.indexOf(box); box.kind === "list" && index >= 4 && slot === units(box).length && px < itemsLeft(box) - LEAVE; index = path.indexOf(box)) {
+    const [list, item, lists] = [path[index - 4], path[index - 3], path[index - 2]];
+    if (lists.kind !== "nest" || !open(list)) break;
+    box = list;
+    slot = units(box).indexOf(item) + 1;
+    left = true;
+  }
+  const others = units(box);
+  const above = others[slot - 1];
+  const nest = items ? (!left && box.kind === "list" && !box.row && above?.nestable && px > above.start + NEST ? above : null) : held(path, box, above);
+
+  // Where they are already: next to each other in this box, all of them, at this place.
+  const all = box.children.filter((child) => child.type === "unit");
+  const first = all.findIndex(dragged);
+  const run = first < 0 ? 0 : all.slice(first).findIndex((child) => !dragged(child));
+  const same = !nest && first >= 0 && (run < 0 ? all.length - first : run) === count && slot === first;
+  const line = nest && !items ? { left: nest.start, top: nest.rect.bottom + 2, right: nest.rect.right, bottom: nest.rect.bottom + 5 } : lineOf(box, others, slot, nest, y);
+  return { box: box.el, slot, nest: nest?.el ?? null, same, line, halo: nest ? nest.rect : box === tree ? null : box.rect };
+
+  // The item blocks of other kinds go under (at the end of what it holds), or null: over a list the
+  // pointer is in (deeper than `box`), the item above the pointer; else, right after a list, its last
+  // item; then, down the last lists they hold, the deepest item whose text starts a step (NEST) left
+  // of the pointer. Only an item that takes them (`nestable`, its box taking every kind dragged).
+  function held(path, box, above) {
+    const list = path.findLast((node) => node.type === "box" && node.kind === "list");
+    const inside = list && path.indexOf(list) > path.indexOf(box);
+    let item = inside ? units(list)[placeIn(list) - 1] : above?.kind === "list" ? lastItem(above) : null;
+    let found = null;
+    while (item && px > item.start + NEST) {
+      if (item.nestable && takes({ kind: "nest", el: item.el })) found = item;
+      const nested = item.children.find((child) => child.type === "box" && child.kind === "nest");
+      const last = nested ? units(nested).at(-1) : null;
+      item = last?.kind === "list" ? lastItem(last) : null;
+    }
+    return found;
+  }
+  function lastItem(listUnit) {
+    const box = listUnit.children.find((child) => child.type === "box" && child.kind === "list");
+    return box ? units(box).at(-1) ?? null : null;
+  }
+}
+
+// Beside a block (the units on `path`, from the page down, at height y): in the innermost row of
+// columns on it, a new column at the row's ends or left of a column's handle; elsewhere the innermost
+// block of a flow that may stand in a column, beside it. The line stands down that side, the block (or
+// the column beside the line) tinted. Null where the drop goes between blocks as ever.
+const FLOW_ROLES = new Set(["root", "flow"]);
+function asideOf(path, x, dragged, count, fits, edge) {
+  const down = (rect, at) => ({ left: at - 1.5, top: rect.top - 8, right: at + 1.5, bottom: rect.bottom + 8 });
+  const leftOf = (left) => x >= left - REACH && x < Math.max(Math.min(left, path[0].content.left) - OUT, edge + FIRST);
+  const row = path.findLast((node) => node.type === "unit" && isRow(node) && !dragged(node));
+  if (row) {
+    const box = row.children.find((child) => child.type === "box");
+    const columns = box?.children.filter((child) => child.type === "unit") ?? [];
+    if (columns.length === 0) return null;
+    // The column whose blocks are all of those dragged (and only they), which moves instead.
+    const own = (column) => column.children.flatMap((inner) => inner.children.filter((child) => child.type === "unit"));
+    const whole = columns.find((column) => own(column).length === count && own(column).every(dragged)) ?? null;
+    const after = columns.findIndex(({ rect }, at) => {
+      const next = columns[at + 1]?.rect;
+      return next ? x >= next.left - OUT - BETWEEN && x < next.left - OUT
+        : x > rect.left + (2 * (rect.right - rect.left)) / 3 && x > rect.right - SIDE && x < rect.right + REACH;
+    });
+    const index = leftOf(columns[0].rect.left) ? 0 : after < 0 ? -1 : after + 1;
+    if (index < 0) return null;
+    const from = whole ? columns.indexOf(whole) : -1;
+    const same = from >= 0 && (index === from || index === from + 1);
+    if (!whole && columns.length >= MAX_COLUMNS) return null;
+    const at = index === 0 ? columns[0].rect.left - 6 : index === columns.length ? columns.at(-1).rect.right + 6 : (columns[index - 1].rect.right + columns[index].rect.left) / 2;
+    return { box: box.el, slot: 0, nest: null, same, aside: { row: row.el, index, whole: whole?.el ?? null }, line: down(row.rect, at), halo: columns[Math.max(0, index - 1)].rect };
+  }
+  // The innermost block of a flow, one that may stand in a column and holds none of those dragged.
+  let target = null;
+  for (let index = 1; index < path.length; index++) {
+    const node = path[index];
+    if (node.type !== "unit") continue;
+    if (FLOW_ROLES.has(path[index - 1].role)) target = node;
+  }
+  const holdsDragged = (node) => node.children.some((inner) => inner.children.some((unit) => dragged(unit) || holdsDragged(unit)));
+  if (!target || !fits(target) || holdsDragged(target)) return null;
+  const { rect } = target;
+  const side = x > rect.left + (2 * (rect.right - rect.left)) / 3 && x <= rect.right + REACH ? "right"
+    : leftOf(rect.left) ? "left" : null;
+  if (!side) return null;
+  const box = path[path.indexOf(target) - 1];
+  return { box: box.el, slot: 0, nest: null, same: false, aside: { target: target.el, side }, line: down(rect, side === "right" ? rect.right + 6 : rect.left - 6), halo: rect };
+}
+
+// The line showing a place: across the box between two of its blocks (under an item, from its
+// text, where the markers of a list in it would stand; before the first and after the last, from
+// no further out than the box's edge, which a divider's band may pass), down between two blocks of
+// a row or at the end of the row the pointer is in (across a block alone in its row of a box whose
+// rows wrap, above or below it), or along the bottom of an empty box.
+function lineOf(box, others, slot, nest, y) {
+  // A box's lead (a highlight block's icon) is no block to fall between: the line spans the blocks
+  // after it, from the icon's right (notion-lite's).
+  const head = headOf(box, others);
+  slot -= head;
+  const rects = others.slice(head).map((unit) => unit.rect);
+  if (rects.length === 0) {
+    // An empty box: across its content, inside its padding (an empty Sheet panel's 16px).
+    const { left, top, right, bottom } = box.content;
+    const at = bottom > top ? (top + bottom) / 2 : box.rect.bottom - 6;
+    return { left, top: at - 1.5, right, bottom: at + 1.5 };
+  }
+  if (box.row) {
+    const next = rects[slot];
+    const previous = rects[slot - 1];
+    const sameRow = next && previous && Math.abs(next.top - previous.top) < 4;
+    const endOfRow = previous && !sameRow && (!next || (y >= previous.top && y <= previous.bottom));
+    const rect = sameRow || !endOfRow ? next ?? previous : previous;
+    // Before or after a block alone in its row of a box whose rows wrap (or with the pointer between
+    // its row and the next, either of the two alone): across it, between the rows (halfway to the row
+    // above or below), or just past it at the box's start or end.
+    const between = previous && next && !sameRow && y > previous.bottom && y < next.top;
+    const lone = sameRow ? null : [rect, ...(between ? [previous, next] : [])].find((each) => alone(box, rects, each));
+    if (lone) {
+      const at = lone === previous ? (next ? (previous.bottom + next.top) / 2 : previous.bottom + 6) : previous ? (previous.bottom + next.top) / 2 : next.top - 6;
+      return { left: lone.left, top: at - 1.5, right: lone.right, bottom: at + 1.5 };
+    }
+    const at = sameRow ? (previous.right + next.left) / 2 : endOfRow ? previous.right + 8 : next.left - 8;
+    return { left: at - 1.5, top: rect.top, right: at + 1.5, bottom: rect.bottom };
+  }
+  const left = nest ? nest.start : Math.min(...rects.map((rect) => rect.left));
+  const right = Math.max(...rects.map((rect) => rect.right));
+  const at = slot === 0 ? Math.max(rects[0].top, box.rect.top) - 6
+    : slot === rects.length ? Math.min(rects.at(-1).bottom, box.rect.bottom) + 6
+    : (rects[slot - 1].bottom + rects[slot].top) / 2;
+  return { left, top: at - 1.5, right, bottom: at + 1.5 };
+}

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

@@ -0,0 +1,335 @@
+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).
+
+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.
+ */
+export function createDrag({ info, selection, struct, say, closeMenu, schedule }) {
+  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; { 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(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();
+    targets = ordered([targets].flat().filter(alive));
+    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 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)) {
+      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("最后面")));
+      return false;
+    }
+    moveTo(targets, targets[0].parentElement, delta < 0 ? withLeads(neighbour)[0] : neighbour.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)));
+    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 targets = picked.length > 1 && picked.includes(target) ? [...picked] : [target];
+    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(),
+      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, x, y, { owner: target, alive });
+    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");
+    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 (分栏).
+    const aside = !tabs && [...kinds].every((kind) => accepts("column", kind)) && ((unit) => accepts("column", unit.kind));
+    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 } = 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}放进新的一栏", named(targets)) : t("已把{0}并排分栏", named(targets))));
+      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;
+    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("（原来的外层已空，一并去掉）") : ""));
+  }
+
+  // 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] : []; },
+  };
+}