dsh-obsidian-memo 0.16.3

package/src/client/preferences.js

@@ -0,0 +1,198 @@
+/** 持久化筛选、排序和钉住偏好，计算抽屉尺寸边界；保留已有存储键。 */
+import {
+  DATE_FILTER_ENABLED_KEY, DATE_FILTER_KEY, DATE_REALTIME_KEY, DEFAULT_DATE_FILTER,
+  DEFAULT_DATE_FILTER_ENABLED, DEFAULT_SORT, DRAWER_MAX_WIDTH, DRAWER_MIN_WIDTH, DRAWER_WIDTH_KEY,
+  PINNED_KEY, PINNED_NOTE_KEY, PINNED_WALL_MIN_WIDTH, POLL_BASE, POLL_MAX, SORT_KEY, SORT_OPTIONS,
+} from './constants.js';
+import { isDateFilterId } from './wall/model.js';
+
+function readStoredSort() {
+  try {
+    if (typeof window === 'undefined' || !window.localStorage) return DEFAULT_SORT;
+    const stored = window.localStorage.getItem(SORT_KEY);
+    if (typeof stored === 'string' && SORT_OPTIONS.some((option) => option.id === stored)) return stored;
+  } catch (error) {
+    // 隐私模式 / 存储被禁用：用默认排序即可。
+  }
+  return DEFAULT_SORT;
+}
+
+function storeSort(id) {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) window.localStorage.setItem(SORT_KEY, id);
+  } catch (error) {
+    // 存不下也不影响本次排序。
+  }
+}
+
+function readStoredDateFilter() {
+  try {
+    if (typeof window === 'undefined' || !window.localStorage) return DEFAULT_DATE_FILTER;
+    const stored = window.localStorage.getItem(DATE_FILTER_KEY);
+    if (typeof stored === 'string' && isDateFilterId(stored)) return stored;
+  } catch (error) {
+    // 隐私模式 / 存储被禁用：用默认今天即可。
+  }
+  return DEFAULT_DATE_FILTER;
+}
+
+function storeDateFilter(id) {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) window.localStorage.setItem(DATE_FILTER_KEY, id);
+  } catch (error) {
+    // 存不下也不影响本次筛选。
+  }
+}
+
+function readStoredDateEnabled() {
+  try {
+    if (typeof window === 'undefined' || !window.localStorage) return DEFAULT_DATE_FILTER_ENABLED;
+    const stored = window.localStorage.getItem(DATE_FILTER_ENABLED_KEY);
+    if (stored === '1') return true;
+    if (stored === '0') return false;
+    // 旧版没有独立的开关键：`all` = 不筛选 = 关闭；其它历史值 = 开启。
+    const legacyFilter = window.localStorage.getItem(DATE_FILTER_KEY);
+    if (legacyFilter === 'all') return false;
+  } catch (error) {
+    return DEFAULT_DATE_FILTER_ENABLED;
+  }
+  return DEFAULT_DATE_FILTER_ENABLED;
+}
+
+function storeDateEnabled(enabled) {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      window.localStorage.setItem(DATE_FILTER_ENABLED_KEY, enabled === true ? '1' : '0');
+    }
+  } catch (error) {
+    // ignore
+  }
+}
+
+function readStoredDateRealtime() {
+  try {
+    if (typeof window === 'undefined' || !window.localStorage) return false;
+    return window.localStorage.getItem(DATE_REALTIME_KEY) === '1';
+  } catch (error) {
+    return false;
+  }
+}
+
+function storeDateRealtime(realtime) {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      window.localStorage.setItem(DATE_REALTIME_KEY, realtime === true ? '1' : '0');
+    }
+  } catch (error) {
+    // ignore
+  }
+}
+
+function readStoredDrawerWidth() {
+  try {
+    if (typeof window === 'undefined' || !window.localStorage) return null;
+    const raw = window.localStorage.getItem(DRAWER_WIDTH_KEY);
+    if (typeof raw !== 'string' || raw === '') return null;
+    const width = Number(raw);
+    if (!Number.isFinite(width) || width <= 0) return null;
+    return Math.round(Math.min(DRAWER_MAX_WIDTH, Math.max(DRAWER_MIN_WIDTH, width)));
+  } catch (error) {
+    return null;
+  }
+}
+
+function storeDrawerWidth(width) {
+  try {
+    if (typeof window === 'undefined' || !window.localStorage) return;
+    if (typeof width !== 'number' || !Number.isFinite(width)) return;
+    window.localStorage.setItem(DRAWER_WIDTH_KEY, String(Math.round(width)));
+  } catch (error) {
+    // 存不下也不影响本次拖拽。
+  }
+}
+
+function clearStoredDrawerWidth() {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) window.localStorage.removeItem(DRAWER_WIDTH_KEY);
+  } catch (error) {
+    // ignore
+  }
+}
+
+function drawerWidthBounds(panelWidth, pinned) {
+  const width = typeof panelWidth === 'number' && Number.isFinite(panelWidth) && panelWidth > 0
+    ? panelWidth
+    : 0;
+  const lower = width === 0 ? DRAWER_MIN_WIDTH : Math.min(DRAWER_MIN_WIDTH, width);
+  const upper = pinned === true
+    ? Math.max(DRAWER_MIN_WIDTH, Math.min(DRAWER_MAX_WIDTH, width - PINNED_WALL_MIN_WIDTH))
+    : Math.max(lower, Math.min(DRAWER_MAX_WIDTH, width === 0 ? DRAWER_MAX_WIDTH : width * 0.8));
+  return { lower: lower, upper: upper };
+}
+
+function clampDrawerWidth(width, panelWidth, pinned) {
+  const bounds = drawerWidthBounds(panelWidth, pinned);
+  if (typeof width !== 'number' || !Number.isFinite(width)) return Math.round(bounds.lower);
+  return Math.round(Math.max(bounds.lower, Math.min(bounds.upper, width)));
+}
+
+function nextPollDelay(prevDelay, unchanged) {
+  if (unchanged !== true) return POLL_BASE;
+  const base = typeof prevDelay === 'number' && Number.isFinite(prevDelay) && prevDelay > 0
+    ? prevDelay
+    : POLL_BASE;
+  return Math.min(POLL_MAX, Math.round(base * 1.5));
+}
+
+function readStoredPinned() {
+  try {
+    if (typeof window === 'undefined' || !window.localStorage) return false;
+    return window.localStorage.getItem(PINNED_KEY) === '1';
+  } catch (error) {
+    return false;
+  }
+}
+
+function storePinned(pinned) {
+  try {
+    if (typeof window === 'undefined' || !window.localStorage) return;
+    window.localStorage.setItem(PINNED_KEY, pinned ? '1' : '0');
+  } catch (error) {
+    // 隐私模式 / 存储被禁用：只影响记忆，不影响本次交互。
+  }
+}
+
+function readStoredPinnedNote() {
+  try {
+    if (typeof window === 'undefined' || !window.localStorage) return '';
+    const stored = window.localStorage.getItem(PINNED_NOTE_KEY);
+    return typeof stored === 'string' ? stored : '';
+  } catch (error) {
+    return '';
+  }
+}
+
+function storePinnedNote(path) {
+  try {
+    if (typeof window === 'undefined' || !window.localStorage) return;
+    if (typeof path !== 'string' || path === '') return;
+    window.localStorage.setItem(PINNED_NOTE_KEY, path);
+  } catch (error) {
+    // ignore
+  }
+}
+
+function clearStoredPinnedNote() {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) window.localStorage.removeItem(PINNED_NOTE_KEY);
+  } catch (error) {
+    // ignore
+  }
+}
+
+export {
+  readStoredSort, storeSort, readStoredDateFilter, storeDateFilter, readStoredDateEnabled,
+  storeDateEnabled, readStoredDateRealtime, storeDateRealtime, readStoredDrawerWidth, storeDrawerWidth,
+  clearStoredDrawerWidth, drawerWidthBounds, clampDrawerWidth, nextPollDelay, readStoredPinned,
+  storePinned, readStoredPinnedNote, storePinnedNote, clearStoredPinnedNote,
+};

