@heycys/gallery 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,31 @@
+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"/>'),
+  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}" `);
+}

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

@@ -0,0 +1,166 @@
+// 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）：上下 6、左右 8、底下一条 --ge-line；“表情符号 / 图标 / 上传”是文字页签，当前的一块灰底（没有下划线）；右边“移除”（灰色文字按钮）。
+ *     打开时当前图标是 Notion 图标就在“图标”页签，否则在“表情符号”（569553 d；Notion 的当前页签只记在内存里）
+ *   筛选行（ec）：只有“表情符号”“图标”页签有。8 12 6：输入框（放大镜、“筛选…”、有字时的清除按钮；聚焦时灰色内框）
+ *     + “随机”（28×28，无框）+ 页签自己的按钮（表情：选肤色；图标：选图标颜色），两个页签共用同一个筛选词（onFilterChange 同时改两边）
+ *   “上传”页签（569553 custom → 963369，./upload.js）：上传 / 拖进来 / 粘贴一张图片或图片链接，“保存”就用它当图标；
+ *     勾上“添加到表情符号库”再起个名字，就同时存成自定义表情（以后在“表情符号”页签的“自定义”里）
+ *   随机：选上但不关菜单（keepVisible）
+ *   键盘：焦点一直在输入框，方向键在格子间移动，回车选中，Esc 先关小浮层、再关菜单；“上传”页签里 Esc 关菜单，Ctrl+V 粘贴图片 / 链接
+ *   上传、存自定义表情：一开始就关菜单（569553 p：onStart 关掉选择器），存好以后再换图标
+ * openMediaPicker({ origin, value, isCallout, onPick(value | null, { keepVisible }) })——null 是“移除”。
+ * 依赖：ui（popup、icons、tooltip）、src/shared/emoji/icon-value（图标的值）、./emoji-tab、./icon-tab、./upload
+ */
+import { openPopup, closePopup } from './support.mjs';
+import { icon } from './support.mjs';
+import { hoverTooltip, hideTooltip } from './support.mjs';
+import { iconKind } from '../../../shared/emoji/icon-value.mjs';
+import { createEmojiTab } from './emoji-tab.mjs';
+import { createIconTab } from './icon-tab.mjs';
+import { createUploadForm } from './upload.mjs';
+import { t } from "../../../shared/i18n/index.mjs";
+
+const WIDTH = 408, TAB_HEIGHT = 390;
+let current = null;
+
+/* “上传”页签：963369 showTitle false、largeEmoji、allowUrlPaste、confirmToAdd */
+function createUploadTab(env) {
+  const form = createUploadForm({
+    largeEmoji: true, allowUrlPaste: true, confirmToAdd: true,
+    onCancel: env.close,
+    onStart: env.close,
+    onDone: env.uploaded,
+  });
+  return {
+    el: form.el, right: null, noFilter: true,
+    load: () => Promise.resolve(),
+    render() {}, move() {}, activateFocused() {}, random() {}, destroy() {},
+    focus: form.focus,
+    paste: form.paste,
+  };
+}
+
+export function openMediaPicker({ origin, value, isCallout = false, onPick, only = null }) {
+  if (current && !current.popup.closed) closePopup(current.popup);
+  const el = document.createElement('div');
+  el.className = 'notion-media-menu';
+  el.tabIndex = -1;
+  el.style.width = `${WIDTH}px`;
+  el.innerHTML =
+    `<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>` +
+          `<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>` +
+      `<div class="nmm-filter-row"><div class="nmm-filter">` +
+        `<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', 16)}</div><div class="nmm-tab-button"></div></div>` +
+      `</div></div>` +
+    `</div>` +
+    `<div class="nmm-content"></div>`;
+
+  const input = el.querySelector('input'), clear = el.querySelector('.nmm-clear'), filterRow = el.querySelector('.nmm-filter-row');
+  const content = el.querySelector('.nmm-content'), tabButton = el.querySelector('.nmm-tab-button'), tabLeft = el.querySelector('.nmm-tab-left');
+  let sub = null;
+
+  const close = () => { if (!popup.closed) closePopup(popup); };
+  const env = {
+    isCallout,
+    filter: () => input.value,
+    close,
+    submit(v) { close(); onPick(v, {}); },
+    keepOpenPick(v) { onPick(v, { keepVisible: true }); },
+    /* 上传完、存好自定义表情（569553 u：关掉选择器，换图标） */
+    uploaded(v) { close(); onPick(v, {}); },
+    refocus() { if (!popup.closed) (active.noFilter ? active.focus() : input.focus({ preventScroll: true })); },
+    /* 菜单上面的一层小浮层（肤色变体、选肤色、图标颜色、选颜色菜单）；onKey 接管输入框的按键 */
+    openSub(anchor, node, onKey, { gap = 4 } = {}) {
+      env.closeSub();
+      node.addEventListener('mousedown', e => e.preventDefault());
+      sub = { popup: openPopup({ origin: anchor.getBoundingClientRect(), placement: 'bottom', align: 'start', gap, content: node, onClose: () => { sub = null; } }), onKey };
+    },
+    closeSub() {
+      if (sub && !sub.popup.closed) closePopup(sub.popup);
+      sub = null;
+    },
+  };
+  const tabs = { emoji: createEmojiTab(env), icon: createIconTab(env), upload: createUploadTab(env) };
+  // Some tabs only (`only`: a Sheet tab's icon is an emoji): the others go from the tab bar.
+  if (only) el.querySelectorAll('.nmm-tab-wrap').forEach(wrap => { if (!only.includes(wrap.querySelector('[data-tab]').dataset.tab)) wrap.remove(); });
+  let active = null;
+
+  function show(name) {
+    env.closeSub();
+    active = tabs[name];
+    for (const tab of el.querySelectorAll('.nmm-tab[data-tab]')) {
+      const on = tab.dataset.tab === name;
+      tab.classList.toggle('selected', on);
+      tab.setAttribute('aria-selected', String(on));
+      tab.parentElement.classList.toggle('selected', on);
+    }
+    filterRow.hidden = !!active.noFilter;          // 485357 ec：只有表情 / 图标页签有筛选行
+    el.style.height = active.noFilter ? '' : `${TAB_HEIGHT}px`;
+    content.replaceChildren(active.el);
+    tabButton.replaceChildren(...(active.right ? [active.right] : []));
+    tabLeft.replaceChildren(...(active.left ? [active.left] : [])); // the 图标 tab's set (icon-tab.mjs)
+    hideTooltip();
+    active.render(input.value);
+    active.load().then(() => { if (!popup.closed && active === tabs[name]) active.render(input.value); });
+    if (popup) popup.place();
+    if (active.noFilter) active.focus(); else input.focus({ preventScroll: true });
+  }
+
+  const onInput = () => { clear.hidden = !input.value; active.render(input.value); };
+  input.addEventListener('input', onInput);
+  input.addEventListener('keydown', e => {
+    if (sub) return sub.onKey(e);
+    if (e.isComposing) return;
+    if (e.key.startsWith('Arrow')) { e.preventDefault(); active.move(e.key); }
+    else if (e.key === 'Enter') { e.preventDefault(); active.activateFocused(); }
+    else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(); }
+  });
+  /* 上传页签里（焦点不在筛选框）：Esc 关菜单 */
+  el.addEventListener('keydown', e => {
+    if (e.target === input || e.key !== 'Escape' || e.isComposing) return;
+    e.preventDefault(); e.stopPropagation(); close();
+  });
+  /* 上传页签：Ctrl+V 粘贴图片 / 图片链接（963369 onPaste） */
+  const onPaste = e => { if (active.paste && !popup.closed && !sub) active.paste(e); };
+  document.addEventListener('paste', onPaste, true);
+  // 焦点留在输入框（上传页签里的输入框、按钮照常）
+  el.addEventListener('mousedown', e => { if (e.target !== input && !e.target.closest('.nmm-upload input')) e.preventDefault(); });
+  el.addEventListener('click', e => {
+    const tab = e.target.closest('.nmm-tab[data-tab]');
+    if (tab && !tab.classList.contains('selected')) return show(tab.dataset.tab);
+    const act = e.target.closest('[data-act]')?.dataset.act;
+    if (act === 'remove') { close(); onPick(null, {}); }
+    else if (act === 'clear') { input.value = ''; onInput(); input.focus(); }
+    else if (act === 'random') active.random();
+  });
+  hoverTooltip(el.querySelector('.nmm-random'), t("随机"), { placement: 'bottom' });
+
+  let popup = null;
+  popup = openPopup({
+    origin, placement: 'bottom', align: 'start', gap: 4, content: el,
+    onClose: () => {
+      env.closeSub(); hideTooltip();
+      document.removeEventListener('paste', onPaste, true);
+      for (const tab of Object.values(tabs)) tab.destroy();
+      current = null;
+    },
+  });
+  current = { popup };
+  show(iconKind(value) === 'glyph' ? 'icon' : 'emoji');
+  return popup;
+}

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

