@tnotesjs/ui 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Shared Vue UI for TNotes built-in blocks — consumed by the TNotes SSG and Desk.",
   "type": "module",
   "exports": {
@@ -66,7 +66,8 @@
     "dist",
     "src",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "!src/**/*.test.ts"
   ],
   "sideEffects": [
     "**/*.css"

package/src/code/highlight.test.ts

@@ -1,72 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import {
-  highlightCode,
-  highlightCodeSync,
-  parseCodeMeta,
-  prepareCodeHighlighter
-} from './highlight'
-
-describe('shared code rendering', () => {
-  it('parses titles, line offsets, highlight ranges and per-block overrides', () => {
-    expect(parseCodeMeta('ts:line-numbers=12 {1,3-5} [demo.ts]')).toEqual({
-      language: 'ts',
-      title: 'demo.ts',
-      startLine: 12,
-      lineNumbers: true,
-      highlightedLines: [1, 3, 4, 5]
-    })
-    expect(parseCodeMeta('js {1-2} [setup.js]')).toEqual({
-      language: 'js',
-      title: 'setup.js',
-      startLine: 1,
-      lineNumbers: true,
-      highlightedLines: [1, 2]
-    })
-    expect(parseCodeMeta('txt {3}')).toEqual({
-      language: 'txt',
-      title: '',
-      startLine: 1,
-      lineNumbers: true,
-      highlightedLines: [3]
-    })
-    expect(parseCodeMeta('text:no-line-numbers').lineNumbers).toBe(false)
-    expect(parseCodeMeta('text {0,-1,8-3,1-9999999}').highlightedLines).toEqual([])
-  })
-  it('shares one lazy engine and matches build-time/browser output byte for byte', async () => {
-    const [a, b] = await Promise.all([
-      prepareCodeHighlighter(['js']),
-      prepareCodeHighlighter(['typescript'])
-    ])
-    expect(a).toBe(b)
-    const source = 'const answer = 42\nconsole.log(answer)\n'
-    const runtime = await highlightCode(source, 'js {2}')
-    expect(runtime).toBe(highlightCodeSync(source, 'js {2}'))
-    expect(runtime).toContain('--shiki-light:')
-    expect(runtime).toContain('--shiki-dark:')
-    expect(runtime).toContain('class="line highlighted"')
-    expect(runtime).toContain('data-line="2"')
-    expect(a.getLoadedLanguages()).not.toContain('cobol')
-  })
-  it('escapes unknown-language code instead of executing HTML', async () => {
-    const html = await highlightCode('<script>alert(1)</script> {{ injected }}', 'unknown-label')
-    expect(html).not.toContain('<script>')
-    const host = document.createElement('div')
-    host.innerHTML = html
-    expect(host.querySelector('script')).toBeNull()
-    expect(host.textContent).toBe('<script>alert(1)</script> {{ injected }}')
-    expect(html).toContain('{{ injected }}')
-  })
-  it('applies fence line highlights and offsets without Shiki notation', async () => {
-    const withNotation = await highlightCode(
-      'const x = 1 // [!code ++]\nconst y = 2 // [!code focus]',
-      'js:line-numbers=5 {2}'
-    )
-    // Magic comments stay as source text; Desk has no annotation write path.
-    expect(withNotation).toContain('[!code ++]')
-    expect(withNotation).not.toContain('diff add')
-    expect(withNotation).not.toContain('focused')
-    expect(withNotation).toContain('data-line="5"')
-    expect(withNotation).toContain('data-line="6"')
-    expect(withNotation).toContain('class="line highlighted"')
-  })
-})

package/src/components/Mermaid/Mermaid.test.ts

@@ -1,54 +0,0 @@
-// @vitest-environment happy-dom
-
-import { createApp, defineComponent, h, nextTick, type Component } from 'vue'
-import { afterEach, describe, expect, it } from 'vitest'
-
-import Mermaid from './Mermaid.vue'
-
-const cleanups: Array<() => void> = []
-
-function mount(component: Component, props: Record<string, unknown> = {}): HTMLElement {
-  const host = document.createElement('div')
-  document.body.append(host)
-  const app = createApp(defineComponent({ render: () => h(component, props) }))
-  app.mount(host)
-  cleanups.push(() => {
-    app.unmount()
-    host.remove()
-  })
-  return host
-}
-
-afterEach(() => {
-  cleanups
-    .splice(0)
-    .reverse()
-    .forEach((cleanup) => cleanup())
-  document.body.innerHTML = ''
-})
-
-describe('Mermaid preview host', () => {
-  it('keeps the diagram host laid out while loading (note 0020 diagrams)', async () => {
-    const sources = [
-      `flowchart LR\n  Desk --> UI`,
-      `sequenceDiagram\n  participant Desk\n  participant Site\n  Desk->>Site: hi`,
-      `graph TD\n  A[Start] --> B{ok}`
-    ]
-    for (const source of sources) {
-      const host = mount(Mermaid, { source })
-      await nextTick()
-      const diagram = host.querySelector('.tn-mermaid__diagram')
-      expect(diagram).not.toBeNull()
-      // Mermaid 11 needs layout during mermaid.render(); do not visibility:hidden the host.
-      expect(diagram!.classList.contains('is-obscured')).toBe(false)
-    }
-  })
-
-  it('only obscures the host for empty or error states', async () => {
-    const emptyHost = mount(Mermaid, { source: '' })
-    await nextTick()
-    expect(emptyHost.querySelector('.tn-mermaid__diagram')!.classList.contains('is-obscured')).toBe(
-      true
-    )
-  })
-})

package/src/components/Mermaid/adoptLiveSvg.test.ts

@@ -1,16 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { adoptLiveSvg } from './adoptLiveSvg'
-
-describe('adoptLiveSvg', () => {
-  it('renames the root svg id and scoped theme selectors', () => {
-    const svg = `<svg id="tn-mermaid-1" xmlns="http://www.w3.org/2000/svg"><style>#tn-mermaid-1{fill:#ccc;}#tn-mermaid-1 .node{stroke:#fff;}#tn-mermaid-1_flowchart-v2-pointEnd{fill:red;}</style><path id="tn-mermaid-1_flowchart-v2-pointEnd"/></svg>`
-    const out = adoptLiveSvg(svg, 'tn-mermaid-1')
-    expect(out).toContain('id="tn-mermaid-1-live"')
-    expect(out).toContain('#tn-mermaid-1-live{fill:#ccc;}')
-    expect(out).toContain('#tn-mermaid-1-live .node{stroke:#fff;}')
-    expect(out).toContain('id="tn-mermaid-1_flowchart-v2-pointEnd"')
-    expect(out).toContain('#tn-mermaid-1_flowchart-v2-pointEnd{fill:red;}')
-    expect(out).not.toMatch(/id="tn-mermaid-1"/)
-  })
-})

package/src/components/Mindmap/FocusBreadcrumbs.test.ts

@@ -1,275 +0,0 @@
-// @vitest-environment happy-dom
-import { createApp, defineComponent, h, nextTick, ref } from 'vue'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import type { MindmapNode } from '@tnotesjs/mindmap-core'
-import { MindmapSession, resetNodeIdCounter } from '@tnotesjs/mindmap-core'
-import FocusBreadcrumbs from './FocusBreadcrumbs.vue'
-
-interface DeepFixture {
-  session: MindmapSession
-  current: MindmapNode[]
-  other: MindmapNode[]
-}
-
-let disposeMounted: (() => void) | null = null
-let originalScrollIntoView: typeof HTMLElement.prototype.scrollIntoView | undefined
-
-function deepMarkdown(depth: number): string {
-  const lines = ['# 根主题', '']
-  const appendLevel = (level: number) => {
-    const indent = '  '.repeat(level - 1)
-    lines.push(`${indent}- 当前-${level}`)
-    if (level < depth) appendLevel(level + 1)
-    lines.push(`${indent}- 其它-${level}`)
-  }
-  appendLevel(1)
-  return `${lines.join('\n')}\n`
-}
-
-function makeDeepFixture(depth: number): DeepFixture {
-  const session = new MindmapSession({ markdown: deepMarkdown(depth) })
-  const current: MindmapNode[] = []
-  const other: MindmapNode[] = []
-  let parent = session.document.root
-  for (let level = 0; level < depth; level++) {
-    current.push(parent.children[0])
-    other.push(parent.children[1])
-    parent = parent.children[0]
-  }
-  session.focusNode(current[current.length - 1].id)
-  return { session, current, other }
-}
-
-function mountBreadcrumbs(session: MindmapSession) {
-  const version = ref(0)
-  const bump = () => version.value++
-  session.on('focusChange', bump)
-  session.on('selectionChange', bump)
-  session.on('change', bump)
-  const Host = defineComponent({
-    setup() {
-      return () => h(FocusBreadcrumbs, { session, version: version.value })
-    }
-  })
-  const host = document.createElement('div')
-  document.body.append(host)
-  const app = createApp(Host)
-  app.mount(host)
-  disposeMounted = () => {
-    app.unmount()
-    session.off('focusChange', bump)
-    session.off('selectionChange', bump)
-    session.off('change', bump)
-    host.remove()
-  }
-  return host
-}
-
-async function settle() {
-  await nextTick()
-  await nextTick()
-}
-
-async function hoverOpen(button: HTMLButtonElement) {
-  button.dispatchEvent(new MouseEvent('mouseenter'))
-  await vi.advanceTimersByTimeAsync(181)
-  await settle()
-  return document.body.querySelector<HTMLElement>('.focus-sibling-menu')
-}
-
-beforeEach(() => {
-  resetNodeIdCounter()
-  vi.useFakeTimers()
-  originalScrollIntoView = HTMLElement.prototype.scrollIntoView
-  HTMLElement.prototype.scrollIntoView = vi.fn()
-})
-
-afterEach(() => {
-  disposeMounted?.()
-  disposeMounted = null
-  document.body.innerHTML = ''
-  if (originalScrollIntoView) HTMLElement.prototype.scrollIntoView = originalScrollIntoView
-  else delete (HTMLElement.prototype as Partial<HTMLElement>).scrollIntoView
-  vi.useRealTimers()
-})
-
-describe('FocusBreadcrumbs', () => {
-  it('完整渲染 12 层路径并自动把当前项滚入可视区域', async () => {
-    const { session, current } = makeDeepFixture(12)
-    const host = mountBreadcrumbs(session)
-    await settle()
-
-    const nav = host.querySelector('[aria-label="主题导航"]')
-    expect(nav).not.toBeNull()
-    const crumbs = [...host.querySelectorAll<HTMLButtonElement>('.focus-crumb')]
-    expect(crumbs).toHaveLength(13)
-    expect(crumbs.map((item) => item.textContent?.trim())).toEqual([
-      '全部',
-      ...current.map((node) => node.content.text)
-    ])
-    expect(crumbs.map((item) => item.dataset.nodeId)).toEqual([
-      session.document.root.id,
-      ...current.map((node) => node.id)
-    ])
-    expect(crumbs[crumbs.length - 1]?.getAttribute('aria-current')).toBe('page')
-    expect(crumbs.slice(0, -1).every((item) => !item.hasAttribute('aria-current'))).toBe(true)
-    expect(HTMLElement.prototype.scrollIntoView).toHaveBeenCalledWith({
-      block: 'nearest',
-      inline: 'nearest'
-    })
-  })
-
-  it('每一层 hover 都展示该节点的同层主题，并正确标记当前项', async () => {
-    const { session, current } = makeDeepFixture(4)
-    const host = mountBreadcrumbs(session)
-    await settle()
-    const crumbs = [...host.querySelectorAll<HTMLButtonElement>('.focus-crumb')].slice(1)
-
-    for (let depth = 0; depth < current.length; depth++) {
-      const menu = await hoverOpen(crumbs[depth])
-      expect(menu).not.toBeNull()
-      const expected = current[depth].parent!.children
-      const items = [...menu!.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]')]
-      expect(items.map((item) => item.dataset.nodeId)).toEqual(expected.map((node) => node.id))
-      expect(items.map((item) => item.textContent?.replace('✓', '').trim())).toEqual(
-        expected.map((node) => node.content.text)
-      )
-      expect(
-        items.find((item) => item.getAttribute('aria-checked') === 'true')?.dataset.nodeId
-      ).toBe(current[depth].id)
-      document.body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-      await settle()
-      expect(document.body.querySelector('.focus-sibling-menu')).toBeNull()
-    }
-  })
-
-  it('重名同层主题按节点 id 快速切换，并收敛聚焦路径和选择', async () => {
-    const { session, current, other } = makeDeepFixture(3)
-    session.updateNodeRaw(other[1].id, current[1].content.raw)
-    const host = mountBreadcrumbs(session)
-    await settle()
-    const secondLevel = [...host.querySelectorAll<HTMLButtonElement>('.focus-crumb')][2]
-    const menu = await hoverOpen(secondLevel)
-    const duplicateItems = [
-      ...menu!.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]')
-    ].filter((item) => item.textContent?.replace('✓', '').trim() === current[1].content.text)
-
-    expect(duplicateItems).toHaveLength(2)
-    menu!.querySelector<HTMLButtonElement>(`[data-node-id="${other[1].id}"]`)!.click()
-    await settle()
-
-    expect(session.focusRootNode.id).toBe(other[1].id)
-    expect(session.focusPath.map((node) => node.id)).toEqual([current[0].id, other[1].id])
-    expect([...session.selectionIds]).toEqual([other[1].id])
-    expect(document.body.querySelector('.focus-sibling-menu')).toBeNull()
-    const updated = [...host.querySelectorAll<HTMLButtonElement>('.focus-crumb')]
-    expect(updated.map((item) => item.dataset.nodeId)).toEqual([
-      session.document.root.id,
-      current[0].id,
-      other[1].id
-    ])
-  })
-
-  it('点击祖先会选中该主题，点击全部会退出聚焦并清空选择', async () => {
-    const { session, current } = makeDeepFixture(3)
-    session.select(current[2].id)
-    const host = mountBreadcrumbs(session)
-    await settle()
-
-    const firstLevel = [...host.querySelectorAll<HTMLButtonElement>('.focus-crumb')][1]
-    firstLevel.click()
-    await settle()
-    expect(session.focusPath.map((node) => node.id)).toEqual([current[0].id])
-    expect(session.focusRootNode.id).toBe(current[0].id)
-    expect([...session.selectionIds]).toEqual([current[0].id])
-
-    host.querySelector<HTMLButtonElement>('.focus-crumb-root')!.click()
-    await settle()
-    expect(session.focusPath).toEqual([])
-    expect(session.focusRootNode).toBe(session.document.root)
-    expect(session.selectionIds.size).toBe(0)
-    expect(host.querySelector('[aria-label="主题导航"]')).toBeNull()
-  })
-
-  it('允许鼠标从主题跨入菜单，真正离开或点击外部后才关闭', async () => {
-    const { session } = makeDeepFixture(2)
-    const host = mountBreadcrumbs(session)
-    await settle()
-    const trigger = [...host.querySelectorAll<HTMLButtonElement>('.focus-crumb')][1]
-
-    trigger.dispatchEvent(new MouseEvent('mouseenter'))
-    await vi.advanceTimersByTimeAsync(179)
-    expect(document.body.querySelector('.focus-sibling-menu')).toBeNull()
-    await vi.advanceTimersByTimeAsync(2)
-    await settle()
-    const menu = document.body.querySelector<HTMLElement>('.focus-sibling-menu')!
-    expect(menu).not.toBeNull()
-    expect(trigger.getAttribute('aria-expanded')).toBe('true')
-
-    trigger.dispatchEvent(new MouseEvent('mouseleave'))
-    menu.dispatchEvent(new MouseEvent('mouseenter'))
-    await vi.advanceTimersByTimeAsync(300)
-    expect(document.body.querySelector('.focus-sibling-menu')).toBe(menu)
-
-    menu.dispatchEvent(new MouseEvent('mouseleave'))
-    await vi.advanceTimersByTimeAsync(181)
-    await settle()
-    expect(document.body.querySelector('.focus-sibling-menu')).toBeNull()
-    expect(trigger.getAttribute('aria-expanded')).toBe('false')
-
-    await hoverOpen(trigger)
-    document.body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    await settle()
-    expect(document.body.querySelector('.focus-sibling-menu')).toBeNull()
-  })
-
-  it('支持键盘打开和遍历菜单，Escape 关闭后把焦点还给主题', async () => {
-    const { session } = makeDeepFixture(2)
-    const host = mountBreadcrumbs(session)
-    await settle()
-    const trigger = [...host.querySelectorAll<HTMLButtonElement>('.focus-crumb')][1]
-    trigger.focus()
-    trigger.dispatchEvent(
-      new KeyboardEvent('keydown', {
-        key: 'ArrowDown',
-        bubbles: true,
-        cancelable: true
-      })
-    )
-    await settle()
-
-    const menu = document.body.querySelector<HTMLElement>('[role="menu"]')!
-    const items = [...menu.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]')]
-    expect(trigger.getAttribute('aria-haspopup')).toBe('menu')
-    expect(trigger.getAttribute('aria-expanded')).toBe('true')
-    expect(document.activeElement).toBe(items[0])
-
-    items[0].dispatchEvent(
-      new KeyboardEvent('keydown', {
-        key: 'End',
-        bubbles: true,
-        cancelable: true
-      })
-    )
-    expect(document.activeElement).toBe(items[items.length - 1])
-    items[items.length - 1]!.dispatchEvent(
-      new KeyboardEvent('keydown', {
-        key: 'ArrowDown',
-        bubbles: true,
-        cancelable: true
-      })
-    )
-    expect(document.activeElement).toBe(items[0])
-
-    items[0].dispatchEvent(
-      new KeyboardEvent('keydown', {
-        key: 'Escape',
-        bubbles: true,
-        cancelable: true
-      })
-    )
-    await settle()
-    expect(document.body.querySelector('.focus-sibling-menu')).toBeNull()
-    expect(document.activeElement).toBe(trigger)
-  })
-})

