@tnotesjs/ui 0.1.5 → 0.2.0

package/README.md

@@ -1,120 +1,53 @@
 # @tnotesjs/ui
 
-Shared Vue UI for TNotes built-in blocks. Consumed by:
+TNotes 内置块的 Vue 组件。消费方：`@tnotesjs/ssg`、Desk。需要 `vue` `^3.5`。样式用 `--tn-*`（`src/styles/tokens.css`）。
 
-- `@tnotesjs/core` VitePress theme (`tn:dev`)
-- TNotes Desk (Electron visual editor)
-
-## Package rules
-
-- No direct `vitepress` imports in components
-- Styles use `--tn-*` tokens (`src/styles/tokens.css`)
-- Built-ins use short semantic names in markdown (`BilibiliVideo`, `WordList`); third-party components must use a vendor prefix
-- Short one-letter tags (`B` / `E` / `N` / `F`) are **not** supported
-
-## Install
+自由绘图尚未做成组件。磁盘真相源约定为知识库 `assets/*.excalidraw`（Desk 与 SSG 将只维护这一套数据）。配套 SVG 是历史派生，组件落地并改引用后再单独迁移删除。
 
 ```bash
 pnpm add @tnotesjs/ui
 ```
 
-Requires `vue` `^3.5` (peer).
-
-## Local development
-
-Sibling checkouts under `tnotesjs/` (optional `file:` while iterating):
-
-```text
-tnotesjs/ui
-tnotesjs/core   # production: "@tnotesjs/ui": "^0.1.0"
-tnotesjs/desk   # production: "@tnotesjs/ui": "^0.1.0"
-```
-
-```bash
-cd ui && pnpm install
-cd ../core && pnpm install
-cd ../desk && pnpm install
-```
-
-Published packages should depend on the npm version of `@tnotesjs/ui`, not `file:../ui`.
+### `BilibiliVideo`
 
-## Components
-
-### Shared rendering contract
-
-Core and Desk import the same token, prose, code-block, and code-group implementation. The
-`SHARED_CODE_GROUP_CONTRACT` fixture is exercised in both repositories' CI suites so changes to
-fence metadata, line numbering, titles, or generated markup cannot drift silently.
-
-| Syntax / capability                                       | Core page                              | Desk visual edit                                        | Desk read-only        | Desk source        |
-| --------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------- | --------------------- | ------------------ |
-| Markdown prose (headings, links, lists, tables, quotes)   | Shared `prose.css`                     | Shared typography + editor hit areas                    | Shared `prose.css`    | Canonical Markdown |
-| Fenced code + lazy Shiki language loading                 | Shared                                 | Shared in code-group previews; CodeMirror while editing | Shared                | Byte-preserved     |
-| `::: code-group`                                          | Shared `CodeGroup`                     | Shared atomic preview                                   | Shared                | Byte-preserved     |
-| `:line-numbers`, `:line-numbers=N`, `:no-line-numbers`    | Yes                                    | Yes                                                     | Yes                   | Byte-preserved     |
-| `{N}` fence line highlights                               | Yes                                    | Yes (CodeMirror)                                        | Yes                   | Byte-preserved     |
-| Shiki `[!code]` annotations                               | No (aligned with Desk)                 | No                                                      | No                    | Shown as source    |
-| Inline `<Badge>`                                          | Shared `Badge`                         | Shared inline projection                                | Shared                | Byte-preserved     |
-| `NotesTable`                                              | Shared component via Core data adapter | Shared component projection                             | Shared                | Byte-preserved     |
-| Math                                                      | TNotes SSG MathJax pipeline            | Milkdown/KaTeX                                          | Milkdown/KaTeX        | Byte-preserved     |
-| Image lightbox, navigation, zoom, and pan                 | Shared `ImagePreview`                  | Shared `ImagePreview`                                   | Shared `ImagePreview` | N/A                |
-| Mermaid / Mindmap / Footprints / BilibiliVideo / WordList | Shared                                 | Shared projection                                       | Shared                | Byte-preserved     |
-
-The hosts may add editing handles, navigation offsets, or knowledge-base data adapters. They must
-not redefine the shared color tokens, prose typography, or code rendering shell.
-
-### `BilibiliVideo` — `<BilibiliVideo id="BVxxxx" />`
-
-| Prop       | Default  | Notes                                       |
-| ---------- | -------- | ------------------------------------------- |
-| `id`       | required | BV id                                       |
-| `autoplay` | `false`  | Embed URL sends `autoplay=0` unless enabled |
-| `muted`    | `false`  | Embed URL sends `muted=0\|1`                |
+| Prop       | Default  |
+| ---------- | -------- |
+| `id`       | required |
+| `autoplay` | `false`  |
+| `muted`    | `false`  |
 
 ```md
 <BilibiliVideo id="BV1QR4y1y7GG" :autoplay="true" :muted="true" />
 ```
 
