@heycys/gallery 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,278 @@
+// Taken over from notion-lite (its src/ui/media-picker/emoji-tab.js), as it is: only what it imports is
+// Gallery's own (support.mjs, src/shared/emoji/). Its notes, below, are notion-lite's.
+/* “表情符号”页签（943244 EmojiPicker、885963 选肤色、625478 格子和肤色变体；尺寸是线上实测）。
+ *   分组：最近（筛选词为空时）、标注（从标注打开时，固定 26 个）、人物、动物与自然、食物与饮料、活动、旅行与地点、物品、符号、旗帜、
+ *     自定义（本机的自定义表情，按名字排；第一个格子是“添加表情符号”的圆形加号）
+ *   每行 (408 − 24) / 32 = 12 个；标题 12px / 500、上 6+6 下 8；格子 32×32、圆角 4、表情 24（../emoji/emoji.js）
+ *   筛选（943244 W）：按关键词打分——筛选词里有这个表情 > “:筛选词” > 关键词等于 > 关键词开头 > 多个词都对上 > 包含，常用的加分；
+ *     自定义表情的关键词是它的名字（871871 g）。结果（连同加号）超过 12 × 12 / 2 = 72 个时仍按分组显示，否则拍平成一组按分数排
+ *     （加号排最后）；只剩加号时显示“无结果”和“添加表情符号”按钮
+ *   底部分类栏（943244 y）：上边一条 --c-borSec，内边距 8 12 10；按钮 32×32、图标 22；当前滚到的分组按钮有底色；
+ *     没有表情的分组按钮半透明不可点（“自定义”“添加”总能点）；悬停提示分组名（左对齐、在下方）；点了把那一组滚到顶上，
+ *     “添加”打开“添加表情符号”浮层。筛选结果拍平时不显示
+ *   最近（943244 F）：常用表情按次数、时间排，取 2 行；选中一个表情记一次（../emoji/data.js recordEmojiUse）
+ *   格子（625478）：没设过肤色时点有肤色变体的表情，先弹出一排变体（选了正好 5 个变体的就记下肤色）；
+ *     自定义表情（758388）24×24、contain，提示是它的名字
+ *   右边按钮（885963）：选肤色，28×28、字号 20 的“✋”（设过就是那个肤色的手），点开一排六只手
+ *   随机（859941）：活动 / 物品 / 旅行与地点里随便一个，选上但不关菜单
+ *   添加表情符号（943244 Y → 757573 → 749527 tM）：在加号 / 底栏按钮 / 无结果按钮下面打开 ./upload.js 的浮层；
+ *     存好以后交给 env.uploaded（选上这个表情、关菜单）
+ * 和 Notion 的差别：不是虚拟列表，全部画出来，图片滚到附近才加载。自定义表情是本机的（../emoji/custom.js），总能添加。
+ * createEmojiTab(env) → { el, right, load(), render(filter), move(key), activateFocused(), random(), destroy() }
+ *   env：{ isCallout, submit(value), keepOpenPick(value), uploaded(value), refocus(), openSub(anchor, el, onKey), closeSub() }
+ * 依赖：lib/dom、ui（icons、tooltip、popup）、ui/emoji（data、emoji、custom）、./grid、./upload
+ */
+import { esc } from './support.mjs';
+import { icon } from './support.mjs';
+import { hoverTooltip, hideTooltip } from './support.mjs';
+import { openPopup, closePopup } from './support.mjs';
+import {
+  loadEmojiData, emojiDataLoaded, emojiInfo, emojisInCategory, emojiName, emojiVariations, normalizeFilter, randomEmoji,
+  getSkinTone, setSkinTone, withSkinTone, SKIN_TONE_HANDS, SKIN_TONE_VARIATIONS, recordEmojiUse, recentEmojis, frecencyBoost,
+} from '../../../shared/emoji/data.mjs';
+import { emojiHTML } from '../../../shared/emoji/emoji.mjs';
+import { loadCustomEmojis, customEmojiStrings, customEmojiOf, customEmojiKeywords, isCustomEmojiString } from '../../../shared/emoji/custom.mjs';
+import { createGridFocus } from './grid.mjs';
+import { createUploadForm } from './upload.mjs';
+import { t } from "../../../shared/i18n/index.mjs";
+
+export const PER_ROW = 12;                                     // 103955 so：(408 − 24) / 32
+const SHOW_CATEGORIES_THRESHOLD = Math.floor(PER_ROW * 12 / 2);   // 943244：w2 × uu() / 2 = 72
+const ADD = '__ADD_CUSTOM_EMOJI__';                             // 943244 v
+const ADD_LABEL = t("添加表情符号");                                // emojiPicker.addCustomEmoji
+
+/* 943244 k */
+const CATEGORIES = [
+  { id: 'recent', title: t("最近"), icon: 'clock' },
+  { id: 'callout', title: t("标注") },
+  { id: 'people', category: 'People & Body', title: t("人物"), icon: 'emojiFace' },
+  { id: 'nature', category: 'Animals & Nature', title: t("动物与自然"), icon: 'leaf' },
+  { id: 'food', category: 'Food & Drink', title: t("食物与饮料"), icon: 'carrot' },
+  { id: 'activities', category: 'Activities', title: t("活动"), icon: 'soccerBall' },
+  { id: 'travel', category: 'Travel & Places', title: t("旅行与地点"), icon: 'airplane' },
+  { id: 'objects', category: 'Objects', title: t("物品"), icon: 'lightBulbBright' },
+  { id: 'symbols', category: 'Symbols', title: t("符号"), icon: 'checkmarkCircle' },
+  { id: 'flags', category: 'Flags', title: t("旗帜"), icon: 'flag' },
+  { id: 'custom', title: t("自定义"), icon: 'squareGrid2X2' },
+  { id: 'add', title: ADD_LABEL, icon: 'plusCircle' },
+];
+const CATEGORY = Object.fromEntries(CATEGORIES.map(c => [c.id, c]));
+/* 943244 M：标注专用的一组 */
+const CALLOUT_EMOJIS = ['💡', '👉', '☝', '👌', '🔑', '🚧', '⚠️', '🔥', '📌', '✂️', '❓', '🚫', '⛔', '⏰', '☎️', '🚨', '♻️', '✅', '🔒', '📎', '📖', '🗣', '➡️', '📢', '🛠', '⚙'];
+
+/* 943244 W 里的打分（rank）；没对上返回 undefined */
+function rank(emoji, filter, splitFilter) {
+  if (filter === '') return 100;
+  const info = emojiInfo(emoji);
+  let words = info?.keywords || [];
+  if (!info && isCustomEmojiString(emoji)) {
+    const custom = customEmojiOf(emoji);
+    if (!custom) return;
+    words = customEmojiKeywords(custom.name);
+  }
+  const kw = filter.length < 3 || filter.includes(' ') ? words : words.map(w => w.replaceAll(' ', ''));
+  const boost = frecencyBoost(emoji);
+  const inFilter = filter.indexOf(emoji);
+  if (inFilter !== -1) return 100 - inFilter + boost;
+  const colon = kw.findIndex(w => w === `:${filter}`);
+  if (colon !== -1) return 100 - colon + boost;
+  const exact = kw.findIndex(w => w === filter);
+  if (exact !== -1) return (10 - exact) * 10 + boost;
+  const prefix = kw.findIndex(w => w.startsWith(filter));
+  if (prefix !== -1) return 10 - prefix + boost;
+  if (splitFilter.length > 1) {
+    const unique = info?.uniqueKeywords || [];
+    if (splitFilter.every(part => unique.find(w => w.startsWith(part)))) return splitFilter.length + boost;
+  }
+  if (kw.some(w => w.includes(filter))) return 1 + boost;
+}
+
+/* 943244 W：分好组、切成一行行。返回 { categorized, rows: [{ id, title?, emojis }] }；只剩加号时 rows 是 [{ emojis: [ADD] }] */
+function buildRows(rawFilter, isCallout, recent) {
+  const cats = [!rawFilter.trim() ? CATEGORY.recent : null, isCallout ? CATEGORY.callout : null, ...CATEGORIES.slice(2, 10), CATEGORY.custom].filter(Boolean);
+  const filter = normalizeFilter(rawFilter) ?? '';
+  const split = rawFilter.split(' ').filter(Boolean);
+  const rows = [];
+  let total = 0;
+  for (const cat of cats) {
+    const source = cat.id === 'recent' ? recent : cat.id === 'callout' ? CALLOUT_EMOJIS : cat.id === 'custom' ? customEmojiStrings() : emojisInCategory(cat.category);
+    const ranked = source.map(emoji => ({ emoji, rank: rank(emoji, filter, split) })).filter(x => x.rank !== undefined)
+      .sort((a, b) => b.rank - a.rank)
+      .map(x => ({ rank: x.rank, emoji: withSkinTone(x.emoji) }));
+    if (cat.id === 'custom') ranked.unshift({ rank: -Infinity, emoji: ADD });   // 943244：能加自定义表情时，加号排在“自定义”最前
+    for (let i = 0; i < ranked.length; i += PER_ROW) rows.push({ id: cat.id, title: i === 0 ? cat.title : undefined, emojis: ranked.slice(i, i + PER_ROW) });
+    total += ranked.length;
+  }
+  if (rawFilter === '' || total > SHOW_CATEGORIES_THRESHOLD) return { categorized: true, rows: rows.map(r => ({ ...r, emojis: r.emojis.map(x => x.emoji) })) };
+  const flat = [...new Set(rows.flatMap(r => r.emojis).sort((a, b) => b.rank - a.rank).map(x => x.emoji))];
+  const out = [];
+  for (let i = 0; i < flat.length; i += PER_ROW) out.push({ emojis: flat.slice(i, i + PER_ROW) });
+  return { categorized: false, rows: out };
+}
+
+/* 一排表情的小浮层（肤色变体、选肤色；padding 4，横向，←→ / 回车 / Esc） */
+function emojiRow(env, anchor, emojis, initial, onChoose) {
+  const row = document.createElement('div');
+  row.className = 'nmm-variations';
+  row.innerHTML = emojis.map((e, i) => `<div role="gridcell" class="nmm-cell${i === initial ? ' focused' : ''}" data-i="${i}">${emojiHTML(e, { size: 24 })}</div>`).join('');
+  let at = initial;
+  const focusAt = i => { row.children[at]?.classList.remove('focused'); at = i; row.children[at]?.classList.add('focused'); };
+  row.addEventListener('mouseover', e => { const c = e.target.closest('.nmm-cell'); if (c) focusAt(Number(c.dataset.i)); });
+  row.addEventListener('click', e => { const c = e.target.closest('.nmm-cell'); if (c) { env.closeSub(); onChoose(emojis[Number(c.dataset.i)], Number(c.dataset.i)); } });
+  env.openSub(anchor, row, e => {
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') { e.preventDefault(); focusAt(Math.max(0, Math.min(emojis.length - 1, at + (e.key === 'ArrowRight' ? 1 : -1)))); }
+    else if (e.key === 'Enter') { e.preventDefault(); env.closeSub(); onChoose(emojis[at], at); }
+    else if (e.key === 'Escape') { e.preventDefault(); env.closeSub(); }
+  });
+}
+
+/* 749527 tM：“添加表情符号”浮层（在 anchor 下面、左对齐）。存好以后 onDone(表情字符串) */
+export function openCustomEmojiPopup(anchor, { onDone, onClose }) {
+  hideTooltip();
+  const box = document.createElement('div');
+  box.className = 'nmm-custom-emoji-popup';
+  box.setAttribute('role', 'dialog');
+  box.setAttribute('aria-label', t("添加自定义表情符号"));
+  let popup = null;
+  const form = createUploadForm({
+    showTitle: true, largeEmoji: false, allowUrlPaste: false, confirmToAdd: false,
+    onCancel: () => closePopup(popup),
+    onStart: () => closePopup(popup),   // 963369：保存时 757573 L.dismiss()
+    onDone,
+  });
+  box.append(form.el);
+  box.addEventListener('keydown', e => { if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closePopup(popup); } });
+  popup = openPopup({ origin: anchor.getBoundingClientRect(), placement: 'bottom', align: 'start', content: box, onClose });
+  form.focus();
+  return popup;
+}
+
+export function createEmojiTab(env) {
+  const el = document.createElement('div');
+  el.className = 'nmm-body';
+  el.innerHTML = `<div class="nmm-scroller notion-scroller vertical"><div role="grid" class="nmm-grid"></div></div><div class="nmm-categories"></div>`;
+  const grid = el.querySelector('.nmm-grid'), scroller = el.querySelector('.nmm-scroller'), bar = el.querySelector('.nmm-categories');
+  const recent = recentEmojis(PER_ROW);
+  let view = { categorized: true, rows: [] }, lastFilter = '', addPopup = null;
+  const focus = createGridFocus({ scroller, grid, rows: () => view.rows.map(r => r.emojis.length) });
+
+  /* 943244 D：选中一个表情——记常用，交给调用方（关菜单） */
+  const submit = emoji => { recordEmojiUse(emoji); env.submit(emoji); };
+
+  function cellHTML(emoji, r, c) {
+    if (emoji === ADD) {
+      return `<div role="gridcell" class="nmm-cell nmm-add-cell" data-add data-r="${r}" data-c="${c}" aria-label="${ADD_LABEL}">${icon('plusSmall', 16)}</div>`;
+    }
+    if (isCustomEmojiString(emoji)) {
+      const custom = customEmojiOf(emoji);
+      const img = custom ? `<img class="notion-custom-emoji" alt="${esc(custom.name)}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="${esc(custom.url)}" draggable="false" style="width:24px;height:24px">` : '';
+      return `<div role="gridcell" class="nmm-cell" data-emoji="${esc(emoji)}" data-r="${r}" data-c="${c}" aria-label="${esc(custom?.name || '')}">${img}</div>`;
+    }
+    return `<div role="gridcell" class="nmm-cell" data-emoji="${esc(emoji)}" data-r="${r}" data-c="${c}" aria-label="${esc(emojiName(emoji) || '')}">${emojiHTML(emoji, { size: 24, lazy: true })}</div>`;
+  }
+
+  function render(filter) {
+    lastFilter = filter;
+    if (!emojiDataLoaded()) { grid.innerHTML = ''; bar.hidden = true; view = { categorized: true, rows: [] }; return; }   // 数据加载完再画
+    view = buildRows(filter, env.isCallout, recent);
+    const { rows } = view;
+    let html = '';
+    if (!view.categorized && rows.length === 1 && rows[0].emojis.length === 1 && rows[0].emojis[0] === ADD) {
+      // 943244 q：只剩加号——“无结果”和“添加表情符号”按钮（按钮是唯一一个能聚焦的格子）
+      html = `<div class="nmm-empty with-add"><div class="nmm-empty-caption"><div>${t("无结果")}</div></div>` +
+        `<div role="gridcell" class="nmm-cell nmm-add-button" data-add data-r="0" data-c="0">${icon('plusSmall', 16)}${ADD_LABEL}</div></div>`;
+    } else if (!rows.length) html = `<div class="nmm-empty"><div class="nmm-empty-caption"><div>${t("无结果")}</div></div></div>`;
+    else if (!view.categorized) {
+      html = `<div class="nmm-section"><div class="nmm-rows">${rows.map((row, r) => `<div role="row" class="nmm-row">${row.emojis.map((e, c) => cellHTML(e, r, c)).join('')}</div>`).join('')}</div></div>`;
+    } else {
+      rows.forEach((row, r) => {
+        if (row.title) html += `${r ? '</div></div>' : ''}<div class="nmm-section" data-section="${row.id}"><div class="nmm-section-title"><div class="nmm-section-title-text">${esc(row.title)}</div></div><div class="nmm-rows">`;
+        html += `<div role="row" class="nmm-row">${row.emojis.map((e, c) => cellHTML(e, r, c)).join('')}</div>`;
+      });
+      html += '</div></div>';
+    }
+    grid.innerHTML = html;
+    scroller.scrollTop = 0;
+    renderBar();
+    focus.reset(!grid.querySelector('.nmm-empty'));
+    focus.observeImages();
+  }
+
+  /* 943244 y：分类栏（标注不显示；“自定义”“添加”总能点） */
+  function renderBar() {
+    bar.hidden = !view.categorized || !view.rows.length;
+    if (bar.hidden) return;
+    const present = new Set(view.rows.map(r => r.id));
+    const enabled = c => c.id === 'custom' || c.id === 'add' || present.has(c.id);
+    bar.innerHTML = CATEGORIES.filter(c => c.id !== 'callout').map(c =>
+      `<div role="button" tabindex="-1" class="nmm-category${enabled(c) ? '' : ' disabled'}" data-category="${c.id}" aria-label="${t("跳转到类别：{0}", esc(c.category ?? c.id))}" aria-pressed="false"${enabled(c) ? '' : ' aria-disabled="true"'}>${icon(c.icon, 22)}</div>`).join('');
+    for (const b of bar.children) hoverTooltip(b, CATEGORY[b.dataset.category].title, { placement: 'bottom', align: 'start' });
+    updateBarFocus();
+  }
+  /* 当前滚到的分组：第一行露出来的那一组 */
+  function updateBarFocus() {
+    if (bar.hidden) return;
+    const top = scroller.getBoundingClientRect().top;
+    let id = null;
+    for (const s of grid.querySelectorAll('.nmm-section')) if (s.getBoundingClientRect().bottom > top + 1) { id = s.dataset.section; break; }
+    for (const b of bar.children) {
+      const on = b.dataset.category === id;
+      b.classList.toggle('focused', on);
+      b.setAttribute('aria-pressed', String(on));
+    }
+  }
+  scroller.addEventListener('scroll', updateBarFocus, { passive: true });
+  bar.addEventListener('click', e => {
+    const b = e.target.closest('.nmm-category');
+    if (!b || b.classList.contains('disabled')) return;
+    if (b.dataset.category === 'add') return openAdd(b);
+    const s = grid.querySelector(`.nmm-section[data-section="${b.dataset.category}"]`);
+    if (s) scroller.scrollTop = s.offsetTop;
+    updateBarFocus();
+  });
+
+  /* 943244 Y / 无结果按钮 / 底栏“添加”：757573 setState({ open: true, originRect }) */
+  function openAdd(anchor) {
+    env.closeSub();
+    addPopup = openCustomEmojiPopup(anchor, { onDone: value => env.uploaded(value), onClose: () => { addPopup = null; env.refocus(); } });
+  }
+
+  /* 625478：点一个表情。没设过肤色、又有肤色变体时先弹出一排变体 */
+  function activate(cell) {
+    if (cell.hasAttribute('data-add')) return openAdd(cell);
+    const emoji = cell.dataset.emoji;
+    const variations = getSkinTone() === undefined ? emojiVariations(emoji) : [];
+    if (!variations.length) return submit(emoji);
+    emojiRow(env, cell, [emoji, ...variations], 0, (picked, i) => {
+      if (variations.length === SKIN_TONE_VARIATIONS) setSkinTone(i);   // 625478：正好 5 个变体时记下肤色
+      submit(picked);
+    });
+  }
+  grid.addEventListener('click', e => {
+    const cell = e.target.closest('.nmm-cell');
+    if (cell) { hideTooltip(); activate(cell); }
+  });
+
+  /* 885963：选肤色 */
+  const right = document.createElement('div');
+  right.className = 'nmm-skin-wrap';
+  right.innerHTML = `<div role="button" tabindex="0" class="nmm-skin" data-act="skin"></div>`;
+  const skinBtn = right.firstElementChild;
+  const paintSkin = () => { const tone = getSkinTone(); skinBtn.textContent = tone !== undefined ? SKIN_TONE_HANDS[tone] : '✋'; };
+  paintSkin();
+  hoverTooltip(skinBtn, t("选择肤色"), { placement: 'bottom' });
+  skinBtn.addEventListener('click', () => {
+    hideTooltip();
+    emojiRow(env, skinBtn, SKIN_TONE_HANDS, getSkinTone() ?? 0, (_, i) => { setSkinTone(i); paintSkin(); render(lastFilter); });
+  });
+
+  return {
+    el, right,
+    load: () => Promise.all([loadEmojiData(), loadCustomEmojis()]),
+    render,
+    move: key => focus.move(key),
+    activateFocused() { const cell = focus.focused(); if (cell) activate(cell); },
+    random: () => env.keepOpenPick(randomEmoji()),   // 485357：随机的选上但不关菜单，也不记常用
+    destroy: () => { focus.destroy(); if (addPopup && !addPopup.closed) closePopup(addPopup); },
+  };
+}

