@heycys/gallery 0.1.1 → 0.2.0

package/browser/editor/page/board/motion.mjs

@@ -0,0 +1,177 @@
+// How a board's cards move while they are edited (./index.mjs; docs/render.md "Its cards edited"), the user's
+// word of 2026-11-09: as smooth as the widgets of an iPhone's home screen, nothing that jumps or stutters.
+//
+//   - glide(): the cards a change of the layout moves (a draft while a card is dragged or resized, a drop, an
+//     undo, 大小 ›) glide from where they were seen to where the layout now puts them (FLIP: their box before
+//     and after, a transform from the one to the other run to none) on a spring's ease (spring: a little
+//     less than critically damped, its overshoot under 2%), GLIDE ms; a card whose size changed glides its
+//     width and height too. A card already gliding to where the layout still puts it is left to go on; one
+//     the change sends elsewhere starts again from where it is seen then, so a target that changes under a
+//     drag never makes a card jump (interruptible).
+//   - createSettle(): a held card's place (or a resized card's size), axis by axis: the pointer's, or within
+//     `snap` px of the cells (or the size) a drop gives, those; where that changes (the card comes within the
+//     snap or leaves it, or the cells it stands on move) it settles from where it was carried to the new
+//     place in SETTLE ms on the same spring, the pointer's own motion never delayed.
+//   - createEdgeScroll(): near the window's top or bottom edge a gesture scrolls the page, timed by the frames'
+//     clock (not by the pointer's events): within BAND px of the edge, faster as the pointer is nearer it (the
+//     square of how far into the band, past the edge the most), FASTEST px a second at the most (12 a frame
+//     at 60 frames a second), and growing from nothing over RAMP ms once the pointer comes into the band, so
+//     that a card picked up near the edge does not set the page running.
+//   - prefers-reduced-motion: no glide and no settling (the layout and the snap at once); the scroll as it is.
+
+export const GLIDE = 280; // ms a card glides to where a layout puts it
+export const SETTLE = 180; // ms a held (or resized) card settles on what it snaps to, or comes off it
+export const BAND = 64; // px from the window's top or bottom edge within which a gesture scrolls the page
+export const FASTEST = 720; // px a second the page scrolls at the most
+export const RAMP = 320; // ms over which that speed grows from nothing once the pointer is in the band
+
+export const reduced = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+// The step response of a spring (damping ZETA, settled within 0.2% at t = 1): 0 at 0, 1 at 1, still at both
+// ends, a crest of under 2% past 1 at t ≈ 0.65.
+const ZETA = 0.8;
+const OMEGA = 6.4 / ZETA;
+const DAMPED = OMEGA * Math.sqrt(1 - ZETA * ZETA);
+export function spring(t) {
+  if (t <= 0) return 0;
+  if (t >= 1) return 1;
+  return 1 - Math.exp(-ZETA * OMEGA * t) * (Math.cos(DAMPED * t) + ((ZETA * OMEGA) / DAMPED) * Math.sin(DAMPED * t));
+}
+// The same as an easing a Web Animation takes (CSS linear() of 40 points), else a close cubic Bézier.
+const EASE = (() => {
+  const points = Array.from({ length: 41 }, (_, index) => Math.round(spring(index / 40) * 10000) / 10000).join(", ");
+  const curve = `linear(${points})`;
+  return typeof CSS !== "undefined" && CSS.supports?.("transition-timing-function", curve) ? curve : "cubic-bezier(.2, .9, .25, 1)";
+})();
+
+const running = new WeakMap(); // a card -> its glide under way
+// Where the kit's board script draws a card now: its cells as the CSS takes them (the board's row skip in).
+const keyOf = (card) => ["x", "y", "w", "h"].map((name) => card.style.getPropertyValue(`--gallery-${name}`)).join();
+
+/** Whether a card is gliding now. */
+export const isGliding = (card) => running.has(card);
+
+/** A card's glide stopped where it is (a gesture takes it up): it stands where the layout puts it. */
+export function stopGlide(card) {
+  running.get(card)?.cancel();
+}
+
+/**
+ * `change()` run (it lays the board out at once: DocBoard.draft or .layout), and each of `cards` it moves
+ * glided from where it was seen to its new place. `still`: a card left out (the one a gesture holds, which
+ * follows the pointer); `lift`: a card kept over the others while it glides (data-ge-landing: one let go);
+ * `settled()`: run once every glide this started has ended (at once where none started). Gives what change() gave.
+ */
+export function glide(cards, change, { still = null, lift = null, duration = GLIDE, settled = null } = {}) {
+  if (reduced()) {
+    const result = change();
+    settled?.();
+    return result;
+  }
+  const started = [];
+  const before = cards.filter((card) => card !== still).map((card) => ({ card, key: keyOf(card), box: card.getBoundingClientRect() }));
+  const result = change();
+  for (const { card, key, box } of before) {
+    if (!card.isConnected) continue;
+    const going = running.get(card);
+    if (going && keyOf(card) === key) continue; // on its way to where it still goes
+    going?.cancel();
+    const now = card.getBoundingClientRect();
+    const dx = box.left - now.left;
+    const dy = box.top - now.top;
+    const sized = Math.abs(box.width - now.width) > 0.5 || Math.abs(box.height - now.height) > 0.5;
+    if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5 && !sized) continue;
+    const from = { transform: `translate(${dx}px, ${dy}px)` };
+    const to = { transform: "translate(0px, 0px)" };
+    if (sized) {
+      Object.assign(from, { width: `${box.width}px`, height: `${box.height}px` });
+      Object.assign(to, { width: `${now.width}px`, height: `${now.height}px` });
+    }
+    const animation = card.animate([from, to], { duration, easing: EASE });
+    running.set(card, animation);
+    if (card === lift) card.setAttribute("data-ge-landing", "");
+    const end = () => {
+      if (running.get(card) !== animation) return;
+      running.delete(card);
+      card.removeAttribute("data-ge-landing");
+    };
+    animation.addEventListener("finish", end);
+    animation.addEventListener("cancel", end);
+    started.push(animation.finished.catch(() => {}));
+  }
+  if (settled) {
+    if (started.length) Promise.all(started).then(settled);
+    else settled();
+  }
+  return result;
+}
+
+/**
+ * A held card's place, or a resized card's size, axis by axis (`name`: "x", "y", "w", "h"): at(name, raw,
+ * target, time) gives what is drawn for the pointer's `raw` and the `target` a drop gives (the cells' place
+ * or size, px): the target within `snap` px of it, else raw; a change of which (or of the target while on
+ * it) settles from where the card was carried, in `duration` ms. gliding(): whether any axis still settles.
+ */
+export function createSettle(snap, duration = SETTLE) {
+  const axes = new Map();
+  return {
+    at(name, raw, target, time) {
+      const on = Math.abs(raw - target) <= snap;
+      const want = on ? target : raw;
+      const axis = axes.get(name);
+      if (!axis) {
+        axes.set(name, { raw, target, on, shown: want, glide: null });
+        return want;
+      }
+      // Where it would be had it gone with the pointer since the last time: what a settling starts from.
+      const carried = axis.shown + (raw - axis.raw);
+      if (on !== axis.on || (on && target !== axis.target)) axis.glide = reduced() ? null : { offset: carried - want, start: time };
+      Object.assign(axis, { raw, target, on });
+      let shown = want;
+      if (axis.glide) {
+        const progress = (time - axis.glide.start) / duration;
+        if (progress >= 1) axis.glide = null;
+        else shown = want + axis.glide.offset * (1 - spring(progress));
+      }
+      axis.shown = shown;
+      return shown;
+    },
+    gliding: () => [...axes.values()].some((axis) => axis.glide !== null),
+  };
+}
+
+/**
+ * The page scrolled near the window's edge while a gesture lasts: frame(y, time) once a frame (the pointer's
+ * y in the window, the frame's time), whether the page moved; stop() as the gesture ends.
+ */
+export function createEdgeScroll({ band = BAND, fastest = FASTEST, ramp = RAMP } = {}) {
+  let since = null; // when the pointer came into the band
+  let last = null; // the last frame's time
+  let carry = 0; // px asked and not yet scrolled (a frame's share is seldom whole)
+  return {
+    frame(y, time) {
+      const step = last === null ? 0 : Math.min(34, Math.max(0, time - last)); // a stalled frame scrolls no more than two
+      last = time;
+      const into = y < band ? -(band - y) / band : y > innerHeight - band ? (y - (innerHeight - band)) / band : 0;
+      if (into === 0) {
+        since = null;
+        carry = 0;
+        return false;
+      }
+      since ??= time;
+      const depth = Math.min(1, Math.abs(into));
+      carry += Math.sign(into) * fastest * depth * depth * Math.min(1, (time - since) / ramp) * (step / 1000);
+      const whole = Math.trunc(carry);
+      if (!whole) return false;
+      carry -= whole;
+      const was = scrollY;
+      scrollBy(0, whole);
+      return scrollY !== was;
+    },
+    stop() {
+      since = null;
+      last = null;
+      carry = 0;
+    },
+  };
+}

