@heycys/gallery 0.2.3 → 0.2.4

package/README.md

@@ -41,7 +41,7 @@ Explorer shows, OneDrive's when OneDrive backs it up) unless you name another (`
 `GALLERY_WORKSPACE` variable, or `gallery init <dir>`, which marks a folder as one). Each document is a folder
 (`<slug>/doc.html`, `doc.json`), the deliverables are in `exports/`, and Gallery keeps its own state in `.gallery/`.
 
-The server listens on 127.0.0.1 only (a port from 4317), one per workspace; `gallery stop` stops it. After
+The server listens on 127.0.0.1 only, reusing its last port or trying 8080–8099, one per Gallery data directory; `gallery stop` stops it. After
 upgrading, run `gallery open` once (the server of the version before stops by itself and the new one starts) and
 `gallery skill install` again (the skill of the new version). From the older Gallery skill (the whole tools in the
 agent's skills folder), `gallery skill install` copies its documents into the workspace and moves it out of the

package/THIRD-PARTY-NOTICES.md

@@ -1,6 +1,6 @@
 # Third-party notices
 
-@heycys/gallery 0.2.3 carries the following code and data of others, bundled into dist/ and web/, built into kit/, or as files in vendor/ and browser/.
+@heycys/gallery 0.2.4 carries the following code and data of others, bundled into dist/ and web/, built into kit/, or as files in vendor/ and browser/.
 
 ## @asamuzakjp/css-color 5.1.11
 

package/assets/preview/runtime.js

@@ -0,0 +1,156 @@
+// Preview runtime: injected at the top of every preview page by cli/preview.mjs.
+// Gives the page the toolbar state (theme, width, its own options) and Gallery's tooltip, toast, confirm and menu,
+// drawn with Gallery's own classes, so a page only writes what is new.
+(() => {
+  const listeners = new Set();
+  let state = (() => { try { return { ...parent.__pvState }; } catch { return {}; } })();
+
+  const ICON = {
+    close: '<svg viewBox="0 0 20 20"><path d="m5.5 5.5 9 9M14.5 5.5l-9 9"/></svg>',
+    plus: '<svg viewBox="0 0 16 16"><path d="M8 3.25v9.5M3.25 8h9.5"/></svg>',
+    more: '<svg viewBox="0 0 16 16" class="fill"><circle cx="3.25" cy="8" r="1.25"/><circle cx="8" cy="8" r="1.25"/><circle cx="12.75" cy="8" r="1.25"/></svg>',
+    rename: '<svg viewBox="0 0 20 20"><path d="M12.75 4.25 15.75 7.25 7.5 15.5l-3.75.75.75-3.75z"/></svg>',
+    duplicate: '<svg viewBox="0 0 20 20"><rect x="6.75" y="6.75" width="9.5" height="9.5" rx="1.75"/><path d="M13.25 6.75v-1.5a1.5 1.5 0 0 0-1.5-1.5h-6.5a1.5 1.5 0 0 0-1.5 1.5v6.5a1.5 1.5 0 0 0 1.5 1.5h1.5"/></svg>',
+    trash: '<svg viewBox="0 0 20 20"><path d="M3.75 5.75h12.5M8 5.75V4.5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.25M5.25 5.75l.7 9.6a1.5 1.5 0 0 0 1.5 1.4h5.1a1.5 1.5 0 0 0 1.5-1.4l.7-9.6"/></svg>',
+    folder: '<svg viewBox="0 0 24 24" class="lu"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>',
+    copy: '<svg viewBox="0 0 24 24" class="lu"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
+    file: '<svg viewBox="0 0 24 24" class="lu"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8M16 17H8M10 9H8"/></svg>',
+    puzzle: '<svg viewBox="0 0 24 24" class="lu"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>',
+    column: '<svg viewBox="0 0 24 24" class="lu"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>',
+    window: '<svg viewBox="0 0 24 24" class="lu"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/></svg>',
+    server: '<svg viewBox="0 0 24 24" class="lu"><rect width="20" height="8" x="2" y="2" rx="2"/><rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 6h.01M6 18h.01"/></svg>',
+    bot: '<svg viewBox="0 0 24 24" class="lu"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2M20 14h2M15 13v2M9 13v2"/></svg>',
+  };
+  const esc = s => String(s ?? '').replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+
+  function apply(next, key) {
+    state = { ...state, ...next };
+    document.documentElement.dataset.theme = state.theme === 'dark' ? 'dark' : 'light';
+    document.documentElement.style.colorScheme = state.theme === 'dark' ? 'dark' : 'light';
+    for (const fn of listeners) fn(state, key);
+  }
+  addEventListener('message', e => { if (e.data?.pv === 'state') apply(e.data.state, e.data.key); });
+  if (!state.theme) try { parent.postMessage({ pv: 'hello' }, '*'); } catch {}
+
+  // Tooltip: Gallery shows one for any [data-tip] (data-tip-delay in ms, default 450).
+  let tipEl = null, tipTimer = 0;
+  const hideTip = () => { clearTimeout(tipTimer); tipEl?.classList.remove('show'); };
+  document.addEventListener('mouseover', e => {
+    const t = e.target.closest?.('[data-tip]');
+    hideTip();
+    if (!t || !t.dataset.tip || document.body.classList.contains('pv-dragging')) return;
+    tipTimer = setTimeout(() => {
+      tipEl ??= document.body.appendChild(Object.assign(document.createElement('div'), { className: 'tip' }));
+      tipEl.textContent = t.dataset.tip;
+      const r = t.getBoundingClientRect(), w = tipEl.offsetWidth, h = tipEl.offsetHeight;
+      const x = Math.max(8, Math.min(innerWidth - w - 8, r.left + r.width / 2 - w / 2));
+      const y = r.bottom + 6 + h > innerHeight - 8 ? r.top - h - 6 : r.bottom + 6;
+      tipEl.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
+      tipEl.classList.add('show');
+    }, Number(t.dataset.tipDelay) || 450);
+  });
+  document.addEventListener('pointerdown', hideTip, true);
+
+  let toastTimer = 0;
+  function toast(text, { action, onAction, tone } = {}) {
+    document.querySelector('.toast')?.remove();
+    const t = document.createElement('div');
+    t.className = 'toast' + (tone === 'error' ? ' error' : '');
+    t.setAttribute('role', 'status');
+    t.innerHTML = '<span>' + esc(text) + '</span>' + (action ? '<button type="button">' + esc(action) + '</button>' : '');
+    t.querySelector('button')?.addEventListener('click', () => { t.remove(); onAction?.(); });
+    document.body.append(t);
+    requestAnimationFrame(() => t.classList.add('show'));
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => { t.classList.remove('show'); setTimeout(() => t.remove(), 200); }, 4000);
+  }
+
+  let modal = null;
+  function confirm({ title, message, actions = [{ id: 'cancel', label: '取消' }, { id: 'ok', label: '确定', primary: true }] }) {
+    return new Promise(done => {
+      modal?.end('cancel');
+      const m = document.createElement('div');
+      m.className = 'modal dialog-overlay';
+      m.innerHTML = '<div class="dialog" role="alertdialog" aria-modal="true"><div class="dialog-title">' + esc(title) + '</div>' +
+        (message ? '<div class="dialog-message">' + esc(message) + '</div>' : '') + '<div class="dialog-actions">' +
+        actions.map(a => '<button type="button" class="dialog-btn' + (a.primary ? ' primary' : '') + (a.danger ? ' danger' : '') + '" data-a="' + esc(a.id) + '">' + esc(a.label) + '</button>').join('') + '</div></div>';
+      const back = document.activeElement;
+      const end = id => { m.remove(); modal = null; back?.focus?.({ preventScroll: true }); done(id); };
+      m.addEventListener('pointerdown', e => { if (e.target === m) end('cancel'); });
+      m.addEventListener('click', e => { const b = e.target.closest('[data-a]'); if (b) end(b.dataset.a); });
+      document.body.append(m);
+      modal = { end };
+      (m.querySelector('.primary') || m.querySelector('button')).focus();
+    });
+  }
+
+  // items: { icon, label, danger, disabled, tip, run } or '-' for a line. Returns a function that closes it.
+  let menuEl = null, menuAnchor = null, menuDone = null;
+  function closeMenu() {
+    if (!menuEl) return;
+    menuEl.remove(); menuEl = null;
+    menuAnchor?.classList.remove('pv-menu-open'); menuAnchor?.setAttribute?.('aria-expanded', 'false');
+    const d = menuDone; menuAnchor = menuDone = null; d?.();
+  }
+  function menu(anchor, items, { align = 'start', onClose } = {}) {
+    closeMenu(); hideTip();
+    menuEl = document.createElement('div');
+    menuEl.className = 'menu';
+    menuEl.setAttribute('role', 'menu');
+    menuEl.style.zIndex = 1600;
+    menuEl.innerHTML = items.filter(Boolean).map((it, i) => it === '-' ? '<div class="menu-sep"></div>' :
+      '<div class="menu-item' + (it.danger ? ' danger' : '') + (it.disabled ? ' off' : '') + '" role="menuitem" data-i="' + i + '"' +
+      (it.disabled ? ' aria-disabled="true"' : '') + (it.tip ? ' data-tip="' + esc(it.tip) + '"' : '') + '>' +
+      (it.icon ? '<span class="mi-icon">' + (ICON[it.icon] || it.icon) + '</span>' : '') + '<span class="mi-label">' + esc(it.label) + '</span></div>').join('');
+    document.body.append(menuEl);
+    const r = anchor.getBoundingClientRect(), w = menuEl.offsetWidth;
+    menuEl.style.left = Math.max(8, Math.min(align === 'end' ? r.right - w : r.left, innerWidth - w - 8)) + 'px';
+    menuEl.style.top = (r.bottom + 4 + menuEl.offsetHeight > innerHeight - 8 ? Math.max(8, r.top - 4 - menuEl.offsetHeight) : r.bottom + 4) + 'px';
+    menuAnchor = anchor; menuDone = onClose;
+    anchor.classList.add('pv-menu-open'); anchor.setAttribute?.('aria-expanded', 'true');
+    const list = items.filter(Boolean);
+    menuEl.addEventListener('click', e => {
+      const el = e.target.closest('.menu-item');
+      if (!el || el.classList.contains('off')) return;
+      const it = list[el.dataset.i];
+      closeMenu();
+      it.run?.();
+    });
+    return closeMenu;
+  }
+  document.addEventListener('pointerdown', e => {
+    if (menuEl && !menuEl.contains(e.target) && !menuAnchor?.contains(e.target)) closeMenu();
+  }, true);
+  // Escape closes what is on top first: the confirm, then the menu; only then does the page see it.
+  document.addEventListener('keydown', e => {
+    if (e.key !== 'Escape') return;
+    if (modal) { e.stopImmediatePropagation(); e.preventDefault(); modal.end('cancel'); }
+    else if (menuEl) { e.stopImmediatePropagation(); e.preventDefault(); const a = menuAnchor; closeMenu(); a?.focus?.({ preventScroll: true }); }
+  }, true);
+
+  // A Gallery window behind the page's dialog: <body data-backdrop="gallery">.
+  document.addEventListener('DOMContentLoaded', () => {
+    if (document.body.dataset.backdrop !== 'gallery') return;
+    const b = document.createElement('div');
+    b.className = 'pv-backdrop';
+    b.setAttribute('aria-hidden', 'true');
+    b.innerHTML = '<div class="pv-backdrop-side"><i style="width:40%"></i><i style="width:70%"></i><i style="width:55%"></i><i style="width:80%"></i><i style="width:62%"></i></div>' +
+      '<div class="pv-backdrop-main"><i style="width:36%;height:22px"></i><i style="width:90%"></i><i style="width:84%"></i><i style="width:72%"></i></div>';
+    document.body.prepend(b);
+  });
+  const style = document.createElement('style');
+  style.textContent = 'body{margin:0;font-family:var(--font);font-size:14px;background:var(--bacPri);color:var(--texPri)}' +
+    '.pv-backdrop{position:fixed;inset:0;display:flex}.pv-backdrop-side{width:270px;flex:none;box-sizing:border-box;background:var(--sidBac);padding:56px 16px;display:flex;flex-direction:column;gap:16px}' +
+    '.pv-backdrop-main{flex:1;min-width:0;padding:72px 64px;display:flex;flex-direction:column;gap:18px}.pv-backdrop i{display:block;height:10px;border-radius:5px;background:var(--bacTerTra)}' +
+    '@media (max-width:700px){.pv-backdrop-side{display:none}}';
+  document.head.prepend(style);
+
+  window.preview = {
+    get config() { try { return JSON.parse(document.getElementById('preview-config')?.textContent || '{}'); } catch { return {}; } },
+    get state() { return state; },
+    on(fn) { listeners.add(fn); fn(state, null); return () => listeners.delete(fn); },
+    set(next) { try { parent.postMessage({ pv: 'set', state: next }, '*'); } catch {} },
+    toast, confirm, menu, closeMenu, hideTip, icon: ICON, esc,
+  };
+  apply({});
+})();