package/src/client/react.js

@@ -0,0 +1,8 @@
+/** 浏览器唯一的宿主依赖入口；保留 require 对象的命名属性语义。 */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+const h = React.createElement;
+const Fragment = React.Fragment;
+
+export { React, ReactDOM, h, Fragment };

package/src/client/reader/blocks.js

@@ -0,0 +1,51 @@
+/** 阅读模式的 Markdown 块、任务与评论渲染。 */
+import { NoteImage } from '../images/components.js';
+import { h } from '../react.js';
+import { commentHead } from '../wall/model.js';
+
+function NoteBlock(props) {
+  const block = props.block || {};
+  const text = typeof block.text === 'string' ? block.text : '';
+  if (block.kind === 'h') return h('h4', { className: 'SN_blockH' }, text);
+  if (block.kind === 'hr') return h('hr', { className: 'SN_blockHr' });
+  if (block.kind === 'image') return h(NoteImage, { path: props.path, source: block.source, alt: block.alt, wiki: block.wiki });
+  if (block.kind === 'li') {
+    if (typeof block.checked === 'boolean') {
+      const ordered = typeof block.marker === 'string';
+      return h('div', { className: 'SN_blockLi SN_blockTask' + (ordered ? ' SN_blockOrdered' : '') },
+        ordered ? h('span', { className: 'SN_listNumber' }, block.marker) : null,
+        h('button', {
+          type: 'button',
+          className: 'SN_taskCheck',
+          role: 'checkbox',
+          'aria-checked': block.checked,
+          disabled: props.taskBusy,
+          'data-checked': block.checked ? 'true' : 'false',
+          'aria-label': block.checked ? '取消勾选' : '标记完成',
+          onClick: () => props.onToggleTask(block.sourceLine, !block.checked),
+        }, block.checked ? '✓' : ''),
+        h('span', { className: 'SN_taskText' }, text),
+      );
+    }
+    if (typeof block.marker === 'string') return h('div', { className: 'SN_blockLi SN_blockOrdered' },
+      h('span', { className: 'SN_listNumber' }, block.marker), h('span', { className: 'SN_listText' }, text));
+    return h('div', { className: 'SN_blockLi' }, text);
+  }
+  if (block.kind === 'quote') return h('blockquote', { className: 'SN_blockQuote' }, text);
+  if (block.kind === 'code') return h('pre', { className: 'SN_blockCode' }, text);
+  return h('p', { className: 'SN_blockP' }, text);
+}
+
+function NoteComment(props) {
+  const comment = props.comment || {};
+  const head = commentHead(comment);
+  return h('div', { className: 'SN_commentCard' },
+    h('div', { className: 'SN_commentCardHead' },
+      h('span', { className: 'SN_commentCardLabel' }, head),
+      comment.time ? h('span', { className: 'SN_commentCardTime' }, comment.time) : null,
+    ),
+    h('div', { className: 'SN_commentCardBody' }, comment.text || ''),
+  );
+}
+
+export { NoteBlock, NoteComment };

