@heycys/gallery 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,164 @@
+// 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.
+/* 图标选择器（Notion 485357 MediaPicker，页签由 569553 m 给：表情符号 / 图标 / 上传；尺寸、颜色是线上实测）：标注图标、选项卡图标、页面图标共用。
+ *   宽 408（569553 popupWidth）；“表情符号”“图标”页签高 390（tabHeight），“上传”页签没给高度，随内容。
+ *   页签栏（eU）：高 40、左右 8、底下一条 --ca-borSecTra；“表情符号 / 图标 / 上传”，选中的下面 2px 线；右边“移除”（灰色文字按钮）。
+ *     打开时当前图标是 Notion 图标就在“图标”页签，否则在“表情符号”（569553 d；Notion 的当前页签只记在内存里）
+ *   筛选行（ec）：只有“表情符号”“图标”页签有。上 4 下 10；里面左右 8、间距 8：输入框（放大镜、“筛选…”、有字时的清除按钮）
+ *     + “随机”（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 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>` +
+        `<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', 14)}</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,2 @@
+// 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; }";

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

@@ -0,0 +1,202 @@
+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 (Notion's, its tokens in light and dark). 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.
+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 picker's styles (notion-lite's media-picker.css, popup.css), 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; }
+    ${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,
+  });
+}

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

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