dsh-obsidian-memo 0.16.3

package/src/client/settings/use-settings-draft.js

@@ -0,0 +1,207 @@
+/** 设置草稿及其异步会话；实时数据刷新不覆盖未保存内容。 */
+import { readImageCompression } from '../capture/images.js';
+import { React } from '../react.js';
+import { readAiBudget } from './ai-budget.js';
+import { vaultRelative } from './paths.js';
+import { cloneJson, isAbortError, isAbsolutePath } from '../utils.js';
+
+function useSettingsDraft(options) {
+  const { t, tRef, viewRef, updateView, request, refreshNow, aliveRef, panelRef,
+  pushToast, pushErrorToast, onOpen } = options;
+  const [settingsOpen, setSettingsOpen] = React.useState(false);
+  const [settingsDraft, setSettingsDraft] = React.useState(null);
+  const [picking, setPicking] = React.useState(null);
+  const [savingSettings, setSavingSettings] = React.useState(false);
+  const [settingsTab, setSettingsTab] = React.useState('folders');
+  const baseSettingsRef = React.useRef(null);
+  const settingsSessionRef = React.useRef(0);
+  const draftRef = React.useRef(settingsDraft);
+  draftRef.current = settingsDraft;
+  const session = settingsSessionRef.current;
+
+  function scrollSettingsToBudget() {
+    setTimeout(() => {
+      const panel = panelRef.current;
+      const row = panel && typeof panel.querySelector === 'function' ? panel.querySelector('[data-sn-ai-budget]') : null;
+      if (row && typeof row.scrollIntoView === 'function') row.scrollIntoView({ block: 'center' });
+    }, 60);
+  }
+
+  function openSettings(focus) {
+    // 已经打开：不要重建 draft（会丢掉未保存的编辑）；只按需滚到 AI 预算。
+    if (settingsOpen) {
+      if (focus === 'ai') { setSettingsTab('ai'); scrollSettingsToBudget(); }
+      return;
+    }
+    const settings = viewRef.current.settings;
+    if (!settings) {
+      pushToast({ text: t('settings.notReady'), kind: 'error' });
+      return;
+    }
+    const draft = cloneJson(settings);
+    settingsSessionRef.current += 1;
+    baseSettingsRef.current = cloneJson(settings);
+    setSettingsTab(focus === 'ai' ? 'ai' : 'folders');
+    // 旧 Host 没有 includeSubfolders 时补上当前语义（缺省 = true），保存时整份回传不丢字段。
+    if (draft && typeof draft === 'object' && draft.includeSubfolders === undefined) {
+      draft.includeSubfolders = settings.includeSubfolders !== false;
+    }
+    // 旧 Host / 旧 settings.json 没有 AI 预算字段时补齐（默认高），保证控件可编辑、保存不丢。
+    if (draft && typeof draft === 'object') {
+      const emojis = Array.isArray(draft.emojis) ? draft.emojis : [];
+      draft.emojis = emojis.map((emoji) => Object.assign({}, emoji, { ai: readAiBudget(emoji && emoji.ai) }));
+      draft.projectAi = readAiBudget(draft.projectAi);
+      draft.imageCompression = readImageCompression(draft.imageCompression);
+    }
+    setSettingsDraft(draft);
+    setSettingsOpen(true);
+    onOpen();
+    // 预算提示进来时，滚到第一个「AI 预算」控件，省得用户自己找（focus === 'ai'）。
+    if (focus === 'ai') scrollSettingsToBudget();
+  }
+
+  function closeSettings() {
+    if (savingSettings) return;
+    settingsSessionRef.current += 1;
+    setSettingsOpen(false);
+    setSettingsDraft(null);
+    setPicking(null);
+  }
+
+  function patchDraft(patch) {
+    setSettingsDraft((current) => {
+      if (!current) return current;
+      const next = Object.assign({}, current, patch);
+      const root = next.vaultPath || '';
+      if (patch.vaultPath !== undefined && patch.vaultPath !== current.vaultPath) {
+        ['notesDir', 'projectDir', 'attachmentDir'].forEach((key) => { next[key] = vaultRelative(current.vaultPath, current[key]); });
+        next.archiveTargets = (current.archiveTargets || []).map((item) => ({ ...item, path: vaultRelative(current.vaultPath, item.path) }));
+        next.folderHistory = [];
+      }
+      next.folderHistory = [...new Set([next.notesDir, next.projectDir, next.attachmentDir,
+        ...(next.archiveTargets || []).map((item) => item.path), ...(next.folderHistory || [])]
+        .filter(Boolean).map((path) => vaultRelative(root, path)).filter((path) => !isAbsolutePath(path)))].slice(0, 40);
+      return next;
+    });
+  }
+
+  function patchEmoji(index, patch) {
+    setSettingsDraft((current) => {
+      if (!current || !Array.isArray(current.emojis)) return current;
+      const emojisNext = current.emojis.map((emoji, position) => (
+        position === index ? Object.assign({}, emoji, patch) : emoji
+      ));
+      return Object.assign({}, current, { emojis: emojisNext });
+    });
+  }
+
+  function removeEmoji(index) {
+    setSettingsDraft((current) => {
+      if (!current || !Array.isArray(current.emojis)) return current;
+      return Object.assign({}, current, {
+        emojis: current.emojis.filter((emoji, position) => position !== index),
+      });
+    });
+  }
+
+  function addEmoji() {
+    setSettingsDraft((current) => {
+      if (!current) return current;
+      const emojisNext = Array.isArray(current.emojis) ? current.emojis.slice() : [];
+      if (emojisNext.length >= 12) return current;
+      emojisNext.push({
+        id: 'emoji-' + Date.now().toString(36),
+        emoji: '🔍',
+        label: '',
+        prompt: '',
+        callout: 'quote',
+        ai: readAiBudget(null),
+      });
+      return Object.assign({}, current, { emojis: emojisNext });
+    });
+  }
+
+  function removeArchiveTarget(index) {
+    setSettingsDraft((current) => {
+      if (!current || !Array.isArray(current.archiveTargets)) return current;
+      return Object.assign({}, current, {
+        archiveTargets: current.archiveTargets.filter((target, position) => position !== index),
+      });
+    });
+  }
+
+  /** 系统选择器（pickDirectory）：macOS 原生对话框，可直接选 iCloud。 */
+  function systemPick(field) {
+    if (!settingsDraft || picking !== null) return;
+    const ticket = settingsSessionRef.current;
+    const vaultPath = settingsDraft.vaultPath;
+    const isCurrent = () => aliveRef.current && ticket === settingsSessionRef.current && draftRef.current?.vaultPath === vaultPath;
+    setPicking(field);
+    return request('pickDirectory', field === 'vaultPath' ? {} : { vaultPath })
+      .then((value) => {
+        if (!isCurrent()) return null;
+        if (value && typeof value.path === 'string' && value.path !== '') {
+          patchDraft({ [field]: value.path });
+          return value.path;
+        }
+        return null;
+      })
+      .catch((error) => {
+        if (isCurrent() && !isAbortError(error)) pushErrorToast(error);
+        return null;
+      })
+      .finally(() => {
+        if (aliveRef.current && ticket === settingsSessionRef.current) setPicking(null);
+      });
+  }
+
+  function saveSettingsDraft() {
+    const draftValue = settingsDraft;
+    if (!draftValue || savingSettings) return;
+    if (!Array.isArray(draftValue.emojis) || draftValue.emojis.length === 0) {
+      pushToast({ text: t('settings.needEmoji'), kind: 'error' });
+      return;
+    }
+    setSavingSettings(true);
+    request('saveSettings', { settings: draftValue, expected: baseSettingsRef.current?.configFile?.revision })
+      .then((value) => {
+        if (!aliveRef.current) return;
+        const normalized = value && value.settings ? value.settings : draftValue;
+        const configured = Boolean(normalized.vaultPath && normalized.notesDir);
+        updateView(Object.assign({}, viewRef.current, { settings: normalized, configured: configured }));
+        setSettingsOpen(false);
+        setSettingsDraft(null);
+        pushToast({ text: tRef.current('toast.settingsSaved'), kind: 'success' });
+        if (!configured) {
+          pushToast({ text: tRef.current('toast.settingsUnconfigured'), kind: 'info', timeout: 7000 });
+        }
+        return refreshNow(true);
+      })
+      .catch((error) => {
+        if (aliveRef.current && !isAbortError(error)) pushErrorToast(error);
+      })
+      .then(() => {
+        if (aliveRef.current) setSavingSettings(false);
+      });
+  }
+
+  function acceptConfigSettings(next, action) {
+    if (!aliveRef.current || session !== settingsSessionRef.current) return;
+    const replace = ['load', 'reload', 'relocate'].includes(action);
+    if (replace) {
+      settingsSessionRef.current += 1;
+      baseSettingsRef.current = cloneJson(next);
+      setPicking(null);
+    }
+    updateView(Object.assign({}, viewRef.current, { settings: next, configured: Boolean(next.vaultPath && next.notesDir) }));
+    if (replace) setSettingsDraft(cloneJson(next));
+    else setSettingsDraft((current) => current ? Object.assign({}, current, { configFile: next.configFile }) : current);
+    refreshNow(true);
+  }
+
+  return { settingsOpen, settingsDraft, picking, savingSettings, settingsTab, acceptConfigSettings, openSettings, closeSettings,
+  patchDraft, patchEmoji, removeEmoji, addEmoji, removeArchiveTarget, systemPick,
+  saveSettingsDraft };
+}
+
+export { useSettingsDraft };