package/src/components/sharedMedia.test.ts

@@ -1,121 +0,0 @@
-// @vitest-environment happy-dom
-
-import { createApp, defineComponent, h, nextTick, type Component } from 'vue'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-
-import CodeBlock from './CodeBlock/CodeBlock.vue'
-import CodeGroup from './CodeGroup/CodeGroup.vue'
-import ImagePreview from './ImagePreview/ImagePreview.vue'
-
-const cleanups: Array<() => void> = []
-
-function mount(component: Component, props: Record<string, unknown> = {}): HTMLElement {
-  const host = document.createElement('div')
-  document.body.append(host)
-  const app = createApp(defineComponent({ render: () => h(component, props) }))
-  app.mount(host)
-  cleanups.push(() => {
-    app.unmount()
-    host.remove()
-  })
-  return host
-}
-
-afterEach(() => {
-  cleanups
-    .splice(0)
-    .reverse()
-    .forEach((cleanup) => cleanup())
-  document.body.innerHTML = ''
-  document.documentElement.style.overflow = ''
-  vi.restoreAllMocks()
-})
-
-describe('shared code and media components', () => {
-  it('copies raw code and closes its fullscreen dialog with Escape', async () => {
-    const writeText = vi.fn().mockResolvedValue(undefined)
-    Object.defineProperty(navigator, 'clipboard', {
-      configurable: true,
-      value: { writeText }
-    })
-    const host = mount(CodeBlock, {
-      code: 'const value = 1\n',
-      info: 'ts [demo.ts]',
-      highlightedHtml: '<pre class="tn-code-highlight"><code>ok</code></pre>'
-    })
-
-    const buttons = host.querySelectorAll<HTMLButtonElement>('button')
-    buttons[0].click()
-    await nextTick()
-    expect(writeText).toHaveBeenCalledWith('const value = 1')
-
-    buttons[1].click()
-    await nextTick()
-    expect(document.body.querySelector('[role="dialog"]')).not.toBeNull()
-    document.body
-      .querySelector<HTMLElement>('[role="dialog"]')!
-      .dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
-    await nextTick()
-    expect(document.body.querySelector('[role="dialog"]')).toBeNull()
-  })
-
-  it('switches code-group tabs with click and arrow keys', async () => {
-    const host = mount(CodeGroup, {
-      items: [
-        { code: 'one', info: 'text [one.txt]' },
-        { code: 'two', info: 'text [two.txt]' }
-      ]
-    })
-    const tabs = host.querySelectorAll<HTMLButtonElement>('[role="tab"]')
-    tabs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
-    await nextTick()
-    await nextTick()
-    expect(tabs[1].getAttribute('aria-selected')).toBe('true')
-    expect(host.querySelectorAll<HTMLElement>('[role="tabpanel"]')[1].hidden).toBe(false)
-  })
-
-  it('previews prose images, navigates, and restores document overflow', async () => {
-    const prose = document.createElement('div')
-    prose.className = 'tn-prose'
-    prose.innerHTML = '<img src="/one.png"><img src="/two.png">'
-    document.body.append(prose)
-    cleanups.push(() => prose.remove())
-    mount(ImagePreview)
-
-    prose.querySelector<HTMLImageElement>('img')!.click()
-    await nextTick()
-    expect(document.documentElement.style.overflow).toBe('hidden')
-    expect(document.body.querySelector<HTMLImageElement>('.tn-image-preview > img')?.src).toContain(
-      '/one.png'
-    )
-    document.body.querySelector<HTMLButtonElement>('[aria-label="下一张"]')!.click()
-    await nextTick()
-    expect(document.body.querySelector<HTMLImageElement>('.tn-image-preview > img')?.src).toContain(
-      '/two.png'
-    )
-    document.body.querySelector<HTMLButtonElement>('[aria-label="关闭"]')!.click()
-    await nextTick()
-    expect(document.documentElement.style.overflow).toBe('')
-  })
-
-  it('opens from a programmatic preview request', async () => {
-    const prose = document.createElement('div')
-    prose.className = 'tn-prose tn-preview-ignore'
-    prose.innerHTML = '<img src="/requested.png">'
-    document.body.append(prose)
-    cleanups.push(() => prose.remove())
-    mount(ImagePreview)
-
-    document.dispatchEvent(
-      new CustomEvent('tn:preview-image', {
-        detail: prose.querySelector('img')
-      })
-    )
-    await nextTick()
-    expect(document.body.querySelector<HTMLImageElement>('.tn-image-preview > img')?.src).toContain(
-      '/requested.png'
-    )
-    document.body.querySelector<HTMLButtonElement>('[aria-label="关闭"]')!.click()
-    await nextTick()
-  })
-})

