@heycys/gallery 0.1.1 → 0.1.2

package/browser/editor/page/editor.mjs

@@ -18,8 +18,9 @@ import { SOLO, connectWorkbench } from "./session.mjs";
 import { lookOfElement } from "../../shared/document-look.mjs";
 import { belowTargets, convertBlock, convertGroup, groupParents, groupTargets, noTextToCarry, targetsOf, touchedBy, turnInto, turnParents, turnUnit, typeOf } from "./convert.mjs";
 import { joinCode, rangeAt, rangeOffsets } from "./marks.mjs";
-import { addStyle, button, copyAddress, element, layer } from "./ui.mjs";
+import { addStyle, copyAddress, element, layer, textButton } from "./ui.mjs";
 import { createClipboard } from "./clipboard/index.mjs";
+import { serveFiles } from "./served.mjs";
 import { createFormatting } from "./format-bar/index.mjs";
 import { connectHints, hideHint, readOnlyReason, scheduleHint, trackPointer } from "./hints/index.mjs";
 import { createInsert } from "./insert/index.mjs";
@@ -58,6 +59,7 @@ import { goBackTo, placeIn, unmoved } from "../../shared/reading-place.mjs";
 import { heldList, holdPages } from "./links/pages.mjs";
 import { hideBlocks } from "./offered.mjs";
 import { local, storageOf } from "./storage.mjs";
+import { createTodoWrites } from "./todo-writes.mjs";
 import { language, t } from "../../shared/i18n/index.mjs";
 
 // In-place editing for the live preview (`npm run dev:local` only; never exported).
@@ -268,7 +270,12 @@ const { newParagraph } = insert;
 
 // The icon picker's images go into the report's folder (editor/media-store.mjs), where the server serves them.
 const assetUrl = (file) => mediaUrl("asset", MAP.slug, file);
+serveFiles(assetUrl); // a table cell's pictures (单元格里的图片) show where the server serves them
 connectPicker({ slug: MAP.slug, token: MAP.token, notify: say });
+// A block of the page checking a to-do of a document (context.workspace.setTodo: ./todo-writes.mjs): written
+// by the workspace's service, this one's too as any write it did not make, which the page merges; no step of
+// its undo (only a custom page keeps one: board/).
+createTodoWrites({ token: MAP.token }).listen();
 // Whether a block tool may act: the page edits, no reload is on its way and no field of a component is being edited.
 const active = () => editing && !autosave?.state.reloading && !fieldOpen();
 // A picture or file sent to the report's folder (kind: "image", "file" or "embed"): the server's answer.
@@ -372,6 +379,7 @@ const clipboard = createClipboard({
   pageLink: pageLinkOf,
   titleBold: () => formatting?.armed ?? false, // a node's empty title: what is pasted there bold, as typed
   showCaret,
+  pictures: () => tables?.pictures ?? null, // a table cell's (table/pictures.mjs)
 });
 
 // ---------- editing ----------
@@ -440,17 +448,19 @@ function enter() {
       conflicts.add(entries.map((entry) => ({ ...entry, key: `r:${entry.key}`, revert: entry.key, kind: entry.written ? "reverted-source" : entry.unit === undefined ? "reverted" : "reverted-unit" })));
       say(t("AI 的写入把你之前保存的 {0} 处修改改回去了：在左下方选择保留哪一边。", entries.length), "error");
     },
+    listed: () => showLost(), // a block the page before this one made, which someone else's write took out
   });
   conflicts = createConflicts({ act: decide, nodeOf: conflictNode, restorable, copyBlock: (node) => clipboard.copyBlocks([node]), say });
   editing = true;
   document.documentElement.setAttribute("data-ge-editing", "");
+  typing.untitled(); // an empty title says 未命名文档 from the start
   blocks?.folds.start(); // what was folded, folded again in this task: no frame shows it open (fold/)
   refresh();
   for (const page of pageObjects()) page.entered?.();
 }
 
 // What the page says when what a component wrote went by a manifest that changed: given up, the page shown again.
-const outdatedNotice = () => t("组件包刚刚变了，这次改动没有保存，页面已按新的组件重新显示。");
+const outdatedNotice = () => t("自定义块刚刚变了，这次改动没有保存，页面已按新的块重新显示。");
 
 // What 仍然调整 wrote over someone else's change of what a component writes, by page unit: the step that
 // gives theirs back (installed/ overwrite), and when its write went in, all of it (commit.mjs `forced`).
