@heycys/gallery 0.1.0 → 0.1.2

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

@@ -1,11 +1,13 @@
-// Taken over from notion-lite (its src/ui/media-picker/index.js), as it is: only what it imports is
-// Gallery's own (support.mjs, src/shared/emoji/). Its notes, below, are notion-lite's.
+// Taken over from notion-lite (its src/ui/media-picker/index.js): its structure and behaviour as there,
+// what it imports Gallery's own (support.mjs, src/shared/emoji/), and since 2026-11 (the user's word) its
+// look Gallery's own (styles.mjs: the editor's palette, text tabs as the formula editor's, no blue). Its
+// notes, below, are notion-lite's, the look's changed.
 /* 图标选择器（Notion 485357 MediaPicker，页签由 569553 m 给：表情符号 / 图标 / 上传；尺寸、颜色是线上实测）：标注图标、选项卡图标、页面图标共用。
  *   宽 408（569553 popupWidth）；“表情符号”“图标”页签高 390（tabHeight），“上传”页签没给高度，随内容。
- *   页签栏（eU）：高 40、左右 8、底下一条 --ca-borSecTra；“表情符号 / 图标 / 上传”，选中的下面 2px 线；右边“移除”（灰色文字按钮）。
+ *   页签栏（eU）：上下 6、左右 8、底下一条 --ge-line；“表情符号 / 图标 / 上传”是文字页签，当前的一块灰底（没有下划线）；右边“移除”（灰色文字按钮）。
  *     打开时当前图标是 Notion 图标就在“图标”页签，否则在“表情符号”（569553 d；Notion 的当前页签只记在内存里）
- *   筛选行（ec）：只有“表情符号”“图标”页签有。上 4 下 10；里面左右 8、间距 8：输入框（放大镜、“筛选…”、有字时的清除按钮）
- *     + “随机”（28×28 带边框）+ 页签自己的按钮（表情：选肤色；图标：选图标颜色），两个页签共用同一个筛选词（onFilterChange 同时改两边）
+ *   筛选行（ec）：只有“表情符号”“图标”页签有。8 12 6：输入框（放大镜、“筛选…”、有字时的清除按钮；聚焦时灰色内框）
+ *     + “随机”（28×28，无框）+ 页签自己的按钮（表情：选肤色；图标：选图标颜色），两个页签共用同一个筛选词（onFilterChange 同时改两边）
  *   “上传”页签（569553 custom → 963369，./upload.js）：上传 / 拖进来 / 粘贴一张图片或图片链接，“保存”就用它当图标；
  *     勾上“添加到表情符号库”再起个名字，就同时存成自定义表情（以后在“表情符号”页签的“自定义”里）
  *   随机：选上但不关菜单（keepVisible）
@@ -53,9 +55,9 @@ export function openMediaPicker({ origin, value, isCallout = false, onPick, only
     `<div class="nmm-header">` +
       `<div class="nmm-tabbar">` +
         `<div role="tablist" class="nmm-tabs">` +
-          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="emoji">${t("表情符号")}</div><div class="nmm-tab-line"></div></div>` +
-          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="icon">${t("图标")}</div><div class="nmm-tab-line"></div></div>` +
-          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="upload">${t("上传")}</div><div class="nmm-tab-line"></div></div>` +
+          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="emoji">${t("表情符号")}</div></div>` +
+          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="icon">${t("图标")}</div></div>` +
+          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="upload">${t("上传")}</div></div>` +
         `</div>` +
         `<div class="nmm-tabbar-right"><div role="button" tabindex="0" class="nmm-text-button" data-act="remove">${t("移除")}</div></div>` +
       `</div>` +
@@ -63,7 +65,7 @@ export function openMediaPicker({ origin, value, isCallout = false, onPick, only
         `<div class="nmm-input"><div class="nmm-input-icon">${icon('magnifyingGlassSmall', 16)}</div>` +
           `<input type="text" role="combobox" placeholder="${t("筛选…")}" autocomplete="off" spellcheck="false" aria-autocomplete="list" aria-haspopup="grid" aria-expanded="true">` +
           `<div role="button" tabindex="0" aria-label="${t("清除输入")}" class="nmm-clear" data-act="clear" hidden>${icon('xMarkCircle', 20)}</div></div>` +
-        `<div class="nmm-filter-right"><div class="nmm-tab-left"></div><div role="button" tabindex="0" aria-label="${t("随机")}" class="nmm-random" data-act="random">${icon('arrowIntersectRightSmall', 14)}</div><div class="nmm-tab-button"></div></div>` +
+        `<div class="nmm-filter-right"><div class="nmm-tab-left"></div><div role="button" tabindex="0" aria-label="${t("随机")}" class="nmm-random" data-act="random">${icon('arrowIntersectRightSmall', 16)}</div><div class="nmm-tab-button"></div></div>` +
       `</div></div>` +
     `</div>` +
     `<div class="nmm-content"></div>`;

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

@@ -1,2 +1,156 @@
-// notion-lite's media-picker.css, as it is (support.mjs style() adds it with Notion's tokens).
-export const PICKER_CSS = "/* 图标选择器（./index.js、./emoji-tab.js、./icon-tab.js；数值是线上实测） */\n.notion-media-menu { display: flex; flex-direction: column; max-height: calc(100vh - 24px); border-radius: 10px; background: var(--c-popBac); box-shadow: var(--c-shaOutLg); overflow: hidden; color: var(--c-texPri); font-size: 14px; line-height: 1.2; }\n\n/* 页签栏：高 40，左右 8，底下一条线；页签 28 高、左右 8、圆角 6；选中的下面 2px 线（左右缩进 8） */\n.nmm-header { flex-shrink: 0; }\n.nmm-tabbar { display: flex; height: 40px; padding: 0 8px; box-shadow: inset 0 -1px 0 var(--ca-borSecTra); overflow: auto hidden; scrollbar-width: none; }\n.nmm-tabs { display: flex; }\n.nmm-tab-wrap { position: relative; padding: 6px 0; }\n.nmm-tab { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 6px; white-space: nowrap; color: var(--c-texTer); cursor: pointer; user-select: none; transition: background 100ms ease-in-out; }\n.nmm-tab:hover { background: var(--ca-bacIntTra); }\n.nmm-tab.selected { color: var(--c-texPri); }\n.nmm-tab.disabled { cursor: default; background: none; }\n.nmm-tab-line { position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--c-texPri); }\n.nmm-tab-wrap:not(.selected) .nmm-tab-line { display: none; }\n.nmm-tabbar-right { display: flex; align-items: center; margin-inline-start: auto; }\n/* 图标页签：随机按钮左边，写着现在这一套图标的名字（MingCute / Tabler），点一下换成另一套（icon-tab.mjs） */\n.nmm-set-toggle { display: flex; align-items: center; justify-content: center; min-width: 74px; height: 28px; box-sizing: border-box; margin-inline-end: 6px; padding: 0 8px; border: 1px solid var(--ca-borPriTra); border-radius: 6px; color: var(--c-texSec); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none; transition: background 100ms ease-in-out; }\n.nmm-set-toggle:hover { background: var(--ca-bacIntTra); }\n.nmm-tab-left:empty { display: none; }\n.nmm-tab-left { display: flex; }\n.nmm-text-button { display: flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 6px; color: var(--c-texTer); cursor: pointer; white-space: nowrap; user-select: none; transition: background 100ms ease-in-out; }\n.nmm-text-button:hover { background: var(--ca-bacIntTra); }\n\n/* 筛选行：上 4 下 10；里面 4px 8px、间距 8 */\n.nmm-filter-row { margin: 4px 0 10px; }\n.nmm-filter { display: flex; align-items: center; gap: 8px; height: 36px; padding: 4px 8px; }\n.nmm-input { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 28px; padding: 3px 6px; border-radius: 6px; background: var(--ca-graBacPriTra); box-shadow: inset 0 0 0 1px var(--ca-borPriTra); cursor: text; line-height: 20px; }\n.nmm-input:focus-within { box-shadow: var(--c-inpBluFocRin); }\n.nmm-input-icon { width: 16px; height: 16px; margin-inline-end: 6px; --nmm-icon: var(--c-icoSec); }\n.nmm-input input { flex: 1; min-width: 0; height: 20px; border: none; outline: none; background: transparent; padding: 0; font: inherit; font-size: 14px; line-height: 20px; color: var(--c-texPri); }\n.nmm-input input::placeholder { color: var(--c-texTer); }\n.nmm-clear { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; margin: -2px -4px -2px 0; border-radius: 20px; --nmm-icon: var(--c-icoTer); cursor: pointer; }\n.nmm-clear[hidden] { display: none; }\n.nmm-clear:hover { background: var(--ca-bacIntTra); }\n.nmm-filter-right { display: flex; flex: 0 0 auto; }\n.nmm-random, .nmm-color-button { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid var(--ca-borPriTra); border-radius: 6px; --nmm-icon: var(--c-icoPri); cursor: pointer; transition: background 100ms ease-in-out; }\n.nmm-random:hover, .nmm-color-button:hover { background: var(--ca-bacIntTra); }\n.nmm-skin-wrap { margin-inline-start: 6px; }\n.nmm-skin { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; font-size: 20px; line-height: 24px; cursor: pointer; user-select: none; transition: background 100ms ease-in-out; }\n.nmm-skin:hover { background: var(--ca-bacIntTra); }\n\n/* 列表区：高 300。表情：列表（最高 305，下 6）+ 分类栏；图标：列表占满 */\n.nmm-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }\n.nmm-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }\n.nmm-scroller { flex: 1 1 auto; min-height: 0; max-height: 305px; padding-bottom: 6px; overflow: hidden auto; }\n.nmm-icon-scroller { max-height: none; padding-bottom: 0; }\n.nmm-section { display: flex; flex-direction: column; gap: 1px; }\n.nmm-section-title { display: flex; margin: 6px 0 8px; padding: 6px 8px 0; font-size: 12px; font-weight: 500; line-height: 12px; color: var(--c-texSec); user-select: none; }\n.nmm-section-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.nmm-rows { display: flex; flex-direction: column; padding: 0 12px; }\n.nmm-row { display: flex; }\n.nmm-cell { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 4px; font-size: 24px; line-height: 36px; cursor: pointer; user-select: none; }\n.nmm-cell.focused { background: var(--ca-bacIntTra); }\n.nmm-cell.focus-visible { box-shadow: var(--c-butBluFocRin); }\n.nmm-cell img { display: block; }\n/* 图标页签：每组外面 4px，标题没有上内边距、行高 14.4；格子圆角 8 */\n.nmm-icon-grid .nmm-section { padding: 4px; }\n.nmm-icon-grid .nmm-section-title { padding: 0 8px; line-height: 14.4px; }\n.nmm-icon-cell { border-radius: 8px; }\n/* 无结果：外层 4px，说明文字 12px / 500 */\n.nmm-empty { padding: 4px; }\n.nmm-empty-caption { display: flex; align-items: center; height: 20px; margin: 2px 0 2px 2px; padding: 4px 8px; font-size: 12px; font-weight: 500; line-height: 16.8px; color: var(--c-texSec); }\n\n/* 分类栏：上边一条线，内边距 8 12 10，按钮 32×32、图标 22、圆角 6 */\n.nmm-categories { display: flex; justify-content: space-between; flex-shrink: 0; padding: 8px 12px 10px; border-top: 1px solid var(--c-borSec); }\n.nmm-categories[hidden] { display: none; }\n.nmm-category { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; --nmm-icon: var(--c-icoSec); cursor: pointer; transition: background 100ms ease-in-out; }\n.nmm-category:hover, .nmm-category.focused { background: var(--ca-bacIntTra); }\n.nmm-category.disabled { opacity: .4; cursor: default; background: none; }\n\n/* 小浮层：肤色变体 / 选肤色（一排，padding 4）；图标颜色变体（两行各 5 个，行内边距 2、间距 1）；选图标颜色的菜单（宽 134） */\n.nmm-variations, .nmm-icon-variations, .nmm-color-menu { border-radius: 10px; background: var(--c-popBac); box-shadow: var(--c-shaOutLg); }\n.nmm-variations { display: flex; padding: 4px; }\n.nmm-icon-variations-row { display: flex; padding: 2px; gap: 1px; }\n.nmm-color-menu { width: 134px; padding: 4px 0; }\n.nmm-color-row { display: flex; padding: 4px; gap: 4px; }\n.nmm-color-row.dim { opacity: .5; }\n.nmm-color-swatch { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; opacity: .4; cursor: pointer; transition: background 100ms ease-in-out; }\n.nmm-color-swatch.selected { opacity: 1; }\n.nmm-color-swatch:hover { background: var(--ca-bacIntTra); }\n.nmm-color-ask { display: flex; flex-direction: row-reverse; justify-content: center; gap: 4px; margin: 4px 0 0; padding: 4px 4px 0; border-top: 1px solid var(--ca-borSecTra); }\n.nmm-color-ask-item { display: flex; align-items: center; width: 100%; height: 28px; padding-inline: 6px; border-radius: 6px; font-size: 14px; cursor: pointer; user-select: none; transition: background 100ms ease-in-out; }\n.nmm-color-ask-item:hover { background: var(--ca-bacIntTra); }\n.nmm-color-ask-label { flex: 1; margin-inline-start: 6px; white-space: nowrap; }\n.nmm-switch { display: flex; flex-shrink: 0; width: 26px; height: 14px; padding: 2px; margin-inline-end: 4px; box-sizing: content-box; border-radius: 44px; background: var(--ca-swiTogDesTraBgVar); transition: background 200ms; }\n.nmm-switch.on { background: var(--c-bluBacAccPri); }\n.nmm-switch-knob { width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out; }\n.nmm-switch.on .nmm-switch-knob { transform: translateX(12px); }\n\n/* 自定义表情（./emoji-tab.js，943244 S）：“添加表情符号”的圆形加号（28×28、外边距 2、1px --c-borPri、圆角 15，加号 16 --c-icoSec）；\n   无结果时的“添加表情符号”按钮（28 高、4px 8px、左右外边距 12、圆角 6、1px --c-borPri、14px / 500、间距 6，加号 --c-icoPri） */\n.nmm-cell.nmm-add-cell { width: 28px; height: 28px; margin: 2px; box-sizing: border-box; border: 1px solid var(--c-borPri); border-radius: 15px; --nmm-icon: var(--c-icoSec); }\n.nmm-empty.with-add { display: flex; flex-direction: column; }\n.nmm-empty.with-add .nmm-empty-caption { height: 20px; margin: 0 0 2px 2px; box-sizing: content-box; }\n.nmm-cell.nmm-add-button { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: auto; height: 28px; margin: 0 12px; padding: 4px 8px; box-sizing: border-box; border: 1px solid var(--c-borPri); border-radius: 6px; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; --nmm-icon: var(--c-icoPri); }\n.nmm-cell img.notion-custom-emoji { object-fit: contain; color: transparent; }\n\n/* “上传”页签 / “添加表情符号”浮层（./upload.js，963369；数值见那里开头） */\n.nmm-upload { display: flex; flex-direction: column; padding: 0 16px; font-size: 14px; color: var(--c-texPri); }\n.nmm-upload-title { margin-top: 12px; font-size: 14px; font-weight: 600; }\n.nmm-upload-description { margin-top: 2px; font-size: 12px; color: var(--c-texSec); }\n.nmm-upload-zone-wrap { display: flex; flex-direction: column; align-items: stretch; margin-top: 20px; }\n.nmm-upload-zone { border-radius: 4px; background: var(--ca-bacSecTra); }\n.nmm-upload-zone-wrap.dragover .nmm-upload-zone { background: var(--ca-bluBacSecTra); }\n.nmm-upload-button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 6px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--c-texSec); --nmm-icon: var(--c-icoSec); cursor: pointer; user-select: none; transition: background 100ms ease-in-out; }\n.nmm-upload-button:hover { background: var(--ca-bacIntTra); }\n.nmm-upload-preview { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; }\n.nmm-upload.large .nmm-upload-preview { padding: 16px; }\n.nmm-upload-preview.with-replace { padding-bottom: 4px; }\n.nmm-upload-preview-label { margin-bottom: 4px; font-size: 12px; color: var(--c-texSec); }\n.nmm-upload-preview-row { display: flex; align-items: center; gap: 6px; }\n.nmm-upload-preview-row img { width: 48px; height: 48px; padding: 8px; box-sizing: border-box; border: 1px solid var(--ca-borPriTra); border-radius: 8px; object-fit: cover; }\n.nmm-upload.large .nmm-upload-preview-row img { width: 80px; height: 80px; padding: 6px; }\n.nmm-upload-zone.contain .nmm-upload-preview-row img { object-fit: contain; }\n.nmm-upload-preview-row img.light { background: var(--c-whi); }\n.nmm-upload-preview-row img.dark { background: var(--c-priBla); }\n.nmm-upload-replace { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--c-graTexAccPri); --nmm-icon: var(--c-graTexAccPri); cursor: pointer; user-select: none; transition: background 100ms ease-in-out; }\n.nmm-upload-replace:hover { background: var(--ca-graBacIntTra); }\n.nmm-upload-paste { margin-top: 10px; font-size: 12px; color: var(--c-texTer); text-align: center; }\n.nmm-upload-error { margin-top: 10px; font-size: 12px; color: var(--c-redTexAccPri); text-align: center; }\n.nmm-upload-confirm { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; cursor: pointer; user-select: none; }\n.nmm-upload-checkbox { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--ca-borStrTra); border-radius: 3px; cursor: pointer; transition: background .2s ease-out; }\n.nmm-upload-checkbox[aria-checked=\"true\"] { border: none; background: var(--c-bluBacAccPri); }\n.nmm-upload-name { display: block; margin-top: 20px; }\n.nmm-upload-name-label { margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--c-texSec); }\n.nmm-upload-input { display: flex; align-items: center; height: 28px; padding: 3px 6px; border-radius: 6px; background: var(--ca-bacSecTra); box-shadow: 0 0 0 1px var(--ca-borPriTra); cursor: text; }\n.nmm-upload-input:focus-within { box-shadow: var(--c-inpBluFocRin); }\n.nmm-upload-input input { flex: 1; min-width: 0; height: 20px; border: none; outline: none; background: transparent; padding: 0; font: inherit; font-size: 14px; line-height: 20px; color: var(--c-texPri); }\n.nmm-upload-input input::placeholder { color: var(--c-texTer); }\n.nmm-upload-name-error { margin-top: 10px; font-size: 12px; color: var(--c-redTexAccPri); }\n.nmm-upload-name-error[hidden], .nmm-upload [hidden] { display: none; }\n.nmm-upload-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 12px; }\n.nmm-upload-secondary, .nmm-upload-save { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 8px; border-radius: 6px; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none; transition: background 100ms ease-in-out; }\n.nmm-upload-secondary { color: var(--c-texSec); }\n.nmm-upload-secondary:hover { background: var(--ca-bacIntTra); }\n.nmm-upload-save { background: var(--c-bluBacAccPri); color: var(--c-texInvPri); }\n.nmm-upload-save:not(.disabled):hover { filter: brightness(.94); }\n.nmm-upload-save.disabled { opacity: .4; cursor: default; }\n/* “添加表情符号”浮层（749527 tM → 747369 Popup，最小宽 280） */\n.nmm-custom-emoji-popup { min-width: 280px; border-radius: 10px; background: var(--c-popBac); box-shadow: var(--c-shaOutLg); }\n\n/* 图标：编辑器自己的线条图（../icons.mjs），颜色由所在处的 --nmm-icon 定 */\n.notion-popup-layer svg:not(.ge-glyph) { fill: none; stroke: var(--nmm-icon, currentColor); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }\n.nmm-upload-checkbox { --nmm-icon: #fff; }\n.nmm-upload-checkbox svg { stroke-width: 2; }";
+// The icon picker's look (index.mjs, emoji-tab.mjs, icon-tab.mjs, upload.mjs, grid.mjs), Gallery's own
+// since 2026-11 (the user's word: notion-lite's media-picker.css, which it was, gave way): the editor's
+// palette (page/look.mjs, --ge-*), text tabs and gray fills as the formula editor's symbol bar
+// (formula/panel.mjs), buttons without a frame, nothing in blue or any other bright color. Its structure,
+// its class names (.notion-media-menu, .nmm-*: the scenarios read them) and its sizes (408 x 390, 4px
+// under the icon) as before. support.mjs style() adds it to the popups' layer.
+export const PICKER_CSS = `
+.notion-media-menu { display: flex; flex-direction: column; max-height: calc(100vh - 24px); border-radius: 10px; background: var(--ge-bg); box-shadow: var(--ge-shadow-pop); overflow: hidden; color: var(--ge-tx); font-size: 14px; line-height: 1.2; }
+
+/* The tab bar: 6 8, a --ge-line under it. A tab 26 high, 8 each side, 13px, rounded 6, --ge-tx2; the one
+   shown the only gray block (--ge-hover) in --ge-tx, another darkening its words alone under the pointer.
+   移除 at its right end, a text button of the same size (as the formula editor's 完成). */
+.nmm-header { flex-shrink: 0; }
+.nmm-tabbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--ge-line); overflow: auto hidden; scrollbar-width: none; }
+.nmm-tabs { display: flex; gap: 2px; }
+.nmm-tab-wrap { display: flex; }
+.nmm-tab { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 13px; white-space: nowrap; color: var(--ge-tx2); cursor: pointer; user-select: none; transition: color 20ms ease-in, background 20ms ease-in; }
+.nmm-tab:hover { color: var(--ge-tx); }
+.nmm-tab.selected { background: var(--ge-hover); color: var(--ge-tx); }
+.nmm-tabbar-right { display: flex; align-items: center; margin-inline-start: auto; }
+.nmm-text-button { display: flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 13px; color: var(--ge-tx2); white-space: nowrap; cursor: pointer; user-select: none; }
+.nmm-text-button:hover { background: var(--ge-hover); color: var(--ge-tx); }
+
+/* The filter row: 8 12 6. The field 28 high on --ge-field, a 1px --ge-edge inside it, which focus only
+   deepens (to --ge-ico3, no blue ring). The buttons right of it (随机, the skin tone, the icon color, the
+   set) 28 x 28 without a frame, their icons --ge-ico2; --ge-hover under the pointer, --ge-press pressed. */
+.nmm-filter-row { padding: 8px 12px 6px; }
+.nmm-filter { display: flex; align-items: center; gap: 4px; }
+.nmm-input { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 28px; box-sizing: border-box; margin-inline-end: 4px; padding: 0 4px 0 8px; border-radius: 6px; background: var(--ge-field); box-shadow: inset 0 0 0 1px var(--ge-edge); cursor: text; }
+.nmm-input:focus-within { box-shadow: inset 0 0 0 1px var(--ge-ico3); }
+.nmm-input-icon { display: flex; width: 16px; height: 16px; margin-inline-end: 6px; --nmm-icon: var(--ge-ico2); }
+.nmm-input input { flex: 1; min-width: 0; height: 20px; border: none; outline: none; background: transparent; padding: 0; font: inherit; font-size: 14px; line-height: 20px; color: var(--ge-tx); }
+.nmm-input input::placeholder { color: var(--ge-tx3); }
+.nmm-clear { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; --nmm-icon: var(--ge-ico3); cursor: pointer; }
+.nmm-clear[hidden] { display: none; }
+.nmm-clear:hover { --nmm-icon: var(--ge-ico2); }
+.nmm-filter-right { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
+.nmm-tab-left { display: flex; }
+.nmm-tab-left:empty { display: none; }
+.nmm-skin-wrap { display: flex; }
+.nmm-random, .nmm-color-button, .nmm-skin { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; box-sizing: border-box; border-radius: 6px; --nmm-icon: var(--ge-ico2); cursor: pointer; user-select: none; }
+.nmm-skin img, .nmm-skin .ge-emoji-pending { display: block; width: 18px; height: 18px; }
+/* The 图标 tab: left of 随机 the set shown (MingCute / Tabler), a click the other one (icon-tab.mjs); 72 wide at least, so a new name moves nothing */
+.nmm-set-toggle { display: flex; align-items: center; justify-content: center; min-width: 72px; height: 28px; box-sizing: border-box; padding: 0 8px; border-radius: 6px; color: var(--ge-tx2); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none; }
+.nmm-random:hover, .nmm-color-button:hover, .nmm-skin:hover, .nmm-set-toggle:hover { background: var(--ge-hover); color: var(--ge-tx); --nmm-icon: var(--ge-ico); }
+.nmm-random:active, .nmm-color-button:active, .nmm-skin:active, .nmm-set-toggle:active { background: var(--ge-press); }
+
+/* The list: in the 表情符号 tab above the category bar, in the 图标 tab all the rest. The scroller is
+   positioned, so a group's offsetTop counts from it (a category's button scrolls its group to the top). */
+.nmm-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.nmm-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.nmm-scroller { position: relative; flex: 1 1 auto; min-height: 0; padding-bottom: 6px; overflow: hidden auto; }
+.nmm-section { display: flex; flex-direction: column; }
+/* A group's title sticks to the list's top as it scrolls (the next one pushes it away): 28 high, 12px / 500,
+   --ge-tx2, on the card's own color; 16 from the left, where the first column's emoji and the tabs' words start
+   (the rows' 12 and a cell's 4) */
+.nmm-section-title { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-end; height: 28px; box-sizing: border-box; padding: 0 16px 6px; background: var(--ge-bg); font-size: 12px; font-weight: 500; line-height: 16px; color: var(--ge-tx2); user-select: none; }
+.nmm-section-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.nmm-rows { display: flex; flex-direction: column; padding: 0 12px; }
+.nmm-row { display: flex; }
+/* A cell 32 x 32, rounded 6, its emoji or icon 24: --ge-hover under the pointer, --ge-press where the keys moved to (no blue ring) */
+.nmm-cell { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px; font-size: 24px; line-height: 1; cursor: pointer; user-select: none; }
+.nmm-cell.focused { background: var(--ge-hover); }
+.nmm-cell.focus-visible { background: var(--ge-press); }
+.nmm-cell img { display: block; }
+.nmm-cell img.notion-custom-emoji { object-fit: contain; color: transparent; }
+/* 添加表情符号: the custom group's first cell, a round plus (26, 3 around, the plus --ge-ico3, no line round
+   it: gray under the pointer as a cell); with no result, a button (28 high, 13px / 500, no line either) */
+.nmm-cell.nmm-add-cell { width: 26px; height: 26px; margin: 3px; box-sizing: border-box; border-radius: 50%; --nmm-icon: var(--ge-ico3); }
+.nmm-cell.nmm-add-cell.focused { --nmm-icon: var(--ge-ico); }
+.nmm-empty { padding: 8px 12px; }
+.nmm-empty-caption { display: flex; align-items: center; height: 20px; padding: 0 4px; font-size: 12px; font-weight: 500; color: var(--ge-tx3); }
+.nmm-empty.with-add { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
+.nmm-cell.nmm-add-button { justify-content: flex-start; gap: 6px; width: max-content; height: 28px; padding: 0 10px 0 8px; box-sizing: border-box; border-radius: 6px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--ge-tx); white-space: nowrap; --nmm-icon: var(--ge-ico2); }
+
+/* The category bar: a --ge-line above it, 6 12 8; buttons 28 x 28, icons 18 in --ge-ico3; the group scrolled
+   to on --ge-hover, its icon --ge-ico; a group with no emoji faded to .35 and not to be clicked (自定义 and
+   添加 always can) */
+.nmm-categories { display: flex; justify-content: space-between; flex-shrink: 0; padding: 6px 12px 8px; border-top: 1px solid var(--ge-line); }
+.nmm-categories[hidden] { display: none; }
+.nmm-category { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; --nmm-icon: var(--ge-ico3); cursor: pointer; }
+.nmm-category:hover { background: var(--ge-hover); --nmm-icon: var(--ge-ico2); }
+.nmm-category.focused { background: var(--ge-hover); --nmm-icon: var(--ge-ico); }
+.nmm-category.disabled { opacity: .35; cursor: default; background: none; }
+
+/* The small popups: the skin tones of an emoji or to choose (one row), an icon's colors (two rows of 5), the
+   icon color's menu; the card's color, shadow and corners */
+.nmm-variations, .nmm-icon-variations, .nmm-color-menu { border-radius: 10px; background: var(--ge-bg); box-shadow: var(--ge-shadow-pop); }
+.nmm-variations { display: flex; gap: 2px; padding: 4px; }
+.nmm-icon-variations { padding: 4px; }
+.nmm-icon-variations-row { display: flex; gap: 2px; }
+.nmm-color-menu { width: 160px; box-sizing: border-box; padding: 6px; }
+.nmm-color-row { display: flex; justify-content: space-between; padding: 2px 0; }
+.nmm-color-row.dim { opacity: .5; }
+.nmm-color-swatch { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; opacity: .45; cursor: pointer; }
+.nmm-color-swatch.selected, .nmm-color-swatch:hover { opacity: 1; background: var(--ge-hover); }
+.nmm-color-ask { display: flex; margin: 6px -6px 0; padding: 6px 6px 0; border-top: 1px solid var(--ge-line); }
+.nmm-color-ask-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 6px; border-radius: 6px; font-size: 13px; color: var(--ge-tx); cursor: pointer; user-select: none; }
+.nmm-color-ask-item:hover { background: var(--ge-hover); }
+.nmm-color-ask-label { flex: 1; white-space: nowrap; }
+/* 每次询问's switch: off --ge-line-strong, on --ge-tx2 (a neutral gray, not the blue), its knob white */
+.nmm-switch { display: flex; flex-shrink: 0; width: 26px; height: 14px; padding: 2px; box-sizing: content-box; border-radius: 44px; background: var(--ge-line-strong); transition: background 200ms; }
+.nmm-switch.on { background: var(--ge-tx2); }
+.nmm-switch-knob { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(15 15 15 / 20%); transition: transform 200ms ease-out; }
+.nmm-switch.on .nmm-switch-knob { transform: translateX(12px); }
+
+/* The 上传 tab and the 添加表情符号 popup (upload.mjs): the zone an image goes in on --ge-field, a 1px
+   --ge-edge inside it, rounded 8, deeper while a file is dragged over it (--ge-hover, --ge-ico3), never blue;
+   保存 the pale blue primary and 取消 / 返回 the plain text button (look.mjs BUTTONS: .ge-btn, dimmed while it cannot be
+   clicked); the checkbox checked --ge-tx2 with a white tick; an error --ge-red */
+.nmm-upload { display: flex; flex-direction: column; padding: 0 16px; font-size: 14px; color: var(--ge-tx); }
+.nmm-upload-title { margin-top: 14px; font-size: 14px; font-weight: 600; }
+.nmm-upload-description { margin-top: 2px; font-size: 12px; color: var(--ge-tx2); }
+.nmm-upload-zone-wrap { display: flex; flex-direction: column; align-items: stretch; margin-top: 16px; }
+.nmm-upload-zone { border-radius: 8px; background: var(--ge-field); box-shadow: inset 0 0 0 1px var(--ge-edge); }
+.nmm-upload-zone-wrap.dragover .nmm-upload-zone { background: var(--ge-hover); box-shadow: inset 0 0 0 1px var(--ge-ico3); }
+.nmm-upload-button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 14px; border-radius: 8px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--ge-tx2); --nmm-icon: var(--ge-ico2); cursor: pointer; user-select: none; }
+.nmm-upload-button:hover { background: var(--ge-hover); color: var(--ge-tx); }
+.nmm-upload-preview { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; }
+.nmm-upload.large .nmm-upload-preview { padding: 16px; }
+.nmm-upload-preview.with-replace { padding-bottom: 4px; }
+.nmm-upload-preview-label { margin-bottom: 4px; font-size: 12px; color: var(--ge-tx2); }
+.nmm-upload-preview-row { display: flex; align-items: center; gap: 6px; }
+.nmm-upload-preview-row img { width: 48px; height: 48px; padding: 8px; box-sizing: border-box; border: 1px solid var(--ge-edge); border-radius: 8px; object-fit: cover; }
+.nmm-upload.large .nmm-upload-preview-row img { width: 80px; height: 80px; padding: 6px; }
+.nmm-upload-zone.contain .nmm-upload-preview-row img { object-fit: contain; }
+.nmm-upload-preview-row img.light { background: #fff; }
+.nmm-upload-preview-row img.dark { background: #191919; }
+.nmm-upload-replace { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--ge-tx2); --nmm-icon: var(--ge-ico2); cursor: pointer; user-select: none; }
+.nmm-upload-replace:hover { background: var(--ge-hover); }
+.nmm-upload-paste { margin-top: 10px; font-size: 12px; color: var(--ge-tx3); text-align: center; }
+.nmm-upload-error { margin-top: 10px; font-size: 12px; color: var(--ge-red); text-align: center; }
+.nmm-upload-confirm { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; cursor: pointer; user-select: none; }
+.nmm-upload-checkbox { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--ge-ico3); border-radius: 3px; cursor: pointer; transition: background .2s ease-out; }
+.nmm-upload-checkbox[aria-checked="true"] { border-color: transparent; background: var(--ge-tx2); }
+.nmm-upload-name { display: block; margin-top: 20px; }
+.nmm-upload-name-label { margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--ge-tx2); }
+.nmm-upload-input { display: flex; align-items: center; height: 28px; box-sizing: border-box; padding: 0 8px; border-radius: 6px; background: var(--ge-field); box-shadow: inset 0 0 0 1px var(--ge-edge); cursor: text; }
+.nmm-upload-input:focus-within { box-shadow: inset 0 0 0 1px var(--ge-ico3); }
+.nmm-upload-input input { flex: 1; min-width: 0; height: 20px; border: none; outline: none; background: transparent; padding: 0; font: inherit; font-size: 14px; line-height: 20px; color: var(--ge-tx); }
+.nmm-upload-input input::placeholder { color: var(--ge-tx3); }
+.nmm-upload-name-error { margin-top: 10px; font-size: 12px; color: var(--ge-red); }
+.nmm-upload-name-error[hidden], .nmm-upload [hidden] { display: none; }
+.nmm-upload-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 12px; }
+.nmm-upload-secondary, .nmm-upload-save { font-size: 14px; }
+.nmm-custom-emoji-popup { min-width: 280px; border-radius: 10px; background: var(--ge-bg); box-shadow: var(--ge-shadow-pop); }
+
+/* A button reached by Tab: a gray fill, not the browser's dark or blue ring; the checkbox a gray ring */
+.notion-media-menu [role="button"]:focus-visible, .nmm-custom-emoji-popup [role="button"]:focus-visible { outline: none; background: var(--ge-hover); }
+.nmm-upload-checkbox:focus-visible { outline: 1px solid var(--ge-ico3); outline-offset: 2px; }
+
+/* Icons: the editor's own line drawings (icons.mjs), in the color --nmm-icon gives where they are (the media menu's are in this layer too) */
+.notion-popup-layer svg:not(.ge-glyph) { fill: none; stroke: var(--nmm-icon, currentColor); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
+.nmm-upload-checkbox { --nmm-icon: #fff; }
+.nmm-upload-checkbox svg { stroke-width: 2; }
+`;

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

@@ -16,14 +16,16 @@ import { t } from "../../../shared/i18n/index.mjs";
 // a press outside every one closes them all, one inside closes those above it), its tooltip
 // (ui/tooltip.js: the editor's own, tooltip.mjs), its snackbar (the editor's status line), the storage its uploads and custom
 // emojis go to (this Gallery's server: the report's own folder, the workspace's library) and its
-// styles (Notion's, its tokens in light and dark). Everything drawn carries data-doc-dev.
+// styles. The picker's own (styles.mjs) read the editor's palette (page/look.mjs, since 2026-11); Notion's
+// tokens (--c-*, --ca-*, light and dark) stay on the layer for the media menu (media-menu/) and the image's
+// alignment bar (components/image/page.mjs), which still read them. Everything drawn carries data-doc-dev.
 
 export const esc = (s) => escapeMarkup(String(s ?? "")).replaceAll("'", "'");
 export { icon };
 
 // ---------- styles ----------
 
-// Notion's tokens the picker uses (notion-lite's view/theme/notion-vars.css), light and dark.
+// Notion's tokens (notion-lite's view/theme/notion-vars.css), light and dark: the media menu's and the image's alignment bar's (the picker reads --ge-*).
 const TOKENS = `
   --ca-bacIntTra: light-dark(rgba(33,27,23,.05), rgba(255,255,255,.055));
   --ca-bacSecTra: light-dark(rgba(66,35,3,.03), rgba(252,252,252,.03));
@@ -46,14 +48,14 @@ const TOKENS = `
 `;
 const FONT = `ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif`;
 
-/** The picker's styles (notion-lite's media-picker.css, popup.css), added once. */
+/** The popups' layer (notion-lite's popup.css) and the picker's styles (styles.mjs), added once. */
 export function style() {
   addStyle(`
     .notion-popup-layer { ${TOKENS} }
     .notion-popup-layer { position: fixed; inset: 0; pointer-events: none; z-index: ${Z.menu}; font: 14px/1.2 ${FONT}; color: var(--c-texPri); }
     .notion-popup { position: fixed; pointer-events: auto; opacity: 0; transition: opacity 200ms; }
     .notion-popup.shown { opacity: 1; }
-    .notion-popup-layer .notion-scroller { scrollbar-width: thin; scrollbar-color: var(--ca-borPriTra) transparent; }
+    .notion-popup-layer .notion-scroller { scrollbar-width: thin; scrollbar-color: var(--ge-edge) transparent; }
     ${PICKER_CSS}
   `);
 }

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

@@ -1,21 +1,22 @@
-// Taken over from notion-lite (its src/ui/media-picker/upload.js), as it is: only what it imports is
-// Gallery's own (support.mjs, src/shared/emoji/). Its notes, below, are notion-lite's.
+// 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，从上到下）：
- *   标题（上 12、14px / 600）+ 说明（上 2、12px、--c-texSec）——只有浮层有
- *   放图片的区域（上 20、--ca-bacSecTra 底、圆角 4）：
- *     没图片：整块是一个按钮（内边距 14、间距 8、14px / 500、--c-texSec、居中）：图片图标 +“上传图片”
- *     有图片：一列居中（内边距 16 / 12，有“替换”时下 4，间距 4）：“预览”（12px、--c-texSec、下 4）+ 一亮一暗两张（间距 6；
- *       80 / 48 见方、内边距 6 / 8、圆角 8、1px --ca-borPriTra；存成表情时 contain、否则 cover）+ 灰色“替换”（能粘贴链接时没有）
+ *   标题（上 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、--c-texTer、居中）“或Ctrl+V粘贴图片或链接”——能粘贴链接、还没图片、没出错时
+ *   粘贴提示（上 10、12px、--ge-tx3、居中）“或Ctrl+V粘贴图片或链接”——能粘贴链接、还没图片、没出错时
  *   错误（上 10、12px、红、居中）
- *   勾选框（上 12、间距 8、14px；框 14）“添加到表情符号库”——能勾、有图片时
- *   表情符号名称（上 20；标签 12px / 500 / --c-texSec、下 6；输入框；错误 上 10、12px、红）——要存成表情、
+ *   勾选框（上 12、间距 8、14px；框 14，勾上是 --ge-tx2 底、白勾）“添加到表情符号库”——能勾、有图片时
+ *   表情符号名称（上 20；标签 12px / 500 / --ge-tx2、下 6；输入框；错误 上 10、12px、红）——要存成表情、
  *     并且（不能粘贴链接，或者已经有图片）时；选了文件、名字还空着（或者还是上一个文件名生成的）就用文件名生成
- *   底部（上 16 下 12、两端对齐、间距 8）：左边灰色“返回”（能粘贴链接、有图片时：全部清掉重来）或“取消”（关掉）；右边蓝色“保存”
+ *   底部（上 16 下 12、两端对齐、间距 8）：左边灰色“返回”（能粘贴链接、有图片时：全部清掉重来）或“取消”（关掉）；右边“保存”（文字按钮，500，不能点时淡灰）
  * 保存（963369 r 的保存按钮）：
  *   要存成表情（浮层；或者勾了“添加到表情符号库”）：名字必填、合法、不重名，才能点；图片存到本地 → 记进表情库 →
  *     提示“已将 {name} 添加到表情符号库” → onDone(表情字符串)；失败提示“无法保存此表情符号。请重试。”
@@ -75,8 +76,8 @@ export function createUploadForm({ showTitle = false, largeEmoji = false, allowU
     `<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>` +
+    `<div class="nmm-upload-footer"><div role="button" tabindex="0" class="ge-btn nmm-upload-secondary" data-act="secondary"></div>` +
+      `<div role="button" tabindex="0" class="ge-btn nmm-upload-save" data-primary 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');

package/browser/editor/page/fills.mjs

@@ -4,17 +4,19 @@ 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/) and the blocks of the 批注 whose card shows (annotate/). There is one fill per
+// 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. */
-  .ge-halo, .ge-note-halo { position: absolute; left: 0; top: 0; z-index: ${IN_LAYER.halo}; pointer-events: none; }
+  /* 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); }
 `;
 
 /**