package/src/client/styles/base.js

@@ -0,0 +1,63 @@
+/** 界面样式片段：base；组合顺序由 styles/index.js 固定。 */
+import { SERIF, SANS, INK_TITLE, INK_BODY, INK_COMMENT, INK_MUTED } from './tokens.js';
+
+const baseStyles = `
+.SN_panel{--sn-serif:${SERIF};--sn-sans:${SANS};--sn-ink-title:${INK_TITLE};--sn-ink-body:${INK_BODY};--sn-ink-comment:${INK_COMMENT};--sn-ink-muted:${INK_MUTED};--sn-accent:#8B5CF6;position:relative;box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;background:var(--dsw-alias-bg-base,var(--dsw-alias-bg-layer-1,#fff));color:var(--dsw-alias-label-primary,#1f1f1f);font-family:var(--sn-sans);font-size:13px;line-height:1.5}
+.SN_panel *,.SN_panel *::before,.SN_panel *::after,.SN_dragLayer *{box-sizing:border-box}
+.SN_panel button{font-family:inherit}
+.SN_panel button:focus-visible,.SN_panel [tabindex]:focus-visible{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-brand-primary));outline-offset:2px}
+.SN_panel input:focus-visible,.SN_panel textarea:focus-visible,.SN_panel select:focus-visible{outline:none}
+
+/* 0.13.9 桌面版窗口拖拽：整个顶栏空白/标题区可拖动 DSH 窗口（Electron app-region），
+   右侧操作区（按钮/菜单）显式恢复 no-drag，保证点击、弹菜单不被拖拽吃掉。
+   Web GUI 里这些属性会被浏览器忽略，不影响点击。 */
+.SN_head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 20px 12px 22px;border-bottom:.5px solid var(--dsw-alias-border-l1);-webkit-app-region:drag;app-region:drag}
+.SN_headActions,.SN_headActions *{-webkit-app-region:no-drag;app-region:no-drag}
+[data-platform='darwin'] .SN_head{padding-top:calc(var(--dsh-frame-top-clearance,0px) + 10px)}
+.SN_headMain{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
+.SN_titleRow{display:flex;align-items:baseline;gap:10px;min-width:0;overflow:hidden}
+.SN_title{font-family:var(--sn-serif);font-size:18px;font-weight:600;letter-spacing:.02em;line-height:1.35;margin:0;color:var(--dsw-alias-label-primary);white-space:nowrap}
+.SN_count{font-size:11.5px;line-height:1.4;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
+/* 0.13 修正轮：byline 只在顶栏大标题之后（baseline 对齐、不换行、约 11px / opacity .45）。 */
+.SN_headByline{font-family:var(--sn-sans);font-size:11px;font-weight:400;line-height:1.2;letter-spacing:.01em;color:var(--dsw-alias-label-primary);opacity:.45;white-space:nowrap;user-select:none}
+.SN_headPath{font-size:11px;line-height:1.4;color:var(--dsw-alias-label-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
+.SN_headActions{flex:none;display:flex;align-items:center;gap:2px}
+.SN_iconBtn{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--dsw-alias-label-secondary);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:background .12s ease,color .12s ease}
+.SN_iconBtn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05));color:var(--dsw-alias-label-primary)}
+.SN_iconBtn:disabled{opacity:.5;cursor:default}
+.SN_spin{animation:SN_spin 1s linear infinite}
+
+.SN_sortWrap{position:relative;display:inline-flex}
+.SN_sortMenu{position:absolute;top:calc(100% + 6px);right:0;z-index:45;width:214px;max-height:min(70vh,420px);overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:10px;background:var(--dsw-alias-bg-layer-2,#fff);border:.5px solid var(--dsw-alias-border-l1);box-shadow:0 10px 30px rgba(0,0,0,.18);animation:SN_toastIn .14s ease;scrollbar-width:thin}
+.SN_sortItem{display:flex;align-items:center;gap:8px;width:100%;border:0;border-radius:7px;background:transparent;padding:7px 8px;cursor:pointer;font:inherit;font-size:12px;line-height:1.45;color:var(--dsw-alias-label-primary);text-align:left;white-space:nowrap}
+.SN_sortItem:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05))}
+.SN_sortItem[data-active='true']{color:var(--dsw-alias-label-primary);font-weight:500}
+.SN_sortCheck{flex:none;width:14px;font-size:11px;color:var(--dsw-alias-brand-primary)}
+/* 0.13.9 日期档位菜单：四档单选（今天/3天/本周/本月）+ 一条「日期截止按真实时间」勾选项。 */
+.SN_menuDivider{flex:none;height:1px;margin:4px 2px;background:var(--dsw-alias-border-l2,rgba(0,0,0,.1))}
+.SN_dateItem{display:flex;align-items:flex-start;gap:8px;width:100%;border:0;border-radius:7px;background:transparent;padding:7px 8px;cursor:pointer;font:inherit;text-align:left;color:var(--dsw-alias-label-primary)}
+.SN_dateItem:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05))}
+.SN_dateItemMain{display:flex;flex-direction:column;gap:1px;min-width:0}
+.SN_dateItemLabel{font-size:12px;font-weight:500;line-height:1.45;white-space:nowrap}
+.SN_dateItemHint{font-size:10.5px;line-height:1.45;color:var(--dsw-alias-label-tertiary);white-space:normal}
+/* 0.14：日期开关与相邻图标等宽，悬停打开范围菜单。 */
+.SN_dateGroup{display:inline-flex;align-items:center}
+.SN_dateGroup::after{content:'';position:absolute;top:100%;height:8px;left:0;right:0}
+.SN_checkBox{flex:none;width:14px;height:14px;margin-top:1px;border:.5px solid var(--dsw-alias-border-l3,rgba(0,0,0,.2));border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;color:#fff;background:transparent}
+.SN_checkBox[data-checked='true']{border-color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary-foreground,#fff)}
+
+.SN_banner{flex:none;display:flex;align-items:center;gap:12px;padding:8px 22px;font-size:12px;line-height:1.5;background:var(--dsw-alias-state-warn-tertiary,rgba(180,71,47,.06));border-bottom:.5px solid var(--dsw-alias-border-l1)}
+.SN_bannerText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-state-error-primary)}
+.SN_textBtn{flex:none;border:0;background:transparent;color:var(--dsw-alias-brand-primary);font:inherit;font-size:12px;font-weight:500;cursor:pointer;padding:2px 4px;border-radius:6px;white-space:nowrap}
+.SN_textBtn:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05))}
+
+.SN_body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
+.SN_wallWrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;container-type:inline-size;container-name:sn-wall}
+.SN_wall{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px;padding:18px 22px 28px;align-content:start;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-scrollbar-bg-l2,rgba(0,0,0,.18)) transparent}
+.SN_wall::-webkit-scrollbar{width:8px;height:8px}
+.SN_wall::-webkit-scrollbar-thumb{background:var(--dsw-alias-scrollbar-bg-l2,rgba(0,0,0,.16));border-radius:4px}
+.SN_wall::-webkit-scrollbar-track{background:transparent}
+.SN_wall .SN_skelCard{height:208px;border-radius:11px;background:var(--dsw-alias-bg-layer-2,#f2f0ec);animation:SN_shimmer 1.6s ease-in-out infinite}
+`;
+
+export { baseStyles };