@@ -0,0 +1,161 @@
+// 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, a 1px --ge-edge inside, the plus
+   --ge-ico3); with no result, a button (28 high, a 1px --ge-edge inside, 13px / 500) */
+.nmm-cell.nmm-add-cell { width: 26px; height: 26px; margin: 3px; box-sizing: border-box; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ge-edge); --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; box-shadow: inset 0 0 0 1px var(--ge-edge); 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;
+   保存 a text button (--ge-tx, 500, --ge-hover under the pointer, --ge-tx3 while it cannot be clicked), 取消 /
+   返回 --ge-tx2; 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 { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none; }
+.nmm-upload-secondary { color: var(--ge-tx2); }
+.nmm-upload-secondary:hover { background: var(--ge-hover); color: var(--ge-tx); }
+.nmm-upload-save { color: var(--ge-tx); font-weight: 500; }
+.nmm-upload-save:not(.disabled):hover { background: var(--ge-hover); }
+.nmm-upload-save.disabled { color: var(--ge-tx3); cursor: default; }
+.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

@@ -0,0 +1,204 @@
+import { Z } from "../../../shared/layers.mjs";
+import { escapeMarkup } from "../../../shared/escape.mjs";
+import { icon } from "./icons.mjs";
+import { setEmojiLibraryStorage } from "../../../shared/emoji/custom.mjs";
+import { UPLOAD_LIMITS, sizeLimit } from "../../../shared/media.mjs";
+import { blobBase64, failure, postAnswer } from "../post.mjs";
+import { hideTooltip as hideBubble, showTooltipAt } from "../tooltip.mjs";
+import { placeBox } from "../placement.mjs";
+import { addStyle, mount } from "../ui.mjs";
+import { PICKER_CSS } from "./styles.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// What notion-lite's icon picker (its ui/media-picker/, taken over as they are: index, emoji-tab,
+// icon-tab, upload, grid) stands on, made here: its popups (ui/popup.js: placed by an origin, a
+// side and an alignment, flipped where they do not fit, kept 12px inside the window, fading in;
+// 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. 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 (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));
+  --ca-bluBacSecTra: light-dark(rgba(0,124,215,.094), rgba(67,155,255,.24));
+  --ca-borPriTra: light-dark(rgba(28,19,1,.11), rgba(255,255,235,.1));
+  --ca-borSecTra: light-dark(rgba(42,28,0,.07), rgba(255,255,243,.082));
+  --ca-borStrTra: light-dark(rgba(27,21,0,.19), rgba(255,252,235,.306));
+  --ca-graBacIntTra: light-dark(rgba(33,27,23,.05), rgba(255,255,255,.055));
+  --ca-graBacPriTra: light-dark(rgba(66,35,3,.03), rgba(252,252,252,.03));
+  --ca-swiTogDesTraBgVar: light-dark(rgba(206,205,202,.3), rgba(202,204,206,.3));
+  --c-bacAccPri: #2c2c2b; --c-bluBacAccPri: #2783de; --c-graTexAccPri: #8e8b86; --c-redTexAccPri: #e56458;
+  --c-texInvPri: #f0efed; --c-texInvSec: #ada9a3;
+  --c-borPri: light-dark(#e6e5e3, #383836); --c-borSec: light-dark(#f0efed, #2c2c2b);
+  --c-butBluFocRin: light-dark(0px 0px 0px 2px #f8f8f7, 0px 0px 0px 2px #191919), 0px 0px 0px 4px #2383e2;
+  --c-icoPri: light-dark(#383836, #e6e5e3); --c-icoSec: light-dark(#8e8b86, #ada9a3); --c-icoTer: light-dark(#ada9a3, #7d7a75);
+  --c-inpBluFocRin: 0px 0px 0px 1px #2383e2 inset, 0px 0px 0px 1px #2383e2;
+  --c-popBac: light-dark(#fff, #252525); --c-priBla: light-dark(#000, #fff); --c-whi: light-dark(#fff, #000);
+  --c-shaOutLg: 0px 20px 24px 0px light-dark(rgba(25,25,25,.05), rgba(25,25,25,.2)), 0px 5px 8px 0px light-dark(rgba(25,25,25,.027), rgba(25,25,25,.118)), 0px 0px 0px 1px light-dark(rgba(42,28,0,.07), #383836);
+  --c-texPri: light-dark(#2c2c2b, #f0efed); --c-texSec: light-dark(#7d7a75, #ada9a3); --c-texTer: light-dark(#a19e99, #7d7a75);
+`;
+const FONT = `ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif`;
+
+/** 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(--ge-edge) transparent; }
+    ${PICKER_CSS}
+  `);
+}
+
+// ---------- popups ----------
+
+const MARGIN = 12;
+const stack = [];
+let layer = null;
+
+function ensureLayer() {
+  style();
+  if (!layer?.isConnected) {
+    layer = document.createElement("div");
+    layer.className = "notion-popup-layer";
+    mount(layer);
+  }
+  return layer;
+}
+document.addEventListener("mousedown", (event) => {
+  if (!stack.length) return;
+  const inside = stack.findLastIndex((popup) => popup.el.contains(event.target));
+  if (inside === stack.length - 1) return;
+  closePopup(stack[inside + 1]);
+}, true);
+
+/** Whether a popup is open (a press outside it closes it). */
+export const popupOpen = () => stack.length > 0;
+
+/** A popup holding `content`: { el, closed, close(), place(origin) }. */
+export function openPopup({ origin, placement = "bottom", align = "start", gap = 0, content, onClose, className = "" }) {
+  const el = document.createElement("div");
+  el.className = "notion-popup" + (className ? ` ${className}` : "");
+  el.append(content);
+  ensureLayer().append(el);
+  const popup = { el, closed: false, close: () => closePopup(popup), place: (next) => place(popup, next || popup.origin), origin, placement, align, gap, onClose };
+  stack.push(popup);
+  place(popup, origin);
+  requestAnimationFrame(() => el.classList.add("shown"));
+  return popup;
+}
+
+export function closePopup(popup) {
+  const at = stack.indexOf(popup);
+  if (at < 0) return;
+  for (const each of stack.splice(at).reverse()) { // those above it go with it
+    each.closed = true;
+    each.el.remove();
+    each.onClose?.();
+  }
+}
+
+function place(popup, origin) {
+  popup.origin = origin;
+  const { el, placement, align, gap } = popup;
+  const { left, top } = placeBox(origin, { width: el.offsetWidth, height: el.offsetHeight }, { placement, align, gap, margin: MARGIN });
+  el.style.top = `${top}px`;
+  el.style.left = `${left}px`;
+}
+
+// ---------- the tooltip ----------
+
+// The editor's own (tooltip.mjs): the picker only decides when it shows (a pause of 150ms, never
+// while the keys move) and where (below, left edge or centered).
+let timer = 0;
+let keyboardMode = false;
+addEventListener("keydown", () => { keyboardMode = true; }, true);
+addEventListener("mousemove", () => { keyboardMode = false; }, true);
+
+export function showTooltip(origin, text, { placement = "bottom", align = "center" } = {}) {
+  showTooltipAt(origin, text, { placement, align });
+}
+export const isKeyboardMode = () => keyboardMode;
+export function hideTooltip() {
+  clearTimeout(timer);
+  hideBubble();
+}
+export function hoverTooltip(target, content, { placement = "top", align, delay = 150 } = {}) {
+  target.addEventListener("mouseenter", () => {
+    clearTimeout(timer);
+    if (keyboardMode) return;
+    timer = setTimeout(() => {
+      if (target.isConnected) showTooltip(target.getBoundingClientRect(), typeof content === "function" ? content() : content, { placement, align });
+    }, delay);
+  });
+  target.addEventListener("mouseleave", hideTooltip);
+  target.addEventListener("mousedown", hideTooltip);
+}
+
+// ---------- the snackbar, the storage ----------
+
+let say = (text) => console.info(text);
+/** The editor's status line, for what the picker tells the reader. */
+export const showSnackbar = (text) => say(text);
+
+const MAX_SIDE = 512; // px: an icon shows at 56; a larger image is made this size before it is sent
+const MAX_BYTES = UPLOAD_LIMITS.icon; // what the server keeps of an icon's image (shared/media.mjs)
+
+// An image as the server takes it: a raster image larger than MAX_SIDE made that size (PNG), others as they are.
+async function shrink(blob) {
+  if (!/^image\/(png|jpeg|webp|avif)$/.test(blob.type)) return blob;
+  const bitmap = await createImageBitmap(blob).catch(() => null);
+  if (!bitmap || Math.max(bitmap.width, bitmap.height) <= MAX_SIDE) return blob;
+  const scale = MAX_SIDE / Math.max(bitmap.width, bitmap.height);
+  const canvas = new OffscreenCanvas(Math.round(bitmap.width * scale), Math.round(bitmap.height * scale));
+  canvas.getContext("2d").drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+  return canvas.convertToBlob({ type: "image/png" });
+}
+
+let server = null; // { slug, token }
+async function post(route, body) {
+  const answer = await postAnswer(`/__gallery/edit/${route}`, server.token, { slug: server.slug, ...body });
+  if (!answer.ok) throw new Error(failure(answer, t("请求失败")));
+  return answer;
+}
+
+/** Where uploads go: the report's own folder (assets/), and the workspace's emoji library. */
+export const uiStorage = {
+  /** An image the reader chose: stored in the report's folder; its path there (assets/<file>). */
+  async saveFile(blob, name) {
+    const image = await shrink(blob);
+    if (image.size > MAX_BYTES) throw new Error(t("图片太大（最多 {0}）", sizeLimit("icon")));
+    return (await post("upload", { name, type: image.type, data: await blobBase64(image) })).path;
+  },
+  /** An image from a link: downloaded by the server into the report's folder; its path, or null. */
+  async importImage(url, name) {
+    try {
+      return (await post("upload", { name, url })).path;
+    } catch {
+      return null;
+    }
+  },
+};
+
+/**
+ * The page's: `slug` and `token` (the edit service's), and `notify(text)`, the status line. The
+ * emoji library answers through the same server (custom.mjs).
+ */
+export function connectPicker({ slug, token, notify }) {
+  server = { slug, token };
+  say = notify;
+  setEmojiLibraryStorage({
+    loadEmojiLibrary: () => fetch(`/__gallery/edit/emoji-library`).then((response) => response.json()).then((answer) => answer.list ?? []).catch(() => []),
+    addEmoji: async ({ name, url }) => (await post("emoji-library", { name, url })).entry,
+  });
+}