@heycys/gallery 0.1.0 → 0.1.2

package/browser/editor/page/table/pictures.mjs

@@ -0,0 +1,299 @@
+import { UPLOAD_LIMITS, mediaUrl, sizeLimit } from "../../../shared/media.mjs";
+import { cellPicture, pictureFile } from "../../components/table/index.mjs";
+import { ownHTML } from "../core.mjs";
+import { gestureLock } from "../gesture.mjs";
+import { drawAt, drawBox, layerOf } from "../overlay-layer.mjs";
+import { onSettle, own } from "../overlays.mjs";
+import { blobBase64 } from "../post.mjs";
+import { addStyle, element } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 单元格里的图片 (the user's, 2026-11-09: no image block, a light one; Markdown tables hold pictures):
+// an <img> amid a table cell's words, a picture of the document's folder (components/table/ cellPicture; the
+// file takes it as source/blocks.mjs cellPictureProblem says, the kit lays it out: table.css). notion-
+// lite has none; this is the plainest that works, flat:
+// - A press on one selects it (the selection around it, a 2px blue frame over it, no caret): Delete
+//   or Backspace then takes it out, a typed character takes its place, Esc puts the caret after it;
+//   the arrows go past it as past a character (the browser's: an <img> in an editable text is one).
+// - A gray bar at its right edge (the image block's handle) under the pointer or while it is
+//   selected: dragged, the picture's width in pixels (its height by its ratio), at least MIN_WIDTH,
+//   at most its table's frame, written as its width attribute; one undo step on letting go, Esc
+//   putting it back.
+// - Where pictures come from (clipboard/, table/cells.mjs): a picture file pasted into a cell (a
+//   screenshot, a copied picture) sent to the document's folder as an image block's (fromFiles); the
+//   pictures of cells pasted (another program's table, a Markdown table, the page's own cells of
+//   another document) each made a file of the folder first (resolve: one of the folder as it is,
+//   another document's, a data: one and a web one copied in, the server downloading a web one as it
+//   does an image block's link), then put in by what pastedLines makes of each (maker): a picture of
+//   no file a link to it (a web one) or its alt words.
+
+const MIN_WIDTH = 16;
+const MAX_PICTURES = 50; // the pictures a paste copies in at most (each a download)
+const WIDTH = /^[1-9]\d{0,3}$/;
+const WEB = /^https?:\/\/[^\s"<>]+$/i;
+const DATA = /^data:image\/[a-z0-9.+-]+;base64,/i;
+// A file of a document's folder as the preview serves it (a copy of the page's HTML), or as a cell's text writes it.
+const SERVED = /^(?:https?:\/\/[^/]+)?\/__gallery\/edit\/asset\/([^/?#]+)\/(assets\/[^/?#]+)$/;
+const FOLDER_FILE = /^assets\/[A-Za-z0-9][A-Za-z0-9._-]{0,80}$/;
+const CELL = '[data-ge-kind="cell"]';
+// The name of a picture's file in its address (its last part, its escapes read).
+const nameOf = (src) => {
+  const name = src.split(/[?#]/)[0].split("/").pop() || src;
+  try {
+    return decodeURIComponent(name);
+  } catch {
+    return name;
+  }
+};
+
+const STYLE = `
+  [data-ge-editing] ${CELL}[contenteditable="true"] img { cursor: default; }
+  .ge-layer > .ge-cellpic-handle { pointer-events: auto; }
+  .ge-cellpic-frame { box-sizing: border-box; border: 2px solid var(--ge-accent); border-radius: 2px; pointer-events: none; }
+  /* The image block's handle (image/page.mjs): a plain gray bar, no border. */
+  .ge-cellpic-handle { display: flex; align-items: center; justify-content: center; width: 12px; cursor: col-resize; }
+  .ge-cellpic-handle::after { content: ""; width: 4px; height: 32px; max-height: 70%; border-radius: 4px; background: light-dark(rgb(55 53 47 / 35%), rgb(255 255 255 / 38%)); transition: background 120ms ease; }
+  .ge-cellpic-handle:hover::after, html[data-ge-cellpic-resize] .ge-cellpic-handle::after { background: light-dark(rgb(55 53 47 / 60%), rgb(255 255 255 / 62%)); }
+  ${gestureLock("data-ge-cellpic-resize", { cursor: "col-resize" })}
+`;
+
+// The report this page shows (its main's data-doc-id: its folder's name).
+const thisReport = () => document.querySelector(".doc-page")?.dataset.docId ?? null;
+
+/**
+ * active(): whether the tools may act. recordStep(host, before): a text step of a text block
+ * (history.mjs). say: the status line. upload(kind, body): POST /__gallery/edit/upload, the server's
+ * answer (an Error when it fails).
+ */
+export function createCellPictures({ active, recordStep, say, upload }) {
+  addStyle(STYLE);
+  let hovered = null; // the picture under the pointer
+  let picked = null; // the picture selected
+  let drag = null; // its edge dragged: { img, host, x, start, before, had }
+  const frame = element("div", { class: "ge-cellpic-frame", "data-doc-dev": "" });
+  const handle = element("div", { class: "ge-cellpic-handle", "data-doc-dev": "" });
+  // The picture they are drawn for: the frame the selected one's (or the dragged one's), the bar any of them.
+  const framed = () => drag?.img ?? picked;
+  const barred = () => drag?.img ?? picked ?? hovered;
+  own(frame, "cell picture", { alive: () => Boolean(framed()?.isConnected) });
+  own(handle, "cell picture", { alive: () => Boolean(barred()?.isConnected) });
+  // The cell of the picture drawn for, watched: a picture taken out (Delete, undo, someone else's
+  // words merged) takes them away at once, before the page draws again.
+  const watch = new MutationObserver(() => {
+    if (!barred()?.isConnected) draw();
+  });
+
+  // A picture of a cell the reader writes in, and that cell; or null.
+  const pictureAt = (node) => {
+    const img = node?.closest?.("img");
+    const host = img?.closest(CELL);
+    return img && host?.getAttribute("contenteditable") === "true" && host.closest("main") && !host.closest("[data-ge-lock], [inert]") && pictureFile(img) ? { img, host } : null;
+  };
+
+  function draw() {
+    if (picked && !picked.isConnected) picked = null;
+    if (hovered && !hovered.isConnected) hovered = null;
+    const img = barred();
+    watch.disconnect();
+    if (!img?.isConnected || !active()) {
+      frame.remove();
+      handle.remove();
+      return;
+    }
+    watch.observe(img.closest(CELL) ?? img.parentNode, { childList: true, subtree: true });
+    const layer = layerOf(img);
+    const rect = img.getBoundingClientRect();
+    if (img === framed()) drawBox(frame, layer, rect);
+    else frame.remove();
+    const origin = layer.getBoundingClientRect();
+    handle.style.height = `${Math.max(20, Math.round(rect.height))}px`;
+    drawAt(handle, layer, rect.right - origin.left - 2, rect.top - origin.top + Math.min(0, (rect.height - 20) / 2));
+  }
+
+  // Whether the selection is the picture alone (a press on it, or the browser's own).
+  const around = (img) => {
+    const selection = getSelection();
+    if (!selection.rangeCount || !img.parentNode) return false;
+    const range = selection.getRangeAt(0);
+    const at = [...img.parentNode.childNodes].indexOf(img);
+    return range.startContainer === img.parentNode && range.endContainer === img.parentNode && range.startOffset === at && range.endOffset === at + 1;
+  };
+  function pick({ img, host }) {
+    if (document.activeElement !== host) host.focus({ preventScroll: true });
+    const range = document.createRange();
+    range.selectNode(img);
+    getSelection().removeAllRanges();
+    getSelection().addRange(range);
+    picked = img;
+    draw();
+  }
+
+  // ---------- the pointer ----------
+
+  document.addEventListener("pointermove", (event) => {
+    if (drag) return;
+    const at = pictureAt(event.target);
+    const next = at ? at.img : event.target === handle ? hovered : null;
+    if (next !== hovered) {
+      hovered = next;
+      draw();
+    }
+  }, { passive: true });
+  // A press on a picture selects it, before the cells' tools (a drag between cells) and the caret hear it.
+  window.addEventListener("pointerdown", (event) => {
+    const at = event.button === 0 && active() ? pictureAt(event.target) : null;
+    if (!at) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    pick(at);
+  }, true);
+  window.addEventListener("mousedown", (event) => {
+    if (event.button === 0 && active() && (pictureAt(event.target) || event.target === handle)) event.preventDefault(); // no caret, no drag of the picture
+  }, true);
+  document.addEventListener("selectionchange", () => {
+    if (picked && !(picked.isConnected && around(picked))) {
+      picked = null;
+      draw();
+    }
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || event.isComposing) return;
+    if (drag) return void (event.preventDefault(), event.stopImmediatePropagation(), end(false));
+    if (!picked || !around(picked)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const range = document.createRange();
+    range.setStartAfter(picked);
+    range.collapse(true);
+    getSelection().removeAllRanges();
+    getSelection().addRange(range);
+  }, true);
+  for (const type of ["scroll", "resize"]) window.addEventListener(type, () => { if (drag || picked || hovered) draw(); }, { capture: true, passive: true });
+  onSettle(draw);
+
+  // ---------- its width ----------
+
+  handle.addEventListener("pointerdown", (event) => {
+    const img = picked ?? hovered;
+    const host = img?.closest(CELL);
+    if (event.button !== 0 || !host || !active()) return;
+    event.preventDefault();
+    event.stopPropagation();
+    handle.setPointerCapture(event.pointerId);
+    drag = { img, host, x: event.clientX, start: img.getBoundingClientRect().width, before: ownHTML(host), had: img.getAttribute("width") };
+    document.documentElement.setAttribute("data-ge-cellpic-resize", "");
+  });
+  handle.addEventListener("pointermove", (event) => {
+    if (!drag) return;
+    const room = drag.host.closest(".doc-table-wrap")?.clientWidth || 2000; // never wider than its table's frame
+    drag.img.setAttribute("width", String(Math.round(Math.max(MIN_WIDTH, Math.min(room, drag.start + event.clientX - drag.x)))));
+    draw();
+  });
+  function end(keep) {
+    if (!drag) return;
+    const { img, host, before, had } = drag;
+    drag = null;
+    document.documentElement.removeAttribute("data-ge-cellpic-resize");
+    if (!keep) {
+      if (had === null) img.removeAttribute("width");
+      else img.setAttribute("width", had);
+    } else if (img.getAttribute("width") !== had) recordStep(host, before);
+    draw();
+  }
+  handle.addEventListener("pointerup", () => end(true));
+  handle.addEventListener("pointercancel", () => end(false));
+
+  // ---------- pictures pasted ----------
+
+  const sent = async (blob, name) => (await upload("image", { name, type: blob.type, data: await blobBase64(blob) })).path;
+
+  /**
+   * Picture files pasted into a cell (a screenshot, a copied picture), each sent to the document's
+   * folder as an image block's (10 MB at most): the cell's pictures, in order, those that could not
+   * go said.
+   */
+  async function fromFiles(files) {
+    const pictures = [...files].filter((file) => /^image\//.test(file.type));
+    if (pictures.some((file) => file.size > UPLOAD_LIMITS.image)) say(t("图片太大（最多 {0}）。", sizeLimit("image")), "error");
+    const made = await Promise.all(pictures.filter((file) => file.size <= UPLOAD_LIMITS.image).map(async (file) => {
+      try {
+        return cellPicture(document, await sent(file, file.name || `image.${file.type.split("/")[1] ?? "png"}`), { alt: "" });
+      } catch (error) {
+        say(t("{0}：{1}", t("无法上传这张图片"), error.message), "error");
+        return null;
+      }
+    }));
+    return made.filter(Boolean);
+  }
+
+  // A pasted picture's address as a file of this document's folder ({ path }), or null.
+  async function fileOf(src, from, here) {
+    const served = SERVED.exec(src);
+    const [report, file] = served ? [decodeURIComponent(served[1]), served[2]] : FOLDER_FILE.test(src) ? [from ?? here, src] : [null, null];
+    if (file && report === here) return { path: file };
+    const copied = async (address, name) => {
+      const response = await fetch(address);
+      const blob = response.ok ? await response.blob() : null;
+      return blob && /^image\//.test(blob.type) && blob.size <= UPLOAD_LIMITS.image ? { path: await sent(blob, name) } : null;
+    };
+    if (file && report) return copied(mediaUrl("asset", encodeURIComponent(report), file), file.slice("assets/".length));
+    if (DATA.test(src)) return copied(src, "image");
+    if (WEB.test(src)) return { path: (await upload("image", { url: src })).path };
+    return null;
+  }
+
+  /**
+   * The pictures of pasted cells (`htmls`: their inline HTML) as files of this document's folder: a
+   * Map of each address to { path } (assets/<file>), or null where none could be had. `from`: the
+   * report the page's own cells came from (their assets/ that report's).
+   */
+  async function resolve(htmls, from = null) {
+    const addresses = new Set();
+    const template = document.createElement("template");
+    for (const html of htmls) {
+      if (!html.includes("<img")) continue;
+      template.innerHTML = html;
+      for (const img of template.content.querySelectorAll("img[src]")) addresses.add(img.getAttribute("src"));
+    }
+    const found = new Map();
+    if (addresses.size === 0) return found;
+    const here = thisReport();
+    const list = [...addresses];
+    if (list.some((src) => !(SERVED.exec(src)?.[1] === here || (FOLDER_FILE.test(src) && (from ?? here) === here)))) say(t("正在下载…"));
+    await Promise.all(list.slice(0, MAX_PICTURES).map(async (src) => found.set(src, await fileOf(src, from, here).catch(() => null))));
+    return found;
+  }
+
+  /**
+   * What pastedLines makes of a pasted picture (`found`: resolve's answer): the cell's picture, its
+   * alt and width kept; else a web one a link to it (`links`), any other its alt words (undefined:
+   * an element that is no picture).
+   */
+  const maker = (found, links = true) => (img) => {
+    if (img.localName !== "img") return undefined;
+    const src = img.getAttribute("src") ?? "";
+    const alt = img.getAttribute("alt") ?? "";
+    const width = img.getAttribute("width") ?? "";
+    const file = found.get(src);
+    if (file) return cellPicture(document, file.path, { alt, width: WIDTH.test(width) ? Number(width) : null });
+    if (links && WEB.test(src)) {
+      const link = document.createElement("a");
+      link.setAttribute("href", src);
+      link.textContent = alt || nameOf(src);
+      return link;
+    }
+    return alt ? document.createTextNode(alt) : null;
+  };
+
+  return {
+    fromFiles, resolve, maker,
+    /** The tools' nodes (kept in the top layer with a modal dialog). */
+    get nodes() { return [frame, handle].filter((node) => node.isConnected); },
+    /** Take them away (the page stops editing). */
+    hide() {
+      hovered = picked = null;
+      if (drag) end(false);
+      draw();
+    },
+  };
+}

package/browser/editor/page/table/views.mjs

@@ -0,0 +1,150 @@
+import { TABLE } from "../../components/kit.mjs";
+import { insertRow, moveRow, removeRows, tableState } from "../../components/table/page.mjs";
+import { tableOf } from "../../components/table/grid.mjs";
+import { ownHTML } from "../core.mjs";
+import { menuEntry, viewKeys } from "../page-objects.mjs";
+import { CHART_SOURCE, TABLE_READERS, VIEW_FROM, nextChartKey } from "../../../shared/table-chart.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+import { TABLE_ICONS } from "./icons.mjs";
+
+// The views of a table (docs/editor.md, "Table views"; the plan's 阶段 4): an instance of a custom
+// block whose needs hold "tables", bound to a table of the document by the key its frame carries
+// (shared/table-chart.mjs VIEW_FROM, the key a chart drawn from a table reads it by), reads the table's
+// rows (the kit's context.table()) and changes them only by asking: a doc-table-intent the kit puts on
+// the instance (runtime/kernel.js), which these tools answer at once, made as the table's own tools make
+// a change, so that a view has no commit, undo or conflict of its own:
+//
+//   set     one cell's words: a text step of that cell (history.mjs recordStep), its commit a cell's text
+//           as typing's is, merged word by word with someone else's change of the cell (source/merge.mjs);
+//   move    a row put before or after another, the cells it names set in the same step (a card dropped
+//           in another column: its status and its place);
+//   add     a row put in after another or last, its cells' words those it names;
+//   remove  a row taken out (never the last of the body, as the tools' 删除);
+//   check   nothing: answered as the others would be (the kit's table().canEdit()), so that a view of a
+//           table these tools do not manage shows it read-only;
+//
+// move, add and remove are the table tools' operations (components/table/page.mjs moveRow, insertRow,
+// removeRows) in one undo step each (index.mjs change), their commit the table's operation, which a
+// change someone else made to the table meanwhile holds back as a conflict with its card, as any. Only a
+// table these tools manage (GRID: written as the kit writes one) and with no merged cell takes them: a
+// view of any other is read-only, as it is in an export (the kit asks nothing there). Its rows of data
+// are those after its header row: the head's rows, or with no head its body's first row, which a view
+// reads its columns' names from; no intent puts a row there or takes that one.
+//
+// 视图 › of a table's block menu (menuRow) lists the custom blocks that read tables and that the
+// document's menus would offer (their `readsTables` row of the custom blocks' menu variants, which follows
+// the 组件列表 switches; page-objects.mjs viewKeys: no other menu lists them, as one put in unbound only
+// says it has no table) and puts one in right after the table bound to it, in one undo step: the table's key
+// where it names this table (the first frame carrying it, as the kit and the checks read a key), or a new
+// one (the first of t1, t2 … the page does not hold) put on its frame in that step (a table made from "/"
+// has none; the second of two an Agent wrote with one key is not the one it names). The commit writes
+// both, and the server makes sure of the key against the file (source/chart-keys.mjs relinkMade); a key
+// it gives the pair anew the page follows, its undo steps too (page/commit.mjs apply, history.mjs rekeyed).
+
+/**
+ * active(): whether the page edits now. change(unit, mutate, said, touched): the table tools' one undo
+ * step (index.mjs). tableAt(node): the table unit these tools manage that a node is in. recordStep(host,
+ * before): a text step of a text block (history.mjs). insertBelow(unit, key, { attributes, done }): a
+ * block of the menu's `key` put in below a block in one undo step, `attributes` ([element, names]) recorded
+ * with it and `done(made)` run in it on the new block (editor.mjs insertBelow). drawn(): the tools drawn
+ * again (a row taken out).
+ */
+export function createViews({ active, change, tableAt, recordStep, insertBelow, drawn = () => {} }) {
+  const merged = (rows) => rows.some((row) => [...row.cells].some((cell) => cell.rowSpan !== 1 || cell.colSpan !== 1));
+  const writable = (cell) => cell?.getAttribute("contenteditable") === "true";
+  const holds = (cell, text) => cell.textContent === text && cell.childElementCount === 0;
+
+  // What a view asks (`detail` of doc-table-intent: kernel.js tableView), made, or refused (false).
+  function run({ table, op, row = null, before = null, after = null, cells = [] }) {
+    if (!active() || !table?.isConnected) return false;
+    const unit = tableAt(table);
+    if (!unit || tableOf(unit) !== table) return false;
+    const state = tableState(unit);
+    if (merged(state.rows) || !Array.isArray(cells) || !cells.every(([column, text]) => Number.isInteger(column) && column >= 0 && column < state.columns && typeof text === "string")) return false;
+    // A view's table().canEdit(): whether an intent of this table would be taken now, nothing changed.
+    if (op === "check") return true;
+    // Its rows of data: after the header a view reads its names from (the head, else the body's first row).
+    const all = state.rows;
+    const data = all.slice(Math.max(1, state.head?.rows.length ?? 0));
+    const ofData = (node) => data.includes(node);
+    const cellsOf = (target) => cells.map(([column]) => target.cells[column]);
+    if (op === "set") {
+      if (!ofData(row) || cells.length !== 1) return false;
+      const [[column, text]] = cells;
+      const cell = row.cells[column];
+      if (!writable(cell)) return false;
+      if (holds(cell, text)) return true;
+      const was = ownHTML(cell);
+      cell.textContent = text;
+      recordStep(cell, was);
+      return true;
+    }
+    if (op === "move") {
+      const target = before ?? after;
+      if (!ofData(row) || (target && !ofData(target)) || !cellsOf(row).every(writable)) return false;
+      const from = all.indexOf(row);
+      const rest = all.filter((node) => node !== row);
+      const to = !target || target === row ? from : before ? rest.indexOf(before) : rest.indexOf(after) + 1;
+      if (to === from && cells.every(([column, text]) => holds(row.cells[column], text))) return true;
+      return change(unit, () => {
+        if (to !== from && moveRow(unit, from, to) === false) return false;
+        for (const [column, text] of cells) row.cells[column].textContent = text;
+        return true;
+      }, null, cellsOf(row)) !== null;
+    }
+    if (op === "add") {
+      if (after && !ofData(after)) return false;
+      const at = after ? all.indexOf(after) + 1 : all.length;
+      return change(unit, () => {
+        const made = insertRow(unit, at);
+        for (const [column, text] of cells) if (made.cells[column]) made.cells[column].textContent = text;
+        return made;
+      }, null) !== null;
+    }
+    if (op === "remove") {
+      if (!ofData(row)) return false;
+      const at = all.indexOf(row);
+      const done = change(unit, () => removeRows(unit, at, at), null) !== null;
+      drawn();
+      return done;
+    }
+    return false;
+  }
+  document.addEventListener("doc-table-intent", (event) => {
+    if (run(event.detail ?? {})) event.preventDefault();
+  });
+
+  // The frame a key names, as the kit reads it (runtime/table-reading.js frameOf) and the checks do: the
+  // first that carries it, none of a dev block's.
+  const frameOf = (key) => [...document.querySelectorAll(`[${CHART_SOURCE}]`)].find((node) => node.getAttribute(CHART_SOURCE) === key && node.matches(TABLE.frame) && !node.closest("[data-doc-dev]")) ?? null;
+  // A view of the block `key` put in right after `unit`, bound to its table: by its key where that names
+  // it, else by a new one put on it in the same step (a table made from "/" has none; one of two an Agent
+  // wrote with one key is not the one it names, the first: a view by it would read and change that one).
+  function insertView(unit, key) {
+    const own = unit.getAttribute(CHART_SOURCE);
+    const taken = new Set([...document.querySelectorAll([CHART_SOURCE, ...TABLE_READERS].map((name) => `[${name}]`).join(", "))].flatMap((node) => [CHART_SOURCE, ...TABLE_READERS].map((name) => node.getAttribute(name)).filter((value) => value !== null)));
+    const bound = own !== null && frameOf(own) === unit ? own : nextChartKey(taken);
+    insertBelow(unit, key, {
+      attributes: [[unit, [CHART_SOURCE]]],
+      done(made) {
+        made?.setAttribute(VIEW_FROM, bound);
+        if (bound !== own) unit.setAttribute(CHART_SOURCE, bound);
+      },
+    });
+  }
+
+  return {
+    /** The 视图 › row of a table's block menu: one for each custom block that reads tables, or null where there is none or the table cannot be read as rows (no frame, a merged cell). */
+    menuRow(unit) {
+      const keys = viewKeys();
+      if (keys.length === 0 || !unit.matches(TABLE.frame) || merged(tableState(unit).rows)) return null;
+      return {
+        label: t("视图"), icon: TABLE_ICONS.view,
+        submenu: () => viewKeys().map((key) => {
+          const row = menuEntry(key).variant;
+          return { label: row.label, icon: row.icon, run: () => insertView(unit, key) };
+        }),
+      };
+    },
+  };
+}

package/browser/editor/page/table/widths.mjs

@@ -2,6 +2,7 @@ import { SPAN } from "../../../shared/media.mjs";
 import { COLUMN_WIDTH, MIN_COLUMN_WIDTH, widthOf } from "../../components/table/index.mjs";
 import { relayout, tableParts, tableState } from "../../components/table/page.mjs";
 import { widthHolder } from "../../../shared/table-slots.mjs";
+import { GONE_WORDS } from "../core.mjs";
 import { gestureLock } from "../gesture.mjs";
 import { drawBox } from "../overlay-layer.mjs";
 import { hideTooltip, tooltip } from "../tooltip.mjs";
@@ -15,7 +16,7 @@ import { t } from "../../../shared/i18n/index.mjs";
 // index.mjs COLUMN_WIDTH; shared/table-slots.mjs widthHolder: a merged cell holds none), the kit laying the table
 // out at them (tables/layout.js manualLayout); the first
 // drag of a table the kit lays out gives every column the width it has then. A double click fits
-// the column to its widest cell, unwrapped. The menus' 一键调整列宽 takes the widths off (the kit's
+// the column to its widest cell, unwrapped. The menus' 自动调整列宽 takes the widths off (the kit's
 // again) or gives each column its width as it is; 均分列宽 shares the columns' room out equally.
 // Sizing columns takes the table's own width off (--doc-span: the table is as wide as its
 // columns again).
@@ -114,18 +115,22 @@ export function createColumnWidths(tools) {
     relayout(unit);
   }
 
-  // A column fitted to its widest cell of it alone, unwrapped (+1px).
+  // A column fitted to its widest cell of it alone, unwrapped (+1px): by its words, not the words an
+  // Agent took out that the page shows in it (changes/: out of the layout while it is measured).
   function fit(unit, index) {
     const { slots } = tableState(unit);
     const widest = Math.max(0, ...[...slots.places].filter(([, place]) => place.c === index && place.cols === 1).map(([cell]) => {
       const style = getComputedStyle(cell);
       const was = cell.style.whiteSpace;
+      const gone = [...cell.querySelectorAll(GONE_WORDS)];
+      for (const mark of gone) mark.hidden = true;
       cell.style.whiteSpace = "nowrap";
       const range = document.createRange();
       range.selectNodeContents(cell);
       const width = range.getBoundingClientRect().width + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
       cell.style.whiteSpace = was;
       if (cell.getAttribute("style") === "") cell.removeAttribute("style");
+      for (const mark of gone) mark.hidden = false;
       return width;
     }));
     const widths = shown(unit);
@@ -291,9 +296,9 @@ export function createColumnWidths(tools) {
     /** The edges plain again (the tools no longer stand by the table). */
     disarm() { armed = null; },
     get dragging() { return drag !== null; },
-    /** 一键调整列宽: the kit's widths, from the columns' words (the reader's taken off; sizing a column fixes them again). */
+    /** 自动调整列宽: the kit's widths, from the columns' words (the reader's taken off; sizing a column fixes them again). */
     fit(unit) {
-      if (set(unit, null, t("已一键调整列宽"))) return true;
+      if (set(unit, null, t("已自动调整列宽"))) return true;
       tools.say(t("列宽已按内容调整，无需再调。"));
       return false;
     },

package/browser/editor/page/text-select/index.mjs

@@ -1,9 +1,10 @@
 import { chipBox } from "../chip-fills.mjs";
 import { DETAILS, DIALOG } from "../../components/kit.mjs";
 import { boxRole } from "../../components/registry.mjs";
-import { UNIT, can, isHost, mergeInto, partsOf, removalTarget, takeOut, textEnd, unitElement } from "../core.mjs";
+import { UNIT, can, isEmpty, isHost, mergeInto, partsOf, removalTarget, takeOut, textEnd, unitElement } from "../core.mjs";
 import { atomOf, caretAt, caretAtOffset, dragPlace, editable, hosts, pointRange, select } from "../caret.mjs";
 import { edgeFollower } from "../edge-scroll.mjs";
+import { FOLDED } from "../folded.mjs";
 import { gapScore } from "../geometry.mjs";
 import { endsGesture, gestureLock } from "../gesture.mjs";
 import { joinCode } from "../marks.mjs";
@@ -21,8 +22,10 @@ import { t } from "../../../shared/i18n/index.mjs";
 // the window's edges), drawn with the CSS Custom Highlight API in the selection's own colors, the
 // browser's selecting held off meanwhile; back in that block, the browser's again. Shift+click in
 // another block selects from the caret to there.
-// Its text is that of body text, headings and list items (in quotes, highlight blocks, columns…).
-// A block holding none (a code block, a table, a file, an image, a formula block, a callout, a
+// Its text is that of body text, headings and list items (in quotes, highlight blocks, callouts, columns…),
+// and the page's title's, which a deletion takes its part of but never joins with the body's (notion-lite's
+// selection runs from its page title into the blocks; the user's: what is left of the body stays in the body).
+// A block holding none (a code block, a table, a file, an image, a formula block, a
 // divider…) is taken whole as it passes it, filled as a selected block is (selection/ mark), its
 // own text not marked: over one, an end of the selection stands before it or after it, as the drag
 // goes, and a press begun in one (its code, a cell) takes it whole once it has left it.
@@ -107,6 +110,10 @@ function lineStrips(texts, origin) {
 
 // The text blocks it takes text from, and a deletion joins: body text, headings, list items.
 const isText = (host) => isHost(host) && (host.getAttribute("data-ge-kind") ?? "flow") === "flow";
+// The page's title: text it takes too (drawn, copied, deleted), kept apart: a deletion leaves it what
+// stands outside the selection and joins nothing to it (remove).
+const isTitle = (host) => isHost(host) && host.getAttribute("data-ge-kind") === "title";
+const isPiece = (host) => isText(host) || isTitle(host);
 const textHosts = (unit) => [...unit.querySelectorAll("[data-ge-block], [data-ge-new]")].filter((node) => isHost(node) && isText(node));
 
 // The outermost block around `node` holding no text of the body (a code block, a table, a file…),
@@ -193,12 +200,12 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
   function pointAt(x, y, from) {
     const place = dragPlace([from.node, from.offset], x, y);
     const host = place && editable(place[0]);
-    if (host?.closest("main") && isText(host)) return { host, node: place[0], offset: place[1] };
+    if (host?.closest("main") && isPiece(host)) return { host, node: place[0], offset: place[1] };
     const whole = wholeOf(document.elementFromPoint(x, y));
     if (whole) return edge(whole, !from || before(from, edge(whole, false)));
     let best = null;
     let bestScore = null;
-    for (const each of hosts().filter((node) => node.closest("main") && isText(node))) {
+    for (const each of hosts().filter((node) => node.closest("main") && isPiece(node))) {
       const rect = each.getBoundingClientRect();
       // By height, then (level ones: columns side by side) by width; of nested ones, the innermost.
       const score = gapScore(rect, x, y);
@@ -219,7 +226,7 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
   // Where the selection starts, `focus` being its other end: the press's place in body text; begun
   // in a block taken whole (its code, a cell), that block's edge away from `focus`.
   function startOf(anchor, focus) {
-    if (isText(anchor.host)) return anchor;
+    if (isPiece(anchor.host)) return anchor;
     const whole = wholeOf(anchor.host) ?? unitElement(anchor.host);
     if (!whole) return anchor;
     const head = edge(whole, false);
@@ -242,7 +249,7 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
     // text it reaches: none when its text stands before the start (the selection begun in a block the
     // item holds) or after the end.
     const reaches = (host) => host === selection.start.host || host === selection.end.host || (range.isPointInRange(host, 0) && range.isPointInRange(host, textEnd(host)));
-    const texts = hosts().filter((host) => host.closest("main") && isText(host) && range.intersectsNode(host) && reaches(host) && !folded(host)).map((host) => {
+    const texts = hosts().filter((host) => host.closest("main") && isPiece(host) && range.intersectsNode(host) && reaches(host) && !folded(host)).map((host) => {
       const part = document.createRange();
       part.setStart(host, 0);
       part.setEnd(host, textEnd(host));
@@ -250,6 +257,20 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
       if (host === selection.end.host) part.setEnd(selection.end.node, selection.end.offset);
       return { host, range: part };
     });
+    // What a folded heading hides (fold/) between the ends goes with the selection, wherever in the
+    // heading's words it begins: its text blocks' text in full and its other blocks whole (below), as
+    // a deletion takes the blocks between the ends whole (unitsBetween), so a copy or a cut carries
+    // what the deletion takes. An end is never in what is hidden (hosts() are those shown), so what is
+    // hidden and in the range lies between the ends.
+    const hidden = [...document.querySelectorAll(`main [${FOLDED}] :is([data-ge-block], [data-ge-new]), main :is([data-ge-block], [data-ge-new])[${FOLDED}]`)]
+      .filter((host) => isHost(host) && isText(host) && range.intersectsNode(host) && !folded(host));
+    for (const host of hidden) {
+      const part = document.createRange();
+      part.setStart(host, 0);
+      part.setEnd(host, textEnd(host));
+      texts.push({ host, range: part });
+    }
+    if (hidden.length > 0) texts.sort((a, b) => (a.host.compareDocumentPosition(b.host) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
     const wholes = [...wholeClosed];
     for (const unit of document.querySelectorAll(`main :is(${UNIT})`)) {
       if (wholes.some((other) => other === unit || other.contains(unit))) continue;
@@ -348,7 +369,7 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
 
   // Drawn again over its text blocks turned into another type (`texts`: where its pieces are now, in
   // page order), as notion-lite's placeCaret(keep) keeps a selection; when one of them holds no text of
-  // the body now (a callout, a disclosure's title, code), let go instead. Returns whether it is drawn.
+  // the body now (a disclosure's title, code), let go instead. Returns whether it is drawn.
   function reselect(texts) {
     if (!cross) return false;
     if (texts.length === 0 || !texts.every(({ host }) => host.isConnected && isText(host))) {
@@ -481,7 +502,7 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
       select(range);
       return;
     }
-    const texts = hosts().filter((host) => host.closest("main") && isText(host));
+    const texts = hosts().filter((host) => host.closest("main") && isPiece(host));
     const next = texts.find((host) => before(point, { node: host, offset: 0 }));
     const previous = texts.filter((host) => before({ node: host, offset: textEnd(host) }, point)).at(-1);
     const host = forward ? next ?? previous : previous ?? next;
@@ -489,14 +510,17 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
   }
 
   // Delete it: the first block keeps its text before it and takes the last block's after it, the
-  // blocks between go (those taken whole among them); one undo step, the caret where it began.
+  // blocks between go (those taken whole among them); one undo step, the caret where it began. From
+  // the page's title (`apart`) nothing joins: the title keeps what stands before it (empty, it says
+  // 未命名文档), the last block what stands after it in a block of its own (gone when that is nothing).
   // Returns whether it went.
   function remove() {
     const selection = cross;
     const { start, end } = selection;
     letGo();
     if (!(start.host ?? start.node).isConnected || !(end.host ?? end.node).isConnected) return false;
-    if (![start.host, end.host].every((host) => !host || isText(host))) {
+    const apart = isTitle(start.host) || isTitle(end.host);
+    if (![start.host, end.host].every((host) => !host || isPiece(host))) {
       say(t("跨块删除只支持正文、标题和列表里的文字。"));
       return false;
     }
@@ -538,9 +562,14 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
       }
       for (const target of targets) takeOut(target);
       // Joined unless the two cannot be (a block that may not merge, lists that cannot go along):
-      // then each keeps what is left of its text.
-      if (start.host && end.host && mergeInto(start.host, end.host, { anyKind: true }) && endTarget !== end.host && endTarget.isConnected) takeOut(endTarget);
-      if (start.host) joinCode(start.host); // inline code meeting inline code at the join is one piece
+      // then each keeps what is left of its text. Apart from the title, the last block left empty
+      // goes as the blocks between do (it was all selected), else it stays with its rest.
+      if (apart) {
+        const last = isTitle(end.host) ? null : end.host;
+        if (last && endTarget && isEmpty(last) && can(last, "remove") && !keepText(endTarget)) takeOut(endTarget);
+      } else if (start.host && end.host && mergeInto(start.host, end.host, { anyKind: true }) && endTarget !== end.host && endTarget.isConnected) takeOut(endTarget);
+      if (start.host && !apart) joinCode(start.host); // inline code meeting inline code at the join is one piece
+      if (isTitle(start.host) && isEmpty(start.host)) start.host.replaceChildren(); // no <br> left in an emptied title
       return { touched: touched.filter((host) => host.isConnected), focus: start.host ?? end.host ?? null };
     });
     if (!result) return false;