package/src/client/styles/capture.js

@@ -0,0 +1,94 @@
+/** 界面样式片段：capture；组合顺序由 styles/index.js 固定。 */
+import { INK_BODY, INK_COMMENT, INK_MUTED, INK_TITLE, SANS, SERIF } from './tokens.js';
+
+const captureStyles = `
+/* 浮岛不占墙的滚动空间；底部留白跟随正文展开后的实际高度。 */
+.SN_wallWrap[data-capture='true'] .SN_wall{padding-bottom:calc(var(--sn-capture-height,92px) + 36px)}
+.SN_wallWrap[data-capture='true'] .SN_center{padding-bottom:calc(var(--sn-capture-height,92px) + 40px)}
+.SN_captureDock{position:absolute;z-index:27;left:0;right:var(--sn-dock-right,0px);bottom:0;padding:22px clamp(12px,3vw,36px) 24px;pointer-events:none;--sn-capture-surface:rgba(255,255,255,.57);--sn-capture-line:rgba(90,80,75,.12)}
+.SN_captureDock::before{content:'';position:absolute;inset:-48px 0 0;background:linear-gradient(to top,#fff 0%,rgba(255,255,255,.94) 26%,rgba(255,255,255,.72) 52%,rgba(255,255,255,0) 100%);pointer-events:none}
+.SN_captureDock[data-card-dragging='true']::before{inset:-190px 0 0;background:linear-gradient(to top,#fff 0%,rgba(255,255,255,.97) 28%,rgba(255,255,255,.78) 66%,rgba(255,255,255,0) 100%)}
+.SN_capture{position:relative;display:flex;align-items:center;gap:12px;max-width:860px;margin:0 auto;padding:10px 12px 10px 14px;border:1px solid rgba(255,255,255,.85);border-radius:34px;background:var(--sn-capture-surface);box-shadow:0 6px 28px rgba(55,42,30,.07),0 1px 3px rgba(55,42,30,.04),inset 0 0 0 .5px rgba(80,70,60,.07);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);pointer-events:auto;transition:border-color .2s,box-shadow .2s}
+.SN_capture:focus-within,.SN_capture[data-dragging='true']{border-color:rgba(139,92,246,.35);box-shadow:0 8px 32px rgba(55,42,30,.08),0 0 0 1px rgba(139,92,246,.28),0 0 0 4px rgba(139,92,246,.04)}
+.SN_capture[data-body='true']{border-radius:26px;align-items:flex-start}
+.SN_captureAttach{display:flex;align-items:center;gap:8px;flex:none;min-width:0;max-width:44%;position:relative}
+.SN_captureAdd,.SN_captureSend{flex:none;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;cursor:pointer;transition:background .15s,color .15s,opacity .15s}
+.SN_captureAdd{background:rgba(100,90,80,.045);color:var(--dsw-alias-label-secondary,#8a8177)}
+.SN_captureAdd:hover:not(:disabled){background:rgba(139,92,246,.09);color:var(--sn-accent)}
+.SN_captureSend{background:var(--sn-accent);color:white}
+.SN_captureSend:disabled{background:rgba(100,90,80,.08);color:var(--dsw-alias-label-tertiary,#b8b1a9);cursor:default}
+.SN_captureAdd:disabled{opacity:.4;cursor:default}
+.SN_captureFields{flex:1;min-width:0;padding:7px 0}
+.SN_captureTitleRow{display:flex;align-items:center;flex-wrap:wrap;gap:5px 10px;min-width:0}
+.SN_captureTitle{display:block;flex:1 1 auto;min-width:min(160px,100%);max-width:100%;width:var(--sn-title-width,160px);height:24px;resize:none;overflow:hidden;overflow-wrap:anywhere;padding:0;border:0;background:transparent;font:inherit;font-size:15px;line-height:24px;letter-spacing:.015em;color:var(--dsw-alias-label-primary,#2b2620);box-shadow:none}
+.SN_captureTitle::placeholder{color:var(--dsw-alias-label-tertiary,#a39b92);opacity:.8}
+.SN_captureTitleMeasure{position:absolute;visibility:hidden;pointer-events:none;white-space:pre;font-size:15px;line-height:24px;letter-spacing:.015em}
+.SN_capture[data-body='true'] .SN_captureTitle{width:100%;flex:1}
+.SN_captureHint{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;flex:none;margin-left:auto;text-align:right;font-size:10px;color:var(--dsw-alias-label-tertiary,#a39b92);opacity:.6;white-space:nowrap;user-select:none}
+.SN_captureHint kbd{font:inherit;font-size:9px;border:.5px solid currentColor;border-radius:4px;padding:0 4px;line-height:16px}
+.SN_captureBody{display:block;resize:none;width:100%;height:68px;max-height:160px;overflow-y:auto;margin:10px 0 0;padding:10px 0 0;border:0;border-top:1px solid var(--sn-capture-line);background:transparent;box-shadow:none;font:inherit;font-size:12.5px;line-height:1.75;color:var(--dsw-alias-label-secondary,#8a8177);color:color-mix(in srgb,var(--dsw-alias-label-primary,#2b2620) 62%,transparent);scrollbar-width:thin}
+.SN_captureBody::placeholder{color:inherit;opacity:.55}
+.SN_captureSubmitHint{display:block;margin-top:7px;text-align:right;font-size:10px;line-height:16px;color:var(--dsw-alias-label-tertiary,#a39b92);opacity:.6;user-select:none}
+.SN_captureStack{display:flex;align-items:center;min-width:0;padding:3px;overflow-x:auto;scrollbar-width:none}
+.SN_captureStack::-webkit-scrollbar{display:none}
+.SN_captureThumb{position:relative;flex:none;width:40px;height:40px;margin-left:-27px;border-radius:10px;border:2px solid rgba(255,255,255,.94);background:#eee;transition:margin .22s ease,transform .22s ease;isolation:isolate}
+.SN_captureThumb:first-child{margin-left:0}
+.SN_captureAttach[data-expanded='true'] .SN_captureThumb{margin-left:6px}
+.SN_captureAttach[data-expanded='true'] .SN_captureThumb:first-child{margin-left:0}
+.SN_captureThumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}
+.SN_captureThumb:focus-visible{outline:2px solid var(--sn-accent);outline-offset:1px}
+.SN_captureRemove{position:absolute;z-index:1;top:-4px;right:-4px;width:17px;height:17px;border:1px solid var(--sn-capture-line);border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;background:var(--dsw-alias-bg-layer-2,#fff);color:var(--dsw-alias-label-secondary,#777);opacity:0;cursor:pointer}
+.SN_captureAttach[data-expanded='true'] .SN_captureRemove,.SN_captureRemove:focus-visible{opacity:1}
+.SN_capturePreview{position:absolute;bottom:calc(100% + 18px);left:0;max-width:min(260px,65vw);width:max-content;max-height:220px;padding:6px;border:1px solid var(--sn-capture-line);border-radius:16px;background:var(--dsw-alias-bg-layer-2,#fff);box-shadow:0 10px 34px rgba(35,25,15,.15);pointer-events:none;animation:SN_toastIn .14s ease}
+.SN_capturePreview img{display:block;max-width:min(246px,60vw);max-height:204px;width:auto;height:auto;object-fit:contain;border-radius:10px}
+.SN_imageSettingToggle{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer}
+.SN_imageSettingToggle input{accent-color:var(--sn-accent)}
+.SN_imageSettingNumbers{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+.SN_captureStatus{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
+.SN_captureDock[data-card-dragging='true'] .SN_capture{visibility:hidden;pointer-events:none}
+.SN_captureDock[data-card-dragging='true'] .SN_capture *{pointer-events:none}
+.SN_captureDock::after{content:'';position:absolute;inset:-64px 0 0;opacity:0;background:linear-gradient(to top,color-mix(in srgb,var(--sn-drop-color,#e45b64) 28%,transparent),transparent);pointer-events:none;transition:opacity .22s ease}
+.SN_captureDock[data-drop='archive']{--sn-drop-color:#37856b}
+.SN_captureDock[data-drop='project']{--sn-drop-color:#5477bb}
+.SN_captureDock[data-drop='delete']{--sn-drop-color:#c94f55}
+.SN_captureDock[data-drop='archive']::after,.SN_captureDock[data-drop='project']::after,.SN_captureDock[data-drop='delete']::after{opacity:1}
+.SN_dropActions{position:absolute;z-index:2;left:clamp(12px,3vw,36px);right:clamp(12px,3vw,36px);bottom:24px;max-width:860px;margin:0 auto;pointer-events:auto}
+.SN_dropHint{text-align:center;margin:0 0 10px;font-size:11px;line-height:1.5;color:var(--dsw-alias-label-secondary,#6f6861);font-weight:500;text-shadow:0 1px 4px rgba(255,255,255,.95)}
+.SN_dropRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--sn-capture-line);border-radius:22px;background:var(--sn-capture-surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:visible;box-shadow:0 6px 28px rgba(55,42,30,.07)}
+.SN_dropItem{position:relative;min-width:0;min-height:70px;padding:12px 8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;color:var(--dsw-alias-label-secondary,#7e756c);transition:background .2s,color .2s;user-select:none}
+.SN_dropItem+.SN_dropItem::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--sn-capture-line)}
+.SN_dropItem[aria-disabled='true']{opacity:.45}
+.SN_dropItem[data-active='true'][data-action='archive']{color:#286c55;background:rgba(55,133,107,.14)}
+.SN_dropItem[data-active='true'][data-action='project']{color:#4565a3;background:rgba(84,119,187,.14)}
+.SN_dropItem[data-active='true'][data-action='delete']{color:#b93d45;background:rgba(201,79,85,.14)}
+.SN_dropLabel{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.3}
+.SN_dropTargets{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);z-index:3;box-sizing:border-box;width:min(280px,100%);max-height:180px;padding:6px;display:flex;flex-direction:column;gap:4px;overflow:auto;border:1px solid var(--sn-capture-line);border-radius:12px;background:var(--dsw-alias-bg-layer-1,#fff);box-shadow:0 7px 22px rgba(35,45,38,.14);pointer-events:auto}
+.SN_dropItem[data-action='archive']::after{content:'';position:absolute;left:0;right:0;bottom:100%;height:9px}
+.SN_dropTarget{flex:none;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;border:0;border-radius:7px;padding:9px 10px;background:transparent;color:#286c55;font:inherit;font-size:12px;cursor:pointer}
+.SN_dropTarget:hover,.SN_dropTarget:focus-visible{background:rgba(55,133,107,.12);outline:none}
+.SN_dropTarget[data-active='true']{background:#37856b;color:#fff;border-color:#37856b}
+.SN_dropItem[data-parked='true']>svg,.SN_dropItem[data-parked='true']>.SN_dropLabel{visibility:hidden}
+.SN_dragLayer{--sn-serif:${SERIF};--sn-sans:${SANS};--sn-ink-title:${INK_TITLE};--sn-ink-body:${INK_BODY};--sn-ink-comment:${INK_COMMENT};--sn-ink-muted:${INK_MUTED};--sn-accent:#8B5CF6;position:fixed;left:0;top:0;z-index:10000;transform-origin:top left;will-change:transform;contain:layout style;font-family:var(--sn-sans);font-size:13px;line-height:1.5;pointer-events:none}
+.SN_dragLayer::before{content:'';position:absolute;inset:0;border-radius:4px;box-shadow:0 8px 18px rgba(30,25,20,.22),0 2px 5px rgba(30,25,20,.12)}
+.SN_dragLayer *{pointer-events:none!important}
+.SN_dragPreview{position:absolute;left:0;top:0;z-index:1;transform-origin:top left;pointer-events:none}
+.SN_dragPreview .SN_card{height:100%;cursor:default;transform:none;transition:none}
+.SN_dragFollow{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);z-index:2;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:var(--sn-drag-hint-width,270px);padding:8px 12px;border-radius:7px;background:#514c47;color:#fff;box-shadow:0 4px 18px rgba(0,0,0,.2);font-size:12px;font-weight:600;line-height:1.3;pointer-events:none;white-space:nowrap}
+.SN_dragFollow span{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.SN_dragFollow svg{display:block;flex:none}
+.SN_dragFollow[data-action='archive']{background:#286c55}
+.SN_dragFollow[data-action='project']{background:#4565a3}
+.SN_dragFollow[data-action='delete']{background:#b93d45}
+.SN_dragLayer[data-settling='true'] .SN_dragFollow,.SN_dragLayer[data-parked='true'] .SN_dragFollow{visibility:hidden}
+.SN_backTop{position:absolute;z-index:2;top:-22px;left:50%;transform:translateX(-50%);width:32px;height:32px;border:1px solid var(--sn-capture-line);border-radius:50%;background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-secondary,#7e756c);box-shadow:0 3px 14px rgba(55,42,30,.08);display:grid;place-items:center;pointer-events:auto;cursor:pointer}
+.SN_backTop:hover{color:var(--sn-accent);border-color:var(--sn-accent)}
+body[data-ds-dark-theme] .SN_captureDock{--sn-capture-surface:rgba(43,40,47,.54);--sn-capture-line:rgba(255,255,255,.12)}
+body[data-ds-dark-theme] .SN_captureDock::before{background:linear-gradient(to top,var(--dsw-alias-bg-base,#18181b) 0%,color-mix(in srgb,var(--dsw-alias-bg-base,#18181b) 94%,transparent) 26%,color-mix(in srgb,var(--dsw-alias-bg-base,#18181b) 72%,transparent) 52%,transparent 100%)}
+body[data-ds-dark-theme] .SN_capture{border-color:rgba(255,255,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.045)}
+body[data-ds-dark-theme] .SN_capture:focus-within,body[data-ds-dark-theme] .SN_capture[data-dragging='true']{border-color:rgba(167,139,250,.45);box-shadow:0 8px 32px rgba(0,0,0,.18),0 0 0 1px rgba(167,139,250,.35),0 0 0 4px rgba(167,139,250,.05)}
+body[data-ds-dark-theme] .SN_captureAdd,body[data-ds-dark-theme] .SN_captureSend:disabled{background:rgba(255,255,255,.07)}
+body[data-ds-dark-theme] .SN_captureThumb{border-color:#3c3941;background:#35323b}
+@container sn-wall (max-width:560px){.SN_captureHint{flex-basis:100%;margin-top:1px}.SN_capture{gap:8px;padding-left:10px}.SN_captureTitle{font-size:14px}.SN_captureAttach{max-width:40%}}
+`;
+
+export { captureStyles };

