From e21d841a14bb78274c1c6d618a29c60de255eb2c Mon Sep 17 00:00:00 2001
From: VelvetAbyss <velvetabyss@users.noreply.github.com>
Date: Sat, 31 Oct 2026 00:12:14 +0800
Subject: [PATCH] feat(dashboard): add hanging reminder notes

---
 apps/web/src/data/models/hangingNotes.ts      |   15 +
 apps/web/src/data/models/types.ts             |    9 +
 ...syncedPreferencesRepo.hangingNotes.test.ts |   43 +
 .../repositories/syncedPreferencesRepo.ts     |   93 +-
 .../features/dashboard/DashboardHeader.tsx    |    3 +-
 .../features/dashboard/DashboardPage.test.tsx |    2 +
 .../src/features/dashboard/DashboardPage.tsx  |    3 +
 .../src/features/dashboard/desk/DeskProps.tsx |   23 +-
 .../hanging-notes/HangingNotes.test.tsx       |   49 +
 .../dashboard/hanging-notes/HangingNotes.tsx  |   49 +
 .../hanging-notes/controller.test.ts          |  105 ++
 .../dashboard/hanging-notes/controller.ts     | 1008 +++++++++++++++++
 .../features/dashboard/hanging-notes/copy.ts  |   50 +
 .../dashboard/hanging-notes/hanging-notes.css |  157 +++
 .../features/dashboard/hanging-notes/model.ts |    1 +
 .../dashboard/hanging-notes/template.ts       |   54 +
 16 files changed, 1624 insertions(+), 40 deletions(-)
 create mode 100644 apps/web/src/data/models/hangingNotes.ts
 create mode 100644 apps/web/src/data/repositories/syncedPreferencesRepo.hangingNotes.test.ts
 create mode 100644 apps/web/src/features/dashboard/hanging-notes/HangingNotes.test.tsx
 create mode 100644 apps/web/src/features/dashboard/hanging-notes/HangingNotes.tsx
 create mode 100644 apps/web/src/features/dashboard/hanging-notes/controller.test.ts
 create mode 100644 apps/web/src/features/dashboard/hanging-notes/controller.ts
 create mode 100644 apps/web/src/features/dashboard/hanging-notes/copy.ts
 create mode 100644 apps/web/src/features/dashboard/hanging-notes/hanging-notes.css
 create mode 100644 apps/web/src/features/dashboard/hanging-notes/model.ts
 create mode 100644 apps/web/src/features/dashboard/hanging-notes/template.ts

diff --git a/apps/web/src/data/models/hangingNotes.ts b/apps/web/src/data/models/hangingNotes.ts
new file mode 100644
index 0000000..46981d4
--- /dev/null
+++ b/apps/web/src/data/models/hangingNotes.ts
@@ -0,0 +1,15 @@
+import type { HangingNote } from './types'
+
+export function normalizeHangingNotes(value: unknown): HangingNote[] {
+  if (!Array.isArray(value)) return []
+  const result: HangingNote[] = [], ids = new Set<string>()
+  for (const entry of value) {
+    if (!entry || typeof entry.id !== 'string' || !entry.id || ids.has(entry.id) || typeof entry.text !== 'string' || !['butter', 'sage', 'rose'].includes(entry.color)) continue
+    const note: HangingNote = { id: entry.id, text: entry.text.slice(0, 500), color: entry.color }
+    if (entry.pin && [entry.pin.u, entry.pin.y, entry.pin.tilt].every(Number.isFinite)) {
+      note.pin = { u: Math.max(0, Math.min(1, entry.pin.u)), y: Math.max(0, entry.pin.y), tilt: Math.max(-.08, Math.min(.08, entry.pin.tilt)) }
+    }
+    ids.add(note.id); result.push(note)
+  }
+  return result
+}
diff --git a/apps/web/src/data/models/types.ts b/apps/web/src/data/models/types.ts
index 326a0b4..88c5b22 100644
--- a/apps/web/src/data/models/types.ts
+++ b/apps/web/src/data/models/types.ts
@@ -764,7 +764,16 @@ export type HabitLog = BaseEntity & {
   status: HabitStatus
 }
 
