@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/page/panel.mjs

@@ -0,0 +1,65 @@
+import { Z } from "../../shared/layers.mjs";
+
+// The editor's bottom panels: the conflicts' (conflicts.mjs, left) and the lost texts' (notices.mjs,
+// right) are the same card, and the bar of the Agent's changes (changes/bar.mjs, in the middle) is its
+// buttons in a row: a small muted head with a red dot, items under it, the reader's words as
+// a quote, one filled primary button, the rest outlined or, looking only, quiet text. No notice covers
+// one: while one stands, the toast stands above it (notices.mjs, and the workbench's, told the room).
+
+const PANELS = ".ge-conflicts:not([hidden]), .ge-panel, .ge-changes:not([hidden])";
+
+/**
+ * How far from the window's bottom the highest bottom panel shown reaches, 0 with none shown: what a
+ * notice stands above.
+ */
+export function panelRoom() {
+  let room = 0;
+  for (const panel of document.querySelectorAll(PANELS)) {
+    const { top, height } = panel.getBoundingClientRect();
+    if (height > 0) room = Math.max(room, Math.round(innerHeight - top));
+  }
+  return room;
+}
+
+// Who hears that the room the panels take may have changed: as a panel comes, changes size (cards
+// added or answered), is hidden (收起) and goes.
+const hearing = new Set();
+const told = () => hearing.forEach((listener) => listener());
+const sizes = typeof ResizeObserver === "function" ? new ResizeObserver(told) : null;
+
+/** `listener` told whenever the room the bottom panels take may have changed. */
+export const onPanels = (listener) => hearing.add(listener);
+
+/** A bottom panel put on the page. */
+export function panelShown(panel) {
+  sizes?.observe(panel);
+  told();
+}
+
+/** A bottom panel taken off the page. */
+export function panelGone(panel) {
+  sizes?.unobserve(panel);
+  told();
+}
+export const PANEL_STYLE = `
+  :is(.ge-conflicts, .ge-panel) { position: fixed; bottom: 16px; z-index: ${Z.panel}; box-sizing: border-box; width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 600px); overflow: auto; border-radius: 10px; background: var(--ge-bg); color: var(--ge-tx); box-shadow: var(--ge-shadow); font: 13px/1.55 var(--doc-sans-font, var(--doc-font, system-ui, sans-serif)); }
+  .ge-conflicts { left: 16px; }
+  .ge-panel { right: 16px; }
+  .ge-conflicts[hidden] { display: none; }
+  :is(.ge-conflicts-head, .ge-panel-head) { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 10px 4px 14px; background: var(--ge-bg); color: var(--ge-tx2); font-size: 12px; font-weight: 500; }
+  :is(.ge-conflicts-head, .ge-panel-head)::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ge-red); }
+  :is(.ge-conflicts-head, .ge-panel-head) span { flex: 1; }
+  :is(.ge-conflict, .ge-panel-item) { padding: 10px 14px 12px; }
+  :is(.ge-conflict, .ge-panel-item) + :is(.ge-conflict, .ge-panel-item) { border-top: 1px solid var(--ge-edge); }
+  :is(.ge-conflict, .ge-panel-item) p { margin: 0; font-weight: 500; }
+  :is(.ge-conflict, .ge-panel-item) p + .ge-version { margin-top: 6px; }
+  :is(.ge-conflicts, .ge-panel) .ge-version { margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--ge-quote); overflow-wrap: anywhere; }
+  :is(.ge-conflicts, .ge-panel) .ge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
+  :is(.ge-conflicts, .ge-panel) button { height: 28px; padding: 0 10px; border: 1px solid var(--ge-edge); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; }
+  :is(.ge-conflicts, .ge-panel) button:hover:not(:disabled) { background: var(--ge-hover); }
+  :is(.ge-conflicts, .ge-panel) button[data-primary] { border-color: transparent; background: var(--ge-accent); color: #fff; }
+  :is(.ge-conflicts, .ge-panel) button[data-primary]:hover:not(:disabled) { background: var(--ge-accent-hover); }
+  :is(.ge-conflicts, .ge-panel) button[data-quiet] { height: 24px; padding: 0 6px; border-color: transparent; color: var(--ge-tx2); font-weight: 400; }
+  :is(.ge-conflicts, .ge-panel) button[data-quiet]:hover:not(:disabled) { color: var(--ge-tx); background: transparent; }
+  :is(.ge-conflicts, .ge-panel) button:disabled { opacity: .45; cursor: default; }
+`;

package/browser/editor/page/placement.mjs