package/browser/editor/page/board/settings.mjs

@@ -0,0 +1,210 @@
+import { Z } from "../../../shared/layers.mjs";
+import { language, t } from "../../../shared/i18n/index.mjs";
+import { createMenu } from "../menu.mjs";
+import { placeBox } from "../placement.mjs";
+import { addStyle, button, element, mount } from "../ui.mjs";
+
+// A card's 设置… (docs/render.md "A custom page"): a small form of the fields its block's manifest
+// lists (`settings`: text, number, select, date, switch, document), Notion's popup look (the editor's
+// palette, look.mjs), standing under the card's grip (its right edge at the grip's). What it shows is what the card's settings part holds,
+// each field its manifest's default where it holds none; 保存 (or Enter in a field) hands the values
+// that changed to `save`, 取消, Escape or a press outside it nothing. Its buttons are the editor's flat
+// ones (CLAUDE.md 界面): no line round either, 取消 with no fill until the pointer is on it (grey), 保存 on
+// a pale blue fill of its own. A document is chosen from the
+// workspace's documents by title (the workbench's outline: GET /__gallery/workspace/outline, its web
+// links no documents), the slug what is kept. A choice from a list (select, document) is a field that
+// opens the editor's own menu card under it (menu.mjs: rows, the chosen one checked, ↑/↓ Enter Escape from
+// the field), a choice of the caller's (type "choice", `choices`: [[value, words]], what a document block adds
+// to its fields: the table a view reads) too, not a native <select>: the page cannot style that one's popup, which a browser draws in
+// the system's colours (a white list with pale words in a dark page, the user's picture of 2026-11-09).
+// While the form stands, the page is not shown again under it (the board's idle).
+
+const STYLE = `
+  .ge-board-form { position: fixed; left: 0; top: 0; z-index: ${Z.menu}; box-sizing: border-box; width: 300px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 12px 12px 10px;
+    border-radius: 10px; background: var(--ge-bg); color: var(--ge-tx); box-shadow: var(--ge-shadow-pop);
+    font: 14px/1.4 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
+  .ge-board-form-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
+  .ge-board-form-title small { min-width: 0; overflow: hidden; color: var(--ge-tx3); font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
+  .ge-board-field { display: block; margin: 0 0 10px; }
+  .ge-board-field > span { display: block; margin: 0 0 4px; color: var(--ge-tx2); font-size: 12px; }
+  .ge-board-field :is(input, .ge-board-pick) { box-sizing: border-box; width: 100%; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; outline: none;
+    background: var(--ge-field); color: var(--ge-tx); font: inherit; box-shadow: inset 0 0 0 1px var(--ge-edge); }
+  .ge-board-field :is(input, .ge-board-pick):focus, .ge-board-pick[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ge-focus), 0 0 0 2px var(--ge-halo); }
+  .ge-board-pick { display: flex; align-items: center; gap: 6px; text-align: left; cursor: pointer; }
+  .ge-board-pick-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .ge-board-pick svg { flex: none; display: block; width: 16px; height: 16px; fill: none; stroke: var(--ge-tx3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+  .ge-board-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
+  .ge-board-switch > span { color: var(--ge-tx); font-size: 14px; }
+  .ge-board-switch button { position: relative; flex: none; width: 30px; height: 18px; padding: 0; border: 0; border-radius: 9px; background: var(--ge-line-strong); cursor: pointer; transition: background .12s; }
+  .ge-board-switch button::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(15 15 15 / 20%); transition: transform .12s; }
+  .ge-board-switch button[aria-checked="true"] { background: var(--ge-accent); }
+  .ge-board-switch button[aria-checked="true"]::after { transform: translateX(12px); }
+  .ge-board-switch button:focus-visible { outline: 2px solid var(--ge-halo); }
+  .ge-board-form-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+  .ge-board-form-foot button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ge-tx); font: inherit; cursor: pointer; }
+  .ge-board-form-foot button:hover { background: var(--ge-hover); }
+  .ge-board-form-foot button[data-primary] { background: var(--ge-btn-primary); color: var(--ge-btn-primary-text); }
+  .ge-board-form-foot button[data-primary]:hover { background: var(--ge-btn-primary-hover); }
+  .ge-board-form-foot button:focus-visible { outline: 2px solid var(--ge-halo); }
+  @media (prefers-reduced-motion: reduce) { .ge-board-switch :is(button, button::after) { transition: none; } }
+`;
+
+const CHEVRON = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg>';
+const said = (words) => (typeof words === "string" ? words : words?.[language] ?? words?.zh ?? words?.en ?? "");
+let shown = null; // the form standing now: { node, close }
+
+/** Whether the form stands now. */
+export const formOpen = () => shown !== null;
+
+/** The workspace's documents, by title: [{ slug, title }] (none where the outline cannot be read). */
+async function documents() {
+  try {
+    const answer = await (await fetch("/__gallery/workspace/outline")).json();
+    return Object.values(answer.reports ?? {}).filter((report) => !report.instructions && report.kind !== "link").map(({ slug, title }) => ({ slug, title: title || slug }))
+      .sort((a, b) => a.title.localeCompare(b.title, "zh-CN"));
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * The form for a card: `fields`, its manifest's settings; `values`, what its settings part holds;
+ * `name`, its block's name; `anchor`, the rect it stands by; `save(changed)`, the values that changed
+ * by key. Closes another that stands.
+ */
+export async function openSettings({ fields, values, name, anchor, save }) {
+  addStyle(STYLE);
+  shown?.close();
+  const kinds = new Map();
+  const pick = createMenu(); // the list of the field being chosen from (one at a time)
+  let picking = null; // the field it stands under
+  const node = element("form", { class: "ge-board-form", role: "dialog", "aria-label": t("卡片设置"), novalidate: "" });
+  node.append(element("div", { class: "ge-board-form-title" }, element("span", { text: t("设置") }), element("small", { text: said(name) })));
+  const listed = fields.some((field) => field.type === "document") ? await documents() : [];
+  const now = (field) => (Object.hasOwn(values ?? {}, field.key) ? values[field.key] : field.default);
+  for (const field of fields) {
+    const label = said(field.label) || field.key;
+    const value = now(field);
+    if (field.type === "switch") {
+      const toggle = element("button", { type: "button", role: "switch", "aria-checked": String(value === true), "aria-label": label, "data-key": field.key });
+      toggle.addEventListener("click", () => toggle.setAttribute("aria-checked", String(toggle.getAttribute("aria-checked") !== "true")));
+      node.append(element("div", { class: "ge-board-switch" }, element("span", { text: label }), toggle));
+      kinds.set(field.key, { field, read: () => toggle.getAttribute("aria-checked") === "true" });
+      continue;
+    }
+    let control;
+    const choice = field.type === "select" || field.type === "document" || field.type === "choice"; // chosen from a list
+    if (choice) {
+      const options = field.type === "select" ? field.options.map((option) => [String(option), String(option)]) : field.type === "choice" ? field.choices : [["", t("（未选择）")], ...listed.map(({ slug, title }) => [slug, title])];
+      if (field.type === "document" && value && !listed.some(({ slug }) => slug === value)) options.push([String(value), String(value)]);
+      const text = element("span", { class: "ge-board-pick-text" });
+      control = element("button", { type: "button", class: "ge-board-pick", "data-key": field.key, "aria-haspopup": "menu", "aria-expanded": "false" }, text, element("span", { html: CHEVRON }));
+      // What the field holds is its `value` (the key of an option), shown as the option's words.
+      const show = (key) => {
+        control.value = key;
+        text.textContent = options.find(([option]) => option === key)?.[1] ?? key;
+      };
+      show(value === undefined || value === null ? (field.type === "select" ? String(field.options[0]) : "") : String(value));
+      const open = () => {
+        const wide = control.getBoundingClientRect();
+        picking = control;
+        control.setAttribute("aria-expanded", "true");
+        pick.open(options.map(([key, words]) => ({ label: words, selected: key === control.value, run: () => show(key) })), wide, {
+          label, width: Math.round(wide.width), icons: false, height: 280,
+          onClose: () => { if (picking === control) picking = null; control.setAttribute("aria-expanded", "false"); },
+        });
+        // The chosen row highlighted where there is one (the first otherwise: the menu's own).
+        const chosen = options.findIndex(([key]) => key === control.value);
+        for (let step = 0; step < Math.max(0, chosen); step++) pick.move(1);
+      };
+      control.addEventListener("click", () => { if (picking === control) pick.close(); else open(); });
+      control.addEventListener("keydown", (event) => {
+        if (event.isComposing || event.keyCode === 229) return;
+        if (picking !== control) {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            open();
+          }
+          return;
+        }
+        if (pick.arrow(event)) event.preventDefault();
+        else if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          pick.choose();
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation(); // the list closes; the form stays
+          pick.close();
+        } else if (event.key === "Tab") pick.close();
+      });
+    } else {
+      control = element("input", { type: field.type === "number" ? "number" : field.type === "date" ? "date" : "text", "data-key": field.key, autocomplete: "off" });
+      control.value = value === undefined || value === null ? "" : String(value);
+    }
+    // A field to choose from is no <label> (a click on its words would open its list): its words name it by aria-labelledby.
+    const words = element("span", { text: label });
+    if (choice) {
+      words.id = `ge-board-label-${field.key}`;
+      control.setAttribute("aria-labelledby", words.id);
+    }
+    node.append(element(choice ? "div" : "label", { class: "ge-board-field" }, words, control));
+    kinds.set(field.key, {
+      field,
+      read: () => {
+        if (field.type === "number") return control.value.trim() === "" ? null : Number(control.value);
+        if (field.type === "select") return field.options.find((option) => String(option) === control.value) ?? field.options[0];
+        return control.value;
+      },
+    });
+  }
+  const close = () => {
+    if (shown?.node !== node) return;
+    shown = null;
+    pick.close();
+    node.remove();
+    removeEventListener("pointerdown", outside, true);
+  };
+  // What a field showed as it opened, as it reads it back (a field the part holds nothing of shows its default, or nothing).
+  const shownAt = (field) => now(field) ?? (field.type === "switch" ? false : field.type === "select" ? field.options[0] : field.type === "number" ? null : "");
+  // Only what the reader changed goes: a field left as it showed stays as the part holds it (its default unwritten).
+  const done = () => {
+    const changed = {};
+    for (const [key, { field, read }] of kinds) {
+      const value = read();
+      if (field.type === "number" && value !== null && !Number.isFinite(value)) continue;
+      if (JSON.stringify(value) !== JSON.stringify(shownAt(field))) changed[key] = value;
+    }
+    close();
+    if (Object.keys(changed).length) save(changed);
+  };
+  const outside = (event) => {
+    if (!node.contains(event.target) && !pick.contains(event.target)) close();
+  };
+  node.addEventListener("submit", (event) => {
+    event.preventDefault();
+    done();
+  });
+  node.addEventListener("keydown", (event) => {
+    if (event.isComposing || event.keyCode === 229) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+    } else if (event.key === "Enter" && event.target.localName === "input") {
+      event.preventDefault();
+      done();
+    }
+  });
+  node.append(element("div", { class: "ge-board-form-foot" }, button(t("取消"), close), element("button", { type: "submit", "data-primary": "", text: t("保存") })));
+  mount(node);
+  const { left, top } = placeBox(anchor, { width: node.offsetWidth, height: node.offsetHeight }, { placement: "bottom", align: "end", gap: 6 });
+  node.style.left = `${Math.round(left)}px`;
+  node.style.top = `${Math.round(top)}px`;
+  shown = { node, close };
+  addEventListener("pointerdown", outside, true);
+  node.querySelector("input, .ge-board-pick, button[role=switch]")?.focus({ preventScroll: true });
+  return node;
+}
+
+/** The form taken away, whatever it holds. */
+export const closeSettings = () => shown?.close();