package/browser/editor/page/emoji-picker/glyph-html.mjs

@@ -0,0 +1,26 @@
+import { glyphSVG } from '../../../shared/emoji/glyphs.mjs';
+import { esc } from './support.mjs';
+import { language } from '../../../shared/i18n/index.mjs';
+
+// What the picker's icon grid draws an icon of the 图标 tab with: its SVG inline (an <img> of a
+// data: URL is a document of its own each: a grid of hundreds held the page up for seconds as a
+// filter was typed), in the theme's colors. The sets' SVGs hold paths only (no ids to make unique).
+
+/** Light or dark: the report's theme, the workbench's, else the system's. */
+export function themeMode() {
+  const root = globalThis.document?.documentElement;
+  const set = root?.getAttribute('data-doc-theme') ?? root?.getAttribute('data-theme');
+  if (set === 'dark' || set === 'light') return set;
+  return globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+/** What an icon is called in the UI's language: its Chinese name, or in English its name in `set` (the one set it has). */
+export const glyphName = (pair, set) => (language === 'en' ? pair.names[set] ?? pair.names.tabler ?? pair.label : pair.label);
+
+/** Pair `pair`'s icon of `set` in `color`, as its SVG inline, `size` px (or as large as where it stands). */
+export function glyphHTML(pair, set, color, { size, mode = themeMode() } = {}) {
+  const side = size ? (typeof size === 'number' ? `${size}px` : size) : '100%';
+  if (!pair) return `<span style="display:inline-block;width:${side};height:${side}"></span>`;
+  return glyphSVG(pair, set, color, mode)
+    .replace('<svg ', `<svg class="ge-glyph" role="img" aria-label="${esc(`${glyphName(pair, set)} ${color}`)}" style="width:${side};height:${side};display:block;flex:none" `);
+}

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

@@ -0,0 +1,79 @@
+// Taken over from notion-lite (its src/ui/media-picker/grid.js), as it is: only what it imports is
+// Gallery's own (support.mjs, src/shared/emoji/). Its notes, below, are notion-lite's.
+/* 表情 / 图标格子共用的焦点（558045 Grid + 625478 / 485357 H 的提示）：
+ *   鼠标悬停和方向键共用一个焦点（有底色）；方向键不绕回，上下按列对齐（短的一行取最后一个）；键盘移动时焦点格有蓝色焦点环、
+ *   滚进视野，并且一直显示名字（forceVisibleState）；鼠标悬停 150ms 后在下方显示名字（closeDelay 0）。
+ *   懒加载：格子里 img[data-src] / img[data-svg]（表情包里的码点）滚到附近才换成 src（../emoji/emoji.js lazySrc；矢量表情一千多张，一次全做太慢）。
+ * 格子是 .nmm-cell[data-r][data-c]，提示文字在 data-tip（没有就用 aria-label）。
+ * createGridFocus({ scroller, grid, rows }) → { reset(focusFirst), move(key), focused(), observeImages(), destroy() }；rows() 返回每行的格子数；
+ *   reset(false) 不聚焦任何格子（943244 无结果时 unsetFocus，方向键再从第一个开始）；没有提示文字的格子不显示提示
+ * 依赖：lib/dom、ui/tooltip、ui/emoji/emoji
+ */
+import { showTooltip, hideTooltip, isKeyboardMode } from './support.mjs';
+import { lazySrc } from '../../../shared/emoji/emoji.mjs';
+
+export function createGridFocus({ scroller, grid, rows }) {
+  let focus = null, tipTimer = 0;
+  const cellAt = f => f && grid.querySelector(`.nmm-cell[data-r="${f.r}"][data-c="${f.c}"]`);
+  const tipOf = cell => cell.dataset.tip ?? cell.getAttribute('aria-label') ?? '';
+
+  function set(f, byKeyboard) {
+    cellAt(focus)?.classList.remove('focused', 'focus-visible');
+    focus = f;
+    const cell = cellAt(f);
+    if (!cell) return;
+    cell.classList.add('focused');
+    if (!byKeyboard) return;
+    cell.classList.add('focus-visible');
+    const cr = cell.getBoundingClientRect(), sr = scroller.getBoundingClientRect();
+    if (cr.top < sr.top) scroller.scrollTop -= sr.top - cr.top;
+    else if (cr.bottom > sr.bottom) scroller.scrollTop += cr.bottom - sr.bottom;
+    if (tipOf(cell)) showTooltip(cell.getBoundingClientRect(), tipOf(cell), { placement: 'bottom' });
+  }
+
+  function move(key) {
+    const lens = rows();
+    if (!lens.length) return;
+    if (!focus) return set({ r: 0, c: 0 }, true);
+    let { r, c } = focus;
+    if (key === 'ArrowRight') { if (c + 1 < lens[r]) c++; else if (r + 1 < lens.length) { r++; c = 0; } }
+    else if (key === 'ArrowLeft') { if (c > 0) c--; else if (r > 0) { r--; c = lens[r] - 1; } }
+    else if (key === 'ArrowDown') { if (r + 1 < lens.length) { r++; c = Math.min(c, lens[r] - 1); } }
+    else if (key === 'ArrowUp') { if (r > 0) { r--; c = Math.min(c, lens[r] - 1); } }
+    set({ r, c }, true);
+  }
+
+  const onOver = e => {
+    const cell = e.target.closest('.nmm-cell');
+    if (!cell || cell === cellAt(focus) && !cell.classList.contains('focus-visible')) return;
+    set({ r: Number(cell.dataset.r), c: Number(cell.dataset.c) }, false);
+    hideTooltip();
+    clearTimeout(tipTimer);
+    if (isKeyboardMode()) return;
+    if (!tipOf(cell)) return;
+    tipTimer = setTimeout(() => { if (cell.isConnected && cellAt(focus) === cell) showTooltip(cell.getBoundingClientRect(), tipOf(cell), { placement: 'bottom' }); }, 150);
+  };
+  const onLeave = () => { clearTimeout(tipTimer); hideTooltip(); };
+  grid.addEventListener('mouseover', onOver);
+  grid.addEventListener('mouseleave', onLeave);
+  scroller.addEventListener('scroll', hideTooltip, { passive: true });
+
+  const io = new IntersectionObserver(entries => {
+    for (const en of entries) {
+      if (!en.isIntersecting) continue;
+      const img = en.target;
+      img.src = lazySrc(img);
+      img.removeAttribute('data-src');
+      img.removeAttribute('data-svg');
+      io.unobserve(img);
+    }
+  }, { root: scroller, rootMargin: '160px 0px' });
+
+  return {
+    reset(focusFirst = true) { set(focusFirst && rows().length ? { r: 0, c: 0 } : null, false); },
+    move,
+    focused: () => cellAt(focus),
+    observeImages() { io.disconnect(); for (const img of grid.querySelectorAll('img[data-src], img[data-svg]')) io.observe(img); },
+    destroy() { clearTimeout(tipTimer); io.disconnect(); },
+  };
+}

package/browser/editor/page/emoji-picker/icon-tab.mjs

@@ -0,0 +1,217 @@
+// The 图标 tab (notion-lite's src/ui/media-picker/icon-tab.js, its grid, colors and sizes as there),
+// its icons Gallery's own: two open-source sets of the same 443 things, MingCute and Tabler, and
+// Tabler's 40 numbers, in 12 categories (src/shared/emoji/glyphs.mjs). Its notes, below, are
+// notion-lite's, the icons' own changed.
+/* “图标”页签（485357 的 Z 列表、H 格子、W / z 颜色变体、q 选颜色按钮、J 存颜色；111012 颜色；尺寸是线上实测）。
+ *   分组：最近（没有筛选词、用过的时候；最多 2 × 12 个）、12 个分类（数字与符号……品牌与娱乐，顺序同 icons.json，像表情符号页签的分组那样
+ *     一组一个标题）；有筛选词时拍平成一组，没有显示“无结果”
+ *     每组外面 4px、标题 12px / 500、行高 14.4、左右 8、上 6 下 8；行左右 12，每行 12 个；没有底部分类栏，列表占满 300 高
+ *     数字与符号里先是成对的图标，再是 Tabler 的 40 个数字：每套（圆形、方形、圆角方形、六边形）0–9 自成一行
+ *   格子：32×32、圆角 8，图片 24（内联 SVG，./glyph-html），悬停 / 键盘提示中文名和这一套里的名字
+ *   哪一套：默认 MingCute；随机按钮左边的切换按钮（写着现在这一套的名字）换成 Tabler，每个格子原地换成同一组的另一个
+ *     （位置、滚动、筛选都不动，方便对比），再点换回来；这个选择存在这个浏览器里
+ *     数字只有 Tabler 有：切换时不动，选中的也总是 Tabler 的值（提示里写明 Tabler）
+ *   颜色（icon_picker_color）：设了就直接用这个颜色插入、格子也显示这个颜色；没设（“每次询问”）时格子显示默认灰色，
+ *     点一下先弹出 10 种颜色（两行各 5 个、行内边距 2、间距 1，贴在格子下面）再选
+ *   右边按钮（q）：选图标颜色——28×28 带边框，圆圈图标描边 / 填充是当前颜色（没设时描边浅灰、填充 --c-icoTer）；
+ *     菜单 134 宽：两行色块（22×22、圆角 6，没设颜色时这两行半透明）+ 分隔线下“每次询问”开关
+ *   随机：随便一组里这一套的图标，颜色用设好的，没设就随便一种；选上但不关菜单
+ * 选中一个图标：记进最近（按组记，两套共用），值是 `/icons/<名字>_<颜色>.svg`（MingCute）或 `/icons/tabler/<名字>_<颜色>.svg`（数字总是这个）。
+ * createIconTab(env) → { el, left, right, load(), render(filter), move(key), activateFocused(), random() }
+ */
+import { esc } from './support.mjs';
+import { hoverTooltip, hideTooltip } from './support.mjs';
+import { glyphHTML, glyphName, themeMode } from './glyph-html.mjs';
+import {
+  loadGlyphs, glyphsLoaded, allPairs, glyphCategories, pairOf, onlySetOf, pairValue, searchGlyphs, randomGlyph, getGlyphSet, setGlyphSet, GLYPH_SET_NAMES,
+  getIconColor, setIconColor, recentGlyphs, recordGlyphUse, ICON_COLOR_NAMES, ICON_COLOR_BY_THEME,
+} from '../../../shared/emoji/glyphs.mjs';
+import { GLYPH_SETS, ICON_COLORS } from '../../../shared/emoji/icon-value.mjs';
+import { createGridFocus } from './grid.mjs';
+import { PER_ROW } from './emoji-tab.mjs';
+import { language, t } from "../../../shared/i18n/index.mjs";
+
+const MAX_RECENT = 2 * 12;   // 485357 w2：2 × uu()
+// The ten colors' names (glyphs.mjs ICON_COLOR_NAMES: its Chinese) in the language in use.
+const COLOR_WORDS = { gray: t("默认"), lightgray: t("浅灰色"), brown: t("棕色"), yellow: t("黄色"), orange: t("橙色"), green: t("绿色"), blue: t("蓝色"), purple: t("紫色"), pink: t("粉色"), red: t("红色") };
+const colorWord = (color) => COLOR_WORDS[color] ?? ICON_COLOR_NAMES[color];
+const theme = themeMode; // the report's theme (glyph-html.mjs)
+const CIRCLE_16 = '<circle cx="8" cy="8" r="6.1"/>';
+const CIRCLE_20 = '<circle cx="10" cy="10" r="7.6"/>';
+// The categories' titles, by their names as icons.json has them (Chinese), in the language in use:
+// each written out for t() (and en.mjs). A category not here shows its name as it is.
+const CATEGORY_TITLES = {
+  数字与符号: t("数字与符号"), 办公与学习: t("办公与学习"), 界面与操作: t("界面与操作"), 箭头与导航: t("箭头与导航"),
+  设计与影音: t("设计与影音"), 设备与科技: t("设备与科技"), 沟通与表情: t("沟通与表情"), 交通与建筑: t("交通与建筑"),
+  自然与天气: t("自然与天气"), 生活与消费: t("生活与消费"), 健康与运动: t("健康与运动"), 品牌与娱乐: t("品牌与娱乐"),
+};
+
+// A section's keys as rows of PER_ROW: a category's pairs, then each series of the icons one set has
+// alone (a name but its last word: circle-number-0…9) on rows of its own, so 0–9 of a shape read as one
+// row; recent icons and a search's, PER_ROW a row as they come.
+function rowsOf(keys, bySeries) {
+  const runs = [];
+  let last = null;
+  for (const key of keys) {
+    const pair = pairOf(key), only = onlySetOf(pair);
+    const series = bySeries && only ? pair.names[only].replace(/-[^-]+$/, '') : '';
+    if (!runs.length || series !== last) runs.push([]);
+    runs[runs.length - 1].push(key);
+    last = series;
+  }
+  return runs.flatMap(run => Array.from({ length: Math.ceil(run.length / PER_ROW) }, (_, i) => run.slice(i * PER_ROW, (i + 1) * PER_ROW)));
+}
+
+export function createIconTab(env) {
+  const el = document.createElement('div');
+  el.className = 'nmm-body';
+  el.innerHTML = `<div class="nmm-scroller nmm-icon-scroller notion-scroller vertical"><div role="grid" class="nmm-grid nmm-icon-grid"></div></div>`;
+  const grid = el.querySelector('.nmm-grid'), scroller = el.querySelector('.nmm-scroller');
+  let rows = [];
+  const focus = createGridFocus({ scroller, grid, rows: () => rows.map(r => r.length) });
+
+  // Its value in the set shown, or in the one set it has (a number: Tabler's, whichever is shown).
+  const insert = (key, color) => { recordGlyphUse(key, MAX_RECENT); env.submit(pairValue(pairOf(key), getGlyphSet(), color)); };
+
+  // A cell's tip: the icon's Chinese name, and its name in the set shown (one only one set has, a
+  // number: that set's, named, in either); in English that name alone.
+  const tip = (pair, set) => {
+    const only = onlySetOf(pair);
+    const own = only ? `${GLYPH_SET_NAMES[only]} ${pair.names[only]}` : pair.names[set];
+    return language === "en" ? own : `${pair.label}（${own}）`;
+  };
+  const cellHTML = (key, color, r, c) => {
+    const pair = pairOf(key), set = getGlyphSet();
+    return `<div role="gridcell" class="nmm-cell nmm-icon-cell" data-icon="${esc(key)}" data-r="${r}" data-c="${c}" aria-label="${esc(`${tip(pair, set)} ${color}`)}" data-tip="${esc(tip(pair, set))}">${glyphHTML(pair, set, color, { size: 24 })}</div>`;
+  };
+
+  function render(filter) {
+    if (!glyphsLoaded()) { grid.innerHTML = ''; rows = []; return; }
+    const color = getIconColor() ?? 'gray';
+    const q = filter.trim() ? filter : '';
+    const sections = q
+      ? [{ keys: searchGlyphs(q) }]
+      : [
+        { id: 'recent', title: t("最近"), keys: recentGlyphs().filter(k => pairOf(k)) },
+        ...glyphCategories().map((name, at) => ({ id: String(at), title: CATEGORY_TITLES[name] ?? name, keys: allPairs().filter(p => p.category === name).map(p => p.key), bySeries: true })),
+      ];
+    rows = [];
+    let html = '';
+    for (const s of sections) {
+      if (!s.keys.length) continue;
+      html += `<div class="nmm-section"${s.id ? ` data-section="${s.id}"` : ''}>${s.title ? `<div class="nmm-section-title"><div class="nmm-section-title-text">${esc(s.title)}</div></div>` : ''}<div class="nmm-rows">`;
+      for (const row of rowsOf(s.keys, s.bySeries)) {
+        const r = rows.length;
+        rows.push(row);
+        html += `<div role="row" class="nmm-row">${row.map((k, c) => cellHTML(k, color, r, c)).join('')}</div>`;
+      }
+      html += '</div></div>';
+    }
+    grid.innerHTML = html || `<div class="nmm-empty"><div class="nmm-empty-caption"><div>${t("无结果")}</div></div></div>`;
+    scroller.scrollTop = 0;
+    focus.reset();
+  }
+
+  // The other set, in place: each cell's icon becomes its pair's of that set; where the grid is
+  // scrolled to, the filter and the key focus stay. An icon one set has alone (a number) stays as it is.
+  function swapSet() {
+    env.closeSub();
+    hideTooltip();
+    setGlyphSet(GLYPH_SETS.find(each => each !== getGlyphSet()));
+    const set = getGlyphSet(), color = getIconColor() ?? 'gray';
+    for (const cell of grid.querySelectorAll('.nmm-cell[data-icon]')) {
+      const pair = pairOf(cell.dataset.icon);
+      if (onlySetOf(pair)) continue;
+      cell.innerHTML = glyphHTML(pair, set, color, { size: 24 });
+      cell.dataset.tip = tip(pair, set);
+      cell.setAttribute('aria-label', `${tip(pair, set)} ${color}`);
+    }
+    paintSet();
+  }
+
+  /* 485357 W / z：没设颜色时先选颜色（两行各 5 个） */
+  function activate(cell) {
+    const key = cell.dataset.icon, color = getIconColor(), pair = pairOf(key), set = getGlyphSet();
+    if (color) return insert(key, color);
+    const pop = document.createElement('div');
+    pop.className = 'nmm-icon-variations';
+    pop.innerHTML = [ICON_COLORS.slice(0, 5), ICON_COLORS.slice(5)].map((row, r) =>
+      `<div role="row" class="nmm-icon-variations-row">${row.map((c, i) => `<div role="gridcell" class="nmm-cell nmm-icon-cell${r === 0 && i === 0 ? ' focused' : ''}" data-color="${c}" data-i="${r * 5 + i}" aria-label="${esc(`${glyphName(pair, set)} ${c}`)}">${glyphHTML(pair, set, c, { size: 24 })}</div>`).join('')}</div>`).join('');
+    const cells = [...pop.querySelectorAll('.nmm-cell')];
+    let at = 0;
+    const focusAt = i => { cells[at]?.classList.remove('focused'); at = Math.max(0, Math.min(cells.length - 1, i)); cells[at].classList.add('focused'); };
+    pop.addEventListener('mouseover', e => { const c = e.target.closest('.nmm-cell'); if (c) focusAt(Number(c.dataset.i)); });
+    pop.addEventListener('click', e => { const c = e.target.closest('.nmm-cell'); if (c) { env.closeSub(); insert(key, c.dataset.color); } });
+    env.openSub(cell, pop, e => {
+      const step = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: 5, ArrowUp: -5 }[e.key];
+      if (step) { e.preventDefault(); focusAt(at + step); }
+      else if (e.key === 'Enter') { e.preventDefault(); env.closeSub(); insert(key, cells[at].dataset.color); }
+      else if (e.key === 'Escape') { e.preventDefault(); env.closeSub(); }
+    }, { gap: 0 });
+  }
+  grid.addEventListener('click', e => {
+    const cell = e.target.closest('.nmm-cell');
+    if (cell) { hideTooltip(); activate(cell); }
+  });
+
+  /* Left of 随机: the set shown, a click the other one (in place). */
+  const left = document.createElement('div');
+  left.className = 'nmm-set-wrap';
+  left.innerHTML = `<div role="button" tabindex="0" class="nmm-set-toggle" data-act="glyph-set"></div>`;
+  const setBtn = left.firstElementChild;
+  function paintSet() {
+    const set = getGlyphSet(), other = GLYPH_SETS.find(each => each !== set);
+    setBtn.textContent = GLYPH_SET_NAMES[set];
+    setBtn.dataset.set = set;
+    setBtn.setAttribute('aria-label', t("图标：{0}，切换为 {1}", GLYPH_SET_NAMES[set], GLYPH_SET_NAMES[other]));
+    setBtn.setAttribute('aria-pressed', String(set !== GLYPH_SETS[0]));
+  }
+  paintSet();
+  hoverTooltip(setBtn, () => t("切换为 {0} 图标", GLYPH_SET_NAMES[GLYPH_SETS.find(each => each !== getGlyphSet())]), { placement: 'bottom' });
+  setBtn.addEventListener('click', swapSet);
+
+  /* 485357 q：选图标颜色 */
+  const right = document.createElement('div');
+  right.className = 'nmm-skin-wrap';
+  right.innerHTML = `<div role="button" tabindex="0" class="nmm-color-button" data-act="icon-color" aria-haspopup="dialog"></div>`;
+  const colorBtn = right.firstElementChild;
+  function paintColor() {
+    const color = getIconColor(), values = ICON_COLOR_BY_THEME[theme()];
+    colorBtn.setAttribute('aria-label', t("选择图标颜色，已选定 {0}", color ? colorWord(color) : t("无颜色")));
+    colorBtn.innerHTML = `<svg viewBox="0 0 16 16" aria-hidden="true" style="width:14px;height:14px;display:block;stroke:${color ? values[color] : values.lightgray};fill:${color ? values[color] : 'var(--c-icoTer)'}">${CIRCLE_16}</svg>`;
+  }
+  paintColor();
+  hoverTooltip(colorBtn, t("选择图标颜色"), { placement: 'bottom' });
+  colorBtn.addEventListener('click', () => { hideTooltip(); openColorMenu(); });
+
+  function openColorMenu() {
+    const color = getIconColor(), values = ICON_COLOR_BY_THEME[theme()];
+    const menu = document.createElement('div');
+    menu.className = 'nmm-color-menu';
+    const swatch = c => `<div role="gridcell" class="nmm-color-swatch${c === color ? ' selected' : ''}" data-color="${c}" aria-label="${t("将颜色设置为{0}", colorWord(c))}">` +
+      `<svg viewBox="0 0 20 20" aria-hidden="true" style="width:20px;height:20px;stroke:${values[c]};fill:${values[c]}">${CIRCLE_20}</svg></div>`;
+    menu.innerHTML =
+      [ICON_COLORS.slice(0, 5), ICON_COLORS.slice(5)].map(row => `<div role="row" class="nmm-color-row${color === undefined ? ' dim' : ''}">${row.map(swatch).join('')}</div>`).join('') +
+      `<div role="row" class="nmm-color-ask"><div role="gridcell" class="nmm-color-ask-item" data-act="ask"><div class="nmm-color-ask-label">${t("每次询问")}</div>` +
+      `<div class="nmm-switch${color === undefined ? ' on' : ''}"><div class="nmm-switch-knob"></div></div></div></div>`;
+    menu.addEventListener('click', e => {
+      const sw = e.target.closest('.nmm-color-swatch');
+      if (sw) { setIconColor(sw.dataset.color); env.closeSub(); paintColor(); render(env.filter()); return; }
+      if (e.target.closest('[data-act="ask"]')) {
+        setIconColor(getIconColor() !== undefined ? undefined : 'gray');   // 485357 q：设了颜色 → 清掉（打开“每次询问”）；没设 → 设成默认灰（关掉）
+        env.closeSub(); paintColor(); render(env.filter());
+      }
+    });
+    env.openSub(colorBtn, menu, e => { if (e.key === 'Escape') { e.preventDefault(); env.closeSub(); } }, { gap: 4 });
+  }
+
+  return {
+    el, left, right,
+    load: loadGlyphs,
+    render,
+    move: key => focus.move(key),
+    activateFocused() { const cell = focus.focused(); if (cell) activate(cell); },
+    random: () => env.keepOpenPick(randomGlyph()),
+    destroy: () => focus.destroy(),
+  };
+}

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