@@ -465,9 +475,10 @@ const keepsOverwrite = (asked) => !asked && [...overwrites.values()].some(({ lan
 
 // A commit was taken in (commit.mjs): a block merged with someone else's words shows the merge;
 // what the file refused is flagged and held back, the rest goes on.
-function committed({ conflicts: held, merged, outdated, forced = [] }, receipt) {
+function committed({ conflicts: held, merged, outdated, forced = [], rekeyed = [] }, receipt) {
   agentChanges?.committed(receipt);
   for (const host of merged) history.merged(host);
+  history.rekeyed(rekeyed); // the keys of tables the file gave otherwise, in the steps that recorded them
   for (const unit of forced) {
     const written = overwrites.get(unit);
     if (!written || written.landed > 0) continue;
@@ -485,7 +496,7 @@ function committed({ conflicts: held, merged, outdated, forced = [] }, receipt)
     conflicts.add(held);
     const conflicted = held.filter((entry) => !unfit(entry) && !packageChanged(entry)).length;
     const packaged = held.filter(packageChanged).length;
-    say(conflicted > 0 ? t("{0} 处修改和文件的最新版本冲突，没有保存：在左下方选择怎么处理。", conflicted) : packaged > 0 ? t("组件包刚刚变了，{0} 处修改没有保存：在左下方选择怎么处理。", packaged) : t("{0} 处内容文档存不下，没有保存：在左下方选择怎么处理。", held.length), "error");
+    say(conflicted > 0 ? t("{0} 处修改和文件的最新版本冲突，没有保存：在左下方选择怎么处理。", conflicted) : packaged > 0 ? t("自定义块刚刚变了，{0} 处修改没有保存：在左下方选择怎么处理。", packaged) : t("{0} 处内容文档存不下，没有保存：在左下方选择怎么处理。", held.length), "error");
   }
   else if (outdated || merged.length > 0 || receipt.texts?.some((entry) => entry.status === "merged")) {
     const count = receipt.texts.filter((entry) => entry.status === "merged").length;
@@ -612,6 +623,7 @@ function markChanged(now = false) {
     conflicts?.reflag();
   }
   if (messageKind() === "error") settle(); // the reader is dealing with it
+  typing.untitled(); // a title emptied (or filled) by any change says 未命名文档 (or nothing) at once
   lastChange = Date.now();
   discrete ||= now;
   const counting = checkPending;
@@ -691,7 +703,10 @@ function afterConvert(focus, type, said) {
  * heading) and the new block turns into the type; below any other block, an empty paragraph of its
  * box does (the first box out that takes one). One undo step.
  */
-function insertBelow(target, type, typed = null) {
+// `also` (a table's 视图 ›: page/table/views.mjs): `attributes` ([element, names]) the step records too, and
+// `done(made)` run in it on the new block (the element where the empty paragraph was), so that what binds
+// the block to the one above it is the same step.
+function insertBelow(target, type, typed = null, also = null) {
   const splits = isHost(target) && can(target, "split");
   let after = target;
   while (!splits && after && !accepts(after.parentElement?.getAttribute("data-ge-box-kind"), "paragraph")) after = after.parentElement?.closest(OUTER);
@@ -709,10 +724,12 @@ function insertBelow(target, type, typed = null) {
       after.after(fresh);
     }
     if (!fresh) return null;
+    const prior = fresh.previousSibling; // what the new block stands right after, made where the paragraph was
     const turned = type === "paragraph" && fresh.localName === "p" ? { focus: null, created: [] } : convertBlock(fresh, type, { fresh: true });
+    also?.done?.(fresh.isConnected ? fresh : prior?.nextElementSibling ?? null);
     const focus = turned.focus ?? fresh;
     return { touched: splits ? [target, focus] : [focus], focus, created: turned.created };
-  });
+  }, { attributes: also?.attributes ?? [] });
   if (result) afterConvert(result.focus, type, t("已插入{0}", menuRow(type).label));
 }
 
@@ -1160,7 +1177,8 @@ async function newSubpage(title) {
 }
 
 // The report's title as the reader sees it now (while editing, the title block's text).
-const currentTitle = () => (document.querySelector('[data-ge-kind="title"]') ?? document.querySelector("h1.doc-title, .doc-header h1"))?.textContent.replace(/\s+/g, " ").trim() ?? "";
+const titleNode = () => document.querySelector('[data-ge-kind="title"]') ?? document.querySelector("h1.doc-title, .doc-header h1");
+const currentTitle = () => titleNode()?.textContent.replace(/\s+/g, " ").trim() ?? "";
 
 // This page, as the list of pages takes it (links/pages.mjs).
 const thisPage = () => ({ slug: MAP.slug, title: currentTitle() });
@@ -1454,8 +1472,20 @@ function handOff() {
 function connect() {
   // The look the page shows (字体与布局: its <html>'s, src/shared/document-look.mjs), which the workbench's
   // 更多 marks as chosen; told again when it changes (the kit's ui.js, doc-look-change).
-  workbench = connectWorkbench({ slug: MAP.slug, snapshot: () => ({ title: currentTitle(), icon: pageIcon(), look: lookOfElement(document.documentElement), state: sessionState(), annotations: annotate?.count() }), commands: COMMANDS, modals: modalOps() });
+  // `title`: null for a page with no title at all (the workbench names it by its doc.json); "" an untitled one (未命名文档).
+  workbench = connectWorkbench({ slug: MAP.slug, snapshot: () => ({ title: titleNode() ? currentTitle() : null, icon: pageIcon(), look: lookOfElement(document.documentElement), state: sessionState(), annotations: annotate?.count() }), commands: COMMANDS, modals: modalOps() });
   addEventListener("doc-look-change", () => workbench?.update());
+  // A block's context.workspace.open (the kit's runtime/workspace.js): a document, or a block of one, goes
+  // where a link to it goes (goTo: in the workbench, its address; on its own, the page once saved); a custom
+  // page, the workbench's #@<slug>, or /pages/<slug> once saved.
+  addEventListener("doc-open-request", (event) => {
+    const { slug = null, block = null, page = null } = event.detail ?? {};
+    event.preventDefault();
+    if (page) {
+      if (window.parent !== window && !SOLO) workbench?.open({ hash: `@${page}` });
+      else COMMANDS["prepare-close"]().then(() => location.assign(`/pages/${page}`));
+    } else goTo({ slug, block }, `/generated/${slug}.html${block ? `#${encodeURIComponent(block)}` : ""}`);
+  });
   relayTo(workbench ? workbench.notice : null, workbench ? workbench.noticeRoom : null); // the workbench shows the page's notices, above the page's bottom panels
   handOff();
   // A page on its own in a frame (?solo: the 写作偏好 dialog's, which no session asks to save) is saved
@@ -1514,6 +1544,10 @@ async function start() {
     TAB = newTab();
     session.set(keys.tab, TAB);
   }
+  // What earlier pages of the document committed, made and wrote (this tab's, and those of tabs no longer
+  // open), asked of at once where this page opened on another version of the file than they last knew
+  // (its cards and list said through the workbench).
+  autosave?.opened(open);
   const prefix = pendingKey(MAP.slug, "");
   const left = local.keys().filter((key) => key.startsWith(prefix) && key !== pendingKey(MAP.slug, TAB) && !open.has(key.slice(prefix.length)));
   if (left.length === 0) return;
@@ -1573,7 +1607,7 @@ function showLost() {
     if (block) {
       panelItem(
         element("p", { text: t("文件里的这一块已被修改：复制你的版本，再粘贴到页面上。") }),
-        element("div", { class: "ge-actions" }, button(t("复制这一块"), () => { if (!clipboard.copyBlocks([block])) say(t("没能完成，请再试一次。"), "error"); })),
+        element("div", { class: "ge-actions" }, textButton(t("复制这一块"), () => { if (!clipboard.copyBlocks([block])) say(t("没能完成，请再试一次。"), "error"); })),
       );
       continue;
     }
@@ -1581,10 +1615,10 @@ function showLost() {
     panelItem(
       element("p", { text: LOST[item.why] ?? LOST.refused }),
       element("div", { class: "ge-version", text }),
-      element("div", { class: "ge-actions" }, button(t("复制文字"), () => navigator.clipboard?.writeText(text).then(() => say(t("已复制。"))))),
+      element("div", { class: "ge-actions" }, textButton(t("复制文字"), () => navigator.clipboard?.writeText(text).then(() => say(t("已复制。"))))),
     );
   }
-  panelItem(element("div", { class: "ge-actions" }, button(t("都处理好了，不再保留"), () => {
+  panelItem(element("div", { class: "ge-actions" }, textButton(t("都处理好了，不再保留"), () => {
     local.remove(lostKey(MAP.slug));
     closePanel();
   }, { primary: true })));
@@ -1617,10 +1651,13 @@ function boot() {
     copyLink: SOLO ? null : copyBlockLink, // what ?solo shows (写作偏好) only its dialog opens: no address leads there
     linkAhead: () => holdPages(thisPage),
   });
-  resize = createResize({ units, active, look: lookStep, say, owns: (node) => tables?.owns(node) ?? false });
-  gaps = createColumnGaps({ active, struct, look: lookStep, say });
+  resize = createResize({ units, active, look: lookStep, say, settle, owns: (node) => tables?.owns(node) ?? false });
+  gaps = createColumnGaps({ active, struct, look: lookStep, say, settle });
   for (const page of pageObjects()) page.install?.(); // the round "+" at a flowchart node's right, renaming Sheet tabs
-  tables = createTableEditing({ active, struct, look: lookStep, selectBlock: (unit) => blocks.select(unit), resizeTable: (event, unit, axis) => resize.startTable(event, unit, axis), say, ownCells: (data) => clipboard.ownCells(data), typedKey });
+  tables = createTableEditing({
+    active, struct, look: lookStep, selectBlock: (unit) => blocks.select(unit), resizeTable: (event, unit, axis) => resize.startTable(event, unit, axis), say, cellsOf: (data) => clipboard.cellsOf(data), upload: uploadTo, typedKey,
+    recordStep, insertBelow: (unit, type, also) => insertBelow(unit, type, null, also),
+  });
   selectAll = createSelectAll({ blocks, say, cells: { table: () => tables.selectedTable, clear: () => tables.clear() } });
   createFrame(() => editing);
   createFlags(() => editing);

package/browser/editor/page/emoji-picker/styles.mjs

@@ -64,14 +64,14 @@ export const PICKER_CSS = `
 .nmm-cell.focus-visible { background: var(--ge-press); }
 .nmm-cell img { display: block; }
 .nmm-cell img.notion-custom-emoji { object-fit: contain; color: transparent; }
-/* 添加表情符号: the custom group's first cell, a round plus (26, 3 around, a 1px --ge-edge inside, the plus
-   --ge-ico3); with no result, a button (28 high, a 1px --ge-edge inside, 13px / 500) */
-.nmm-cell.nmm-add-cell { width: 26px; height: 26px; margin: 3px; box-sizing: border-box; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ge-edge); --nmm-icon: var(--ge-ico3); }
+/* 添加表情符号: the custom group's first cell, a round plus (26, 3 around, the plus --ge-ico3, no line round
+   it: gray under the pointer as a cell); with no result, a button (28 high, 13px / 500, no line either) */
+.nmm-cell.nmm-add-cell { width: 26px; height: 26px; margin: 3px; box-sizing: border-box; border-radius: 50%; --nmm-icon: var(--ge-ico3); }
 .nmm-cell.nmm-add-cell.focused { --nmm-icon: var(--ge-ico); }
 .nmm-empty { padding: 8px 12px; }
 .nmm-empty-caption { display: flex; align-items: center; height: 20px; padding: 0 4px; font-size: 12px; font-weight: 500; color: var(--ge-tx3); }
 .nmm-empty.with-add { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
-.nmm-cell.nmm-add-button { justify-content: flex-start; gap: 6px; width: max-content; height: 28px; padding: 0 10px 0 8px; box-sizing: border-box; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ge-edge); font-size: 13px; font-weight: 500; line-height: 1; color: var(--ge-tx); white-space: nowrap; --nmm-icon: var(--ge-ico2); }
+.nmm-cell.nmm-add-button { justify-content: flex-start; gap: 6px; width: max-content; height: 28px; padding: 0 10px 0 8px; box-sizing: border-box; border-radius: 6px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--ge-tx); white-space: nowrap; --nmm-icon: var(--ge-ico2); }
 
 /* The category bar: a --ge-line above it, 6 12 8; buttons 28 x 28, icons 18 in --ge-ico3; the group scrolled
    to on --ge-hover, its icon --ge-ico; a group with no emoji faded to .35 and not to be clicked (自定义 and
@@ -106,8 +106,8 @@ export const PICKER_CSS = `
 
 /* The 上传 tab and the 添加表情符号 popup (upload.mjs): the zone an image goes in on --ge-field, a 1px
    --ge-edge inside it, rounded 8, deeper while a file is dragged over it (--ge-hover, --ge-ico3), never blue;
-   保存 a text button (--ge-tx, 500, --ge-hover under the pointer, --ge-tx3 while it cannot be clicked), 取消 /
-   返回 --ge-tx2; the checkbox checked --ge-tx2 with a white tick; an error --ge-red */
+   保存 the pale blue primary and 取消 / 返回 the plain text button (look.mjs BUTTONS: .ge-btn, dimmed while it cannot be
+   clicked); the checkbox checked --ge-tx2 with a white tick; an error --ge-red */
 .nmm-upload { display: flex; flex-direction: column; padding: 0 16px; font-size: 14px; color: var(--ge-tx); }
 .nmm-upload-title { margin-top: 14px; font-size: 14px; font-weight: 600; }
 .nmm-upload-description { margin-top: 2px; font-size: 12px; color: var(--ge-tx2); }
@@ -142,12 +142,7 @@ export const PICKER_CSS = `
 .nmm-upload-name-error { margin-top: 10px; font-size: 12px; color: var(--ge-red); }
 .nmm-upload-name-error[hidden], .nmm-upload [hidden] { display: none; }
 .nmm-upload-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 12px; }
-.nmm-upload-secondary, .nmm-upload-save { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none; }
-.nmm-upload-secondary { color: var(--ge-tx2); }
-.nmm-upload-secondary:hover { background: var(--ge-hover); color: var(--ge-tx); }
-.nmm-upload-save { color: var(--ge-tx); font-weight: 500; }
-.nmm-upload-save:not(.disabled):hover { background: var(--ge-hover); }
-.nmm-upload-save.disabled { color: var(--ge-tx3); cursor: default; }
+.nmm-upload-secondary, .nmm-upload-save { font-size: 14px; }
 .nmm-custom-emoji-popup { min-width: 280px; border-radius: 10px; background: var(--ge-bg); box-shadow: var(--ge-shadow-pop); }
 
 /* A button reached by Tab: a gray fill, not the browser's dark or blue ring; the checkbox a gray ring */

package/browser/editor/page/emoji-picker/upload.mjs

@@ -76,8 +76,8 @@ export function createUploadForm({ showTitle = false, largeEmoji = false, allowU
     `<label class="nmm-upload-name" hidden><div class="nmm-upload-name-label">${T.nameLabel}</div>` +
       `<div class="nmm-upload-input"><input type="text" placeholder="${T.namePlaceholder}" autocomplete="off" spellcheck="false"></div>` +
       `<div class="nmm-upload-name-error" hidden></div></label>` +
-    `<div class="nmm-upload-footer"><div role="button" tabindex="0" class="nmm-upload-secondary" data-act="secondary"></div>` +
-      `<div role="button" tabindex="0" class="nmm-upload-save" data-act="save">${T.save}</div></div>` +
+    `<div class="nmm-upload-footer"><div role="button" tabindex="0" class="ge-btn nmm-upload-secondary" data-act="secondary"></div>` +
+      `<div role="button" tabindex="0" class="ge-btn nmm-upload-save" data-primary data-act="save">${T.save}</div></div>` +
     `<input type="file" accept="${ACCEPT}" hidden>`;
 
   const zone = el.querySelector('.nmm-upload-zone'), wrap = el.querySelector('.nmm-upload-zone-wrap');

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

@@ -44,13 +44,12 @@ import { t } from "../../../shared/i18n/index.mjs";
 // (lineAt, blocks.mjs). The handle and the bar are drawn in the editor's own layer (overlay-layer.mjs:
 // the one of the block they stand beside), never inside a block, each belonging to the block it stands
 // beside (overlays.mjs). A press ends when the pointer comes up, is cancelled, or the handle loses the
-// pointer capture (then a drag under way is cancelled, never dropped). While the page is edited, its
+// pointer capture (then a drag under way is cancelled, never dropped). On a page the editor edits, its
 // side gutters (the kit's --doc-page-gutter, --doc-wide-gutter) are at least the room the
-// handle takes left of a block, and a little (EDGE): on a narrow window the handle stands in the
-// margin, never over the text, as Feishu's and Notion's do; the section bar has the same room on
-// the right. A wide window, whose column leaves more than that, does not change.
-
-const EDGE = ADD.width + HANDLE.width + HANDLE.gap + 12; // the page's gutter while editing: the bar's square, the grip, its gap, and room to breathe (64)
+// handle takes left of a block, and a little (margin.mjs MARGIN.edge, from the page's first paint: the
+// head's MARGIN_STYLE): on a narrow window the handle stands in the margin, never over the text, as
+// Feishu's and Notion's do; the section bar has the same room on the right. A wide window, whose column
+// leaves more than that, does not change.
 
 const STYLE = `
   .ge-handle { position: absolute; left: 0; top: 0; z-index: ${IN_LAYER.handle}; display: flex; align-items: center; height: ${HANDLE.height}px; touch-action: none; }
@@ -84,8 +83,6 @@ const STYLE = `
   .ge-section-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6px; width: 4px; border-radius: 2px; background: light-dark(rgb(55 53 47 / 14%), rgb(255 255 255 / 14%)); transition: background .08s ease-in; }
   .ge-section-bar:hover::before { background: light-dark(rgb(55 53 47 / 28%), rgb(255 255 255 / 26%)); }
   .ge-section-bar[data-active]::before { background: color-mix(in srgb, var(--doc-accent, #2678d8) 60%, transparent); }
-  /* Room for the handle beside the page's blocks: the page's gutters while editing (resize/ reads --ge-edge-room). */
-  :root[data-ge-editing] { --ge-edge-room: ${EDGE}px; --doc-page-gutter: var(--ge-edge-room); --doc-wide-gutter: var(--ge-edge-room); }
 `;
 
 // Notion's grip in size (its dragHandle icon at its icons' 20px): 2.5px dots 5px apart across and 6px down (notion-lite's were 5px down, the grip 2px shorter than Notion's: the user, 2026-10-26).

package/browser/editor/page/history.mjs

@@ -148,6 +148,23 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
     for (const stack of [undoStack, redoStack]) if (stack.includes(step)) stack.splice(stack.indexOf(step), 1);
   }
 
+  // An attribute the file gave another value than the page had (`changes`: [element, name, from, to],
+  // `to` null for none; a key of a table a commit gave a pair anew: page/commit.mjs apply), the page's
+  // element set so: the steps that recorded `from` of it record `to` instead, so that an undo or a redo
+  // puts back what the file has, never the value it changed (a table's 视图 › redone with the key its view
+  // no longer carries).
+  function rekeyed(changes) {
+    if (changes.length === 0) return;
+    for (const step of [...undoStack, ...redoStack]) {
+      for (const recorded of [step.attributesBefore, step.attributesAfter]) {
+        for (const [element, name, from, to] of changes) {
+          const values = recorded?.get(element);
+          if (values?.some(([each, value]) => each === name && value === from)) recorded.set(element, values.map(([each, value]) => [each, each === name && value === from ? to : value]));
+        }
+      }
+    }
+  }
+
   // What a step puts into a block (`from`: what the step left there, `to`: what it puts back): as
   // recorded, unless someone else's words were merged into the block since the step; then the step's
   // change three ways against what the block holds now (null: the two touch the same place).
@@ -174,8 +191,10 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
   // after undo and redo (a deleted Sheet tab switches the Sheet shown). A step that names no text block
   // it came from keeps where the caret stood, which undo puts back, as notion-lite's selectionBefore.
   // `attributes`: [element, [names]] whose attributes the step records too (a table's cells: their
-  // spans and widths, which its operations change: components/table/page.mjs).
-  function struct(parents, touched, mutate, { attributes = [] } = {}) {
+  // spans and widths, which its operations change: components/table/page.mjs). `caret`: where the caret
+  // stood in the first text block it touched is kept too, which undo puts back (notion-lite's Enter in the
+  // page's title, enter.js: "撤销后光标回到回车前的位置"; typing/ enterBody).
+  function struct(parents, touched, mutate, { attributes = [], caret = false } = {}) {
     closeTyping();
     // What the change may leave untidy is tidied after it by the components that know (rows of
     // columns with a column emptied, lists set side by side: tidy), so what they name is recorded
@@ -189,7 +208,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
     }
     // A text block among the parents (a list item whose lists change) keeps its text through undo too.
     touched = [...new Set([...touched, ...parents.filter(isHost)])];
-    const place = touched[0] ? null : caretPlace(parents[0]);
+    const place = touched[0] && !caret ? null : caretPlace(parents[0]);
     const before = parents.map(contentOf);
     const htmlBefore = new Map(touched.map((node) => [node, ownHTML(node)]));
     const classesBefore = new Map(touched.map((node) => [node, new Set(node.classList)]));
@@ -219,7 +238,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
         .filter(({ added, removed }) => added.length > 0 || removed.length > 0),
       attributesBefore,
       attributesAfter: attributesOf(),
-      focusBefore: touched[0] ?? place?.host,
+      focusBefore: (caret ? place?.host : null) ?? touched[0] ?? place?.host,
       caretBefore: place?.offsets ?? null,
       focusAfter: result.focus,
       select: result.select ?? null,
@@ -381,6 +400,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
     sourceStep,
     fold,
     drop,
+    rekeyed,
     closeTyping,
     struct,
     finish,

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

@@ -9,7 +9,7 @@ import { placeBox } from "../placement.mjs";
 import { tooltip } from "../tooltip.mjs";
 import { addStyle, copyAddress, element, fadeIn, mount, swallowNext } from "../ui.mjs";
 import { typedHref } from "./address.mjs";
-import { findPages, heldList, pageRows, placeIn, readPages, titleIn, trashed } from "./pages.mjs";
+import { findPages, heldList, pageRows, placeIn, readPages, titleIn, trashed, webLinkIn } from "./pages.mjs";
 import { DIALOG_TRIGGER } from "../../components/dialog/index.mjs";
 import { DIALOG_ICON } from "../../components/icons.mjs";
 import { VIEWS, closeOffer, closeViews, hasViews, hrefOf, isPageChip, offerViews, openViews, pageChip, refetch, viewNodes, viewOf, viewsHold } from "./views.mjs";
@@ -668,12 +668,14 @@ async function listedPage(address) {
 
 /**
  * Whether a page alone in a tab may leave for a workbench's `hash`, which only the list reads: not for
- * one that names no document, said as the workbench says it, the page staying. With no answer it goes,
+ * one that names no document, said as the workbench says it, the page staying. A web link of the sidebar,
+ * or an entry of an extension's column with an address (#~<id>/<entry id>), is a place the workbench
+ * opens (in its content area), so it goes there. With no answer it goes,
  * for the workbench to say.
  */
 export async function leadsToPage(hash) {
   const list = await readPages(use.own());
-  if (!list || placeIn(list, `#${hash}`)) return true;
+  if (!list || placeIn(list, `#${hash}`) || webLinkIn(list, hash)) return true;
   use.say(inTrash(list.trash, hash) ? t("这个页面已删除。") : t("没有找到这个页面。"));
   return false;
 }

package/browser/editor/page/links/pages.mjs

@@ -1,15 +1,21 @@
 import { iconUrl } from "../../../shared/emoji/icon-value.mjs";
 import { escapeAttribute } from "../../../shared/escape.mjs";
 import { addressOn, decoded, hashAddress } from "../../../shared/page-address.mjs";
+import { DOCS, isTop, topOf } from "../../../shared/outline-shape.mjs";
+import { entryOfKey } from "../../../shared/extension-sidebar.mjs";
 import { inTrash, namedLinks, pageLink, pageLinks } from "../../../shared/page-links.mjs";
 import { PAGE_ICON } from "../../components/icons.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
 
 // The documents of the workspace, as a link's card, a page block's box and "@" look for them
 // (docs/editor.md, "Links"): one search for the three. The list is read once for each opening from
 // what the workbench reads itself (GET /__gallery/workspace/outline: no route of its own, nothing
-// pushed), in the sidebar's order, each document with the title of the one above it in the sidebar; 写作偏好
-// is no page to link to, and this page has the title it shows now, not the one last saved. A list that
-// cannot be read is no results, and the field goes on taking addresses.
+// pushed), in the sidebar's order, column after column (栏: shared/outline-shape.mjs), each document with
+// the title of the one above it in the sidebar; 写作偏好 is no page to link to, nor is a web link of the
+// sidebar (kind "link": no file of its own to link to; the documents under one are pages all the same) or a
+// draft of another workspace (kind "draft": its file is that workspace's, which no relative link reaches),
+// and this page has the title it shows now, not the one last saved. A list that cannot be read is no
+// results, and the field goes on taking addresses.
 //
 // What a copy writes is an address by a page's link, and a copy cannot wait for an answer: the
 // clipboard takes a write only in the click itself. So the page holds the list ready, the last one
@@ -31,8 +37,8 @@ let shown = () => null; // this page, as readPages takes it
 
 /**
  * The workspace's documents: { pages: [{ slug, title, icon, parent }] (`parent`: the title of the one
- * it is under, or null), links: their links (shared/page-links.mjs), trash: what the trash holds }, or
- * null when the list cannot be read. `own`: this page, { slug, title } as it shows it.
+ * it is under, or null), links: their links (shared/page-links.mjs), trash: what the trash holds but web links }, or
+ * null when the list cannot be read (`webs`: the links of the sidebar's web links, which are no pages). `own`: this page, { slug, title } as it shows it.
  */
 export async function readPages(own = null) {
   const listed = await fetch(OUTLINE).then((answer) => answer.json()).catch(() => null);
@@ -41,13 +47,18 @@ export async function readPages(own = null) {
   const pages = [];
   const walk = (parent) => {
     for (const slug of listed.outline?.children?.[parent] ?? []) {
-      if (!listed.reports[slug] || listed.reports[slug].instructions) continue;
-      pages.push({ slug, title: titleOf(slug) || slug, icon: listed.reports[slug].icon ?? null, parent: parent ? titleOf(parent) || parent : null });
+      const report = listed.reports[slug];
+      if (!report || report.instructions) continue;
+      // An untitled document is named 未命名文档, as the workbench names it (its link's words: its page id alone).
+      if (report.kind !== "link" && report.kind !== "draft") pages.push({ slug, title: titleOf(slug) || t("未命名文档"), icon: report.icon ?? null, parent: isTop(parent) ? null : titleOf(parent) || t("未命名文档") });
       walk(slug);
     }
   };
-  walk("");
-  held = { pages, links: pageLinks(pages.map(({ slug }) => ({ slug, title: titleOf(slug) }))), trash: listed.trash ?? [] };
+  for (const { id } of listed.outline?.groups ?? [{ id: DOCS }]) walk(topOf(id));
+  // The sidebar's web links, by their links as a workbench's hash holds them: no page to link to, but an address the workbench opens.
+  const web = Object.values(listed.reports).filter((report) => report.kind === "link").map(({ slug, title }) => ({ slug, title }));
+  // And the extensions' columns (their entries: an address #~<id>/<entry id> the workbench opens too).
+  held = { pages, links: pageLinks(pages.map(({ slug }) => ({ slug, title: titleOf(slug) }))), webs: pageLinks(web), extensions: listed.extensions ?? [], trash: (listed.trash ?? []).filter(({ kind }) => kind !== "link") };
   return held;
 }
 
@@ -118,6 +129,13 @@ export function placeIn(list, text) {
   return page ? { ...page, block: place.block } : null;
 }
 
+/**
+ * Whether workbench hash `hash` (no #) names a web link of the sidebar, or an entry of an extension's
+ * column that has an address (#~<id>/<entry id>): the workbench opens it in its content area, though it
+ * is no page to link to.
+ */
+export const webLinkIn = (list, hash) => Boolean(hashAddress(decoded(hash), list.webs) || entryOfKey(list.extensions, decoded(hash))?.url);
+
 /** The title of the page `text` is an address of, of `list` or of its trash, or null: what stands for a link to it where its address would be a folder's. */
 export function titleIn(list, text) {
   const binned = addressOn(text, pageLinks(list.trash), globalThis.location?.origin)?.slug;

package/browser/editor/page/look.mjs

@@ -1,13 +1,15 @@
 // What every popup of the editor is painted with, written once: Notion's neutral palette, its blue
 // and its two shadows, light and dark by light-dark() (the page's color-scheme decides). A sheet of
-// `:root` custom properties, put in every document the editor draws in (ui.mjs addStyleTo), so a
+// `:root` custom properties and the one button look (BUTTONS), put in every document the editor draws in (ui.mjs addStyleTo), so a
 // menu, a card, a bar, a notice reads them wherever it stands and none declares a palette of its
 // own. Values are Notion's own as notion-lite carries them (view/theme/notion-vars.css), which this
 // editor follows; the page's content colors (--doc-*, the kit's tokens.css) are another matter.
 //
 // The blue is two tokens because notion-lite has two, for two jobs: --ge-accent (its
-// --c-bluBacAccPri: a primary button, a switch, a chosen icon) and --ge-focus (its --c-butBluFocRin
-// and --c-inpBluFocRin: the ring round a focused field).
+// --c-bluBacAccPri: a switch, a chosen icon, a table's tools, the bars that mark a place) and
+// --ge-focus (its --c-butBluFocRin and --c-inpBluFocRin: the ring round a focused field). A button is
+// neither: the one button look is BUTTONS below, whose primary is a pale blue (--ge-btn-primary*), the
+// workbench's, never the solid --ge-accent.
 //
 // Two shadows, because Notion has two surfaces: --ge-shadow, a card standing over the text (the
 // format bar, the formula and link cards, the conflicts, a notice), and --ge-shadow-pop, a menu
@@ -15,6 +17,38 @@
 // emoji-picker/support.mjs keeps notion-lite's --c-* variables only for the media menu and the image's
 // alignment bar.
 
+/**
+ * The one look of a button the editor draws on a page (the Agent changes' bar, the conflict card and the lost
+ * texts' panel, the crop window, a list's number, the icon picker's upload, the media menu): rules in the
+ * palette's sheet, so that every document the editor draws in has them from the first paint and no style
+ * repeats them. `.ge-btn` is a text button (ui.mjs textButton): no line and no fill, a gray under the
+ * pointer and while the keys are on it, a deeper one pressed; `data-primary` the pale blue (add, confirm,
+ * save), with `data-danger` the pale red (a delete); `data-quiet` a small one for looking, not deciding
+ * (收起, 定位). `.disabled` and `aria-disabled` are how a button made of a div says it cannot be pressed.
+ * `.ge-icon-btn` is the look of an icon button standing alone (a 批注's marker and its delete): no fill under
+ * the pointer (the icon goes darker), a gray only while it is pressed. The tools of a bar (the format bar's,
+ * the link card's) and a menu's rows are gray under the pointer, as Notion's are. Text fields are not
+ * buttons: they keep their thin outline.
+ */
+const OFF = ":disabled, .disabled, [aria-disabled=\"true\"]";
+export const BUTTONS = `
+  .ge-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 28px; margin: 0; padding: 0 10px; border: 0; border-radius: 6px; box-shadow: none; background: transparent; color: var(--ge-tx); font: inherit; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; transition: background 20ms ease-in; }
+  .ge-btn:is(:hover, :focus-visible):not(${OFF}) { outline: none; background: var(--ge-hover); }
+  .ge-btn:active:not(${OFF}) { background: var(--ge-press); }
+  .ge-btn[data-primary] { background: var(--ge-btn-primary); color: var(--ge-btn-primary-text); }
+  .ge-btn[data-primary]:is(:hover, :focus-visible):not(${OFF}) { background: var(--ge-btn-primary-hover); }
+  .ge-btn[data-primary]:active:not(${OFF}) { background: var(--ge-btn-primary-press); }
+  .ge-btn[data-primary][data-danger] { background: var(--ge-btn-danger); color: var(--ge-btn-danger-text); }
+  .ge-btn[data-primary][data-danger]:is(:hover, :focus-visible):not(${OFF}) { background: var(--ge-btn-danger-hover); }
+  .ge-btn[data-primary][data-danger]:active:not(${OFF}) { background: var(--ge-btn-danger-press); }
+  .ge-btn[data-quiet] { height: 24px; padding: 0 6px; color: var(--ge-tx2); font-weight: 400; }
+  .ge-btn[data-quiet]:is(:hover, :focus-visible):not(${OFF}) { color: var(--ge-tx); }
+  .ge-btn:is(${OFF}) { opacity: .45; cursor: default; }
+  .ge-icon-btn { border: 0; box-shadow: none; background: transparent; cursor: pointer; transition: background 20ms ease-in, color 20ms ease-in; }
+  .ge-icon-btn:hover:not(:disabled) { color: var(--ge-ico); }
+  .ge-icon-btn:active:not(:disabled) { background: var(--ge-press); }
+`;
+
 export const TOKENS = `
   :root {
     --ge-tx: light-dark(#2c2c2b, #f0efed);
@@ -40,6 +74,17 @@ export const TOKENS = `
     --ge-focus: #2383e2;
     --ge-red: light-dark(#eb5757, #ff6b6b);
     --ge-quote: light-dark(rgb(28 19 1 / 16%), rgb(255 255 235 / 16%));
+    /* Buttons (BUTTONS below; the user's rule, restated 2026-11-09): a primary is a pale blue fill, always shown, its words the
+       deeper blue; a primary that cannot be taken back a pale red; every other button has no fill and no line, a gray under
+       the pointer (--ge-hover) and a deeper one pressed (--ge-press). The workbench's own values (--btnPriBg, --btnDanBg: tokens.css). */
+    --ge-btn-primary: light-dark(rgb(35 131 226 / 14%), rgb(67 155 255 / 24%));
+    --ge-btn-primary-hover: light-dark(rgb(35 131 226 / 22%), rgb(67 155 255 / 34%));
+    --ge-btn-primary-press: light-dark(rgb(35 131 226 / 30%), rgb(67 155 255 / 44%));
+    --ge-btn-primary-text: light-dark(#1a69bd, #7ab8ff);
+    --ge-btn-danger: light-dark(rgb(235 87 87 / 14%), rgb(255 104 92 / 24%));
+    --ge-btn-danger-hover: light-dark(rgb(235 87 87 / 22%), rgb(255 104 92 / 34%));
+    --ge-btn-danger-press: light-dark(rgb(235 87 87 / 30%), rgb(255 104 92 / 44%));
+    --ge-btn-danger-text: light-dark(#c4403c, #ff9a90);
     --ge-fill: light-dark(rgb(35 131 226 / 14%), rgb(35 131 226 / 28%));
     --ge-halo: rgb(35 131 226 / 14%);
     --ge-select: light-dark(rgb(35 131 226 / 28%), rgb(35 131 226 / 45%));
@@ -55,6 +100,11 @@ export const TOKENS = `
     --ge-toast-bg: light-dark(#0f0f0f, #2f2f2f);
     /* The quiet gray a heading is lit with for a moment when the outline goes to it (outline/), never a blue. */
     --ge-outline-flash: light-dark(rgb(33 27 23 / 7%), rgb(255 255 255 / 8%));
+    /* The lines a size is dragged by (resize/, columns/), grays like Notion's column resizer (its border.primaryTranslucent), never a
+       bright blue (the user, 2026-11-07): where a drag may start, the line being dragged, and that line where it snaps. */
+    --ge-guide: light-dark(rgb(55 53 47 / 16%), rgb(255 255 255 / 14%));
+    --ge-guide-hot: light-dark(rgb(55 53 47 / 36%), rgb(255 255 255 / 32%));
+    --ge-guide-snap: light-dark(rgb(55 53 47 / 62%), rgb(255 255 255 / 58%));
     /* 批注 (annotate/): a warm mark on the words an annotation is about, its 2px underline leading (a faint fill, so it is never
        taken for the report's own yellow background), a block anchor's bar; stronger for the one shown. */
     --ge-note: light-dark(rgb(255 212 0 / 6%), rgb(255 212 0 / 6%));
@@ -74,4 +124,5 @@ export const TOKENS = `
     --ge-diff-del-fill: light-dark(rgb(223 22 0 / 4.5%), rgb(255 104 92 / 10%));
     --ge-diff-del-text: light-dark(#cf5148, #ff8f85);
   }
+  ${BUTTONS}
 `;

package/browser/editor/page/margin.mjs

@@ -1,5 +1,6 @@
 import { OLD_OUTLINE_OPEN_KEY, OLD_PREFERENCES_KEY, OUTLINE_OPEN_KEY, PREFERENCES_KEY } from "../../shared/preferences.mjs";
 import { LOOK_ATTRIBUTES } from "../../shared/document-look.mjs";
+import { ADD, HANDLE } from "./handle-sizes.mjs";
 
 // The right side of the page while it is edited (docs/editor.md, "The outline and the right side"): the
 // outline (目录, outline/) docked at the window's right edge, the cards of 批注 (annotate/) between it and
@@ -52,9 +53,18 @@ import { LOOK_ATTRIBUTES } from "../../shared/document-look.mjs";
 // column stands where it will stay from the first paint, and by setMargin() after that.
 // When they move the column, the page hears a resize, so what stands over the text (the format bar, a
 // selection's strips, a card) is placed again.
+//
+// The edge room is also the page's gutters (the kit's --doc-page-gutter and --doc-wide-gutter, page.css),
+// set by MARGIN_STYLE, which the edit service puts in the page's head: the column the kit lets show
+// (data-doc-ready, the frame a workbench swaps the page in on) stands where the editor keeps it, its lines
+// broken as they stay, before the editor has started, the outline off and no 批注 as much as with them.
+// (Until 2026-11-09 the handle put them in once the page edited: in a workbench with its sidebar open, a
+// page 795px wide came in with the kit's 20px gutters, its column 712 wide and 42 in, and moved to 667 and
+// 64 a few frames later, its lines breaking anew: the user's report on 0.1.1.)
 
 /**
- * The numbers: the edge room (the least room either side of the column keeps), the least it gives up
+ * The numbers: the edge room (the least room either side of the column keeps, and the page's gutters:
+ * the bar's square left of the block handle's grip, the grip, its gap and room to breathe, 64), the least it gives up
  * to (the block handle's: its 38px, its 12px gap, 2px), the column, the least a full-width column
  * keeps, the outline in full (its default width, the least and the most it is dragged to), its
  * list's inset in its panel (`guide`: the column's right room ends there, at the list's edge, its
@@ -65,7 +75,7 @@ import { LOOK_ATTRIBUTES } from "../../shared/document-look.mjs";
  * clear; one focused comes 20px left, and no button shows then), a card's width, the least it gives up
  * to, and the room past it (clear of the outline's list: its guide and grip).
  */
-export const MARGIN = Object.freeze({ edge: 64, start: 52, column: 712, least: 560, full: 200, fullMin: 160, fullMax: 360, guide: 8, grip: 4, strip: 36, hysteresis: 16, lane: 60, card: 308, cardLeast: 240, cardEnd: 20 });
+export const MARGIN = Object.freeze({ edge: ADD.width + HANDLE.width + HANDLE.gap + 12, start: 52, column: 712, least: 560, full: 200, fullMin: 160, fullMax: 360, guide: 8, grip: 4, strip: 36, hysteresis: 16, lane: 60, card: 308, cardLeast: 240, cardEnd: 20 });
 
 /**
  * The outline's width in full for the reader's choice `chosen` (px; 0 or none: the default), within
@@ -116,8 +126,13 @@ export function marginLayout({ width, outline = false, collapsed = false, notes
 
 const SLIDE = 200; // ms: the column's slide as the page comes to have 批注 or has none left
 
-/** The page's rules for the room: the column placed (and narrowed only when it must), screen only. */
+/**
+ * The page's rules for the room: its gutters the edge room, and on screen the column placed (and
+ * narrowed only when it must).
+ */
 export const MARGIN_STYLE = `
+  /* The handle's room beside the page's blocks, the page's gutters from its first paint (a page the editor edits: this sheet is in the head the edit service serves); resize/ and the workbench's sidebar read --ge-edge-room. */
+  :root { --ge-edge-room: ${MARGIN.edge}px; --doc-page-gutter: var(--ge-edge-room); --doc-wide-gutter: var(--ge-edge-room); }
   @media screen {
     :root[data-ge-margin] {
       /* The least room either side of the column keeps (marginLayout's side: the edge room, less where the page is short of it, down to the handle's). */