package/browser/editor/page/caret.mjs

@@ -105,7 +105,7 @@ export function caretAtOffset(host, offset) {
     rest -= node.length;
     last = node;
   }
-  if (last) caretAt(host, "end");
+  caretAt(host, last ? "end" : "start"); // past its text, or in a block with none (emptied)
 }
 
 /** The selection when it is non-empty and inside a single block: { host, range }, or null. */

package/browser/editor/page/changes/bar.mjs

@@ -1,13 +1,14 @@
 import { t } from "../../../shared/i18n/index.mjs";
 import { Z } from "../../../shared/layers.mjs";
 import { PANEL_STYLE, onPanels, panelGone, panelShown } from "../panel.mjs";
-import { addStyle, button, element, fadeIn, fadeOut, mount } from "../ui.mjs";
+import { addStyle, element, fadeIn, fadeOut, mount, textButton } from "../ui.mjs";
 
 // The bar of the Agent's changes (docs/editor.md "Agent's changes"), Cursor's review bar: the third of
 // the editor's bottom panels (panel.mjs), in the middle of the window's bottom, so that a notice
 // stands above it as above the others. It says how many blocks the Agent added and changed (+) and
 // changed and deleted (−), the numbers in the conflict card's green and red, and offers 撤回 and 确认
-// (the primary one), buttons with no border, as the format bar's. Reverted, it says so and offers
+// (the primary one: the pale blue), in the editor's one button look (look.mjs BUTTONS: no line, no fill
+// until the pointer is on it). Reverted, it says so and offers
 // 撤销 for UNDO_SHOWN. A conflict card at the left or the lost texts at the right reaching under it
 // lift it 8px above them.
 
