@heycys/gallery 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,236 @@
+// Taken over from notion-lite (its src/ui/media-picker/upload.js): its structure and behaviour as there,
+// what it imports Gallery's own (support.mjs, src/shared/emoji/), and since 2026-11 its look (styles.mjs:
+// the editor's palette, no blue). Its notes, below, are notion-lite's, the colors changed.
+/* 上传图片做图标 / 添加自定义表情（963369 CustomEmojiUploadPopup；数值、文案照源码，文案取自中文语言包）。两处用：
+ *   图标选择器的“上传”页签（569553 custom → customEmoji 页签：没有标题、大预览、能粘贴链接、可以勾“添加到表情符号库”）
+ *   表情页的“添加表情符号”浮层（749527 tM：有标题、小预览、不能粘贴链接、直接存成自定义表情；浮层最小宽 280）
+ * 布局（外层左右 16、14px，从上到下）：
+ *   标题（上 14、14px / 600）+ 说明（上 2、12px、--ge-tx2）——只有浮层有
+ *   放图片的区域（上 16、--ge-field 底、1px --ge-edge 内框、圆角 8；拖文件进来时灰底加深，不变蓝）：
+ *     没图片：整块是一个按钮（内边距 18 14、间距 8、14px / 500、--ge-tx2、居中）：图片图标 +“上传图片”
+ *     有图片：一列居中（内边距 16 / 12，有“替换”时下 4，间距 4）：“预览”（12px、--ge-tx2、下 4）+ 一亮一暗两张（间距 6；
+ *       80 / 48 见方、内边距 6 / 8、圆角 8、1px --ge-edge；存成表情时 contain、否则 cover）+ 灰色“替换”（能粘贴链接时没有）
+ *     把文件拖进来：只收图片，别的显示“仅支持图片”
+ *   粘贴提示（上 10、12px、--ge-tx3、居中）“或Ctrl+V粘贴图片或链接”——能粘贴链接、还没图片、没出错时
+ *   错误（上 10、12px、红、居中）
+ *   勾选框（上 12、间距 8、14px；框 14，勾上是 --ge-tx2 底、白勾）“添加到表情符号库”——能勾、有图片时
+ *   表情符号名称（上 20；标签 12px / 500 / --ge-tx2、下 6；输入框；错误 上 10、12px、红）——要存成表情、
+ *     并且（不能粘贴链接，或者已经有图片）时；选了文件、名字还空着（或者还是上一个文件名生成的）就用文件名生成
+ *   底部（上 16 下 12、两端对齐、间距 8）：左边灰色“返回”（能粘贴链接、有图片时：全部清掉重来）或“取消”（关掉）；右边“保存”（文字按钮，500，不能点时淡灰）
+ * 保存（963369 r 的保存按钮）：
+ *   要存成表情（浮层；或者勾了“添加到表情符号库”）：名字必填、合法、不重名，才能点；图片存到本地 → 记进表情库 →
+ *     提示“已将 {name} 添加到表情符号库” → onDone(表情字符串)；失败提示“无法保存此表情符号。请重试。”
+ *   不存成表情：有图片就能点 → onDone(图片网址)；失败提示“出了些问题。”（recordIcon.uploadFileTab.uploadError.message）
+ *   一开始就调 onStart()（Notion 上传开始就关掉选择器，401558 QM 的 onStart → 569553 p）
+ * 粘贴（能粘贴链接、还没图片时，963369 onPaste）：剪贴板里有图片文件就用它，别的文件“仅支持图片”；
+ *   是文字就当图片链接试着加载，加载不了显示“粘贴的链接不包含图像。使用Ctrl+V粘贴其他链接”
+ * 本地化（和 Notion 的差别）：图片存进本地（../storage 接到 model/local-store：上传的文件存 local-data/files/，粘贴的链接也下载一份，
+ *   下载不了才记原网址）；“工作空间表情符号库”说成“表情符号库”，浮层说明改成本机；没有数量上限、没有手机版的链接输入框。
+ * createUploadForm(opts) → { el, focus(), paste(e) }
+ *   opts：{ showTitle, largeEmoji, allowUrlPaste, confirmToAdd, onCancel(), onStart(), onDone(value) }
+ * 依赖：lib/dom、ui（storage、icons、snackbar、tooltip）、ui/emoji/custom
+ */
+import { esc } from './support.mjs';
+import { uiStorage } from './support.mjs';
+import { icon } from './support.mjs';
+import { showSnackbar } from './support.mjs';
+import { shortcut } from '../tooltip.mjs';
+import { addCustomEmoji, validateCustomEmojiName, nameFromFileName, prepareNameCheck } from '../../../shared/emoji/custom.mjs';
+import { t } from "../../../shared/i18n/index.mjs";
+
+/* 963369 y：选文件时收的类型；149646 Dn：图片 */
+const ACCEPT = 'image/jpeg, image/png, image/gif, image/webp, image/avif, image/svg+xml';
+/* 链接里的文件名（不带扩展名，存的时候按类型补）：下载到本地时用 */
+const urlBaseName = url => { try { return decodeURIComponent(new URL(url, location.href).pathname.split('/').pop()).replace(/\.[a-z0-9]{1,5}$/i, '') || 'image'; } catch { return 'image'; } };
+const isImage = file => /^image\//.test(file?.type || '');
+const PASTE = shortcut('mod+v');   // 406410 dK({ name: "paste" })
+/* 名字为什么不行（shared/emoji/custom.mjs validateCustomEmojiName 的原因），界面的语言 */
+const NAME_ERRORS = { chars: t("名称只能包含小写字母、数字、连字符或下划线"), long: t("名称必须少于 50 个字符"), taken: t("名称已被占用") };
+
+const T = {
+  title: t("添加自定义表情符号"),
+  description: t("本机所有页面都可以使用自定义表情符号"),
+  upload: t("上传图片"),
+  replace: t("替换"),
+  preview: t("预览"),
+  pastePrompt: t("或{0}粘贴图片或链接", PASTE),
+  imageError: t("仅支持图片"),
+  urlPasteHintImageError: t("粘贴的链接不包含图像。<br>使用{0}粘贴其他链接", esc(PASTE)),
+  confirmToAdd: t("添加到表情符号库"),
+  nameLabel: t("表情符号名称"),
+  namePlaceholder: t("搭建快乐！"),
+  back: t("返回"),
+  cancel: t("取消"),
+  save: t("保存"),
+};
+
+export function createUploadForm({ showTitle = false, largeEmoji = false, allowUrlPaste = false, confirmToAdd = false, onCancel, onStart, onDone }) {
+  const el = document.createElement('div');
+  el.className = 'nmm-upload' + (largeEmoji ? ' large' : '');
+  el.innerHTML =
+    (showTitle ? `<div class="nmm-upload-title">${T.title}</div><div class="nmm-upload-description">${T.description}</div>` : '') +
+    `<div class="nmm-upload-zone-wrap"><div class="nmm-upload-zone"></div></div>` +
+    `<div class="nmm-upload-paste" hidden>${esc(T.pastePrompt)}</div>` +
+    `<div class="nmm-upload-error" hidden></div>` +
+    `<label class="nmm-upload-confirm" hidden><div role="checkbox" tabindex="0" aria-checked="false" class="nmm-upload-checkbox"></div>${T.confirmToAdd}</label>` +
+    `<label class="nmm-upload-name" hidden><div class="nmm-upload-name-label">${T.nameLabel}</div>` +
+      `<div class="nmm-upload-input"><input type="text" placeholder="${T.namePlaceholder}" autocomplete="off" spellcheck="false"></div>` +
+      `<div class="nmm-upload-name-error" hidden></div></label>` +
+    `<div class="nmm-upload-footer"><div role="button" tabindex="0" class="nmm-upload-secondary" data-act="secondary"></div>` +
+      `<div role="button" tabindex="0" class="nmm-upload-save" data-act="save">${T.save}</div></div>` +
+    `<input type="file" accept="${ACCEPT}" hidden>`;
+
+  const zone = el.querySelector('.nmm-upload-zone'), wrap = el.querySelector('.nmm-upload-zone-wrap');
+  const paste = el.querySelector('.nmm-upload-paste'), error = el.querySelector('.nmm-upload-error');
+  const confirm = el.querySelector('.nmm-upload-confirm'), checkbox = el.querySelector('.nmm-upload-checkbox');
+  const nameBox = el.querySelector('.nmm-upload-name'), nameInput = nameBox.querySelector('input'), nameError = el.querySelector('.nmm-upload-name-error');
+  const secondary = el.querySelector('[data-act="secondary"]'), save = el.querySelector('[data-act="save"]');
+  const fileInput = el.querySelector('input[type="file"]');
+
+  /* 963369 r 的状态：image { type: 'file', file } | { type: 'url', url }；preview 是预览图地址 */
+  let image = null, preview = null, errorHTML = null, name = '', nameErr = null, checked = false, busy = false;
+  const savingAsEmoji = () => !confirmToAdd || checked;   // 963369 D
+  const disabled = () => busy || (savingAsEmoji() ? !name || !image || !!nameErr : !image);   // 963369 H
+
+  function update() {
+    const hadFocus = el.contains(document.activeElement);   // 重画放图片的区域时焦点别丢（Esc、粘贴还要接着用）
+    zone.innerHTML = preview
+      ? `<div class="nmm-upload-preview${allowUrlPaste ? '' : ' with-replace'}"><div class="nmm-upload-preview-label">${T.preview}</div>` +
+        `<div class="nmm-upload-preview-row"><img class="light" alt="Light Mode Image" src="${esc(preview)}"><img class="dark" alt="Dark Mode Image" src="${esc(preview)}"></div>` +
+        (allowUrlPaste ? '' : `<div role="button" tabindex="0" class="nmm-upload-replace" data-act="choose" aria-label="${T.replace}">${icon('arrowCircleLoopBackwardSmall', 14)}<div>${T.replace}</div></div>`) + `</div>`
+      : `<div role="button" tabindex="0" class="nmm-upload-button" data-act="choose">${icon('photo', 20)}<span>${T.upload}</span></div>`;
+    zone.classList.toggle('contain', savingAsEmoji());
+    paste.hidden = !(allowUrlPaste && !image && !errorHTML);
+    error.hidden = !errorHTML;
+    error.innerHTML = errorHTML || '';
+    confirm.hidden = !(confirmToAdd && image);
+    checkbox.setAttribute('aria-checked', String(checked));
+    checkbox.innerHTML = checked ? `<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="m3.5 8.5 3 3 6-7"/></svg>` : '';
+    const showName = savingAsEmoji() && (!allowUrlPaste || !!image);
+    const wasHidden = nameBox.hidden;
+    nameBox.hidden = !showName;
+    nameError.hidden = !nameErr;
+    nameError.textContent = nameErr ? NAME_ERRORS[nameErr] : '';
+    secondary.textContent = allowUrlPaste && image ? T.back : T.cancel;
+    save.classList.toggle('disabled', disabled());
+    save.setAttribute('aria-disabled', String(disabled()));
+    if (showName && wasHidden) nameInput.focus();   // 963369 G：名称输入框 autoFocus
+    else if (hadFocus && (!el.contains(document.activeElement) || document.activeElement === save && disabled())) {
+      (el.querySelector('[data-act="choose"]') || save).focus({ preventScroll: true });
+    }
+  }
+
+  /* 963369 F：空格换成“-”，再校验 */
+  function setName(value) {
+    name = value.replace(/ /g, '-');
+    if (nameInput.value !== name) nameInput.value = name;
+    nameErr = validateCustomEmojiName(name);
+    update();
+  }
+  prepareNameCheck().then(() => { if (name) setName(name); });   // 查重的数据到了再校验一次
+
+  /* 963369 N 的 onFileChanged：名字还空着，或者还是上一个文件名生成的，就用这个文件名 */
+  function setFile(file) {
+    errorHTML = null;
+    const prevDerived = image?.type === 'file' ? nameFromFileName(image.file.name) : null;
+    if (file.name && (name === '' || prevDerived === name)) setName(nameFromFileName(file.name));
+    image = { type: 'file', file };
+    const reader = new FileReader();
+    reader.onload = () => { if (image?.file === file) { preview = reader.result; update(); } };
+    reader.readAsDataURL(file);
+    update();
+  }
+
+  /* 963369 U：当图片链接试着加载 */
+  function tryUrl(text) {
+    const url = text.trim(), probe = new Image();
+    probe.onload = () => { image = { type: 'url', url }; preview = url; errorHTML = null; update(); };
+    probe.onerror = () => { errorHTML = T.urlPasteHintImageError; update(); };
+    probe.src = url;
+  }
+
+  function reset() {   // “返回”
+    image = null; preview = null; errorHTML = null; name = ''; nameErr = null; checked = false;
+    nameInput.value = '';
+    update();
+  }
+
+  /* 图片存到本地：文件 → local-data/files；链接 → 下载一份，下载不了记原网址 */
+  async function storeImage() {
+    if (image.type === 'file') return uiStorage.saveFile(image.file, image.file.name || 'image');
+    return (await uiStorage.importImage(image.url, name || urlBaseName(image.url))) || image.url;
+  }
+
+  async function submit() {
+    if (disabled()) return;
+    busy = true;
+    update();
+    const asEmoji = savingAsEmoji(), emojiName = name;
+    onStart?.();
+    try {
+      const url = await storeImage();
+      if (!asEmoji) return onDone(url);
+      const value = await addCustomEmoji({ name: emojiName, url });
+      showSnackbar(t("已将 {0} 添加到表情符号库", emojiName));   // uploadCustomEmoji.success（本地化：工作空间 → 表情符号库）
+      onDone(value);
+    } catch {
+      showSnackbar(asEmoji ? t("无法保存此表情符号。请重试。") : t("出了些问题。"));
+    } finally {
+      busy = false;
+      if (el.isConnected) update();
+    }
+  }
+
+  const choose = () => { fileInput.value = ''; fileInput.click(); };
+  fileInput.addEventListener('change', () => {
+    const file = fileInput.files?.[0];
+    if (!file) return;
+    if (!isImage(file)) { errorHTML = T.imageError; update(); return; }   // 149646 B7
+    setFile(file);
+  });
+  el.addEventListener('click', e => {
+    const act = e.target.closest('[data-act]')?.dataset.act;
+    if (act === 'choose') choose();
+    else if (act === 'save') submit();
+    else if (act === 'secondary') { if (allowUrlPaste && image) reset(); else onCancel?.(); }
+    else if (e.target.closest('.nmm-upload-confirm')) { e.preventDefault(); checked = !checked; update(); }
+  });
+  el.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && e.target === nameInput) { e.preventDefault(); submit(); return; }
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.matches('[role="button"], [role="checkbox"]')) { e.preventDefault(); e.target.click(); }
+  });
+  nameInput.addEventListener('input', () => setName(nameInput.value));
+
+  /* 777875：拖文件进来（只收第一个；不是图片“仅支持图片”） */
+  const hasFiles = e => [...(e.dataTransfer?.types || [])].includes('Files');
+  wrap.addEventListener('dragover', e => { if (!hasFiles(e)) return; e.preventDefault(); e.stopPropagation(); wrap.classList.add('dragover'); });
+  wrap.addEventListener('dragleave', e => { if (!wrap.contains(e.relatedTarget)) wrap.classList.remove('dragover'); });
+  wrap.addEventListener('drop', e => {
+    if (!hasFiles(e)) return;
+    e.preventDefault(); e.stopPropagation();
+    wrap.classList.remove('dragover');
+    const file = e.dataTransfer.files[0];
+    if (!file) return;
+    if (!isImage(file)) { errorHTML = T.imageError; update(); return; }
+    setFile(file);
+  });
+
+  update();
+  return {
+    el,
+    focus() { (nameBox.hidden ? el.querySelector('[data-act="choose"]') : nameInput)?.focus({ preventScroll: true }); },
+    /* 963369 onPaste（451753 u：先看文件，再看文字） */
+    paste(e) {
+      if (!allowUrlPaste || image || e.target === nameInput) return;
+      e.preventDefault();
+      const files = [...(e.clipboardData?.files || [])];
+      if (files.length) {
+        if (!isImage(files[0])) { errorHTML = T.imageError; update(); return; }
+        setFile(files[0]);
+        return;
+      }
+      const text = e.clipboardData?.getData('text/plain');
+      if (text) tryUrl(text);
+    },
+  };
+}