-### `WordList` — `<WordList :words="[…]" />`
+### `WordList`
 
-| Prop              | Default                   | Notes                        |
-| ----------------- | ------------------------- | ---------------------------- |
-| `words`           | `[]`                      | Word strings                 |
-| `needSort`        | `false`                   | Sort A→Z by first letter     |
-| `wordsBaseUrl`    | en-words blob URL         | Optional host override       |
-| `wordsRawBaseUrl` | en-words raw URL          | Optional host override       |
-| `features`        | `WORD_LIST_FEATURES_FULL` | Capability flags (see below) |
+| Prop              | Default                   |
+| ----------------- | ------------------------- |
+| `words`           | `[]`                      |
+| `needSort`        | `false`                   |
+| `wordsBaseUrl`    | en-words blob URL         |
+| `wordsRawBaseUrl` | en-words raw URL          |
+| `features`        | `WORD_LIST_FEATURES_FULL` |
 
 ```md
 <WordList :words="['cancel', 'salary']" :needSort="true" />
 ```
 
-**Features presets** (no consumer/`host` field — capability-based):
-
-| Preset                              | Cards | Fetch word data | Menu Pin | Menu Auto Show Card |
-| ----------------------------------- | ----- | --------------- | -------- | ------------------- |
-| `WORD_LIST_FEATURES_FULL` (default) | ✓     | ✓               | ✓        | ✓                   |
-| `WORD_LIST_FEATURES_STATIC`         | —     | —               | —        | —                   |
+`WORD_LIST_FEATURES_FULL`：卡片 + 拉取词表 + 菜单钉住 / 自动展开。`WORD_LIST_FEATURES_STATIC`：全关。
 
 ### `Mermaid`
 