package/src/excalidraw/editorSession.test.ts

@@ -1,205 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { createExcalidrawSession, persistedSceneSignature } from './editorSession'
-
-const scene = (overrides: Record<string, unknown> = {}) =>
-  JSON.stringify({
-    type: 'excalidraw',
-    elements: [{ id: 'rect-1' }],
-    appState: { viewBackgroundColor: '#ffffff' },
-    files: {},
-    ...overrides
-  })
-
-/** 只改展示状态：appState 必须与基础场景合并，否则是「删掉了背景色」这种真变化 */
-const viewChanged = (appState: Record<string, unknown>) =>
-  scene({ appState: { viewBackgroundColor: '#ffffff', ...appState } })
-
-function setup(options: { save?: ReturnType<typeof vi.fn>; initial?: string } = {}) {
-  const save =
-    options.save ??
-    vi.fn(async ({ content }: { content: string }) => ({
-      ok: true as const,
-      revision: `rev-${content.length}-${Math.random().toString(16).slice(2, 6)}`
-    }))
-  const session = createExcalidrawSession({
-    initialContent: options.initial ?? scene(),
-    initialRevision: 'rev-0',
-    save: save as never,
-    debounceMs: 200,
-    maxWaitMs: 1000
-  })
-  return { session, save }
-}
-
-beforeEach(() => {
-  vi.useFakeTimers()
-})
-
-afterEach(() => {
-  vi.useRealTimers()
-})
-
-describe('画布编辑会话', () => {
-  it('展示状态变化（平移/缩放/选中）不触发写盘', async () => {
-    const { session, save } = setup()
-    session.update(viewChanged({ scrollX: 120, zoom: { value: 2 } }))
-    await vi.advanceTimersByTimeAsync(1500)
-
-    expect(save).not.toHaveBeenCalled()
-    expect(session.state.value).toBe('idle')
-  })
-
-  it('内容变化防抖 200ms 后写入一次', async () => {
-    const { session, save } = setup()
-    session.update(scene({ elements: [{ id: 'rect-1' }, { id: 'rect-2' }] }))
-    expect(session.state.value).toBe('pending')
-
-    await vi.advanceTimersByTimeAsync(199)
-    expect(save).not.toHaveBeenCalled()
-    await vi.advanceTimersByTimeAsync(1)
-
-    expect(save).toHaveBeenCalledTimes(1)
-    expect(session.state.value).toBe('idle')
-  })
-
-  it('连续变化时最大等待 1s 强制落盘，不会被防抖无限推迟', async () => {
-    const { session, save } = setup()
-    for (let index = 0; index < 12; index += 1) {
-      session.update(
-        scene({ elements: Array.from({ length: index + 2 }, (_, i) => ({ id: `r${i}` })) })
-      )
-      await vi.advanceTimersByTimeAsync(100)
-    }
-
-    expect(save).toHaveBeenCalled()
-  })
-
-  it('写入串行：进行中的写入不会被并发覆盖，且旧完成回调不清掉新状态', async () => {
-    const pending: Array<(value: { ok: true; revision: string }) => void> = []
-    const save = vi.fn(
-      () =>
-        new Promise<{ ok: true; revision: string }>((resolve) => {
-          pending.push(resolve)
-        })
-    )
-    const { session } = setup({ save: save as never })
-
-    session.update(scene({ elements: [{ id: 'first' }] }))
-    await vi.advanceTimersByTimeAsync(200)
-    expect(save).toHaveBeenCalledTimes(1)
-
-    session.update(scene({ elements: [{ id: 'second' }] }))
-    await vi.advanceTimersByTimeAsync(200)
-    expect(save).toHaveBeenCalledTimes(1) // 仍在写入中，不并发
-
-    pending[0]?.({ ok: true, revision: 'rev-1' })
-    await vi.advanceTimersByTimeAsync(0)
-    expect(save).toHaveBeenCalledTimes(2) // 写完后补写最新内容
-
-    pending[1]?.({ ok: true, revision: 'rev-2' })
-    await vi.advanceTimersByTimeAsync(0)
-    expect(session.state.value).toBe('idle')
-    expect(session.revision.value).toBe('rev-2')
-  })
-
-  it('写入失败保留最新内容并进入 failed，重试成功后回到 idle', async () => {
-    const save = vi
-      .fn()
-      .mockResolvedValueOnce({ ok: false, code: 'error', message: '磁盘满' })
-      .mockResolvedValueOnce({ ok: true, revision: 'rev-ok' })
-    const { session } = setup({ save: save as never })
-
-    const latest = scene({ elements: [{ id: 'latest' }] })
-    session.update(latest)
-    await vi.advanceTimersByTimeAsync(200)
-
-    expect(session.state.value).toBe('failed')
-    expect(session.lastError.value).toBe('磁盘满')
-    expect(session.currentContent()).toBe(latest) // 内容没丢
-
-    await session.retry()
-    expect(session.state.value).toBe('idle')
-    expect(session.revision.value).toBe('rev-ok')
-  })
-
-  it('冲突单独标记，内容保留供用户选择', async () => {
-    const save = vi.fn(async () => ({
-      ok: false as const,
-      code: 'conflict' as const,
-      message: '已被外部修改'
-    }))
-    const { session } = setup({ save: save as never })
-    session.update(scene({ elements: [{ id: 'mine' }] }))
-    await vi.advanceTimersByTimeAsync(200)
-
-    expect(session.state.value).toBe('conflict')
-    // 冲突时保留我的内容等待用户决定，不能被清掉
-    expect(session.hasPending()).toBe(true)
-    expect(session.currentContent()).toContain('mine')
-  })
-
-  it('flush 立即写盘（切换承载位置/关闭入口）', async () => {
-    const { session, save } = setup()
-    session.update(scene({ elements: [{ id: 'pending' }] }))
-    expect(save).not.toHaveBeenCalled()
-
-    await session.flush()
-    expect(save).toHaveBeenCalledTimes(1)
-  })
-
-  it('dispose 之后不再写盘', async () => {
-    const { session, save } = setup()
-    session.update(scene({ elements: [{ id: 'x' }] }))
-    session.dispose()
-    await vi.advanceTimersByTimeAsync(2000)
-    expect(save).not.toHaveBeenCalled()
-  })
-
-  it('adopt 把首帧规范化结果当基线：不写盘，且之后相同内容不触发写入', async () => {
-    const { session, save } = setup()
-    // 模拟 Excalidraw 载入后补齐字段：元素与 appState 都被规范化
-    const normalized = scene({
-      elements: [{ id: 'rect-1', groupIds: [], frameId: null, roundness: null }],
-      appState: { viewBackgroundColor: '#ffffff', gridSize: 20, gridStep: 5 }
-    })
-    session.update(normalized)
-    expect(session.state.value).toBe('pending')
-
-    session.adopt(normalized, 'rev-normalized')
-
-    expect(session.state.value).toBe('idle')
-    expect(session.hasPending()).toBe(false)
-    expect(session.revision.value).toBe('rev-normalized')
-    await vi.advanceTimersByTimeAsync(2000)
-    expect(save).not.toHaveBeenCalled()
-
-    // 同一份规范化内容再来一次（编辑器抖动）也不写
-    session.update(normalized)
-    await vi.advanceTimersByTimeAsync(2000)
-    expect(save).not.toHaveBeenCalled()
-
-    // 真正的内容变化照常写盘
-    session.update(scene({ elements: [{ id: 'rect-1' }, { id: 'rect-2' }] }))
-    await vi.advanceTimersByTimeAsync(200)
-    expect(save).toHaveBeenCalledTimes(1)
-  })
-
-  it('adopt 之后 revision 不变时，写入仍会用最新 revision', async () => {
-    const { session, save } = setup()
-    session.adopt(scene({ elements: [{ id: 'normalized' }] }))
-    expect(session.revision.value).toBe('rev-0')
-    session.update(scene({ elements: [{ id: 'drawn' }] }))
-    await vi.advanceTimersByTimeAsync(200)
-    expect(save).toHaveBeenCalledWith(expect.objectContaining({ expectedRevision: 'rev-0' }))
-  })
-
-  it('持久化指纹忽略展示状态但包含元素与内嵌文件', () => {
-    const a = persistedSceneSignature(scene())
-    expect(persistedSceneSignature(viewChanged({ scrollX: 10, zoom: { value: 1.5 } }))).toBe(a)
-    expect(persistedSceneSignature(scene({ elements: [{ id: 'changed' }] }))).not.toBe(a)
-    expect(
-      persistedSceneSignature(scene({ files: { f1: { id: 'f1', dataURL: 'data:image/png' } } }))
-    ).not.toBe(a)
-  })
-})

