@tnotesjs/ui 0.1.4 → 0.2.0

package/src/code/highlight.ts

@@ -1,17 +1,13 @@
-import {
-  createHighlighterCore,
-  type HighlighterCore,
-  type ShikiTransformer,
-} from "shiki/core";
-import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
-import { bundledLanguages, bundledLanguagesAlias } from "shiki/langs";
+import { createHighlighterCore, type HighlighterCore, type ShikiTransformer } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import { bundledLanguages, bundledLanguagesAlias } from 'shiki/langs'
 
 export interface CodeMeta {
-  language: string;
-  title: string;
-  lineNumbers: boolean;
-  startLine: number;
-  highlightedLines: number[];
+  language: string
+  title: string
+  lineNumbers: boolean
+  startLine: number
+  highlightedLines: number[]
 }
 
 /**
@@ -20,113 +16,103 @@ export interface CodeMeta {
  */
 export const SHARED_CODE_GROUP_CONTRACT = {
   source: [
-    "::: code-group",
-    "```js:line-numbers=4 {2} [one.js]",
-    "console.log(1)",
-    "console.log(2)",
-    "```",
-    "```ts:no-line-numbers [two.ts]",
-    "const value: number = 2",
-    "```",
-    ":::",
-  ].join("\n"),
+    '::: code-group',
+    '```js:line-numbers=4 {2} [one.js]',
+    'console.log(1)',
+    'console.log(2)',
+    '```',
+    '```ts:no-line-numbers [two.ts]',
+    'const value: number = 2',
+    '```',
+    ':::'
+  ].join('\n'),
   items: [
     {
-      info: "js:line-numbers=4 {2} [one.js]",
-      code: "console.log(1)\nconsole.log(2)",
-      title: "one.js",
-      language: "js",
+      info: 'js:line-numbers=4 {2} [one.js]',
+      code: 'console.log(1)\nconsole.log(2)',
+      title: 'one.js',
+      language: 'js',
       lineNumbers: true,
       startLine: 4,
-      highlightedLines: [2],
+      highlightedLines: [2]
     },
     {
-      info: "ts:no-line-numbers [two.ts]",
-      code: "const value: number = 2",
-      title: "two.ts",
-      language: "ts",
+      info: 'ts:no-line-numbers [two.ts]',
+      code: 'const value: number = 2',
+      title: 'two.ts',
+      language: 'ts',
       lineNumbers: false,
       startLine: 1,
-      highlightedLines: [],
-    },
-  ],
-} as const;
+      highlightedLines: []
+    }
+  ]
+} as const
 