@@ -0,0 +1,58 @@
+// Where a card or panel that stands by something stands: notion-lite's ui/popup.js rule (an origin, a
+// side, an alignment and a gap; put on the other side where it does not fit; kept inside the window),
+// the one placement every such card here takes: the link card, the formula editor, the cell bar, the
+// format bar, the tooltips and the icon picker's popups (emoji-picker/support.mjs). The block menu
+// (menu.mjs place) and what follows the pointer (hints, the size label of resize/) have rules of
+// their own. What stands for text (the format bar, a pasted address's 选择视图) stands by its last
+// character: textAnchor, besideText.
+
+const TEXT_GAP_X = 4; // its corner this far right of the text's last character
+const TEXT_GAP_Y = 8; // and this far below its line (or above the text)
+const TEXT_MARGIN = 12; // this far inside the window at the most
+
+/**
+ * The left and top (window px, not rounded) of a box of `size` ({ width, height }) by `origin` (a
+ * rect), `margin` px inside the window at the most. placement: "bottom" or "top" (below or above
+ * the origin), "right" or "left" (beside it); a box that does not fit on the side asked for goes to
+ * the opposite one if it fits there (if it fits on neither, it stays on the one asked for), inside the
+ * window less its scrollbars. align:
+ * along that side, the box's "start", "center" or "end" with the origin's. gap: px between them. x:
+ * for "bottom" and "top", where the box's left edge is wanted in place of the alignment's (the format
+ * bar stands at the selection's last character).
+ */
+export function placeBox(origin, { width, height }, { placement = "bottom", align = "start", gap = 0, margin = 8, x } = {}) {
+  // The window less its scrollbars (a box kept inside innerWidth would run under the page's scrollbar).
+  const root = globalThis.document?.documentElement;
+  const innerWidth = root?.clientWidth || globalThis.innerWidth;
+  const innerHeight = root?.clientHeight || globalThis.innerHeight;
+  const clamp = (value, space) => Math.max(margin, Math.min(value, space - margin));
+  const alignX = () => x ?? (align === "center" ? origin.left + origin.width / 2 - width / 2 : align === "end" ? origin.right - width : origin.left);
+  const alignY = () => (align === "center" ? origin.top + origin.height / 2 - height / 2 : align === "end" ? origin.bottom - height : origin.top);
+  if (placement === "bottom" || placement === "top") {
+    const below = origin.bottom + gap;
+    const above = origin.top - gap - height;
+    const fitsBelow = below + height <= innerHeight - margin;
+    const fitsAbove = above >= margin;
+    const top = placement === "bottom" ? (fitsBelow || !fitsAbove ? below : above) : (fitsAbove || !fitsBelow ? above : below);
+    return { left: clamp(alignX(), innerWidth - width), top: clamp(top, innerHeight - height) };
+  }
+  const right = origin.right + gap;
+  const beyond = origin.left - gap - width;
+  const fitsRight = right + width <= innerWidth - margin;
+  const fitsLeft = beyond >= margin;
+  const left = placement === "right" ? (fitsRight || !fitsLeft ? right : beyond) : (fitsLeft || !fitsRight ? beyond : right);
+  return { left: clamp(left, innerWidth - width), top: clamp(alignY(), innerHeight - height) };
+}
+
+/**
+ * Where text (a range) is to what stands for it: its last character (its last piece of a line), not
+ * the right edge of its widest line, and the top of its first line, for when there is no room below.
+ */
+export function textAnchor(range) {
+  const box = range.getBoundingClientRect();
+  const end = [...range.getClientRects()].filter((rect) => rect.width > 0 && rect.height > 0).at(-1) ?? box;
+  return { right: end.right, bottom: end.bottom, top: box.top };
+}
+
+/** The left and top of a box of `size` standing for text (`anchor`: textAnchor): below and right of its last character, above its first line when it does not fit below. */
+export const besideText = (anchor, size) => placeBox(anchor, size, { x: anchor.right + TEXT_GAP_X, gap: TEXT_GAP_Y, margin: TEXT_MARGIN });

package/browser/editor/page/post.mjs

@@ -0,0 +1,41 @@
+import { t, told } from "../../shared/i18n/index.mjs";
+// The page's one way to talk to the preview server: a POST of JSON with the report's token
+// (postJson: the request, a network error rejecting as fetch does; postAnswer: its answer read, a
+// failure an answer too, what the editor's requests use), and what goes over it: what a refusal
+// says (failure) and how an upload carries a file (blobBase64).
+
+/** POST `body` as JSON to `route` with `token` (the map's); resolves with the Response. */
+export const postJson = (route, token, body, { keepalive = false } = {}) => fetch(route, {
+  method: "POST",
+  headers: { "Content-Type": "application/json", "X-Gallery-Token": token },
+  body: JSON.stringify(body),
+  keepalive,
+});
+
+/**
+ * POST `body` as JSON to `route` and read the answer, never throwing: a server that cannot be
+ * reached answers `{ ok: false, reason: "offline" }`, one that answers with no JSON `{ ok: false }`.
+ */
+export async function postAnswer(route, token, body) {
+  let response;
+  try {
+    response = await postJson(route, token, body);
+  } catch {
+    return { ok: false, reason: "offline" };
+  }
+  return response.json().catch(() => ({ ok: false }));
+}
+
+/**
+ * What a refused request says: the server's own words in the UI's language (told: its template with its
+ * values, or its whole message), else that it could not be reached, else `fallback`.
+ */
+export const failure = (answer, fallback) => told(answer) ?? (answer.reason === "offline" ? t("连不上本地服务") : fallback);
+
+/** A blob's bytes as base64, how an upload carries them. */
+export const blobBase64 = (blob) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(String(reader.result).split(",")[1]);
+  reader.onerror = () => reject(reader.error);
+  reader.readAsDataURL(blob);
+});