-Shared diagram preview for core (`tn:dev`) and Desk. Markdown fence language: `mermaid`.
-
-| Prop                 | Default   | Notes                                            |
-| -------------------- | --------- | ------------------------------------------------ |
-| `source`             | `''`      | Plain Mermaid text (Desk)                        |
-| `graph`              | `''`      | URI-encoded source (VitePress fence)             |
-| `id`                 | auto      | Mermaid render id                                |
-| `center`             | `false`   | From fence keyword `center`; omit → not centered |
-| `isDark`             | auto      | Or pass explicitly                               |
-| `securityLevel`      | `'loose'` | Same default for Desk and site preview           |
-| `enableCopy`         | `true`    | Hover copy action                                |
-| `enableFullscreen`   | `true`    | Hover fullscreen action                          |
-| `enableCenterToggle` | `true`    | Hover center toggle (left of fullscreen)         |
-
-Fence:
-
-- ` ```mermaid ` → not centered
-- ` ```mermaid center ` → centered
-
-Icons for the toggle live in `src/components/Mermaid/icons/` (`icon__center_on.svg` / `icon__center_off.svg`).
+围栏语言 `mermaid`；` ```mermaid center ` 居中。
+
+| Prop                 | Default   |
+| -------------------- | --------- |
+| `source`             | `''`      |
+| `graph`              | `''`      |
+| `id`                 | auto      |
+| `center`             | `false`   |
+| `isDark`             | auto      |
+| `securityLevel`      | `'loose'` |
+| `enableCopy`         | `true`    |
+| `enableFullscreen`   | `true`    |
+| `enableCenterToggle` | `true`    |

package/dist/code/highlight.js

@@ -1,7 +1,5 @@
 // src/code/highlight.ts
-import {
-  createHighlighterCore
-} from "shiki/core";
+import { createHighlighterCore } from "shiki/core";
 import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 import { bundledLanguages, bundledLanguagesAlias } from "shiki/langs";
 var SHARED_CODE_GROUP_CONTRACT = {
@@ -62,26 +60,21 @@ var ready;
 var loading = /* @__PURE__ */ new Map();
 function normalizeCodeLanguage(language) {
   const id = language.toLowerCase();
-  if (id === "plain" || id === "txt" || id === "plaintext" || !id)
-    return "text";
+  if (id === "plain" || id === "txt" || id === "plaintext" || !id) return "text";
   if (id in bundledLanguages || id in bundledLanguagesAlias) return id;
   return "text";
 }
 async function prepareCodeHighlighter(languages = []) {
   singleton ??= createHighlighterCore({
     engine: createJavaScriptRegexEngine(),
-    themes: [
-      import("shiki/themes/github-light.mjs"),
-      import("shiki/themes/github-dark.mjs")
-    ],
+    themes: [import("shiki/themes/github-light.mjs"), import("shiki/themes/github-dark.mjs")],
     langs: []
   }).then((highlighter2) => ready = highlighter2);
   const highlighter = await singleton;
   await Promise.all(
     languages.map(async (requested) => {
       const language = normalizeCodeLanguage(requested);
-      if (language === "text" || highlighter.getLoadedLanguages().includes(language))
-        return;
+      if (language === "text" || highlighter.getLoadedLanguages().includes(language)) return;
       let pending = loading.get(language);
       if (!pending) {
         const loader = bundledLanguages[language] ?? bundledLanguagesAlias[language];
@@ -105,15 +98,13 @@ function transformers(meta) {
       },
       line(node, line) {
         node.properties["data-line"] = String(meta.startLine + line - 1);
-        if (meta.highlightedLines.includes(line))
-          this.addClassToHast(node, "highlighted");
+        if (meta.highlightedLines.includes(line)) this.addClassToHast(node, "highlighted");
       }
     }
   ];
 }
 function highlightCodeSync(code, info = "") {
-  if (!ready)
-    throw new Error("Call prepareCodeHighlighter before rendering Markdown");
+  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";

package/dist/components/Footprints/parse.js

@@ -1,8 +1,6 @@
 // src/components/Footprints/parse.ts
 function parseFootprintsDatetime(meta) {
-  const m = meta.trim().match(
-    /^(\d{4})-(\d{1,2})-(\d{1,2})(?:\s+(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?)?$/
-  );
+  const m = meta.trim().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] !== void 0) {

package/dist/components/Mindmap/markdown.d.ts

@@ -2,14 +2,8 @@ interface MindmapFenceOptions {
     title?: string;
     initialExpandLevel?: number;
 }
-interface MindmapReference {
-    path: string;
-    title?: string;
-}
 /** Parse the canonical `mindmap [title] 2` fence metadata. */
 declare function parseMindmapFence(openLine: string): MindmapFenceOptions | null;
-/** @deprecated Mindmap fences no longer resolve `<<<` includes; kept for body-include parsers / tests. */
-declare function parseMindmapReference(line: string): MindmapReference | null;
 interface NormalizeMindmapOptions {
     title?: string;
     defaultTitle?: string;
@@ -17,4 +11,4 @@ interface NormalizeMindmapOptions {
 /** Ensure canonical mindmap Markdown has exactly one H1 root title. */
 declare function normalizeMindmapMarkdown(source: string, options?: NormalizeMindmapOptions): string;
 
-export { type MindmapFenceOptions, type MindmapReference, type NormalizeMindmapOptions, normalizeMindmapMarkdown, parseMindmapFence, parseMindmapReference };
+export { type MindmapFenceOptions, type NormalizeMindmapOptions, normalizeMindmapMarkdown, parseMindmapFence };

package/dist/components/Mindmap/markdown.js

@@ -19,19 +19,6 @@ function parseMindmapFence(openLine) {
   }
   return options;
 }
-function parseMindmapReference(line) {
-  const match = line.trim().match(/^<<<\s+(.+?)\s*$/);
-  if (!match) return null;
-  let rest = match[1].trim();
-  let title;
-  const titleMatch = rest.match(/\s+\[([^\]]+)\]\s*$/);
-  if (titleMatch) {
-    title = cleanHeadingText(titleMatch[1]) || void 0;
-    rest = rest.slice(0, titleMatch.index).trim();
-  }
-  const path = rest.replace(/^(?:"([\s\S]*)"|'([\s\S]*)')$/, "$1$2").trim();
-  return path ? { path, title } : null;
-}
 function normalizeMindmapMarkdown(source, options = {}) {
   const lines = source.replace(/\r\n?/g, "\n").split("\n");
   let existingTitle = "";
@@ -55,6 +42,5 @@ ${body.join("\n")}
 }
 export {
   normalizeMindmapMarkdown,
-  parseMindmapFence,
-  parseMindmapReference
+  parseMindmapFence
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/ui",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Shared Vue UI for TNotes built-in blocks — consumed by the TNotes SSG and Desk.",
   "type": "module",
   "exports": {
@@ -50,7 +50,17 @@
     "./mermaid": "./src/entries/mermaid.ts",
     "./mindmap": "./src/entries/mindmap.ts",
     "./notes-table": "./src/entries/notes-table.ts",
-    "./word-list": "./src/entries/word-list.ts"
+    "./word-list": "./src/entries/word-list.ts",
+    "./excalidraw-view": {
+      "types": "./src/entries/excalidraw-view.ts",
+      "import": "./src/entries/excalidraw-view.ts",
+      "default": "./src/entries/excalidraw-view.ts"
+    },
+    "./excalidraw-editor": {
+      "types": "./src/entries/excalidraw-editor.ts",
+      "import": "./src/entries/excalidraw-editor.ts",
+      "default": "./src/entries/excalidraw-editor.ts"
+    }
   },
   "files": [
     "dist",
@@ -65,15 +75,20 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@tnotesjs/mindmap-core": "^0.2.2",
+    "@excalidraw/excalidraw": "0.18.1",
     "marked": "^15.0.11",
     "mermaid": "^11.17.0",
-    "shiki": "4.4.2"
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "sass": "^1.90.0",
+    "shiki": "4.4.2",
+    "@tnotesjs/mindmap-core": "^0.2.2"
   },
   "devDependencies": {
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-vue": "^6.0.8",
     "happy-dom": "^20.12.0",
-    "sass": "^1.90.0",
     "tsup": "8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.11",
@@ -88,11 +103,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tnotesjs/ui.git"
+    "url": "git+https://github.com/tnotesjs/tnotesjs.git",
+    "directory": "packages/ui"
   },
-  "homepage": "https://github.com/tnotesjs/ui#readme",
+  "homepage": "https://github.com/tnotesjs/tnotesjs/tree/main/packages/ui#readme",
   "bugs": {
-    "url": "https://github.com/tnotesjs/ui/issues"
+    "url": "https://github.com/tnotesjs/tnotesjs/issues"
   },
   "keywords": [
     "tnotesjs",

package/src/browser/clipboard.ts

@@ -2,31 +2,28 @@
 export async function copyText(text: string): Promise<void> {
   try {
     if (navigator.clipboard?.writeText) {
-      await navigator.clipboard.writeText(text);
-      return;
+      await navigator.clipboard.writeText(text)
+      return
     }
   } catch {
     /* use the synchronous user-gesture fallback */
   }
-  const selection = document.getSelection();
+  const selection = document.getSelection()
   const ranges = selection
-    ? Array.from({ length: selection.rangeCount }, (_, i) =>
-        selection.getRangeAt(i),
-      )
-    : [];
-  const active = document.activeElement;
-  const field = document.createElement("textarea");
-  field.value = text;
-  field.style.cssText = "position:fixed;left:-9999px;opacity:0";
-  document.body.append(field);
+    ? Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i))
+    : []
+  const active = document.activeElement
+  const field = document.createElement('textarea')
+  field.value = text
+  field.style.cssText = 'position:fixed;left:-9999px;opacity:0'
+  document.body.append(field)
   try {
-    field.select();
-    if (!document.execCommand("copy"))
-      throw new Error("Clipboard access denied");
+    field.select()
+    if (!document.execCommand('copy')) throw new Error('Clipboard access denied')
   } finally {
-    field.remove();
-    if (active instanceof HTMLElement) active.focus({ preventScroll: true });
-    selection?.removeAllRanges();
-    ranges.forEach((range) => selection?.addRange(range));
+    field.remove()
+    if (active instanceof HTMLElement) active.focus({ preventScroll: true })
+    selection?.removeAllRanges()
+    ranges.forEach((range) => selection?.addRange(range))
   }
 }

package/src/browser/theme.ts

@@ -1,22 +1,17 @@
-export type ThemePreference = "light" | "dark" | "system";
+export type ThemePreference = 'light' | 'dark' | 'system'
 
 /** Explicit data-theme wins; safe during static/SSR rendering. */
 export function isDarkTheme(root?: HTMLElement): boolean {
-  root ??=
-    typeof document === "undefined" ? undefined : document.documentElement;
-  if (!root) return false;
-  if (root.dataset.theme === "light") return false;
-  return root.dataset.theme === "dark" || root.classList.contains("dark");
+  root ??= typeof document === 'undefined' ? undefined : document.documentElement
+  if (!root) return false
+  if (root.dataset.theme === 'light') return false
+  return root.dataset.theme === 'dark' || root.classList.contains('dark')
 }
 
-export function applyTheme(
-  preference: ThemePreference,
-  root = document.documentElement,
-): void {
+export function applyTheme(preference: ThemePreference, root = document.documentElement): void {
   const dark =
-    preference === "dark" ||
-    (preference === "system" &&
-      matchMedia("(prefers-color-scheme: dark)").matches);
-  root.dataset.theme = dark ? "dark" : "light";
-  root.classList.toggle("dark", dark);
+    preference === 'dark' ||
+    (preference === 'system' && matchMedia('(prefers-color-scheme: dark)').matches)
+  root.dataset.theme = dark ? 'dark' : 'light'
+  root.classList.toggle('dark', dark)
 }

package/src/code/highlight.test.ts

@@ -1,25 +1,42 @@
 import { describe, expect, it } from 'vitest'
-import { highlightCode, highlightCodeSync, parseCodeMeta, prepareCodeHighlighter } from './highlight'
+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,
+      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,
+      language: 'js',
+      title: 'setup.js',
+      startLine: 1,
+      lineNumbers: true,
       highlightedLines: [1, 2]
     })
     expect(parseCodeMeta('txt {3}')).toEqual({
-      language: 'txt', title: '', startLine: 1, lineNumbers: true,
+      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'])])
+    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}')
@@ -42,7 +59,7 @@ describe('shared code rendering', () => {
   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}',
+      'js:line-numbers=5 {2}'
     )
     // Magic comments stay as source text; Desk has no annotation write path.
     expect(withNotation).toContain('[!code ++]')