-export function parseCodeMeta(info = "", defaultLineNumbers = true): CodeMeta {
+export function parseCodeMeta(info = '', defaultLineNumbers = true): CodeMeta {
   const language =
     info
       .trim()
       .match(/^[^\s{\[]+/)?.[0]
-      ?.split(":")[0] || "text";
-  const highlightedLines = new Set<number>();
-  const ranges = info.match(/\{([\d,\s-]+)\}/)?.[1] || "";
-  for (const range of ranges.split(",")) {
-    const match = range.trim().match(/^(\d+)(?:-(\d+))?$/);
-    if (!match) continue;
-    const start = Number(match[1]);
-    const end = Number(match[2] ?? start);
-    if (start < 1 || end < start || end - start > 10000) continue;
-    for (let line = start; line <= end; line++) highlightedLines.add(line);
+      ?.split(':')[0] || 'text'
+  const highlightedLines = new Set<number>()
+  const ranges = info.match(/\{([\d,\s-]+)\}/)?.[1] || ''
+  for (const range of ranges.split(',')) {
+    const match = range.trim().match(/^(\d+)(?:-(\d+))?$/)
+    if (!match) continue
+    const start = Number(match[1])
+    const end = Number(match[2] ?? start)
+    if (start < 1 || end < start || end - start > 10000) continue
+    for (let line = start; line <= end; line++) highlightedLines.add(line)
   }
   return {
     language,
-    title: info.match(/\[([^\]]*)\]/)?.[1]?.trim() || "",
+    title: info.match(/\[([^\]]*)\]/)?.[1]?.trim() || '',
     lineNumbers: /:no-line-numbers\b/.test(info)
       ? false
       : /:line-numbers\b/.test(info) || defaultLineNumbers,
     startLine: Math.max(1, Number(info.match(/:line-numbers=(\d+)/)?.[1] || 1)),
-    highlightedLines: [...highlightedLines].sort((a, b) => a - b),
-  };
+    highlightedLines: [...highlightedLines].sort((a, b) => a - b)
+  }
 }
 
-let singleton: Promise<HighlighterCore> | undefined;
-let ready: HighlighterCore | undefined;
-const loading = new Map<string, Promise<void>>();
+let singleton: Promise<HighlighterCore> | undefined
+let ready: HighlighterCore | undefined
+const loading = new Map<string, Promise<void>>()
 
 export function normalizeCodeLanguage(language: string): string {
-  const id = language.toLowerCase();
-  if (id === "plain" || id === "txt" || id === "plaintext" || !id)
-    return "text";
-  if (id in bundledLanguages || id in bundledLanguagesAlias) return id;
+  const id = language.toLowerCase()
+  if (id === 'plain' || id === 'txt' || id === 'plaintext' || !id) return 'text'
+  if (id in bundledLanguages || id in bundledLanguagesAlias) return id
   // Unknown labels retain their caption, but display safely as plain text.
-  return "text";
+  return 'text'
 }
 
 /** One engine and one grammar cache for build-time and browser consumers. */
-export async function prepareCodeHighlighter(
-  languages: string[] = [],
-): Promise<HighlighterCore> {
+export async function prepareCodeHighlighter(languages: string[] = []): Promise<HighlighterCore> {
   singleton ??= createHighlighterCore({
     engine: createJavaScriptRegexEngine(),
-    themes: [
-      import("shiki/themes/github-light.mjs"),
-      import("shiki/themes/github-dark.mjs"),
-    ],
-    langs: [],
-  }).then((highlighter) => (ready = highlighter));
-  const highlighter = await singleton;
+    themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark.mjs')],
+    langs: []
+  }).then((highlighter) => (ready = highlighter))
+  const highlighter = await singleton
   await Promise.all(
     languages.map(async (requested) => {
-      const language = normalizeCodeLanguage(requested);
-      if (
-        language === "text" ||
-        highlighter.getLoadedLanguages().includes(language)
-      )
-        return;
-      let pending = loading.get(language);
+      const language = normalizeCodeLanguage(requested)
+      if (language === 'text' || highlighter.getLoadedLanguages().includes(language)) return
+      let pending = loading.get(language)
       if (!pending) {
         const loader =
           bundledLanguages[language as keyof typeof bundledLanguages] ??
-          bundledLanguagesAlias[language as keyof typeof bundledLanguagesAlias];
-        if (!loader) return;
-        pending = highlighter.loadLanguage(loader).then(() => undefined);
-        loading.set(language, pending);
-        pending.catch(() => loading.delete(language));
+          bundledLanguagesAlias[language as keyof typeof bundledLanguagesAlias]
+        if (!loader) return
+        pending = highlighter.loadLanguage(loader).then(() => undefined)
+        loading.set(language, pending)
+        pending.catch(() => loading.delete(language))
       }
-      await pending;
-    }),
-  );
-  return highlighter;
+      await pending
+    })
+  )
+  return highlighter
 }
 
 function transformers(meta: CodeMeta): ShikiTransformer[] {
@@ -134,38 +120,36 @@ function transformers(meta: CodeMeta): ShikiTransformer[] {
   // notation transformers (`[!code ++]` etc.); Desk has no write path for them.
   return [
     {
-      name: "tnotes-code-meta",
+      name: 'tnotes-code-meta',
       pre(node) {
-        this.addClassToHast(node, "tn-code-highlight");
-        node.properties.tabindex = 0;
+        this.addClassToHast(node, 'tn-code-highlight')
+        node.properties.tabindex = 0
       },
       line(node, line) {
-        node.properties["data-line"] = String(meta.startLine + line - 1);
-        if (meta.highlightedLines.includes(line))
-          this.addClassToHast(node, "highlighted");
-      },
-    },
-  ];
+        node.properties['data-line'] = String(meta.startLine + line - 1)
+        if (meta.highlightedLines.includes(line)) this.addClassToHast(node, 'highlighted')
+      }
+    }
+  ]
 }
 
 /** Markdown renderers prewarm document languages before their synchronous render pass. */