package/src/excalidraw/focus.test.ts

@@ -1,60 +0,0 @@
-// @vitest-environment happy-dom
-
-import { afterEach, describe, expect, it, vi } from 'vitest'
-
-import { restoreCanvasKeyboardFocus, restoreCanvasKeyboardFocusWhenReady } from './focus'
-
-function fixture(height: number): { host: HTMLDivElement; canvas: HTMLCanvasElement } {
-  const host = document.createElement('div')
-  const canvas = document.createElement('canvas')
-  canvas.className = 'excalidraw__canvas interactive'
-  canvas.getBoundingClientRect = () => ({ height, width: 400 }) as DOMRect
-  host.append(canvas)
-  document.body.append(host)
-  return { host, canvas }
-}
-
-afterEach(() => {
-  document.body.replaceChildren()
-  vi.restoreAllMocks()
-})
-
-describe('画布键盘焦点', () => {
-  it('补 tabindex 并把焦点交给交互画布', () => {
-    const { host, canvas } = fixture(600)
-
-    expect(restoreCanvasKeyboardFocus(host)).toBe(true)
-    expect(canvas.getAttribute('tabindex')).toBe('0')
-    expect(document.activeElement).toBe(canvas)
-  })
-
-  it('没有交互画布时不抢焦点并返回 false', () => {
-    const host = document.createElement('div')
-    const button = document.createElement('button')
-    host.append(button)
-    document.body.append(host)
-    button.focus()
-
-    expect(restoreCanvasKeyboardFocus(host)).toBe(false)
-    // blur 掉当前焦点后没有可聚焦目标：焦点回到 body，不会落到别的控件上
-    expect(document.activeElement).toBe(document.body)
-  })
-
-  it('画布还在 display:none 里（高度 0）时不聚焦，等布局就绪后再聚焦', () => {
-    const { host, canvas } = fixture(0)
-    const frames: Array<() => void> = []
-    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
-      frames.push(() => callback(0))
-      return frames.length
-    })
-
-    restoreCanvasKeyboardFocusWhenReady(host)
-    // 关键回归点：还没布局就 focus() 会静默失败、焦点留在 body，快捷键收不到
-    expect(document.activeElement).not.toBe(canvas)
-    expect(frames.length).toBeGreaterThan(0)
-
-    canvas.getBoundingClientRect = () => ({ height: 600, width: 400 }) as DOMRect
-    frames.forEach((run) => run())
-    expect(document.activeElement).toBe(canvas)
-  })
-})