package/src/client/styles/index.js

@@ -0,0 +1,26 @@
+/** 按原有层叠顺序组合样式，并返回卸载清理函数。 */
+import { baseStyles } from './base.js';
+import { captureStyles } from './capture.js';
+import { overridesStyles } from './overrides.js';
+import { readerStyles } from './reader.js';
+import { settingsStyles } from './settings.js';
+import { wallStyles } from './wall.js';
+
+const CSS = [baseStyles, captureStyles, wallStyles, readerStyles, settingsStyles, overridesStyles].join('\n');
+
+function injectStyles() {
+  if (typeof document === 'undefined' || !document.head) return undefined;
+  // HMR 重挂时清掉上一位实例留下的样式，避免重复 tag 叠加。
+  const stale = document.querySelector('style[data-plugin="sticky-notes"]');
+  if (stale && stale.parentNode) stale.parentNode.removeChild(stale);
+  const tag = document.createElement('style');
+  tag.dataset.plugin = 'sticky-notes';
+  tag.dataset.pluginCss = 'dsh-obsidian-memo/client.css';
+  tag.textContent = CSS;
+  document.head.appendChild(tag);
+  return () => {
+    if (tag.parentNode) tag.parentNode.removeChild(tag);
+  };
+}
+
+export { injectStyles };