@@ -21,15 +22,6 @@ const STYLE = `
   .ge-changes-count { display: inline-flex; gap: 6px; margin-right: 4px; font-variant-numeric: tabular-nums; font-weight: 500; }
   .ge-changes-plus { color: var(--ge-diff-add-text); }
   .ge-changes-minus { color: var(--ge-diff-del-text); }
-  /* Its buttons as the editor's floating bars' (the format bar's 转换为): no border, 6px corners, a gray under the
-     pointer, darker pressed; 确认 the primary blue (the workbench dialog's, the media menu's 嵌入链接). */
-  .ge-changes button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background 20ms ease-in; }
-  .ge-changes button:hover:not(:disabled) { background: var(--ge-hover); }
-  .ge-changes button:active:not(:disabled) { background: var(--ge-press); }
-  .ge-changes button[data-primary] { background: var(--ge-accent); color: #fff; }
-  .ge-changes button[data-primary]:hover:not(:disabled) { background: var(--ge-accent-hover); }
-  .ge-changes button[data-primary]:active:not(:disabled) { background: var(--ge-accent-press); }
-  .ge-changes button:disabled { opacity: .45; cursor: default; }
   @media print { .ge-changes { display: none; } }
 `;
 
@@ -80,15 +72,15 @@ export function createBar({ revert, accept }) {
         element("span", { class: "ge-changes-count", title: t("Agent 新增 {0} 块、改动 {1} 块、删除 {2} 块", added, changed, removed) },
           ...(plus ? [element("span", { class: "ge-changes-plus", text: `+${plus}` })] : []),
           ...(minus ? [element("span", { class: "ge-changes-minus", text: `−${minus}` })] : [])),
-        button(t("撤回"), revert, { title: t("撤回 Agent 的这些修改，你自己的修改会保留"), "data-action": "revert" }),
-        button(t("确认"), accept, { primary: true, title: t("保留这些修改，不再标出"), "data-action": "accept" }),
+        textButton(t("撤回"), revert, { title: t("撤回 Agent 的这些修改，你自己的修改会保留"), "data-action": "revert" }),
+        textButton(t("确认"), accept, { primary: true, title: t("保留这些修改，不再标出"), "data-action": "accept" }),
       );
     },
     // Reverted `left` ms ago at most: 撤销 offered until UNDO_SHOWN is over.
     reverted(left, undo) {
       show(
         element("span", { class: "ge-changes-what", text: t("已撤回 Agent 的修改") }),
-        button(t("撤销"), undo, { "data-action": "undo" }),
+        textButton(t("撤销"), undo, { "data-action": "undo" }),
       );
       timer = setTimeout(() => this.hide(), Math.max(0, left));
     },

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

