@heycys/gallery 0.1.0 → 0.1.1

package/browser/editor/page/offered.mjs

@@ -1,6 +1,6 @@
 import { TYPE_COMPONENT, blocksHidden } from "../components/registry.mjs";
 
-// What the menus that make a block offer of the reader's 设置 › 组件 (docs/workbench.md): the one place
+// What the menus that make a block offer of the reader's 设置 › 组件列表 (docs/workbench.md): the one place
 // that hears what is hidden, gallery.json's as the page's map holds it (`hidden`), then as its event
 // stream says it (`doc-settings-changed`), which costs the page nothing. A block type goes with its
 // component. "/", 在下方新建 (both slash-menu/ typeItems) and the handle's grid (block-menu/) read it; no

package/browser/editor/page/outline/folds.mjs

@@ -1,23 +1,24 @@
 // What is folded in the outline, kept for each report (localStorage, so the page the workbench shows
 // again after an Agent's write, which is a new page, folds what the reader folded): a node's key (a
-// heading's block id, a tab's area and tab), the reports folded last kept and the oldest let go.
+// heading's block id, a tab's area and tab), the reports folded last kept and the oldest let go. The
+// headings folded on the page (fold/) are kept the same way under a key of their own (`key`).
 
 import { KEYS } from "../../../shared/renamed-storage.mjs";
 
 export const FOLDS_KEY = KEYS.outlineFolds;
 const KEEP = 100; // reports
 