package/src/client/styles/overrides.js

@@ -0,0 +1,116 @@
+/** 界面样式片段：overrides；组合顺序由 styles/index.js 固定。 */
+import { INK_BODY_DARK, INK_COMMENT_DARK, INK_MUTED_DARK, INK_TITLE_DARK } from './tokens.js';
+
+const overridesStyles = `
+/* ── 0.13 卡片：缩略图贴底 / 同色渐变蒙版 / AI emoji 平铺操作区 ── */
+.SN_cardTitle{flex:none}
+/* ── 有图卡片：标题 3 行、摘要 1 行（line-height 1.5）、评论 18px、64px 缩略图贴底左侧（下方再留 6px），208px 预算 ≈ 206.9 ── */
+.SN_card[data-images='true'] .SN_cardClip{padding:10px 15px;gap:2px}
+.SN_cardExcerpt[data-compact='true']{-webkit-line-clamp:1;line-height:1.5}
+.SN_card[data-images='true'] .SN_cardComments{max-height:18px;margin-top:0}
+.SN_card[data-images='true'] .SN_cCommentMore{display:none}
+.SN_cardImages{flex:none;display:flex;align-items:center;gap:6px;min-height:64px;overflow:hidden;margin-top:auto;margin-bottom:6px;align-self:flex-start;transition:opacity .12s ease}
+/* 0.13.4：卡片操作菜单出现（= 悬停/聚焦卡片）且这张卡有图时，统一隐藏图片预览；
+   不再区分鼠标是否停在 emoji 行上，也移除了旧的同色渐变蒙版。 */
+.SN_card[data-menu='true'] .SN_cardImages{opacity:0;pointer-events:none}
+.SN_thumb{position:relative;flex:none;width:64px;height:64px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.42)}
+.SN_thumbImg{width:100%;height:100%;object-fit:cover;display:block}
+.SN_thumbFallback{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(120,100,70,.08));animation:SN_shimmer 1.8s ease-in-out infinite}
+.SN_thumbFallback[data-failed='true']{animation:none;opacity:.6}
+.SN_moreImages{flex:none;font-size:10.5px;line-height:1.4;letter-spacing:.02em;color:var(--sn-ink-muted);background:rgba(255,255,255,.55);border-radius:999px;padding:1px 6px;white-space:nowrap}
+/* AI emoji 平铺：每枚 27×27 方形按钮只画 emoji 字形；hover / 键盘 focus 时在按钮上方浮出 label 小标签。 */
+.SN_aiRow{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
+.SN_aiBtn{position:relative;width:27px;height:27px;flex:none;border:.5px solid rgba(80,62,36,.16);border-radius:9px;background:rgba(255,255,255,.72);color:var(--sn-ink-title);font:inherit;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:background .12s ease,transform .12s ease}
+.SN_aiBtn:hover:not(:disabled){background:#fff;transform:translateY(-1px)}
+.SN_aiBtn:disabled{opacity:.55;cursor:default}
+.SN_aiEmoji{font-size:14px;line-height:1;pointer-events:none}
+.SN_aiLabel{position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);z-index:34;padding:2px 7px;border-radius:6px;background:rgba(43,38,32,.92);color:#fff;font-size:10.5px;font-weight:400;line-height:1.4;letter-spacing:.01em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease}
+.SN_aiBtn:hover .SN_aiLabel,.SN_aiBtn:focus-visible .SN_aiLabel{opacity:1}
+.SN_aiEmpty{font-size:10.5px;line-height:1.4;color:var(--sn-ink-muted)}
+.SN_actionDivider{height:1px;margin:1px 2px;background:linear-gradient(to right,rgba(90,72,45,.18),rgba(90,72,45,0))}
+
+/* ── 0.13 抽屉：锁定按钮 / 底部固定评论区 ── */
+.SN_noteDrawerHeadActions{flex:none;display:flex;align-items:center;gap:2px}
+.SN_noteDrawerComments{flex:none;display:flex;flex-direction:column;min-height:96px;max-height:42%;border-top:.5px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1,#fff)}
+.SN_noteDrawerCommentsHead{flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 18px 6px}
+.SN_noteDrawerCommentsBody{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:2px 18px 14px;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-scrollbar-bg-l2,rgba(0,0,0,.18)) transparent}
+.SN_noteDrawerCommentsBody::-webkit-scrollbar{width:8px}
+.SN_noteDrawerCommentsBody::-webkit-scrollbar-thumb{background:var(--dsw-alias-scrollbar-bg-l2,rgba(0,0,0,.16));border-radius:4px}
+.SN_commentEmpty{padding:0 18px 14px;margin:0}
+
+/* ── 0.13 面板锁：锁定 = SN_body 内联双栏，抽屉普通 flex 子项 ── */
+.SN_body[data-pinned='true']{flex-direction:row}
+.SN_body[data-pinned='true'] .SN_wallWrap{flex:1;min-width:0}
+.SN_noteDrawer[data-pinned='true']{position:relative;flex:0 0 auto;height:100%;box-shadow:none;animation:none;border-left:.5px solid var(--dsw-alias-border-l1)}
+/* 极窄窗口拖卡片时仍给操作栏留出空间，结束拖拽后恢复原面板宽度。 */
+
+/* ── 0.13 统一 icon 选中样式（§7.8）：浅紫半透明底 + 紫色图标（--sn-accent） ── */
+.SN_iconBtn[data-active='true']{color:var(--sn-accent);background:rgba(139,92,246,.10);background:color-mix(in srgb,var(--sn-accent) 10%,transparent)}
+.SN_iconBtn[data-active='true']:hover:not(:disabled){color:var(--sn-accent);background:rgba(139,92,246,.14);background:color-mix(in srgb,var(--sn-accent) 14%,transparent)}
+
+/* ── 0.13 抽屉操作条（§7.3.2）：header 下方一行；左=AI emoji，右=同排线图标 ── */
+.SN_drawerActions{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;row-gap:6px;flex-wrap:wrap;min-width:0;padding:8px 18px;border-bottom:.5px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1,#fff)}
+.SN_drawerActionLeft{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0;flex:1}
+.SN_drawerActionRight{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;position:relative;margin-left:auto}
+.SN_drawerActionTop{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
+.SN_drawerActionBtn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:27px;height:27px;padding:0;border:.5px solid var(--dsw-alias-border-l3,rgba(80,62,36,.16));border-radius:8px;background:var(--dsw-alias-bg-layer-2,#f9f7f3);color:var(--dsw-alias-label-secondary,#817970);cursor:pointer;transition:background .12s ease,color .12s ease}
+.SN_drawerActionBtn svg{display:block;pointer-events:none}
+.SN_drawerActionBtn:hover:not(:disabled){background:color-mix(in srgb,var(--dsw-alias-label-primary,#2b2620) 8%,var(--dsw-alias-bg-layer-2,#f9f7f3));color:var(--dsw-alias-label-primary,#2b2620)}
+.SN_drawerActionBtn:disabled{opacity:.45;cursor:default}
+.SN_drawerActionBtn:hover:not(:disabled) .SN_aiLabel,.SN_drawerActionBtn:focus-visible .SN_aiLabel{opacity:1}
+.SN_drawerActionBtn:last-of-type .SN_aiLabel{left:auto;right:0;transform:none}
+.SN_drawerDeleteBtn{color:#b77979;border-color:color-mix(in srgb,#b77979 28%,transparent);background:color-mix(in srgb,#b77979 5%,transparent)}
+.SN_drawerDeleteBtn:hover:not(:disabled){color:#b76363;background:color-mix(in srgb,#b77979 12%,transparent)}
+body[data-ds-dark-theme] .SN_drawerDeleteBtn{color:#d09b9b}
+body[data-ds-dark-theme] .SN_drawerDeleteBtn:hover:not(:disabled){color:#e3b3b3}
+.SN_drawerMenu{position:absolute;top:calc(100% + 6px);right:0;z-index:46;width:214px;max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:10px;background:var(--dsw-alias-bg-layer-2,#fff);border:.5px solid var(--dsw-alias-border-l1);box-shadow:0 10px 30px rgba(0,0,0,.18);animation:SN_toastIn .14s ease;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-scrollbar-bg-l2,rgba(0,0,0,.18)) transparent}
+
+@keyframes SN_fadeIn{from{opacity:0}to{opacity:1}}
+@keyframes SN_toastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
+@keyframes SN_slideIn{from{opacity:.4;transform:translateX(28px)}to{opacity:1;transform:none}}
+@keyframes SN_pulse{0%,100%{opacity:.35;transform:scale(.86)}50%{opacity:1;transform:scale(1.1)}}
+@keyframes SN_spin{to{transform:rotate(360deg)}}
+@keyframes SN_shimmer{0%{opacity:.5}50%{opacity:.9}100%{opacity:.5}}
+
+/* ── 深色主题（body[data-ds-dark-theme]）：深色纸 + 提亮墨色 + 半透明白底小块 ── */
+body[data-ds-dark-theme] .SN_panel,body[data-ds-dark-theme] .SN_dragLayer{--sn-ink-title:${INK_TITLE_DARK};--sn-ink-body:${INK_BODY_DARK};--sn-ink-comment:${INK_COMMENT_DARK};--sn-ink-muted:${INK_MUTED_DARK};--sn-accent:#A78BFA}
+body[data-ds-dark-theme] .SN_cardClip{background:var(--sn-card-bg-dark,var(--sn-card-bg))}
+body[data-ds-dark-theme] .SN_card{box-shadow:0 1px 2px rgba(0,0,0,.45),0 0 0 .5px rgba(0,0,0,.55)}
+body[data-ds-dark-theme] .SN_card:hover{box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.6)}
+body[data-ds-dark-theme] .SN_card:focus-visible{box-shadow:0 0 0 2px var(--dsw-focus-ring-color,var(--dsw-alias-brand-primary)),0 8px 22px rgba(0,0,0,.55)}
+body[data-ds-dark-theme] .SN_card[data-dragging='true']{box-shadow:none}
+body[data-ds-dark-theme] .SN_card,body[data-ds-dark-theme] .SN_noteDrawer{--sn-note-bg:var(--sn-card-bg-dark,var(--sn-card-bg));--sn-tag-ink:var(--sn-card-bg);--sn-ink-title:${INK_TITLE_DARK}}
+body[data-ds-dark-theme] .SN_captureDock[data-card-dragging='true']::before{background:linear-gradient(to top,var(--dsw-alias-bg-base,#18181b) 0%,color-mix(in srgb,var(--dsw-alias-bg-base,#18181b) 97%,transparent) 32%,color-mix(in srgb,var(--dsw-alias-bg-base,#18181b) 82%,transparent) 68%,transparent 100%)}
+body[data-ds-dark-theme] .SN_dropItem[data-active='true']{color:var(--dsw-alias-label-primary,#eee)}
+body[data-ds-dark-theme] .SN_dropTarget{background:#292d2b;color:#92d5b8}
+body[data-ds-dark-theme] .SN_dropTarget[data-active='true']{background:#37856b;color:#fff}
+body[data-ds-dark-theme] .SN_mini{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
+body[data-ds-dark-theme] .SN_mini:hover:not(:disabled){background:rgba(255,255,255,.16)}
+body[data-ds-dark-theme] .SN_obsidianBtn:hover:not(:disabled){background:rgba(167,139,250,.20)}
+body[data-ds-dark-theme] .SN_cardActions{background:linear-gradient(to top,var(--sn-card-bg-dark) 34%,rgba(0,0,0,0))}
+body[data-ds-dark-theme] .SN_cardActions[data-visible='true']{background:linear-gradient(to top,var(--sn-card-bg-dark) 58%,rgba(0,0,0,0))}
+body[data-ds-dark-theme] .SN_toast,body[data-ds-dark-theme] .SN_sortMenu{box-shadow:0 10px 30px rgba(0,0,0,.5)}
+body[data-ds-dark-theme] .SN_noteDrawer{box-shadow:-10px 0 34px rgba(0,0,0,.55)}
+body[data-ds-dark-theme] .SN_drawer{box-shadow:-12px 0 44px rgba(0,0,0,.5)}
+body[data-ds-dark-theme] .SN_dialog{box-shadow:0 18px 60px rgba(0,0,0,.6)}
+
+/* ── 0.13 深色覆盖：同色蒙版用 darkColor，卡内小图/小块改半透明白 ── */
+body[data-ds-dark-theme] .SN_thumb{background:rgba(255,255,255,.06)}
+body[data-ds-dark-theme] .SN_thumbFallback{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03))}
+body[data-ds-dark-theme] .SN_moreImages{background:rgba(255,255,255,.10)}
+body[data-ds-dark-theme] .SN_aiBtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
+body[data-ds-dark-theme] .SN_aiBtn:hover:not(:disabled){background:rgba(255,255,255,.16)}
+body[data-ds-dark-theme] .SN_aiLabel{background:rgba(250,247,240,.96);color:#2b2620}
+body[data-ds-dark-theme] .SN_actionDivider{background:linear-gradient(to right,rgba(255,255,255,.16),rgba(255,255,255,0))}
+body[data-ds-dark-theme] .SN_noteDrawerComments{background:var(--dsw-alias-bg-layer-2,#f2f0ec)}
+/* 暗色下统一 icon 选中：背景 14%、图标 #A78BFA */
+body[data-ds-dark-theme] .SN_iconBtn[data-active='true']{color:var(--sn-accent);background:rgba(167,139,250,.14);background:color-mix(in srgb,var(--sn-accent) 14%,transparent)}
+body[data-ds-dark-theme] .SN_iconBtn[data-active='true']:hover:not(:disabled){color:var(--sn-accent);background:rgba(167,139,250,.20);background:color-mix(in srgb,var(--sn-accent) 20%,transparent)}
+body[data-ds-dark-theme] .SN_drawerMenu{box-shadow:0 10px 30px rgba(0,0,0,.5)}
+
+@media (prefers-reduced-motion:reduce){
+  .SN_panel *,.SN_panel *::before,.SN_panel *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
+}
+`;
+
+export { overridesStyles };

