@heycys/gallery 0.1.0 → 0.1.1

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

@@ -2,6 +2,7 @@ import { unitElement, unitsOf, withLeads } from "../core.mjs";
 import { alive, ordered } from "../block-info.mjs";
 import { entersAfter } from "../beside.mjs";
 import { createFills } from "../fills.mjs";
+import { FOLDED } from "../folded.mjs";
 import { describe, note, report } from "../overlays.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
@@ -20,6 +21,12 @@ import { t } from "../../../shared/i18n/index.mjs";
 // page, made to match the selection the moment it changes (render), never on a later frame, so no
 // fill outlives its block's selection, and none is drawn while the block tools are off. The frames
 // only keep them where their blocks are (paint); a fill that cannot be drawn goes.
+//
+// What a folded heading hides (fold/) is never selected: select() leaves it out, Shift+↑/↓ and ↑/↓
+// pass over it; what takes a folded heading away whole takes it along when it acts (fold/ takenWith).
+
+// Whether a block is hidden by a folded heading (data-ge-folded on it or a block around it).
+const folded = (node) => node.closest(`[${FOLDED}]`) !== null;
 
 /**
  * info: block-info.mjs. active(): whether block tools may show. say(text, kind, hold): the status
@@ -37,7 +44,7 @@ export function createSelection({ info, active, say, closeMenu, schedule }) {
   /** Select a block, or several (none is clearing); `quiet`: without saying so. */
   function select(targets, { quiet = false } = {}) {
     closeMenu();
-    const next = ordered([targets].flat().filter(alive));
+    const next = ordered([targets].flat().filter(alive)).filter((node) => !folded(node));
     if (next.length === 0) return clear();
     if (next.length !== picked.length || next.some((node, index) => node !== picked[index])) {
       picked = next;
@@ -79,7 +86,7 @@ export function createSelection({ info, active, say, closeMenu, schedule }) {
   // Shift+↑/↓: the selection widens (or narrows) by one block among the anchor's neighbours.
   function extend(delta) {
     const container = anchor?.parentElement;
-    const list = container ? unitsOf(container) : [];
+    const list = container ? unitsOf(container).filter((unit) => !folded(unit)) : [];
     const at = list.indexOf(anchor);
     if (at < 0) return;
     const inside = picked.map((node) => list.indexOf(node)).filter((index) => index >= 0);
@@ -94,7 +101,7 @@ export function createSelection({ info, active, say, closeMenu, schedule }) {
   function sibling(node, forward) {
     for (let next = forward ? node.nextElementSibling : withLeads(node)[0].previousElementSibling; next; next = forward ? next.nextElementSibling : next.previousElementSibling) {
       const unit = unitElement(next);
-      if (unit && unit.parentElement === node.parentElement && unit !== node) return unit;
+      if (unit && unit.parentElement === node.parentElement && unit !== node && !folded(unit)) return unit;
     }
     return null;
   }

package/browser/editor/page/session.mjs

@@ -1,4 +1,5 @@
 import { OLD_PROTOCOL, PROTOCOL, PROTOCOLS, VERSION, keyCombo } from "../../shared/session.mjs";
+import { lookOf, lookOfElement } from "../../shared/document-look.mjs";
 
 // The report page inside a workbench (an iframe of the same origin): it answers a few commands and
 // tells the workbench its state, never the report's content. Nothing happens when the page is not
@@ -7,11 +8,13 @@ import { OLD_PROTOCOL, PROTOCOL, PROTOCOLS, VERSION, keyCombo } from "../../shar
 // A message counts only from the parent window, of this origin and protocol. A command names the
 // report it is meant for: one for another report (the iframe went to another page meanwhile) is
 // refused. Every command gets exactly one reply, once it is done. Besides the editor's commands the
-// session itself answers four: `theme` (show the report light or dark, or as the reader chose, without
-// storing it), `keys` (key combinations to hand to the workbench when the page does not use them),
+// session itself answers five: `theme` (show the report light or dark, or as the reader chose, without
+// storing it), `look` (show the document in a look, 字体与布局: { look }, src/shared/document-look.mjs; the
+// workbench writes it into doc.json), `keys` (key combinations to hand to the workbench when the page does not use them),
 // `scroll-top` (back to the top when scrolled down) and `close-card` (the detail card on top closes as a
 // press on its backdrop closes it: the workbench asks on a press on its own bars, or Esc there, while
-// the page says a card is open, `card` in what it sends).
+// the page says a card is open, `card` in what it sends). A card stands in the middle of the
+// workbench's window, not of the frame (centreCards, below).
 
 /** A page opened in a frame on its own (?solo), not as the workbench's report: no session, its own notices. */
 export const SOLO = new URLSearchParams(location.search).has("solo");
@@ -34,6 +37,7 @@ export const SOLO = new URLSearchParams(location.search).has("solo");
  */
 export function connectWorkbench({ slug, snapshot, commands, modals }) {
   if (window.parent === window || SOLO) return null;
+  centreCards(modals);
   // The id the workbench speaks (src/shared/session.mjs, OLD_PROTOCOL): null until its first command,
   // and meanwhile every message goes under both, so that a workbench of either version hears it.
   let spoken = null;
@@ -66,6 +70,13 @@ export function connectWorkbench({ slug, snapshot, commands, modals }) {
       dispatchEvent(new CustomEvent("doc-theme-request", { detail: { theme } })); // the kit's ui.js
       return { ok: true };
     },
+    // The document's look shown at once (the kit's ui.js puts it on <html> and lays out again), never
+    // stored here: the workbench writes doc.json. Answers with the look the page shows then.
+    async look({ look = null }) {
+      if (look !== null && (typeof look !== "object" || Array.isArray(look))) return { ok: false, reason: "look" };
+      dispatchEvent(new CustomEvent("doc-look-request", { detail: { look: lookOf(look) } }));
+      return { ok: true, look: lookOfElement(document.documentElement) };
+    },
     async keys({ keys: list }) {
       if (!Array.isArray(list) || !list.every((key) => typeof key === "string")) return { ok: false, reason: "keys" };
       keys = new Set(list);
@@ -115,3 +126,43 @@ export function connectWorkbench({ slug, snapshot, commands, modals }) {
     workspace: () => send("workspace", {}),
   };
 }
+
+// A detail card stands in the middle of the workbench's window, as the workbench's own dialogs do
+// (组件列表, 写作偏好), not in the middle of this frame right of its sidebar and under its top bar;
+// the workbench covers its bars while the page says a card is open (`card`), the card's backdrop
+// the rest. The kit's dialog.css puts the card's middle at --doc-dialog-centre-x and -y, as far as
+// the frame lets it stay clear of its sides, and makes it 80% as high as --doc-dialog-window-height.
+// They are read from the frame's place in the workbench's window (of this origin, as every message
+// of the session is), and said in a sheet the document adopts, which is in no markup (a copy of the
+// view, the file); again as the frame changes size (the window resized, the sidebar opened, closed or
+// dragged wider) and as a card opens or closes.
+function centreCards(modals) {
+  let sheet;
+  try {
+    sheet = new CSSStyleSheet();
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  } catch {
+    return; // a browser with no constructed sheets: the card in the middle of the frame
+  }
+  let said = null;
+  const place = () => {
+    let rule = "";
+    try {
+      const frame = window.frameElement;
+      const outer = frame?.ownerDocument.documentElement;
+      if (outer) {
+        const box = frame.getBoundingClientRect();
+        const style = frame.ownerDocument.defaultView.getComputedStyle(frame);
+        const left = box.left + frame.clientLeft + parseFloat(style.paddingLeft);
+        const top = box.top + frame.clientTop + parseFloat(style.paddingTop);
+        rule = `:root { --doc-dialog-centre-x: ${outer.clientWidth / 2 - left}px; --doc-dialog-centre-y: ${outer.clientHeight / 2 - top}px; --doc-dialog-window-height: ${outer.clientHeight}px; }`;
+      }
+    } catch { /* a frame of another origin's page, or one taken away: in the middle of the frame */ }
+    if (rule === said) return;
+    said = rule;
+    sheet.replaceSync(rule);
+  };
+  place();
+  addEventListener("resize", place);
+  modals.listen(place);
+}

package/browser/editor/page/table/cell-bar.mjs

@@ -2,7 +2,7 @@ import { belowControl, colorSection, colorSwatch, FORMAT_ICONS, formatLook, list
 import { HIGHLIGHTS, TEXT_COLORS } from "../marks.mjs";
 import { placeBox } from "../placement.mjs";
 import { hideTooltip, shortcut } from "../tooltip.mjs";
-import { element, fadeIn, fadeOut, mount } from "../ui.mjs";
+import { addStyle, element, fadeIn, fadeOut, mount } from "../ui.mjs";
 import { alignItems } from "./aligns.mjs";
 import { TABLE_ICONS } from "./icons.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
@@ -19,6 +19,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 const APPEAR = 120;
 const PANEL = 120;
 const GAP = 8; // between the cells and the bar
+// A cell's fill is a block's: its swatches and its "A" show --doc-fill, not the words' deeper fill the kit gives a span.
+const STYLE = `.ge-cell-bar :is(.ge-ink-sample, .ge-swatch > span)[class*="doc-highlight-"] { background: var(--doc-fill); }`;
 
 /**
  * run(command, value): "color" with { kind: "text" | "background", color } (null: none), "bold", "align" with an
@@ -27,6 +29,7 @@ const GAP = 8; // between the cells and the bar
  */
 export function createCellBar(run) {
   formatLook();
+  addStyle(STYLE);
   const sample = element("span", { class: "ge-ink-sample", text: "A" });
   const tools = {
     color: tool("color", t("颜色"), sample, () => toggle("colors")),

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

@@ -15,7 +15,7 @@ import { createCellLists } from "./lists.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // Selected cells of a table and the keys in a table (notion-lite's, src/blocks/table/edit/; the
-// rules in table-math-plan-2026-10-18.md), with the cells' bar (cell-bar.mjs) over them.
+// rules in notes/plans/table-math-plan-2026-10-18.md), with the cells' bar (cell-bar.mjs) over them.
 //
 // - Selecting: a press in a cell dragged into another selects the cells between (the text selection
 //   goes; back in the first, that one cell, no caret); Shift+click from the selection's anchor (or

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

@@ -20,7 +20,7 @@ export const TABLE_ICONS = {
   // A row and a column taken out: the table with the row (column) crossed.
   removeRow: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><path d="M3.25 8.25h13.5M3.25 11.75h13.5"/><path d="m8.25 8.75 3.5 2.5M11.75 8.75l-3.5 2.5"/>'),
   removeColumn: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><path d="M8.25 4.25v11.5M11.75 4.25v11.5"/><path d="m8.75 8.25 2.5 3.5M11.25 8.25l-2.5 3.5"/>'),
-  // 均分列宽: a table of three equal columns; 一键调整列宽: two edges and the arrows of a width between them.
+  // 均分列宽: a table of three equal columns; 自动调整列宽: two edges and the arrows of a width between them.
   even: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><path d="M7.75 4.25v11.5M12.25 4.25v11.5"/>'),
   autoWidth: svg('<path d="M3.25 4v12M16.75 4v12"/><path d="M6.25 10h7.5M8.25 8l-2 2 2 2M11.75 8l2 2-2 2"/>'),
   // 合并单元格: a cell's two halves pushed together; 拆分单元格: a cell pulled apart at its middle line.

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

@@ -24,7 +24,7 @@ import { createColumnWidths } from "./widths.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // A table's own tools (notion-lite's simple table, src/blocks/table/; the plan's T2, its rules in
-// table-math-plan-2026-10-18.md), for a table written as the kit writes one (the unit the server marked GRID):
+// notes/plans/table-math-plan-2026-10-18.md), for a table written as the kit writes one (the unit the server marked GRID):
 //
 // - The selection: cells (a rectangle between two of them, cells.mjs, grown so that it cuts no
 //   merged cell), rows or columns, of one table; { unit, type: "cell" | "row" | "column", anchor,
@@ -535,7 +535,7 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
     if (type === "column") {
       // The columns' widths: shared out equally (several selected); the kit's own, or fixed as they are.
       if (to > from) items.push({ label: t("均分列宽"), icon: ICONS.even, run: () => widths.even(unit, from, to) });
-      items.push({ label: t("一键调整列宽"), icon: ICONS.autoWidth, run: () => widths.fit(unit) });
+      items.push({ label: t("自动调整列宽"), icon: ICONS.autoWidth, run: () => widths.fit(unit) });
     }
     items.push(
       { label: t("创建副本"), icon: ICONS.duplicate, hint: "Ctrl+D", run: () => duplicate(unit, type, from, to) },
@@ -918,16 +918,21 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
 
   addEventListener("scroll", () => { if (!drag) draw(); }, { passive: true, capture: true });
 
-  // The rows of a table the tools manage.
+  // The rows of a table the tools manage. 一键优化 is a split row (menu.mjs): its words run it, its ›
+  // opens two of its parts to run alone, 自动调整列宽 and 识别数字列 (the user's, 2026-11-07).
   function toolRows(unit) {
     const state = tableState(unit);
     return [
       { label: t("标题行"), icon: ICONS.headerRow, checked: state.headerRow, run: () => headerRow(unit, state) },
       { label: t("标题列"), icon: ICONS.headerColumn, checked: state.headerColumn, run: () => change(unit, () => setHeaderColumn(unit, !state.headerColumn), state.headerColumn ? t("已取消标题列") : t("已设为标题列")) },
-      { label: t("一键优化"), icon: ICONS.magic, run: () => optimize(unit) },
-      { label: t("一键调整列宽"), icon: ICONS.autoWidth, run: () => widths.fit(unit) },
+      {
+        label: t("一键优化"), icon: ICONS.magic, run: () => optimize(unit),
+        submenu: () => [
+          { label: t("自动调整列宽"), icon: ICONS.autoWidth, run: () => widths.fit(unit) },
+          { label: t("识别数字列"), icon: ICONS.numbers, run: () => numbers(unit) },
+        ],
+      },
       { label: t("均分列宽"), icon: ICONS.even, run: () => widths.even(unit) },
-      { label: t("识别数字列"), icon: ICONS.numbers, run: () => numbers(unit) },
     ];
   }
 
@@ -974,8 +979,8 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
     /**
      * A table's rows of its block menu (notion-lite's 表格 section, under the menu's one title): a
      * table of the kind these tools manage has 标题行 and 标题列, switches (checked when on); then
-     * actions, each applied once (no check): 一键优化, 一键调整列宽, 均分列宽, 识别数字列; any table
-     * in its frame has its size's rows after them (layoutRows). [] for any other block.
+     * actions, each applied once (no check): 一键优化 › (自动调整列宽, 识别数字列 in its submenu),
+     * 均分列宽; any table in its frame has its size's rows after them (layoutRows). [] for any other block.
      */
     menuItems(target) {
       if (!target?.matches?.('[data-ge-unit-kind="table"]')) return [];

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

@@ -4,6 +4,7 @@ import { boxRole } from "../../components/registry.mjs";
 import { UNIT, can, 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,8 @@ 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…).
+// 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.
@@ -250,6 +251,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 +363,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))) {

package/browser/editor/page/tooltip.mjs

@@ -22,7 +22,7 @@ const STYLE = `
 const DELAY = 150;
 const GAP = 6;
 const MAC = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? "");
-const KEYS = MAC ? { mod: "⌘", shift: "⇧", alt: "⌥" } : { mod: "Ctrl", shift: "⇧", alt: "Alt" };
+const KEYS = MAC ? { mod: "⌘", shift: "⇧", alt: "⌥", enter: "↩" } : { mod: "Ctrl", shift: "⇧", alt: "Alt", enter: "Enter" };
 let shown = null; // { node, tip }
 let timer = 0;
 

package/browser/editor/page/type-grid.mjs

@@ -6,8 +6,9 @@ import { t } from "../../shared/i18n/index.mjs";
 
 // The types a block can be turned into, as icons side by side (as Feishu's block menu), the block's
 // own type marked: the top of the block menu (block-menu/) and the format bar's "turn into"
-// (format-bar/). The buttons are the format bar's (32×28px, 4px apart, its blue for the current
-// one), so both read alike. Each icon names its type, and its Markdown shortcut, in a tooltip.
+// (format-bar/). The buttons are the format bar's (32×28px, 4px apart; the current one marked as
+// a pressed tool of the bar is, its icon's lines in the bar's blue, --ge-accent, and no fill of its
+// own, so the pointer's gray fills it as any other), so both read alike. Each icon names its type, and its Markdown shortcut, in a tooltip.
 // A type that says `corner` has no cell of its own but the gray corner of that type's (a split
 // button): 小字's of 文本's, so 文本 and the headings fill one line. The corner shows only with the
 // pointer (or the keys) on the cell, or, blue, when the block is of that type. It is a click target
@@ -26,7 +27,7 @@ const STYLE = `
   .ge-type { display: flex; align-items: center; justify-content: center; width: ${CELL}px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ge-ico); cursor: pointer; transition: background 20ms ease-in; }
   .ge-type:hover, .ge-type[data-active] { background: var(--ge-hover); }
   .ge-type:active { background: var(--ge-press); }
-  .ge-type[aria-current="true"] { background: var(--ge-fill); color: var(--ge-accent); }
+  .ge-type[aria-current="true"] { color: var(--ge-accent); }
   .ge-type-pair { position: relative; border-radius: 6px; overflow: hidden; }
   .ge-type-corner { position: absolute; right: 0; bottom: 0; width: ${CORNER}px; height: ${CORNER}px; padding: 0; border: 0; background: transparent; cursor: pointer; }
   .ge-type-corner::before { content: ""; position: absolute; inset: 0; background: light-dark(rgb(55 53 47 / 12%), rgb(255 255 255 / 13%)); clip-path: path("${TRIANGLE}"); opacity: 0; transition: background 20ms ease-in, opacity 120ms ease-out; }

package/browser/editor/page/typing/code-edges.mjs

@@ -12,7 +12,11 @@ import { ENTRIES } from "../../components/registry.mjs";
 // the caret in a pad (pads.mjs). Code blocks are text blocks of their own (components/code/) and
 // have none of this. A component's entry in the text (`entry`: a chip as padded as code) has the
 // same stops, and Backspace at the stop after it (Delete at the one before it) takes the whole
-// entry away (beforeDelete says what the page says of that; editor.mjs records the step).
+// entry away (takeEntry, on the key's keydown through beforeDelete and on its beforeinput where an
+// input method's keydown says 229; it says what the page says of that, editor.mjs records the step).
+// A Backspace that takes the last character between inline code or an entry and the caret after it
+// leaves the caret outside it, at the stop after it (deletingBack, deletedBack): the browser puts it
+// in at the end (an entry's: left of its icon), its end and the text after it one place to it.
 
 const EDGED = ["code", ...ENTRIES.map(({ at }) => at)].join(", ");
 const isEdged = (node) => node?.nodeType === 1 && node.matches(EDGED);
@@ -187,28 +191,48 @@ export function codePress(host, x, y) {
 }
 
 /**
- * Backspace or Delete with the caret in a pad at an edge: the pad goes first, the caret where the
- * key then takes the character beside it, as it would without the pad (keydown, before the browser
- * deletes or the editor merges blocks). At the stop beside a component's entry the whole entry goes,
- * and what the page says of that is returned; nothing otherwise.
+ * Backspace (`back`) at the stop after a component's entry, or Delete at the one before it: the whole
+ * entry goes, as a chip of the text does, the caret where it stood, and what the page says of that is
+ * returned; nothing otherwise. The keydown's (beforeDelete) and the beforeinput's, for a key whose
+ * keydown the editor passed by (an input method's, keyCode 229: editor.mjs). The pads beside it go
+ * with it, before the text either side of it is joined, so that no zero-width space is left in that
+ * text (a pad an undo step put back is part of the text beside it by then).
  */
-export function beforeDelete(host, key) {
+export function takeEntry(host, back) {
   const selection = getSelection();
   if (!selection.rangeCount || !selection.isCollapsed) return;
-  const back = key === "Backspace";
-  // At the stop after an entry (or before it, for Delete): the whole entry goes.
   const outside = caretAtEdge(host);
   const entry = outside && !outside.inside ? entryOf(outside.code) : undefined;
-  if (entry && (back ? outside.side === "end" : outside.side === "start")) {
-    const caret = host.ownerDocument.createRange();
-    if (isPad(selection.anchorNode)) selection.anchorNode.remove();
-    caret.setStartBefore(outside.code);
-    caret.collapse(true);
-    outside.code.remove();
-    host.normalize();
-    select(caret);
-    return entry.removed;
+  if (!entry || (back ? outside.side !== "end" : outside.side !== "start")) return;
+  const { code } = outside;
+  for (const [next, trim] of [["previousSibling", new RegExp(`${ZWSP}+$`)], ["nextSibling", new RegExp(`^${ZWSP}+`)]]) {
+    for (let node = code[next]; node?.nodeType === 3; node = code[next]) {
+      node.data = node.data.replace(trim, "");
+      if (node.data !== "") break;
+      node.remove();
+    }
   }
+  const caret = host.ownerDocument.createRange();
+  caret.setStartBefore(code);
+  caret.collapse(true);
+  code.remove();
+  host.normalize();
+  select(caret);
+  return entry.removed;
+}
+
+/**
+ * Backspace or Delete with the caret in a pad at an edge: the pad goes first, the caret where the
+ * key then takes the character beside it, as it would without the pad (keydown, before the browser
+ * deletes or the editor merges blocks). At the stop beside a component's entry the whole entry goes
+ * (takeEntry), and what the page says of that is returned; nothing otherwise.
+ */
+export function beforeDelete(host, key) {
+  const back = key === "Backspace";
+  const removed = takeEntry(host, back);
+  if (removed) return removed;
+  const selection = getSelection();
+  if (!selection.rangeCount || !selection.isCollapsed) return;
   const pad = selection.anchorNode;
   if (!isPad(pad) || !host.contains(pad)) return;
   const edge = caretAtEdge(host);
@@ -226,3 +250,25 @@ export function beforeDelete(host, key) {
   caret.collapse(true);
   select(caret);
 }
+
+// The host whose caret a deletion backward found in text outside any inline code or entry (no pad),
+// for the input after it (deletedBack).
+let backFrom = null;
+
+/** A deletion backward about to happen (its beforeinput): where the caret stands, for deletedBack. */
+export function deletingBack(host) {
+  const selection = getSelection();
+  const node = selection.rangeCount && selection.isCollapsed ? selection.anchorNode : null;
+  backFrom = node?.nodeType === 3 && !isPad(node) && !node.parentElement.closest(EDGED) ? host : null;
+}
+
+/**
+ * The deletion done (its input): a caret it took from the text after inline code or an entry into
+ * it, at its end, goes back out to the stop after it, where the reader deleting back stays.
+ */
+export function deletedBack(host) {
+  const was = backFrom === host;
+  backFrom = null;
+  const edge = was && caretAtEdge(host);
+  if (edge && edge.inside && edge.side === "end") padCaret(edge.code, "after");
+}

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

@@ -47,13 +47,12 @@ function writtenTogether(host, node, start, end) {
 /**
  * struct(parents, touched, mutate): the editor's undoable structural change (history.mjs). say: the
  * status line. keepText(unit): why a block may not go (block-info.mjs). paragraphBefore(host): an
- * empty paragraph before the block, the caret staying (insert/). paragraphAfter(unit): one after a
- * block, the caret in it, where its box takes one (insert/). removeBlocks(units): the blocks
+ * empty paragraph before the block, the caret staying (insert/). removeBlocks(units): the blocks
  * deleted as the selected ones are (selection/delete.mjs). adding(): the block the "/" menu the
  * handle's "+" opened is open in (slash-menu/), or null. leave: where Enter and Backspace leave a
- * container (leave.mjs).
+ * container (leave.mjs). showHidden(node): the folds hiding a block opened (fold/ showAround).
  */
-export function createTyping({ struct, say, keepText, paragraphBefore, paragraphAfter, removeBlocks, selectBlock = () => {}, adding = () => null, leave }) {
+export function createTyping({ struct, say, keepText, paragraphBefore, removeBlocks, selectBlock = () => {}, adding = () => null, leave, showHidden = () => {} }) {
   // A key, asked of the component of the text block `host` and then of what stands around it, nearest
   // first (docs/editor.md, "The order of keys"): whether it was theirs. `ctx` is notion-lite's, as
   // much of it as a key reads, the block being an element here.
@@ -75,8 +74,7 @@ export function createTyping({ struct, say, keepText, paragraphBefore, paragraph
     // in any editor, and so does the empty last paragraph of a panel), the rule of every block.
     if (asked((keys) => keys.enter, host) || leave.enter(host)) return;
     if (!can(host, "split")) {
-      // At the very end of a block that says so, a paragraph follows it, as one that splits would.
-      if (!HOSTS[host.getAttribute("data-ge-kind")]?.opensAfter || !atEdge(host, true) || !paragraphAfter(host)) say(limitText(host, "split"));
+      say(limitText(host, "split"));
       return;
     }
     const selection = getSelection();
@@ -159,8 +157,15 @@ export function createTyping({ struct, say, keepText, paragraphBefore, paragraph
     return true;
   }
 
+  // A block on the line above or below that a folded heading hides (fold/: data-ge-folded on it or
+  // around it): its fold opens first, so a join never takes in words out of sight.
+  const opened = (line) => {
+    if (line?.closest?.("[data-ge-folded]")) showHidden(line);
+  };
+
   // Backspace at the start of a block. Returns whether it was handled.
   function backspace(host) {
+    opened(previousLine(host));
     // The block's component (a list item's: a nested item moves out a level, the first or last item of
     // a top-level list leaves it as body text, an emptied item holding lists stays), then what stands
     // around it (the item a block stands under; a node, at the start of its first line, holding
@@ -192,6 +197,7 @@ export function createTyping({ struct, say, keepText, paragraphBefore, paragraph
 
   // Delete at the end of a block. Returns whether it was handled.
   function forwardDelete(host) {
+    opened(nextLine(host));
     // Its component (an empty item holding blocks stays), then what stands around it (at the end of a
     // node's last block nothing is taken in).
     if (asked((keys) => keys.delete, host)) return true;

package/browser/editor/page/typing/leave.mjs

@@ -15,7 +15,7 @@ import { BLOCK_TYPES, LEAVES_BY_ENTER, accepts } from "../../components/registry
 //   - A block of a type that says `resettable` (a quote's paragraph, a list item) turns into a
 //     paragraph where it stands, its container splitting around it (convert.mjs).
 // Enter in a title that goes into its content (a disclosure, a card, a code block) is another rule
-// (their components'), and so is Enter at the end of a block that says `opensAfter` (typing/).
+// (their components').
 
 /**
  * The empty last block of a box that says `leaveByEnter`, moved out after the box (the box goes if

package/browser/shared/annotations.mjs

@@ -2,8 +2,8 @@ import { attr, hasClass } from "./html-tree.mjs";
 import { BLOCK_ID, randomId } from "./ids.mjs";
 
 // 批注 (docs/workbench.md "Annotations", docs/editor.md "Annotations"): the reader's suggestions for a
-// local Agent, each about a piece of a report: words of its text, or blocks taken whole. One with no
-// text is a plain mark of that place. Kept in reports/<slug>/annotations.json, never in report.html:
+// local Agent, each about a piece of a report: words of its text, or blocks taken whole. One has
+// words: an item with none is none (cleanItem). Kept in reports/<slug>/annotations.json, never in report.html:
 //
 //   { v: 1, items: [{ id, created, updated, text, anchor }] }
 //   anchor: { kind: "text", blocks: [data-block-id…], quote, prefix, suffix }
@@ -389,12 +389,13 @@ export function cleanAnchor(anchor) {
 export const sameWords = (a, b) => Boolean(a && b) && a.kind === b.kind && (a.blocks ?? []).join() === (b.blocks ?? []).join() && squash(a.quote) === squash(b.quote)
   && squash(a.prefix).slice(-CONTEXT_KEPT) === squash(b.prefix).slice(-CONTEXT_KEPT) && squash(a.suffix).slice(0, CONTEXT_KEPT) === squash(b.suffix).slice(0, CONTEXT_KEPT);
 
-/** An annotation as the file keeps it, from what was sent (`now`: when it is saved), or null when it is none. */
+/** An annotation as the file keeps it, from what was sent (`now`: when it is saved), or null when it is none (no id, no anchor, no words). */
 export function cleanItem(item, now = new Date().toISOString()) {
   if (!item || typeof item !== "object" || typeof item.id !== "string" || !ID.test(item.id) || typeof item.text !== "string") return null;
   const anchor = cleanAnchor(item.anchor);
   if (!anchor) return null;
   const text = item.text.replace(/\r\n?/g, "\n").slice(0, TEXT_MOST);
+  if (!text.trim()) return null;
   return { id: item.id, created: typeof item.created === "string" ? item.created : now, updated: now, text, anchor };
 }
 
@@ -421,7 +422,6 @@ export const itemsText = (items) => (items.length === 0 ? null : `${JSON.stringi
 export const MARKDOWN_WORDS = {
   head: "以下是我对这份文档的批注，共 {0} 条。请逐条按“建议”修改底稿；每条给出它在文档里的位置、块的 data-block-id 和批注的原文。",
   headOne: "以下是我对这份文档的一条批注。请按“建议”修改底稿；它给出在文档里的位置、块的 data-block-id 和批注的原文。",
-  marks: "没有“建议”的批注只是标记了一个位置，不用改。",
   report: "文档",
   source: "底稿",
   block: "块",
@@ -441,22 +441,20 @@ const fill = (text, ...values) => text.replace(/\{(\d+)\}/g, (whole, index) => (
  * then each annotation in page order: where it is (`where`: the tab, the headings above it, the
  * disclosure it is in; `top`: before the report's first heading, said 页首, which no tab or heading
  * named 正文 is taken for), its blocks' ids (as the file has them), its quote and the suggestion, each
- * of its lines a paragraph (blank lines in it make no more of them). One with no suggestion marks a
- * place: it has no such line, and a line under the first says what such a one is.
+ * of its lines a paragraph (blank lines in it make no more of them).
  * data: { title, path, items: [{ where: [text], top, blocks: [id], whole, quote, text }] }.
  */
 export function annotationsMarkdown({ title, path, items }, words = MARKDOWN_WORDS) {
   const w = { ...MARKDOWN_WORDS, ...words };
   const head = items.length === 1 && w.headOne ? w.headOne : fill(w.head, items.length);
-  const suggestions = items.map((item) => String(item.text ?? "").replace(/\r\n?/g, "\n").split("\n").map((line) => line.trim()).filter(Boolean));
-  const lines = [head, ...(suggestions.some((said) => said.length === 0) ? [w.marks] : []), "", `- ${w.report}${w.colon}${title}`, `- ${w.source}${w.colon}${path}`];
+  const lines = [head, "", `- ${w.report}${w.colon}${title}`, `- ${w.source}${w.colon}${path}`];
   items.forEach((item, index) => {
     const where = item.where?.length ? item.where.join(" › ") : item.top ? w.top : w.body;
     const ids = item.blocks?.length ? item.blocks.map((id) => `\`data-block-id="${id}"\``).join(w.comma) + (item.whole ? w.whole : "") : w.noId;
     lines.push("", `## ${index + 1}. ${where}`, "", `${w.block}${w.colon}${ids}`, "");
     for (const line of String(item.quote ?? "").split("\n")) lines.push(`> ${line}`);
-    const said = suggestions[index];
-    if (said.length > 0) lines.push("", `${w.suggestion}${w.colon}${said[0]}`);
+    const said = String(item.text ?? "").replace(/\r\n?/g, "\n").split("\n").map((line) => line.trim()).filter(Boolean);
+    lines.push("", `${w.suggestion}${w.colon}${said[0] ?? ""}`);
     for (const line of said.slice(1)) lines.push("", line);
   });
   return `${lines.join("\n")}\n`;

package/browser/shared/code-folds.mjs

@@ -3,7 +3,11 @@
 // after a line that is folded (the kit's styles/code.css asks for it as `@fold-dots`, which
 // kit-build.mjs fills in; the editor's styles interpolate it). Its colors are the kit's tokens.
 
-/** A folding line's arrow (markup; it takes the color of its button). */
+/**
+ * A folding line's arrow (markup; it takes the color of its button), pointing down; folded, it is
+ * turned to point at what it folds: a code block's and its lines' -90° (right: they stand left of
+ * the code), a heading's 90° (left: it stands right of the words, page/fold/).
+ */
 export const FOLD_ARROW = '<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3.25 4.5h5.5L6 8z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>';
 
 /** The three dots of a folded line's "…" (a CSS image). */