-function read(storage) {
+function read(storage, key) {
   try {
-    const value = JSON.parse(storage.get(FOLDS_KEY) ?? "null");
+    const value = JSON.parse(storage.get(key) ?? "null");
     if (value && typeof value === "object" && value.folds && typeof value.folds === "object") return value;
   } catch {}
   return { folds: {} };
 }
 
-/** The keys folded in report `slug` (`storage`: { get, set }, page/storage.mjs). */
-export function foldsOf(storage, slug) {
-  const keys = read(storage).folds[slug];
+/** The keys folded in report `slug` (`storage`: { get, set }, page/storage.mjs), kept under `key`. */
+export function foldsOf(storage, slug, key = FOLDS_KEY) {
+  const keys = read(storage, key).folds[slug];
   return new Set(Array.isArray(keys) ? keys.filter((key) => typeof key === "string") : []);
 }
 
@@ -25,14 +26,14 @@ export function foldsOf(storage, slug) {
  * Keep `folded` for report `slug`: only the keys the page still has (`present`), the report the one
  * folded last; none folded forgets the report. At most KEEP reports, the oldest going first.
  */
-export function keepFolds(storage, slug, folded, present = null) {
-  const value = read(storage);
-  const keys = [...folded].filter((key) => !present || present.has(key));
+export function keepFolds(storage, slug, folded, present = null, key = FOLDS_KEY) {
+  const value = read(storage, key);
+  const keys = [...folded].filter((each) => !present || present.has(each));
   delete value.folds[slug]; // put back last: the report folded last
   if (keys.length) value.folds[slug] = keys;
   const slugs = Object.keys(value.folds);
   for (const old of slugs.slice(0, Math.max(0, slugs.length - KEEP))) delete value.folds[old];
-  storage.set(FOLDS_KEY, JSON.stringify(value));
+  storage.set(key, JSON.stringify(value));
 }
 
 /**

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

@@ -2,15 +2,17 @@ import { IN_LAYER, Z } from "../../../shared/layers.mjs";
 import { onOutlineOpen, onPreferences, outlineOpen, preference, setPreference } from "../../../shared/preferences.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 import { SHEETS } from "../../components/kit.mjs";
+import { reveal } from "../folded.mjs";
 import { task } from "../frames.mjs";
 import { cancelOnEscape, endsGesture, gestureLock } from "../gesture.mjs";
-import { MARGIN, onMargin, outlineMost, outlineWidth, setMargin } from "../margin.mjs";
+import { MARGIN, listFits, onMargin, outlineMost, outlineWidth, setMargin } from "../margin.mjs";
 import { drawOver, shapeOf } from "../overlay-layer.mjs";
 import { onSettle, own } from "../overlays.mjs";
 import { local } from "../storage.mjs";
+import { hideTooltip, tooltipAt } from "../tooltip.mjs";
 import { addStyle, element } from "../ui.mjs";
 import { carryFolds, foldsOf, keepFolds } from "./folds.mjs";
-import { ROW, createList } from "./list.mjs";
+import { LIST, ROW, createList } from "./list.mjs";
 import { entriesOf, touchesOutline } from "./read.mjs";
 import { STRIP_TOP, createStrip } from "./strip.mjs";
 import { currentOf, followTop, glideFrom, keysOf, markedRow, nodesOf, pathTo, rowsOf, signatureOf, spyLine, treeOf } from "./tree.mjs";
@@ -27,9 +29,9 @@ import { currentOf, followTop, glideFrom, keysOf, markedRow, nodesOf, pathTo, ro
 // What it lists (read.mjs, tree.mjs): the heading blocks, nested by level, a tabs area's tabs as pills
 // with their headings under them. Its form is margin.mjs's: the list in full at the window's right
 // edge, the column in the middle of what it leaves (200px unless the reader dragged its guide: a quiet
-// list on the page's background, a hairline guide down its left, the current row's segment dark on
-// it), or, with less room, its strip (strip.mjs), which shows the list as a card while the pointer is on it, each of its
-// lines lighting its own row. A form that changes after the page came is faded in (the list sliding a
+// list on the page's background, a hairline guide down its left close to its top level's titles, the
+// current row's segment dark on it), or, with less room, its strip (strip.mjs), which shows the list
+// as a card while the pointer is on it, each of its lines lighting its own row. A form that changes after the page came is faded in (the list sliding a
 // little from the right), never there all at once.
 //
 // - A click on a heading's row scrolls the page smoothly (at once with reduced motion; from more than
@@ -55,24 +57,41 @@ import { currentOf, followTop, glideFrom, keysOf, markedRow, nodesOf, pathTo, ro
 //   reader scrolled it in the last 1.5s (the pointer gone after that, a row scrolled out of sight is
 //   brought back). The wheel over it scrolls it, and at its ends the page.
 // - A triangle at a parent's left folds or unfolds it (a folded one always shows it; an open one while
-//   the pointer is over the list or the keyboard is in it); what is folded is kept for the report
-//   (folds.mjs), so the page the workbench shows again after an Agent's write folds the same, and
+//   the pointer is over the rows or the keyboard is in the list, the guide fading out meanwhile: each
+//   just short of its title, a top-level one on the guide, the titles never moving); what is folded is kept for the report (folds.mjs), so the page the workbench shows again after an Agent's write folds the same, and
 //   follows a heading whose key changes (one with no block id, keyed by its text, typed in or given its
 //   id as it is saved). The top level's headings are bold.
 // - Its guide line, dragged, makes the list wider or narrower (160 to 360px, as far as the room lets
 //   it while the column keeps its edge room at both sides), the column staying in the middle of what
 //   it leaves (margin.mjs: its two rooms giving or taking half each); let go, the width is the
 //   reader's for every report (shared/preferences.mjs outlineWidth); Esc puts it back.
+// - Its guide line clicked (pressed and let go before the pointer went CLICK px across, the sidebar's
+//   edge's rule) collapses the list to its strip, even where the room gives the list: the reader's for
+//   every report, as the width (outlineCollapsed, which the page's head reads too: margin.mjs). The
+//   guide in the strip's card clicked takes it back: the list in full where the room allows it
+//   (margin.mjs listFits), else the strip stays (never forced) and the list comes once there is room.
+//   Each guide says so in a tooltip by the pointer (a tall target), the card's why nothing opened.
 // - It follows the page as it changes (one reading a frame at most, the rows drawn again only when
 //   what they show changed): headings typed, renamed, added, deleted, moved, undone, tabs renamed or
 //   shown; not while an input method composes (its letters are no title yet: read once it commits).
 //   It is the editor's own UI (data-doc-dev): a press on it starts no box selection, the handle
 //   does not show by it, and while a block is dragged or a box drawn it lets the pointer through.
 
-const DOCK = { top: 52, left: MARGIN.guide, right: 8 }; // the list's room in the dock: below the page's top room, its guide 8px in (where the column's right room ends: margin.mjs), 8px short of the scrollbar
+const DOCK = { top: 52, left: MARGIN.guide, right: 8 }; // the list's room in the dock: below the page's top room, from 8px in (where the column's right room ends: margin.mjs; its guide LIST.guide further in), 8px short of the scrollbar
 const CARD = 56; // the strip's card: as wide as the list chosen, and this much more
+const CARD_PAD = 8; // and its list this far in from its left edge (as far in as the card's right padding)
+const GUIDE_FADE = 120; // ms the guide fades out as the triangles show, and in as they go (at once with reduced motion: the kit's base.css)
+// The pointer's rest after it left the rows (for the grip, or along the guide from one top-level triangle to another,
+// across the grip between them) before the triangles go and the guide comes back (the grip's darker bar comes as late).
+const LEAVE = 120;
+// What shows the triangles and fades the guide: the pointer on a row (its triangle included), the keys in the list (the
+// focus seen). The pointer on the list but on no row (its gutter, left of the grip) shows nothing: crossing it to the grip
+// changes nothing.
+const OVER = ":has(.ge-outline-row:hover), :focus-visible, :has(:focus-visible)";
+const GRIPS = ".ge-outline-grip, .ge-outline-card-grip"; // the guide's grips (in the list's scroller, the card's)
 const ENTER = { ms: 160, slide: 8 }; // the list in full coming after the page did: faded in, sliding this far from the right
 const RESIZING = "data-ge-outline-resize"; // on the document element while the guide is dragged
+const CLICK = 3; // px across the pointer goes on the guide before a press is a drag, not a click (the workbench's sidebar edge: Sidebar.tsx Resizer)
 const JUMP_TOP = 24; // a heading's top after a jump, below the window's
 const STAY = 40; // px the page moves after a jump before the heading gone to stops being the current one
 const FOLLOW_QUIET = 1500; // ms after the reader scrolled the list, it is not scrolled to the current row
@@ -105,42 +124,48 @@ const STYLE = `
   .ge-outline-scroll[data-more="up"] { -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }
   .ge-outline-scroll[data-more="down"] { -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent); mask-image: linear-gradient(#000 calc(100% - 32px), transparent); }
   .ge-outline-scroll[data-more="up down"] { -webkit-mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 32px), transparent); }
-  /* The guide's grip: dragged, the list wider or narrower; under the pointer (a moment after it came) and while dragged, the guide a wider, darker bar. */
-  .ge-outline-grip { position: absolute; left: -${MARGIN.grip}px; top: 0; bottom: 24px; width: 9px; cursor: col-resize; pointer-events: auto; }
-  .ge-outline-grip::after { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; transition: background-color 120ms ease; }
-  .ge-outline-grip:hover::after { background: var(--ge-line-strong); transition-delay: 120ms; }
+  /* The guide's grip (MARGIN.grip left of its hairline, 5px right): dragged, the list wider or narrower; clicked, the list collapsed to its strip; under the pointer (a moment after it came) and while dragged, the guide a wider, darker bar. It stands in the list's scroller, placed by the frame (the card), so it lies under a top-level triangle shown (z-index): that triangle, its row's, takes its own box; the grip the rest of the guide (rows with no triangle shown, above and below one), and every one hidden (visibility: no target). */
+  .ge-outline-grip, .ge-outline-card-grip { position: absolute; z-index: 1; width: 9px; pointer-events: auto; }
+  .ge-outline-grip { left: ${LIST.guide - MARGIN.grip}px; top: 0; bottom: 24px; cursor: col-resize; }
+  .ge-outline-grip::after, .ge-outline-card-grip::after { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; transition: background-color 120ms ease; }
+  .ge-outline-grip:hover::after, .ge-outline-card-grip[data-fits]:hover::after { background: var(--ge-line-strong); transition-delay: 120ms; }
   :root[${RESIZING}] .ge-outline-grip::after { background: color-mix(in srgb, var(--ge-tx3) 70%, transparent); transition-delay: 0s; }
   :root[${RESIZING}] .ge-outline-scroll { pointer-events: none; }
   ${gestureLock(RESIZING, { cursor: "col-resize", select: true })}
 
-  /* The list: a hairline guide at its left, the current row's segment darker on it, the lit row's blue (whole pixels: crisp at any scale). */
-  .ge-outline-list { position: relative; padding-left: 6px; outline: none; }
-  .ge-outline-list::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--ge-line-strong); }
+  /* The list (list.mjs LIST): a hairline guide a little in from its left edge, close to the top level's titles, the current row's segment darker on it, the lit row's blue (whole pixels: crisp at any scale); the rows from right of the guide (a top-level one's fill reaching across it to take in its triangle: below). */
+  .ge-outline-list { position: relative; padding-left: ${LIST.row}px; outline: none; }
+  .ge-outline-list::before { content: ""; position: absolute; left: ${LIST.guide}px; top: 4px; bottom: 4px; width: 1px; background: var(--ge-line-strong); }
   .ge-outline-list[data-empty]::before { display: none; }
-  .ge-outline-mark { position: absolute; left: -1px; top: 0; width: 2px; height: 16px; border-radius: 1px; background: var(--ge-tx); pointer-events: none; }
+  .ge-outline-mark { position: absolute; left: ${LIST.guide - 1}px; top: 0; width: 2px; height: 16px; border-radius: 1px; background: var(--ge-tx); pointer-events: none; }
   .ge-outline-mark[data-hot] { background: var(--ge-accent); }
   .ge-outline-mark[hidden] { display: none; }
-  .ge-outline-row { position: relative; display: flex; align-items: center; gap: 2px; height: ${ROW}px; box-sizing: border-box; padding: 0 6px 0 calc(2px + var(--ge-depth, 0) * 12px); border-radius: 6px; cursor: pointer; white-space: nowrap; outline: none; }
+  /* While the pointer is on the rows or the keys are in the list (OVER), the triangles show and the guide (its hairline, its segments) fades out at once; the rows left, it comes back a moment later (LEAVE), so the pointer going along the guide from one top-level triangle to another, across the grip, keeps them. */
+  .ge-outline-list::before, .ge-outline-list > .ge-outline-mark { transition: opacity ${GUIDE_FADE}ms ease ${LEAVE}ms; }
+  .ge-outline-list:is(${OVER})::before, .ge-outline-list:is(${OVER}) > .ge-outline-mark { opacity: 0; transition-delay: 0s; }
+  .ge-outline-row { position: relative; display: flex; align-items: center; height: ${ROW}px; box-sizing: border-box; padding: 0 6px 0 calc(${LIST.text}px + var(--ge-depth, 0) * ${LIST.step}px); border-radius: 6px; cursor: pointer; white-space: nowrap; outline: none; }
   .ge-outline-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-  .ge-outline-row:is(:hover, :focus-visible, [data-hot]) { color: var(--ge-tx); background: var(--ge-hover); }
-  .ge-outline-row:active { background: var(--ge-press); }
+  /* A row's fill (under the pointer, the keys' focus, lit from the strip, pressed) takes in its triangle's column: it starts at the row's left (2px clear of the hairline) or ${LIST.step + LIST.text - LIST.twist - LIST.gap}px left of the column, whichever is further left (that room is what a second-level row's fill leaves left of its triangle). Only a top-level row's column stands left of the row (across the guide), so only its fill reaches further, a step (LIST.step) further left, past the hairline, its triangle in the grey as a deeper one is (the user's of 2026-11-07), a leaf's as its siblings'. That part is the row's shadow, no target: the pointer there is still the list's gutter or the grip. */
+  .ge-outline-row { --ge-row-fill: transparent; background: var(--ge-row-fill); box-shadow: min(0px, calc((var(--ge-depth, 0) - 1) * ${LIST.step}px)) 0 var(--ge-row-fill); }
+  .ge-outline-row:is(:hover, :focus-visible, [data-hot]) { color: var(--ge-tx); --ge-row-fill: var(--ge-hover); }
+  .ge-outline-row:active { --ge-row-fill: var(--ge-press); }
   .ge-outline-row[data-current] { color: var(--ge-tx); font-weight: ${MEDIUM}; }
   /* The top level's headings bold: at the top, or right under a tab (its pill keeps its own look). */
   .ge-outline-row[data-top] { font-weight: 600; }
-  /* The triangle at a parent's left, in a column of its own (a leaf keeps the room): a folded one always shows (pointing right), an open one (pointing down) while the pointer is over the list or the keyboard is in it (the focus seen: a fold by the pointer leaves the focus on its row, unseen). No grey under the pointer, only while pressed. */
-  .ge-outline-twist, .ge-outline-slot { flex: none; width: 16px; height: 16px; }
-  .ge-outline-twist { border-radius: 4px; color: var(--ge-tx3); }
-  .ge-outline-twist svg { fill: currentColor; transition: transform 120ms ease; }
+  /* The triangle at a parent's left, out of the row's flow (its title where a leaf's is), in its indentation just short of its title, at every level the same: a top-level one on the guide, over its grip (above it: z-index). A folded one always shows (pointing right), an open one (pointing down) while the pointer is on the rows or the keys are in the list (the focus seen: a fold by the pointer leaves the focus on its row, unseen; the timing above). No grey under the pointer, only while pressed. */
+  .ge-outline-twist { position: absolute; z-index: 2; top: ${(ROW - 16) / 2}px; left: calc(var(--ge-depth, 0) * ${LIST.step}px + ${LIST.text - LIST.twist - LIST.gap}px); width: ${LIST.twist}px; height: 16px; border-radius: 4px; color: var(--ge-tx3); }
+  .ge-outline-twist svg { width: 16px; margin-left: ${(LIST.twist - 16) / 2}px; fill: currentColor; transition: transform 120ms ease; }
   .ge-outline-twist:hover { color: var(--ge-tx2); }
   .ge-outline-twist:active { background: var(--ge-press); }
   .ge-outline-row[aria-expanded="true"] .ge-outline-twist svg { transform: rotate(90deg); }
-  .ge-outline-list:not(:hover, :focus-visible, :has(:focus-visible)) .ge-outline-row[aria-expanded="true"] .ge-outline-twist { visibility: hidden; }
+  .ge-outline-row[aria-expanded="true"] .ge-outline-twist { visibility: hidden; transition: visibility 0s linear ${LEAVE}ms; }
+  .ge-outline-list:is(${OVER}) .ge-outline-row[aria-expanded="true"] .ge-outline-twist { visibility: visible; transition-delay: 0s; }
   /* A tabs area's tab: its name as a pill at the rows' size (its text in line with the rows beside it), the tab shown filled as the page's pills, the others ringed by a hairline (plain, they read as less than their own headings). */
   .ge-outline-row[data-kind="tab"] .ge-outline-text { margin-left: -4px; }
   .ge-outline-tab { display: inline-block; max-width: 100%; box-sizing: border-box; height: 22px; padding: 0 6px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; font-weight: ${MEDIUM}; line-height: 22px; box-shadow: inset 0 0 0 1px var(--ge-line-strong); }
   .ge-outline-row[data-shown] .ge-outline-tab { background: var(--ge-hover); color: var(--ge-tx); box-shadow: none; }
   .ge-outline-row[data-shown]:is(:hover, :focus-visible, [data-hot]) .ge-outline-tab { background: transparent; }
-  .ge-outline-empty { padding: 4px 0 4px 8px; color: var(--ge-tx3); white-space: normal; }
+  .ge-outline-empty { padding: 4px 0 4px ${LIST.text}px; color: var(--ge-tx3); white-space: normal; }
 
   /* The strip: short lines, each its own target: the one under the pointer blue, longer and thicker. */
   .ge-outline-strip { position: fixed; top: 0; right: 0; bottom: 0; z-index: ${Z.outline}; width: ${MARGIN.strip}px; pointer-events: none; }
@@ -152,10 +177,13 @@ const STYLE = `
   .ge-outline-ticks i[data-hot] { width: calc(var(--ge-tick, 16px) + 6px); background: var(--ge-accent); transform: scaleY(1.5); }
   .ge-outline-none { display: block; width: 16px; height: 16px; color: var(--ge-tx3); }
   /* Its card: the list over the page beside the strip, its top level with the strip's lines, the menus' surface; the list scrolls inside it, faded at its ends as in full. */
-  .ge-outline-card { position: fixed; z-index: ${Z.menu}; top: ${STRIP_TOP}px; right: ${MARGIN.strip + 4}px; width: ${MARGIN.full + CARD}px; max-height: calc(100vh - ${STRIP_TOP + 16}px); box-sizing: border-box; display: flex; flex-direction: column; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--ge-bg); box-shadow: var(--ge-shadow-pop); }
+  .ge-outline-card { position: fixed; z-index: ${Z.menu}; top: ${STRIP_TOP}px; right: ${MARGIN.strip + 4}px; width: ${MARGIN.full + CARD}px; max-height: calc(100vh - ${STRIP_TOP + 16}px); box-sizing: border-box; display: flex; flex-direction: column; padding: 8px 8px 8px ${CARD_PAD}px; border-radius: 10px; background: var(--ge-bg); box-shadow: var(--ge-shadow-pop); }
+  /* Its guide's grip (about the hairline, CARD_PAD + LIST.guide in; in the card's scroller as the dock's is in its own, under a top-level triangle shown): clicked, the list in full again; a hand and the darker bar only where the room allows it (data-fits). */
+  .ge-outline-card-grip { left: ${CARD_PAD + LIST.guide - MARGIN.grip}px; top: 8px; bottom: 8px; }
+  .ge-outline-card-grip[data-fits] { cursor: pointer; }
 
   /* While a block is dragged, a box drawn, text selected across blocks or something resized, the outline lets the pointer through. */
-  :root:is([data-ge-drag], [data-ge-marquee], [data-ge-cross], [data-ge-resize], [data-ge-gap-drag], [data-ge-tdrag], [data-ge-tresize], [data-ge-tcells]) :is(.ge-outline-scroll, .ge-outline-ticks, .ge-outline-grip) { pointer-events: none; }
+  :root:is([data-ge-drag], [data-ge-marquee], [data-ge-cross], [data-ge-resize], [data-ge-gap-drag], [data-ge-tdrag], [data-ge-tresize], [data-ge-tcells]) :is(.ge-outline-scroll, .ge-outline-ticks, .ge-outline-grip, .ge-outline-card-grip) { pointer-events: none; }
 
   /* A heading lit for a moment after a jump: its fill's shape, a quiet gray. */
   .ge-outline-flash { z-index: ${IN_LAYER.tint}; pointer-events: none; background: var(--ge-outline-flash); }
@@ -178,6 +206,7 @@ export function createOutline({ slug }) {
 
   let on = outlineOpen(slug); // this report's switch (off until switched on here)
   let chosen = preference("outlineWidth"); // the list's width in full as the reader dragged it (0: the default)
+  let collapsed = preference("outlineCollapsed"); // the reader collapsed the list to its strip (a click on its guide)
   let form = null; // the form shown: "full", "strip" or null
   let tree = [];
   let rows = [];
@@ -199,9 +228,12 @@ export function createOutline({ slug }) {
   let flashing = null; // { node, heading }: the heading lit after a jump
 
   const list = createList({ jump: go, fold: toggle, escape: giveBack, page: (direction) => page(direction) });
-  const scroller = element("div", { class: "ge-outline-scroll" }, list.node);
+  // The grip in the scroller, before the list, placed by the frame (it neither scrolls nor counts in what
+  // scrolls): in one stacking context with the rows' triangles (the scroller's, masked at its ends), so a
+  // top-level one shown stands over it (STYLE).
   const grip = element("div", { class: "ge-outline-grip", role: "separator", "aria-orientation": "vertical", "aria-label": t("拖动调整目录宽度") });
-  const dock = element("nav", { class: "ge-outline", "aria-label": t("目录"), "data-doc-dev": "", hidden: "" }, element("div", { class: "ge-outline-frame" }, scroller, grip));
+  const scroller = element("div", { class: "ge-outline-scroll" }, grip, list.node);
+  const dock = element("nav", { class: "ge-outline", "aria-label": t("目录"), "data-doc-dev": "", hidden: "" }, element("div", { class: "ge-outline-frame" }, scroller));
   const strip = createStrip({
     list,
     opened: () => frames.wake(),
@@ -318,9 +350,11 @@ export function createOutline({ slug }) {
     }
   }
 
+  // The grips stand in the scrollers but are not the list (placed by the frame, the card): the wheel over one scrolls the page.
+  const onList = (target) => holds(target) && !target.closest?.(GRIPS) ? target.closest?.(".ge-outline-scroll") ?? null : null;
   for (const box of [scroller, strip.scroll]) {
     box.addEventListener("scroll", edges, { passive: true });
-    for (const type of ["wheel", "touchmove"]) box.addEventListener(type, () => { listScrolled = Date.now(); }, { passive: true });
+    for (const type of ["wheel", "touchmove"]) box.addEventListener(type, (event) => { if (onList(event.target)) listScrolled = Date.now(); }, { passive: true });
   }
   for (const node of [dock, strip.strip, strip.card]) {
     node.addEventListener("pointerenter", () => { pointerIn = true; });
@@ -454,7 +488,7 @@ export function createOutline({ slug }) {
       const area = node.ref?.closest(SHEETS.match);
       if (!area) return;
       const key = node.ref.getAttribute(SHEETS.tabKey);
-      globalThis.DocKit.reveal([...area.children].find((child) => child.getAttribute(SHEETS.panelKey) === key) ?? area);
+      reveal([...area.children].find((child) => child.getAttribute(SHEETS.panelKey) === key) ?? area);
       chosenKey = null;
       landedAt = null;
       jumping = true;
@@ -462,7 +496,7 @@ export function createOutline({ slug }) {
     } else {
       const heading = node.ref;
       if (!heading?.isConnected) return;
-      globalThis.DocKit.reveal(heading);
+      reveal(heading); // a fold hiding it opened, not its own (fold/)
       chosenKey = node.key;
       landedAt = null;
       jumping = true;
@@ -512,8 +546,8 @@ export function createOutline({ slug }) {
   // The wheel over the list scrolls it, and at its end in the wheel's way the page: then it is the reader's.
   const listEnd = (box, down) => (down ? box.scrollTop + box.clientHeight >= box.scrollHeight - 1 : box.scrollTop <= 0);
   addEventListener("wheel", (event) => {
-    const box = holds(event.target) ? event.target.closest(".ge-outline-scroll") : null;
-    if (!holds(event.target) || !box || listEnd(box, event.deltaY > 0)) takeOver();
+    const box = onList(event.target);
+    if (!box || listEnd(box, event.deltaY > 0)) takeOver();
   }, { passive: true, capture: true });
   addEventListener("touchstart", (event) => { if (!holds(event.target)) takeOver(); }, { passive: true, capture: true });
   addEventListener("keydown", (event) => {
@@ -604,13 +638,19 @@ export function createOutline({ slug }) {
   cardWidth();
 
   // Shown in the form the room gives it as the editor starts, at once (it comes with the page), then
-  // as the room changes (the window, the list's width) and switched on or off by the
-  // reader, faded in (switched off, gone at once). Another page of the origin dragging the list's width
-  // (every report's): followed. This report's outline switched by another page (the workbench's top bar,
+  // as the room changes (the window, the list's width, the reader's collapse) and switched on or off by
+  // the reader, faded in (switched off, gone at once). Another page of the origin dragging the list's
+  // width or collapsing it (every report's): followed. This report's outline switched by another page (the workbench's top bar,
   // the report in another tab): followed; another report's switch changes nothing here.
-  show(setMargin({ outline: on, outlineWidth: chosen }));
+  show(setMargin({ outline: on, outlineWidth: chosen, collapsed }));
   onMargin((layout) => show(layout, { fade: true }));
   onPreferences(() => {
+    const fold = preference("outlineCollapsed");
+    if (fold !== collapsed) {
+      endSizing(false);
+      collapsed = fold;
+      setMargin({ collapsed });
+    }
     const width = preference("outlineWidth");
     if (width === chosen || sizing) return;
     chosen = width;
@@ -624,37 +664,42 @@ export function createOutline({ slug }) {
     show(setMargin({ outline: on }), { fade: true });
   });
 
-  // ---------- the width ----------
+  // ---------- the width, collapsed ----------
 
   // The guide dragged: the list wider or narrower as the pointer goes (the column staying in the middle
   // of what it leaves: margin.mjs), within 160px and what leaves the column its edge room at both sides
-  // (outlineMost); let go, the
+  // (outlineMost), once the pointer has gone CLICK px across (let go short of that, it was a click: the
+  // list collapsed); let go, the
   // width is the reader's (every report, every page of the origin); Esc, the window losing the focus or
   // the pointer taken away put it back.
-  let sizing = null; // { x, width, most, now, before }
+  let sizing = null; // { x, width, most, now, before, moved }
   grip.addEventListener("pointerdown", (event) => {
     if (event.button !== 0 || form !== "full") return;
     event.preventDefault();
     const width = Math.round(dock.getBoundingClientRect().width);
-    sizing = { x: event.clientX, width, most: Math.max(width, outlineMost()), now: width, before: chosen };
+    sizing = { x: event.clientX, width, most: Math.max(width, outlineMost()), now: width, before: chosen, moved: false };
     try { document.documentElement.setPointerCapture(event.pointerId); } catch {}
     document.documentElement.setAttribute(RESIZING, "");
   });
   document.documentElement.addEventListener("pointermove", (event) => {
     if (!sizing) return;
+    if (!sizing.moved && Math.abs(event.clientX - sizing.x) < CLICK) return;
+    sizing.moved = true;
     const width = Math.round(Math.max(MARGIN.fullMin, Math.min(sizing.most, sizing.width + sizing.x - event.clientX)));
     if (width === sizing.now) return;
     sizing.now = width;
     setMargin({ outlineWidth: width });
   });
   // Let go where it began (or never moved): nothing chosen, the width chosen before laid out again (the
-  // drag gave the layout the width shown, narrower than the one chosen where the room is short).
+  // drag gave the layout the width shown, narrower than the one chosen where the room is short). Let go
+  // before it moved: a click, the list collapsed.
   function endSizing(keep) {
     if (!sizing) return;
-    const { now, before, width } = sizing;
+    const { now, before, width, moved } = sizing;
     sizing = null;
     document.documentElement.removeAttribute(RESIZING);
-    if (!keep || now === width) setMargin({ outlineWidth: before });
+    if (keep && !moved) setCollapsed(true);
+    else if (!keep || now === width) setMargin({ outlineWidth: before });
     else {
       chosen = now;
       setPreference("outlineWidth", now);
@@ -665,6 +710,47 @@ export function createOutline({ slug }) {
   endsGesture({ active: () => Boolean(sizing), cancel: () => endSizing(false) });
   cancelOnEscape({ active: () => Boolean(sizing), cancel: () => endSizing(false) });
 
+  // The reader's collapse, kept for every report and every page of the origin (the page's head reads it
+  // before the page shows); the form is the room's to give (margin.mjs): taken back where the room is
+  // short, the strip stays and the list comes once there is room.
+  function setCollapsed(value) {
+    if (value === collapsed) return;
+    collapsed = value;
+    setPreference("outlineCollapsed", value);
+    setMargin({ collapsed: value });
+  }
+
+  // A tooltip by the pointer on a guide (a tall target: over where the pointer rests, as the
+  // workbench's sidebar edge has it), once it has rested there a moment; none while the guide is pressed.
+  const tipAt = (event, text, hint) => tooltipAt({ left: event.clientX, right: event.clientX, top: event.clientY, bottom: event.clientY, width: 0, height: 0 }, text, hint);
+  function guideTip(node, says) {
+    const rest = (event) => {
+      if (sizing || event.buttons || document.querySelector(".ge-tip")) return; // shown: it stays where it came
+      tipAt(event, ...says());
+    };
+    node.addEventListener("pointerenter", rest);
+    node.addEventListener("pointermove", rest);
+    node.addEventListener("pointerleave", hideTooltip);
+    node.addEventListener("pointerdown", hideTooltip);
+  }
+  const waiting = () => t("页面不够宽，变宽后展开");
+  guideTip(grip, () => [t("收起目录"), t("拖动调整宽度")]);
+  // The card's guide: a hand and its darker bar only where the room gives the list (data-fits), else
+  // its tooltip says why a click opens nothing (the list comes once there is room).
+  const fits = () => {
+    const now = listFits();
+    strip.guide.toggleAttribute("data-fits", now);
+    return now;
+  };
+  guideTip(strip.guide, () => [t("展开目录"), fits() ? null : waiting()]);
+  strip.guide.addEventListener("pointerenter", fits);
+  strip.guide.addEventListener("click", (event) => {
+    if (event.button !== 0 || form !== "strip") return;
+    const room = fits();
+    setCollapsed(false);
+    if (!room) tipAt(event, t("展开目录"), waiting());
+  });
+
 
   // The page changing: read again on the next frame when it may change what is listed (one reading
   // a frame however much changed; words typed elsewhere only move the headings: the current one again).

package/browser/editor/page/outline/list.mjs

@@ -6,16 +6,30 @@ import { keyAction } from "./tree.mjs";
 // The outline's rows (outline/index.mjs puts them in its dock, or in the strip's card): a tree as
 // aria has it (role tree, a treeitem a row with its level, open or folded, the current one
 // aria-current), one tab stop (the current row, else the first), the keys of tree.mjs keyAction.
-// A row's title, cut short, shows whole in the shared tooltip, at the list's left (over the gutter,
-// not the rows above); a parent's triangle at its title's left, in a column of its own (a leaf keeps
-// the room, so titles of a level line up), folds or unfolds it (a folded one always shows it, an open
-// one while the pointer is over the list or the keyboard is in it: STYLE in index.mjs); a click
-// elsewhere on the row goes to its heading. The strip (strip.mjs) lights a row from outside (hot): the
-// one its line under the pointer stands for, filled as under the pointer, a blue segment on the guide.
+// A row's title, cut short, shows whole in the shared tooltip, left of the list (over the gutter,
+// not the rows above); a parent's triangle just short of its title, out of the row's flow (titles of
+// a level line up, a leaf's too), folds or unfolds it (a folded one always
+// shows it, an open one while the pointer is on the rows or the keyboard is in the list: STYLE in
+// index.mjs); a click elsewhere on the row goes to its heading. The strip (strip.mjs) lights a row
+// from outside (hot): the one its line under the pointer stands for, filled as under the pointer, a
+// blue segment on the guide.
 
 export const ROW = 28; // a row's height
 const MARK = 16; // the current row's segment on the guide (and the hot row's)
 
+/**
+ * The list's geometry (px from its left edge, where the column's right room ends: margin.mjs; index.mjs
+ * STYLE draws it): the guide's hairline at `guide` (its grip from MARGIN.grip left of it to 5px right);
+ * the rows from `row` (their fill 2px clear of the hairline, a top-level row's a `step` further left to take in
+ * its triangle: index.mjs STYLE); a title `text` into its row, `step`
+ * further a level (the top level's 26px in, 8px clear of the hairline; a tab's pill 22px in, 4px clear);
+ * a parent's triangle `twist` wide (its 16px glyph centered on it) in its row's indentation, `gap`
+ * short of its title at every level (the top level's from 11px in, on the hairline and its grip, which it
+ * stands over while shown; the next level's from 23px in). Until 2026-11-07 the top level's stood in the
+ * list's first 13px, left of the guide, which the user found too far from their titles.
+ */
+export const LIST = Object.freeze({ twist: 13, guide: 17, row: 20, text: 6, step: 12, gap: 2 });
+
 // A small solid triangle on the 20-unit grid, pointing right (folded); turned down when open.
 export const TRIANGLE = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M8 6.5v7l5-3.5z"/></svg>';
 
@@ -43,16 +57,14 @@ export function createList({ jump, fold, escape, page }) {
     if (item.kind === "tab") label.append(named);
     else label.textContent = item.text;
     const open = !folded.has(item.key);
-    const twist = item.children.length
-      ? element("span", { class: "ge-outline-twist", role: "button", "aria-label": open ? t("折叠") : t("展开"), html: TRIANGLE })
-      : element("span", { class: "ge-outline-slot", "aria-hidden": "true" });
-    const row = element("div", { class: "ge-outline-row", role: "treeitem", tabindex: "-1", "aria-level": String(depth + 1), "data-index": String(index), "data-kind": item.kind }, twist, label);
+    const twist = item.children.length ? [element("span", { class: "ge-outline-twist", role: "button", "aria-label": open ? t("折叠") : t("展开"), html: TRIANGLE })] : [];
+    const row = element("div", { class: "ge-outline-row", role: "treeitem", tabindex: "-1", "aria-level": String(depth + 1), "data-index": String(index), "data-kind": item.kind }, ...twist, label);
     row.style.setProperty("--ge-depth", String(depth));
     if (item.kind === "tab" && item.shown) row.dataset.shown = "";
     // The top level's headings (bold): at the top, or right under a tab (a tab's own top level).
     if (item.kind === "heading" && (parent < 0 || rows[parent]?.node.kind === "tab")) row.dataset.top = "";
     if (item.children.length) row.setAttribute("aria-expanded", String(open));
-    tooltip(row, () => (cut(named) ? item.text : null), null, { placement: "left", align: "center", gap: 14 });
+    tooltip(row, () => (cut(named) ? item.text : null), null, { placement: "left", align: "center", gap: LIST.row + 8 });
     return row;
   }
 

package/browser/editor/page/outline/read.mjs

@@ -10,7 +10,7 @@ import { SHEETS } from "../../components/kit.mjs";
 // ones too, each with its panel's headings. A heading with no text (just made) has no row yet.
 
 export const HEADING = ':is(h1, h2, h3, h4)[data-ge-unit-kind="heading"]';
-const LEFT_OUT = "dialog, figure, table, li, .doc-header, template, [data-doc-dev]";
+export const LEFT_OUT = "dialog, figure, table, li, .doc-header, template, [data-doc-dev]";
 const SCOPES = ".doc-columns, details";
 
 // ---------- a formula as a row reads it ----------

package/browser/editor/page/outline/strip.mjs

@@ -21,6 +21,9 @@ import { ticksOf } from "./tree.mjs";
 // or a heading chosen by a key closes it too). Esc on the strip itself leaves it as Esc in the list
 // does (escape). Folding in the card keeps it open; it follows the page's scroll (its current row)
 // while open, unless the pointer is on it. With no headings the strip shows the outline's icon.
+//
+// The card's guide (its list's hairline) has a grip of its own (`guide`, a few px either side of it):
+// index.mjs makes a click on it take the reader's collapse back (the list in full where the room allows it).
 
 // Three lines, the lower two set in: the 目录 icon (the workbench's 更多 row draws the same, icons.ts outline).
 export const OUTLINE_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3.75 5.25h12.5M7.25 10h9M7.25 14.75h9"/></svg>';
@@ -39,7 +42,9 @@ const still = () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").
 export function createStrip({ list, opened, closed, escape, choose }) {
   const button = element("div", { class: "ge-outline-ticks", role: "button", tabindex: "0", "aria-label": t("目录"), "aria-expanded": "false" });
   const strip = element("div", { class: "ge-outline-strip", "data-doc-dev": "", hidden: "" }, button);
-  const scroll = element("div", { class: "ge-outline-scroll" });
+  // Its guide's grip in its scroller, before the list, placed by the card (as the dock's: index.mjs).
+  const guide = element("div", { class: "ge-outline-card-grip", "aria-hidden": "true" });
+  const scroll = element("div", { class: "ge-outline-scroll" }, guide);
   const card = element("nav", { class: "ge-outline-card", "aria-label": t("目录"), "data-doc-dev": "", hidden: "" }, scroll);
   let open = false;
   let keyed = false; // opened by a key (the focus in it), not by the pointer
@@ -246,6 +251,7 @@ export function createStrip({ list, opened, closed, escape, choose }) {
     strip,
     card,
     scroll,
+    guide,
     draw,
     openCard,
     closeCard,

package/browser/editor/page/panel.mjs

@@ -1,11 +1,12 @@
 import { Z } from "../../shared/layers.mjs";
 
-// The editor's one bottom panel: the conflicts' (conflicts.mjs, left) and the lost texts' (notices.mjs,
-// right) are the same card: a small muted head with a red dot, items under it, the reader's words as
+// 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";
+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
@@ -41,7 +42,7 @@ export function panelGone(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-font, system-ui, sans-serif); }
+  :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; }

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

@@ -30,7 +30,7 @@ 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-font, system-ui, sans-serif); white-space: nowrap; 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

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

@@ -10,19 +10,21 @@ import { t } from "../../../shared/i18n/index.mjs";
 // tab is clicked (undo clicks it back). One undo step, which selects the blocks again. A box that
 // always holds a block gets an empty paragraph once they are gone (core.mjs tidyEmptied), the caret
 // in it. That one empty paragraph stays (keptAnyway: it would be put back as it is), so deleting
-// only it does nothing and says nothing.
+// only it does nothing and says nothing. A folded heading goes with what it hides, or as the section
+// it covers whole (fold/ takenWith).
 
 /**
  * info: block-info.mjs. selection: selection/index.mjs. struct(parents, touched, mutate): the
  * editor's undoable structural change (history.mjs). say: the status line. closeMenu(): the block
- * menu closes. forget(): the handle forgets the block it stood beside.
+ * menu closes. forget(): the handle forgets the block it stood beside. folds: the headings' folds (fold/).
  */
-export function createDelete({ info, selection, struct, say, closeMenu, forget }) {
-  const { kindOf, nameOf, keepText } = info;
+export function createDelete({ info, selection, struct, say, closeMenu, forget, folds = null }) {
+  const { kindOf, nameOf, keepText, named } = info;
 
   return function remove(targets = selection.picked) {
     closeMenu();
-    const list = ordered([targets].flat().filter(alive)).filter((target) => !keptAnyway(target));
+    const picked = ordered([targets].flat().filter(alive));
+    const list = (folds ? folds.takenWith(picked) : picked).filter((target) => !keptAnyway(target));
     if (list.length === 0) return;
     const refused = list.map((target) => [target, keepText(target, list)]).find(([, reason]) => reason);
     if (refused) {
@@ -53,7 +55,7 @@ export function createDelete({ info, selection, struct, say, closeMenu, forget }
     });
     if (done?.caret) caretAt(done.caret, "start");
     const emptied = nodes.some((node) => !list.includes(node));
-    const name = list.length === 1 ? nameOf(nodes[0]) : t("{0} 块", list.length);
+    const name = list.length === 1 ? nameOf(nodes[0]) : folds ? folds.namedWith(picked, list, named) : t("{0} 块", list.length);
     say(t("已删除{0}{1}{2} · Ctrl+Z 撤销", name, emptied ? t("（外层已空，一并删除）") : "", tabs.length > 0 ? t("，连同其中的内容") : ""));
   };
 }