package/src/excalidraw/fonts.test.ts

@@ -1,66 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-import {
-  getExcalidrawAssetPath,
-  inlineExcalidrawFonts,
-  resolveFontUrl,
-  setExcalidrawAssetPath
-} from './fonts'
-
-const SVG = `<svg><style>@font-face{src:url(https://esm.sh/@excalidraw/excalidraw@0.18.1/dist/prod/fonts/Virgil/Virgil-Regular.woff2)}</style></svg>`
-
-function fetchReturning(bytes: number[], ok = true) {
-  return vi.fn(async () => ({
-    ok,
-    status: ok ? 200 : 404,
-    arrayBuffer: async () => new Uint8Array(bytes).buffer
-  })) as unknown as typeof fetch
-}
-
-describe('画布字体自包含', () => {
-  it('把字体基址换成配置的本地目录', () => {
-    expect(
-      resolveFontUrl(
-        'https://esm.sh/@excalidraw/excalidraw@0.18.1/dist/prod/fonts/Virgil/Virgil-Regular.woff2',
-        '/excalidraw/'
-      )
-    ).toBe('/excalidraw/fonts/Virgil/Virgil-Regular.woff2')
-    expect(resolveFontUrl('/fonts/Virgil/x.woff2')).toBe('/fonts/Virgil/x.woff2')
-  })
-
-  it('把 SVG 里的字体内联成 data URL，不再有外链', async () => {
-    const result = await inlineExcalidrawFonts(SVG, {
-      base: '/excalidraw/',
-      fetchImpl: fetchReturning([1, 2, 3, 4])
-    })
-
-    expect(result.inlined).toBe(1)
-    expect(result.remaining).toEqual([])
-    expect(result.svg).toContain('data:font/woff2;base64,')
-    expect(result.svg).not.toContain('esm.sh')
-  })
-
-  it('取不到字体时如实报告 remaining，不静默失败', async () => {
-    const result = await inlineExcalidrawFonts(SVG, {
-      base: '/excalidraw/',
-      fetchImpl: fetchReturning([], false)
-    })
-
-    expect(result.inlined).toBe(0)
-    expect(result.remaining).toEqual(['/excalidraw/fonts/Virgil/Virgil-Regular.woff2'])
-    expect(result.svg).toBe(SVG)
-  })
-
-  it('没有字体引用时不做任何事', async () => {
-    const result = await inlineExcalidrawFonts('<svg></svg>', {
-      fetchImpl: fetchReturning([1])
-    })
-    expect(result.inlined).toBe(0)
-    expect(result.remaining).toEqual([])
-  })
-
-  it('资产基址可设置与读取（离线必需）', () => {
-    setExcalidrawAssetPath('/excalidraw/')
-    expect(getExcalidrawAssetPath()).toBe('/excalidraw/')
-  })
-})

