@heycys/gallery 0.1.0 → 0.1.2

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

@@ -39,7 +39,7 @@ export function readOnlyReason(target) {
   if (editable(target) || target.closest("a[href]")) return null; // a link there is one to click on
   const locked = target.closest("[data-ge-lock]");
   if (locked) return lockText(locked.getAttribute("data-ge-lock"));
-  const hint = READ_ONLY_HINTS.find(({ at }) => target.closest(at));
+  const hint = READ_ONLY_HINTS.find(({ at }) => (typeof at === "function" ? at(target) : target.closest(at)));
   if (hint) return hint.says;
   const ownText = [...target.childNodes].some((node) => node.nodeType === 3 && node.data.trim());
   return ownText ? t("这里暂不能在页面上修改。") : null;

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/insert/index.mjs

@@ -4,13 +4,13 @@ import { begin, done, made } from "../made.mjs";
 import { selectsBeside } from "../beside.mjs";
 import { caretAt, nearestOnLine, placeCaret, selectAt } from "../caret.mjs";
 import { sectionOps } from "../page-objects.mjs";
-import { endOf, hoverAt, innerBox, measure } from "../geometry.mjs";
+import { contentOf, endOf, hoverAt, innerBox, measure } from "../geometry.mjs";
 import { BOXED, HOLDS_ONE, accepts } from "../../components/registry.mjs";
 import { DIALOG } from "../../components/kit.mjs";
 
 // Where new blocks come from (docs/editor.md, "New blocks and conversions" and "Selecting
-// blocks"): a click on the empty space below the last block of a box (a new paragraph there, or the
-// caret into the empty one already at its end), Enter at the very start of a block (a paragraph
+// blocks"): a click on the empty space below the last block of a box (not one whose end is its
+// padding; a new paragraph there, or the caret into the empty one already at its end), Enter at the very start of a block (a paragraph
 // before it), the handle's "+" (an empty block beside the block: addNear), and the block menu's new section after a block (components/section/page.mjs). A
 // paragraph made here is written once it has text. "在下方新建一块" in a block's menu, like the "/"
 // menu's blocks in a block with text, is the editor's insertBelow; blocks also come from conversions
@@ -49,16 +49,20 @@ export function createInsert({ struct, blocks }) {
   }
 
   // A click on empty space (selection/marquee.mjs), below the last block of the box clicked (the
-  // page, a Sheet panel, a section, a highlight block, a disclosure's content; below the report, the
-  // page): a new paragraph at its end, or the caret into the empty paragraph already there
-  // (geometry.mjs endOf). To the right of a boxed block (a code block, a callout, a file…: not text)
-  // or of a row of columns, that block selected, so Delete takes it and Enter puts a paragraph after
-  // it. Elsewhere beside text, the caret goes into the text block on that line (the nearest of those
+  // page, a Sheet panel, a section, a column, a detail card's content, a flowchart's node; below the
+  // report, the page): a new paragraph at its end, or the caret into the empty paragraph already there
+  // (geometry.mjs endOf). Under the last block of a box whose end is its own padding (endIsPadding: a
+  // highlight block, a callout, a disclosure's content; the user's, 2026-11-06, as notion-lite's click-blank.js
+  // makes a block only below the page and in a column) it is a gap like any other, below. Right of
+  // the text area a boxed block (a code block, a callout, a file…: not text) or a row of columns
+  // stands in, at its height (boxedBeside), that block selected, so Delete takes it and Enter puts a
+  // paragraph after it; between a narrower block's right edge and its column's, as beside any block
+  // of no text (below). Elsewhere beside text, the caret goes into the text block on that line (the nearest of those
   // side by side), where the line is nearest the click (Notion's way); in the gap between two
   // blocks, or beside a block of no text, into the nearer of the blocks around it that is text, in the
   // innermost box at that height (boxBeside: the press may be on the page's margin, the block in a
   // Sheet's panel or a section), else in the boxes around that one, at the place nearest the click on
-  // its nearest line (always somewhere: a click there never does nothing). The page stays where it
+  // its nearest line (somewhere in the box clicked or around it, when any is text). The page stays where it
   // is, that text out of sight too (caretNear; notion-lite's click-blank.js scrolls no page either).
   function clickBlank(x, y, target) {
     // In an open detail card, its content is the page: never a block behind it (marquee.mjs topOf).
@@ -77,7 +81,7 @@ export function createInsert({ struct, blocks }) {
     if (end?.focus) return caretAt(end.focus, "end");
     if (end) return newParagraph(end.box, end.after);
     const top = y + scrollY;
-    const beside = boxedBeside(main, x, y);
+    const beside = boxedBeside(main, x, y, target);
     if (beside) return blocks().select(beside);
     const host = hoverAt(measure(main, { top, bottom: top }), x + scrollX, top, { reach: Infinity, skip: (unit) => !unit.text });
     if (host) return caretNear(host, x, y);
@@ -144,8 +148,8 @@ export function createInsert({ struct, blocks }) {
     return Math.max(rect.top - y, y - rect.bottom, 0);
   };
   // A block that is no text of its own (its category: a card, a container of its own or a whole
-  // block; a code block, a callout, a formula block, a divider), as opposed to text blocks and the
-  // boxes text flows in (a list, a quote, a section, columns).
+  // block, a highlight block, a callout; a code block, a formula block, a divider), as opposed to text
+  // blocks and the boxes text flows in (a list, a quote, a section, columns).
   const boxed = (unit) => BOXED.has(unit.getAttribute("data-ge-unit-kind"));
   // The text block of `unit` at its bottom (`last`) or its top: itself, or the last (first) of those it holds; none in a boxed block.
   function textEdge(unit, last) {
@@ -153,14 +157,23 @@ export function createInsert({ struct, blocks }) {
     const texts = [unit, ...unit.querySelectorAll("[data-ge-block], [data-ge-new]")].filter((node) => node.isContentEditable && node.getClientRects().length > 0 && !node.closest("details:not([open]) > :not(summary)"));
     return (last ? texts.at(-1) : texts[0]) ?? null;
   }
-  // A boxed block or a row of columns at height `y` with (x, y) to its right (in the page's margin,
-  // or beside a narrower block), or null: the innermost, but never a block inside a row of columns
-  // the click is to the right of too (the row is selected whole).
-  function boxedBeside(main, x, y) {
+  // A boxed block or a row of columns at height `y` with (x, y) right of the text area it stands in
+  // (the content box of its box: the page's column, a column of 分栏, a section's, a quote's, a
+  // highlight block's or a callout's, a disclosure's content) and right of the block itself (one
+  // wider than that area), or null: in the page's margin, or in the padding of the box it stands in;
+  // never between a narrower block's right edge and its area's (a table, a picture: the user's,
+  // 2026-11-07, a click there selected it), nor in another text area (the blank box `target` the
+  // press was on holds the block: a column further right is no place beside one in the column left
+  // of it). The innermost, but never a block inside a row of columns the click is to the right of too
+  // (the row is selected whole): past a column's edge is the gap to the next column, whose press is
+  // the gap's (columns/: it drags, a click alone changes nothing), or past the row, which is selected.
+  function boxedBeside(main, x, y, target) {
     let found = null;
     const right = (unit) => {
       const rect = unit.getBoundingClientRect();
-      return y >= rect.top && y <= rect.bottom && x > rect.right;
+      if (y < rect.top || y > rect.bottom || (target?.contains && !target.contains(unit))) return false;
+      const box = unit.parentElement;
+      return x > Math.max(rect.right, contentOf(box.getBoundingClientRect(), getComputedStyle(box)).right);
     };
     for (const unit of main.querySelectorAll(`[data-ge-unit-kind]`)) {
       if (!selectsBeside(unit) || !unit.parentElement?.hasAttribute("data-ge-box") || unit.parentElement.closest("details:not([open])")) continue;

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/long-runs.mjs

@@ -0,0 +1,75 @@
+import { holdsLongRun } from "../../shared/long-runs.mjs";
+import { textFilters } from "../components/registry.mjs";
+import { addStyle } from "./ui.mjs";
+
+// A long run in the text the page editor edits (src/shared/long-runs.mjs: a path, a URL, a long
+// identifier, more than 20 characters with no place to break inside it) breaks where its line ends,
+// as the kit breaks it in the page a reader sees (runtime/spacing.js, a span that breaks anywhere,
+// .doc-long-run). No span goes into text the editor keeps equal to the file, so a text block whose
+// own text holds such a run breaks anywhere as a whole (data-ge-long-run: word-break: break-all),
+// and an ordinary word in that block may then be parted at a line's end too, which no other block's
+// is (the compromise docs/editor.md names). The rule's weight is none: a block's own (a table's
+// header keep-all, a short field normal, a code block's lines) wins; what the block holds that is a
+// block or an atom of its own ([contenteditable="false"]: a nested list, a formula) breaks as it would
+// without it, and an item of that list is judged by its own text. Never a block of plain text (a code
+// block's lines, a tab's name: textFilters false), which keeps its own rule; a text part of an
+// instance of a component package is judged as any text block (its component's own word-break, where
+// it says one, wins), though the kit holds no run in an instance's own region.
+//
+// Judged as editing starts, for every text block, and again for the blocks whose text changed, as it
+// changes, whatever changed it (typing, a paste, undo, a rebuild from the file, a block made or made
+// editable): the page's mutations are watched (childList, characterData, contenteditable), and only
+// the blocks they stand in are judged, each by its own text (a regular expression over a block's
+// words: no scan of the page per keystroke). The marker is no text of the file's: a data-ge-* attribute
+// on the block itself (core.mjs), set or taken off only where it changes.
+
+const MARK = "data-ge-long-run";
+const HOST = '[contenteditable="true"]';
+
+const STYLE = `
+  /* A text block holding a long run breaks anywhere (long-runs.mjs), of no weight: a block's own rule wins. */
+  :where([data-ge-editing] [data-ge-long-run]) { word-break: break-all; }
+  /* What it holds of its own (a nested list, a formula) breaks as the page's text does. */
+  :where([data-ge-editing] [data-ge-long-run] [contenteditable="false"]) { word-break: normal; }
+`;
+
+// The text of `host` its own: not a block or an atom it holds (contenteditable="false"), a line break a space.
+function ownText(host) {
+  const walker = host.ownerDocument.createTreeWalker(host, 5, { // NodeFilter.SHOW_ELEMENT | SHOW_TEXT
+    acceptNode: (node) => (node.nodeType === 1 && node !== host && node.hasAttribute("contenteditable") ? 2 : 1), // FILTER_REJECT, FILTER_ACCEPT
+  });
+  let text = "";
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (node.nodeType === 3) text += node.data;
+    else if (node.localName === "br") text += " ";
+  }
+  return text;
+}
+
+/** Marks `element` as a text block holding a long run, or takes the mark off: whether it holds one. */
+export function judgeLongRuns(element) {
+  const long = element.isConnected && element.matches(HOST) && textFilters(element) && holdsLongRun(ownText(element));
+  if (long !== element.hasAttribute(MARK)) element.toggleAttribute(MARK, long);
+  return long;
+}
+
+/** Judges every text block under `root` now, and each again as its text changes. */
+export function followLongRuns(root) {
+  addStyle(STYLE);
+  for (const host of root.querySelectorAll(`${HOST}, [${MARK}]`)) judgeLongRuns(host);
+  new MutationObserver((records) => {
+    const judged = new Set();
+    for (const record of records) {
+      if (record.type === "attributes") judged.add(record.target); // made editable, or no longer
+      const at = record.target.nodeType === 1 ? record.target : record.target.parentElement;
+      const host = at?.closest(HOST);
+      if (host) judged.add(host);
+      for (const node of record.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        if (node.matches(HOST)) judged.add(node);
+        for (const inner of node.querySelectorAll(HOST)) judged.add(inner);
+      }
+    }
+    judged.forEach(judgeLongRuns);
+  }).observe(root, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["contenteditable"] });
+}

package/browser/editor/page/look.mjs

@@ -1,25 +1,61 @@
 // 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
-// (Notion's large outer shadow). The emoji picker (emoji-picker/support.mjs) carries notion-lite's
-// own --c-* variables, taken over as they are.
+// (Notion's large outer shadow). The icon picker reads this palette too (emoji-picker/styles.mjs);
+// 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);
     --ge-tx2: light-dark(#7d7a75, #ada9a3);
     --ge-tx3: light-dark(#a19e99, #7d7a75);
-    --ge-ico: light-dark(#383836, #e6e5e3);
+    /* The workbench's --icoPri (FinHarness-Demo's --ink-2). */
+    --ge-ico: light-dark(#5c5a55, #a9a69e);
     --ge-ico2: light-dark(#8e8b86, #ada9a3);
     /* The quietest icon gray (notion-lite's --c-icoTer): the block handle's dots, its bar and its +. */
     --ge-ico3: light-dark(#ada9a3, #7d7a75);
@@ -38,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%));
@@ -53,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%));
@@ -61,5 +113,16 @@ export const TOKENS = `
     --ge-note-hot-line: light-dark(rgb(222 160 0 / 90%), rgb(255 204 64 / 80%));
     /* A card of 批注 in the margin under the pointer (notion-lite's --c-hovMarDisBac): a shade of the page. */
     --ge-note-shade: light-dark(#f9f9f8, #202020);
+    /* The Agent's changes (changes/, 设置 › 显示变更): Notion's green and red backgrounds, the conflict card's two versions (conflicts.mjs);
+       words added get a 批注's look (a faint fill under a 2px underline) in green, blocks a fainter fill; words
+       taken out stand in red struck through on the red, deleted blocks' ghost on a fainter red. */
+    --ge-diff-add: light-dark(rgb(0 100 45 / 9%), rgb(108 255 172 / 15.7%));
+    --ge-diff-add-line: light-dark(rgb(68 131 97 / 60%), rgb(111 197 150 / 55%));
+    --ge-diff-add-fill: light-dark(rgb(0 100 45 / 5.5%), rgb(108 255 172 / 9%));
+    --ge-diff-add-text: light-dark(#448361, #6fc596);
+    --ge-diff-del: light-dark(rgb(223 22 0 / 9.4%), rgb(255 104 92 / 24%));
+    --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}
 `;