package/browser/editor/page/export-report.mjs

@@ -0,0 +1,23 @@
+import { say } from "./notices.mjs";
+import { failure, postJson } from "./post.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+
+// Exporting the report. Saving itself is autosave.mjs.
+
+// "导出报告" builds the offline file from the saved source (exports/<slug>.html); the editor saves
+// whatever waits first. The view copy with the reading state is the kit's "导出当前视图副本" (ui.js).
+
+/** Export the report (map: slug, token); returns { ok, path } or { ok: false, reason, message }. */
+export async function exportReport(map) {
+  say(t("正在导出…"), "prompt");
+  try {
+    const response = await postJson("/__gallery/workspace/export", map.token, { slug: map.slug });
+    const result = await response.json().catch(() => ({ ok: false, reason: "server", message: String(response.status) }));
+    if (result.ok) say(t("已导出 {0}", result.path), "note", 6000);
+    else say(t("未导出：{0}", failure(result, result.reason)), "error");
+    return result;
+  } catch {
+    say(t("未导出：连不上 Gallery 的服务（gallery open 会启动它）"), "error");
+    return { ok: false, reason: "offline", message: t("无法连接预览服务器") };
+  }
+}

package/browser/editor/page/fills.mjs

@@ -0,0 +1,62 @@
+import { IN_LAYER } from "../../shared/layers.mjs";
+import { drawOver, fillRectOf, reachOf, shapeOf } from "./overlay-layer.mjs";
+import { own } from "./overlays.mjs";
+import { addStyle, element } from "./ui.mjs";
+
+// The fills laid over blocks (docs/editor.md, "Overlays"), one painter for all of them: the blocks
+// selected (selection/), the blocks of the 批注 whose card shows (annotate/) and the blocks an Agent added
+// or changed (changes/). There is one fill per
+// block, in the editor's own layer for that block (overlay-layer.mjs), never inside it, and what it
+// covers is the block's own to say: where it shows (a list item with its marker), how far the fill
+// reaches past it (reachOf), the room its neighbours leave (roomOf), its corners and what cuts it. Only
+// the colour is the caller's.
+
+const STYLE = `
+  /* A block's fill, as a box selection's rectangle: blue for the blocks selected, warm for a 批注's, green for what an Agent added or changed (changes/). */
+  .ge-halo, .ge-note-halo, .ge-diff-halo { position: absolute; left: 0; top: 0; z-index: ${IN_LAYER.halo}; pointer-events: none; }
+  .ge-halo { background: var(--ge-halo); }
+  .ge-note-halo { background: var(--ge-note); }
+  .ge-diff-halo { background: var(--ge-diff-add-fill); }
+`;
+
+/**
+ * The fills of one colour. kind: what the overlays call them; className: the colour; stands(block):
+ * whether a block's fill still stands for something, besides the block being on the page. Returns
+ * { paint(blocks), clear(), count }: paint draws a fill on each of `blocks` that shows, where it is now,
+ * and takes away those of any other block at once; clear takes every fill down; count is how many there are.
+ */
+export function createFills({ kind, className, stands }) {
+  addStyle(STYLE);
+  const fills = new Map(); // block -> its fill
+
+  function paint(blocks) {
+    const wanted = new Set(blocks);
+    for (const [block, fill] of fills) {
+      if (wanted.has(block)) continue;
+      fill.remove();
+      fills.delete(block);
+    }
+    for (const block of wanted) {
+      const shape = shapeOf(block);
+      let fill = fills.get(block);
+      if (!shape) { // not shown now (another Sheet, a closed disclosure)
+        fill?.remove();
+        continue;
+      }
+      if (!fill) {
+        const made = element("div", { class: className });
+        own(made, kind, { owner: block, alive: () => fills.get(block) === made && block.isConnected && stands(block), expected: () => fillRectOf(block) });
+        fills.set(block, made);
+        fill = made;
+      }
+      drawOver(fill, shape, reachOf(shape.radius, shape.reach, shape.room));
+    }
+  }
+
+  function clear() {
+    for (const fill of fills.values()) fill.remove();
+    fills.clear();
+  }
+
+  return { paint, clear, get count() { return fills.size; } };
+}

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

