dsh-tiddlywiki 0.16.13 → 0.16.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-tiddlywiki",
   "description": "TiddlyWiki 5 as the DSH persistent knowledge base: tiddlywiki_* agent tools (search with filters/recent/tags/batch/rename + git sync & conflict resolve), a full TiddlyWiki editor embedded in the GUI center column (same-origin proxy, works over Tailscale/LAN/domain), a quick-note card with draft auto-save & recent-notes picker behind a single knowledge FAB, and git-based sync with auto-commit. Mounts via the official dsh plugin system — no DSH source changes.",
-  "version": "0.16.13",
+  "version": "0.16.14",
   "type": "module",
   "keywords": [
     "dsh",

package/src/client/endpoints.ts

@@ -1,10 +1,10 @@
-/**
- * Same-origin DSH endpoints the client calls. The authoritative route table
- * lives in src/host/routes.ts (see AGENTS.md §1「DSH 路由」) — this is just the
- * client-side mirror, so the path string exists once per endpoint instead of
- * being re-typed in every widget.
- *
- * @module dsh-tiddlywiki/client/endpoints
- */
-export const STATUS_ENDPOINT = '/dsh-tiddlywiki/status'
-export const GET_ENDPOINT = '/dsh-tiddlywiki/get'
+/**
+ * Same-origin DSH endpoints the client calls. The authoritative route table
+ * lives in src/host/routes.ts (see AGENTS.md §1「DSH 路由」) — this is just the
+ * client-side mirror, so the path string exists once per endpoint instead of
+ * being re-typed in every widget.
+ *
+ * @module dsh-tiddlywiki/client/endpoints
+ */
+export const STATUS_ENDPOINT = '/dsh-tiddlywiki/status'
+export const GET_ENDPOINT = '/dsh-tiddlywiki/get'

package/src/client/markdown-editor.ts

@@ -1,128 +1,128 @@
-/**
- * CodeMirror 6 Markdown editor for the quick-note widget (replaces the
- * hand-rolled regex highlighter in the old markdown.ts — real Lezer syntax
- * tree, proper GFM coverage, undo/redo, and a native editing surface).
- *
- * The widget stays a plain-DOM product: CodeMirror is framework-agnostic, so
- * no React is pulled in. The editor is built into a wrapper `<div>`
- * (`.dsh-tw-note-editor`) that the widget can append, drag-drop onto, and
- * re-read via `getValue()`/`setValue()`.
- *
- * Theming follows the DSH design tokens (`--dsw-alias-*`) through a
- * `HighlightStyle` that maps Markdown tags onto the same palette the old
- * `.md-*` rules used, so light/dark both look right.
- *
- * @module dsh-tiddlywiki/client/markdown-editor
- */
-import { EditorView, keymap, placeholder, drawSelection } from '@codemirror/view'
-import { EditorState } from '@codemirror/state'
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
-import { syntaxHighlighting, HighlightStyle } from '@codemirror/language'
-import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
-import { tags as t } from '@lezer/highlight'
-
-/** Design-token aliases (same values as styles.ts / the old .md-* rules). */
-const BRAND = 'var(--dsw-alias-brand-primary, #3e63dd)'
-const BRAND_DIM = 'color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 55%, transparent)'
-const SECONDARY = 'var(--dsw-alias-label-secondary, #888)'
-const DIMMED = 'var(--dsw-alias-label-dimmed, #999)'
-const MONO = 'ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace'
-const CODE_BG = 'color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 12%, transparent)'
-const CODE_BLOCK_BG = 'color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 8%, transparent)'
-
-/** Markdown token → design-token style map (mirrors the old .md-* palette). */
-const mdHighlight = HighlightStyle.define([
-  // Headings (# … ######) — brand + bold.
-  { tag: [t.heading1, t.heading2, t.heading3, t.heading4, t.heading5, t.heading6], color: BRAND, fontWeight: '700' },
-  // Markers: #, >, -, *, `, [ ] etc.
-  { tag: t.processingInstruction, color: BRAND_DIM },
-  // Inline code + fenced code text — monospace, tinted background.
-  { tag: t.monospace, fontFamily: MONO, backgroundColor: CODE_BG, borderRadius: '4px', padding: '0 3px' },
-  // Code block content (inside a fence) gets a slightly wider tint.
-  { tag: t.content, fontFamily: MONO, backgroundColor: CODE_BLOCK_BG },
-  { tag: t.strong, fontWeight: '700' },
-  { tag: t.emphasis, fontStyle: 'italic' },
-  { tag: t.strikethrough, textDecoration: 'line-through', opacity: '.75' },
-  { tag: t.link, color: BRAND, textDecoration: 'underline' },
-  { tag: t.url, color: BRAND_DIM, textDecoration: 'underline dotted' },
-  { tag: t.quote, fontStyle: 'italic', color: SECONDARY },
-  { tag: t.contentSeparator, color: DIMMED, textDecoration: 'line-through' },
-  { tag: t.comment, color: DIMMED },
-])
-
-/** Public editor surface the quick-note widget consumes. */
-export interface MarkdownEditor {
-  /** Wrapper element (append/drag-target). */
-  el: HTMLDivElement
-  /** The CodeMirror EditorView (advanced use / future extensions). */
-  view: EditorView
-  getValue(): string
-  setValue(value: string): void
-  /** Insert a Markdown line at the current caret (used by file upload). */
-  insertAtCaret(markdown: string): void
-  focus(): void
-}
-
-export interface MarkdownEditorOptions {
-  /** Placeholder text shown when the doc is empty. */
-  placeholder?: string
-  /** Called on Ctrl/Cmd+Enter (wired after save is defined by the widget). */
-  onSave?: () => void
-  /** Called after every doc change (used for draft auto-save). */
-  onChange?: () => void
-}
-
-/**
- * Build a CodeMirror 6 Markdown editor inside `.dsh-tw-note-editor`.
- * GFM base language (strikethrough, tables, task lists, autolinks) — strictly
- * more coverage than the old regex highlighter.
- */
-export function buildMarkdownEditor(opts: MarkdownEditorOptions = {}): MarkdownEditor {
-  const wrap = document.createElement('div')
-  wrap.className = 'dsh-tw-note-editor'
-
-  const view = new EditorView({
-    parent: wrap,
-    state: EditorState.create({
-      doc: '',
-      extensions: [
-        EditorView.lineWrapping,
-        history(),
-        markdown({ base: markdownLanguage }),
-        syntaxHighlighting(mdHighlight),
-        drawSelection(),
-        placeholder(opts.placeholder ?? ''),
-        keymap.of([
-          ...defaultKeymap,
-          ...historyKeymap,
-          { key: 'Mod-Enter', run: () => { opts.onSave?.(); return true } },
-        ]),
-        EditorView.updateListener.of((update) => {
-          if (update.docChanged) opts.onChange?.()
-        }),
-      ],
-    }),
-  })
-
-  return {
-    el: wrap,
-    view,
-    getValue: () => view.state.doc.toString(),
-    setValue(value: string) {
-      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } })
-    },
-    insertAtCaret(markdownLine: string) {
-      const { from } = view.state.selection.main
-      const line = view.state.doc.lineAt(from)
-      const atLineStart = from === line.from
-      const insert = `${atLineStart ? '' : '\n'}${markdownLine}\n`
-      view.dispatch({
-        changes: { from, insert },
-        selection: { anchor: from + insert.length },
-        scrollIntoView: true,
-      })
-      view.focus()
-    },
-    focus: () => view.focus(),
-  }
-}
+/**
+ * CodeMirror 6 Markdown editor for the quick-note widget (replaces the
+ * hand-rolled regex highlighter in the old markdown.ts — real Lezer syntax
+ * tree, proper GFM coverage, undo/redo, and a native editing surface).
+ *
+ * The widget stays a plain-DOM product: CodeMirror is framework-agnostic, so
+ * no React is pulled in. The editor is built into a wrapper `<div>`
+ * (`.dsh-tw-note-editor`) that the widget can append, drag-drop onto, and
+ * re-read via `getValue()`/`setValue()`.
+ *
+ * Theming follows the DSH design tokens (`--dsw-alias-*`) through a
+ * `HighlightStyle` that maps Markdown tags onto the same palette the old
+ * `.md-*` rules used, so light/dark both look right.
+ *
+ * @module dsh-tiddlywiki/client/markdown-editor
+ */
+import { EditorView, keymap, placeholder, drawSelection } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
+import { syntaxHighlighting, HighlightStyle } from '@codemirror/language'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { tags as t } from '@lezer/highlight'
+
+/** Design-token aliases (same values as styles.ts / the old .md-* rules). */
+const BRAND = 'var(--dsw-alias-brand-primary, #3e63dd)'
+const BRAND_DIM = 'color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 55%, transparent)'
+const SECONDARY = 'var(--dsw-alias-label-secondary, #888)'
+const DIMMED = 'var(--dsw-alias-label-dimmed, #999)'
+const MONO = 'ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace'
+const CODE_BG = 'color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 12%, transparent)'
+const CODE_BLOCK_BG = 'color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 8%, transparent)'
+
+/** Markdown token → design-token style map (mirrors the old .md-* palette). */
+const mdHighlight = HighlightStyle.define([
+  // Headings (# … ######) — brand + bold.
+  { tag: [t.heading1, t.heading2, t.heading3, t.heading4, t.heading5, t.heading6], color: BRAND, fontWeight: '700' },
+  // Markers: #, >, -, *, `, [ ] etc.
+  { tag: t.processingInstruction, color: BRAND_DIM },
+  // Inline code + fenced code text — monospace, tinted background.
+  { tag: t.monospace, fontFamily: MONO, backgroundColor: CODE_BG, borderRadius: '4px', padding: '0 3px' },
+  // Code block content (inside a fence) gets a slightly wider tint.
+  { tag: t.content, fontFamily: MONO, backgroundColor: CODE_BLOCK_BG },
+  { tag: t.strong, fontWeight: '700' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strikethrough, textDecoration: 'line-through', opacity: '.75' },
+  { tag: t.link, color: BRAND, textDecoration: 'underline' },
+  { tag: t.url, color: BRAND_DIM, textDecoration: 'underline dotted' },
+  { tag: t.quote, fontStyle: 'italic', color: SECONDARY },
+  { tag: t.contentSeparator, color: DIMMED, textDecoration: 'line-through' },
+  { tag: t.comment, color: DIMMED },
+])
+
+/** Public editor surface the quick-note widget consumes. */
+export interface MarkdownEditor {
+  /** Wrapper element (append/drag-target). */
+  el: HTMLDivElement
+  /** The CodeMirror EditorView (advanced use / future extensions). */
+  view: EditorView
+  getValue(): string
+  setValue(value: string): void
+  /** Insert a Markdown line at the current caret (used by file upload). */
+  insertAtCaret(markdown: string): void
+  focus(): void
+}
+
+export interface MarkdownEditorOptions {
+  /** Placeholder text shown when the doc is empty. */
+  placeholder?: string
+  /** Called on Ctrl/Cmd+Enter (wired after save is defined by the widget). */
+  onSave?: () => void
+  /** Called after every doc change (used for draft auto-save). */
+  onChange?: () => void
+}
+
+/**
+ * Build a CodeMirror 6 Markdown editor inside `.dsh-tw-note-editor`.
+ * GFM base language (strikethrough, tables, task lists, autolinks) — strictly
+ * more coverage than the old regex highlighter.
+ */
+export function buildMarkdownEditor(opts: MarkdownEditorOptions = {}): MarkdownEditor {
+  const wrap = document.createElement('div')
+  wrap.className = 'dsh-tw-note-editor'
+
+  const view = new EditorView({
+    parent: wrap,
+    state: EditorState.create({
+      doc: '',
+      extensions: [
+        EditorView.lineWrapping,
+        history(),
+        markdown({ base: markdownLanguage }),
+        syntaxHighlighting(mdHighlight),
+        drawSelection(),
+        placeholder(opts.placeholder ?? ''),
+        keymap.of([
+          ...defaultKeymap,
+          ...historyKeymap,
+          { key: 'Mod-Enter', run: () => { opts.onSave?.(); return true } },
+        ]),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) opts.onChange?.()
+        }),
+      ],
+    }),
+  })
+
+  return {
+    el: wrap,
+    view,
+    getValue: () => view.state.doc.toString(),
+    setValue(value: string) {
+      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } })
+    },
+    insertAtCaret(markdownLine: string) {
+      const { from } = view.state.selection.main
+      const line = view.state.doc.lineAt(from)
+      const atLineStart = from === line.from
+      const insert = `${atLineStart ? '' : '\n'}${markdownLine}\n`
+      view.dispatch({
+        changes: { from, insert },
+        selection: { anchor: from + insert.length },
+        scrollIntoView: true,
+      })
+      view.focus()
+    },
+    focus: () => view.focus(),
+  }
+}