package/browser/editor/page/present-links.mjs

@@ -0,0 +1,50 @@
+import { t } from "../../shared/i18n/index.mjs";
+import { addressOn, elsewhere, fromFile, isPageAddress, mayBePage, pageAddress, workbenchHash } from "../../shared/page-address.mjs";
+import { inTrash, linkedPages, pageLinks } from "../../shared/page-links.mjs";
+import { PROTOCOL, VERSION } from "../../shared/session.mjs";
+
+// The links of a page shown in 演示视图 (?present: src/server/routes.mjs), which has no editor and whose
+// frame the presentation holds (src/workbench/app/features/present/). A link to a document or a block
+// of one goes there in the frame and stays a reader's: its page with ?present, the block found by the
+// kit (kit/runtime/reveal.js); followed as it stands it would come to the document's page with the
+// editor on it, and a web address would take the frame away from the presentation, so that goes to
+// a new tab. An address of this computer is asked of the list as the click is taken, for only the
+// list knows the titles and what is gone: a document that is not there leaves the presentation where
+// it is, with a word through it (the workbench's notice), and on another port what the list does not
+// hold (addressOn) is another program's, a web address like any. What the kit or the browser does with
+// a click stays theirs: an anchor, a link to save, a link of a target of its own, any click with a key
+// held.
+
+const own = pageAddress(location.href)?.slug ?? null;
+const openTab = (address) => window.open(address, "_blank", "noopener");
+const read = (route) => fetch(`/__gallery/workspace/${route}`).then((answer) => answer.json()).catch(() => null);
+
+function go({ slug, block }) {
+  const fragment = block ? `#${encodeURIComponent(block)}` : "";
+  if (slug !== own) location.assign(`/generated/${slug}.html?present${fragment}`);
+  else if (block) dispatchEvent(new CustomEvent("doc-jump-request", { detail: { hash: fragment } })); // the kit's jump, a step of the history as a link #<block id> is
+}
+
+function sayGone(name, { trash = [] } = {}) {
+  const text = inTrash(trash, name) ? t("这个页面已删除。") : t("没有找到这个页面。");
+  window.parent.postMessage({ protocol: PROTOCOL, v: VERSION, type: "notice", slug: own, text }, location.origin);
+}
+
+async function follow(address) {
+  if (!mayBePage(address)) return void openTab(address);
+  const listed = await read("outline");
+  const place = addressOn(address, listed?.reports ? pageLinks(linkedPages(listed.reports)) : null, location.origin);
+  if (place) go(place);
+  else if (isPageAddress(address) && !elsewhere(address, location.origin)) sayGone(pageAddress(address)?.slug ?? workbenchHash(address), listed ?? undefined);
+  else openTab(address);
+}
+
+document.addEventListener("click", (event) => {
+  if (event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+  const link = event.target.closest?.("a[*|href]");
+  if (!link || link.matches("[download], [target], [*|href^='#']")) return;
+  const address = fromFile(link.href.baseVal ?? link.getAttribute("href"), own, location.origin);
+  if (!address || !/^https?:/.test(address)) return;
+  event.preventDefault();
+  follow(address);
+});

package/browser/editor/page/quiet.mjs

@@ -0,0 +1,48 @@
+import { t } from "../../shared/i18n/index.mjs";
+
+// What 减少通知 leaves out (the workbench's 设置: shared/preferences.mjs quietNotices; notices.mjs
+// say() asks routine() of every notice but an error): the notices of the everyday operations, which
+// users of Notion and Feishu know and notion-lite says nothing of (its snackbar speaks only of a
+// copy to the clipboard, a failure, an upload, an import or an export):
+//   - what was just done, which the page shows: moved, deleted, pasted, turned into, inserted,
+//     formatted, resized, colored, indented, folded… (every notice that offers Ctrl+Z is one);
+//   - how to go on: a selection's keys, a drag's, the format the next letters take;
+//   - a copy made with Ctrl+C, a save asked for with Ctrl+S (the page saves by itself), a drag or
+//     a resize cancelled or ending where it began, and a key that had nothing to do (Tab on a list's
+//     first item, Shift+Tab on its outermost, a block moved past the end of its row).
+// What still shows is what the reader must act on or would not know otherwise: errors, a save that
+// failed or is held, conflicts, text that could not be put back, something refused with the reason
+// ("这里不能粘贴块。"), what an action did that the page does not show (a link copied from a menu, a
+// web page that refused a frame shown as a bookmark, lines pasted into one, a detail card no longer
+// kept, a page whose preview could not be read) and the result of a long one (an export done).
+// Each is matched in the UI's language, its {0}… standing for anything.
+
+// Notices that offer Ctrl+Z but say what the page does not show: they still show.
+const TOLD = () => [
+  t("入口已移除：页面上没有地方能打开这张详情卡片了 · Ctrl+Z 撤销"),
+  `${t("暂不支持获取该网站的预览信息")}{0}`, // links/views.mjs UNREAD: the title or icon of a link left as its address
+];
+
+const ROUTINE = () => [
+  t("{0} · Ctrl+Z 撤销"), // whatever was just done
+  t("已新建分区 · 标题、分割线都可以按需加"),
+  t("已复制 {0} · 在要放的块里按 Ctrl+V 粘贴到它后面"), t("已复制 {0} 格"),
+  t("已保存。"), t("{0}。", t("标题已更新")),
+  t("已取消调整。"), t("已取消移动。"), t("位置没有变化。"),
+  t("已选中 {0} 块 · Delete 删除 · 拖动手柄一起移动 · Esc 取消"), t("已选中{0} · Delete 删除{1} · Esc 取消"),
+  t("已选中{0} · Delete 删除 · Esc 取消{1}"), t("已选中这一块的文字 · 再按 {0} 选中{1}"), t("已选中这一块的文字"), // Ctrl+A (select-all/)
+  t("正在移动{0} · 拖到要放的位置后松开 · 停在选项卡上切换，停在折叠块标题上展开 · Esc 取消"),
+  t("接着打的字：{0} · 再按一次取消"), t("接着打的字照旧"),
+  t("链接：{0}"), t("链接已移除。"),
+  t("这一项上面没有同级的项，不能再缩进。"), t("这一项已经在最外层。"), t("选中的项上面没有同级的项，不能再缩进。"), t("选中的项已经在最外层。"),
+  t("{0}已经在{1}。"), t("这里只有{0}；可以拖动手柄移到别处。"),
+];
+
+const patternOf = (said) => new RegExp(`^${said.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\\\{\d+\\\}/g, "[\\s\\S]*?")}$`);
+let patterns = null;
+
+/** Whether `text` (in the UI's language) is a routine notice, one 减少通知 leaves out. */
+export function routine(text) {
+  patterns ??= { told: TOLD().map(patternOf), routine: ROUTINE().map(patternOf) };
+  return !patterns.told.some((pattern) => pattern.test(text)) && patterns.routine.some((pattern) => pattern.test(text));
+}

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

@@ -0,0 +1,327 @@
+import { Z } from "../../../shared/layers.mjs";
+import { SPAN } from "../../../shared/media.mjs";
+import { CENTERED } from "../../components/figure/index.mjs";
+import { RESIZABLE, RESIZABLE_AT, SIZES } from "../../components/registry.mjs";
+import { scrollHeight } from "../../components/table/index.mjs";
+import { cancelOnEscape, endsGesture, gestureLock } from "../gesture.mjs";
+import { kept } from "../kept.mjs";
+import { note, own } from "../overlays.mjs";
+import { addStyle, element, mount } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// Resizing chart cards and tables in the preview ("Sizes" in the kit's styles/sizes.css). With the pointer on the
+// right edge of a card or table, or on its bottom edge (a chart's plot height, a table's scroll
+// height), the cursor changes; dragging shows a blue line where the edge goes and the size that
+// makes, and letting go applies it as one undo step (Esc cancels). Widths are shares of the width
+// the block stands in: the reading width, or its column's. A card's width snaps to the middle and
+// to the end; a centered card grows on both sides. A table's
+// width moves its own right end by as much as the pointer moves, also when the table is wider than
+// its frame and scrolls in it; it snaps to the width it stands in, and past it the table is wider than
+// the text and scrolls sideways in its frame, which stays at that width. (The columns of a row
+// are resized by the gaps between them: columns/.)
+// A table of a dozen rows or fewer has no bottom edge to drag. A code block's bottom edge sets the
+// height of its frame: shorter than its code, the code scrolls inside it, and the edge snaps to the
+// height that shows all of it (no height of its own). Letting go where the drag started changes
+// nothing. Anything that ends the press another way (the capture lost, the window losing the
+// focus, the page hidden) cancels it; the lines and the label belong to the drag (overlays.mjs). A
+// code block's bottom edge has no label: the line alone (where it snaps, the status line says after).
+
+const STYLE = `
+  ${gestureLock("data-ge-resize=\"x\"", { cursor: "ew-resize" })}
+  ${gestureLock("data-ge-resize=\"y\"", { cursor: "ns-resize" })}
+  .ge-resize-line { position: fixed; left: 0; top: 0; z-index: ${Z.guide}; border-radius: 2px; background: rgb(151 197 241); pointer-events: none; }
+  .ge-resize-label { position: fixed; left: 0; top: 0; z-index: ${Z.label}; padding: 2px 7px; border-radius: 5px; background: var(--doc-accent, #2678d8); color: #fff; font: 12px/18px var(--doc-sans-font, var(--doc-font, system-ui, sans-serif)); white-space: nowrap; pointer-events: none; }
+`;
+const GRAB = { inside: 3, outside: 8 }; // how near an edge the pointer takes it, inside and outside the block (px)
+const SNAP = 14; // px
+const MIN_WIDTH = 160; // px: the least a card's edge is dragged to (a table's is its columns' floors)
+// The sizes (name and range) are each component's description's (registry SIZES): the same ones the
+// server checks a size by.
+const range = (kind, name) => SIZES[kind][name];
+// The size a kind's bottom edge sets (`height` among its sizes), and that size's least: a code block's
+// frame is about a line and a half.
+const heightOf = (kind) => Object.keys(SIZES[kind]).find((name) => SIZES[kind][name].height);
+const heightRange = (kind) => range(kind, heightOf(kind));
+
+/**
+ * units: Map(id -> { kind }) from the edit map. active(): whether resizing may start.
+ * look(element, { sizes }, select): the editor's undoable change of sizes. say(text): the status line.
+ * owns(node): whether a table's right and bottom edges are the table tools' (table/widths.mjs: a
+ * click arms one, a drag then is this tool's, `startTable`).
+ */
+export function createResize({ units, active, look, say, owns = () => false }) {
+  addStyle(STYLE);
+  let hover = null; // { node, axis } under the pointer
+  let drag = null;
+
+  // Blocks made or converted on the page carry their kind (a code block made from a paragraph).
+  const kindOf = (node) => node.getAttribute("data-ge-unit-kind") ?? units.get(Number(node.getAttribute("data-ge-unit")))?.kind;
+  const codeOf = (node) => node.querySelector(":scope > pre");
+  // A card's chart: the svg its host holds, straight in it or beside controls of its own (a part).
+  const plot = (node) => node.querySelector(".doc-chart > svg") ?? node.querySelector(".doc-chart svg");
+  const sizeOf = (node, name) => node.style.getPropertyValue(name).trim() || null;
+  // The page's gutter in full width (--doc-wide-gutter) while editing: the room the handle takes
+  // beside the blocks (--ge-edge-room, handle/; the tool works only while editing).
+  const gutter = () => parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--ge-edge-room")) || 0;
+  const SHORT = 12; // a table with this many rows or fewer shows them all: no height to set
+
+  // The blocks that may resize (`resizable`) of the open modal dialog if there is one, else of the page: kept
+  // between moves (kept.mjs), as looking them up and measuring each on every move cost up to 1.8ms a
+  // move on a long report.
+  const blocks = kept(() => {
+    const scope = document.querySelector("dialog[open]") ?? document.querySelector("main");
+    return [...(scope?.querySelectorAll(RESIZABLE_AT) ?? [])];
+  });
+  // One of them the reader can reach now: visible, of a kind that resizes, not folded or inert.
+  const reachable = (node) => RESIZABLE.has(kindOf(node)) && node.getClientRects().length > 0 && !node.closest("[inert]") && !node.matches(".doc-code--folded");
+
+  // Which edge of which block the pointer is on: the right one of a card or table, or the bottom
+  // one of a table, a card with a chart or a code block that is (or may be) shorter than its code.
+  // Only a block whose edges the pointer is within the grab of is looked at any further.
+  function edgeAt(x, y) {
+    for (const node of blocks()) {
+      const rect = node.getBoundingClientRect();
+      const near = x >= Math.min(rect.left, rect.right - GRAB.inside) && x <= rect.right + GRAB.outside && y >= Math.min(rect.top, rect.bottom - GRAB.inside) && y <= rect.bottom + GRAB.outside;
+      if (!near || !reachable(node)) continue;
+      const kind = kindOf(node);
+      if (kind !== "code" && !(kind === "table" && owns(node)) && y >= rect.top && y <= rect.bottom && x >= rect.right - GRAB.inside && x <= rect.right + GRAB.outside) return { node, axis: "x" };
+      if (!(x >= rect.left && x <= rect.right && y >= rect.bottom - GRAB.inside && y <= rect.bottom + GRAB.outside)) continue;
+      const code = kind === "code" ? codeOf(node) : null;
+      const tall = kind === "table" ? !owns(node) && node.querySelectorAll(":scope > table > tbody > tr").length > SHORT
+        : kind === "code" ? Boolean(code) && (code.scrollHeight > heightRange(kind).min * 2 || sizeOf(node, heightOf(kind)) !== null) : plot(node);
+      if (tall) return { node, axis: "y" };
+    }
+    return null;
+  }
+
+  function setHover(next) {
+    hover = next;
+    const axis = next?.axis ?? null;
+    if (document.documentElement.getAttribute("data-ge-resize") === axis) return; // the same on every move along an edge
+    if (axis) document.documentElement.setAttribute("data-ge-resize", axis);
+    else document.documentElement.removeAttribute("data-ge-resize");
+  }
+
+  function contentBox(container) {
+    const rect = container.getBoundingClientRect();
+    const style = getComputedStyle(container);
+    const left = rect.left + parseFloat(style.borderLeftWidth) + parseFloat(style.paddingLeft);
+    const right = rect.right - parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight);
+    return { left, right, width: right - left };
+  }
+
+  // ---------- widths ----------
+
+  // The share of the width it stands in a right edge at x gives; a centered card's is twice its half.
+  function shareAt(x) {
+    const { rect, box, centered } = drag;
+    if (centered) return (2 * (x - (box.left + box.right) / 2)) / box.width;
+    return (x - rect.left) / box.width;
+  }
+
+  // A table's width goes by how far the pointer moved: the table's own right
+  // end moves that much, also when the table is wider than its frame and scrolls in it (its end
+  // then lies past the frame's edge, or at it when scrolled to the end). It snaps back where it
+  // started and to the reading width; past that it is wider than the text, as far as the window goes.
+  // A table narrower than the text never scrolls: it goes no narrower than its columns' readable
+  // floors (tables.js leaves them on the wrapper).
+  function tableWidthAt(x) {
+    const { box, table } = drag;
+    const far = Math.max(box.right, document.documentElement.clientWidth - gutter());
+    const width = (at) => table.width + (at - table.press);
+    const narrowest = table.press - (table.width - Math.max(MIN_WIDTH, table.floor));
+    let edge = Math.min(Math.max(x, narrowest), far);
+    const snaps = [{ x: table.press, label: t("原宽度"), keep: true }, { x: table.press + (box.width - table.width), label: t("铺满正文") }];
+    const snap = snaps.find((candidate) => Math.abs(candidate.x - edge) <= SNAP);
+    if (snap) edge = snap.x;
+    if (snap?.keep) return { edge, label: snap.label, value: drag.before };
+    // Rounded up, so the frame is never narrower than where it was let go (at the floors, say).
+    const share = Math.ceil(Math.max(range("table", SPAN).min, width(edge) / box.width) * 1000) / 1000;
+    const label = snap?.label ?? (share > 1 ? t("超宽表 · 表宽 {0}px，横向滚动", Math.round(width(edge)))
+      : edge <= narrowest + 0.5 ? t("最窄 · {0}%", Math.round(share * 100)) : `${Math.round(share * 100)}%`);
+    return { edge, label, value: Math.abs(share - 1) < 0.005 ? "1" : String(Math.min(share, range("table", SPAN).max)) };
+  }
+
+  // Where the edge may go and where it snaps: back where it started (no change), the middle (a
+  // card), the end of the line or the reading width.
+  function widthAt(x) {
+    const { node, kind, rect, box, centered } = drag;
+    if (kind === "table") return tableWidthAt(x);
+    const center = (box.left + box.right) / 2;
+    const far = box.right;
+    const near = centered ? center + MIN_WIDTH / 2 : rect.left + MIN_WIDTH;
+    const fromStart = Math.abs(rect.left - box.left) < 2;
+    const snaps = [{ x: rect.right, label: t("原宽度"), keep: true }];
+    const middle = centered ? center + box.width / 4 : box.left + box.width / 2;
+    if (kind === "figure" && middle > near) snaps.push({ x: middle, label: centered ? t("半宽 · 居中") : fromStart ? t("半宽") : t("到中线") });
+    snaps.push({ x: box.right, label: fromStart || centered ? t("全宽") : t("占满本行") });
+    let edge = Math.min(Math.max(x, near), far);
+    const snap = snaps.find((candidate) => Math.abs(candidate.x - edge) <= SNAP);
+    if (snap) edge = snap.x;
+    if (snap?.keep) return { edge, label: snap.label, value: drag.before };
+    const share = Math.round(Math.max(range(kind, SPAN).min, shareAt(edge)) * 1000) / 1000;
+    const whole = Math.abs(share - 1) < 0.005;
+    const label = snap?.label ?? `${Math.round(share * 100)}%${centered ? t(" · 居中") : ""}`;
+    // A card at the whole width is the default.
+    const value = whole ? (kind === "figure" && !centered ? null : "1") : String(Math.min(share, range(kind, SPAN).max));
+    return { edge, label, value };
+  }
+
+  // ---------- heights ----------
+
+  // The plot's height as drawn: at least 280px wide, scaled down in a narrower card, so the
+  // height set is the viewBox's, not the one shown.
+  const drawnHeight = (svg) => svg.viewBox?.baseVal?.height || svg.getBoundingClientRect().height;
+
+  // A chart card: the plot's height, never below what the chart needs; back where it started
+  // changes nothing. A table: its scroll area,
+  // at most all its rows. A code block: its frame (a code card's header aside), at most its whole
+  // code, which it snaps to.
+  function heightAt(y) {
+    const { node, kind, rect, before } = drag;
+    if (kind === "code") {
+      const code = codeOf(node);
+      const header = rect.height - code.getBoundingClientRect().height;
+      const whole = rect.height + (code.scrollHeight - code.clientHeight); // all its lines, no scrolling
+      const height = Math.min(Math.max(y - rect.top, Math.min(whole, header + heightRange(kind).min)), whole);
+      if (before !== null && Math.abs(rect.top + height - rect.bottom) <= SNAP / 2) return { edge: rect.bottom, label: t("原高度"), value: before };
+      if (whole - height <= SNAP) return { edge: rect.top + whole, label: t("显示全部代码"), value: null };
+      const frame = Math.round(height - header);
+      return { edge: rect.top + header + frame, label: t("高 {0}px · 其余滚动查看", frame), value: `${frame}px` };
+    }
+    if (kind === "figure") {
+      const svg = plot(node);
+      const drawn = drawnHeight(svg);
+      const scale = svg.getBoundingClientRect().height / drawn || 1;
+      const floor = 160; // the least a chart is drawn at (a softer floor than the one a size is checked by)
+      if (Math.abs(rect.bottom - y) <= SNAP) return { edge: rect.bottom, label: t("原高度"), value: before };
+      // Level with a card beside it (in another column of its row): the bottoms meet.
+      const beside = drag.beside.find((bottom) => Math.abs(bottom - y) <= SNAP);
+      const height = Math.round(Math.min(Math.max(drawn + ((beside ?? y) - rect.bottom) / scale, floor), heightRange(kind).max));
+      const edge = rect.bottom + (height - drawn) * scale;
+      return { edge, label: beside !== undefined && Math.abs(edge - beside) < 1.5 ? t("与旁边对齐 · 图表高 {0}px", height) : t("图表高 {0}px", height), value: `${height}px` };
+    }
+    const all = node.scrollHeight + (node.offsetHeight - node.clientHeight);
+    let height = Math.min(Math.max(y - rect.top, heightRange(kind).min), all);
+    if (Math.abs(rect.top + height - rect.bottom) <= SNAP / 2) return { edge: rect.bottom, label: t("原高度"), value: drag.before };
+    if (height >= all - 2) {
+      const fits = all <= scrollHeight(node); // the default scroll area shows them all
+      return { edge: rect.top + all, label: t("显示全部行"), value: fits ? null : "none" };
+    }
+    height = Math.round(height);
+    return { edge: rect.top + height, label: t("高 {0}px", height), value: `${height}px` };
+  }
+
+  // The bottoms of the cards standing beside a card: alone in another column of its row of columns.
+  function besideBottoms(node) {
+    const column = node.parentElement;
+    const row = column?.classList.contains("doc-column") ? column.parentElement : null;
+    if (!row?.classList.contains("doc-columns")) return [];
+    return [...row.children].filter((other) => other !== column && other.classList.contains("doc-column"))
+      .flatMap((other) => [...other.children].filter((card) => card.matches("figure.doc-figure") && card.getClientRects().length > 0))
+      .map((card) => card.getBoundingClientRect().bottom);
+  }
+
+  // ---------- dragging ----------
+
+  function start(event, { node, axis }) {
+    const kind = kindOf(node);
+    const name = axis === "x" ? SPAN : heightOf(kind);
+    const before = sizeOf(node, name);
+    const rect = node.getBoundingClientRect();
+    drag = {
+      node, axis, kind, name, before, rect,
+      box: contentBox(node.parentElement),
+      // A card's height snaps level with the cards beside it: the bottoms of those in the other columns of its row.
+      beside: axis === "y" && kind === "figure" ? besideBottoms(node) : [],
+      centered: axis === "x" && kind === "figure" && node.classList.contains(CENTERED),
+      // A table's whole width (past its frame when it scrolls sideways), where the press was, and
+      // whether it is scrolled to its end.
+      table: axis === "x" && kind === "table" ? {
+        width: Math.max(rect.width, node.scrollWidth + (node.offsetWidth - node.clientWidth)),
+        floor: Number(node.dataset.docMinWidth) || 0,
+        press: event.clientX,
+        atEnd: node.scrollLeft + node.clientWidth >= node.scrollWidth - 2,
+      } : null,
+      label: kind === "code" ? null : element("div", { class: "ge-resize-label" }),
+      result: null,
+    };
+    const session = drag;
+    session.lines = (session.centered ? [0, 1] : [0]).map(() => element("div", { class: "ge-resize-line" }));
+    for (const part of [session.label, ...session.lines].filter(Boolean)) mount(own(part, "resize", { owner: node, alive: () => drag === session }));
+    note("resize", `start ${axis}`);
+    document.documentElement.setPointerCapture?.(event.pointerId);
+    update(event.clientX, event.clientY);
+  }
+
+  function update(x, y) {
+    const { axis, rect, box, lines, label } = drag;
+    drag.result = axis === "x" ? widthAt(x) : heightAt(y);
+    const { edge } = drag.result;
+    if (axis === "x") {
+      const mirror = 2 * ((box.left + box.right) / 2) - edge;
+      lines.forEach((line, index) => Object.assign(line.style, {
+        width: "2px", height: `${Math.round(rect.height)}px`,
+        transform: `translate(${Math.round((index ? mirror : edge) - 1)}px, ${Math.round(rect.top)}px)`,
+      }));
+      if (label) label.style.transform = `translate(${Math.round(Math.min(edge + 10, innerWidth - label.offsetWidth - 8))}px, ${Math.round(Math.max(8, y - 30))}px)`;
+    } else {
+      Object.assign(lines[0].style, { width: `${Math.round(rect.width)}px`, height: "2px", transform: `translate(${Math.round(rect.left)}px, ${Math.round(edge - 1)}px)` });
+      if (label) label.style.transform = `translate(${Math.round(Math.min(x + 12, innerWidth - label.offsetWidth - 8))}px, ${Math.round(Math.min(edge + 8, innerHeight - 28))}px)`;
+    }
+    if (label) label.textContent = drag.result.label;
+  }
+
+  function finish(commit) {
+    if (!drag) return;
+    const { node, axis, kind, name, before, lines, label, result, table } = drag;
+    note("resize", commit ? "released" : "cancelled");
+    drag = null;
+    lines.forEach((line) => line.remove());
+    label?.remove();
+    setHover(null);
+    if (commit && result && look(node, { sizes: { [name]: result.value } }, null)) {
+      say(t("已调整{0}{1}：{2} · Ctrl+Z 撤销", kind === "figure" ? t("卡片") : kind === "code" ? t("代码块") : t("表格"), axis === "x" ? t("宽度") : t("高度"), result.label));
+      // Scrolled to its end, a table stays so: its new end shows at the frame's edge, ready for the
+      // next drag (after tables.js has laid it out again, on the next frame).
+      if (table?.atEnd) requestAnimationFrame(() => requestAnimationFrame(() => { node.scrollLeft = node.scrollWidth; }));
+    }
+  }
+
+  // ---------- events ----------
+
+  document.addEventListener("pointermove", (event) => {
+    if (drag) return update(event.clientX, event.clientY);
+    const busy = !active() || event.buttons || document.documentElement.hasAttribute("data-ge-drag") || event.target?.closest?.("[data-doc-dev]");
+    setHover(busy ? null : edgeAt(event.clientX, event.clientY));
+  }, { passive: true, capture: true });
+  document.addEventListener("pointerdown", (event) => {
+    if (drag || event.button !== 0 || !active() || event.target?.closest?.("[data-doc-dev]")) return;
+    const at = edgeAt(event.clientX, event.clientY);
+    if (!at) return;
+    event.preventDefault(); // no caret, no text selection
+    event.stopImmediatePropagation(); // nor the editor's reaction to a press on the page
+    start(event, at);
+  }, true);
+  document.addEventListener("pointerup", () => { if (drag) finish(true); }, true);
+  // After pointerup the drag is over already; any other way it ends, it is cancelled (gesture.mjs).
+  endsGesture({ active: () => Boolean(drag), cancel: () => finish(false) });
+  cancelOnEscape({ active: () => Boolean(drag), cancel: () => { finish(false); say(t("已取消调整。")); } });
+
+  return {
+    /** A table's width ("x", from its right edge) or scroll height ("y", from its bottom edge) dragged, the press `event` on it (the table tools' armed edge). */
+    startTable(event, node, axis = "x") {
+      if (drag || !active()) return false;
+      setHover({ node, axis });
+      start(event, { node, axis });
+      return true;
+    },
+    /** Stop any resizing. */
+    hide() {
+      if (drag) finish(false);
+      setHover(null);
+    },
+    /** The editor's UI nodes to keep in the top layer when a modal dialog opens. */
+    get nodes() { return drag ? [...drag.lines, drag.label].filter(Boolean) : []; },
+  };
+}