package/src/excalidraw/renderer.test.ts

@@ -1,148 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { createExcalidrawSvgRenderer } from './renderer'
-import { SvgCache } from './scene'
-
-const scene = (extra: Record<string, unknown> = {}) =>
-  JSON.stringify({
-    type: 'excalidraw',
-    elements: [{ id: 'rect-1' }],
-    appState: {},
-    files: {},
-    ...extra
-  })
-
-function setup(options: {
-  content: string
-  theme?: 'light' | 'dark'
-  render?: () => Promise<string>
-}) {
-  const renderCalls: Array<{ dark: boolean }> = []
-  const cache = new SvgCache(4)
-  const renderer = createExcalidrawSvgRenderer({
-    getContent: () => options.content,
-    getTheme: () => options.theme ?? 'light',
-    cache,
-    loadExporter: async () => ({
-      renderExcalidrawSvg: async (_scene, exportOptions) => {
-        renderCalls.push(exportOptions)
-        if (options.render) return await options.render()
-        return `<svg data-dark="${exportOptions.dark}">ok</svg>`
-      }
-    })
-  })
-  return { renderer, renderCalls, cache }
-}
-
-beforeEach(() => {
-  vi.restoreAllMocks()
-})
-
-describe('只读画布渲染器', () => {
-  it('渲染成功的 SVG 变成 data URL，不触碰文件系统', async () => {
-    const { renderer, renderCalls } = setup({ content: scene() })
-    await renderer.render()
-
-    expect(renderer.state.value).toBe('ready')
-    expect(renderer.dataUrl.value).toMatch(/^data:image\/svg\+xml;charset=utf-8,/)
-    expect(decodeURIComponent(renderer.dataUrl.value)).toContain('<svg')
-    expect(renderCalls).toHaveLength(1)
-  })
-
-  it('相同内容与主题命中缓存，不重复导出', async () => {
-    const cache = new SvgCache(4)
-    const calls: number[] = []
-    const make = () =>
-      createExcalidrawSvgRenderer({
-        getContent: () => scene(),
-        getTheme: () => 'light',
-        cache,
-        loadExporter: async () => ({
-          renderExcalidrawSvg: async () => {
-            calls.push(1)
-            return '<svg>once</svg>'
-          }
-        })
-      })
-    await make().render()
-    await make().render()
-    expect(calls).toHaveLength(1)
-  })
-
-  it('深色主题单独缓存，导出选项跟随主题', async () => {
-    const { renderer, renderCalls, cache } = setup({ content: scene(), theme: 'dark' })
-    await renderer.render()
-    expect(renderCalls[0]).toEqual({ dark: true })
-    expect(cache.size).toBe(1)
-    expect(decodeURIComponent(renderer.dataUrl.value)).toContain('data-dark="true"')
-  })
-
-  it('非法 JSON 与空场景进入错误态，且不调用导出器', async () => {
-    const broken = setup({ content: '{ nope' })
-    await broken.renderer.render()
-    expect(broken.renderer.state.value).toBe('error')
-    expect(broken.renderer.errorReason.value).toContain('合法 JSON')
-    expect(broken.renderCalls).toHaveLength(0)
-
-    const empty = setup({ content: JSON.stringify({ type: 'excalidraw', elements: [] }) })
-    await empty.renderer.render()
-    expect(empty.renderer.state.value).toBe('error')
-    expect(empty.renderer.errorReason.value).toBe('空画布')
-  })
-
-  it('导出抛错时进入错误态而不是崩掉', async () => {
-    const { renderer } = setup({
-      content: scene(),
-      render: async () => {
-        throw new Error('导出失败')
-      }
-    })
-    await renderer.render()
-    expect(renderer.state.value).toBe('error')
-    expect(renderer.errorReason.value).toBe('导出失败')
-    expect(renderer.dataUrl.value).toBe('')
-  })
-
-  it('在途结果过期时被丢弃（内容已变化）', async () => {
-    let release: ((svg: string) => void) | undefined
-    const calls: string[] = []
-    let content = scene()
-    const renderer = createExcalidrawSvgRenderer({
-      getContent: () => content,
-      getTheme: () => 'light',
-      cache: new SvgCache(4),
-      loadExporter: async () => ({
-        renderExcalidrawSvg: async () => {
-          calls.push(content)
-          if (calls.length === 1) {
-            return await new Promise<string>((resolve) => {
-              release = resolve
-            })
-          }
-          return '<svg>new</svg>'
-        }
-      })
-    })
-
-    const first = renderer.render()
-    content = scene({ elements: [{ id: 'newer' }] })
-    const second = renderer.render()
-    // 等两次 render 都进入 exporter（动态 import 需要一个微任务）
-    for (let tick = 0; tick < 5 && !release; tick += 1) await Promise.resolve()
-    release?.('<svg>stale</svg>')
-    await Promise.all([first, second])
-
-    expect(decodeURIComponent(renderer.dataUrl.value)).toContain('new')
-    expect(decodeURIComponent(renderer.dataUrl.value)).not.toContain('stale')
-  })
-
-  it('释放后清空 data URL，之后再渲染不再产生输出', async () => {
-    const { renderer } = setup({ content: scene() })
-    await renderer.render()
-    renderer.dispose()
-    expect(renderer.dataUrl.value).toBe('')
-    await renderer.render()
-    expect(renderer.state.value).toBe('idle')
-    expect(renderer.dataUrl.value).toBe('')
-  })
-})