@@ -361,7 +361,7 @@ export function createChanges({ slug, token, commits, autosave, flush, say, sess
       answer = await postAnswer(ROUTE, token, { slug, action: "revert", stamp });
       if (!answer.ok || answer.none) return false;
       session?.set(undoKey, JSON.stringify({ undo: answer.undo, at: Date.now() }));
-      return true;
+      return answer.version || true; // the version it wrote: the page shown again on another asks what that put back
     });
     if (shown) return; // the page goes: the one shown again offers 撤销
     busy = false;
@@ -381,7 +381,7 @@ export function createChanges({ slug, token, commits, autosave, flush, say, sess
     let answer = null;
     const shown = await autosave().showOwn(async () => {
       answer = await postAnswer(ROUTE, token, { slug, action: "undo", undo: id });
-      return Boolean(answer.ok);
+      return answer.ok ? answer.version || true : false;
     });
     if (shown) return;
     busy = false;

package/browser/editor/page/clipboard/import/html.mjs

@@ -332,7 +332,11 @@ function equationOf(el) {
   return el.getAttribute(ATTR.equation) || el.getAttribute(ATTR.inlineEquation) || annotation || /^\$\$([\s\S]+?)\$\$\s*$/.exec(text)?.[1].trim() || /^\$([\s\S]+?)\$$/.exec(text)?.[1].trim();
 }
 
-function richTextOf(node, { stripText = false, stripSurroundingWhitespace = false, ignoreCodeBlock = false, preserveLineBreaks = false } = {}) {
+// Besides Notion's: a picture in a table's cell (`pictures`) is a token of its own, PICTURE annotated
+// ["img", its address, its alt, "", its width] (inline.mjs's pieces, the width of an <img width>), which
+// a cell of the page shows (to-blocks.mjs richHtml).
+const PICTURE = String.fromCodePoint(0xfffc);
+function richTextOf(node, { stripText = false, stripSurroundingWhitespace = false, ignoreCodeBlock = false, preserveLineBreaks = false, pictures = false } = {}) {
   const doc = node.ownerDocument;
   if (!stripText) {
     // Paragraphs, headings and items as lines with their bullets (the structure kept in one text).
@@ -354,17 +358,18 @@ function richTextOf(node, { stripText = false, stripSurroundingWhitespace = fals
     all.push(n);
     for (const child of n.childNodes) walk(child);
   })(node);
-  const nodes = all.filter((n) => (n.nodeType !== 3 ? preserveLineBreaks && tagOf(n) === "br" : !(stripText && BLANK_LINES.test(n.data))));
+  const picture = (n) => pictures && tagOf(n) === "img" && Boolean(n.getAttribute("src"));
+  const nodes = all.filter((n) => (n.nodeType !== 3 ? (preserveLineBreaks && tagOf(n) === "br") || picture(n) : !(stripText && BLANK_LINES.test(n.data))));
   const tokens = [];
   const seenEquations = new Set();
   nodes.forEach((n, i) => {
-    let text = n.nodeType === 3 ? n.data : "\n";
+    let text = n.nodeType === 3 ? n.data : picture(n) ? PICTURE : "\n";
     if (stripText) text = text.replace(/\[ \] /g, "").replace(/\[x\] /g, "").replace(/^[-*•]\s?/g, "").replace(/(\s)+/g, "$1");
     if (i === 0 && stripSurroundingWhitespace && !node.hasAttribute?.("confluenceTabSpaces")) text = text.trimStart();
     text = clean(text);
     if (i === nodes.length - 1 && stripSurroundingWhitespace) text = text.trimEnd();
     const up = ancestors(n).filter((a) => a.nodeType === 1);
-    const annotations = [];
+    const annotations = picture(n) ? [["img", n.getAttribute("src"), n.getAttribute("alt") ?? "", "", n.getAttribute("width") ?? ""]] : [];
     if (!stripText && up.some((a) => HEADINGS.includes(tagOf(a)))) annotations.push(["b"]);
     if (up.some((a) => tagOf(a) === "strong")) annotations.push(["b"]);
     if (up.some((a) => tagOf(a) === "em")) annotations.push(["i"]);
@@ -526,7 +531,8 @@ const int = (value, fallback) => {
 };
 
 // 760354 table: row and column spans spread into empty cells; a first row all th a header row, every
-// row starting with a th a header column (both: the side with more th's).
+// row starting with a th a header column (both: the side with more th's). Its cells' pictures kept
+// (richTextOf `pictures`, besides Notion's).
 function tableBlock(node) {
   const rows = [...node.querySelectorAll("tr")].filter((row) => row.closest("table") === node);
   let headerRow = false;
@@ -550,7 +556,7 @@ function tableBlock(node) {
       while (taken[r][c]) c++;
       const rowSpan = int(cell.getAttribute("rowspan"), 1);
       const colSpan = int(cell.getAttribute("colspan"), 1);
-      grid[r][c] = richTextOf(cell, { stripSurroundingWhitespace: true, preserveLineBreaks: true });
+      grid[r][c] = richTextOf(cell, { stripSurroundingWhitespace: true, preserveLineBreaks: true, pictures: true });
       taken[r][c] = true;
       for (let dr = 0; dr < rowSpan && r + dr < rows.length; dr++) {
         for (let dc = 0; dc < colSpan; dc++) {
@@ -716,6 +722,23 @@ function blockOf(node) {
 
 const blocksOf = (nodes) => nodes.flatMap(blockOf);
 
+/**
+ * Besides Notion's (another program's cells pasted into a table's: page/clipboard/ cellsOf): the
+ * HTML's table, when it holds one and no words outside it, as rows of rich text, its cells' as
+ * tableBlock reads them (spans spread into empty cells, pictures kept); a table of one column stays
+ * one (normalizing makes Notion's paragraphs of it). Null for anything else.
+ */
+export function tableRows(root, options = {}) {
+  const tables = [...root.querySelectorAll("table")].filter((table) => !table.parentElement?.closest("table"));
+  const outside = (n) => (n.nodeType === 3 ? n.data.trim() !== "" : n.nodeType === 1 && tagOf(n) !== "table" && !REMOVED.has(tagOf(n)) && [...n.childNodes].some(outside));
+  if (tables.length !== 1 || [...root.childNodes].some(outside)) return null;
+  tables[0].classList.add("simple-table"); // kept a table (firstPass)
+  normalizeHTML(root, { ...options, inline: false });
+  const table = root.querySelector("table");
+  const block = table ? tableBlock(table) : null;
+  return block ? block.children.map((row) => block.props.table_block_column_order.map((column) => row.props.cells[column] ?? [])) : null;
+}
+
 // ---------- entry points ----------
 
 /** 760354 U: the HTML's blocks. */

package/browser/editor/page/clipboard/import/inline.mjs

@@ -27,8 +27,14 @@
 //   and a bare a@b.c (GFM's); $$…$$ amid words a display formula (annotated display too, which
 //   markdown.mjs makes a block of its own in a paragraph).
 // Besides Notion's annotations, these three: sup (superscript), sub (subscript) and display.
+//
+// Yuque's Markdown (its toolbar's 复制为 Markdown, read as a whole document with `yuque`: yuque.mjs)
+// reads two more: a formula as Yuque writes one, $ … $ with a space inside each $ (Pandoc's rule
+// refuses those), and the colors of a <font style="color: …; background-color: …"> (or a <span> so
+// styled) as the page's nearest (colors.mjs: Yuque's colors are meant, as Word's are).
 
 import { addressOf } from "../../links/address.mjs";
+import { backgroundColor, textColor } from "./colors.mjs";
 
 const WORD = /[\p{L}\p{N}]/u;
 const TRAILING = /[.,:;!?'")\]}>，。：；！？、）】」』]+$/u;
@@ -100,6 +106,20 @@ const attribute = (tag, name) => {
 };
 const decodeEntities = (text) => text.replace(/&(#\d{1,7}|#[xX][0-9a-fA-F]{1,6}|[A-Za-z][A-Za-z0-9]{1,31});/g, (all, name) => entity(name) ?? all);
 
+// Yuque's Markdown: $ … $ with a space inside each $ a formula (its words trimmed), and a <font> or
+// <span> whose style colors its words those colors, the nearest of the page's (none: its words alone).
+const styleValue = (style, name) => new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`, "i").exec(style ?? "")?.[1].trim() ?? "";
+const YUQUE_RULES = [
+  [/^\$ +([^$\n]*?[^\s$]) +\$(?!\d)/, (m) => ["⁍", ["e", m[1]], false]],
+  [/^<(font|span)\s([^<>]*)>([\s\S]*?)<\/\1\s*>/i, (m) => {
+    const style = attribute(`<${m[1]} ${m[2]}>`, "style");
+    const text = textColor(styleValue(style, "color"), { nearest: true });
+    const background = backgroundColor(styleValue(style, "background(?:-color)?"), { nearest: true });
+    const colors = [text, background].filter(Boolean).map((name) => ["h", name]);
+    return [m[3], colors.length ? colors : null, true];
+  }],
+];
+
 /** A picture's piece: U+FFFC annotated ["img", its address, its alt, its title]. */
 const picture = (src, alt, title) => ["\u{FFFC}", ["img", src.replace(/^<|>$/g, ""), alt ?? "", title ?? ""], false];
 const unquoted = (text) => (text ? text.slice(1, -1) : "");
@@ -123,6 +143,7 @@ function documentRules(doc) {
     }
   };
   const rules = [
+    ...(doc.yuque ? YUQUE_RULES : []),
     RULES[0], RULES[1],
     // $$ … $$ amid words: a display formula (markdown.mjs makes it a block of its own in a paragraph).
     [/^\$\$(.+?)\$\$/, (m) => ["⁍", [["e", m[1].trim()], ["display"]], false]],
@@ -185,6 +206,17 @@ export const parseInlineMath = (text) => parseInline(text, MATH_RULES);
  */
 export const parseInlineMarkdown = (text, doc = null) => parseInline(text, doc ? (doc.rules ??= documentRules(doc)) : RULES); // a document's made once
 
+// A table cell's pictures, a linked one's too (its link left: the cell's picture is what it shows),
+// ahead of Notion's rules (a paste's Markdown table: 单元格里的图片, which a cell holds).
+const CELL_RULES = [
+  [new RegExp(String.raw`^\[!\[([^\]]*)\]${LINK_TARGET}\]${LINK_TARGET}`), (m) => picture(m[2], m[1], unquoted(m[3]))],
+  [new RegExp(String.raw`^!\[([^\]]*)\]${LINK_TARGET}`), (m) => picture(m[2], m[1], unquoted(m[3]))],
+  ...RULES,
+];
+
+/** A pasted Markdown table's cell as rich text: Notion's rules, and its pictures ![alt](src) (inline.mjs's picture pieces). */
+export const parseCellMarkdown = (text) => parseInline(text, CELL_RULES);
+
 /** HTML entities in text as their characters (&amp; &#8212;), one it does not know as written. */
 export { decodeEntities };