@heycys/gallery 0.1.0 → 0.1.1

package/browser/shared/emoji/data.mjs

@@ -6,9 +6,11 @@
 // (page icons in its tree); the server reads the pack itself for an export (src/render/emoji.mjs).
 //
 // What differs from notion-lite: the data is fetched (the page editor's modules are served as
-// they are, unbundled); no sprite sheet (an emoji the pack lacks shows in the system's emoji font);
-// the custom emojis are the workspace's library (custom.mjs); settings and the frequently used ones
-// are Gallery's own (localStorage).
+// they are, unbundled); no sprite sheet; the custom emojis are the workspace's library (custom.mjs);
+// settings and the frequently used ones are Gallery's own (localStorage). The Twemoji pack is shown on
+// every system (since 2026-11, the user's word: Notion and notion-lite show the system's emoji font on
+// Apple's, Gallery does not), the system's font only where the browser cannot unpack the pack or the
+// pack lacks the emoji. The data holds no flag (Notion's Flags group taken out: data/README.md).
 
 import { KEYS } from "../renamed-storage.mjs";
 
@@ -20,10 +22,6 @@ const FRECENCY_KEY = KEYS.emojiFrecency;
 export const SKIN_TONE_HANDS = ["✋", "✋🏻", "✋🏼", "✋🏽", "✋🏾", "✋🏿"];
 export const SKIN_TONE_VARIATIONS = SKIN_TONE_HANDS.length - 1;
 
-// Notion shows Twemoji on Windows, Linux and Android, and the system's own emoji font on Apple's.
-const agent = globalThis.navigator?.userAgent ?? "";
-export const emojiStyle = /Android|Windows|Linux/i.test(agent) ? "twitter" : "raw";
-
 const state = { positions: null, categories: null, keywords: {}, unique: {}, loaded: false, failed: false, svgIndex: null, svgPack: null };
 let loading = null;
 