package/src/markdown/image.test.ts

@@ -1,86 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  formatImageAttrs,
-  formatImageWidthAttr,
-  normalizeImageAlign,
-  normalizeImageWidth,
-  parseImageAttrs,
-  parseImageWidthAttr,
-  pasteDisplayWidthPx,
-  serializeImageMarkdown
-} from './image'
-
-describe('image markdown helpers', () => {
-  it('accepts w and width, with or without a percent sign', () => {
-    expect(parseImageWidthAttr(' {w=50%} ')).toEqual({ width: '50%', rest: '' })
-    expect(parseImageWidthAttr('{width=33}')).toEqual({ width: '33%', rest: '' })
-    expect(parseImageWidthAttr('not-an-attr')).toEqual({
-      width: '',
-      rest: 'not-an-attr'
-    })
-  })
-
-  it('folds pasted bitmap width by device pixel ratio', () => {
-    expect(pasteDisplayWidthPx(800, 2)).toBe('400px')
-    expect(pasteDisplayWidthPx(400, 1)).toBe('400px')
-    expect(pasteDisplayWidthPx(20, 2)).toBe('')
-    expect(pasteDisplayWidthPx(0, 2)).toBe('')
-  })
-
-  it('accepts pixel widths from drag-resize', () => {
-    expect(parseImageWidthAttr('{w=400px}')).toEqual({ width: '400px', rest: '' })
-    expect(normalizeImageWidth('400px')).toBe('400px')
-    expect(normalizeImageWidth('8px')).toBe('')
-  })
-
-  it('parses alignment beside width in one brace group', () => {
-    expect(parseImageAttrs('{w=50% align=center}')).toEqual({
-      width: '50%',
-      align: 'center',
-      rest: ''
-    })
-    expect(parseImageAttrs('{align=right}')).toEqual({
-      width: '',
-      align: 'right',
-      rest: ''
-    })
-    expect(parseImageAttrs('{w=400px,align=center}')).toEqual({
-      width: '400px',
-      align: 'center',
-      rest: ''
-    })
-    expect(normalizeImageAlign('middle')).toBe('center')
-    expect(formatImageAttrs({ width: '400px', align: 'center' })).toBe('{w=400px align=center}')
-    expect(formatImageAttrs({ align: 'left' })).toBe('')
-  })
-
-  it('rejects empty, zero, and over-wide values', () => {
-    expect(normalizeImageWidth('')).toBe('')
-    expect(normalizeImageWidth('0%')).toBe('')
-    expect(normalizeImageWidth('120%')).toBe('')
-    expect(normalizeImageWidth('auto')).toBe('')
-  })
-
-  it('serializes caption as alt and omits natural width', () => {
-    expect(
-      serializeImageMarkdown({
-        alt: '知识库资源示意',
-        src: '../assets/pixel.svg',
-        width: '50%'
-      })
-    ).toBe('![知识库资源示意](../assets/pixel.svg) {w=50%}')
-    expect(serializeImageMarkdown({ alt: '', src: '../assets/pixel.svg' })).toBe(
-      '![](../assets/pixel.svg)'
-    )
-    expect(formatImageWidthAttr('100')).toBe('{w=100%}')
-    expect(
-      serializeImageMarkdown({
-        alt: '',
-        src: '../assets/shot.png',
-        width: '400px',
-        align: 'right'
-      })
-    ).toBe('![](../assets/shot.png) {w=400px align=right}')
-  })
-})