package/src/client/quick-note-dock.ts

@@ -1,133 +1,133 @@
-/**
- * Quick-note button above the chat input box (需求: 输入框上方快速笔记按钮).
- *
- * Registers into the shell's `conversation.input.dock` slot — the sanctioned
- * "Full-width entries above the composer card" seat that sibling plugins
- * (todo / cost-meter / goal / queue / git-graph) already use. Entries render as
- * a flex column, so this strip stacks with theirs and can never overlap or
- * occlude anything. Gated by `ui.showQuickNoteDock` (default on), honored at
- * registration time in client/index.ts.
- *
- * Clicking opens the floating quick-note card (open-only; the card itself can
- * only be dismissed with its ✕ button). While the card is open the button
- * highlights, driven by the card's `dsh-tw-note-state` CustomEvent.
- *
- * @module dsh-tiddlywiki/client/quick-note-dock
- */
-import * as React from 'react'
-import { NOTE_STATE_EVENT, type NoteWidgetHandle } from './note-widget.ts'
-
-/**
- * Build the dock entry component bound to one note-widget handle. Called once
- * per client mount; the returned component is what the slot renders.
- *
- * 与输入框对齐：mount 后（含 resize / 窗口变化）测量 composer 输入卡片
- * （Lexical contenteditable 所在、有边框圆角的可见「输入框」盒子）的右缘，
- * 把横条 paddingRight 设为差值，让按钮右缘与输入框右缘对齐——而不是悬在整列
- * 最右端。注意 dock 槽位会把各条目包在一个容器里、与输入栏是兄弟节点，所以
- * 必须逐级向上爬祖先才能找到输入框。
- */
-export function createQuickNoteDock(note: NoteWidgetHandle): () => React.ReactElement {
-  return function QuickNoteDock() {
-    const [open, setOpen] = React.useState(false)
-    const wrapRef = React.useRef<HTMLDivElement | null>(null)
-    const btnRef = React.useRef<HTMLButtonElement | null>(null)
-    React.useEffect(() => {
-      const onState = (event: Event): void => {
-        const detail = (event as CustomEvent<{ open?: boolean }>).detail
-        setOpen(detail?.open === true)
-      }
-      window.addEventListener(NOTE_STATE_EVENT, onState)
-      return () => window.removeEventListener(NOTE_STATE_EVENT, onState)
-    }, [])
-    React.useLayoutEffect(() => {
-      const wrap = wrapRef.current
-      if (wrap === null) return
-      /**
-       * Find the composer input CARD: climb from the dock entry until an
-       * ancestor's subtree contains a wide text field (>300px — the composer
-       * input; dock entries' own inputs are small), then take the widest box
-       * between that field and its containing column (the visible card).
-       */
-      const findCard = (): HTMLElement | null => {
-        let input: Element | null = null
-        let column: HTMLElement | null = null
-        let node: HTMLElement | null = wrap
-        while (node !== null && node !== document.documentElement) {
-          node = node.parentElement
-          if (node === null) break
-          for (const el of node.querySelectorAll('textarea, [contenteditable]:not([contenteditable="false"]), [role="textbox"]')) {
-            if (el.getBoundingClientRect().width > 300) { input = el; column = node; break }
-          }
-          if (column !== null) break
-        }
-        if (input === null || column === null) return null
-        const colW = column.getBoundingClientRect().width
-        let cur: HTMLElement | null = input as HTMLElement
-        let card: HTMLElement | null = null
-        let cardW = 0
-        while (cur !== null && cur !== column) {
-          const w = cur.getBoundingClientRect().width
-          if (w > 0 && w < colW - 8 && w >= cardW) { cardW = w; card = cur }
-          cur = cur.parentElement
-        }
-        return card
-      }
-      const align = (): void => {
-        const wrapRect = wrap.getBoundingClientRect()
-        const card = findCard()
-        const right = card !== null ? card.getBoundingClientRect().right : wrapRect.right
-        const pad = Math.max(0, wrapRect.right - right)
-        if (wrap.style.paddingRight !== `${pad}px`) wrap.style.paddingRight = `${pad}px`
-      }
-      align()
-      // 侧边栏开/关会改变对话列宽度 → composer 输入卡片（居中、有 max-width）的
-      // 右缘随之移动。旧实现只观察了 dock 容器，侧边栏变化时它不一定触发 resize，
-      // 导致按钮停在上次的位置、不再对齐。这里观察「从 dock 条目一直到对话根节点
-      // （带 data-phase）的整条祖先链」，任一祖先尺寸变化都会重测对齐。
-      const ro = new ResizeObserver(align)
-      let node: Element | null = wrap
-      while (node !== null && node !== document.documentElement) {
-        ro.observe(node)
-        if (node instanceof HTMLElement && node.hasAttribute('data-phase')) break
-        node = node.parentElement
-      }
-      window.addEventListener('resize', align)
-      document.addEventListener('visibilitychange', align)
-      // 自愈兜底：任何未观测到的布局变化（侧边栏切换、插件重渲染等）也会在
-      // 1.5s 内被纠正；每帧只是几次 getBoundingClientRect 读取，开销可忽略。
-      const guard = window.setInterval(align, 1500)
-      // The composer card may mount slightly later; re-measure a couple of times.
-      const t1 = window.setTimeout(align, 120)
-      const t2 = window.setTimeout(align, 600)
-      return () => {
-        ro.disconnect()
-        window.removeEventListener('resize', align)
-        document.removeEventListener('visibilitychange', align)
-        window.clearInterval(guard)
-        window.clearTimeout(t1)
-        window.clearTimeout(t2)
-      }
-    }, [])
-    return React.createElement(
-      'div',
-      { ref: wrapRef, className: 'dsh-tw-dock-note' },
-      React.createElement(
-        'button',
-        {
-          ref: btnRef,
-          type: 'button',
-          className: open ? 'dsh-tw-dock-note-btn dsh-tw-dock-note-btn-active' : 'dsh-tw-dock-note-btn',
-          title: open ? '快速笔记已打开（点此按钮或卡片右上角 ✕ 收起）' : '打开快速笔记（在按钮上方弹出，可拖动标题栏移动）',
-          onClick: () => {
-            // 开关：打开时再次点击即收起；打开时在按钮上方弹出（✕ 亦可关闭）。
-            if (note.isOpen()) note.close()
-            else void note.open(btnRef.current ?? undefined)
-          },
-        },
-        React.createElement('span', { className: 'dsh-tw-dock-note-icon', 'aria-hidden': 'true' }, '📝'),
-        React.createElement('span', { className: 'dsh-tw-dock-note-label' }, open ? '快速笔记（已打开）' : '快速笔记'),
-      ),
-    )
-  }
-}
+/**
+ * Quick-note button above the chat input box (需求: 输入框上方快速笔记按钮).
+ *
+ * Registers into the shell's `conversation.input.dock` slot — the sanctioned
+ * "Full-width entries above the composer card" seat that sibling plugins
+ * (todo / cost-meter / goal / queue / git-graph) already use. Entries render as
+ * a flex column, so this strip stacks with theirs and can never overlap or
+ * occlude anything. Gated by `ui.showQuickNoteDock` (default on), honored at
+ * registration time in client/index.ts.
+ *
+ * Clicking opens the floating quick-note card (open-only; the card itself can
+ * only be dismissed with its ✕ button). While the card is open the button
+ * highlights, driven by the card's `dsh-tw-note-state` CustomEvent.
+ *
+ * @module dsh-tiddlywiki/client/quick-note-dock
+ */
+import * as React from 'react'
+import { NOTE_STATE_EVENT, type NoteWidgetHandle } from './note-widget.ts'
+
+/**
+ * Build the dock entry component bound to one note-widget handle. Called once
+ * per client mount; the returned component is what the slot renders.
+ *
+ * 与输入框对齐：mount 后（含 resize / 窗口变化）测量 composer 输入卡片
+ * （Lexical contenteditable 所在、有边框圆角的可见「输入框」盒子）的右缘，
+ * 把横条 paddingRight 设为差值，让按钮右缘与输入框右缘对齐——而不是悬在整列
+ * 最右端。注意 dock 槽位会把各条目包在一个容器里、与输入栏是兄弟节点，所以
+ * 必须逐级向上爬祖先才能找到输入框。
+ */
+export function createQuickNoteDock(note: NoteWidgetHandle): () => React.ReactElement {
+  return function QuickNoteDock() {
+    const [open, setOpen] = React.useState(false)
+    const wrapRef = React.useRef<HTMLDivElement | null>(null)
+    const btnRef = React.useRef<HTMLButtonElement | null>(null)
+    React.useEffect(() => {
+      const onState = (event: Event): void => {
+        const detail = (event as CustomEvent<{ open?: boolean }>).detail
+        setOpen(detail?.open === true)
+      }
+      window.addEventListener(NOTE_STATE_EVENT, onState)
+      return () => window.removeEventListener(NOTE_STATE_EVENT, onState)
+    }, [])
+    React.useLayoutEffect(() => {
+      const wrap = wrapRef.current
+      if (wrap === null) return
+      /**
+       * Find the composer input CARD: climb from the dock entry until an
+       * ancestor's subtree contains a wide text field (>300px — the composer
+       * input; dock entries' own inputs are small), then take the widest box
+       * between that field and its containing column (the visible card).
+       */
+      const findCard = (): HTMLElement | null => {
+        let input: Element | null = null
+        let column: HTMLElement | null = null
+        let node: HTMLElement | null = wrap
+        while (node !== null && node !== document.documentElement) {
+          node = node.parentElement
+          if (node === null) break
+          for (const el of node.querySelectorAll('textarea, [contenteditable]:not([contenteditable="false"]), [role="textbox"]')) {
+            if (el.getBoundingClientRect().width > 300) { input = el; column = node; break }
+          }
+          if (column !== null) break
+        }
+        if (input === null || column === null) return null
+        const colW = column.getBoundingClientRect().width
+        let cur: HTMLElement | null = input as HTMLElement
+        let card: HTMLElement | null = null
+        let cardW = 0
+        while (cur !== null && cur !== column) {
+          const w = cur.getBoundingClientRect().width
+          if (w > 0 && w < colW - 8 && w >= cardW) { cardW = w; card = cur }
+          cur = cur.parentElement
+        }
+        return card
+      }
+      const align = (): void => {
+        const wrapRect = wrap.getBoundingClientRect()
+        const card = findCard()
+        const right = card !== null ? card.getBoundingClientRect().right : wrapRect.right
+        const pad = Math.max(0, wrapRect.right - right)
+        if (wrap.style.paddingRight !== `${pad}px`) wrap.style.paddingRight = `${pad}px`
+      }
+      align()
+      // 侧边栏开/关会改变对话列宽度 → composer 输入卡片（居中、有 max-width）的
+      // 右缘随之移动。旧实现只观察了 dock 容器，侧边栏变化时它不一定触发 resize，
+      // 导致按钮停在上次的位置、不再对齐。这里观察「从 dock 条目一直到对话根节点
+      // （带 data-phase）的整条祖先链」，任一祖先尺寸变化都会重测对齐。
+      const ro = new ResizeObserver(align)
+      let node: Element | null = wrap
+      while (node !== null && node !== document.documentElement) {
+        ro.observe(node)
+        if (node instanceof HTMLElement && node.hasAttribute('data-phase')) break
+        node = node.parentElement
+      }
+      window.addEventListener('resize', align)
+      document.addEventListener('visibilitychange', align)
+      // 自愈兜底：任何未观测到的布局变化（侧边栏切换、插件重渲染等）也会在
+      // 1.5s 内被纠正；每帧只是几次 getBoundingClientRect 读取，开销可忽略。
+      const guard = window.setInterval(align, 1500)
+      // The composer card may mount slightly later; re-measure a couple of times.
+      const t1 = window.setTimeout(align, 120)
+      const t2 = window.setTimeout(align, 600)
+      return () => {
+        ro.disconnect()
+        window.removeEventListener('resize', align)
+        document.removeEventListener('visibilitychange', align)
+        window.clearInterval(guard)
+        window.clearTimeout(t1)
+        window.clearTimeout(t2)
+      }
+    }, [])
+    return React.createElement(
+      'div',
+      { ref: wrapRef, className: 'dsh-tw-dock-note' },
+      React.createElement(
+        'button',
+        {
+          ref: btnRef,
+          type: 'button',
+          className: open ? 'dsh-tw-dock-note-btn dsh-tw-dock-note-btn-active' : 'dsh-tw-dock-note-btn',
+          title: open ? '快速笔记已打开（点此按钮或卡片右上角 ✕ 收起）' : '打开快速笔记（在按钮上方弹出，可拖动标题栏移动）',
+          onClick: () => {
+            // 开关：打开时再次点击即收起；打开时在按钮上方弹出（✕ 亦可关闭）。
+            if (note.isOpen()) note.close()
+            else void note.open(btnRef.current ?? undefined)
+          },
+        },
+        React.createElement('span', { className: 'dsh-tw-dock-note-icon', 'aria-hidden': 'true' }, '📝'),
+        React.createElement('span', { className: 'dsh-tw-dock-note-label' }, open ? '快速笔记（已打开）' : '快速笔记'),
+      ),
+    )
+  }
+}