@@ -0,0 +1,107 @@
+import { addStyle } from "../ui.mjs";
+
+// A report opened from 搜索文档 at a hit (the workbench's search, shared/search.mjs): the page finds
+// the words again in its text (the time they occur after the same text as the hit's, else the hit's
+// nth time, else the first), scrolls them to the window's upper middle and marks them in Notion's
+// search yellow (the CSS Custom Highlight API: nothing in the page changes) until the reader
+// presses or types, or 4 seconds pass. Words in a detail card: it opens, and they are scrolled so in
+// its content. Words in a closed disclosure or a hidden panel: what holds them is brought into view
+// instead. The text is read as the server reads the file: a line a block, the header and formulas
+// left out, runs of spaces as one, case alike.
+
+const NAME = "ge-found";
+const STYLE = `
+  ::highlight(${NAME}) { color: inherit; background-color: rgba(255, 203, 0, .42); }
+  :root[data-doc-theme="dark"] ::highlight(${NAME}) { background-color: rgba(255, 196, 0, .32); }
+`;
+const SKIP = "script, style, template, noscript, svg, .katex, main > header";
+const BLOCK = "p, li, h1, h2, h3, h4, h5, h6, td, th, caption, summary, figcaption, pre, blockquote, dt, dd, div, section, figure, details";
+
+// The page's text as one string, its blocks a line each, and where each of its characters comes from.
+function pageText(root) {
+  let text = "";
+  const at = []; // index in text -> { node, offset } (null for a line's end)
+  let block = null;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+    acceptNode: (node) => (node.parentElement?.closest(SKIP) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT),
+  });
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const own = node.parentElement.closest(BLOCK);
+    if (own !== block && text && !text.endsWith("\n")) {
+      text += "\n";
+      at.push(null);
+    }
+    block = own;
+    const value = node.nodeValue;
+    for (let offset = 0; offset < value.length; offset++) {
+      let char = value[offset];
+      if (char === "\u200b") continue;
+      if (/\s/.test(char)) {
+        if (!text || text.endsWith(" ") || text.endsWith("\n")) continue;
+        char = " ";
+      }
+      text += char;
+      at.push({ node, offset });
+    }
+  }
+  return { text, at };
+}
+
+let clear = null;
+
+/**
+ * Show `words` where the hit was ({ before, index }): { ok, shown }. `open(node)`: what opens by
+ * itself to show `node` opened, the box it scrolls in returned, or null (dialog/page.mjs show).
+ */
+export function revealText({ text: words, before = "", index = 0 }, open = () => null) {
+  clear?.();
+  const query = String(words ?? "").replace(/\s+/g, " ").trim().toLowerCase();
+  const main = document.querySelector("main");
+  if (!query || !main) return { ok: false, reason: "missing" };
+  addStyle(STYLE);
+  const { text, at } = pageText(main);
+  const lower = text.toLowerCase();
+  const found = [];
+  for (let from = lower.indexOf(query); from >= 0; from = lower.indexOf(query, from + query.length)) found.push(from);
+  if (!found.length) return { ok: false, reason: "missing" };
+  const context = String(before).replace(/\s+/g, " ").toLowerCase();
+  const start = (context ? found.find((from) => lower.slice(Math.max(0, from - context.length), from).endsWith(context)) : undefined) ?? found[index] ?? found[0];
+  const first = at[start];
+  const last = at[start + query.length - 1];
+  if (!first || !last) return { ok: false, reason: "missing" };
+  const range = document.createRange();
+  range.setStart(first.node, first.offset);
+  range.setEnd(last.node, last.offset + 1);
+  const box = open(first.node);
+
+  // Hidden (a closed disclosure, a panel not shown): its nearest shown container is what comes into view.
+  let shown = range.getClientRects().length > 0;
+  let target = range;
+  if (!shown) {
+    for (let node = first.node.parentElement; node && node !== main; node = node.parentElement) {
+      if (node.getClientRects().length) {
+        target = node;
+        break;
+      }
+    }
+  }
+  const rect = target.getBoundingClientRect();
+  if (box) box.scrollTop += rect.top - box.getBoundingClientRect().top - box.clientHeight * 0.35;
+  else scrollTo({ top: Math.max(0, scrollY + rect.top - innerHeight * 0.35), behavior: "instant" });
+  if (!shown) return { ok: true, shown: false };
+
+  const highlight = new Highlight(range);
+  CSS.highlights.set(NAME, highlight);
+  const timer = setTimeout(() => clear?.(), 4000);
+  const done = () => {
+    clearTimeout(timer);
+    if (CSS.highlights.get(NAME) === highlight) CSS.highlights.delete(NAME);
+    removeEventListener("pointerdown", done, true);
+    removeEventListener("keydown", done, true);
+    clear = null;
+  };
+  addEventListener("pointerdown", done, true);
+  addEventListener("keydown", done, true);
+  clear = done;
+  return { ok: true, shown: true };
+}