package/src/swiper/hydrate.test.ts

@@ -1,61 +0,0 @@
-// @vitest-environment happy-dom
-
-import { describe, expect, it } from 'vitest'
-
-import { hydrateTnSwipers } from './hydrate'
-
-function swiperShell(titles: string[]): HTMLElement {
-  const root = document.createElement('div')
-  root.innerHTML = `
-    <div class="tn-swiper">
-      <div class="tn-swiper-tabs"></div>
-      <div class="swiper-container">
-        <div class="swiper-wrapper">
-          ${titles
-            .map(
-              (title) =>
-                `<div class="swiper-slide" data-title="${title}"><img alt="${title}" src="/${title}.svg"></div>`
-            )
-            .join('')}
-        </div>
-      </div>
-    </div>
-  `
-  document.body.append(root)
-  return root
-}
-
-describe('hydrateTnSwipers', () => {
-  it('builds tabs and shows only the active slide', () => {
-    const root = swiperShell(['A', 'B', 'C'])
-    expect(hydrateTnSwipers(root)).toBe(1)
-
-    const host = root.querySelector('.tn-swiper')!
-    const tabs = [...host.querySelectorAll('.tn-tab')].map((tab) => tab.textContent)
-    expect(tabs).toEqual(['A', 'B', 'C'])
-    expect(host.querySelectorAll('.tn-tab-nav')).toHaveLength(3) // < / >
-
-    const slides = [...host.querySelectorAll('.swiper-slide')] as HTMLElement[]
-    expect(slides[0]!.classList.contains('is-active')).toBe(true)
-    expect(slides[0]!.hidden).toBe(false)
-    expect(slides[1]!.hidden).toBe(true)
-    expect(slides[2]!.hidden).toBe(true)
-
-    ;(host.querySelectorAll('.tn-tab')[1] as HTMLButtonElement).click()
-    expect(slides[0]!.hidden).toBe(true)
-    expect(slides[1]!.hidden).toBe(false)
-    expect(slides[1]!.classList.contains('is-active')).toBe(true)
-
-    // Idempotent
-    expect(hydrateTnSwipers(root)).toBe(0)
-    root.remove()
-  })
-
-  it('omits the tab bar for a single slide', () => {
-    const root = swiperShell(['solo'])
-    hydrateTnSwipers(root)
-    expect(root.querySelector('.tn-swiper-tabs')).toBeNull()
-    expect(root.querySelector('.swiper-slide')!.classList.contains('is-active')).toBe(true)
-    root.remove()
-  })
-})