-export function highlightCodeSync(code: string, info = ""): string {
-  if (!ready)
-    throw new Error("Call prepareCodeHighlighter before rendering Markdown");
-  const meta = parseCodeMeta(info);
-  const normalizedLanguage = normalizeCodeLanguage(meta.language);
+export function highlightCodeSync(code: string, info = ''): string {
+  if (!ready) throw new Error('Call prepareCodeHighlighter before rendering Markdown')
+  const meta = parseCodeMeta(info)
+  const normalizedLanguage = normalizeCodeLanguage(meta.language)
   const language = ready.getLoadedLanguages().includes(normalizedLanguage)
     ? normalizedLanguage
-    : "text";
-  return ready.codeToHtml(code.replace(/\n$/, ""), {
+    : 'text'
+  return ready.codeToHtml(code.replace(/\n$/, ''), {
     lang: language,
-    themes: { light: "github-light", dark: "github-dark" },
+    themes: { light: 'github-light', dark: 'github-dark' },
     defaultColor: false,
-    transformers: transformers(meta),
-  });
+    transformers: transformers(meta)
+  })
 }
 
-export async function highlightCode(code: string, info = ""): Promise<string> {
-  await prepareCodeHighlighter([parseCodeMeta(info).language]);
-  return highlightCodeSync(code, info);
+export async function highlightCode(code: string, info = ''): Promise<string> {
+  await prepareCodeHighlighter([parseCodeMeta(info).language])
+  return highlightCodeSync(code, info)
 }

package/src/components/Badge/Badge.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 withDefaults(
   defineProps<{
-    text?: string;
-    type?: "info" | "tip" | "warning" | "danger";
+    text?: string
+    type?: 'info' | 'tip' | 'warning' | 'danger'
   }>(),
-  { text: "", type: "info" },
-);
+  { text: '', type: 'info' }
+)
 </script>
 
 <template>

package/src/components/CodeBlock/CodeBlock.vue

@@ -1,73 +1,70 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onServerPrefetch, ref, watch } from "vue";
-import { highlightCode, parseCodeMeta } from "../../code/highlight";
-import { copyText } from "../../browser/clipboard";
+import { computed, onBeforeUnmount, onServerPrefetch, ref, watch } from 'vue'
+import { highlightCode, parseCodeMeta } from '../../code/highlight'
+import { copyText } from '../../browser/clipboard'
 
 const props = withDefaults(
   defineProps<{
-    code: string;
-    info?: string;
-    highlightedHtml?: string;
-    lineNumbers?: boolean;
-    title?: string;
+    code: string
+    info?: string
+    highlightedHtml?: string
+    lineNumbers?: boolean
+    title?: string
   }>(),
-  { info: "", lineNumbers: true },
-);
-const meta = computed(() => parseCodeMeta(props.info, props.lineNumbers));
-const html = ref(props.highlightedHtml || "");
-const error = ref("");
-const copied = ref(false);
-const fullscreen = ref(false);
-const trigger = ref<HTMLButtonElement>();
-let generation = 0;
-let copyTimer: ReturnType<typeof setTimeout> | undefined;
+  { info: '', lineNumbers: true }
+)
+const meta = computed(() => parseCodeMeta(props.info, props.lineNumbers))
+const html = ref(props.highlightedHtml || '')
+const error = ref('')
+const copied = ref(false)
+const fullscreen = ref(false)
+const trigger = ref<HTMLButtonElement>()
+let generation = 0
+let copyTimer: ReturnType<typeof setTimeout> | undefined
 
 async function renderCode(): Promise<void> {
-  const version = ++generation;
-  error.value = "";
+  const version = ++generation
+  error.value = ''
   if (props.highlightedHtml !== undefined) {
-    html.value = props.highlightedHtml;
-    return;
+    html.value = props.highlightedHtml
+    return
   }
   try {
-    const output = await highlightCode(props.code, props.info);
-    if (version === generation) html.value = output;
+    const output = await highlightCode(props.code, props.info)
+    if (version === generation) html.value = output
   } catch (cause) {
     if (version === generation) {
-      html.value = "";
-      error.value = `高亮失败：${cause instanceof Error ? cause.message : String(cause)}`;
+      html.value = ''
+      error.value = `高亮失败：${cause instanceof Error ? cause.message : String(cause)}`
     }
   }
 }
 watch(() => [props.code, props.info, props.highlightedHtml], renderCode, {
-  immediate: true,
-});
-onServerPrefetch(renderCode);
+  immediate: true
+})
+onServerPrefetch(renderCode)
 async function copy(): Promise<void> {
   try {
-    await copyText(props.code.replace(/\n$/, ""));
-    copied.value = true;
-    clearTimeout(copyTimer);
-    copyTimer = setTimeout(() => (copied.value = false), 1500);
+    await copyText(props.code.replace(/\n$/, ''))
+    copied.value = true
+    clearTimeout(copyTimer)
+    copyTimer = setTimeout(() => (copied.value = false), 1500)
   } catch {
-    error.value = "复制失败，请检查剪贴板权限";
+    error.value = '复制失败，请检查剪贴板权限'
   }
 }
 function closeFullscreen(): void {
-  fullscreen.value = false;
-  trigger.value?.focus({ preventScroll: true });
+  fullscreen.value = false
+  trigger.value?.focus({ preventScroll: true })
 }
 onBeforeUnmount(() => {
-  generation++;
-  clearTimeout(copyTimer);
-});
+  generation++
+  clearTimeout(copyTimer)
+})
 </script>
 
 <template>