@@ -52,8 +50,8 @@ export function loadEmojiData() {
     json("categories.json"),
     json("keywords-en.json"),
     json("keywords-zh.json"),
-    emojiStyle === "raw" ? null : json("twemoji-index.json"),
-    emojiStyle === "raw" ? null : loadSvgPack(),
+    json("twemoji-index.json"),
+    loadSvgPack(),
   ]).then(([positions, categories, en, zh, svgIndex, svgPack]) => {
     state.svgIndex = svgPack ? svgIndex : null;
     state.svgPack = svgPack;
@@ -189,8 +187,8 @@ export function recordEmojiUse(emoji) {
   frecency = map;
   writeStorage(FRECENCY_KEY, JSON.stringify(map));
 }
-/** The recently used: by count, then by the last use, two rows of them. */
-export function recentEmojis(perRow) {
-  return Object.keys(frecency).sort((a, b) => (frecency[b].f !== frecency[a].f ? frecency[b].f - frecency[a].f : frecency[b].u - frecency[a].u)).slice(0, 2 * perRow);
+/** The recently used: by count, then by the last use, two rows of them; `keep`: those still known (a flag used before, taken out since, no longer shows). */
+export function recentEmojis(perRow, keep = () => true) {
+  return Object.keys(frecency).filter(keep).sort((a, b) => (frecency[b].f !== frecency[a].f ? frecency[b].f - frecency[a].f : frecency[b].u - frecency[a].u)).slice(0, 2 * perRow);
 }
 export const frecencyBoost = (emoji) => (frecency[emoji] ? 100 * frecency[emoji].f : 0);

package/browser/shared/emoji/emoji.mjs

@@ -1,10 +1,11 @@
 import { escapeMarkup } from "../escape.mjs";
-import { emojiDataFailed, emojiDataLoaded, emojiInfo, emojiStyle, emojiSvgUrl, hasEmojiSvg, svgUrlOf } from "./data.mjs";
+import { emojiDataFailed, emojiDataLoaded, emojiInfo, emojiSvgUrl, hasEmojiSvg, svgUrlOf } from "./data.mjs";
 
-// Showing an emoji (notion-lite's ui/emoji/emoji.js): on Windows and Linux an <img> of its Twemoji
-// vector image (data.mjs), elsewhere, before the data is in or where the pack lacks it, the
-// system's emoji font. `lazy`: the image's address is made once it scrolls near (the picker draws
-// over a thousand of them), its codepoints kept in data-svg until then (lazySrc).
+// Showing an emoji (notion-lite's ui/emoji/emoji.js): on every system an <img> of its Twemoji vector
+// image (data.mjs); the system's emoji font only where the data failed or the pack lacks it (a
+// placeholder of its size while the data comes). `lazy`: the image's address is made once it
+// scrolls near (the picker draws over a thousand of them), its codepoints kept in data-svg until
+// then (lazySrc).
 
 const BLANK_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
 const px = (size) => (typeof size === "number" ? `${size}px` : size);
@@ -29,8 +30,8 @@ function rawEmojiHTML(emoji, { size } = {}) {
  */
 export function emojiHTML(emoji, { size, lazy = false } = {}) {
   const side = size ? px(size) : "100%";
-  if (emojiStyle !== "raw" && !emojiDataLoaded() && !emojiDataFailed()) return `<span class="ge-emoji-pending" style="display:inline-block;width:${side};height:${side}"></span>`;
-  const info = emojiStyle === "raw" ? null : emojiInfo(emoji);
+  if (!emojiDataLoaded() && !emojiDataFailed()) return `<span class="ge-emoji-pending" style="display:inline-block;width:${side};height:${side}"></span>`;
+  const info = emojiInfo(emoji);
   if (!info || !hasEmojiSvg(info)) return rawEmojiHTML(emoji, { size });
   if (lazy) return `<img class="ge-emoji" alt="${esc(emoji)}" src="${BLANK_GIF}" data-svg="${info.codepoints}" draggable="false" style="width:${side};height:${side}">`;
   return `<img class="ge-emoji" alt="${esc(emoji)}" src="${emojiSvgUrl(info)}" draggable="false" style="width:${side};height:${side}">`;

package/browser/shared/emoji/icon-value.mjs

@@ -73,11 +73,12 @@ export const iconUrl = (value, slug = null, { tab = false } = {}) => `/__gallery
 const [TAB_LIGHT, TAB_DARK] = ICON_COLOR_VALUES.gray;
 /**
  * The browser tab's image of a page with no icon (the workbench's and the preview page's): the page
- * the workbench's tree shows for one (its "page" icon, components/icons.ts), in the tab glyphs' gray,
- * light or dark as the system is. An image, never none: a tab given no image, or one that does not
+ * the workbench's tree shows for one (its "page" icon, components/icons.ts: Lucide's file-text,
+ * FinHarness's 文档), its box cropped to `1 1 22 22` so it fills the tab as an emoji does, in the tab
+ * glyphs' gray, light or dark as the system is. An image, never none: a tab given no image, or one that does not
  * load, keeps the one it showed (Chrome), so a page with no icon opened after one with one showed that one's.
  */
-export const DEFAULT_TAB_ICON = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><style>svg{color:${TAB_LIGHT}}@media (prefers-color-scheme:dark){svg{color:${TAB_DARK}}}</style><path d="M5.75 2.75h5.5l3.5 3.5v9.5a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5V4.25a1.5 1.5 0 0 1 1.5-1.5z"/><path d="M11 2.75v3c0 .41.34.75.75.75h3"/><path d="M7.25 10h5.5M7.25 13h3.5"/></svg>`)}`;
+export const DEFAULT_TAB_ICON = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 22 22" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><style>svg{color:${TAB_LIGHT}}@media (prefers-color-scheme:dark){svg{color:${TAB_DARK}}}</style><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>`)}`;
 
 /** The value of an icon's element as the file (or a page) has it, or null. */
 export function iconValueOf(html) {

package/browser/shared/html-tree.mjs

@@ -41,13 +41,19 @@ export const elementsOf = (node) => (node.childNodes ?? []).filter((child) => ch
  * Every element under `root`, in document order, handed to `visit`. What a template holds is part of
  * the page's markup (`inTemplates`, the default) or left out, as a browser's querySelectorAll does
  * (what is inert there). A template in an <svg> or <math> holds no content: its children are the page's.
- * `stop(element)`: what it says yes to is handed to `visit`, and what that holds is not.
+ * `stop(element)`: what it says yes to is handed to `visit`, and what that holds is not, but for
+ * the elements `through(element)` gives of it, whose insides the walk goes on in (themselves not handed
+ * to `visit`): an instance of a component package and its slots (components/index.mjs BODY).
  */
-export function walk(root, visit, { inTemplates = true, stop = null } = {}) {
+export function walk(root, visit, { inTemplates = true, stop = null, through = null } = {}) {
+  const options = { inTemplates, stop, through };
   for (const child of elementsOf(root)) {
     visit(child);
-    if (stop?.(child)) continue;
-    if (!(child.tagName === "template" && child.content)) walk(child, visit, { inTemplates, stop });
-    else if (inTemplates) walk(child.content, visit, { inTemplates, stop });
+    if (stop?.(child)) {
+      for (const inner of through?.(child) ?? []) walk(inner, visit, options);
+      continue;
+    }
+    if (!(child.tagName === "template" && child.content)) walk(child, visit, options);
+    else if (inTemplates) walk(child.content, visit, options);
   }
 }

package/browser/shared/i18n/en.mjs

@@ -58,7 +58,6 @@ export default {
   "恢复": "Restore",
   "永久删除": "Delete forever",
   "回收区是空的": "Trash is empty",
-  "刷新文档列表": "Refresh document list",
   "偏好": "Preferences",
   "显示编辑框": "Show editing frame",
   "点进一段文字时，在它周围显示蓝色虚线框": "A dashed blue frame around the text you click into",
@@ -72,6 +71,7 @@ export default {
   "侧边栏": "Sidebar",
   "关闭侧边栏": "Close sidebar",
   "搜索文档": "Search documents",
+  "新建": "New",
   "设置": "Settings",
   "正在连接本地服务": "Connecting to the local service",
   "外观：{0}": "Appearance: {0}",
@@ -108,7 +108,9 @@ export default {
   "目录": "Outline",
   "在页面右侧显示标题目录，点击标题跳到那里": "Shows the page's headings at its right; click one to go there",
   "拖动调整目录宽度": "Drag to resize the outline",
-  "重新载入文档": "Reload document",
+  "收起目录": "Collapse outline",
+  "展开目录": "Expand outline",
+  "页面不够宽，变宽后展开": "Not wide enough: expands once there is room",
   "所有内容": "Everything",
   "文件和图片除外": "No files or images",
   "导出格式": "Export format",
@@ -177,6 +179,7 @@ export default {
   "操作没有成功（HTTP {0}）": "That didn't work (HTTP {0})",
   "整体块": "Whole block",
   "{0} 块": "{0} blocks",
+  "{0}和折叠的 {1} 块": "{0} and the {1} blocks folded under it",
   "至少要保留一个选项卡。": "Keep at least one tab.",
   " 等": " and more",
   "页面其他地方引用了这块（{0}，例如链接或详情卡片、无障碍关联），删掉会让它们失效，请让 AI 删除。": "Other parts of the page refer to this block ({0}: links, detail cards or accessibility references); deleting it would break them, so ask the AI to delete it.",
@@ -312,6 +315,25 @@ export default {
   "打不开这个网页": "This page can't be opened",
   "浏览器存储写不进去（空间满了，或被禁用）：没保存的修改只在这个页面上，先不要关掉它。": "The browser's storage can't be written (full, or turned off): unsaved changes exist only on this page, so keep it open.",
   "AI 的写入把你之前保存的 {0} 处修改改回去了：在左下方选择保留哪一边。": "The AI's write undid {0} of your saved edits: choose which side to keep at the bottom left.",
+  // The Agent's changes (editor/page/changes/, the 设置 switch 显示变更)
+  "显示变更": "Show changes",
+  "Agent 改过文档后，新增的标绿、删掉的标红，可以在页面底部确认或撤回": "After an Agent edits a document, what it added shows in green and what it deleted in red, to keep or revert at the bottom of the page",
+  "Agent 的修改": "The Agent's changes",
+  "Agent 已修改": "Agent made changes",
+  "Agent 新增 {0} 块、改动 {1} 块、删除 {2} 块": "The Agent added {0}, changed {1} and deleted {2} blocks",
+  "撤回": "Revert",
+  "确认": "Keep",
+  "撤回 Agent 的这些修改，你自己的修改会保留": "Revert the Agent's changes; yours stay",
+  "保留这些修改，不再标出": "Keep these changes and stop marking them",
+  "已撤回 Agent 的修改": "Reverted the Agent's changes",
+  "还有修改没保存或有冲突待处理，处理完再撤回": "Some edits are not saved yet or wait for you: deal with them, then revert",
+  "没能撤回：{0}": "Could not revert: {0}",
+  "没能撤销：{0}": "Could not undo: {0}",
+  "没能确认：{0}": "Could not keep: {0}",
+  "Agent 刚刚又改了文档，再看一眼": "The Agent just changed the document again: have another look",
+  "撤回之后文档又改过了，没法撤销": "The document changed after the revert, so it cannot be undone",
+  "撤销已经过期": "It is too late to undo",
+  "预览服务器出错": "The preview server failed",
   "{0} 处修改和文件的最新版本冲突，没有保存：在左下方选择怎么处理。": "{0} edits conflict with the file's latest version and weren't saved: choose what to do at the bottom left.",
   "组件包刚刚变了，{0} 处修改没有保存：在左下方选择怎么处理。": "A component package just changed and {0} edits weren't saved: choose what to do at the bottom left.",
   "{0} 处内容文档存不下，没有保存：在左下方选择怎么处理。": "{0} items can't be stored in the document and weren't saved: choose what to do at the bottom left.",
@@ -332,10 +354,11 @@ export default {
   "链接": "Link",
   "这一块里没有可以直接修改的文字。": "This block has no text to edit directly.",
   "这个组件没有运行：内容只能看，可以整块移动、复制和删除。": "This component is not running: what it holds can only be read, and the block moved, copied and deleted whole.",
+  "内容区": "content area",
   "组件里的文字": "A component's text",
   "组件@block": "Component",
   "组件@group": "Components",
-  "组件@settings": "Components",
+  "组件列表": "Components",
   "组件包": "Packages",
   "内置块": "Built-in blocks",
   "正常": "Normal",
@@ -381,7 +404,10 @@ export default {
   "{0} 要写成 { zh, en } 两种语言的文字": "{0} is words in both languages: { zh, en }",
   "{0} 要写成一张表": "{0} is a table, by name",
   "{0} 写错了：{1}": "{0} is wrong: {1}",
-  "{0} 的 edit 只能是 text、data 或 none": "{0}: edit is text, data or none",
+  "{0} 的 edit 只能是 text、data、flow 或 none": "{0}: edit is text, data, flow or none",
+  "{0} 是插槽，名字只用小写字母、数字和连字符": "{0} is a slot: its name is lowercase letters, digits and hyphens",
+  "{0} 是插槽，由 data-doc-slot=\"{1}\" 标出，不写 at": "{0} is a slot, marked data-doc-slot=\"{1}\": it has no at",
+  "{0} 是插槽，一个实例里只有一个，不写 min、max": "{0} is a slot, one to an instance: it has no min or max",
   "{0} 要写成 true 或 false": "{0} is true or false",
   "{0} 要写成不小于 0 的整数": "{0} is a whole number from 0",
   "{0} 的 min 比 max 大，没有实例能满足": "{0}: min is over max, which no instance can meet",
@@ -425,7 +451,6 @@ export default {
   "旅行与地点": "Travel & Places",
   "物品": "Objects",
   "符号": "Symbols",
-  "旗帜": "Flags",
   "自定义": "Custom",
   "添加自定义表情符号": "Add custom emoji",
   "无结果": "No results",
@@ -775,7 +800,7 @@ export default {
   "在左侧插入": "Insert left",
   "在右侧插入": "Insert right",
   "均分列宽": "Even column widths",
-  "一键调整列宽": "Fit column widths",
+  "自动调整列宽": "Auto-fit column widths",
   "列": "Column",
   "行": "Row",
   "已一键优化": "Optimized",
@@ -816,7 +841,7 @@ export default {
   "点击后拖动调整表格的高度": "Click, then drag to resize the table's height",
   "拖动调整表格的高度，超出的行上下滚动": "Drag to resize the table's height; rows beyond it scroll",
   "点击后可拖动调整表格的高度": "Click, then drag to resize the table's height",
-  "已一键调整列宽": "Column widths fitted",
+  "已自动调整列宽": "Column widths auto-fitted",
   "列宽已按内容调整，无需再调。": "The column widths already fit their content.",
   "已均分列宽": "Column widths evened",
   "跨块删除只支持正文、标题和列表里的文字。": "Deleting across blocks works only on text in paragraphs, headings and lists.",
@@ -877,6 +902,7 @@ export default {
   "折叠列表标题": "Toggle title",
   "折叠块标题": "Toggle title",
   "空白折叠区块。点击或拖动区块到这里。": "Empty toggle. Click here, or drag blocks into it.",
+  "空白内容区。点击或拖动区块到这里。": "Empty content area. Click here, or drag blocks into it.",
   "先选中点开详情卡片的文字。": "Select the text that should open the detail card first.",
   "选中的文字里已经有链接，先移除链接（Ctrl+K）再做详情卡片的入口。": "The selected text already has a link; remove it (Ctrl+K) before making it open a detail card.",
   "这里不能新建详情卡片。": "A detail card can't be added here.",
@@ -1095,6 +1121,13 @@ export default {
   "检查没有通过：{0}；{1}；{2}": "The checks didn't pass: {0}; {1}; {2}",
   "检查没有通过：{0}；{1}；{2} 等 {3} 条": "The checks didn't pass: {0}; {1}; {2} and more, {3} in all",
   "写作偏好不能移到回收区": "The writing preferences can't be moved to trash",
+  "写作偏好不在文档目录里，不能移动，下面也不能放文档": "The writing preferences aren't in the outline: they can't be moved or have documents under them",
+  "找不到要放到它下面的文档": "Can't find the document to put it under",
+  "找不到要放在它后面的文档": "Can't find the document to put it after",
+  "要放在它后面的文档不在这一层": "The document to put it after isn't at that level",
+  "文档目录刚在别处改过": "The outline was just changed elsewhere",
+  "文档不能放在它自己后面": "A document can't go after itself",
+  "文档不能移到它自己或它下面的文档下面": "A document can't move under itself or a document under it",
   "还没有写作偏好": "There are no writing preferences yet",
   "回收区里没有这一项": "That's not in the trash",
   "文件太大（最多 5GB）": "File too large (at most 5 GB)",
@@ -1136,7 +1169,6 @@ export default {
   "底稿": "Source",
   "块": "Block",
   "（整块）": " (whole)",
-  "没有“建议”的批注只是标记了一个位置，不用改。": "One with no suggestion only marks a place: nothing to change there.",
   "（还没有 id，按原文找）": "(no id yet: find it by its words)",
   "建议@note": "Suggestion",
   "正文": "Body",
@@ -1161,4 +1193,31 @@ export default {
   "「{0}」里的组件 {1} 有错误，没有生成文件：可以让 AI 检查这份文档并修好": "Component {1} in “{0}” has an error, so no file was made: an AI agent can check this document and fix it",
   "「{0}」没有通过导出前的检查，没有生成文件：{1}": "“{0}” didn't pass the checks before export, so no file was made: {1}",
   "「{0}」没有通过导出前的检查，没有生成文件：{1}（共 {2} 处：可以让 AI 检查这份文档，列出全部并修好）": "“{0}” didn't pass the checks before export, so no file was made: {1} ({2} in all: ask the AI to check this document, list them all and fix them)",
+  "字体与布局": "Font and layout",
+  "字体": "Font",
+  "等线体": "Sans",
+  "衬线体": "Serif",
+  "混合体": "Mixed",
+  "无衬线字体，屏幕上读起来清楚，适合任何文档": "A sans-serif font, clear on screen, for any document",
+  "标题和正文都用衬线字体，适合长文章": "A serif font for headings and text alike, for long reads",
+  "标题用衬线字体，正文用等线体": "Headings in a serif font, the text in sans",
+  "字体大小": "Font size",
+  "小号": "Small",
+  "大号": "Large",
+  "正文间距": "Spacing",
+  "紧凑": "Compact",
+  "宽松": "Loose",
+  "正文宽度": "Text width",
+  "偏窄": "Narrow",
+  "偏宽": "Wide",
+  "默认字号下一行约 {0} 个字": "About {0} characters a line at the default font size",
+  "字体与布局没有保存：{0}": "Font and layout not saved: {0}",
+  "写作偏好没有字体与布局": "Writing preferences have no font and layout",
+  "字体与布局不对": "The font and layout given are not right",
+  "这份文档的标题和说明读不出来": "This document's title and description could not be read",
+  "应用到全部文档": "Apply to all documents",
+  "这份文档的字体与布局用到全部文档，新建的文档也一样": "Use this document's font and layout in every document, new ones too",
+  "已应用到全部文档": "Applied to all documents",
+  "已应用到全部文档，替换了 {0} 篇的单独设置": "Applied to all documents; own settings replaced in {0}",
+  "没有应用到全部文档：{0}": "Not applied to all documents: {0}",
 };

package/browser/shared/long-runs.mjs

@@ -0,0 +1,39 @@
+// Where a line may break inside a word: one rule for the kit's runtime (runtime/spacing.js: the
+// reading page holds each long run in a span that breaks anywhere), its flowcharts' line model
+// (runtime/flowchart.js piecesOf) and the page editor (page/long-runs.mjs: a text block holding one
+// breaks anywhere as a whole). Ordinary words stay whole at a line's end, in a Chinese page as in an
+// English one; a run of more than LONG_RUN characters with no place to break inside it (a path, a
+// URL, a long identifier) breaks where its line ends, never carried whole to the next line leaving
+// the line before it short (the user's words of 2026-11-07, and of 2026-11-06 before them).
+//
+// A run is what stands between spaces, Chinese, Japanese or Korean characters, full-width forms and
+// the general punctuation (dashes, curly quotes, an ellipsis, a zero-width space: where a line breaks
+// already, or what a path or an identifier does not hold): letters, digits and the marks of paths and
+// URLs (. : / \ _ = & % # @ …). Inside one Chrome breaks a line after a hyphen and after a question
+// mark, and at no other mark of ASCII (Chrome 156: not at a slash, a dot, a colon, a backslash or an
+// underscore), so a run is counted by its pieces there: state-of-the-art is three short pieces, never
+// long; D:\code\FinHarness\FinHarness-Demo.html is long by its first piece (30 characters).
+// DOM-free.
+
+/** A run longer than this many characters (by its longest piece) breaks anywhere. */
+export const LONG_RUN = 20;
+
+const RUNS = /[^\s\u2000-\u206f\u2e80-\u9fff\uac00-\ud7af\uf900-\ufaff\ufe30-\ufe4f\uff00-\uffef]+/gu;
+const PIECES = /(?<=[-?])/u;
+
+const long = (run) => run.length > LONG_RUN && run.split(PIECES).some((piece) => [...piece].length > LONG_RUN);
+
+/** The long runs of `text`, in order: { index, length } each (code units). */
+export function longRuns(text) {
+  const found = [];
+  if (text.length <= LONG_RUN) return found;
+  for (const match of text.matchAll(RUNS)) if (long(match[0])) found.push({ index: match.index, length: match[0].length });
+  return found;
+}
+
+/** Whether `text` holds a long run. */
+export function holdsLongRun(text) {
+  if (text.length <= LONG_RUN) return false;
+  for (const match of text.matchAll(RUNS)) if (long(match[0])) return true;
+  return false;
+}

package/browser/shared/new-names.mjs

@@ -1,5 +1,5 @@
 import { parse } from "parse5";
-import { isInstance } from "./components/index.mjs";
+import { instanceSlots, isInstance } from "./components/index.mjs";
 import { mayHoldOldNames, newAttributeName, newAttributeValue, newScriptNames, newStyleNames } from "./old-names.mjs";
 
 // A file's text with the format's old names new (old-names.mjs says which, and where the tools read
@@ -50,7 +50,10 @@ export function newNames(html) {
   }
   const visit = (node) => {
     for (const child of node.childNodes ?? []) {
-      if (isInstance(child)) continue;
+      if (isInstance(child)) {
+        instanceSlots(child).forEach(visit); // what its slots hold is the document's, its own region the component's
+        continue;
+      }
       if (child.tagName) element(child);
       visit(child.tagName === "template" && child.content ? child.content : child);
     }

package/browser/shared/outline.mjs

@@ -0,0 +1,194 @@
+import { randomBytes } from "node:crypto";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { writeAtomic } from "./files.mjs";
+import { layoutOf, listDocumentSlugs, pageSlug, slugPattern } from "./workspace.mjs";
+
+// The workspace's outline: which document sits under which, in what order (the sidebar's tree,
+// <workspace>/.gallery/outline.json, docs/workbench.md "Workspace commands"):
+//   { version: 1, children: { "": [top-level slugs], "<slug>": [slugs under it] } }
+// Hierarchy and order only: a document's folder never moves with it, and no file of a document
+// names where it is (links between documents are relative links between their files). Read, it
+// lists every document of the workspace once but the 写作偏好 page (listed apart, in .gallery/pages/):
+// slugs that are gone drop out, documents it does not know yet come last at the top.
+// Written by the workspace's server (src/workbench/service.mjs: the workbench's moves, a new, copied,
+// restored or imported document, gallery new --under and gallery move while it runs, in the queue its
+// saves go through), and by a gallery command when no server runs (src/cli/tree.mjs), with the same
+// functions, each change read, made and written under the outline's lock (withOutlineLock: a file
+// that two processes cannot both make), so that two writers never lose each other's change.
+
+/** The outline file's lock (.gallery/outline.lock): who holds it, until when it counts. */
+const LOCK_STALE = 10_000; // a lock older than this was left by a process that ended: taken over
+const LOCK_WAIT = 15_000;
+
+/**
+ * Run `task` holding the outline's lock of workspace `root`: a file made with "wx", which one
+ * process alone can make, removed after; one older than 10 s is a crashed writer's and is taken over.
+ * Waits for it 15 s at most, then takes it all the same (a writer that holds it that long holds
+ * nothing any more).
+ */
+export async function withOutlineLock(root, task) {
+  const { gallery } = layoutOf(root);
+  const lock = path.join(gallery, "outline.lock");
+  const mine = `${process.pid} ${randomBytes(4).toString("hex")}`;
+  await fs.mkdir(gallery, { recursive: true });
+  for (const until = Date.now() + LOCK_WAIT; ;) {
+    try {
+      await fs.writeFile(lock, mine, { flag: "wx" });
+      break;
+    } catch (error) {
+      if (error.code !== "EEXIST") throw error;
+      const age = await fs.stat(lock).then(({ mtimeMs }) => Date.now() - mtimeMs, () => 0);
+      if (age > LOCK_STALE || Date.now() > until) await fs.rm(lock, { force: true });
+      else await new Promise((resolve) => setTimeout(resolve, 20));
+    }
+  }
+  try {
+    return await task();
+  } finally {
+    // Removed only while it is still this writer's (one taken over meanwhile is the next writer's).
+    if ((await fs.readFile(lock, "utf8").catch(() => null)) === mine) await fs.rm(lock, { force: true });
+  }
+}
+
+const readJson = (file) => fs.readFile(file, "utf8").then(JSON.parse).catch(() => null);
+
+/** The outline of workspace `root` as it is read: every document but the 写作偏好 page once (above). */
+export async function readOutline(root) {
+  return (await outlineAndFile(root)).outline;
+}
+
+/**
+ * The outline as it is read and what its file holds: { outline, stored: the file's children, or null }.
+ * A change is written when what it makes is not what the file holds (writtenAs), a document the file
+ * does not hold yet too (one made since, listed last at the top only as it is read), so that the file
+ * keeps every place a command or the workbench gave.
+ */
+export async function outlineAndFile(root) {
+  const instructions = await pageSlug(root);
+  const slugs = (await listDocumentSlugs(root)).filter((slug) => slug !== instructions);
+  const stored = await readJson(layoutOf(root).outline);
+  const outline = { version: 1, children: ordered(stored, slugs) };
+  return { outline, stored: stored?.children ?? null };
+}
+
+/**
+ * Whether `children` is what the outline's file holds (`stored`, outlineAndFile's): the same lists
+ * (an empty one as none), in whatever order the file has its keys. Also whether an outline a
+ * workbench changed (POST outline's `base`) is the one read now.
+ */
+export function writtenAs(children, stored) {
+  if (!stored || typeof stored !== "object") return false;
+  const lists = (value) => Object.keys(value).filter((key) => Array.isArray(value[key]) && value[key].length > 0);
+  const [ours, theirs] = [lists(children), lists(stored)];
+  return ours.length === theirs.length && ours.every((key) => JSON.stringify(children[key]) === JSON.stringify(stored[key]));
+}
+
+// The outline's children of the documents `slugs`, in the order `stored` (the file's value) gives.
+function ordered(stored, slugs) {
+  const children = { "": [] };
+  const seen = new Set();
+  const place = (parent) => {
+    for (const slug of stored?.children?.[parent] ?? []) {
+      if (!slugs.includes(slug) || seen.has(slug)) continue;
+      seen.add(slug);
+      (children[parent] ??= []).push(slug);
+      place(slug);
+    }
+  };
+  place("");
+  for (const slug of slugs) if (!seen.has(slug)) children[""].push(slug);
+  return children;
+}
+
+/** Whether `value` is an outline to store: each document at most once, never under itself. */
+export function validOutline(value) {
+  const children = value?.children;
+  if (!children || typeof children !== "object" || Array.isArray(children)) return false;
+  const listed = new Set();
+  for (const [parent, list] of Object.entries(children)) {
+    if (parent !== "" && !slugPattern.test(parent)) return false;
+    if (!Array.isArray(list)) return false;
+    for (const slug of list) {
+      if (typeof slug !== "string" || !slugPattern.test(slug) || listed.has(slug) || slug === parent) return false;
+      listed.add(slug);
+    }
+  }
+  return true;
+}
+
+/** Write outline `value` ({ children }) of workspace `root` (.gallery/ made when there is none yet). */
+export async function writeOutline(root, value) {
+  const file = layoutOf(root).outline;
+  await fs.mkdir(path.dirname(file), { recursive: true });
+  return writeAtomic(file, `${JSON.stringify({ version: 1, children: value.children }, null, 2)}\n`);
+}
+
+/** The document `slug` sits under in `children` ("" at the top), or null when the outline holds it not. */
+export function parentIn(children, slug) {
+  for (const [parent, list] of Object.entries(children)) if (list.includes(slug)) return parent;
+  return null;
+}
+
+/** The documents above `slug` in `children`, from the top down (itself not among them). */
+export function ancestorsIn(children, slug) {
+  const above = [];
+  for (let parent = parentIn(children, slug); parent; parent = parentIn(children, parent)) above.unshift(parent);
+  return above;
+}
+
+/** Every document under `slug` in `children` ("": all), depth first, in the sidebar's order. */
+export function descendantsIn(children, slug) {
+  const found = [];
+  const walk = (parent) => (children[parent] ?? []).forEach((child) => { found.push(child); walk(child); });
+  walk(slug);
+  return found;
+}
+
+/**
+ * Document `slug` moved in `children` (an outline as read: changed in place) with the documents under
+ * it, to where `where` says: `parent` ("" the top; undefined: where it is now, or `after`'s parent),
+ * right after `after` (one of that parent's), first (`first`), else last. Resolves to { ok: true,
+ * moved: whether its place changed, parent, index, from: { parent, index } } or { ok: false, reason }:
+ * "missing" (no such document in the outline), "parent" (no such parent), "after" (no such document
+ * to go after), "level" (`after` is not under `parent`), "itself" (after itself), "inside" (under
+ * itself or one of the documents under it).
+ */
+export function moveIn(children, slug, { parent = undefined, after = null, first = false } = {}) {
+  const from = parentIn(children, slug);
+  if (from === null) return { ok: false, reason: "missing" };
+  let to = parent;
+  if (after !== null) {
+    if (after === slug) return { ok: false, reason: "itself" };
+    const its = parentIn(children, after);
+    if (its === null) return { ok: false, reason: "after" };
+    if (to !== undefined && to !== its) return { ok: false, reason: "level" };
+    to = its;
+  }
+  to ??= from;
+  if (to !== "" && parentIn(children, to) === null) return { ok: false, reason: "parent" };
+  if (to === slug || ancestorsIn(children, to).includes(slug)) return { ok: false, reason: "inside" };
+  const index = children[from].indexOf(slug);
+  children[from].splice(index, 1);
+  const list = (children[to] ??= []);
+  const at = after !== null ? list.indexOf(after) + 1 : first ? 0 : list.length;
+  list.splice(at, 0, slug);
+  for (const key of Object.keys(children)) if (key !== "" && children[key].length === 0) delete children[key];
+  return { ok: true, moved: to !== from || at !== index, parent: to, index: at, from: { parent: from, index } };
+}
+
+/**
+ * Move document `slug` of workspace `root` where `where` says (moveIn), under the outline's lock: the
+ * outline read, changed and written when that is not what its file holds (writtenAs: a move, or a
+ * document the file does not hold yet placed where it is read). Resolves to moveIn's answer, with
+ * `written`: whether the file was written.
+ */
+export function moveDocument(root, slug, where) {
+  return withOutlineLock(root, async () => {
+    const { outline, stored } = await outlineAndFile(root);
+    const result = moveIn(outline.children, slug, where);
+    const written = result.ok && !writtenAs(outline.children, stored);
+    if (written) await writeOutline(root, outline);
+    return { ...result, ...(result.ok ? { written } : {}) };
+  });
+}

package/browser/shared/preferences.mjs

@@ -1,10 +1,16 @@
 // The reader's preferences of Gallery's UI (the workbench's 设置): switches (and a width) kept in localStorage,
 // which the workbench and every report page share (one origin), so the page editor follows a change
-// at once (the storage event reaches every other page of the origin). Each is off (or its default) until changed.
+// at once (the storage event reaches every other page of the origin). Each has its default (off, but for
+// showChanges) until changed.
 //   editFrame     显示编辑框: the dashed frame around the text being edited (editor/page/frame.mjs)
 //   quietNotices  减少通知: the notices of everyday operations (what was just done, how to go on) are not
 //                 shown, only what the reader must act on or would not know otherwise (editor/page/quiet.mjs)
+//   showChanges   显示变更: what an Agent wrote marked on the page, with the bar to keep or revert it
+//                 (editor/page/changes/); on until switched off, and off, what comes under review is kept as it comes
 //   outlineWidth  the outline's width in full, as the reader dragged it (px; 0: its default), for every report
+//   outlineCollapsed  the outline as its strip where the room would give it the list in full: a click on its
+//                 guide (editor/page/outline/), and again on the guide in the strip's card to have the list back;
+//                 for every report, as its width
 //
 // Whether the outline (目录, the top bar's 更多; editor/page/outline/) shows is no preference of the UI
 // but the report's, as what is folded in it is: switched on for one report, the others keep
@@ -19,10 +25,10 @@
 import { KEYS, OLD_KEYS } from "./renamed-storage.mjs";
 
 const KEY = KEYS.preferences;
-/** The preferences, each with its default (a switch's false, a width's 0). */
-export const PREFERENCES = { editFrame: false, quietNotices: false, outlineWidth: 0 };
+/** The preferences, each with its default (a switch's false but 显示变更's, a width's 0). */
+export const PREFERENCES = { editFrame: false, quietNotices: false, showChanges: true, outlineWidth: 0, outlineCollapsed: false };
 
-/** The key they are kept under (the page's head reads the outline's width before it shows: editor/page/margin.mjs). */
+/** The key they are kept under (the page's head reads the outline's width and whether it is collapsed before it shows: editor/page/margin.mjs). */
 export const PREFERENCES_KEY = KEY;
 
 function stored() {

package/browser/shared/session.mjs

@@ -3,10 +3,11 @@
 // src/workbench/app/session/. Every message is { protocol: PROTOCOL, v: VERSION, type, slug, ... },
 // posted to the other window for this origin only.
 //
-//   report -> workbench   ready    once the editor started: { commands, title, icon, state, annotations, card }
-//                         state    when the state, the title, the page's icon, how many 批注 it has or whether a
-//                                  detail card is open changed: { title, icon, state, annotations, card }
-//                                  (icon: the page's icon, an emoji, or null; card: a detail card is open)
+//   report -> workbench   ready    once the editor started: { commands, title, icon, look, state, annotations, card }
+//                         state    when the state, the title, the page's icon, the look it shows, how many 批注 it
+//                                  has or whether a detail card is open changed: { title, icon, look, state,
+//                                  annotations, card } (icon: the page's icon, an emoji, or null; look: the
+//                                  document's look on its <html>, shared/document-look.mjs; card: a detail card is open)
 //                         reply    to a command, once it is done: { id, ok, ... }
 //                         key      a key combination the workbench registered, pressed in the page: { key }
 //                         notice   something to tell the reader, as the workbench's toast: { text, tone, hold,