package/assets/preview/shell.html

@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>预览 · {{TITLE}}</title>
+<style>
+:root { --pv-bg: #f1f0ee; --pv-bar: #fbfbfa; --pv-line: #e3e2e0; --pv-text: #37352f; --pv-sub: #787774; --pv-hover: #37352f0f; --pv-on: #37352f17; --pv-frame: #ffffff; }
+:root[data-theme="dark"] { --pv-bg: #151515; --pv-bar: #202020; --pv-line: #2f2f2f; --pv-text: #e6e6e5; --pv-sub: #9b9b9b; --pv-hover: #ffffff0e; --pv-on: #ffffff1a; --pv-frame: #191919; }
+html, body { height: 100%; margin: 0; }
+body { display: flex; flex-direction: column; background: var(--pv-bg); color: var(--pv-text); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif; }
+.pvs-bar { flex: none; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; box-sizing: border-box; background: var(--pv-bar); border-bottom: 1px solid var(--pv-line); }
+.pvs-title, .pvs-hint { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pvs-title { font-weight: 600; }
+.pvs-hint { color: var(--pv-sub); font-size: 12px; text-align: right; }
+.pvs-tools { flex: none; display: flex; align-items: center; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
+.pvs-group { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
+.pvs-group + .pvs-group { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--pv-line); }
+.pvs-label { padding: 0 4px; color: var(--pv-sub); font-size: 12px; }
+.pvs-tools button { height: 26px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: var(--pv-sub); font: inherit; cursor: pointer; }
+.pvs-tools button:hover { background: var(--pv-hover); }
+.pvs-tools button[aria-pressed="true"] { background: var(--pv-on); color: var(--pv-text); font-weight: 500; }
+.pvs-tools button:focus-visible { outline: 2px solid #2383e2; outline-offset: -2px; }
+.pvs-stage { flex: 1; min-height: 0; display: flex; justify-content: center; }
+.pvs-stage iframe { display: block; width: 100%; max-width: 100%; height: 100%; border: 0; background: var(--pv-frame); }
+.pvs-stage[data-fixed] iframe { box-shadow: 0 0 0 1px var(--pv-line); }
+@media (max-width: 900px) { .pvs-title, .pvs-hint { display: none; } .pvs-bar { justify-content: center; } }
+</style>
+</head>
+<body>
+<header class="pvs-bar">
+  <div class="pvs-title"></div>
+  <div class="pvs-tools" role="toolbar" aria-label="预览设置"></div>
+  <div class="pvs-hint"></div>
+</header>
+<main class="pvs-stage"><iframe title="预览"></iframe></main>
+<script>
+(() => {
+  const CONFIG = /*CONFIG*/;
+  const PAGE = /*PAGE*/;
+  const WIDTH_NAMES = { normal: '正常', wide: '宽', narrow: '窄', phone: '手机' };
+  const groups = [
+    ...(CONFIG.options || []).map(o => ({ key: o.key, label: o.label, values: Object.entries(o.values) })),
+    { key: 'theme', label: '主题', values: [['light', '浅色'], ['dark', '深色']] },
+    { key: 'width', label: '宽度', values: Object.keys(CONFIG.widths).map(k => [k, WIDTH_NAMES[k] || k]) },
+  ];
+  const fromHash = Object.fromEntries(new URLSearchParams(location.hash.slice(1)));
+  const state = {};
+  for (const g of groups) {
+    const fallback = g.key === 'theme' ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : g.values[0][0];
+    state[g.key] = g.values.some(([v]) => v === fromHash[g.key]) ? fromHash[g.key] : fallback;
+  }
+  window.__pvState = state;
+
+  const $ = s => document.querySelector(s);
+  const esc = value => String(value).replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
+  const frame = $('iframe'), stage = $('.pvs-stage');
+  $('.pvs-title').textContent = CONFIG.title || '';
+  $('.pvs-hint').textContent = CONFIG.hint || '';
+  $('.pvs-tools').innerHTML = groups.map(g => '<div class="pvs-group"><span class="pvs-label">' + esc(g.label) + '</span>' +
+    g.values.map(([v, label]) => '<button type="button" data-k="' + esc(g.key) + '" data-v="' + esc(v) + '">' + esc(label) + '</button>').join('') + '</div>').join('');
+
+  function show() {
+    document.documentElement.dataset.theme = state.theme;
+    document.querySelectorAll('.pvs-tools button').forEach(b => b.setAttribute('aria-pressed', String(state[b.dataset.k] === b.dataset.v)));
+    const px = CONFIG.widths[state.width];
+    frame.style.width = px ? px + 'px' : '100%';
+    stage.toggleAttribute('data-fixed', Boolean(px));
+    history.replaceState(null, '', '#' + new URLSearchParams(state));
+  }
+  function set(next, key) {
+    Object.assign(state, next);
+    show();
+    frame.contentWindow?.postMessage({ pv: 'state', state: { ...state }, key }, '*');
+  }
+  $('.pvs-tools').addEventListener('click', e => {
+    const b = e.target.closest('button');
+    if (b && state[b.dataset.k] !== b.dataset.v) set({ [b.dataset.k]: b.dataset.v }, b.dataset.k);
+  });
+  addEventListener('message', e => {
+    if (e.source !== frame.contentWindow) return;
+    if (e.data?.pv === 'set') set(e.data.state, Object.keys(e.data.state)[0]);
+    if (e.data?.pv === 'hello') frame.contentWindow.postMessage({ pv: 'state', state: { ...state }, key: 'init' }, '*');
+  });
+
+  let loaded;
+  const ready = new Promise(r => { loaded = r; });
+  frame.addEventListener('load', () => loaded(), { once: true });
+  show();
+  frame.srcdoc = PAGE;
+
+  // For scripts that drive the preview (screenshots, checks): run code inside the page, find where an element is.
+  window.pv = {
+    ready, state, set,
+    run: code => frame.contentWindow.eval('(async () => {\n' + code + '\n})()'),
+    rect(selector) {
+      const f = frame.getBoundingClientRect(), el = frame.contentDocument.querySelector(selector);
+      if (!el) return null;
+      const r = el.getBoundingClientRect();
+      return { x: f.left + r.left + r.width / 2, y: f.top + r.top + r.height / 2, left: f.left + r.left, top: f.top + r.top, width: r.width, height: r.height };
+    },
+    frameRect() { const r = frame.getBoundingClientRect(); return { x: r.left, y: r.top, width: r.width, height: r.height }; },
+  };
+})();
+</script>
+</body>
+</html>

package/assets/writing-preferences.md

@@ -1,4 +1,4 @@
-# 写作偏好
+# 项目报告写作
 
 ## 写作流程
 

package/browser/editor/components/divider/index.mjs

@@ -42,7 +42,7 @@ export default {
       },
       label: t("分割线"), icon: svg('<path d="M3 10h14"/><path d="M5.5 6h9M5.5 14h9" stroke-opacity=".35"/>'),
       hint: "---", markdown: [{ match: /^---$/, alone: true }], words: "分割线 分隔线 横线 fengexian fgx hr divider line rule",
-      glance: { row: 5, name: "分割线", write: "`<hr>` first in a section", rule: "The page" },
+      glance: { row: 5, name: "分割线", write: "`<hr>` where a visual break is useful", rule: "The page" },
     },
   },
 };

package/browser/editor/page/annotate/card.mjs

@@ -61,6 +61,12 @@ export const STYLE = `
   .ge-note-delete { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; display: grid; place-items: center; color: var(--ge-ico3); cursor: pointer; }
   .ge-note-delete svg { width: 18px; height: 18px; pointer-events: none; }
   .ge-note-bar { width: 2px; border-radius: 1px; background: var(--ge-note-line); }
+  /* Acted on (gallery notes done): grey, as a resolved comment is quieter. */
+  .ge-note-card[data-done] .ge-note-face { opacity: 0.55; }
+  .ge-note-card[data-done] textarea { color: var(--ge-tx3); }
+  .ge-note-marker[data-done] { color: var(--ge-ico3); opacity: 0.6; }
+  .ge-note-bar[data-done] { opacity: 0.4; }
+  .ge-note-card[data-done][data-front] .ge-note-face { opacity: 1; }
   .ge-note-bar[data-hot] { background: var(--ge-note-hot-line); }
   @media print {
     .ge-note-layer { display: none; }

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

@@ -113,6 +113,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
   let items = new Map(); // id -> { id, created, updated, text, anchor } in page order, as the server last said, with the page's own changes
   let filed = new Map(); // id -> its text as the file last held it (the server's last answer): what 撤销 brings back of one emptied in its card
   let version = null; // the file's, as last read or written
+  let toldAt = null; // when the removal by a gallery command the workbench was last told of happened (gallery notes remove)
   const lost = new Map(); // id -> an annotation a check deleted this visit (its words gone): back when an undo brings them back
   const timers = new Map(); // id -> the timer of its save (typed, not saved yet)
   const sending = new Set(); // ids whose save is on its way
@@ -218,9 +219,16 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     resolved = false;
     everything = true;
     remeasure = true;
+    marksChanged = true; // done ones are drawn quietly
     if (items.size > 0) followText();
     wake();
     changed();
+    // An Agent removed some at the reader's word (gallery notes remove): offered back as a card's delete button's is.
+    const gone = answer.commandRemoved;
+    if (gone?.items?.length > 0 && gone.at !== toldAt) {
+      toldAt = gone.at;
+      removed(gone.items);
+    }
     return true;
   }
 
@@ -506,6 +514,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
   function cardOf(id) {
     const card = cards.get(id) ?? makeCard(id);
     const text = items.get(id)?.text ?? "";
+    card.node.toggleAttribute("data-done", items.get(id)?.done === true);
     if (card.field.value !== text && document.activeElement !== card.field) {
       card.field.value = text;
       card.height = 0;
@@ -829,7 +838,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
       .sort((a, b) => a.at.compareBoundaryPoints(Range.START_TO_START, b.at));
     return listed.map(({ item, view }) => {
       const words = view.range || view.unknown ? view.excerpt?.quote ?? item.anchor?.quote : blockSelection(view.units)?.excerpt.quote;
-      return { id: item.id, text: item.text, quote: tidy(words) };
+      return { id: item.id, text: item.text, quote: tidy(words), done: item.done === true };
     });
   }
 
@@ -1071,6 +1080,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     const strong = [];
     for (const [id, view] of views) {
       if (!view.range || view.hidden || view.folded) continue;
+      if (id !== hotId && items.get(id)?.done) continue; // acted on: the words are left unmarked
       (id === hotId ? strong : plain).push(view.range);
     }
     if (shown?.id && !views.has(shown.id) && made.get(shown.id)?.range) strong.push(made.get(shown.id).range);
@@ -1078,7 +1088,9 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     CSS.highlights.set(HOT, new Highlight(...strong));
     for (const [id, view] of views) {
       view.marker?.toggleAttribute("data-hot", id === hotId);
+      view.marker?.toggleAttribute("data-done", items.get(id)?.done === true);
       view.bar?.toggleAttribute("data-hot", id === shown?.id || id === hot);
+      view.bar?.toggleAttribute("data-done", items.get(id)?.done === true);
     }
   }
 
@@ -1167,7 +1179,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
   // BAR.reach), so that each keeps the pointer it is for, and within the column's right room (margin.mjs).
   function markerAcross(right, units) {
     const section = units.map((unit) => sectionOps()?.sectionOf(unit)).find(Boolean);
-    return markerLeft(right, windowWidth(), section ? Math.min(section.getBoundingClientRect().right + BAR.reach, right + rightRoom() - RAIL.marker) : 0);
+    return markerLeft(right, windowWidth(), section ? Math.min(section.getBoundingClientRect().right + BAR.gap + BAR.width + 2, right + rightRoom() - RAIL.marker) : 0);
   }
 
   // Where a marker of `unit` alone stands (window coordinates): the place of the button beside it
@@ -1572,6 +1584,14 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
       const answer = await fetch(`${ROUTE}?slug=${encodeURIComponent(slug)}&as=copy`, { headers: { "X-Gallery-Token": token }, cache: "no-store" }).then((response) => response.json()).catch(() => ({ ok: false, reason: "offline" }));
       return answer.ok ? { ok: true, data: { title: answer.title, path: answer.path, items: answer.items } } : { ok: false, reason: answer.reason ?? "error" };
     },
+    // 删除已处理: those marked done (gallery notes done), what was typed saved first; 撤销 brings them back (the workbench's).
+    async clearDone() {
+      await flush();
+      const answer = await send({ removeDone: true });
+      if (!answer.ok) return { ok: false, reason: answer.reason ?? "error" };
+      take(answer);
+      return { ok: true, slug, removed: answer.removed ?? [] };
+    },
     async clear() {
       if (focused()) document.activeElement.blur();
       close();

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

@@ -345,7 +345,7 @@ export function createColumnGaps({ active, struct, look, say, settle = () => {}
   }, true);
   document.addEventListener("pointerup", () => { if (drag) finish(true); }, true);
   endsGesture({ active: () => Boolean(drag), cancel: () => finish(false) });
-  cancelOnEscape({ active: () => Boolean(drag), cancel: () => { finish(false); say(t("已取消调整。")); } });
+  cancelOnEscape({ active: () => Boolean(drag), cancel: () => { finish(false); say(t("已取消调整")); } });
   addEventListener("scroll", () => { if (hover && !drag) place(hover); }, { passive: true, capture: true });
 
   return {

package/browser/editor/page/conflicts.mjs

@@ -151,7 +151,7 @@ export function createConflicts({ act, nodeOf, restorable, copyBlock, say }) {
           const node = nodeOf(entry);
           const parts = node?.parentElement ? [...node.parentElement.children].filter((other) => partOwner(other)?.owner === node) : [];
           const text = [node, ...parts].filter((part) => part?.isConnected).map(blocksText).filter(Boolean).join("\n") || mine;
-          if (text) navigator.clipboard?.writeText(text).then(() => say(t("已复制。")));
+          if (text) navigator.clipboard?.writeText(text).then(() => say(t("已复制")));
           else say(t("没有可复制的文字。"));
           return;
         }

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

@@ -301,7 +301,7 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule,
     for (const details of opened) if (!(lands && details.contains(drop.container))) details.open = false;
     if (!lands) {
       selection.select(targets.filter(alive), { quiet: true });
-      say(!commit ? t("已取消移动。") : t("位置没有变化。"));
+      say(!commit ? t("已取消移动") : t("位置没有变化"));
       return;
     }
     if (drop.aside) {

package/browser/editor/page/editor.mjs

@@ -51,6 +51,7 @@ import { createSelectAll, topStep } from "./select-all/index.mjs";
 import { revealText } from "./find/index.mjs";
 import { createOutline } from "./outline/index.mjs";
 import { createAnnotate } from "./annotate/index.mjs";
+import { watchFocus } from "./focus.mjs";
 import { createChanges as createAgentChanges } from "./changes/index.mjs";
 import { BLOCK_TYPES, HOSTS, PLAIN_TEXT, TYPE_INFO, accepts, blankSaysOf, boxOwner, texOnly, textFilters } from "../components/registry.mjs";
 import { createPages } from "../components/pages.mjs";
@@ -519,7 +520,7 @@ function committed({ conflicts: held, merged, outdated, forced = [], rekeyed = [
   }
   // What the server says besides (service.mjs retitle, reicon: "标题已更新", what did not follow it),
   // each note in the UI's language, as one sentence.
-  else if (receipt.notes?.length) say(t("{0}。", receipt.notes.map((note) => t(note)).join(t("；"))), "note", receipt.notes.length > 1 ? 6000 : undefined);
+  else if (receipt.notes?.length) say(receipt.notes.length === 1 ? t(receipt.notes[0]) : t("{0}。", receipt.notes.map((note) => t(note)).join(t("；"))), "note", receipt.notes.length > 1 ? 6000 : undefined);
 }
 
 // ---------- conflicts ----------
@@ -1148,7 +1149,7 @@ async function saveNow() {
   const outcome = await autosave?.flush();
   const { held, drafts } = view();
   const unfitHeld = unfitCount();
-  if (outcome === "saved" || outcome === "nothing") say(unfitHeld === 0 && held > 0 ? t("其余修改已保存；红框处的冲突还没有保存。") : held > unfitHeld ? t("其余修改已保存；红框处的内容还没有保存。") : held > 0 ? t("其余修改已保存；红框处的内容文档存不下，没有保存。") : drafts > 0 ? t("其余修改已保存；还没写完的块（红框或空标题）没有保存。") : t("已保存。"));
+  if (outcome === "saved" || outcome === "nothing") say(unfitHeld === 0 && held > 0 ? t("其余修改已保存；红框处的冲突还没有保存。") : held > unfitHeld ? t("其余修改已保存；红框处的内容还没有保存。") : held > 0 ? t("其余修改已保存；红框处的内容文档存不下，没有保存。") : drafts > 0 ? t("其余修改已保存；还没写完的块（红框或空标题）没有保存。") : t("已保存"));
   else if (outcome === "offline") say(t("{0}：修改暂存在浏览器里，连上后自动保存。", OFFLINE), "error");
   return outcome;
 }
@@ -1177,6 +1178,32 @@ function post(route, body) {
   return postAnswer(route, MAP.token, body);
 }
 
+// A write of the file the reader asked for elsewhere (历史版本's 恢复 and its 撤销: POST /__gallery/edit/history,
+// `body` its action), as 撤回 of the Agent's changes goes (changes/): what waits is saved first, and nothing may
+// wait for the reader (a text not saved, a conflict, offline: `pending`, nothing done); then the server writes it
+// and the page is shown again as after a write of its own (autosave showOwn: no question of what that write put
+// back of the reader's, who asked for it). Answers the server's answer (`undo` for a restore) as soon as it
+// comes, before the page goes (the workbench takes a page's reload for its end, and a reply after it for none).
+async function writeOwn(body) {
+  if (!editing || !autosave) return { ok: false, reason: "editing" };
+  checkAll();
+  await annotate?.flush();
+  await autosave.flush();
+  const state = autosave.state;
+  if (state.waiting > 0 || state.syncing || state.held > 0 || state.offline) return { ok: false, reason: "pending" };
+  return new Promise((resolve) => {
+    let answered = false;
+    autosave.showOwn(async () => {
+      const answer = await post("/__gallery/edit/history", { slug: MAP.slug, ...body });
+      answered = true;
+      const { id: _, ...said } = answer; // the reply's own id is the command's
+      resolve(said);
+      await new Promise((sent) => setTimeout(sent, 0)); // the reply posted first
+      return answer.ok && !answer.same ? answer.version || true : false;
+    }).then(() => { if (!answered) resolve({ ok: false, reason: "pending" }); }, () => { if (!answered) resolve({ ok: false, reason: "pending" }); });
+  });
+}
+
 let workbench = null; // the session with a workbench embedding the page (session.mjs), if any
 let released = false; // the workbench closes the page: what does not get saved in time stays in the crash buffer
 
@@ -1232,6 +1259,13 @@ const COMMANDS = {
     }
     return exportNow();
   },
+  // 历史版本's 恢复 of a version and the 撤销 of one (the workbench's: features/history/), the reader's own writes.
+  async "restore-version"({ version }) {
+    return writeOwn({ action: "restore", version });
+  },
+  async "undo-version"({ undo }) {
+    return writeOwn({ action: "undo", undo });
+  },
   // 搜索文档 opened the report at a hit: its words scrolled into view and marked for a moment (find/).
   async reveal(message) {
     return revealText(message, (node) => {
@@ -1638,7 +1672,7 @@ function showLost() {
     panelItem(
       element("p", { text: LOST[item.why] ?? LOST.refused }),
       element("div", { class: "ge-version", text }),
-      element("div", { class: "ge-actions" }, textButton(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" }, textButton(t("都处理好了，不再保留"), () => {
@@ -1703,6 +1737,8 @@ function boot() {
     changed: () => workbench?.update(),
     removed: (items) => workbench?.annotationsRemoved(items),
   });
+  // Where the reader is (the caret's block, the words and blocks selected), told to the workbench for gallery status.
+  if (!SOLO) watchFocus({ picked: () => blocks?.picked ?? [], crossTexts: () => crossText.texts(), tell: (where) => workbench?.focus(where) });
   // Read at once, drawn once the page is ready; commits and autosave are made as the page edits (enter).
   if (!SOLO) agentChanges = createAgentChanges({
     slug: MAP.slug, token: MAP.token, commits: () => commits, autosave: () => autosave, say, session,

package/browser/editor/page/focus.mjs

@@ -0,0 +1,104 @@
+import { cutWords } from "../../shared/presence.mjs";
+import { editable } from "./caret.mjs";
+import { unitElement } from "./core.mjs";
+import { readText, textSelection } from "./annotate/anchors.mjs";
+
+// Where the reader is on the page, for gallery status (shared/presence.mjs): the block the caret is in, or the words and
+// blocks selected, told to the workbench (session.mjs `focus`), which reports them to the server with its tab's other facts.
+// Only what the reader has in front of them: the block's data-block-id (null for one the file has no id for yet: its commit is
+// on its way) and its words, or the selected words, cut to 200 characters (shared/presence.mjs cutWords) before they leave the page.
+//
+// Given: picked() (the blocks selected whole: blocks.mjs), crossTexts() (text selected across blocks: text-select/, [{ host, range }]
+// or null), tell({ caret, selection }) (the workbench's `focus`). Nothing is told while nothing changed: the selection and the caret
+// are read 250ms after the last event that may have moved them (selectionchange, a press, a key, the focus), and the blocks selected
+// whole, which no browser event announces, are looked at every 2s.
+
+const AFTER = 250;
+const WATCH = 2000;
+
+/** A block's id as the file has it, or null. */
+const idOf = (unit) => unit?.getAttribute?.("data-block-id") || null;
+/** A block's words, cut. */
+const wordsOf = (unit) => cutWords(readText([unit]).text).text;
+
+/** The blocks the reader has selected whole: { kind: "blocks", blocks: [ids], text: the first one's words }, or null. */
+function blockSelection(units) {
+  const list = units.filter((unit) => unit?.isConnected);
+  if (list.length === 0) return null;
+  return { kind: "blocks", blocks: list.map(idOf).filter(Boolean), text: wordsOf(list[0]) };
+}
+
+/** Words selected as one range: { kind: "text", blocks: [ids], text, length }, or null. */
+function wordsSelection(range) {
+  const found = textSelection(range);
+  if (found) {
+    const words = cutWords(found.excerpt.quote);
+    return { kind: "text", blocks: found.units.map(idOf).filter(Boolean), text: words.text, length: found.excerpt.quote.length };
+  }
+  // Words the annotations leave out (the title, a code block's): the block holding them, the words as the browser gives them.
+  const unit = unitElement(range.startContainer.nodeType === 1 ? range.startContainer : range.startContainer.parentElement);
+  const text = range.toString();
+  const words = cutWords(text);
+  return words.text ? { kind: "text", blocks: [idOf(unit)].filter(Boolean), text: words.text, length: text.length } : null;
+}
+
+/** What the reader has selected now (blocks, text across blocks, text in one block), or null. */
+function selectionNow({ picked, crossTexts }) {
+  const blocks = picked();
+  if (blocks.length > 0) return blockSelection(blocks);
+  const texts = crossTexts();
+  if (texts?.length) {
+    const range = document.createRange();
+    range.setStart(texts[0].range.startContainer, texts[0].range.startOffset);
+    range.setEnd(texts.at(-1).range.endContainer, texts.at(-1).range.endOffset);
+    return wordsSelection(range);
+  }
+  const selection = getSelection();
+  if (!selection?.rangeCount || selection.isCollapsed) return null;
+  const range = selection.getRangeAt(0);
+  if (!editable(range.commonAncestorContainer) && !editable(range.startContainer)) return null;
+  return wordsSelection(range.cloneRange());
+}
+
+/** The block the caret is in: { block, text }, or null (no caret in the page's text). */
+function caretNow() {
+  const selection = getSelection();
+  const host = selection?.rangeCount ? editable(selection.anchorNode) : null;
+  const unit = host ? unitElement(host) : null;
+  return unit ? { block: idOf(unit), text: wordsOf(unit) } : null;
+}
+
+export function watchFocus({ picked, crossTexts, tell }) {
+  let last = null;
+  let timer = 0;
+  const read = () => {
+    timer = 0;
+    const selection = selectionNow({ picked, crossTexts });
+    const caret = selection ? null : caretNow();
+    const key = JSON.stringify({ caret, selection });
+    if (key === last) return;
+    last = key;
+    tell({ caret, selection });
+  };
+  const soon = () => {
+    if (!timer) timer = setTimeout(read, AFTER);
+  };
+  for (const type of ["selectionchange", "pointerup", "keyup", "focusin", "focusout"]) document.addEventListener(type, soon, { capture: true, passive: true });
+  // The blocks selected whole: no event says they changed, so their list is compared now and then.
+  let held = "";
+  const watching = setInterval(() => {
+    const now = picked().map(idOf).join(",");
+    if (now !== held) {
+      held = now;
+      soon();
+    }
+  }, WATCH);
+  return {
+    /** Tell now (the page is ready, or the workbench asks again). */
+    now: () => { last = null; clearTimeout(timer); read(); },
+    stop() {
+      clearInterval(watching);
+      clearTimeout(timer);
+    },
+  };
+}