@tnotesjs/ui 0.1.5 → 0.2.1

package/src/markdown/image.ts

@@ -76,13 +76,9 @@ export function normalizeImageWidth(raw: string): string {
 }
 
 /** Logical CSS px for a pasted bitmap, folding device pixel ratio (4K/retina). */
-export function pasteDisplayWidthPx(
-  naturalWidth: number,
-  devicePixelRatio = 1
-): string {
+export function pasteDisplayWidthPx(naturalWidth: number, devicePixelRatio = 1): string {
   if (!Number.isFinite(naturalWidth) || naturalWidth <= 0) return ''
-  const dpr =
-    Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1
+  const dpr = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1
   return normalizeImageWidth(`${Math.round(naturalWidth / dpr)}px`)
 }
 
@@ -90,10 +86,7 @@ export function formatImageWidthAttr(width: string): string {
   return formatImageAttrs({ width, align: 'left' })
 }
 
-export function formatImageAttrs(attrs: {
-  width?: string
-  align?: ImageAlign | string
-}): string {
+export function formatImageAttrs(attrs: { width?: string; align?: ImageAlign | string }): string {
   const width = normalizeImageWidth(attrs.width ?? '')
   const align = normalizeImageAlign(attrs.align ?? '')
   const parts: string[] = []
@@ -104,9 +97,7 @@ export function formatImageAttrs(attrs: {
 
 export function serializeImageMarkdown(image: ImageMarkdown): string {
   const alt = image.alt.replaceAll('[', '').replaceAll(']', '')
-  const title = image.title?.trim()
-    ? ` "${image.title.replaceAll('"', '')}"`
-    : ''
+  const title = image.title?.trim() ? ` "${image.title.replaceAll('"', '')}"` : ''
   const suffix = formatImageAttrs({
     width: image.width ?? '',
     align: image.align ?? 'left'

package/src/styles/code.css

@@ -105,13 +105,13 @@
   color: var(--shiki-light);
   background-color: transparent;
 }
-html.dark:not([data-theme="light"]) .tn-code-highlight,
-html[data-theme="dark"] .tn-code-highlight {
+html.dark:not([data-theme='light']) .tn-code-highlight,
+html[data-theme='dark'] .tn-code-highlight {
   color: var(--shiki-dark);
   background-color: var(--tn-c-bg-soft);
 }
-html.dark:not([data-theme="light"]) .tn-code-highlight span:not(.line),
-html[data-theme="dark"] .tn-code-highlight span:not(.line) {
+html.dark:not([data-theme='light']) .tn-code-highlight span:not(.line),
+html[data-theme='dark'] .tn-code-highlight span:not(.line) {
   color: var(--shiki-dark);
   background-color: transparent;
 }
@@ -151,7 +151,7 @@ html[data-theme="dark"] .tn-code-highlight span:not(.line) {
   border-bottom: 2px solid transparent;
   padding: 4px 10px;
 }
-.tn-code-group__tabs button[aria-selected="true"] {
+.tn-code-group__tabs button[aria-selected='true'] {
   color: var(--tn-c-brand);
   border-bottom-color: var(--tn-c-brand);
 }

package/src/styles/prose.css

@@ -198,7 +198,7 @@
   display: none;
 }
 :is(.tn-prose, .vp-doc) :where(details.tn-custom-block > summary::before) {
-  content: "";
+  content: '';
   flex: none;
   box-sizing: border-box;
   width: 0.42em;

package/src/styles/swiper.css

@@ -101,7 +101,7 @@
   z-index: 1;
   height: 2px;
   border-radius: 2px;
-  content: "";
+  content: '';
   background-color: transparent;
   transition: background-color 0.2s ease;
 }

package/src/styles/tokens.css

@@ -24,10 +24,9 @@
   --tn-c-default-soft: #e8e8e9;
   --tn-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
   --tn-font-sans:
-    "Punctuation SC", Inter, ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --tn-font-mono:
-    "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
+    'Punctuation SC', Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --tn-font-mono: 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
   --tn-prose-size: 16px;
   --tn-prose-line-height: 28px;
   --tn-heading-weight: 600;
@@ -46,8 +45,8 @@
   color-scheme: light;
 }
 
-:root.dark:not([data-theme="light"]),
-:root[data-theme="dark"] {
+:root.dark:not([data-theme='light']),
+:root[data-theme='dark'] {
   --tn-c-brand-strong: #a8b1ff;
   --tn-c-text: #dfdfd6;
   --tn-c-text-2: #98989f;

package/src/swiper/hydrate.ts

@@ -5,56 +5,49 @@
  */
 
 export function applySwiperTabsPadding(tabs: HTMLElement, hasNav: boolean): void {
-  tabs.style.padding = hasNav ? "0 0.8rem 0 3rem" : "0 0.8rem";
+  tabs.style.padding = hasNav ? '0 0.8rem 0 3rem' : '0 0.8rem'
 }
 
-export function createSwiperTabNav(handlers: {
-  onPrev: () => void;
-  onNext: () => void;
-}): {
-  prev: HTMLButtonElement;
-  line: HTMLSpanElement;
-  next: HTMLButtonElement;
+export function createSwiperTabNav(handlers: { onPrev: () => void; onNext: () => void }): {
+  prev: HTMLButtonElement
+  line: HTMLSpanElement
+  next: HTMLButtonElement
 } {
-  const prev = document.createElement("button");
-  prev.type = "button";
-  prev.className = "tn-tab-nav tn-tab-prev";
-  prev.textContent = "<";
-  prev.title = "上一页";
-  prev.addEventListener("click", (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    handlers.onPrev();
-  });
-
-  const line = document.createElement("span");
-  line.className = "tn-tab-nav tab-tab-line";
-  line.textContent = "/";
-
-  const next = document.createElement("button");
-  next.type = "button";
-  next.className = "tn-tab-nav tn-tab-next";
-  next.textContent = ">";
-  next.title = "下一页";
-  next.addEventListener("click", (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    handlers.onNext();
-  });
-
-  return { prev, line, next };
+  const prev = document.createElement('button')
+  prev.type = 'button'
+  prev.className = 'tn-tab-nav tn-tab-prev'
+  prev.textContent = '<'
+  prev.title = '上一页'
+  prev.addEventListener('click', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    handlers.onPrev()
+  })
+
+  const line = document.createElement('span')
+  line.className = 'tn-tab-nav tab-tab-line'
+  line.textContent = '/'
+
+  const next = document.createElement('button')
+  next.type = 'button'
+  next.className = 'tn-tab-nav tn-tab-next'
+  next.textContent = '>'
+  next.title = '下一页'
+  next.addEventListener('click', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    handlers.onNext()
+  })
+
+  return { prev, line, next }
 }
 
-export function wrapSlideIndex(
-  index: number,
-  length: number,
-  delta: -1 | 1,
-): number {
-  if (length <= 0) return 0;
-  return (index + delta + length) % length;
+export function wrapSlideIndex(index: number, length: number, delta: -1 | 1): number {
+  if (length <= 0) return 0
+  return (index + delta + length) % length
 }
 
-const READY = "tnSwiperReady";
+const READY = 'tnSwiperReady'
 
 /**
  * Hydrate every `.tn-swiper` under `root` (or `document`). Idempotent:
@@ -62,103 +55,99 @@ const READY = "tnSwiperReady";
  * When `root` itself is a `.tn-swiper`, it is included.
  */
 export function hydrateTnSwipers(root: ParentNode = document): number {
-  const hosts: HTMLElement[] = [];
-  if (root instanceof HTMLElement && root.classList.contains("tn-swiper")) {
-    hosts.push(root);
+  const hosts: HTMLElement[] = []
+  if (root instanceof HTMLElement && root.classList.contains('tn-swiper')) {
+    hosts.push(root)
   }
-  hosts.push(...root.querySelectorAll<HTMLElement>(".tn-swiper"));
+  hosts.push(...root.querySelectorAll<HTMLElement>('.tn-swiper'))
 
-  let count = 0;
-  const seen = new Set<HTMLElement>();
+  let count = 0
+  const seen = new Set<HTMLElement>()
   for (const host of hosts) {
-    if (seen.has(host)) continue;
-    seen.add(host);
-    if (host.dataset[READY] === "true") continue;
+    if (seen.has(host)) continue
+    seen.add(host)
+    if (host.dataset[READY] === 'true') continue
     if (hydrateOne(host)) {
-      host.dataset[READY] = "true";
-      count += 1;
+      host.dataset[READY] = 'true'
+      count += 1
     }
   }
-  return count;
+  return count
 }
 
 function hydrateOne(host: HTMLElement): boolean {
-  const tabs = host.querySelector<HTMLElement>(".tn-swiper-tabs");
-  const wrapper = host.querySelector<HTMLElement>(".swiper-wrapper");
-  if (!wrapper) return false;
+  const tabs = host.querySelector<HTMLElement>('.tn-swiper-tabs')
+  const wrapper = host.querySelector<HTMLElement>('.swiper-wrapper')
+  if (!wrapper) return false
 
-  const slides = [
-    ...wrapper.querySelectorAll<HTMLElement>(":scope > .swiper-slide"),
-  ];
+  const slides = [...wrapper.querySelectorAll<HTMLElement>(':scope > .swiper-slide')]
   if (slides.length === 0) {
     // Empty shell — still mark ready so we don't loop.
-    return true;
+    return true
   }
 
   // Ensure tabs host exists (site always emits it; Desk may omit for 1 slide).
-  let tabsEl = tabs;
+  let tabsEl = tabs
   if (!tabsEl) {
-    tabsEl = document.createElement("div");
-    tabsEl.className = "tn-swiper-tabs";
-    host.prepend(tabsEl);
+    tabsEl = document.createElement('div')
+    tabsEl.className = 'tn-swiper-tabs'
+    host.prepend(tabsEl)
   }
 
-  const useTabs = slides.length > 1;
-  tabsEl.replaceChildren();
-  applySwiperTabsPadding(tabsEl, useTabs);
+  const useTabs = slides.length > 1
+  tabsEl.replaceChildren()
+  applySwiperTabsPadding(tabsEl, useTabs)
 
-  const tabButtons: HTMLButtonElement[] = [];
+  const tabButtons: HTMLButtonElement[] = []
 
   const activate = (index: number): void => {
     tabButtons.forEach((button, buttonIndex) =>
-      button.classList.toggle("active", buttonIndex === index),
-    );
+      button.classList.toggle('active', buttonIndex === index)
+    )
     slides.forEach((slide, slideIndex) => {
-      const on = slideIndex === index;
-      slide.classList.toggle("is-active", on);
-      slide.hidden = !on;
-    });
-  };
+      const on = slideIndex === index
+      slide.classList.toggle('is-active', on)
+      slide.hidden = !on
+    })
+  }
 
   const activeIndex = (): number => {
-    const found = tabButtons.findIndex((button) =>
-      button.classList.contains("active"),
-    );
-    return found >= 0 ? found : 0;
-  };
+    const found = tabButtons.findIndex((button) => button.classList.contains('active'))
+    return found >= 0 ? found : 0
+  }
 
   if (useTabs) {
     const nav = createSwiperTabNav({
       onPrev: () => activate(wrapSlideIndex(activeIndex(), slides.length, -1)),
-      onNext: () => activate(wrapSlideIndex(activeIndex(), slides.length, 1)),
-    });
-    tabsEl.append(nav.prev, nav.line);
+      onNext: () => activate(wrapSlideIndex(activeIndex(), slides.length, 1))
+    })
+    tabsEl.append(nav.prev, nav.line)
 
     slides.forEach((slide, index) => {
       const title =
         slide.dataset.title?.trim() ||
-        slide.querySelector("img")?.getAttribute("alt")?.trim() ||
-        "img";
-      slide.dataset.title = title;
-      const tab = document.createElement("button");
-      tab.type = "button";
-      tab.className = "tn-tab";
-      tab.textContent = title;
-      tab.addEventListener("click", () => activate(index));
-      tabButtons.push(tab);
-      tabsEl!.append(tab);
-    });
-
-    tabsEl.append(nav.next);
+        slide.querySelector('img')?.getAttribute('alt')?.trim() ||
+        'img'
+      slide.dataset.title = title
+      const tab = document.createElement('button')
+      tab.type = 'button'
+      tab.className = 'tn-tab'
+      tab.textContent = title
+      tab.addEventListener('click', () => activate(index))
+      tabButtons.push(tab)
+      tabsEl!.append(tab)
+    })
+
+    tabsEl.append(nav.next)
     // Multi-slide: tabs stay above the container.
     if (tabsEl.parentElement !== host || host.firstElementChild !== tabsEl) {
-      host.prepend(tabsEl);
+      host.prepend(tabsEl)
     }
   } else {
     // Single slide: drop empty tab bar (Desk parity).
-    tabsEl.remove();
+    tabsEl.remove()
   }
 
-  activate(0);
-  return true;
+  activate(0)
+  return true
 }

package/src/code/highlight.test.ts

@@ -1,55 +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"/)
-  })
-})