package/src/client/reader/note-drawer.js

@@ -0,0 +1,270 @@
+/** 阅读/编辑抽屉视图，接收草稿、布局和操作回调。 */
+import { ActionIcon, CloseIcon, ObsidianIcon, PinIcon } from '../components/icons.js';
+import { Fragment, React, h } from '../react.js';
+import { NoteBlock, NoteComment } from './blocks.js';
+import { DEFAULT_NOTE_COLOR } from '../styles/tokens.js';
+import { formatTime } from '../utils.js';
+import { emojiLabel } from '../wall/model.js';
+
+function NoteDrawer(props) {
+  const {
+    t, drawer, editing, bodyDraft, saving, drawerWidth, resizing, titleDraft, onTitleChange, pinned,
+    inline, onTogglePinned, drawerActions, onClose, onRetry, onStartEdit, onBodyChange, onSave,
+    onCancelEdit, onResizeStart, onResizeReset, onToggleTask, taskBusy,
+  } = props;
+  // 第 4 轮：标题编辑用多行 textarea 完整显示，高度随内容自适应（不支持 field-sizing 的浏览器靠这里）。
+  const titleEditorRef = React.useRef(null);
+  React.useEffect(() => {
+    const el = titleEditorRef.current;
+    if (!el || !editing) return;
+    el.style.height = 'auto';
+    const next = Math.min(132, Math.max(24, el.scrollHeight || 24));
+    el.style.height = next + 'px';
+  }, [editing, titleDraft]);
+  const drawerStyle = typeof drawerWidth === 'number' && Number.isFinite(drawerWidth)
+    ? {
+      width: drawerWidth + 'px',
+      minWidth: 'min(320px,100%)',
+      maxWidth: pinned ? 'min(960px,100%)' : 'min(960px,80%)',
+    }
+    : pinned
+      // 锁定态没拖过宽：默认 34%，但不超过「面板宽 - 260」（且至少 320）。
+      ? {
+        width: '34%',
+        minWidth: 'min(320px,100%)',
+        maxWidth: 'max(320px, min(960px, calc(100% - 260px)))',
+      }
+      : undefined;
+  const summary = drawer.summary || {};
+  const full = drawer.full || null;
+  const source = full || summary;
+  const title = source.title || source.name || '';
+  const tag = source.tag || null;
+  const updated = source.mtime ? t('drawer.updated', { time: formatTime(source.mtime) }) : '';
+  const blocks = full && Array.isArray(full.blocks) ? full.blocks : [];
+  const comments = full && Array.isArray(full.comments) ? full.comments : [];
+  const projects = source.projects;
+  const canEdit = Boolean(full);
+
+  function handleBodyDoubleClick(event) {
+    if (!canEdit) return;
+    const target = event.target;
+    if (!target || typeof target.closest !== 'function') return;
+    // 双击按钮 / 空白边缘不算（§7.3）。
+    if (target.closest('button')) return;
+    const inText = target.closest('.SN_blockP, .SN_blockH, .SN_blockLi, .SN_blockQuote, .SN_blockCode, .SN_commentCard, .SN_projects');
+    if (!inText && blocks.length > 0) return;
+    onStartEdit();
+  }
+
+  const bodyNode = h('div', {
+    className: 'SN_noteDrawerBody',
+    onDoubleClick: handleBodyDoubleClick,
+  },
+    drawer.loading && !full ? h('div', { className: 'SN_noteViewHint' }, t('drawer.loading')) : null,
+    drawer.error
+      ? h('div', { className: 'SN_noteViewError' },
+        h('span', null, drawer.error),
+        h('button', { type: 'button', className: 'SN_textBtn', onClick: onRetry }, t('drawer.retry')),
+      )
+      : null,
+    !drawer.loading && !drawer.error && blocks.length === 0
+      ? h('p', { className: 'SN_noteViewEmpty' }, t('drawer.editHint'))
+      : null,
+    blocks.map((block, index) => h(NoteBlock, { key: index, block: block, path: drawer.path, onToggleTask, taskBusy })),
+    projects ? h('div', { className: 'SN_projects' },
+      h('span', { className: 'SN_projectsLabel' }, t('drawer.projects')),
+      h('span', { className: 'SN_projectsValue' }, String(projects)),
+    ) : null,
+  );
+
+  // 0.13 评论固定区：flex:none、max-height:42%、min-height:96px、自身滚动、上边框；编辑态隐藏。
+  const commentsNode = h('section', { className: 'SN_noteDrawerComments', 'aria-label': t('drawer.comments', { count: comments.length }) },
+    h('div', { className: 'SN_noteDrawerCommentsHead' },
+      h('h3', { className: 'SN_noteViewSection' }, t('drawer.comments', { count: comments.length })),
+    ),
+    comments.length === 0
+      ? h('p', { className: 'SN_noteViewHint SN_commentEmpty' }, t('drawer.noComments'))
+      : h('div', { className: 'SN_noteDrawerCommentsBody' },
+        comments.map((comment, index) => h(NoteComment, { key: index, comment: comment })),
+      ),
+  );
+
+  // 抽屉操作条（§7.3.2）：header 分割线下方；锁定/未锁定都显示，编辑态隐藏。
+  // 左 = AI emoji；右上 = 归档 / 到项目 / 删除 / 复制全文；右下 = 紫色 Obsidian 图文入口。
+  const actionsNode = drawerActions
+    ? h('div', { className: 'SN_drawerActions' },
+      h('div', { className: 'SN_drawerActionLeft' },
+        drawerActions.pending
+          ? h('span', { className: 'SN_pending' },
+            h('span', { className: 'SN_pendingDot', 'aria-hidden': 'true' }),
+            t('card.pending'),
+          )
+          : (Array.isArray(drawerActions.emojis) ? drawerActions.emojis : []).length === 0
+            ? h('span', { className: 'SN_aiEmpty' }, t('card.noPresets'))
+            : (drawerActions.emojis || []).map((emoji) => h('button', {
+              key: emoji.id || emoji.emoji,
+              type: 'button',
+              className: 'SN_aiBtn',
+              'aria-label': emojiLabel(emoji) || emoji.emoji || t('card.aiComment'),
+              onClick: (event) => {
+                event.stopPropagation();
+                drawerActions.onComment(emoji);
+              },
+            },
+              h('span', { className: 'SN_aiEmoji', 'aria-hidden': 'true' }, emoji.emoji || '✨'),
+              h('span', { className: 'SN_aiLabel', 'aria-hidden': 'true' }, emoji.label || emoji.emoji || ''),
+            )),
+      ),
+      h('div', { className: 'SN_drawerActionRight' },
+        h('div', { className: 'SN_drawerActionTop' }, [
+          { kind: 'archive', label: t('card.archive'), onClick: drawerActions.onToggleArchive,
+            disabled: Boolean(drawerActions.pending), 'data-sn-drawer-menu-trigger': '',
+            'aria-haspopup': 'menu', 'aria-expanded': drawerActions.archiveOpen ? 'true' : 'false' },
+          { kind: 'project', label: t('card.project'), onClick: drawerActions.onProject, disabled: Boolean(drawerActions.pending) },
+          { kind: 'delete', label: t('card.delete'), onClick: drawerActions.onDelete, disabled: Boolean(drawerActions.pending) },
+          { kind: 'copy', label: t('drawer.copy'), onClick: drawerActions.onCopy },
+        ].map(({ kind, label, ...button }) => h('button', {
+          key: kind, type: 'button', ...button,
+          className: 'SN_drawerActionBtn' + (kind === 'delete' ? ' SN_drawerDeleteBtn' : ''),
+          'aria-label': label,
+        }, h(ActionIcon, { kind, size: 15 }), h('span', { className: 'SN_aiLabel', 'aria-hidden': 'true' }, label)))),
+        h('button', {
+          type: 'button', className: 'SN_mini SN_obsidianBtn',
+          'aria-label': t('card.obsidian'), onClick: drawerActions.onOpenObsidian,
+        }, h(ObsidianIcon, null), h('span', { className: 'SN_obsidianText' }, t('card.obsidian'))),
+        drawerActions.archiveOpen
+          ? h('div', {
+            className: 'SN_drawerMenu',
+            role: 'menu',
+            ref: drawerActions.menuRef,
+            'aria-label': t('archive.aria'),
+            onClick: (event) => event.stopPropagation(),
+          },
+            h('div', { className: 'SN_menuTitle' }, t('archive.menuTitle')),
+            (Array.isArray(drawerActions.targets) ? drawerActions.targets : []).length === 0
+              ? h('div', { className: 'SN_menuEmpty' }, t('archive.emptyHint'))
+              : (drawerActions.targets || []).map((target) => h('button', {
+                key: target.id,
+                type: 'button',
+                className: 'SN_menuItem',
+                role: 'menuitem',
+                onClick: (event) => {
+                  event.stopPropagation();
+                  drawerActions.onArchive(target.id);
+                },
+              },
+                h('span', { className: 'SN_menuLabel' }, target.label || target.id),
+                h('span', { className: 'SN_menuPath', title: target.path }, target.path),
+              )),
+          )
+          : null,
+      ),
+    )
+    : null;
+  const drawerNode = h('aside', {
+    className: 'SN_noteDrawer',
+    'data-pinned': pinned ? 'true' : 'false',
+    role: 'dialog',
+    'aria-label': t('drawer.aria'),
+    style: { ...drawerStyle, '--sn-card-bg': source.color || DEFAULT_NOTE_COLOR, '--sn-card-bg-dark': source.darkColor || source.color || DEFAULT_NOTE_COLOR },
+  },
+    h('div', {
+      className: 'SN_noteDrawerHandle',
+      role: 'separator',
+      'aria-orientation': 'vertical',
+      'aria-label': t('drawer.resize'),
+      title: t('drawer.resize'),
+      'data-resizing': resizing ? 'true' : 'false',
+      onPointerDown: onResizeStart,
+      onDoubleClick: onResizeReset,
+    }),
+    h('div', { className: 'SN_noteDrawerHead' },
+      h('div', { className: 'SN_noteDrawerHeadMain' },
+        editing
+          // 第 4 轮：标题编辑改成多行 textarea，完整换行显示，不再需要横向滚动到文件名尾部。
+          ? h('textarea', {
+            className: 'SN_titleEditor',
+            ref: titleEditorRef,
+            value: titleDraft,
+            rows: 1,
+            maxLength: 60,
+            wrap: 'soft',
+            spellCheck: false,
+            'aria-label': '便签文件名',
+            onChange: (event) => onTitleChange(event.target.value.replace(/[\r\n]+/g, ' ')),
+            onKeyDown: (event) => {
+              // 文件名不能换行：Enter 不输入换行（保存仍用 Cmd/Ctrl+S 或按钮）。
+              if (event.key === 'Enter') event.preventDefault();
+            },
+          })
+          : h('h2', {
+            className: 'SN_noteDrawerTitle',
+            title: title,
+            // 0.13：双击标题进入编辑态（编辑态标题就是 input）；标题不再带 byline。
+            onDoubleClick: canEdit ? onStartEdit : undefined,
+          }, title),
+        h('div', { className: 'SN_noteDrawerMeta' },
+          tag ? h('span', { className: 'SN_noteDrawerTag', title: tag }, tag) : null,
+          updated ? h('span', null, updated) : null,
+        ),
+      ),
+      h('div', { className: 'SN_noteDrawerHeadActions' },
+        h('button', {
+          type: 'button',
+          className: 'SN_iconBtn',
+          'data-active': pinned ? 'true' : 'false',
+          'aria-pressed': pinned ? 'true' : 'false',
+          'aria-label': pinned ? t('drawer.unlock') : t('drawer.lock'),
+          title: pinned ? t('drawer.unlock') : t('drawer.lock'),
+          onClick: onTogglePinned,
+        }, h(PinIcon, { pinned: pinned })),
+        // 第 3 轮：锁定态不渲染关闭按钮（只留锁定/解锁）；Esc 仍可关。
+        pinned
+          ? null
+          : h('button', {
+            type: 'button',
+            className: 'SN_iconBtn',
+            onClick: onClose,
+            'aria-label': t('drawer.close'),
+            title: t('drawer.close'),
+          }, h(CloseIcon, null)),
+      ),
+    ),
+    editing
+      ? h('div', { className: 'SN_noteEdit' },
+        h('textarea', {
+          className: 'SN_noteEditor',
+          value: bodyDraft,
+          spellCheck: false,
+          autoFocus: true,
+          disabled: saving,
+          'aria-label': t('drawer.bodyAria'),
+          onChange: (event) => onBodyChange(event.target.value),
+        }),
+        h('div', { className: 'SN_noteEditBar' },
+          h('span', { className: 'SN_noteEditHint' }, saving ? t('drawer.saving') : t('drawer.shortcutHint')),
+          h('div', { className: 'SN_noteEditActions' },
+            h('button', {
+              type: 'button',
+              className: 'SN_ghostBtn',
+              disabled: saving,
+              onClick: onCancelEdit,
+            }, t('drawer.cancel')),
+            h('button', {
+              type: 'button',
+              className: 'SN_primaryBtn',
+              disabled: saving,
+              onClick: onSave,
+            }, saving ? t('drawer.saving') : t('drawer.save')),
+          ),
+        ),
+      )
+      : h(Fragment, null, actionsNode, bodyNode, commentsNode),
+  );
+
+  if (inline) return drawerNode;
+  return h('div', { className: 'SN_noteDrawerLayer' }, drawerNode);
+}
+
+export { NoteDrawer };