package/browser/editor/page/flags.mjs

@@ -0,0 +1,70 @@
+import { IN_LAYER } from "../../shared/layers.mjs";
+import { FOLLOW, task } from "./frames.mjs";
+import { fillExtentOf } from "./geometry.mjs";
+import { drawOver, shapeOf } from "./overlay-layer.mjs";
+import { onSettle, own } from "./overlays.mjs";
+import { addStyle, element } from "./ui.mjs";
+
+// The red frame round a block the page cannot save as it is (docs/editor.md, "Conflicts"): a block
+// in conflict (data-ge-flag="conflict", conflicts.mjs) or a new block that has no place in the file
+// yet (data-ge-flag="check", editor.mjs). Drawn in the editor's layer like every other frame (frame.mjs,
+// selection/), 2px past the block, so it follows its corners, its list marker and what clips it, and
+// no rule of the report's own elements (the outline some of them take off) can undo it. It stands
+// for the attribute: each flagged block shown has one, and it goes with the flag or the block.
+
+const REACH = 2;
+const STYLE = `
+  .ge-flag { position: absolute; left: 0; top: 0; z-index: ${IN_LAYER.frame}; box-sizing: border-box; border: ${REACH}px solid var(--doc-danger, #c04848); pointer-events: none; }
+`;
+
+/** editing(): whether the page is being edited. */
+export function createFlags(editing) {
+  addStyle(STYLE);
+  const frames = new Map(); // flagged block -> its frame
+
+  const reach = (shape) => ({ x: REACH, y: REACH, radius: shape.radius > 0 ? shape.radius + REACH : 4 });
+  const outset = (box) => box && { left: box.left - REACH, top: box.top - REACH, right: box.right + REACH, bottom: box.bottom + REACH };
+
+  function takeDown() {
+    for (const frame of frames.values()) frame.remove();
+    frames.clear();
+  }
+
+  function run() {
+    const flagged = new Set(editing() ? document.querySelectorAll("[data-ge-flag]") : []);
+    for (const [block, frame] of frames) {
+      if (flagged.has(block) && block.isConnected) continue;
+      frame.remove();
+      frames.delete(block);
+    }
+    for (const block of flagged) {
+      const shape = shapeOf(block);
+      let frame = frames.get(block);
+      if (!shape) { // not shown now (another Sheet, a closed disclosure)
+        frame?.remove();
+        frames.delete(block);
+        continue;
+      }
+      if (!frame) {
+        frame = element("div", { class: "ge-flag" });
+        const mine = frame;
+        own(mine, "flag", { owner: block, alive: () => frames.get(block) === mine && block.isConnected && block.hasAttribute("data-ge-flag") && editing(), expected: () => outset(fillExtentOf(block)) });
+        frames.set(block, frame);
+      }
+      drawOver(frame, shape, reach(shape));
+    }
+    return frames.size > 0 ? FOLLOW : false; // drawn again when a flagged block may have moved (frames.mjs)
+  }
+  const drawing = task("flag", { run, fail: takeDown });
+
+  // A flag set or taken off, editing begun or ended: draw again. Blocks taken off the page go at once.
+  new MutationObserver(() => drawing.wake()).observe(document.documentElement, { attributes: true, subtree: true, attributeFilter: ["data-ge-flag", "data-ge-editing"] });
+  onSettle(() => {
+    for (const [block, frame] of frames) {
+      if (block.isConnected) continue;
+      frame.remove();
+      frames.delete(block);
+    }
+  });
+  drawing.wake();
+}