-  <section
-    class="tn-code-block"
-    :class="{ 'has-line-numbers': meta.lineNumbers }"
-  >
+  <section class="tn-code-block" :class="{ 'has-line-numbers': meta.lineNumbers }">
     <header class="tn-code-block__header">
       <span class="tn-code-block__title">{{ title || meta.title }}</span>
       <slot name="language" :language="meta.language"
@@ -108,9 +105,7 @@ onBeforeUnmount(() => {
           aria-hidden="true"
         >
           <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-          <path
-            d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
-          />
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
         </svg>
       </button>
       <button
@@ -155,14 +150,9 @@ onBeforeUnmount(() => {
       >
         <header>
           <span>{{ title || meta.title || meta.language }}</span
-          ><button type="button" autofocus @click="closeFullscreen">
-            关闭（Esc）
-          </button>
+          ><button type="button" autofocus @click="closeFullscreen">关闭（Esc）</button>
         </header>
-        <div
-          class="tn-code-block"
-          :class="{ 'has-line-numbers': meta.lineNumbers }"
-        >
+        <div class="tn-code-block" :class="{ 'has-line-numbers': meta.lineNumbers }">
           <div v-if="html" class="tn-code-block__content" v-html="html" />
           <pre v-else><code>{{ code }}</code></pre>
         </div>

package/src/components/CodeGroup/CodeGroup.vue

@@ -1,48 +1,47 @@
 <script setup lang="ts">
-import { nextTick, onMounted, ref, watch } from "vue";
-import CodeBlock from "../CodeBlock/CodeBlock.vue";
-import { parseCodeMeta } from "../../code/highlight";
+import { nextTick, onMounted, ref, watch } from 'vue'
+import CodeBlock from '../CodeBlock/CodeBlock.vue'
+import { parseCodeMeta } from '../../code/highlight'
 
 export interface CodeGroupItem {
-  code?: string;
-  info?: string;
-  highlightedHtml?: string;
-  key?: string;
+  code?: string
+  info?: string
+  highlightedHtml?: string
+  key?: string
 }
-const props = defineProps<{ items: CodeGroupItem[] }>();
-const root = ref<HTMLElement>();
-const active = ref(0);
+const props = defineProps<{ items: CodeGroupItem[] }>()
+const root = ref<HTMLElement>()
+const active = ref(0)
 function syncPanels(): void {
   const panels =
     root.value?.querySelectorAll<HTMLElement>(
-      ":scope > .tn-code-group__panels > .tn-code-group__panel",
-    ) ?? [];
+      ':scope > .tn-code-group__panels > .tn-code-group__panel'
+    ) ?? []
   panels.forEach((panel, index) => {
-    panel.hidden = index !== active.value;
-  });
+    panel.hidden = index !== active.value
+  })
 }
-watch(active, syncPanels, { flush: "post" });
+watch(active, syncPanels, { flush: 'post' })
 watch(
   () => props.items.length,
   (length) => {
-    active.value = Math.max(0, Math.min(active.value, length - 1));
-    nextTick(syncPanels);
-  },
-);
-onMounted(syncPanels);
+    active.value = Math.max(0, Math.min(active.value, length - 1))
+    nextTick(syncPanels)
+  }
+)
+onMounted(syncPanels)
 function navigate(event: KeyboardEvent, index: number): void {
-  let next = index;
-  if (event.key === "ArrowRight") next = (index + 1) % props.items.length;
-  else if (event.key === "ArrowLeft")
-    next = (index - 1 + props.items.length) % props.items.length;
-  else if (event.key === "Home") next = 0;
-  else if (event.key === "End") next = props.items.length - 1;
-  else return;
-  event.preventDefault();
-  active.value = next;
-  (event.currentTarget as HTMLElement).parentElement
-    ?.querySelectorAll<HTMLButtonElement>("button")
-    [next]?.focus();
+  let next = index
+  if (event.key === 'ArrowRight') next = (index + 1) % props.items.length
+  else if (event.key === 'ArrowLeft') next = (index - 1 + props.items.length) % props.items.length
+  else if (event.key === 'Home') next = 0
+  else if (event.key === 'End') next = props.items.length - 1
+  else return
+  event.preventDefault()
+  active.value = next
+  ;(event.currentTarget as HTMLElement).parentElement
+    ?.querySelectorAll<HTMLButtonElement>('button')
+    [next]?.focus()
 }
 </script>
 