@@ -0,0 +1,32 @@
+import { FACE_ICON, PHOTO_ICON, svg } from "../../components/icons.mjs";
+
+// The icons the icon picker shows: the editor's own line drawings (components/icons.mjs svg) on 20
+// units, no color of their own. icon(name, size) sets the size they show at; the picker's styles
+// (styles.mjs) set their line and color.
+
+const ICONS = {
+  clock: svg('<circle cx="10" cy="10" r="7.25"/><path d="M10 5.75V10l3 1.75"/>'),
+  emojiFace: FACE_ICON,
+  leaf: svg('<path d="M16.25 3.75C9 3.75 4.25 7.4 4.25 12.4c0 1.3.4 2.4 1.1 3.35 6 .2 10.9-3.4 10.9-12z"/><path d="M5.25 15.5 11 9.25"/>'),
+  carrot: svg('<path d="M3.75 16.25 7.9 8.1c.5-1 1.8-1.2 2.6-.4l1.9 1.9c.8.8.6 2.1-.4 2.6z"/><path d="M10.2 7.3C9.9 5.2 10.6 3.6 12.3 2.6M11.3 8.4l3.4-3.4M12.6 9.8c2.1-.4 3.6-.1 4.7 1.2"/>'),
+  soccerBall: svg('<circle cx="10" cy="10" r="7.5"/><path d="m10 7.4 2.5 1.8-.95 2.95h-3.1L7.5 9.2z"/><path d="M10 7.4V2.5M12.5 9.2l4.6-1.5M11.55 12.15l2.9 4M8.45 12.15l-2.9 4M7.5 9.2 2.9 7.7"/>'),
+  airplane: svg('<path d="M17.25 10c0-.9-.8-1.5-1.7-1.5H11L7.5 3.5H5.75l1.75 5H4.25L3 7H2l.75 3L2 13h1l1.25-1.5H7.5l-1.75 5H7.5L11 11.5h4.55c.9 0 1.7-.6 1.7-1.5z"/>'),
+  lightBulbBright: svg('<path d="M10 2.75a5 5 0 0 0-3 9c.6.5 1 1.2 1 2v.5h4v-.5c0-.8.4-1.5 1-2a5 5 0 0 0-3-9z"/><path d="M8.25 16.5h3.5"/>'),
+  checkmarkCircle: svg('<circle cx="10" cy="10" r="7.25"/><path d="m6.75 10.25 2.4 2.4 4.1-4.9"/>'),
+  flag: svg('<path d="M5.25 17V3.75"/><path d="M5.25 4.75c2.5-1.5 4.5 1.5 7 0 1-.6 2-.8 2.75-.7v6.5c-.75-.1-1.75.1-2.75.7-2.5 1.5-4.5-1.5-7 0"/>'),
+  squareGrid2X2: svg('<rect x="3.5" y="3.5" width="5" height="5" rx="1.25"/><rect x="11.5" y="3.5" width="5" height="5" rx="1.25"/><rect x="3.5" y="11.5" width="5" height="5" rx="1.25"/><rect x="11.5" y="11.5" width="5" height="5" rx="1.25"/>'),
+  plusCircle: svg('<circle cx="10" cy="10" r="7.25"/><path d="M10 6.75v6.5M6.75 10h6.5"/>'),
+  xMarkCircle: svg('<circle cx="10" cy="10" r="7.25"/><path d="m7.75 7.75 4.5 4.5m0-4.5-4.5 4.5"/>'),
+  photo: PHOTO_ICON,
+  plusSmall: svg('<path d="M10 4.5v11M4.5 10h11"/>'),
+  magnifyingGlassSmall: svg('<circle cx="9" cy="9" r="5.5"/><path d="m13.25 13.25 3.75 3.75"/>'),
+  // Two lines crossing, each ending in an arrow: 随机.
+  arrowIntersectRightSmall: svg('<path d="M3 6h2.4c2 0 3.3 1.3 4.6 3.1M11.3 10.9c1.3 1.8 2.6 3.1 4.6 3.1H17M14.75 11.75 17 14l-2.25 2.25"/><path d="M3 14h2.4c2 0 3.3-1.3 4.6-3.1M11.3 9.1C12.6 7.3 13.9 6 15.9 6H17M14.75 3.75 17 6l-2.25 2.25"/>'),
+  // A ring with an arrowhead at its open end: 替换.
+  arrowCircleLoopBackwardSmall: svg('<path d="M15.5 10a5.5 5.5 0 1 1-1.9-4.15"/><path d="M15.5 4.25v3.25h-3.25"/>'),
+};
+
+/** The icon `name` as an svg of `size` px (its own size when none). */
+export function icon(name, size = 20) {
+  return ICONS[name].replace("<svg ", `<svg width="${size}" height="${size}" `);
+}