package/src/client/reader/use-dock-offset.js

@@ -0,0 +1,23 @@
+/** 测量浮动阅读面板宽度，为底部输入和拖拽操作栏预留空间。 */
+import { React } from '../react.js';
+
+function useDockOffset({ effectiveDrawerWidth, noteDrawer, panelRef, pinned }) {
+  const [dockRight, setDockRight] = React.useState(0);
+
+  React.useLayoutEffect(() => {
+    const panel = panelRef.current;
+    const drawer = panel?.querySelector('.SN_noteDrawer');
+    if (!drawer || pinned) { setDockRight(0); return undefined; }
+    // 进场动画会临时平移面板；宽度不受 transform 影响，避免把动画偏移当作留白。
+    const measure = () => setDockRight(Math.max(0, drawer.getBoundingClientRect().width));
+    measure();
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : null;
+    observer?.observe(drawer);
+    observer?.observe(panel);
+    return () => observer?.disconnect();
+  }, [Boolean(noteDrawer), pinned, effectiveDrawerWidth]);
+
+  return { dockRight };
+}
+
+export { useDockOffset };

package/src/client/reader/use-drawer-layout.js

@@ -0,0 +1,96 @@
+/** 抽屉宽度、拖动监听和钉住偏好；卸载时清理指针监听。 */
+import {
+  clampDrawerWidth, clearStoredDrawerWidth, readStoredDrawerWidth, readStoredPinned, storeDrawerWidth,
+  storePinned,
+} from '../preferences.js';
+import { React } from '../react.js';
+
+function useDrawerLayout({ panelRef }) {
+  const [drawerWidth, setDrawerWidth] = React.useState(readStoredDrawerWidth);
+  const [resizingDrawer, setResizingDrawer] = React.useState(false);
+  const resizingRef = React.useRef(false);
+  const resizeCleanupRef = React.useRef(null);
+  const [pinned, setPinned] = React.useState(readStoredPinned);
+  const pinnedUserClosedRef = React.useRef(false);
+  const [panelWidth, setPanelWidth] = React.useState(0);
+  const effectiveDrawerWidth = drawerWidth == null ? null : clampDrawerWidth(drawerWidth, panelWidth, pinned);
+
+  React.useEffect(() => {
+    const panel = panelRef.current;
+    if (!panel || typeof panel.getBoundingClientRect !== 'function') return undefined;
+    const measure = () => {
+      const rect = panel.getBoundingClientRect();
+      if (rect && Number.isFinite(rect.width) && rect.width > 0) setPanelWidth(rect.width);
+    };
+    measure();
+    if (typeof ResizeObserver === 'function') {
+      const observer = new ResizeObserver(measure);
+      observer.observe(panel);
+      return () => observer.disconnect();
+    }
+    window.addEventListener('resize', measure);
+    return () => window.removeEventListener('resize', measure);
+  }, []);
+
+  function startDrawerResize(event) {
+    if (event.button !== undefined && event.button !== 0) return;
+    event.stopPropagation();
+    const panel = panelRef.current;
+    if (!panel || typeof panel.getBoundingClientRect !== 'function') return;
+    const rect = panel.getBoundingClientRect();
+    if (!rect || rect.width <= 0) return;
+    const handle = event.currentTarget;
+    if (handle && typeof handle.setPointerCapture === 'function' && event.pointerId !== undefined) {
+      try { handle.setPointerCapture(event.pointerId); } catch (error) { /* 忽略 */ }
+    }
+    resizingRef.current = true;
+    setResizingDrawer(true);
+    const removeListeners = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onFinish);
+      window.removeEventListener('pointercancel', onFinish);
+    };
+    const onMove = (moveEvent) => {
+      if (!resizingRef.current) return;
+      setDrawerWidth(clampDrawerWidth(rect.right - moveEvent.clientX, rect.width, pinned));
+    };
+    const onFinish = () => {
+      removeListeners();
+      resizingRef.current = false;
+      resizeCleanupRef.current = null;
+      setResizingDrawer(false);
+      setDrawerWidth((current) => {
+        if (typeof current === 'number' && Number.isFinite(current)) storeDrawerWidth(current);
+        return current;
+      });
+    };
+    resizeCleanupRef.current = removeListeners;
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onFinish);
+    window.addEventListener('pointercancel', onFinish);
+  }
+
+  function resetDrawerWidth() {
+    if (resizeCleanupRef.current) {
+      resizeCleanupRef.current();
+      resizeCleanupRef.current = null;
+    }
+    resizingRef.current = false;
+    setResizingDrawer(false);
+    setDrawerWidth(null);
+    clearStoredDrawerWidth();
+  }
+
+  function togglePinned() {
+    const next = !pinned;
+    setPinned(next);
+    storePinned(next);
+  }
+  React.useEffect(() => () => {
+    resizeCleanupRef.current?.();
+    resizeCleanupRef.current = null;
+  }, []);
+  return { resizingDrawer, setResizingDrawer, resizingRef, resizeCleanupRef, pinned, pinnedUserClosedRef, effectiveDrawerWidth, startDrawerResize, resetDrawerWidth, togglePinned };
+}
+
+export { useDrawerLayout };