dsh-obsidian-memo 0.16.3

package/scripts/build-client.mjs

@@ -0,0 +1,39 @@
+import { build, context } from 'esbuild'
+import { readFile, writeFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+
+const root = fileURLToPath(new URL('..', import.meta.url))
+const target = new URL('../lib/client.js', import.meta.url)
+const options = {
+  absWorkingDir: root,
+  entryPoints: ['src/client/index.js'],
+  bundle: true,
+  platform: 'browser',
+  format: 'cjs',
+  target: 'es2022',
+  external: ['react', 'react-dom'],
+  charset: 'utf8',
+  legalComments: 'none',
+  banner: { js: `// Generated by pnpm build. Edit src/client/, then rebuild.\nwindow.__ModuleLoader__.load({\n  id: 'dsh-obsidian-memo',\n  factory: (require) => {\n    const module = { exports: {} };\n    const exports = module.exports;` },
+  footer: { js: '    return module.exports;\n  },\n});' },
+  outfile: fileURLToPath(target),
+}
+
+if (process.argv.includes('--watch')) {
+  const watcher = await context(options)
+  await watcher.watch()
+  console.info('Watching src/client/ → lib/client.js')
+} else {
+  const result = await build({ ...options, write: false })
+  const output = result.outputFiles[0].text
+  if (process.argv.includes('--check')) {
+    const current = await readFile(target, 'utf8').catch(() => '')
+    if (current !== output) {
+      console.error('lib/client.js is out of date. Run pnpm build and include the generated file.')
+      process.exitCode = 1
+    }
+  } else {
+    await writeFile(target, output)
+    console.info('Built lib/client.js from src/client/')
+  }
+}

package/src/client/ai/use-comments.js

@@ -0,0 +1,75 @@
+/** 评论的本地 pending、重复确认与异步提交。 */
+import { React } from '../react.js';
+import { isAbortError } from '../utils.js';
+import { emojiLabel } from '../wall/model.js';
+
+function useComments({ aliveRef, emojis, pushErrorToast, pushToast, refreshNow, request, setDrawerArchive, setHoverPath, tRef, viewRef, watchedJobsRef }) {
+  const [commentConfirm, setCommentConfirm] = React.useState(null);
+  const [localPending, setLocalPending] = React.useState({});
+  const commentingRef = React.useRef(new Set());
+
+  function requestComment(note, emoji) {
+    // 第 3 轮：允许来自抽屉操作条的调用（卡片操作区在抽屉打开时仍然隐藏）。
+    if (!note || !emoji) return;
+    if (note.pending || localPending[note.path] || commentingRef.current.has(note.path)) return;
+    const kinds = Array.isArray(note.commentKinds) ? note.commentKinds : null;
+    const emojiChar = typeof emoji.emoji === 'string' ? emoji.emoji : '';
+    if (kinds && emojiChar !== '' && kinds.indexOf(emojiChar) >= 0) {
+      setCommentConfirm({ path: note.path, emojiId: emoji.id });
+      return;
+    }
+    runComment(note, emoji);
+  }
+
+  function closeCommentConfirm() {
+    setCommentConfirm(null);
+  }
+
+  function confirmComment() {
+    const target = commentConfirm;
+    if (!target) return;
+    setCommentConfirm(null);
+    const note = viewRef.current.notes.find((item) => item.path === target.path);
+    const emoji = emojis.find((item) => item && item.id === target.emojiId) || null;
+    if (note && emoji) runComment(note, emoji);
+  }
+
+  function runComment(note, emoji) {
+    // 第 3 轮：允许来自抽屉操作条的调用。
+    if (!note || !emoji) return;
+    if (note.pending || localPending[note.path] || commentingRef.current.has(note.path)) return;
+    commentingRef.current.add(note.path);
+    // 进入 pending 后操作区被替换，菜单/悬停状态一并清掉。
+    setHoverPath(null);
+    setDrawerArchive(false);
+    setLocalPending((current) => Object.assign({}, current, {
+      [note.path]: { emoji: emoji.emoji || '✍️', label: emoji.label || '' },
+    }));
+    request('comment', { path: note.path, emojiId: emoji.id })
+      .then((value) => {
+        if (!aliveRef.current) return;
+        if (value && typeof value.jobId === 'string') {
+          watchedJobsRef.current.set(value.jobId, { kind: 'comment', at: Date.now() });
+        }
+        pushToast({ text: tRef.current('toast.commentStarted', { label: emojiLabel(emoji) || emoji.label || '' }) });
+        return refreshNow(false);
+      })
+      .catch((error) => {
+        if (aliveRef.current && !isAbortError(error)) pushErrorToast(error);
+      })
+      .then(() => {
+        commentingRef.current.delete(note.path);
+        if (!aliveRef.current) return;
+        setLocalPending((current) => {
+          if (!(note.path in current)) return current;
+          const next = Object.assign({}, current);
+          delete next[note.path];
+          return next;
+        });
+      });
+  }
+
+  return { commentConfirm, localPending, requestComment, closeCommentConfirm, confirmComment };
+}
+
+export { useComments };

package/src/client/ai/use-job-notifications.js

@@ -0,0 +1,53 @@
+/** 追踪已订阅任务，显示完成/失败/截断与预算设置提示。 */
+import { React } from '../react.js';
+
+function useJobNotifications({ onOpenSettings, pushErrorToast, pushToast, tRef }) {
+  const watchedJobsRef = React.useRef(new Map());
+
+  function pushBudgetToast(text, kind) {
+    pushToast({
+      text: text,
+      kind: kind,
+      timeout: 12000,
+      actions: [
+        { label: tRef.current('toast.budgetAction'), run: () => onOpenSettings() },
+        { label: tRef.current('toast.budgetAck'), run: () => {} },
+      ],
+    });
+  }
+
+  function processJobs(jobs) {
+    const list = Array.isArray(jobs) ? jobs : [];
+    const watched = watchedJobsRef.current;
+    if (watched.size === 0) return;
+    for (const job of list) {
+      if (!job || typeof job.id !== 'string') continue;
+      const info = watched.get(job.id);
+      if (!info) continue;
+      if (job.status === 'done') {
+        watched.delete(job.id);
+        if (job.truncated === true) {
+          // 有正文但撞上 token 上限：内容已写入，提示可能被截断并引导调预算。
+          pushBudgetToast(tRef.current(info.kind === 'project' ? 'toast.budgetProjectTruncated' : 'toast.budgetCommentTruncated'), 'info');
+        } else if (info.kind === 'project') {
+          pushToast({ text: tRef.current('toast.projectDone'), kind: 'success', timeout: 7000 });
+        } else {
+          pushToast({ text: tRef.current('toast.commentDone'), kind: 'success' });
+        }
+      } else if (job.status === 'error') {
+        watched.delete(job.id);
+        // 0.13：预算类失败给出可操作提示，而不是含糊的「模型没有产出内容」。
+        if (job.errorCode === 'llm-token-budget') pushBudgetToast(tRef.current('toast.budgetFailed'), 'error');
+        else pushErrorToast(new Error(job.error || tRef.current('toast.jobFailed')));
+      }
+    }
+    const now = Date.now();
+    for (const [id, info] of watched) {
+      if (now - info.at > 5 * 60000) watched.delete(id);
+    }
+  }
+
+  return { watchedJobsRef, processJobs };
+}
+
+export { useJobNotifications };

package/src/client/ai/use-project-dialog.js

@@ -0,0 +1,58 @@
+/** 开档名称草稿、提交状态与任务订阅。 */
+import { React } from '../react.js';
+import { isAbortError } from '../utils.js';
+
+function useProjectDialog({ aliveRef, pushErrorToast, pushToast, refreshNow, request, setDrawerArchive, setSortMenu, t, tRef, watchedJobsRef }) {
+  const [projectTarget, setProjectTarget] = React.useState(null);
+  const [projectName, setProjectName] = React.useState('');
+  const [projectBusy, setProjectBusy] = React.useState(false);
+
+  function openProjectDialog(note) {
+    if (!note) return;
+    setDrawerArchive(false);
+    setSortMenu(false);
+    setProjectName(note.name || note.title || '');
+    setProjectTarget(note);
+  }
+
+  function closeProjectDialog() {
+    if (projectBusy) return;
+    setProjectTarget(null);
+    setProjectName('');
+  }
+
+  function confirmProject() {
+    const note = projectTarget;
+    const name = projectName.trim();
+    if (!note || projectBusy) return;
+    if (name === '') {
+      pushToast({ text: t('project.needName'), kind: 'error' });
+      return;
+    }
+    setProjectBusy(true);
+    request('openProject', { path: note.path, name: name })
+      .then((value) => {
+        if (!aliveRef.current) return;
+        if (value && typeof value.jobId === 'string') {
+          watchedJobsRef.current.set(value.jobId, { kind: 'project', at: Date.now() });
+        }
+        setProjectTarget(null);
+        setProjectName('');
+        pushToast({ text: tRef.current('toast.projectStarted', { name: name }) });
+        if (value && typeof value.message === 'string' && value.message !== '') {
+          pushToast({ text: value.message, kind: 'info', timeout: 7000 });
+        }
+        return refreshNow(false);
+      })
+      .catch((error) => {
+        if (aliveRef.current && !isAbortError(error)) pushErrorToast(error);
+      })
+      .then(() => {
+        if (aliveRef.current) setProjectBusy(false);
+      });
+  }
+
+  return { projectTarget, projectName, setProjectName, projectBusy, openProjectDialog, closeProjectDialog, confirmProject };
+}
+
+export { useProjectDialog };

package/src/client/capture/composer.js

@@ -0,0 +1,266 @@
+/** 快速记录输入、草稿与附件预览；对象 URL 和提交锁由此持有。 */
+import { captureFiles, compressCaptureImage, readCaptureImage } from './images.js';
+import { captureFileDrag, captureRefocusField, focusCaptureOnTab } from './keyboard.js';
+import { ActionIcon, CloseIcon, RefreshIcon } from '../components/icons.js';
+import { CAPTURE_LIMIT_TEXT } from '../constants.js';
+import { DropActions } from '../drag/drop-actions.js';
+import { React, h } from '../react.js';
+import { makeError } from '../utils.js';
+
+function CaptureComposer(props) {
+  const {
+    t, onCreate, onCreated, onError, enabled, imageCompression, dragNote, archiveParked, dropAction,
+    dropTargetId, archiveTargets, onDragHover, onArchiveDrop, onArchiveChoose, onProjectDrop, onDeleteDrop,
+    showBackTop, onBackTop,
+  } = props;
+  const [title, setTitle] = React.useState('');
+  const [body, setBody] = React.useState('');
+  const [bodyOpen, setBodyOpen] = React.useState(false);
+  const [images, setImages] = React.useState([]);
+  const [expanded, setExpanded] = React.useState(false);
+  const [preview, setPreview] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const [dragging, setDragging] = React.useState(false);
+  const titleRef = React.useRef(null), bodyRef = React.useRef(null), fileRef = React.useRef(null), dockRef = React.useRef(null), formRef = React.useRef(null), dragDepthRef = React.useRef(0);
+  const titleMeasureRef = React.useRef(null);
+  const imagesRef = React.useRef([]), busyRef = React.useRef(false), aliveRef = React.useRef(true), previewTimer = React.useRef(null), refocusRef = React.useRef(null);
+  React.useEffect(() => {
+    aliveRef.current = true;
+    return () => {
+      aliveRef.current = false;
+      clearTimeout(previewTimer.current);
+      imagesRef.current.forEach((item) => URL.revokeObjectURL(item.url));
+    };
+  }, []);
+  React.useEffect(() => {
+    if (enabled || busy) return;
+    clearTimeout(previewTimer.current);
+    imagesRef.current.forEach((item) => URL.revokeObjectURL(item.url));
+    imagesRef.current = [];
+    setImages([]); setPreview(null); setExpanded(false);
+  }, [enabled, busy]);
+  React.useEffect(() => { if (bodyOpen && bodyRef.current) bodyRef.current.focus(); }, [bodyOpen]);
+  React.useEffect(() => {
+    if (!enabled || dragNote || typeof document === 'undefined') return undefined;
+    const onKeyDown = (event) => focusCaptureOnTab(event, {
+      panel: dockRef.current?.closest('.SN_panel'), form: formRef.current, title: titleRef.current, busy: busyRef.current,
+    });
+    // 捕获阶段先处理 Enter，避免卡片/按钮的处理器或默认点击抢先打开详情。
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [enabled, dragNote]);
+  React.useLayoutEffect(() => {
+    const field = titleRef.current;
+    if (!field || dragNote) return undefined;
+    const measure = () => {
+      const mirror = titleMeasureRef.current;
+      if (mirror && !bodyOpen) field.style.width = Math.ceil(mirror.getBoundingClientRect().width + 4) + 'px';
+      else field.style.width = '';
+      field.style.height = 'auto'; field.style.height = field.scrollHeight + 'px';
+    };
+    measure();
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : null;
+    if (observer && formRef.current) observer.observe(formRef.current);
+    return () => observer?.disconnect();
+  }, [title, enabled, dragNote, bodyOpen, t]);
+  React.useEffect(() => {
+    if (busy) return;
+    const field = refocusRef.current;
+    if (field === null) return;
+    refocusRef.current = null;
+    const target = field === 'body' && bodyRef.current ? bodyRef.current : titleRef.current;
+    if (target) target.focus();
+  }, [busy]);
+  React.useLayoutEffect(() => {
+    const dock = dockRef.current, wall = dock && dock.parentElement;
+    if (!dock || !wall) return undefined;
+    const measure = () => wall.style.setProperty('--sn-capture-height', dock.offsetHeight + 'px');
+    measure();
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : null;
+    if (observer) observer.observe(dock);
+    return () => { if (observer) observer.disconnect(); wall.style.removeProperty('--sn-capture-height'); };
+  }, [enabled]);
+  function hidePreview() { clearTimeout(previewTimer.current); setPreview(null); }
+  function previewImage(image) {
+    hidePreview();
+    previewTimer.current = setTimeout(() => { if (aliveRef.current) setPreview(image); }, 600);
+  }
+  function attach(files) {
+    if (busyRef.current) return;
+    const error = captureFiles(imagesRef.current.map((item) => item.file), files, imageCompression);
+    if (error) { onError(makeError('bad-request', t(error, CAPTURE_LIMIT_TEXT))); return; }
+    const added = Array.from(files || []).map((file) => ({ file, url: URL.createObjectURL(file) }));
+    imagesRef.current = imagesRef.current.concat(added);
+    setImages(imagesRef.current);
+  }
+  function remove(image) {
+    if (busyRef.current) return;
+    hidePreview();
+    URL.revokeObjectURL(image.url);
+    imagesRef.current = imagesRef.current.filter((item) => item !== image);
+    setImages(imagesRef.current);
+  }
+  async function submit(event) {
+    if (event) event.preventDefault();
+    if (busyRef.current || !enabled || !title.trim()) return;
+    refocusRef.current = captureRefocusField(typeof document === 'undefined' ? null : document.activeElement, bodyRef.current);
+    busyRef.current = true;
+    setBusy(true);
+    hidePreview();
+    try {
+      const inputError = captureFiles([], imagesRef.current.map((item) => item.file), imageCompression);
+      if (inputError) throw makeError('bad-request', t(inputError, CAPTURE_LIMIT_TEXT));
+      const encoded = [], processed = [];
+      for (const item of imagesRef.current) {
+        const file = await compressCaptureImage(item.file, imageCompression);
+        if (!aliveRef.current) return;
+        processed.push(file);
+        const error = captureFiles([], processed, { enabled: false });
+        if (error) throw makeError('too-large', t(error, CAPTURE_LIMIT_TEXT));
+        encoded.push(await readCaptureImage(file));
+      }
+      if (!aliveRef.current) return;
+      const result = await onCreate({ title, body, images: encoded });
+      if (!aliveRef.current) return;
+      imagesRef.current.forEach((item) => URL.revokeObjectURL(item.url));
+      imagesRef.current = [];
+      refocusRef.current = 'title';
+      setImages([]); setTitle(''); setBody(''); setBodyOpen(false); setExpanded(false);
+      onCreated(result);
+    } catch (error) {
+      if (aliveRef.current) onError(['capture.readFailed', 'capture.compressFailed'].includes(error.message) ? makeError('bad-request', t(error.message)) : error);
+    } finally {
+      busyRef.current = false;
+      if (aliveRef.current) setBusy(false);
+    }
+  }
+  function titleKeyDown(event) {
+    if (event.isComposing || event.nativeEvent?.isComposing || event.keyCode === 229) return;
+    if (event.key === 'Tab' && !event.shiftKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!busyRef.current) {
+        setBodyOpen(true);
+        if (bodyRef.current) bodyRef.current.focus();
+      }
+    } else if (event.key === 'Enter') { event.preventDefault(); event.stopPropagation(); submit(); }
+  }
+  if (!enabled) return null;
+  return h('div', { className: 'SN_captureDock', ref: dockRef, 'data-card-dragging': dragNote ? 'true' : 'false', 'data-drop': dropAction || '' },
+    showBackTop && !dragNote ? h('button', { type: 'button', className: 'SN_backTop', title: t('panel.backToTop'), 'aria-label': t('panel.backToTop'), onClick: onBackTop }, h(ActionIcon, { kind: 'up', size: 17 })) : null,
+    dragNote ? h(DropActions, {
+      t, active: dropAction, activeTargetId: dropTargetId, targets: archiveTargets || [], parked: archiveParked, onHover: onDragHover,
+      onArchive: onArchiveDrop, onArchiveChoose, onProject: onProjectDrop, onDelete: onDeleteDrop,
+    }) : null,
+    h('form', {
+      className: 'SN_capture', ref: formRef, 'data-body': bodyOpen ? 'true' : 'false', 'data-dragging': dragging ? 'true' : 'false',
+      'aria-label': t('capture.label'), 'aria-busy': busy, onSubmit: submit,
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget) && !body.trim()) { setBody(''); setBodyOpen(false); }
+      },
+      onDragEnter: (event) => {
+        if (!captureFileDrag(event)) return;
+        event.preventDefault(); event.stopPropagation();
+        dragDepthRef.current += 1;
+        if (!busyRef.current) setDragging(true);
+      },
+      onDragOver: (event) => {
+        if (!captureFileDrag(event)) return;
+        event.preventDefault(); event.stopPropagation();
+        event.dataTransfer.dropEffect = busyRef.current ? 'none' : 'copy';
+      },
+      onDragLeave: (event) => {
+        if (!dragDepthRef.current) return;
+        event.preventDefault(); event.stopPropagation();
+        dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+        if (!dragDepthRef.current) setDragging(false);
+      },
+      onDrop: (event) => {
+        if (!captureFileDrag(event)) return;
+        event.preventDefault(); event.stopPropagation();
+        dragDepthRef.current = 0; setDragging(false);
+        if (busyRef.current) return;
+        const files = Array.from(event.dataTransfer.files || []).filter((file) => file.type.startsWith('image/'));
+        if (!files.length) { onError(makeError('bad-request', t('capture.imageType'))); return; }
+        attach(files);
+        const field = bodyOpen ? bodyRef.current : titleRef.current;
+        if (field) field.focus();
+      },
+      onPaste: (event) => {
+        const files = Array.from(event.clipboardData?.items || []).filter((item) => item.kind === 'file').map((item) => item.getAsFile()).filter(Boolean);
+        if (!files.length) return;
+        if (!event.clipboardData.getData('text/plain')) event.preventDefault();
+        attach(files);
+      },
+      onKeyDown: (event) => {
+        if (event.isComposing || event.nativeEvent?.isComposing || event.keyCode === 229) return;
+        if (event.key === 'Escape') {
+          event.preventDefault(); event.stopPropagation();
+          if (!body.trim()) { setBody(''); setBodyOpen(false); }
+          if (typeof document !== 'undefined') document.activeElement?.blur();
+          return;
+        }
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { event.preventDefault(); event.stopPropagation(); submit(); }
+      },
+    },
+      h('div', {
+        className: 'SN_captureAttach', 'data-expanded': expanded ? 'true' : 'false',
+        onMouseEnter: () => setExpanded(true),
+        onMouseLeave: (event) => { hidePreview(); if (!event.currentTarget.contains(document.activeElement)) setExpanded(false); },
+        onFocus: () => setExpanded(true),
+        onBlur: (event) => { if (!event.currentTarget.contains(event.relatedTarget)) { hidePreview(); setExpanded(false); } },
+      },
+        h('button', { type: 'button', className: 'SN_captureAdd', disabled: busy, 'aria-label': t('capture.add'), title: t('capture.add'), onClick: () => fileRef.current && fileRef.current.click() },
+          h('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', 'aria-hidden': 'true' }, h('path', { d: 'M12 5v14M5 12h14', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round' }))),
+        h('input', { type: 'file', hidden: true, multiple: true, accept: 'image/png,image/jpeg,image/gif,image/webp', ref: fileRef, disabled: busy,
+          onChange: (event) => { attach(event.target.files); event.target.value = ''; } }),
+        images.length ? h('div', { className: 'SN_captureStack', 'aria-label': t('capture.images', { count: images.length }) },
+          images.map((image, index) => h('div', {
+            key: image.url, className: 'SN_captureThumb', tabIndex: 0,
+            onMouseEnter: () => previewImage(image), onMouseLeave: hidePreview,
+            onFocus: () => previewImage(image), onBlur: hidePreview,
+          },
+            h('img', { src: image.url, alt: image.file.name || String(index + 1) }),
+            h('button', { type: 'button', className: 'SN_captureRemove', disabled: busy, 'aria-label': t('capture.remove', { name: image.file.name || index + 1 }), onClick: () => remove(image) }, h(CloseIcon, null)),
+          ))) : null,
+        preview ? h('div', { className: 'SN_capturePreview', role: 'tooltip' }, h('img', { src: preview.url, alt: preview.file.name })) : null,
+      ),
+      h('div', { className: 'SN_captureFields' },
+        h('div', { className: 'SN_captureTitleRow' },
+          h('span', { ref: titleMeasureRef, className: 'SN_captureTitleMeasure', 'aria-hidden': 'true' }, title || t('capture.placeholder')),
+          h('textarea', { className: 'SN_captureTitle', ref: titleRef, rows: 1, value: title, disabled: busy, autoComplete: 'off',
+            'aria-label': t('capture.title'), placeholder: t('capture.placeholder'), onChange: (event) => setTitle(event.target.value.replace(/[\r\n]+/g, ' ')), onKeyDown: titleKeyDown }),
+          !bodyOpen ? h('span', { className: 'SN_captureHint', 'aria-hidden': 'true' }, h('kbd', null, 'Tab'), t('capture.tab')) : null,
+        ),
+        bodyOpen ? h('textarea', { className: 'SN_captureBody', ref: bodyRef, value: body, disabled: busy, 'aria-label': t('capture.body'), placeholder: t('capture.bodyPlaceholder'),
+          onChange: (event) => {
+            const next = event.target.value;
+            setBody(next);
+            // 正文删空后回到「只输入标题」的小状态；聚焦回标题，避免 textarea 卸载后焦点掉到 body。
+            if (next === '' && !event.nativeEvent?.isComposing) {
+              setBodyOpen(false);
+              if (titleRef.current) titleRef.current.focus();
+              return;
+            }
+            event.target.style.height = 'auto';
+            event.target.style.height = Math.min(160, Math.max(68, event.target.scrollHeight)) + 'px';
+          },
+          onKeyDown: (event) => {
+            if (event.isComposing || event.nativeEvent?.isComposing || event.keyCode === 229) return;
+            if (event.key === 'Tab' && event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+              event.preventDefault(); event.stopPropagation();
+              if (titleRef.current) titleRef.current.focus();
+            } else if (event.key === 'Backspace' && !body.trim()) {
+              event.preventDefault(); event.stopPropagation(); setBody(''); setBodyOpen(false); titleRef.current?.focus();
+            }
+          } }) : null,
+        bodyOpen ? h('span', { className: 'SN_captureSubmitHint' }, t('capture.submitHint')) : null,
+      ),
+      h('button', { type: 'submit', className: 'SN_captureSend', disabled: busy || !title.trim(), 'aria-label': t(busy ? 'capture.sending' : 'capture.send'), title: t('capture.shortcut') },
+        busy ? h(RefreshIcon, { spinning: true }) : h('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', 'aria-hidden': 'true' }, h('path', { d: 'M12 18V6m-5 5 5-5 5 5', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' }))),
+      h('span', { className: 'SN_captureStatus', role: 'status', 'aria-live': 'polite' }, busy ? t('capture.sending') : images.length ? t('capture.images', { count: images.length }) : ''),
+    ),
+  );
+}
+
+export { CaptureComposer };

package/src/client/capture/images.js

@@ -0,0 +1,64 @@
+/** 图片数量/大小校验、读取与 WebP 编码；不发送 RPC。 */
+import {
+  CAPTURE_IMAGES, CAPTURE_IMAGE_BYTES, CAPTURE_SOURCE_IMAGE_BYTES, CAPTURE_SOURCE_TOTAL_BYTES,
+  CAPTURE_TOTAL_BYTES,
+} from '../constants.js';
+import { makeError } from '../utils.js';
+
+function readImageCompression(raw) {
+  const source = raw && typeof raw === 'object' ? raw : {};
+  const number = (value, fallback, min, max) => typeof value !== 'number' || !Number.isFinite(value)
+    ? fallback : Math.min(max, Math.max(min, Math.round(value)));
+  return { enabled: source.enabled !== false, quality: number(source.quality, 70, 1, 100), maxDimension: number(source.maxDimension, 2048, 256, 8192) };
+}
+
+function captureImageSize(width, height, maxDimension) {
+  const ratio = Math.min(1, maxDimension / Math.max(width, height));
+  return { width: Math.max(1, Math.round(width * ratio)), height: Math.max(1, Math.round(height * ratio)) };
+}
+
+async function compressCaptureImage(file, options) {
+  const config = readImageCompression(options);
+  if (!config.enabled) return file;
+  const url = URL.createObjectURL(file);
+  const image = new Image();
+  const canvas = document.createElement('canvas');
+  try {
+    await new Promise((resolve, reject) => { image.onload = resolve; image.onerror = reject; image.src = url; });
+    if (!image.naturalWidth || !image.naturalHeight) throw new Error('Invalid dimensions');
+    const size = captureImageSize(image.naturalWidth, image.naturalHeight, config.maxDimension);
+    canvas.width = size.width; canvas.height = size.height;
+    canvas.getContext('2d').drawImage(image, 0, 0, size.width, size.height);
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/webp', config.quality / 100));
+    if (!blob || blob.type !== 'image/webp') throw new Error('WebP encoding unavailable');
+    return blob;
+  } catch {
+    throw makeError('bad-request', 'capture.compressFailed');
+  } finally {
+    URL.revokeObjectURL(url);
+    canvas.width = 0; canvas.height = 0;
+  }
+}
+
+function captureFiles(existing, files, compression) {
+  const next = Array.from(files || []);
+  if (next.some((file) => !/^image\/(png|jpeg|gif|webp)$/.test(file.type))) return 'capture.imageType';
+  const compress = readImageCompression(compression).enabled;
+  const [maxImageBytes, maxTotalBytes] = compress
+    ? [CAPTURE_SOURCE_IMAGE_BYTES, CAPTURE_SOURCE_TOTAL_BYTES]
+    : [CAPTURE_IMAGE_BYTES, CAPTURE_TOTAL_BYTES];
+  if (existing.length + next.length > CAPTURE_IMAGES || next.some((file) => file.size > maxImageBytes)
+    || existing.concat(next).reduce((sum, file) => sum + file.size, 0) > maxTotalBytes) return compress ? 'capture.sourceLimit' : 'capture.imageLimit';
+  return '';
+}
+
+function readCaptureImage(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve({ dataUrl: reader.result });
+    reader.onerror = reader.onabort = () => reject(makeError('bad-request', 'capture.readFailed'));
+    reader.readAsDataURL(file);
+  });
+}
+
+export { readImageCompression, captureImageSize, compressCaptureImage, captureFiles, readCaptureImage };

package/src/client/capture/keyboard.js

@@ -0,0 +1,34 @@
+/** 输入岛焦点和外部图片拖入判断，避免抢占正文编辑快捷键。 */
+import { panelIsVisible } from '../data/visibility.js';
+
+const CAPTURE_TAB_PASSTHROUGH = 'button,a,input,textarea,select,[contenteditable]:not([contenteditable="false"]),[role="button"],[role="textbox"],[role="menuitem"],[tabindex]';
+
+function focusCaptureOnTab(event, { panel, form, title, busy }) {
+  if (!panel || !form || !title || busy || event.defaultPrevented || !['Tab', 'Enter'].includes(event.key)
+    || event.isComposing || event.nativeEvent?.isComposing || event.keyCode === 229 || !panelIsVisible(panel)) return false;
+  const target = event.target;
+  if (target && (form.contains(target) || target.closest?.('.SN_noteEditor'))) return false;
+  const doc = panel.ownerDocument;
+  const atPageRoot = Boolean(target) && (target === doc?.body || target === doc?.documentElement || target === doc);
+  if (!atPageRoot && !(target && panel.contains(target))) return false;
+  if (event.key === 'Tab') {
+    if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) return false;
+    // Tab 仍保留按钮、卡片、输入框与浮层的原生焦点顺序。
+    if (target?.closest?.(CAPTURE_TAB_PASSTHROUGH) ||
+      panel.querySelector('[aria-modal="true"],[role="menu"],.SN_drawer,.SN_projectOverlay,.SN_noteDrawer,[role="dialog"]')) return false;
+  }
+  event.preventDefault();
+  event.stopPropagation?.();
+  title.focus();
+  return true;
+}
+
+function captureRefocusField(active, bodyElement) {
+  return active && active === bodyElement ? 'body' : 'title';
+}
+
+function captureFileDrag(event) {
+  return Array.from(event.dataTransfer?.types || []).includes('Files') || Boolean(event.dataTransfer?.files?.length);
+}
+
+export { focusCaptureOnTab, captureRefocusField, captureFileDrag };

package/src/client/components/dialogs.js

@@ -0,0 +1,67 @@
+/** 项目名称和重复评论确认框；不发送 RPC。 */
+import { h } from '../react.js';
+
+function ProjectDialog(props) {
+  const { t, note, name, busy, onName, onConfirm, onCancel } = props;
+  const title = note.title || note.name || '';
+  return h('div', {
+    className: 'SN_dialogLayer',
+    onMouseDown: (event) => {
+      if (event.target === event.currentTarget && !busy) onCancel();
+    },
+  },
+    h('div', { className: 'SN_dialog', role: 'dialog', 'aria-modal': 'true', 'aria-label': t('project.title') },
+      h('h2', { className: 'SN_dialogTitle' }, t('project.title')),
+      h('p', { className: 'SN_dialogText' }, t('project.desc', { name: title })),
+      h('label', { className: 'SN_field' },
+        h('span', { className: 'SN_fieldLabel' }, t('project.nameLabel')),
+        h('input', {
+          type: 'text',
+          className: 'SN_textInput',
+          autoFocus: true,
+          value: name,
+          disabled: busy,
+          placeholder: t('project.namePlaceholder'),
+          onChange: (event) => onName(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              event.stopPropagation();
+              if (!busy) onConfirm();
+            }
+          },
+        }),
+      ),
+      h('div', { className: 'SN_dialogActions' },
+        h('button', { type: 'button', className: 'SN_ghostBtn', disabled: busy, onClick: onCancel }, t('project.cancel')),
+        h('button', {
+          type: 'button',
+          className: 'SN_primaryBtn',
+          disabled: busy || name.trim() === '',
+          onClick: onConfirm,
+        }, busy ? t('project.busy') : t('project.confirm')),
+      ),
+    ),
+  );
+}
+
+function ConfirmDialog(props) {
+  const { title, text, confirmLabel, cancelLabel, onConfirm, onCancel } = props;
+  return h('div', {
+    className: 'SN_dialogLayer',
+    onMouseDown: (event) => {
+      if (event.target === event.currentTarget) onCancel();
+    },
+  },
+    h('div', { className: 'SN_dialog', role: 'dialog', 'aria-modal': 'true', 'aria-label': title },
+      h('h2', { className: 'SN_dialogTitle' }, title),
+      h('p', { className: 'SN_dialogText' }, text),
+      h('div', { className: 'SN_dialogActions' },
+        h('button', { type: 'button', className: 'SN_ghostBtn', onClick: onCancel }, cancelLabel),
+        h('button', { type: 'button', className: 'SN_primaryBtn', autoFocus: true, onClick: onConfirm }, confirmLabel),
+      ),
+    ),
+  );
+}
+
+export { ProjectDialog, ConfirmDialog };