package/src/client/styles/reader.js

@@ -0,0 +1,66 @@
+/** 界面样式片段：reader；组合顺序由 styles/index.js 固定。 */
+import { DEFAULT_NOTE_COLOR } from './tokens.js';
+
+const readerStyles = `
+/* ── 右侧便签抽屉（查看 / 编辑） ── */
+.SN_noteDrawerLayer{position:absolute;inset:0;z-index:30;pointer-events:none;display:flex;justify-content:flex-end}
+.SN_noteDrawer{--sn-note-bg:var(--sn-card-bg,${DEFAULT_NOTE_COLOR});--sn-tag-ink:var(--sn-card-bg-dark,#2C2721);pointer-events:auto;position:relative;width:34%;min-width:min(340px,100%);max-width:min(620px,100%);height:100%;display:flex;flex-direction:column;min-height:0;background:var(--dsw-alias-bg-layer-1,#fff);border-left:.5px solid var(--dsw-alias-border-l1);box-shadow:-10px 0 30px rgba(0,0,0,.12);animation:SN_slideIn .18s ease}
+.SN_noteDrawerHandle{position:absolute;left:0;top:0;bottom:0;width:8px;cursor:col-resize;z-index:3;touch-action:none}
+.SN_noteDrawerHandle::after{content:'';position:absolute;left:3px;top:0;bottom:0;width:2px;background:transparent;transition:background .12s ease}
+.SN_noteDrawerHandle:hover::after,.SN_noteDrawerHandle[data-resizing='true']::after{background:var(--dsw-alias-brand-primary)}
+.SN_panel[data-resizing='true'],.SN_panel[data-resizing='true'] *{user-select:none!important;cursor:col-resize!important}
+.SN_noteDrawerHead{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 12px;border-bottom:.5px solid var(--dsw-alias-border-l1)}
+.SN_noteDrawerHeadMain{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
+.SN_noteDrawerTitle{margin:0;font-family:var(--sn-serif);font-size:18px;font-weight:600;line-height:1.35;color:var(--dsw-alias-label-primary);word-break:break-word}
+/* 编辑态标题：多行 textarea，完整换行显示（不横向滚动）；高度随内容自适应（JS 兜底 + field-sizing）。 */
+.SN_titleEditor{display:block;width:100%;min-width:0;min-height:24px;max-height:132px;border:0;border-bottom:1px solid var(--dsw-alias-border-l2);padding:2px 0;margin:0;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-family:var(--sn-serif);font-size:18px;font-weight:600;line-height:1.35;outline:none;resize:none;overflow:hidden;white-space:pre-wrap;word-break:break-word;field-sizing:content}
+.SN_noteDrawerMeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;line-height:1.4;color:var(--dsw-alias-label-tertiary)}
+.SN_noteDrawerTag{flex:none;max-width:100%}
+.SN_noteDrawerBody{flex:1;min-height:0;overflow-y:auto;padding:18px 18px 40px;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-scrollbar-bg-l2,rgba(0,0,0,.18)) transparent}
+.SN_noteDrawerBody::-webkit-scrollbar{width:8px}
+.SN_noteDrawerBody::-webkit-scrollbar-thumb{background:var(--dsw-alias-scrollbar-bg-l2,rgba(0,0,0,.16));border-radius:4px}
+.SN_noteViewHint{margin:8px 0;font-size:12.5px;line-height:1.5;color:var(--dsw-alias-label-tertiary)}
+.SN_noteViewError{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:12.5px;color:var(--dsw-alias-state-error-primary)}
+.SN_noteViewEmpty{margin:0 0 14px;font-size:13px;color:var(--dsw-alias-label-tertiary)}
+.SN_noteViewSection{margin:0 0 2px;font-family:var(--sn-serif);font-size:14px;font-weight:600;line-height:1.4;color:var(--dsw-alias-label-primary)}
+.SN_noteEdit{flex:1;min-height:0;display:flex;flex-direction:column}
+.SN_noteEditor{flex:1;min-height:0;width:100%;padding:16px 18px;border:0;resize:none;outline:none;background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.7;tab-size:2}
+.SN_noteEditor:disabled{opacity:.7;cursor:wait}
+.SN_noteEditBar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-top:.5px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2,#f2f0ec)}
+.SN_noteEditHint{font-size:11px;line-height:1.4;color:var(--dsw-alias-label-tertiary)}
+.SN_noteEditActions{display:flex;align-items:center;gap:8px;flex:none}
+.SN_blockP{margin:0 0 14px;font-size:13.5px;line-height:1.85;color:var(--dsw-alias-label-primary);color:color-mix(in srgb,var(--dsw-alias-label-primary) 80%,transparent);white-space:pre-wrap;word-break:break-word}
+.SN_blockP:last-child{margin-bottom:0}
+.SN_blockH{margin:22px 0 10px;font-family:var(--sn-serif);font-size:17px;font-weight:600;line-height:1.4;color:var(--dsw-alias-label-primary);word-break:break-word}
+.SN_blockH:first-child{margin-top:0}
+.SN_blockLi{position:relative;margin:0 0 8px;padding-left:16px;font-size:13.5px;line-height:1.8;color:var(--dsw-alias-label-primary);color:color-mix(in srgb,var(--dsw-alias-label-primary) 80%,transparent);word-break:break-word}
+.SN_blockLi::before{content:'';position:absolute;left:4px;top:.74em;width:4px;height:4px;border-radius:50%;background:var(--dsw-alias-label-tertiary)}
+.SN_blockOrdered{display:flex;align-items:baseline;gap:8px;padding-left:0}
+.SN_blockOrdered::before{display:none}
+.SN_listNumber{flex:none;min-width:18px;text-align:right;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary)}
+.SN_listText{flex:1;min-width:0}
+.SN_blockTask{display:flex;align-items:flex-start;gap:8px;padding-left:0}
+.SN_blockTask::before{display:none}
+.SN_taskCheck{flex:none;width:14px;height:14px;margin-top:.4em;border:.5px solid var(--dsw-alias-border-l4,var(--dsw-alias-border-l3));border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;color:var(--dsw-alias-label-primary-foreground,#fff);background:transparent}
+.SN_taskCheck[data-checked='true']{background:var(--dsw-alias-brand-primary,#2f6feb);border-color:var(--dsw-alias-brand-primary,#2f6feb);color:var(--dsw-alias-label-primary-foreground,#fff)}
+.SN_taskText{min-width:0;flex:1;word-break:break-word}
+.SN_blockQuote{margin:0 0 14px;padding:2px 0 2px 14px;border-left:2px solid var(--dsw-alias-border-l3);font-size:13px;line-height:1.8;color:var(--dsw-alias-label-primary);color:color-mix(in srgb,var(--dsw-alias-label-primary) 80%,transparent);white-space:pre-wrap;word-break:break-word}
+.SN_blockCode{margin:0 0 14px;padding:10px 12px;border-radius:8px;background:var(--dsw-alias-bg-layer-2,#f2f0ec);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.65;color:var(--dsw-alias-label-primary);white-space:pre-wrap;overflow:auto}
+.SN_blockHr{margin:20px 0;border:0;border-top:1px solid var(--dsw-alias-border-l2)}
+.SN_noteImage{display:block;max-width:100%;max-height:480px;object-fit:contain;margin:8px auto 16px;border-radius:6px}
+.SN_imageLoading,.SN_imageMissing{padding:12px;border:1px dashed var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary);text-align:center;font-size:12px}
+.SN_taskCheck{padding:0;cursor:pointer}
+.SN_taskCheck:disabled{cursor:wait;opacity:.5}
+.SN_noteEditBar .SN_primaryBtn{background:var(--dsw-alias-brand-primary,#2f6feb);color:var(--dsw-alias-label-primary-foreground,#fff)}
+.SN_projects{margin-top:20px;display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-radius:8px;background:var(--dsw-alias-bg-layer-2,#f2f0ec);font-size:12px;line-height:1.6}
+.SN_projectsLabel{flex:none;color:var(--dsw-alias-label-tertiary)}
+.SN_projectsValue{min-width:0;color:var(--dsw-alias-label-primary);word-break:break-all}
+.SN_commentCard{border:.5px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-layer-1,#faf9f7);padding:12px 14px}
+.SN_commentCardHead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-secondary)}
+.SN_commentCardLabel{font-weight:500;color:var(--dsw-alias-label-primary)}
+.SN_commentCardTime{font-size:11px;color:var(--dsw-alias-label-tertiary)}
+.SN_commentCardBody{margin-top:7px;font-size:13px;line-height:1.78;color:var(--dsw-alias-label-primary);white-space:pre-wrap;word-break:break-word}
+
+`;
+
+export { readerStyles };