@@ -67,9 +66,7 @@ function navigate(event: KeyboardEvent, index: number): void {
         @keydown="navigate($event, index)"
       >
         {{
-          parseCodeMeta(item.info).title ||
-          parseCodeMeta(item.info).language ||
-          `代码 ${index + 1}`
+          parseCodeMeta(item.info).title || parseCodeMeta(item.info).language || `代码 ${index + 1}`
         }}
       </button>
     </div>

package/src/components/Footprints/Footprints.vue

@@ -1,13 +1,5 @@
 <script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  useSlots,
-  watch
-} from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -141,11 +133,7 @@ watch(
   <!-- tn-preview-ignore: opt out of Layout ImagePreview so only the in-component modal opens -->
   <div class="tn-footprints tn-preview-ignore">
     <div class="tn-footprints__text">
-      <div
-        ref="textEl"
-        class="tn-footprints__text-body"
-        :class="{ 'is-collapsed': isCollapsed }"
-      >
+      <div ref="textEl" class="tn-footprints__text-body" :class="{ 'is-collapsed': isCollapsed }">
         <slot name="text-area">
           <p v-for="(line, i) in paragraphs" :key="i">{{ line }}</p>
         </slot>

package/src/components/Footprints/parse.ts

@@ -11,9 +11,7 @@ export interface FootprintsPayload {
 export function parseFootprintsDatetime(meta: string): number[] {
   const m = meta
     .trim()
-    .match(
-      /^(\d{4})-(\d{1,2})-(\d{1,2})(?:\s+(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?)?$/
-    )
+    .match(/^(\d{4})-(\d{1,2})-(\d{1,2})(?:\s+(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?)?$/)
   if (!m) return []
   const parts = [Number(m[1]), Number(m[2]), Number(m[3])]
   if (m[4] !== undefined) {