+export type HangingNote = {
+  id: string
+  text: string
+  color: 'butter' | 'sage' | 'rose'
+  /** Horizontal proportion and vertical CSS pixels, independent of view height. */
+  pin?: { u: number; y: number; tilt: number }
+}
+
 export type SyncedPreferences = BaseEntity & {
+  hangingNotes?: HangingNote[]
   id: 'synced_preferences'
   language: LanguageCode
   uiAnimationsEnabled: boolean
diff --git a/apps/web/src/data/repositories/syncedPreferencesRepo.hangingNotes.test.ts b/apps/web/src/data/repositories/syncedPreferencesRepo.hangingNotes.test.ts
new file mode 100644
index 0000000..f9d12a3
--- /dev/null
+++ b/apps/web/src/data/repositories/syncedPreferencesRepo.hangingNotes.test.ts
@@ -0,0 +1,43 @@
+// @vitest-environment jsdom
+import 'fake-indexeddb/auto'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { db } from '../db'
+import { syncedPreferencesRepo as repo, SYNCED_PREFERENCES_ID } from './syncedPreferencesRepo'
+import { normalizeHangingNotes } from '../models/hangingNotes'
+import type { HangingNote } from '../models/types'
+import { writeLanguage } from '../../shared/prefs/preferences'
+vi.mock('../sync/repository', () => ({ requestSyncHandoff: vi.fn(), enqueueSyncOperationInBackground: vi.fn() }))
+const a: HangingNote = { id:'a', text:'A', color:'butter' }, b: HangingNote = { id:'b', text:'B', color:'sage' }
+beforeEach(async () => { localStorage.clear(); await db.delete({ disableAutoOpen:false }); await db.open() })
+describe('persisting dashboard notes', () => {
+  it('preserves notes and preferences during concurrent saves', async () => {
+    await repo.saveHangingNotes([a], [])
+    writeLanguage('en')
+    await Promise.all([repo.persistFromLocal(), repo.saveHangingNotes([a,b],[a]), repo.markInitialSeedCompleted(123)])
+    const saved=await repo.get()
+    expect(saved?.hangingNotes).toEqual([a,b]); expect(saved?.language).toBe('en'); expect(saved?.initialSeedCompletedAt).toBe(123)
+  })
+  it('merges separate-sheet edits from stale tabs without changing order', async () => {
+    await repo.saveHangingNotes([a,b],[])
+    await Promise.all([repo.saveHangingNotes([{...a,text:'new A'},b],[a,b]),repo.saveHangingNotes([a,{...b,pin:{u:.4,y:350,tilt:0}}],[a,b])])
+    expect((await repo.get())?.hangingNotes).toEqual([{...a,text:'new A'},{...b,pin:{u:.4,y:350,tilt:0}}])
+  })
+  it('deletes only the removed ID and preserves remote additions', async () => {
+    await repo.saveHangingNotes([a,b],[])
+    await repo.saveHangingNotes([],[a])
+    expect((await repo.get())?.hangingNotes).toEqual([b])
+  })
+  it('refuses a queued save after the account changes', async () => {
+    await expect(repo.saveHangingNotes([a],[],()=>false)).rejects.toThrow('Account changed')
+    expect(await repo.get()).toBeNull()
+  })
+  it('recovers a malformed stored field without dropping preferences', async () => {
+    await repo.persistFromLocal()
+    await db.syncedPreferences.update(SYNCED_PREFERENCES_ID, { hangingNotes: { invalid:true } as unknown as HangingNote[] })
+    await repo.saveHangingNotes([a],[])
+    expect((await repo.get())?.hangingNotes).toEqual([a])
+  })
+  it('validates restored content and positions', () => {
+    expect(normalizeHangingNotes([null,a,a,{...b,pin:{u:5,y:-1,tilt:2}},{id:'bad',text:'x',color:'unknown'}])).toEqual([a,{...b,pin:{u:1,y:0,tilt:.08}}])
+  })
+})
diff --git a/apps/web/src/data/repositories/syncedPreferencesRepo.ts b/apps/web/src/data/repositories/syncedPreferencesRepo.ts
index 74c1a88..0f74844 100644
--- a/apps/web/src/data/repositories/syncedPreferencesRepo.ts
+++ b/apps/web/src/data/repositories/syncedPreferencesRepo.ts
@@ -1,6 +1,7 @@
 import { db } from '../db'
-import type { SyncedPreferences } from '../models/types'
-import { enqueueSyncOperationInBackground } from '../sync/repository'
+import type { HangingNote, SyncedPreferences } from '../models/types'
+import { normalizeHangingNotes } from '../models/hangingNotes'
+import { enqueueSyncOperationInBackground, requestSyncHandoff } from '../sync/repository'
 import {
   readDefaultCurrency,
   readDiaryFont,
@@ -104,24 +105,49 @@ export const syncedPreferencesRepo = {
     return (await db.syncedPreferences.get(SYNCED_PREFERENCES_ID)) ?? null
   },
   async persistFromLocal() {
-    const existing = await this.get()
-    const snapshot = buildLocalSnapshot()
-    const timestamp = now()
-    const next: SyncedPreferences = existing
-      ? {
-          ...existing,
-          ...snapshot,
-          updatedAt: timestamp,
-        }
-      : {
-          ...snapshot,
-          createdAt: timestamp,
-          updatedAt: timestamp,
-    }
-    await db.syncedPreferences.put(next)
+    const next = await db.transaction('rw', db.syncedPreferences, async () => {
+      const existing = await this.get()
+      const snapshot = buildLocalSnapshot()
+      const timestamp = now()
+      const next: SyncedPreferences = existing
+        ? {
+            ...existing,
+            ...snapshot,
+            updatedAt: timestamp,
+          }
+        : {
+            ...snapshot,
+            createdAt: timestamp,
+            updatedAt: timestamp,
+      }
+      await db.syncedPreferences.put(next)
+      return next
+    })
     enqueueSyncOperationInBackground('syncedPreferences', 'upsert', next)
     return next
   },
+  /** Merge just this edit into the latest record; unrelated preferences/sheets survive. */
+  async saveHangingNotes(notes: HangingNote[], previous: HangingNote[], isCurrentAccount = () => true) {
+    const next = await db.transaction('rw', db.syncedPreferences, async () => {
+      if (!isCurrentAccount()) throw new Error('Account changed')
+      const existing = await this.get()
+      if (!isCurrentAccount()) throw new Error('Account changed')
+      const before = new Map(previous.map(note => [note.id, note]))
+      const after = new Map(notes.map(note => [note.id, note]))
+      const changed = notes.filter(note => JSON.stringify(note) !== JSON.stringify(before.get(note.id)))
+      const removed = new Set(previous.filter(note => !after.has(note.id)).map(note => note.id))
+      const updates = new Map(changed.map(note => [note.id, note]))
+      const current = normalizeHangingNotes(existing?.hangingNotes)
+      const currentIds = new Set(current.map(note => note.id))
+      const hangingNotes = [...current.filter(note => !removed.has(note.id)).map(note => updates.get(note.id) ?? note), ...changed.filter(note => !currentIds.has(note.id))]
+      const timestamp = now()
+      const record: SyncedPreferences = { ...(existing ?? { ...buildLocalSnapshot(), createdAt: timestamp }), hangingNotes, updatedAt: timestamp }
+      await db.syncedPreferences.put(record)
+      return record
+    })
+    requestSyncHandoff()
+    return next
+  },
   async hydrateLocalFromDb() {
     const stored = await this.get()
     if (!stored) return false
@@ -137,21 +163,24 @@ export const syncedPreferencesRepo = {
     return stored?.initialSeedCompletedAt ?? null
   },
   async markInitialSeedCompleted(timestamp = now()) {
-    const existing = await this.get()
-    if (existing?.initialSeedCompletedAt) return existing
-    const next: SyncedPreferences = existing
-      ? {
-          ...existing,
-          initialSeedCompletedAt: timestamp,
-          updatedAt: timestamp,
-        }
-      : {
-          ...buildLocalSnapshot(),
-          initialSeedCompletedAt: timestamp,
-          createdAt: timestamp,
-          updatedAt: timestamp,
-    }
-    await db.syncedPreferences.put(next)
+    const next = await db.transaction('rw', db.syncedPreferences, async () => {
+      const existing = await this.get()
+      if (existing?.initialSeedCompletedAt) return existing
+      const next: SyncedPreferences = existing
+        ? {
+            ...existing,
+            initialSeedCompletedAt: timestamp,
+            updatedAt: timestamp,
+          }
+        : {
+            ...buildLocalSnapshot(),
+            initialSeedCompletedAt: timestamp,
+            createdAt: timestamp,
+            updatedAt: timestamp,
+      }
+      await db.syncedPreferences.put(next)
+      return next
+    })
     enqueueSyncOperationInBackground('syncedPreferences', 'upsert', next)
     return next
   },
diff --git a/apps/web/src/features/dashboard/DashboardHeader.tsx b/apps/web/src/features/dashboard/DashboardHeader.tsx
index 550af52..aee32bc 100644
--- a/apps/web/src/features/dashboard/DashboardHeader.tsx
+++ b/apps/web/src/features/dashboard/DashboardHeader.tsx
@@ -157,7 +157,7 @@ const DashboardHeader = ({
     <header ref={headerRef} className={`app-shell__header dash-header${scenery ? ' dash-header--scenery' : ''}`} data-header-scene={scene.mode} style={scenery ? { minHeight: activeSettings.sceneHeight } : undefined}>
       {scene.mode === 'cloudtrain' && <CloudTrain settings={scene} anchor={scene.sceneAnchor} palette={trainPalette} paused={scene.paused || reducedMotion} />}
       {scene.mode === 'spring' && <SpringField settings={scene.spring} palette={springPalette} paused={scene.spring.paused || reducedMotion} />}
-      <div className="dash-hero" style={scenery && activeSettings.height > 80 ? { minHeight: activeSettings.height } : undefined}>
+      <div className="dash-hero dash-hero--notes" style={scenery && activeSettings.height > 80 ? { minHeight: activeSettings.height } : undefined}>
         <div className="dash-hero__day">
           <time className="dash-hero__date" dateTime={dayKey}>
             {zh ? (
@@ -187,6 +187,7 @@ const DashboardHeader = ({
           </div>
           <TodayNotesLine dayKey={dayKey} className="dash-hero__day-notes" />
         </div>
+        <div className="dash-notes-anchor" aria-hidden="true" />
         <figure className={`dash-hero__quote${quote ? '' : ' dash-hero__quote--empty'}`}>
           {quote ? (
             <blockquote
diff --git a/apps/web/src/features/dashboard/DashboardPage.test.tsx b/apps/web/src/features/dashboard/DashboardPage.test.tsx
index f3b920e..b8313d6 100644
--- a/apps/web/src/features/dashboard/DashboardPage.test.tsx
+++ b/apps/web/src/features/dashboard/DashboardPage.test.tsx
@@ -38,6 +38,8 @@ vi.mock('../../shared/ui/Dialog', () => ({
   default: ({ open, children }: { open: boolean; children: React.ReactNode }) => (open ? <div>{children}</div> : null),
 }))
 
+vi.mock('./hanging-notes/HangingNotes', () => ({ default: () => <div data-testid="hanging-notes" /> }))
+
 vi.mock('./DashboardHeader', () => ({
   default: ({
     onToggleLayoutEdit,
diff --git a/apps/web/src/features/dashboard/DashboardPage.tsx b/apps/web/src/features/dashboard/DashboardPage.tsx
index 9d255c8..afebcb3 100644
--- a/apps/web/src/features/dashboard/DashboardPage.tsx
+++ b/apps/web/src/features/dashboard/DashboardPage.tsx
@@ -13,6 +13,7 @@ import type { DashboardLayoutItem } from '../../data/models/types'
 import { useSearchParams } from 'react-router-dom'
 import DashboardHeader, { type DashboardPage as DashboardPageKind } from './DashboardHeader'
 import CustomDashboard from './CustomDashboard'
+import HangingNotes from './hanging-notes/HangingNotes'
 import { appendViewWidget, readCustomViews, saveCustomViews, uniqueViewName, viewNameError, type CustomView } from './customViews'
 import { Input } from '@/components/ui/input'
 import { Dialog as ViewDialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog'
@@ -398,6 +399,8 @@ const DashboardPage = () => {
           onCreateView={() => switchSafely(() => { setCreateName(uniqueViewName(zh ? '我的视图' : 'My view', views)); setCreateTemplate('blank'); setCreateError(''); setCreateOpen(true) })}
         />
 
+        <HangingNotes />
+
         <div aria-live="polite" aria-atomic="true">
         </div>
 
diff --git a/apps/web/src/features/dashboard/desk/DeskProps.tsx b/apps/web/src/features/dashboard/desk/DeskProps.tsx
index 10fc541..09b62a8 100644
--- a/apps/web/src/features/dashboard/desk/DeskProps.tsx
+++ b/apps/web/src/features/dashboard/desk/DeskProps.tsx
@@ -53,16 +53,25 @@ const measurePlacement = (header: HTMLElement): Placement | null => {
   const toolbar = local('.dash-toolbar')
   if (!day || !toolbar) return null
   const quote = local('.dash-hero__quote')
+  const notes = local('.dash-notes-anchor')
   const views = local('.dash-toolbar__views')
   const actions = local('.dash-toolbar__actions')
   // The desk line is the middle of the toolbar's 1px rule.
   const height = Math.round(toolbar.bottom - 0.5 + DESK_LINE_INSET)
-  const from = Math.max(day.right, views?.right ?? toolbar.left) + CLEARANCE
-  const to = Math.min(quote?.left ?? toolbar.right, actions?.left ?? toolbar.right) - CLEARANCE
-  const unit = Math.round(Math.min(DESK_UNIT_MAX, height / DESK_LAYOUT.height) * 100) / 100
-  if (!(unit >= DESK_UNIT_MIN) || to - from < DESK_LAYOUT.minWidth * unit) return null
-  const left = Math.round(from)
-  return { left, width: Math.round(to - from), height, unit, origin: Math.round(header.offsetWidth / 2) - left }
+  let from = Math.max(day.right, views?.right ?? toolbar.left) + CLEARANCE
+  let to = Math.min(quote?.left ?? toolbar.right, actions?.left ?? toolbar.right) - CLEARANCE
+  // Leave the hanging paper's column clear; use the larger free side for the desk.
+  if (notes && notes.right > from && notes.left < to) {
+    const leftEnd = Math.max(from, notes.left - CLEARANCE)
+    const rightStart = Math.min(to, notes.right + CLEARANCE)
+    if (leftEnd - from >= to - rightStart) to = leftEnd
+    else from = rightStart
+  }
+  const unit = Math.floor(Math.min(DESK_UNIT_MAX, height / DESK_LAYOUT.height, (to - from) / DESK_LAYOUT.minWidth) * 100) / 100
+  if (!(unit >= DESK_UNIT_MIN)) return null
+  const left = Math.round(from), width = Math.round(to - from)
+  const origin = notes ? Math.round(width / 2) : Math.round(header.offsetWidth / 2) - left
+  return { left, width, height, unit, origin }
 }
 
 const samePlacement = (a: Placement | null, b: Placement | null) =>
@@ -90,7 +99,7 @@ const useDeskPlacement = (headerRef: RefObject<HTMLElement | null>) => {
     }
     const observer = new ResizeObserver(schedule)
     observer.observe(header)
-    for (const selector of ['.dash-hero__day', '.dash-hero__quote', '.dash-toolbar__views', '.dash-toolbar__actions']) {
+    for (const selector of ['.dash-hero__day', '.dash-hero__quote', '.dash-notes-anchor', '.dash-toolbar__views', '.dash-toolbar__actions']) {
       const el = header.querySelector(selector)
       if (el) observer.observe(el)
     }
diff --git a/apps/web/src/features/dashboard/hanging-notes/HangingNotes.test.tsx b/apps/web/src/features/dashboard/hanging-notes/HangingNotes.test.tsx
new file mode 100644
index 0000000..12845f2
--- /dev/null
+++ b/apps/web/src/features/dashboard/hanging-notes/HangingNotes.test.tsx
@@ -0,0 +1,49 @@
+// @vitest-environment jsdom
+import { act, cleanup, render } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { prepareAppUpdate } from '../../../shared/runtime/updateLifecycle'
+import HangingNotes from './HangingNotes'
+
+const mocks = vi.hoisted(() => ({ create: vi.fn(), save: vi.fn(), get: vi.fn() }))
+vi.mock('dexie', () => ({ liveQuery: () => ({ subscribe: (observer: { next: (value: unknown) => void }) => {
+  observer.next({ hangingNotes: [] })
+  return { unsubscribe: vi.fn() }
+} }) }))
+vi.mock('../../../store/auth', () => ({ getAuth: () => null, subscribeAuth: () => () => undefined }))
+vi.mock('../../../shared/i18n/useI18n', () => ({ useI18n: () => ({ language: 'zh' }) }))
+vi.mock('../../../data/repositories/syncedPreferencesRepo', () => ({ syncedPreferencesRepo: { get: mocks.get, saveHangingNotes: mocks.save } }))
+vi.mock('./controller', () => ({ createHangingNotes: mocks.create }))
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  mocks.create.mockReturnValue({ update: vi.fn(), destroy: vi.fn() })
+  mocks.get.mockResolvedValue({ hangingNotes: [] })
+})
+afterEach(cleanup)
+
+describe('hanging note update preparation', () => {
+  it('waits for a queued note write before the app can update', async () => {
+    let finish!: () => void
+    mocks.save.mockReturnValue(new Promise<void>(resolve => { finish = resolve }))
+    render(<HangingNotes />)
+    let save!: Promise<unknown>
+    await act(async () => { save = mocks.create.mock.calls[0][2]([], () => []) })
+    let prepared = false
+    const preparation = prepareAppUpdate().then(() => { prepared = true })
+    await act(async () => { await Promise.resolve() })
+    expect(prepared).toBe(false)
+    await act(async () => { finish(); await save; await preparation })
+    expect(prepared).toBe(true)
+  })
+
+  it('blocks an update after a failed save and removes its listener on unmount', async () => {
+    mocks.save.mockRejectedValue(new Error('disk unavailable'))
+    const view = render(<HangingNotes />)
+    await act(async () => {
+      await expect(mocks.create.mock.calls[0][2]([], () => [])).rejects.toThrow('disk unavailable')
+    })
+    await expect(prepareAppUpdate()).rejects.toThrow('disk unavailable')
+    view.unmount()
+    await expect(prepareAppUpdate()).resolves.toBeUndefined()
+  })
+})
diff --git a/apps/web/src/features/dashboard/hanging-notes/HangingNotes.tsx b/apps/web/src/features/dashboard/hanging-notes/HangingNotes.tsx
new file mode 100644
index 0000000..ea542d9
--- /dev/null
+++ b/apps/web/src/features/dashboard/hanging-notes/HangingNotes.tsx
@@ -0,0 +1,49 @@
+import { useEffect, useRef, useSyncExternalStore } from 'react'
+import { liveQuery } from 'dexie'
+import { getAuth, subscribeAuth } from '../../../store/auth'
+import { syncedPreferencesRepo } from '../../../data/repositories/syncedPreferencesRepo'
+import { createHangingNotes } from './controller'
+import { useI18n } from '../../../shared/i18n/useI18n'
+import { onPrepareAppUpdate } from '../../../shared/runtime/updateLifecycle'
+import { normalizeHangingNotes } from './model'
+import './hanging-notes.css'
+
+const account = () => String(getAuth()?.user?.id ?? 'local')
+
+export default function HangingNotes() {
+  const { language } = useI18n()
+  const zh = language === 'zh'
+  const root = useRef<HTMLDivElement>(null)
+  const owner = useSyncExternalStore(subscribeAuth, account, () => 'local')
+  useEffect(() => {
+    const element = root.current
+    if (!element) return
+    let disposed = false, pendingSaves = 0, saveRevision = 0
+    let engine: ReturnType<typeof createHangingNotes> | undefined
+    let queue = Promise.resolve<unknown>(undefined)
+    const stopPreparing = onPrepareAppUpdate(() => queue)
+    const subscription = liveQuery(() => syncedPreferencesRepo.get()).subscribe({
+      next: preferences => {
+        if (disposed) return
+        const notes = normalizeHangingNotes(preferences?.hangingNotes)
+        if (engine) { if (!pendingSaves) engine.update(notes); return }
+        engine = createHangingNotes(element, notes, (next, before) => {
+          pendingSaves++
+          const revision = ++saveRevision
+          const save = queue.catch(() => undefined).then(() => syncedPreferencesRepo.saveHangingNotes(next, before(), () => account() === owner))
+          queue = save
+          void save.then(() => {
+            pendingSaves--
+            if (!disposed && !pendingSaves) {
+              void syncedPreferencesRepo.get().then(value => { if (!disposed && !pendingSaves && revision === saveRevision) engine?.update(normalizeHangingNotes(value?.hangingNotes)) }).catch(() => undefined)
+            }
+          }, () => { pendingSaves-- })
+          return save
+        }, zh)
+      },
+      error: () => { if (!disposed) { engine?.destroy(); engine = undefined; element.textContent = zh ? '便签暂时无法读取，请重新打开仪表盘。' : 'Notes could not load. Please reopen Dashboard.' } },
+    })
+    return () => { disposed = true; subscription.unsubscribe(); engine?.destroy(); stopPreparing() }
+  }, [owner, zh])
+  return <div ref={root} className="dashboard-notes" aria-label={zh ? '风中便签' : 'Hanging notes'} />
+}
diff --git a/apps/web/src/features/dashboard/hanging-notes/controller.test.ts b/apps/web/src/features/dashboard/hanging-notes/controller.test.ts
new file mode 100644
index 0000000..deb1141
--- /dev/null
+++ b/apps/web/src/features/dashboard/hanging-notes/controller.test.ts
@@ -0,0 +1,105 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent } from '@testing-library/dom'
+import type { HangingNote } from '../../../data/models/types'
+import { createHangingNotes } from './controller'
+
+const a: HangingNote = { id: 'a', text: 'A', color: 'butter' }
+const b: HangingNote = { id: 'b', text: 'B', color: 'sage' }
+let engine: ReturnType<typeof createHangingNotes>, root: HTMLDivElement
+const get = (name: string) => root.querySelector<HTMLElement>(`#fg-notes-${name}`)!
+const click = (name: string) => get(name).click()
+const flush = async () => { await Promise.resolve(); await Promise.resolve(); await Promise.resolve() }
+beforeEach(() => {
+  vi.stubGlobal('matchMedia', () => ({ matches: true, addEventListener() {}, removeEventListener() {} }))
+  vi.stubGlobal('ResizeObserver', class { observe() {} disconnect() {} })
+  vi.stubGlobal('requestAnimationFrame', vi.fn(() => 1))
+  vi.stubGlobal('cancelAnimationFrame', vi.fn())
+  Element.prototype.getAnimations = () => []
+  document.body.innerHTML = '<main><header class="dash-header"><div class="dash-notes-anchor"></div><figure class="dash-hero__quote"></figure></header><div class="dashboard-notes"></div></main>'
+  root = document.querySelector('.dashboard-notes')!
+  Object.defineProperties(root, { clientWidth: { value: 1000 }, clientHeight: { value: 800 } })
+  vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (this: Element) {
+    const x = this.classList.contains('dash-notes-anchor') ? 440 : this.classList.contains('dash-hero__quote') ? 800 : 0
+    const width = this === root ? 1000 : 100
+    return { x, y: 0, left: x, right: x + width, top: 0, bottom: 100, width, height: 100, toJSON() {} }
+  })
+})
+afterEach(() => { engine?.destroy(); vi.restoreAllMocks(); vi.unstubAllGlobals() })
+
+describe('hanging note interaction state', () => {
+  it('retries an earlier failed edit when saving a different sheet', async () => {
+    const save = vi.fn().mockRejectedValueOnce(new Error('offline')).mockResolvedValue(undefined)
+    engine = createHangingNotes(root, [a, b], (next, before) => save(next, before()))
+    click('paper-stack'); fireEvent.input(get('note-text'), { target: { value: 'A changed' } }); await flush()
+    expect(get('save-status').textContent).toContain('重试')
+    click('next-note'); fireEvent.input(get('note-text'), { target: { value: 'B changed' } }); await flush()
+    expect(save.mock.calls[1][0]).toEqual([{ ...a, text: 'A changed' }, { ...b, text: 'B changed' }])
+    expect(save.mock.calls[1][1]).toEqual([a, b])
+    expect(get('save-status').textContent).toBe('已保存')
+  })
+  it('compares a queued revert against the last completed write', async () => {
+    let release!: () => void
+    const barrier = new Promise<void>(resolve => { release = resolve })
+    const writes: { next: HangingNote[]; before: HangingNote[] }[] = []
+    let queue = Promise.resolve()
+    engine = createHangingNotes(root, [a], (next, getBefore) => {
+      const save = queue.then(async () => {
+        writes.push({ next, before: getBefore() })
+        if (writes.length === 1) await barrier
+      })
+      queue = save
+      return save
+    })
+    click('paper-stack')
+    fireEvent.input(get('note-text'), { target: { value: 'B' } })
+    fireEvent.input(get('note-text'), { target: { value: 'A' } })
+    await flush(); release(); await flush(); await flush()
+    expect(writes[1]).toEqual({ next: [a], before: [{ ...a, text: 'B' }] })
+  })
+  it('archives a just-added note even if the component unmounts while writes wait', async () => {
+    let release!: () => void
+    const barrier = new Promise<void>(resolve => { release = resolve })
+    const writes: { next: HangingNote[]; before: HangingNote[] }[] = []
+    let queue = Promise.resolve()
+    engine = createHangingNotes(root, [], (next, getBefore) => {
+      const save = queue.then(async () => {
+        writes.push({ next, before: getBefore() })
+        if (writes.length === 1) await barrier
+      })
+      queue = save
+      return save
+    })
+    click('paper-stack'); click('archive-note'); engine.destroy()
+    await flush(); release(); await flush(); await flush()
+    expect(writes[1].next).toEqual([])
+    expect(writes[1].before).toEqual(writes[0].next)
+    expect(writes[1].before).toHaveLength(1)
+  })
+  it('keeps a failed draft when unrelated incoming data arrives', async () => {
+    engine = createHangingNotes(root, [a], vi.fn().mockRejectedValue(new Error('quota')))
+    click('paper-stack'); fireEvent.input(get('note-text'), { target: { value: 'Unsaved draft' } }); await flush()
+    engine.update([a, b]); click('close-note'); click('paper-stack')
+    expect((get('note-text') as HTMLTextAreaElement).value).toBe('Unsaved draft')
+  })
+  it('archives the intended ID after a deferred incoming removal', () => {
+    const save = vi.fn().mockResolvedValue(undefined)
+    engine = createHangingNotes(root, [a, b], (next, before) => save(next, before()))
+    click('paper-stack'); click('next-note'); engine.update([b]); click('archive-note')
+    expect(save.mock.calls[0][0]).toEqual([])
+    expect(root.dataset.hangingCount).toBe('0')
+  })
+  it('returns the latest note object after a deferred incoming edit', () => {
+    const pinned = { ...b, pin: { u: .5, y: 200, tilt: 0 } }, save = vi.fn().mockResolvedValue(undefined)
+    engine = createHangingNotes(root, [a, pinned], (next, before) => save(next, before()))
+    root.querySelector<HTMLButtonElement>('.loose-note')!.click()
+    engine.update([{ ...pinned, text: 'Remote edit' }]); click('return-note')
+    expect(save.mock.calls[0][0]).toEqual([{ ...b, text: 'Remote edit' }])
+    expect(root.querySelectorAll('.loose-note')).toHaveLength(0)
+  })
+  it('removes listeners and owned DOM on unmount', () => {
+    engine = createHangingNotes(root, [a], vi.fn().mockResolvedValue(undefined))
+    engine.destroy(); document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    expect(root.childElementCount).toBe(0)
+  })
+})
diff --git a/apps/web/src/features/dashboard/hanging-notes/controller.ts b/apps/web/src/features/dashboard/hanging-notes/controller.ts
new file mode 100644
index 0000000..edfc3b6
--- /dev/null
+++ b/apps/web/src/features/dashboard/hanging-notes/controller.ts
@@ -0,0 +1,1008 @@
+import type { HangingNote } from '../../../data/models/types';
+import { noteTemplate } from './template';
+import { noteTranslations } from './copy';
+type Point = {
+    x: number;
+    y: number;
+};
+type Rect = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+type Geometry = {
+    w: number;
+    h: number;
+    scale: number;
+    ax: number;
+    ay: number;
+    length: number;
+    quote: Rect | null;
+};
+type Body = Point & {
+    id: string;
+    el: HTMLButtonElement;
+    tx: number;
+    ty: number;
+    vx: number;
+    vy: number;
+    angle: number;
+    av: number;
+    kind: 'free' | 'pinned';
+};
+type Snap = Point & {
+    started: number;
+    ax: number;
+    ay: number;
+    id: string;
+};
+type PointerPosition = Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY'>;
+type Drag = {
+    id: number;
+    capture: HTMLButtonElement;
+    body: Body | null;
+    created: boolean;
+    moved: boolean;
+    overSince: number | null;
+    returnReady: boolean;
+    x: number;
+    y: number;
+    sx: number;
+    sy: number;
+    lx: number;
+    ly: number;
+    startX: number;
+    startY: number;
+    offsetX: number;
+    offsetY: number;
+    angle: number;
+    extension: number;
+    originFront?: string;
+    originPin: HangingNote['pin'] | null;
+    originPoint: Point;
+};
+/** A scoped imperative animation island: React owns mount/unmount, never frame state. */
+export function createHangingNotes(root: HTMLElement, initial: HangingNote[], onSave: (next: HangingNote[], before: () => HangingNote[]) => Promise<unknown>, zh = true) {
+    const copy = (value: string) => zh ? value : noteTranslations[value] ?? value;
+    root.innerHTML = zh ? noteTemplate : Object.entries(noteTranslations).sort((a, b) => b[0].length - a[0].length).reduce((html, [from, to]) => html.replaceAll(from, to), noteTemplate);
+    let disposed = false;
+    const controller = new AbortController();
+    const $ = <T extends Element = HTMLElement>(selector: string) => root.querySelector<T>(selector)!;
+    type NoteEventMap = HTMLElementEventMap & {
+        visibilitychange: Event;
+    };
+    function listen<K extends keyof NoteEventMap>(target: EventTarget, type: K, listener: (event: NoteEventMap[K]) => void) {
+        target.addEventListener(type, listener as EventListener, { signal: controller.signal });
+    }
+    function pointerLocal(event: PointerPosition): Point {
+        const rect = root.getBoundingClientRect(), zoom = rect.width / Math.max(1, root.clientWidth);
+        return { x: (event.clientX - rect.left) / zoom, y: (event.clientY - rect.top) / zoom };
+    }
+    const COLORS = { butter: '#eee5c9', sage: '#dbe3d2', rose: '#ecd6ca' };
+    const clamp = (n: number, a: number, b: number) => Math.min(Math.max(n, a), Math.max(a, b));
+    let notes = structuredClone(initial), persisted = structuredClone(initial);
+    let storageOK = true, saveVersion = 0, saving = 0, pending: HangingNote[] | null = null;
+    const stage = root, stack = $<HTMLButtonElement>('#fg-notes-paper-stack'), detail = $('#fg-notes-note-detail'), input = $<HTMLTextAreaElement>('#fg-notes-note-text');
+    const dashboard = root.parentElement!;
+    let scroller: HTMLElement = document.scrollingElement as HTMLElement || document.documentElement;
+    let clippingAncestors: HTMLElement[] = [];
+    function measureViewport() {
+        let owner: HTMLElement | undefined;
+        clippingAncestors = [];
+        for (let node = dashboard.parentElement; node && node !== document.body; node = node.parentElement) {
+            const overflow = getComputedStyle(node).overflowY;
+            if (!owner && /^(auto|scroll|overlay)$/.test(overflow) && node.scrollHeight > node.clientHeight + 1)
+                owner = node;
+            if (/^(auto|scroll|overlay|hidden|clip)$/.test(overflow))
+                clippingAncestors.push(node);
+        }
+        scroller = owner || document.scrollingElement as HTMLElement || document.documentElement;
+    }
+    function visibleViewport() {
+        const visual = window.visualViewport, rect = root.getBoundingClientRect();
+        let top = Math.max(rect.top, visual?.offsetTop ?? 0);
+        let bottom = Math.min(rect.bottom, (visual?.offsetTop ?? 0) + (visual?.height ?? window.innerHeight));
+        for (const node of clippingAncestors) {
+            const r = node.getBoundingClientRect(), zoom = r.height / Math.max(1, node.offsetHeight);
+            const edge = r.top + node.clientTop * zoom;
+            top = Math.max(top, edge);
+            bottom = Math.min(bottom, edge + node.clientHeight * zoom);
+        }
+        return { top, bottom: Math.max(top, bottom) };
+    }
+    function localViewport() {
+        const rect = root.getBoundingClientRect(), zoom = rect.width / Math.max(1, root.clientWidth), view = visibleViewport();
+        return { top: (view.top - rect.top) / zoom, bottom: (view.bottom - rect.top) / zoom };
+    }
+    const media = matchMedia('(prefers-reduced-motion: reduce)');
+    let reduced = media.matches || document.documentElement.dataset.motion === 'reduce', paused = false;
+    const wind = .36;
+    let elapsed = 0, frontId: string | undefined = notes.find(n => !n.pin)?.id;
+    let editId: string | null = null, editorSource: HTMLElement | null = null;
+    let drag: Drag | null = null, suppressClick = false, geometry: Geometry, frame: number | undefined, lastFrame = 0;
+    let snap: Snap | null = null, undoEntry: {
+        note: HangingNote;
+        index: number;
+    } | null = null, toastTimer: ReturnType<typeof setTimeout> | undefined;
+    let transition: Animation | null = null, transitionSource: HTMLElement | null = null;
+    const bodies = new Map<string, Body>();
+    const pendulum = { angle: -.025, velocity: 0, extension: 0, ev: 0, paper: -.015, pv: 0, flutter: 0, hovered: false };
+    const byId = (id: string | null | undefined) => notes.find(n => n.id === id);
+    const hanging = () => notes.filter(n => !n.pin && !(drag?.created && drag.body?.id === n.id));
+    const front = () => hanging().find(n => n.id === frontId) || hanging()[0];
+    const stackPoint = () => ({ x: geometry.ax + Math.sin(pendulum.angle) * (geometry.length + pendulum.extension), y: geometry.ay + Math.cos(pendulum.angle) * (geometry.length + pendulum.extension) });
+    const restPoint = () => ({ x: geometry.ax + Math.sin(elapsed * 1.2) * (reduced || paused ? 0 : 1.1), y: geometry.ay + geometry.length });
+    const breakStretch = () => Math.max(160, geometry.scale * 170);
+    const BREAK_HOLD_MS = 220;
+    const remaining = stack.cloneNode(true) as HTMLButtonElement;
+    remaining.removeAttribute('id');
+    remaining.querySelectorAll('[id]').forEach(el => el.removeAttribute('id'));
+    remaining.classList.add('remaining-stack');
+    remaining.setAttribute('aria-hidden', 'true');
+    remaining.tabIndex = -1;
+    remaining.disabled = true;
+    remaining.hidden = true;
+    $('#fg-notes-hanging-space').insertBefore(remaining, stack);
+    function toast(text: string, undo = false) {
+        clearTimeout(toastTimer);
+        $('#fg-notes-toast-text').textContent = text;
+        $('#fg-notes-undo').hidden = !undo;
+        $('#fg-notes-toast').hidden = false;
+        positionToast();
+        toastTimer = setTimeout(() => { $('#fg-notes-toast').hidden = true; }, undo ? 8000 : 3500);
+    }
+    function positionToast() {
+        const view = localViewport();
+        $('#fg-notes-toast').style.top = `${Math.max(12, Math.min(geometry.h, view.bottom) - 76)}px`;
+    }
+    function saveStatus() {
+        $<HTMLButtonElement>('#fg-notes-save-status').textContent = saving ? copy('保存中…') : storageOK ? copy('已保存') : copy('尚未保存，点击重试');
+    }
+    function persist() {
+        const version = ++saveVersion, next = structuredClone(notes), before = () => structuredClone(persisted);
+        // Only an acknowledged write advances the baseline. Later saves retry earlier failures.
+        pending = null;
+        saving++;
+        saveStatus();
+        void onSave(next, before).then(() => {
+            saving--;
+            persisted = next;
+            if (disposed)
+                return;
+            if (version === saveVersion)
+                storageOK = true;
+            saveStatus();
+        }).catch(() => {
+            saving--;
+            if (disposed)
+                return;
+            if (version === saveVersion)
+                storageOK = false;
+            saveStatus();
+            announce(copy('保存未完成，内容仍在此页。请重试。'));
+        });
+    }
+    function announce(text: string) { $('#fg-notes-placement-status').textContent = text; }
+    function bounds() {
+        const { w, h, scale } = geometry;
+        return { left: 120 * scale + 10, right: w - 120 * scale - 10, top: 27 * scale + 10, bottom: h - 194 * scale - 12 };
+    }
+    function fit(x: number, y: number, avoidQuote = false) {
+        const b = bounds();
+        x = clamp(x, b.left, b.right);
+        y = clamp(y, b.top, b.bottom);
+        const q = geometry.quote, half = 120 * geometry.scale, top = 27 * geometry.scale, bottom = 194 * geometry.scale;
+        if (avoidQuote && q && x + half > q.left && x - half < q.right && y + bottom > q.top && y - top < q.bottom) {
+            const options = [{ x: q.left - half - 12, y }, { x: q.right + half + 12, y }, { x, y: q.bottom + top + 12 }, { x, y: q.top - bottom - 12 }]
+                .filter(p => p.x >= b.left && p.x <= b.right && p.y >= b.top && p.y <= b.bottom)
+                .sort((a, c) => Math.hypot(a.x - x, a.y - y) - Math.hypot(c.x - x, c.y - y));
+            if (options[0])
+                ({ x, y } = options[0]);
+        }
+        return { x, y };
+    }
+    function pointFromPin(pin: NonNullable<HangingNote["pin"]>) {
+        const b = bounds();
+        return fit(b.left + pin.u * (b.right - b.left), pin.y, true);
+    }
+    function fillPaper(el: HTMLElement, note: HangingNote | undefined, label = '') {
+        el.style.setProperty('--paper', COLORS[note?.color || 'butter']);
+        el.querySelector('.paper-preview')!.textContent = note?.text || (note ? copy('一个念头，\n先放在这里。') : copy('＋ 写一张'));
+        el.querySelector('.paper-footer>span')!.textContent = label;
+        el.setAttribute('aria-label', note ? copy('打开便签：') + (note.text || copy('空白便签')) + copy('。也可以按住拖动。') : copy('写下第一张便签'));
+    }
+    function updateUI() {
+        const list = hanging(), note = front();
+        frontId = note?.id;
+        fillPaper(stack, note, list.length ? `${String(list.findIndex(n => n.id === frontId) + 1).padStart(2, '0')} / ${String(list.length).padStart(2, '0')}` : copy('纸叠空了，写一张'));
+        stack.classList.toggle('is-empty', !note);
+        $('#fg-notes-back-one').style.visibility = list.length > 1 ? 'visible' : 'hidden';
+        $('#fg-notes-back-two').style.visibility = list.length > 2 ? 'visible' : 'hidden';
+        stack.dataset.noteId = frontId || '';
+        stack.setAttribute('aria-description', copy('一次取下最上面一张。明显拉远并保持片刻才会断绳；取下的纸可拖回这里重新挂上。'));
+        $('#fg-notes-placement-action').textContent = copy('取下这一张');
+        $<HTMLButtonElement>('#fg-notes-placement-action').disabled = !note || !!byId(editId)?.pin;
+        const count = notes.filter(n => n.pin).length;
+        stage.dataset.attachment = drag?.body ? 'free' : 'hanging';
+        stage.dataset.hangingCount = String(list.length);
+        stage.dataset.pinnedCount = String(count);
+        for (const [id, body] of bodies) {
+            const n = byId(id);
+            if (!n) {
+                body.el.remove();
+                bodies.delete(id);
+                continue;
+            }
+            fillPaper(body.el, n, copy('留给自己'));
+        }
+    }
+    function updateEditor() {
+        const note = byId(editId);
+        if (!note)
+            return;
+        detail.style.setProperty('--paper', COLORS[note.color]);
+        input.value = note.text;
+        $('#fg-notes-char-count').textContent = `${note.text.length} / 500`;
+        const list = hanging(), index = list.findIndex(n => n.id === note.id);
+        $('#fg-notes-page-count').textContent = note.pin ? copy('已钉在桌面') : `${index + 1} / ${list.length}`;
+        $<HTMLButtonElement>('#fg-notes-prev-note').disabled = $<HTMLButtonElement>('#fg-notes-next-note').disabled = !!note.pin || list.length < 2;
+        $('#fg-notes-return-note').hidden = !note.pin;
+        detail.classList.toggle('is-pinned-detail', !!note.pin);
+        root.querySelectorAll<HTMLElement>('[data-color]').forEach(el => { const active = el.dataset.color === note.color; el.classList.toggle('selected', active); el.setAttribute('aria-pressed', String(active)); });
+        saveStatus();
+    }
+    function makeBody(note: HangingNote, point: Point) {
+        let body = bodies.get(note.id);
+        if (body)
+            return body;
+        const el = stack.cloneNode(true) as HTMLButtonElement;
+        el.removeAttribute('id');
+        el.querySelectorAll('[id]').forEach(child => child.removeAttribute('id'));
+        el.querySelectorAll('.paper-back,.knot').forEach(child => child.remove());
+        el.className = 'paper-stack loose-note';
+        el.dataset.noteId = note.id;
+        el.dataset.attachment = note.pin ? 'pinned' : 'free';
+        el.style.cursor = '';
+        el.removeAttribute('aria-describedby');
+        el.setAttribute('aria-expanded', 'false');
+        el.inert = false;
+        el.setAttribute('aria-description', copy('拖动可换位置；拖回顶栏纸叠，松手即可重新挂上。方向键微调，Shift 加方向键大步移动。'));
+        body = { id: note.id, el, x: point.x, y: point.y, tx: point.x, ty: point.y, vx: 0, vy: 0, angle: note.pin?.tilt || 0, av: 0, kind: note.pin ? 'pinned' : 'free' };
+        bodies.set(note.id, body);
+        $('#fg-notes-hanging-space').append(el);
+        fillPaper(el, note, copy('留给自己'));
+        bindPaper(el, body);
+        renderBody(body);
+        return body;
+    }
+    function animationRect(el: Element) {
+        const b = localBox(el);
+        return { x: b.left, y: b.top, width: b.right - b.left, height: b.bottom - b.top };
+    }
+    function localBox(el: Element) {
+        const r = el.getBoundingClientRect(), s = stage.getBoundingClientRect(), zoom = s.width / Math.max(1, stage.clientWidth);
+        return { left: (r.left - s.left) / zoom, right: (r.right - s.left) / zoom, top: (r.top - s.top) / zoom, bottom: (r.bottom - s.top) / zoom };
+    }
+    function measure() {
+        measureViewport();
+        if (disposed)
+            return;
+        const w = stage.clientWidth, h = stage.clientHeight;
+        const anchor = dashboard.querySelector('.dash-notes-anchor');
+        if (!w || !h || !anchor)
+            return;
+        const slot = localBox(anchor), q = dashboard.querySelector('.dash-hero__quote');
+        geometry = { w, h, scale: .4, ax: (slot.left + slot.right) / 2, ay: slot.top + 4, length: 25, quote: q ? localBox(q) : null };
+        $('#fg-notes-pin').style.left = `${geometry.ax}px`;
+        $('#fg-notes-pin').style.top = `${geometry.ay}px`;
+        for (const note of notes) {
+            if (!note.pin)
+                continue;
+            const point = pointFromPin(note.pin), body = makeBody(note, point);
+            if (drag?.body === body)
+                continue;
+            body.x = body.tx = point.x;
+            body.y = body.ty = point.y;
+            body.angle = note.pin.tilt;
+            renderBody(body);
+        }
+        if (editId)
+            positionEditor();
+        updateUI();
+        render();
+        wake();
+    }
+    function positionEditor() {
+        const body = bodies.get(editId ?? ''), point = body || { x: geometry.ax, y: geometry.ay + 34 };
+        const view = localViewport();
+        detail.style.maxHeight = `${Math.max(100, view.bottom - view.top - 24)}px`;
+        const width = Math.min(330, geometry.w - 24), height = detail.hidden ? 375 : detail.offsetHeight;
+        let left = clamp(point.x - width / 2, 12, geometry.w - width - 12);
+        let top = clamp(point.y - 13, Math.max(12, view.top + 12), Math.min(geometry.h, view.bottom) - height - 12);
+        const q = geometry.quote;
+        if (q && left + width > q.left && left < q.right && top < q.bottom && top + height > q.top) {
+            if (q.left - width - 12 >= 12)
+                left = q.left - width - 12;
+            else if (q.bottom + height + 12 < view.bottom)
+                top = q.bottom + 12;
+        }
+        detail.style.left = `${left}px`;
+        detail.style.top = `${top}px`;
+        detail.style.width = `${width}px`;
+    }
+    function openEditor(id = front()?.id, focusText = false) {
+        if (!id) {
+            addNote();
+            return;
+        }
+        if (editId)
+            closeEditor(false);
+        const note = byId(id);
+        if (!note)
+            return;
+        if (!note.pin)
+            frontId = id;
+        editorSource = bodies.get(id)?.el || stack;
+        const from = animationRect(editorSource);
+        editId = id;
+        detail.hidden = false;
+        updateUI();
+        updateEditor();
+        positionEditor();
+        editorSource.inert = true;
+        editorSource.classList.add('is-editing');
+        editorSource.setAttribute('aria-expanded', 'true');
+        stage.classList.add('is-open');
+        if (!reduced) {
+            transition?.cancel();
+            const to = animationRect(detail);
+            transitionSource = detail;
+            transition = detail.animate([{ transform: `translate(${from.x + from.width / 2 - to.x - to.width / 2}px,${from.y - to.y}px) scale(${geometry.scale * .65})`, opacity: .2 }, { transform: 'translate(0,0) scale(1)', opacity: 1 }], { duration: 420, easing: 'cubic-bezier(.16,1,.3,1)' });
+        }
+        (focusText ? input : $('#fg-notes-close-note')).focus({ preventScroll: true });
+        render();
+        wake();
+    }
+    function closeEditor(focus = true) {
+        if (!editId)
+            return;
+        const source = editorSource, from = animationRect(detail);
+        editId = null;
+        transition?.cancel();
+        detail.hidden = true;
+        stage.classList.remove('is-open');
+        if (source) {
+            source.inert = false;
+            source.classList.remove('is-editing');
+            source.setAttribute('aria-expanded', 'false');
+        }
+        updateUI();
+        render();
+        if (source?.isConnected) {
+            const to = animationRect(source);
+            if (!reduced) {
+                transitionSource = source;
+                transition = source.animate([{ translate: `${from.x + from.width / 2 - to.x - to.width / 2}px ${from.y - to.y}px`, scale: Math.min(2, from.width / to.width), opacity: .3 }, { translate: '0px 0px', scale: 1, opacity: 1 }], { duration: 280, easing: 'cubic-bezier(.16,1,.3,1)' });
+            }
+            if (focus)
+                source.focus({ preventScroll: true });
+        }
+        else if (focus)
+            stack.focus({ preventScroll: true });
+        editorSource = null;
+        if (pending)
+            applyIncoming(pending);
+        wake();
+    }
+    function addNote() {
+        closeEditor(false);
+        if (notes.length >= 80) {
+            toast(copy('这叠纸有点厚了，先收走几张吧。'));
+            return;
+        }
+        const note: HangingNote = { id: crypto.randomUUID(), text: '', color: 'butter' };
+        notes.push(note);
+        frontId = note.id;
+        persist();
+        updateUI();
+        openEditor(note.id, true);
+    }
+    function turnPage(direction: number) {
+        if (!editId || byId(editId)?.pin)
+            return;
+        const list = hanging();
+        if (list.length < 2)
+            return;
+        const index = list.findIndex(n => n.id === editId);
+        const next = list[(index + direction + list.length) % list.length];
+        frontId = editId = next.id;
+        updateUI();
+        updateEditor();
+        if (!reduced) {
+            transitionSource = detail;
+            transition = detail.animate([{ translate: `${direction * 13}px 0px`, rotate: `${direction * 1.5}deg`, opacity: .5 }, { translate: '0px 0px', rotate: '0deg', opacity: 1 }], { duration: 300, easing: 'cubic-bezier(.16,1,.3,1)' });
+            wake();
+        }
+    }
+    function archive() {
+        const id = editId;
+        closeEditor(false);
+        const index = notes.findIndex(n => n.id === id);
+        if (index < 0)
+            return;
+        const note = notes[index];
+        undoEntry = { note: structuredClone(note), index };
+        notes.splice(index, 1);
+        bodies.get(note.id)?.el.remove();
+        bodies.delete(note.id);
+        persist();
+        updateUI();
+        render();
+        stack.focus({ preventScroll: true });
+        toast(copy('这张便签已经收走了。'), true);
+    }
+    function undo() {
+        if (!undoEntry)
+            return;
+        if (notes.length >= 80) {
+            toast(copy('便签已满，先收走一张再撤回。'), true);
+            return;
+        }
+        const { note, index } = undoEntry;
+        notes.splice(Math.min(index, notes.length), 0, note);
+        undoEntry = null;
+        if (note.pin)
+            makeBody(note, pointFromPin(note.pin));
+        else
+            frontId = note.id;
+        persist();
+        updateUI();
+        render();
+        openEditor(note.id);
+        $('#fg-notes-toast').hidden = true;
+    }
+    function returnSheet() {
+        if (editId)
+            returnToStack(editId);
+    }
+    function returnToStack(id: string) {
+        if (editId === id)
+            closeEditor(false);
+        const note = byId(id), body = bodies.get(id);
+        if (!note || !body)
+            return;
+        const from = animationRect(body.el), angle = body.angle;
+        transition?.cancel();
+        body.el.remove();
+        bodies.delete(id);
+        delete note.pin;
+        frontId = id;
+        if (snap?.id === id)
+            snap = null;
+        resetPendulum();
+        persist();
+        updateUI();
+        render();
+        if (!reduced) {
+            const to = animationRect(stack), scale = geometry.scale;
+            // Animate only the returning front sheet; the rest of the stack stays put.
+            $('#fg-notes-paper-front').animate([
+                { translate: `${(from.x - to.x) / scale}px ${(from.y - to.y) / scale}px`, rotate: `${angle - pendulum.paper}rad`, opacity: .7 },
+                { translate: '0px 0px', rotate: '0rad', opacity: 1 },
+            ], { duration: 360, easing: 'cubic-bezier(.16,1,.3,1)' });
+            stack.querySelector('.knot')!.animate([{ opacity: 0, scale: .7 }, { opacity: 1, scale: 1 }], { duration: 180, delay: 180, fill: 'backwards', easing: 'ease-out' });
+            if (!paused)
+                pendulum.velocity = .12;
+        }
+        stack.focus({ preventScroll: true });
+        announce(copy('这一张已重新挂好，其他便签保持原位。'));
+        wake();
+    }
+    function resetPendulum() { Object.assign(pendulum, { angle: -.02, velocity: 0, extension: 0, ev: 0, paper: -.01, pv: 0, flutter: 0 }); }
+    function detachTop() {
+        const note = front();
+        if (!note)
+            return null;
+        const point = stackPoint();
+        snap = reduced ? null : { started: performance.now(), ax: geometry.ax, ay: geometry.ay, x: point.x, y: point.y, id: note.id };
+        const body = makeBody(note, point);
+        body.kind = 'free';
+        body.el.dataset.attachment = 'free';
+        body.angle = pendulum.paper;
+        if (drag) {
+            drag.body = body;
+            drag.created = true;
+        }
+        resetPendulum();
+        stage.classList.remove('is-tensioned');
+        remaining.hidden = true;
+        updateUI();
+        announce(copy('只取下这一张。剩下的纸继续挂着，松手即可钉住手里的这一张。'));
+        wake();
+        return body;
+    }
+    function pinBody(body: Body, animate = true) {
+        const note = byId(body.id);
+        if (!note)
+            return;
+        const previous = { x: body.x, y: body.y }, point = fit(body.tx, body.ty, true), b = bounds();
+        body.x = body.tx = point.x;
+        body.y = body.ty = point.y;
+        body.vx = body.vy = 0;
+        body.kind = 'pinned';
+        body.angle = clamp(body.angle * .35, -.045, .045);
+        note.pin = { u: clamp((point.x - b.left) / Math.max(1, b.right - b.left), 0, 1), y: point.y, tilt: body.angle };
+        body.el.dataset.attachment = 'pinned';
+        renderBody(body);
+        persist();
+        updateUI();
+        if (animate && !reduced) {
+            body.el.animate([{ translate: `${previous.x - point.x}px ${previous.y - point.y}px` }, { translate: '0px 0px' }], { duration: 140, easing: 'cubic-bezier(.16,1,.3,1)' });
+            body.el.querySelector('.pushpin')!.animate([{ transform: 'translate(7px,-24px) scale(1.35) rotate(18deg)', opacity: 0 }, { transform: 'translate(1px,-2px) scale(1.04)', opacity: 1, offset: .7 }, { transform: 'translate(0,0) scale(1)', opacity: 1 }], { duration: 300, delay: 70, fill: 'backwards', easing: 'cubic-bezier(.22,1,.36,1)' });
+            body.el.animate([{ rotate: '1deg' }, { rotate: '-.4deg', offset: .55 }, { rotate: '0deg' }], { duration: 330, easing: 'ease-out' });
+        }
+        announce(copy('这一张已钉好。可以继续从纸叠取下一张。'));
+        wake();
+    }
+    function pointerDown(event: PointerEvent, body: Body | null = null) {
+        if (event.button !== 0 || drag || event.isPrimary === false)
+            return;
+        if (editId)
+            closeEditor(false);
+        if (body && (bodies.get(body.id) !== body || !byId(body.id) || !body.el.isConnected))
+            return;
+        if (!body && !front())
+            return;
+        const el = event.currentTarget as HTMLButtonElement;
+        el.getAnimations().forEach(a => a.cancel());
+        el.querySelector('.pushpin')?.getAnimations().forEach(a => a.cancel());
+        el.querySelector('.paper-front')!.getAnimations().forEach(a => a.cancel());
+        transition?.cancel();
+        const point = body || stackPoint(), { x: lx, y: ly } = pointerLocal(event);
+        drag = { id: event.pointerId, capture: el, body, created: false, moved: false, overSince: null, returnReady: false, x: event.clientX, y: event.clientY, sx: event.clientX, sy: event.clientY, lx, ly, startX: lx, startY: ly, offsetX: lx - point.x, offsetY: ly - point.y, angle: pendulum.angle, extension: pendulum.extension, originFront: frontId, originPin: body ? structuredClone(byId(body.id)!.pin!) : null, originPoint: { x: point.x, y: point.y } };
+        el.setPointerCapture(event.pointerId);
+        el.style.cursor = 'grabbing';
+        suppressClick = false;
+        wake();
+    }
+    function pointerMove(event: PointerPosition) {
+        if (!drag || event.pointerId !== drag.id)
+            return;
+        drag.x = event.clientX;
+        drag.y = event.clientY;
+        const local = pointerLocal(event);
+        drag.lx = local.x;
+        drag.ly = local.y;
+        if (Math.hypot(drag.x - drag.sx, drag.y - drag.sy) > 5)
+            drag.moved = true;
+        if (!drag.moved)
+            return;
+        updateBreakIntent();
+        if (drag.body) {
+            updateFreeTarget();
+        }
+        wake();
+    }
+    function updateBreakIntent() {
+        if (!drag?.moved || drag.body)
+            return;
+        const dx = drag.lx - drag.startX + Math.sin(drag.angle) * geometry.length;
+        const dy = drag.ly - drag.startY + Math.cos(drag.angle) * (geometry.length + drag.extension);
+        const pull = Math.hypot(dx, dy) - geometry.length, threshold = breakStretch();
+        stage.classList.toggle('is-tensioned', pull > threshold * .65);
+        stage.classList.add('is-pulling');
+        $('#fg-notes-gesture-copy').textContent = pull >= threshold ? copy('保持一下，取下这一张') : copy('再拉远一些，才会取下来');
+        if (pull < threshold) {
+            drag.overSince = null;
+            return;
+        }
+        drag.overSince ??= performance.now();
+        if (performance.now() - drag.overSince >= BREAK_HOLD_MS) {
+            detachTop();
+            stage.classList.remove('is-pulling');
+            updateFreeTarget();
+        }
+    }
+    function updateFreeTarget() {
+        if (!drag?.body || !drag.moved)
+            return;
+        const body = drag.body, x = drag.lx - drag.offsetX, y = drag.ly - drag.offsetY, home = restPoint();
+        const rx = Math.max(52, 214 * geometry.scale * .58), ry = Math.max(48, 196 * geometry.scale * .45);
+        const ready = Math.abs(x - home.x) <= rx && Math.abs(y - home.y) <= ry;
+        if (ready !== drag.returnReady) {
+            drag.returnReady = ready;
+            if (ready)
+                announce(copy('已对准纸叠，松手即可挂回这一张。'));
+        }
+        const target = ready ? home : fit(x, y);
+        body.kind = 'free';
+        body.el.dataset.attachment = 'free';
+        body.tx = target.x;
+        body.ty = target.y;
+    }
+    function renderReturnTarget() {
+        const target = $('#fg-notes-return-target'), visible = !!(drag?.body && drag.moved);
+        target.hidden = !visible;
+        stage.classList.toggle('return-ready', visible && !!drag?.returnReady);
+        if (!visible)
+            return;
+        const home = restPoint(), width = 214 * geometry.scale + 28, height = 196 * geometry.scale + 26;
+        target.style.left = `${home.x - width / 2}px`;
+        target.style.top = `${home.y - 15 * geometry.scale - 13}px`;
+        target.style.width = `${width}px`;
+        target.style.height = `${height}px`;
+        target.querySelector('span')!.textContent = drag?.returnReady ? copy('松手，挂回这里') : copy('拖回这里，可重新挂上');
+    }
+    function finishCapture() {
+        const previous = drag;
+        drag = null;
+        if (!previous)
+            return;
+        previous.capture.style.cursor = '';
+        stage.classList.remove('is-tensioned', 'is-pulling', 'return-ready');
+        $('#fg-notes-return-target').hidden = true;
+        remaining.hidden = true;
+        stack.classList.remove('dragging-one');
+        $('#fg-notes-gesture-copy').textContent = copy('拉远并保持一下，就能取下来');
+        if (previous.capture.hasPointerCapture(previous.id))
+            previous.capture.releasePointerCapture(previous.id);
+        return previous;
+    }
+    function pointerEnd(event: PointerEvent) {
+        if (!drag || event.pointerId !== drag.id)
+            return;
+        // A final position may arrive only with pointerup (touch/coalesced input).
+        pointerMove(event);
+        const previous = finishCapture();
+        if (!previous)
+            return;
+        suppressClick = previous.moved;
+        if (previous.moved && previous.body) {
+            if (previous.returnReady)
+                returnToStack(previous.body.id);
+            else
+                pinBody(previous.body);
+        }
+        else if (paused || reduced)
+            resetPendulum();
+        updateUI();
+        render();
+        if (pending)
+            applyIncoming(pending);
+        wake();
+        if (previous.moved)
+            setTimeout(() => { suppressClick = false; }, 100);
+    }
+    function cancelDrag(event?: {
+        pointerId?: number;
+    }) {
+        if (!drag || (event?.pointerId !== undefined && event.pointerId !== drag.id))
+            return;
+        const previous = finishCapture();
+        if (!previous)
+            return;
+        if (previous.created && previous.body) {
+            previous.body.el.remove();
+            bodies.delete(previous.body.id);
+            frontId = previous.originFront;
+        }
+        else if (previous.body) {
+            const body = previous.body;
+            body.kind = 'pinned';
+            body.el.dataset.attachment = 'pinned';
+            body.x = body.tx = previous.originPoint.x;
+            body.y = body.ty = previous.originPoint.y;
+            body.angle = previous.originPin?.tilt ?? 0;
+            body.vx = body.vy = 0;
+            renderBody(body);
+        }
+        snap = null;
+        resetPendulum();
+        suppressClick = true;
+        if (pending)
+            applyIncoming(pending);
+        updateUI();
+        render();
+        wake();
+        announce(copy('已取消移动，这张纸回到原来的位置。'));
+        setTimeout(() => { suppressClick = false; }, 100);
+    }
+    function bindPaper(el: HTMLButtonElement, body: Body | null = null) {
+        listen(el, 'pointerdown', e => pointerDown(e, body));
+        listen(el, 'pointermove', pointerMove);
+        listen(el, 'pointerup', pointerEnd);
+        listen(el, 'pointercancel', cancelDrag);
+        listen(el, 'lostpointercapture', e => { if (drag?.capture === el)
+            cancelDrag(e); });
+        listen(el, 'click', () => { if (!suppressClick)
+            openEditor(body?.id || front()?.id); });
+        listen(el, 'pointerenter', e => { if (!body && e.pointerType !== 'touch') {
+            pendulum.hovered = true;
+            if (!paused && !reduced && !drag)
+                pendulum.velocity += .075;
+            wake();
+        } });
+        listen(el, 'pointerleave', () => { if (!body) {
+            pendulum.hovered = false;
+            wake();
+        } });
+        listen(el, 'keydown', e => {
+            if (['Enter', ' '].includes(e.key))
+                suppressClick = false;
+            if (body && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
+                e.preventDefault();
+                const step = e.shiftKey ? 24 : 8;
+                body.tx += e.key === 'ArrowLeft' ? -step : e.key === 'ArrowRight' ? step : 0;
+                body.ty += e.key === 'ArrowUp' ? -step : e.key === 'ArrowDown' ? step : 0;
+                pinBody(body, false);
+            }
+        });
+    }
+    function simulate(dt: number) {
+        const active = !paused && !reduced, p = pendulum;
+        if (drag?.moved && !drag.body) {
+            const dx = drag.lx - drag.startX + Math.sin(drag.angle) * geometry.length, dy = drag.ly - drag.startY + Math.cos(drag.angle) * (geometry.length + drag.extension);
+            const target = clamp(Math.atan2(dx, Math.max(18, dy)), -.95, .95), extension = clamp(Math.hypot(dx, dy) - geometry.length, -geometry.length * .5, breakStretch() * .72);
+            if (active) {
+                p.velocity += ((target - p.angle) * 165 - p.velocity * 23) * dt;
+                p.ev += ((extension - p.extension) * 155 - p.ev * 22) * dt;
+            }
+            else {
+                p.angle = target;
+                p.extension = extension;
+                p.velocity = p.ev = 0;
+            }
+        }
+        else if (active) {
+            const breeze = wind * (.64 * Math.sin(elapsed * 1.23) + .27 * Math.sin(elapsed * 2.07 + 1.4));
+            p.velocity += (-18 * Math.sin(p.angle) - 2.65 * p.velocity + breeze) * dt;
+            p.ev += (-p.extension * 90 - p.ev * 13) * dt;
+        }
+        if (active) {
+            p.velocity = clamp(p.velocity, -3.4, 3.4);
+            p.angle = clamp(p.angle + p.velocity * dt, -1.08, 1.08);
+            p.extension += p.ev * dt;
+            const target = p.angle * .42 - p.velocity * .07 + (p.hovered && !drag ? -.025 : 0);
+            p.pv += ((target - p.paper) * 100 - p.pv * 13) * dt;
+            p.paper += p.pv * dt;
+            p.flutter += (p.velocity * .06 + wind * .009 * Math.sin(elapsed * 2.6) - p.flutter) * Math.min(1, dt * 10);
+        }
+        if (drag?.body && drag.moved) {
+            const b = drag.body;
+            if (!active) {
+                b.x = b.tx;
+                b.y = b.ty;
+                b.angle = 0;
+            }
+            else {
+                b.vx += ((b.tx - b.x) * 420 - b.vx * 37) * dt;
+                b.vy += ((b.ty - b.y) * 420 - b.vy * 37) * dt;
+                b.x += b.vx * dt;
+                b.y += b.vy * dt;
+                b.av += ((clamp(b.vx * .00015, -.09, .09) - b.angle) * 95 - b.av * 16) * dt;
+                b.angle += b.av * dt;
+            }
+        }
+    }
+    function setPaperPose(el: HTMLElement, x: number, y: number, angle: number) { el.style.transform = `translate3d(${x - 107}px,${y - 15}px,0) scale(${geometry.scale}) rotate(${angle}rad)`; }
+    function renderBody(body: Body) { setPaperPose(body.el, body.x, body.y, body.angle); }
+    function renderSnap() {
+        let upper = '', lower = '', fibers = '';
+        if (snap) {
+            const t = clamp((performance.now() - snap.started) / 550, 0, 1), eased = 1 - (1 - t) ** 3;
+            const cx = snap.ax + (snap.x - snap.ax) * .59, cy = snap.ay + (snap.y - snap.ay) * .59;
+            const recoil = Math.sin(t * Math.PI * 3) * (1 - t) * 12;
+            upper = `M ${snap.ax} ${snap.ay} Q ${snap.ax + recoil} ${(snap.ay + cy) / 2} ${cx + (snap.ax - cx) * eased} ${cy + (snap.ay + 16 - cy) * eased}`;
+            const body = bodies.get(snap.id);
+            if (body)
+                lower = `M ${body.x} ${body.y} Q ${body.x - recoil * .5} ${body.y + (cy - snap.y) * (1 - eased) * .5} ${body.x + (cx - snap.x) * (1 - eased) + recoil * .4} ${body.y + (cy - snap.y) * (1 - eased)}`;
+            for (let i = 0; i < 6; i++) {
+                const a = i * Math.PI / 3 + .2, r = 2 + t * 12;
+                fibers += `<path d="M ${cx + Math.cos(a) * r} ${cy + Math.sin(a) * r} l ${Math.cos(a) * 3} ${Math.sin(a) * 3}" opacity="${Math.max(0, 1 - t * 2.2)}"/>`;
+            }
+            if (t >= 1) {
+                snap = null;
+                upper = lower = fibers = '';
+            }
+        }
+        $('#fg-notes-rope-break-upper').setAttribute('d', upper);
+        $('#fg-notes-rope-loose').setAttribute('d', lower);
+        $('#fg-notes-rope-loose-fiber').setAttribute('d', lower);
+        $('#fg-notes-snap-fibers').innerHTML = fibers;
+    }
+    function render() {
+        if (!geometry)
+            return;
+        const point = stackPoint(), { ax, ay, scale } = geometry;
+        renderReturnTarget();
+        if (drag?.moved && !drag.body) {
+            $('#fg-notes-gesture-hint').style.left = `${clamp(point.x - 85, 16, geometry.w - 210)}px`;
+            $('#fg-notes-gesture-hint').style.top = `${Math.min(geometry.h - 68, point.y + 194 * scale + 15)}px`;
+        }
+        setPaperPose(stack, point.x, point.y, pendulum.paper);
+        $('#fg-notes-back-one').style.transform = `translate(-4px,5px) rotate(${-6 + pendulum.flutter * 180}deg)`;
+        $('#fg-notes-back-two').style.transform = `translate(4px,9px) rotate(${7 - pendulum.flutter * 230}deg)`;
+        const pullingOne = drag?.moved && !drag.body, viewingOne = editId && !byId(editId)?.pin, rest = hanging().filter(n => n.id !== frontId);
+        stack.classList.toggle('dragging-one', !!pullingOne);
+        remaining.hidden = !((pullingOne || viewingOne) && rest.length);
+        if (!remaining.hidden) {
+            fillPaper(remaining, rest[0], `01 / ${String(rest.length).padStart(2, '0')}`);
+            remaining.querySelector<HTMLElement>('.paper-back-one')!.style.visibility = rest.length > 1 ? 'visible' : 'hidden';
+            remaining.querySelector<HTMLElement>('.paper-back-two')!.style.visibility = rest.length > 2 ? 'visible' : 'hidden';
+            const r = restPoint();
+            setPaperPose(remaining, r.x, r.y, -.015);
+            $('#fg-notes-rope-rest').setAttribute('d', `M ${ax} ${ay} Q ${ax - 1} ${(ay + r.y) / 2} ${r.x} ${r.y}`);
+        }
+        else
+            $('#fg-notes-rope-rest').setAttribute('d', '');
+        let ex = point.x, ey = point.y;
+        const hangingEditor = editId && !byId(editId)?.pin;
+        if (hangingEditor) {
+            const r = localBox(detail);
+            ex = (r.left + r.right) / 2;
+            ey = r.top + 13;
+        }
+        else if (transition?.playState === 'running' && transitionSource === stack) {
+            const r = localBox(stack.querySelector('.eyelet')!);
+            ex = (r.left + r.right) / 2;
+            ey = (r.top + r.bottom) / 2;
+        }
+        const path = `M ${ax} ${ay} Q ${(ax + ex) / 2 - (hangingEditor ? 0 : pendulum.velocity * 8)} ${(ay + ey) / 2 + Math.abs(ex - ax) * .08} ${ex} ${ey}`;
+        ['rope-base', 'rope-fiber', 'rope-shadow'].forEach(id => $(`#fg-notes-${id}`).setAttribute('d', path));
+        if (drag?.body)
+            renderBody(drag.body);
+        renderSnap();
+        $('#fg-notes-ground-shadow').style.left = `${point.x - 85}px`;
+        $('#fg-notes-ground-shadow').style.top = `${Math.min(geometry.h - 78, point.y + 213 * scale)}px`;
+        $('#fg-notes-ground-shadow').style.transform = `scale(${scale})`;
+        $('#fg-notes-ground-shadow').style.opacity = hangingEditor ? '0' : '.45';
+    }
+    function tick(now: number) {
+        frame = undefined;
+        const dt = Math.min((now - (lastFrame || now)) / 1000, .032);
+        lastFrame = now;
+        if (!paused && !reduced)
+            elapsed += dt;
+        if (drag?.moved && scroller) {
+            const r = visibleViewport(), edge = 42;
+            const direction = drag.y > r.bottom - edge ? 1 : drag.y < r.top + edge ? -1 : 0;
+            if (direction) {
+                scroller.scrollTop += direction * 500 * dt;
+                pointerMove({ pointerId: drag.id, clientX: drag.x, clientY: drag.y });
+            }
+        }
+        updateBreakIntent();
+        for (let i = 0; i < 4; i++)
+            simulate(dt / 4);
+        render();
+        if ((!paused && !reduced && hanging().length) || drag || snap || transition?.playState === 'running')
+            wake();
+    }
+    function wake() { if (!disposed && frame === undefined && !document.hidden)
+        frame = requestAnimationFrame(tick); }
+    bindPaper(stack);
+    listen($('#fg-notes-placement-action'), 'click', () => {
+        const id = editId || front()?.id;
+        if (!id || byId(id)?.pin)
+            return;
+        closeEditor(false);
+        frontId = id;
+        const body = detachTop();
+        if (!body)
+            return;
+        const point = fit(geometry.ax, Math.max(geometry.ay + 165, geometry.quote?.bottom ?? 0) + 30, true);
+        body.tx = point.x;
+        body.ty = point.y;
+        pinBody(body);
+        body.el.focus({ preventScroll: true });
+    });
+    listen($('#fg-notes-close-note'), 'click', () => closeEditor());
+    listen($('#fg-notes-add-note'), 'click', addNote);
+    listen($('#fg-notes-prev-note'), 'click', () => turnPage(-1));
+    listen($('#fg-notes-next-note'), 'click', () => turnPage(1));
+    listen($('#fg-notes-archive-note'), 'click', archive);
+    listen($('#fg-notes-undo'), 'click', undo);
+    listen($('#fg-notes-return-note'), 'click', returnSheet);
+    listen($<HTMLButtonElement>('#fg-notes-save-status'), 'click', () => { if (!storageOK)
+        persist(); });
+    listen(input, 'input', () => { const n = byId(editId); if (!n)
+        return; n.text = input.value; $('#fg-notes-char-count').textContent = `${n.text.length} / 500`; persist(); updateUI(); });
+    root.querySelectorAll<HTMLElement>('[data-color]').forEach(el => listen(el, 'click', () => { const n = byId(editId); if (!n)
+        return; n.color = el.dataset.color as HangingNote['color']; persist(); updateUI(); updateEditor(); }));
+    listen($('#fg-notes-pause'), 'click', () => { paused = !paused; $('#fg-notes-pause').setAttribute('aria-pressed', String(paused)); $('#fg-notes-pause').textContent = paused ? copy('继续摆动') : copy('暂停摆动'); if (paused)
+        resetPendulum(); render(); wake(); });
+    listen(document, 'keydown', e => {
+        if (e.defaultPrevented || e.isComposing)
+            return;
+        if (e.key === 'Escape' && (drag || editId)) {
+            e.preventDefault();
+            if (drag)
+                cancelDrag();
+            else
+                closeEditor();
+        }
+    });
+    listen(document, 'pointerdown', e => { if (editId && e.target instanceof Node && !detail.contains(e.target) && !$('#fg-notes-toast').contains(e.target))
+        closeEditor(false); });
+    function syncMotion() {
+        reduced = media.matches || document.documentElement.dataset.motion === 'reduce';
+        transition?.cancel();
+        root.getAnimations({ subtree: true }).forEach(a => a.cancel());
+        snap = null;
+        resetPendulum();
+        render();
+        wake();
+    }
+    media.addEventListener('change', syncMotion, { signal: controller.signal });
+    const motionObserver = new MutationObserver(syncMotion);
+    motionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-motion'] });
+    listen(window, 'blur', () => cancelDrag());
+    window.addEventListener('scroll', event => {
+        if (event.target instanceof Node && detail.contains(event.target))
+            return;
+        if (drag)
+            pointerMove({ pointerId: drag.id, clientX: drag.x, clientY: drag.y });
+        if (editId)
+            positionEditor();
+        if (!$('#fg-notes-toast').hidden)
+            positionToast();
+    }, { passive: true, capture: true, signal: controller.signal });
+    listen(document, 'visibilitychange', () => { if (frame)
+        cancelAnimationFrame(frame); frame = undefined; lastFrame = 0; if (document.hidden)
+        cancelDrag();
+    else
+        wake(); });
+    const observer = new ResizeObserver(() => { measure(); });
+    observer.observe(stage);
+    const header = dashboard.querySelector('.dash-header');
+    if (header)
+        observer.observe(header);
+    // Quote swaps replace the figure; header size alone can remain unchanged.
+    const headerObserver = new MutationObserver(() => measure());
+    if (header)
+        headerObserver.observe(header, { childList: true, subtree: true, characterData: true });
+    listen(window, 'resize', measure);
+    void document.fonts?.ready.then(() => { if (!disposed)
+        measure(); });
+    measure();
+    updateUI();
+    wake();
+    function applyIncoming(next: HangingNote[]) {
+        if (disposed)
+            return;
+        if (JSON.stringify(next) === JSON.stringify(notes)) {
+            pending = null;
+            return;
+        }
+        if (drag || editId || saving || !storageOK) {
+            pending = next;
+            return;
+        }
+        pending = null;
+        notes = structuredClone(next);
+        persisted = structuredClone(next);
+        for (const [id, body] of bodies) {
+            if (!notes.find(n => n.id === id)?.pin) {
+                body.el.remove();
+                bodies.delete(id);
+            }
+        }
+        measure();
+    }
+    return {
+        update: applyIncoming,
+        destroy() {
+            disposed = true;
+            controller.abort();
+            observer.disconnect();
+            headerObserver.disconnect();
+            motionObserver.disconnect();
+            if (frame)
+                cancelAnimationFrame(frame);
+            clearTimeout(toastTimer);
+            root.getAnimations({ subtree: true }).forEach(a => a.cancel());
+            root.replaceChildren();
+        },
+    };
+}
diff --git a/apps/web/src/features/dashboard/hanging-notes/copy.ts b/apps/web/src/features/dashboard/hanging-notes/copy.ts
new file mode 100644
index 0000000..a6089bb
--- /dev/null
+++ b/apps/web/src/features/dashboard/hanging-notes/copy.ts
@@ -0,0 +1,50 @@
+export const noteTranslations: Record<string, string> = {
+  "保存中…": "Saving…",
+  "已保存": "Saved",
+  "尚未保存，点击重试": "Not saved · Retry",
+  "保存未完成，内容仍在此页。请重试。": "Could not save. Your draft is still here. Please retry.",
+  "一个念头，\n先放在这里。": "A little thought,\nkeep it here.",
+  "＋ 写一张": "+ Write a note",
+  "空白便签": "Blank note",
+  "写下第一张便签": "Write your first note",
+  "纸叠空了，写一张": "Write a little reminder",
+  "一次取下最上面一张。明显拉远并保持片刻才会断绳；取下的纸可拖回这里重新挂上。": "Take one sheet at a time. Pull farther and hold briefly to detach; drag it back here to reattach.",
+  "取下这一张": "Take this sheet",
+  "取下一张": "Take one sheet",
+  "留给自己": "A little reminder",
+  "已钉在桌面": "Pinned to Dashboard",
+  "拖动可换位置；拖回顶栏纸叠，松手即可重新挂上。方向键微调，Shift 加方向键大步移动。": "Drag to move; release over the stack to reattach. Arrow keys move; Shift moves farther.",
+  "这叠纸有点厚了，先收走几张吧。": "The stack is full. Put a few sheets away first.",
+  "这张便签已经收走了。": "This note has been put away.",
+  "便签已满，先收走一张再撤回。": "The stack is full. Put one away before undoing.",
+  "这一张已重新挂好，其他便签保持原位。": "This sheet is hanging again. Other notes stay in place.",
+  "只取下这一张。剩下的纸继续挂着，松手即可钉住手里的这一张。": "One sheet detached. Release to pin it; the remaining notes stay hanging.",
+  "这一张已钉好。可以继续从纸叠取下一张。": "This sheet is pinned. You can take another from the stack.",
+  "保持一下，取下这一张": "Hold briefly to take this sheet",
+  "再拉远一些，才会取下来": "Pull farther to take this sheet",
+  "已对准纸叠，松手即可挂回这一张。": "Over the stack. Release to reattach this sheet.",
+  "松手，挂回这里": "Release to hang it here",
+  "拖回这里，可重新挂上": "Drag here to reattach",
+  "拉远并保持一下，就能取下来": "Pull farther and hold to take a sheet",
+  "已取消移动，这张纸回到原来的位置。": "Move cancelled. This sheet is back in place.",
+  "继续摆动": "Resume breeze",
+  "暂停摆动": "Pause breeze",
+  "打开便签：": "Open note: ",
+  "。也可以按住拖动。": ". Hold to drag.",
+  "打开便签，也可以按住拖动": "Open note or hold to drag",
+  "便签内容": "Note content",
+  "收起便签": "Close note",
+  "收起": "Close",
+  "有什么想留给稍后的自己？": "A thought for your later self?",
+  "纸张颜色": "Paper color",
+  "麦芽纸": "Butter paper",
+  "鼠尾草纸": "Sage paper",
+  "蔷薇纸": "Rose paper",
+  "挂回纸叠": "Hang it back",
+  "收走这张": "Put away",
+  "上一张": "Previous sheet",
+  "下一张": "Next sheet",
+  "再写一张": "Write another",
+  "撤回": "Undo",
+  "记得": "Remember"
+}
diff --git a/apps/web/src/features/dashboard/hanging-notes/hanging-notes.css b/apps/web/src/features/dashboard/hanging-notes/hanging-notes.css
new file mode 100644
index 0000000..e1c941b
--- /dev/null
+++ b/apps/web/src/features/dashboard/hanging-notes/hanging-notes.css
@@ -0,0 +1,157 @@
+.dashboard-notes textarea{font:inherit}
+.dashboard-notes textarea{-webkit-tap-highlight-color:transparent}
+.dashboard-notes [hidden]{display:none!important}
+.dashboard-notes .icon-button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s,color .2s,transform .2s}
+.dashboard-notes .icon-button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
+.dashboard-notes .hanging-space{position:absolute;inset:0;pointer-events:none;z-index:5}
+.dashboard-notes .rope-svg{position:absolute;width:100%;height:100%;overflow:visible;stroke-linecap:round}
+.dashboard-notes .rope-shadow{stroke:#494331;stroke-width:2;opacity:.1;filter:blur(1.3px);transform:translate(3px,3px)}
+.dashboard-notes .rope-base{stroke:#a59a7f;stroke-width:2.1}
+.dashboard-notes .rope-fiber{stroke:#ddd5bd;stroke-width:.7;stroke-dasharray:2 3}
+.dashboard-notes .pin{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:radial-gradient(circle at 32% 24%,#d4c6a8,#9e927a 60%,#786e5b);box-shadow:0 1px 2px #3a37334d;z-index:6}
+.dashboard-notes .paper-stack{--paper:#eee5c9;position:absolute;width:214px;height:196px;padding:0;pointer-events:auto;touch-action:none;user-select:none;transform-origin:50% 15px;cursor:grab;perspective:750px;outline-offset:15px;will-change:transform}
+.dashboard-notes .paper-stack:active{cursor:grabbing}
+.dashboard-notes .paper{display:block;position:absolute;inset:0;border-radius:1px 2px 5px 2px;transform-origin:50% 15px;transition:background .3s}
+.dashboard-notes .paper-back-two{background:#e3cfbf;transform:translate(4px,9px) rotate(7deg);box-shadow:1px 6px 9px #52493814}
+.dashboard-notes .paper-back-one{background:#d3ddce;transform:translate(-4px,5px) rotate(-6deg);box-shadow:1px 3px 4px #52493816}
+.dashboard-notes .paper-front{background:linear-gradient(135deg,#ffffff14,transparent 35%,#8e783805),var(--paper);box-shadow:1px 2px 2px #766b4c13,3px 13px 19px -7px #51493730,0 1px 0 inset #fff8;text-align:left;overflow:hidden;transition:box-shadow .3s,background .3s,filter .3s;display:flex;flex-direction:column;padding:33px 23px 15px;color:var(--paper-ink)}
+.dashboard-notes .paper-stack:hover .paper-front{box-shadow:1px 2px 2px #766b4c13,5px 20px 24px -8px #51493735,0 1px 0 inset #fff8}
+.dashboard-notes .paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.25;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.28' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}
+.dashboard-notes .eyelet,
+.dashboard-notes .detail-hole{position:absolute;top:10px;left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:#978b6b;box-shadow:0 1px 1px inset #645c4d50,0 1px 0 #fff9;border:1px solid #d0c5a5}
+.dashboard-notes .knot{position:absolute;top:4px;left:calc(50% - 2px);width:4px;height:13px;background:repeating-linear-gradient(25deg,#a79a7f 0 2px,#c6baa0 2px 3px);border-radius:4px;transform:rotate(-8deg);box-shadow:1px 0 1px #5b503333}
+.dashboard-notes .paper-overline{font-size:9px;color:#827a61;letter-spacing:3px}
+.dashboard-notes .paper-preview{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:450 23px/1.7 'Noto Serif SC',var(--font-display),serif;letter-spacing:1px;margin:8px 0 10px;white-space:pre-line;overflow-wrap:anywhere;flex:1}
+.dashboard-notes .paper-footer{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1.6px;color:#8d8469}
+.dashboard-notes .tiny-spark{font-size:20px;line-height:1;color:#778363}
+.dashboard-notes .paper-curl{position:absolute;bottom:-1px;right:-1px;width:22px;height:22px;background:linear-gradient(135deg,#d6cba8 0%,#f5edda 54%,#e3d8b9 57%,transparent 58%);clip-path:polygon(100% 0,100% 100%,0 100%);transform:scale(.8);transform-origin:100% 100%;transition:transform .4s var(--ease)}
+.dashboard-notes .paper-stack:hover .paper-curl{transform:scale(1.4)}
+.dashboard-notes .ground-shadow{position:absolute;width:170px;height:16px;background:#645b4320;filter:blur(12px);border-radius:50%;transform-origin:50% 50%;opacity:.45}
+.dashboard-notes .gesture-hint{position:absolute;font-size:11px;color:var(--muted);white-space:nowrap;margin:0;letter-spacing:.4px;transition:opacity .3s;display:flex;align-items:center;gap:9px}
+.dashboard-notes .hint-line{width:24px;height:13px;border-bottom:1px solid #a9ad9d;border-left:1px solid #a9ad9d;border-radius:0 0 0 12px;transform:rotate(-13deg);margin-top:-11px}
+.dashboard-notes.is-open .gesture-hint{opacity:0}
+.dashboard-notes .paper-stack.is-editing{pointer-events:none;opacity:0}
+.dashboard-notes.is-open .pin{opacity:.8}
+.dashboard-notes .note-detail{--paper:#eee5c9;position:absolute;width:330px;height:335px;pointer-events:auto;background:var(--paper);color:var(--paper-ink);padding:24px 24px 0;border-radius:2px 3px 7px 3px;box-shadow:0 1px 0 inset #fff7,1px 4px 6px #6c5e3520,10px 24px 38px -18px #4b422447;transform-origin:50% 13px;will-change:transform}
+.dashboard-notes .note-detail:before{content:'';position:absolute;inset:3px -4px -5px 3px;background:#e6dec8;transform:rotate(1.7deg);z-index:-1;border-radius:2px;box-shadow:0 2px 3px #51493719}
+.dashboard-notes .detail-top{display:flex;justify-content:space-between;align-items:center;height:30px;position:relative}
+.dashboard-notes .detail-top>span{font-size:10px;letter-spacing:2px;color:#837a60}
+.dashboard-notes .detail-top .icon-button{width:28px;height:28px;color:#82775d}
+.dashboard-notes .detail-top svg{width:15px;height:15px}
+.dashboard-notes textarea{position:relative;resize:none;border:0;border-radius:0;outline:0;background:repeating-linear-gradient(transparent 0 34px,#80765214 34px 35px);width:100%;height:152px;margin:12px 0 0;padding:0;color:var(--paper-ink);font:400 19px/35px 'Noto Serif SC',var(--font-display),serif;letter-spacing:.5px;overflow:auto;scrollbar-width:thin;scrollbar-color:#b8ae92 transparent}
+.dashboard-notes textarea:focus-visible{outline:1px solid #877f5e55;outline-offset:5px}
+.dashboard-notes textarea::placeholder{color:#8e866b;font-size:16px}
+.dashboard-notes .note-meta{display:flex;justify-content:space-between;color:#847a60;font-size:9px;margin:8px 0 12px}
+.dashboard-notes .detail-bottom{display:flex;align-items:center;justify-content:space-between;position:relative}
+.dashboard-notes .paper-colors{display:flex;gap:9px}
+.dashboard-notes .color{width:15px;height:15px;border-radius:50%;border:1px solid #6f654c30;background:#e9dfbf;position:relative;padding:0}
+.dashboard-notes .color.selected:after{content:'';position:absolute;inset:-4px;border:1px solid #8f8d72;border-radius:50%}
+.dashboard-notes .color[data-color=sage]{background:#d5dfcf}
+.dashboard-notes .color[data-color=rose]{background:#e8cfc2}
+.dashboard-notes .archive-button{font-size:10px;color:#776f57;display:flex;align-items:center;gap:4px;padding:5px}
+.dashboard-notes .archive-button svg{width:13px;height:13px}
+.dashboard-notes .archive-button:hover{background:#726c4910;border-radius:3px}
+.dashboard-notes .page-controls{margin:13px -24px 0;border-top:1px solid #7b72551c;height:44px;padding:0 15px;display:flex;align-items:center;gap:3px;font-size:10px;background:#ffffff0a;border-radius:0 0 6px 3px}
+.dashboard-notes .page-controls .icon-button{width:25px;height:25px}
+.dashboard-notes .page-controls svg{width:14px;height:14px}
+.dashboard-notes .flip{transform:rotate(180deg)}
+.dashboard-notes .page-controls>span{min-width:39px;text-align:center;font-variant-numeric:tabular-nums;color:#756e56}
+.dashboard-notes .add-note{display:flex;align-items:center;gap:4px;font-size:10px;margin-left:auto;color:#56664e}
+.dashboard-notes .toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--forest);color:#f5f3ed;padding:11px 18px;border-radius:6px;font-size:12px;z-index:20;box-shadow:0 5px 20px #3a37331a;display:flex;gap:20px;align-items:center;max-width:calc(100% - 32px);white-space:nowrap}
+.dashboard-notes .toast button{color:#e5e8cf;text-decoration:underline;padding:0}
+.dashboard-notes .note-detail{height:auto}
+.dashboard-notes textarea{display:block}
+.dashboard-notes .pushpin{position:absolute;top:-1px;left:calc(50% - 9px);width:18px;height:23px;display:none;pointer-events:none;transform-origin:50% 85%;z-index:5}
+.dashboard-notes .pushpin:before{content:'';position:absolute;width:3px;height:13px;left:8px;top:9px;border-radius:2px;background:linear-gradient(90deg,#b3ae9c,#efe7d5 45%,#8c897a);transform:rotate(-14deg);box-shadow:2px 2px 2px #554e3930}
+.dashboard-notes .pushpin>span{position:absolute;top:0;left:1px;width:16px;height:15px;border-radius:50%;background:radial-gradient(ellipse at 32% 25%,#e5dbba 0%,#c5b37e 30%,#9a8656 68%,#776744 100%);box-shadow:0 1px 1px #fff7 inset,1px 2px 2px #6c5b3d50,3px 6px 4px #56472b26}
+.dashboard-notes .pushpin>span:after{content:'';position:absolute;top:3px;left:4px;width:4px;height:3px;border-radius:50%;background:#fff5}
+.dashboard-notes .paper-stack[data-attachment=pinned] .pushpin{display:block}
+.dashboard-notes .paper-stack[data-attachment=pinned] .knot,
+.dashboard-notes .paper-stack[data-attachment=free] .knot{display:none}
+.dashboard-notes .paper-stack[data-attachment=pinned] .paper-front{box-shadow:1px 2px 2px #766b4c13,2px 6px 8px -4px #51493735,0 1px 0 inset #fff8}
+.dashboard-notes .paper-stack[data-attachment=pinned]:hover .paper-front{box-shadow:1px 2px 2px #766b4c13,2px 9px 12px -5px #51493740,0 1px 0 inset #fff8}
+.dashboard-notes .paper-stack[data-attachment=free] .paper-front{box-shadow:3px 5px 8px #766b4c18,8px 25px 28px -9px #51493740,0 1px 0 inset #fff8}
+.dashboard-notes .paper-stack[data-attachment=free]{z-index:12}
+.dashboard-notes [data-attachment=free] .gesture-hint,
+.dashboard-notes [data-attachment=pinned] .gesture-hint{opacity:0}
+.dashboard-notes [data-attachment=pinned] .ground-shadow,
+.dashboard-notes [data-attachment=free] .ground-shadow{display:none}
+.dashboard-notes .note-detail.is-pinned-detail .detail-hole{width:11px;height:11px;top:8px;left:calc(50% - 5px);background:radial-gradient(circle at 30% 25%,#e5dbba,#a59161 70%,#776744);border:none;box-shadow:1px 2px 2px #6c5b3d50}
+.dashboard-notes .snap-fibers{stroke:#ae9a70;stroke-width:1.1;fill:none}
+.dashboard-notes.is-tensioned .rope-base{stroke:#8c7956;stroke-width:1.6}
+.dashboard-notes .remaining-stack{pointer-events:none!important;opacity:1!important;z-index:2}
+.dashboard-notes .remaining-stack:disabled{opacity:1}
+.dashboard-notes .remaining-stack .pushpin{display:none}
+.dashboard-notes .dragging-one .paper-back{visibility:hidden!important}
+.dashboard-notes .loose-note{z-index:8}
+.dashboard-notes .loose-note .paper-back{display:none}
+.dashboard-notes .loose-note .paper-front{border-radius:1px 2px 4px 2px}
+.dashboard-notes .note-detail{z-index:30}
+.dashboard-notes .note-actions{display:flex;align-items:center;gap:6px}
+.dashboard-notes .paper-stack.is-empty .paper-front{background:transparent;border:1px dashed #9ca38b80;box-shadow:none}
+.dashboard-notes .is-empty .paper-preview{display:flex;align-items:center;justify-content:center;font:400 24px var(--font-body);letter-spacing:0}
+.dashboard-notes .is-empty .paper-overline,
+.dashboard-notes .is-empty .paper-curl,
+.dashboard-notes .is-empty .tiny-spark{display:none}
+.dashboard-notes .is-empty .paper-footer{justify-content:center;font-size:12px}
+.dashboard-notes .is-empty .paper-front{padding:25px 8px 18px}
+.dashboard-notes .is-empty .eyelet{opacity:.45}
+.dashboard-notes .return-target{position:absolute;pointer-events:none;border:1px dashed color-mix(in srgb,var(--forest) 50%,transparent);border-radius:6px;background:color-mix(in srgb,var(--forest) 4%,transparent);z-index:3;transition:background .16s,border-color .16s,box-shadow .16s}
+.dashboard-notes .return-target>span{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;color:var(--forest);background:var(--surface);padding:3px 8px;border-radius:4px}
+.dashboard-notes.return-ready .return-target{border-style:solid;border-color:var(--forest);background:color-mix(in srgb,var(--forest) 9%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--forest) 7%,transparent)}
+.dashboard-notes.is-pulling .gesture-hint{opacity:1!important;z-index:20;background:color-mix(in srgb,var(--surface) 92%,transparent);padding:3px 7px;border-radius:4px;font-size:10px}
+.dashboard-notes.is-pulling .gesture-hint .hint-line{display:none}
+.dashboard-notes #fg-notes-return-note{font-size:11px;min-height:30px;padding:4px 8px;color:#4c6048;background:#b7c5a32e;border-radius:4px;border:1px solid #8b9d733b}
+.dashboard-notes #fg-notes-return-note:hover{background:#b7c5a351}
+
+/* The paper layer spans the Dashboard outside the header scenery. */
+.dashboard:has(> .dashboard-notes) { position: relative; }
+.dashboard-notes { position:absolute; inset:0; z-index:20; pointer-events:none; --paper-ink:#514d3d; --forest:var(--accent,#465e4c); --surface:var(--bg-primary,#f5f3f0); --ink:var(--text-primary,#3a3733); --muted:var(--text-secondary,#77776c); --ease:cubic-bezier(.16,1,.3,1); font-family:var(--font-body); }
+.dashboard-notes *, .dashboard-notes *:before, .dashboard-notes *:after { box-sizing:border-box; }
+.dashboard-notes button { border:0; background:none; font:inherit; color:inherit; cursor:pointer; }
+.dashboard-notes button:disabled { opacity:.35; cursor:default; }
+.dashboard-notes button:focus-visible { outline:2px solid var(--forest); outline-offset:4px; }
+.dashboard-notes svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; }
+.dashboard-notes .icon-library { position:absolute;width:0;height:0;overflow:hidden; }
+.dashboard-notes .rope-svg { width:100%;height:100%; }
+.dashboard-notes .paper-stack { left:0;top:0; touch-action:none;cursor:grab; }
+.dashboard-notes .paper-stack:active { cursor:grabbing; }
+.dashboard-notes .remaining-stack:disabled { opacity:1; }
+.dashboard-notes .paper-stack.is-editing { opacity:0;pointer-events:none; }
+.dashboard-notes .paper-stack:focus-visible { outline-offset:10px; }
+.dashboard-notes .ground-shadow, .dashboard-notes .gesture-hint { opacity:0; }
+.dashboard-notes .note-detail { height:auto; max-height:calc(100dvh - 32px);overflow-y:auto; }
+.dashboard-notes .note-meta { align-items:center; }
+.dashboard-notes #fg-notes-save-status { font-size:10px;padding:0;text-align:left; }
+.dashboard-notes textarea { display:block;font-family:'Noto Serif SC',var(--font-display); }
+.dashboard-notes .note-options { display:flex;justify-content:space-between;border-top:1px solid #7b72551c;padding:9px 0; }
+.dashboard-notes .note-options button { font-size:11px;color:#56664e;min-height:28px; }
+.dashboard-notes .note-actions button { font-size:11px; }
+.dashboard-notes .page-controls button { font-size:11px; }
+.dashboard-notes .paper-colors button { background:#e9dfbf; border:1px solid #6f654c30; }
+.dashboard-notes .paper-colors [data-color=sage] { background:#d5dfcf; }
+.dashboard-notes .paper-colors [data-color=rose] { background:#e8cfc2; }
+.dashboard-notes .toast { pointer-events:auto; position:absolute;bottom:24px;max-width:calc(100% - 24px);white-space:normal; }
+.dashboard-notes .toast button { color:inherit;text-decoration:underline; }
+.dashboard-notes .sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
+.dashboard-notes .return-target > span { background:var(--bg-primary,#f5f3f0); }
+.dashboard-notes .is-empty .paper-preview { font-size:23px; }
+.dash-header:has(.dash-notes-anchor) { container-type:inline-size; }
+.dash-hero.dash-hero--notes { display:grid; grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);align-items:center;gap:16px; }
+.dash-notes-anchor { width:112px;height:112px;justify-self:center;align-self:start; }
+.dash-hero--notes .dash-hero__quote { justify-self:end;min-width:0;max-width:100%; }
+@container (max-width: 780px) {
+  .dash-hero.dash-hero--notes { grid-template-columns:minmax(0,1fr) 100px;gap:12px; }
+  .dash-notes-anchor { width:100px; }
+  .dash-hero--notes .dash-hero__quote { grid-column:1 / -1;justify-self:start;align-items:flex-start;text-align:left; }
+  .dash-hero--notes .dash-hero__meta { flex-wrap:wrap;white-space:normal;gap:5px; }
+  .dash-hero--notes .dash-hero__day { min-width:0; }
+}
+html[data-theme='dark'] .dashboard-notes .paper-front { filter:brightness(.89); }
+html[data-theme='dark'] .dashboard-notes .note-detail { filter:brightness(.92); }
+@media (prefers-reduced-motion: reduce) {
+  .dashboard-notes *, .dashboard-notes *:before, .dashboard-notes *:after { animation:none!important;transition:none!important;will-change:auto; }
+}
+html[data-motion='reduce'] .dashboard-notes *, html[data-motion='reduce'] .dashboard-notes *:before, html[data-motion='reduce'] .dashboard-notes *:after { animation:none!important;transition:none!important;will-change:auto; }
+.dashboard-notes .toast { bottom:auto; }
+.dash-hero--notes .dash-hero__day { justify-self:start; }
diff --git a/apps/web/src/features/dashboard/hanging-notes/model.ts b/apps/web/src/features/dashboard/hanging-notes/model.ts
new file mode 100644
index 0000000..737ed92
--- /dev/null
+++ b/apps/web/src/features/dashboard/hanging-notes/model.ts
@@ -0,0 +1 @@
+export { normalizeHangingNotes } from '../../../data/models/hangingNotes'
diff --git a/apps/web/src/features/dashboard/hanging-notes/template.ts b/apps/web/src/features/dashboard/hanging-notes/template.ts
new file mode 100644
index 0000000..d96ce3d
--- /dev/null
+++ b/apps/web/src/features/dashboard/hanging-notes/template.ts
@@ -0,0 +1,54 @@
+/** Static, trusted markup. User content is assigned only through textContent/value. */
+export const noteTemplate = `  <svg class="icon-library" aria-hidden="true"><defs>
+    <symbol id="fg-notes-i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
+    <symbol id="fg-notes-i-arrow" viewBox="0 0 24 24"><path d="m9 5 7 7-7 7"/></symbol>
+    <symbol id="fg-notes-i-close" viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18"/></symbol>
+    <symbol id="fg-notes-i-wind" viewBox="0 0 24 24"><path d="M3 8h12a3 3 0 1 0-3-3M2 12h17a3 3 0 1 1-3 3M4 17h5a2 2 0 1 1-2 2"/></symbol>
+    <symbol id="fg-notes-i-moon" viewBox="0 0 24 24"><path d="M20 14A8 8 0 0 1 10 4a8 8 0 1 0 10 10Z"/></symbol>
+    <symbol id="fg-notes-i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/></symbol>
+    <symbol id="fg-notes-i-pause" viewBox="0 0 24 24"><path d="M8 5v14M16 5v14"/></symbol>
+    <symbol id="fg-notes-i-play" viewBox="0 0 24 24"><path d="m9 5 10 7-10 7Z"/></symbol>
+    <symbol id="fg-notes-i-hand" viewBox="0 0 24 24"><path d="M8 12V5a2 2 0 0 1 4 0v6-8a2 2 0 0 1 4 0v8-5a2 2 0 0 1 4 0v9c0 5-3 7-7 7-2 0-4-1-5-3l-5-6a2 2 0 0 1 3-3l2 2Z"/></symbol>
+    <symbol id="fg-notes-i-note" viewBox="0 0 24 24"><path d="M5 3h14v13l-5 5H5ZM14 21v-5h5M8 8h8M8 12h6"/></symbol>
+    <symbol id="fg-notes-i-archive" viewBox="0 0 24 24"><path d="M4 8h16v12H4ZM3 4h18v4H3ZM9 12h6"/></symbol>
+    <symbol id="fg-notes-i-check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
+  </defs></svg>      <div class="hanging-space" id="fg-notes-hanging-space">
+        <svg class="rope-svg" id="fg-notes-rope-svg" aria-hidden="true">
+          <path class="rope-shadow" id="fg-notes-rope-shadow"/>
+          <path class="rope-base" id="fg-notes-rope-base"/>
+          <path class="rope-fiber" id="fg-notes-rope-fiber"/>
+          <path class="rope-base" id="fg-notes-rope-rest"/>
+          <path class="rope-base" id="fg-notes-rope-break-upper"/>
+          <path class="rope-base rope-loose" id="fg-notes-rope-loose"/>
+          <path class="rope-fiber rope-loose" id="fg-notes-rope-loose-fiber"/>
+          <g id="fg-notes-snap-fibers" class="snap-fibers"></g>
+        </svg>
+        <div class="pin" id="fg-notes-pin" aria-hidden="true"></div>
+        <div class="return-target" id="fg-notes-return-target" aria-hidden="true" hidden><span>拖回这里，可重新挂上</span></div>
+        <div class="ground-shadow" id="fg-notes-ground-shadow" aria-hidden="true"></div>
+        <button class="paper-stack" id="fg-notes-paper-stack" aria-label="打开便签，也可以按住拖动" aria-expanded="false" aria-controls="fg-notes-note-detail" aria-describedby="fg-notes-gesture-hint">
+          <span class="paper paper-back paper-back-two" id="fg-notes-back-two" aria-hidden="true"></span>
+          <span class="paper paper-back paper-back-one" id="fg-notes-back-one" aria-hidden="true"></span>
+          <span class="paper paper-front" id="fg-notes-paper-front">
+            <span class="paper-grain" aria-hidden="true"></span>
+            <span class="eyelet" aria-hidden="true"></span>
+            <span class="paper-overline">记得</span>
+            <span class="paper-preview" id="fg-notes-paper-preview">＋ 写一张</span>
+            <span class="paper-footer"><span id="fg-notes-stack-count"></span><span class="tiny-spark">✳︎</span></span>
+            <span class="paper-curl" aria-hidden="true"></span>
+          </span>
+          <span class="knot" aria-hidden="true"></span>
+          <span class="pushpin" id="fg-notes-paper-pin" aria-hidden="true"><span></span></span>
+        </button>
+        <section class="note-detail" id="fg-notes-note-detail" aria-label="便签内容" hidden>
+          <span class="paper-grain" aria-hidden="true"></span><span class="detail-hole" aria-hidden="true"></span>
+          <div class="detail-top"><span>留给自己</span><button class="icon-button" id="fg-notes-close-note" aria-label="收起便签" title="收起"><svg><use href="#fg-notes-i-close"/></svg></button></div>
+          <label class="sr-only" for="fg-notes-note-text">便签内容</label>
+          <textarea id="fg-notes-note-text" maxlength="500" aria-label="便签内容" placeholder="有什么想留给稍后的自己？" spellcheck="false"></textarea>
+          <div class="note-meta"><button type="button" id="fg-notes-save-status" role="status">已保存</button><span id="fg-notes-char-count">0 / 500</span></div>
+          <div class="detail-bottom"><div class="paper-colors" role="group" aria-label="纸张颜色"><button data-color="butter" class="color selected" aria-label="麦芽纸" aria-pressed="true"></button><button data-color="sage" class="color" aria-label="鼠尾草纸" aria-pressed="false"></button><button data-color="rose" class="color" aria-label="蔷薇纸" aria-pressed="false"></button></div><div class="note-actions"><button class="archive-button" id="fg-notes-return-note" hidden>挂回纸叠</button><button class="archive-button" id="fg-notes-archive-note"><svg><use href="#fg-notes-i-archive"/></svg>收走这张</button></div></div>
+          <div class="page-controls"><button class="icon-button" id="fg-notes-prev-note" aria-label="上一张"><svg class="flip"><use href="#fg-notes-i-arrow"/></svg></button><span id="fg-notes-page-count" aria-live="polite"></span><button class="icon-button" id="fg-notes-next-note" aria-label="下一张"><svg><use href="#fg-notes-i-arrow"/></svg></button><button class="add-note" id="fg-notes-add-note"><svg><use href="#fg-notes-i-plus"/></svg>再写一张</button></div>
+        <div class="note-options"><button id="fg-notes-placement-action">取下一张</button><button id="fg-notes-pause" aria-pressed="false">暂停摆动</button></div></section>
+        <p class="gesture-hint" id="fg-notes-gesture-hint"><span class="hint-line"></span><span id="fg-notes-gesture-copy">拉远并保持一下，就能取下来</span></p>
+      </div>
+<p id="fg-notes-placement-status" class="sr-only" role="status" aria-live="polite"></p><div class="toast" id="fg-notes-toast" role="status" hidden><span id="fg-notes-toast-text"></span><button id="fg-notes-undo" hidden>撤回</button></div>`