@tnotesjs/ui 0.4.1 → 0.4.3

package/dist/markdown/lineBreaks.d.ts

@@ -0,0 +1,47 @@
+/**
+ * kb-level line-break mode (`tnotes.json` → `markdown.lineBreaks`), shared by
+ * the SSG and Desk's card renderers so both draw the same note the same way.
+ *
+ * `visual` keeps what the editor shows: a single newline renders as `<br>`, and
+ * every blank line beyond the first between two top-level blocks becomes a
+ * one-line spacer; inside callout bodies (title and closing fence included)
+ * every blank line does. Lists and quotes keep CommonMark spacing; their inner blank lines
+ * decide loose/tight and have no stable visual meaning. Fences, tables and
+ * HTML are single tokens, so their contents are never touched.
+ */
+type LineBreakMode = 'commonmark' | 'visual';
+declare const BLANK_LINE_CLASS = "tn-blank-line";
+declare const BLANK_LINE_HTML = "<div class=\"tn-blank-line\" aria-hidden=\"true\"></div>\n";
+declare function resolveLineBreakMode(value: unknown): LineBreakMode;
+/** Structural subset of markdown-it's Token, so this module stays dependency-free. */
+interface BlockToken {
+    type: string;
+    block: boolean;
+    nesting: number;
+    level: number;
+    map: [number, number] | null;
+    content: string;
+}
+interface CoreState {
+    src: string;
+    tokens: BlockToken[];
+    Token: new (type: string, tag: string, nesting: -1 | 0 | 1) => BlockToken;
+}
+interface MarkdownLike {
+    set(options: {
+        breaks: boolean;
+    }): unknown;
+    core: {
+        ruler: {
+            push(name: string, rule: (state: CoreState) => void): void;
+        };
+    };
+}
+/** Callout bodies get spacers too; other containers render their own way. */
+declare function isSpacedContainer(type: string): boolean;
+/** Inserts `tn-blank-line` spacers for the blank lines `visual` keeps. */
+declare function insertBlankLineSpacers(state: CoreState, spaced?: (type: string) => boolean): void;
+/** Applies the mode to a markdown-it instance; `commonmark` leaves it untouched. */
+declare function useLineBreaks(md: MarkdownLike, mode: LineBreakMode): void;
+
+export { BLANK_LINE_CLASS, BLANK_LINE_HTML, type LineBreakMode, insertBlankLineSpacers, isSpacedContainer, resolveLineBreakMode, useLineBreaks };

package/dist/markdown/lineBreaks.js

@@ -0,0 +1,78 @@
+// src/markdown/lineBreaks.ts
+var BLANK_LINE_CLASS = "tn-blank-line";
+var BLANK_LINE_HTML = `<div class="${BLANK_LINE_CLASS}" aria-hidden="true"></div>
+`;
+function resolveLineBreakMode(value) {
+  return value === "visual" ? "visual" : "commonmark";
+}
+var CALLOUT_OPEN = /^container_(?:info|tip|warning|danger|details)_open$/;
+var CONTAINER_FENCE = /^\s*:{3,}\s*$/;
+function isSpacedContainer(type) {
+  return CALLOUT_OPEN.test(type);
+}
+function blockEnd(token, lines) {
+  const [start, mapEnd] = token.map;
+  let end = mapEnd;
+  if (token.type.startsWith("container_") && CONTAINER_FENCE.test(lines[end] ?? "")) end += 1;
+  while (end > start + 1 && !(lines[end - 1] ?? "").trim()) end -= 1;
+  return end;
+}
+function insertBlankLineSpacers(state, spaced = isSpacedContainer) {
+  const lines = state.src.split("\n");
+  const out = [];
+  const stack = [{ level: 0, lastEnd: null, free: 1 }];
+  const pushSpacers = (count, level) => {
+    for (; count > 0; count -= 1) {
+      const spacer = new state.Token("html_block", "", 0);
+      spacer.block = true;
+      spacer.level = level;
+      spacer.content = BLANK_LINE_HTML;
+      out.push(spacer);
+    }
+  };
+  for (const token of state.tokens) {
+    const scope = stack[stack.length - 1];
+    if (scope.close && token.type === scope.close && token.level === scope.level - 1) {
+      if (scope.closeLine !== void 0 && scope.lastEnd !== null) {
+        pushSpacers(scope.closeLine - scope.lastEnd - scope.free, scope.level);
+      }
+      stack.pop();
+      out.push(token);
+      continue;
+    }
+    if (token.block && token.map && token.nesting !== -1 && token.level === scope.level) {
+      if (scope.lastEnd !== null) {
+        pushSpacers(token.map[0] - scope.lastEnd - scope.free, scope.level);
+      }
+      const end = blockEnd(token, lines);
+      scope.lastEnd = end;
+      out.push(token);
+      if (token.nesting === 1 && spaced(token.type)) {
+        const closed = CONTAINER_FENCE.test(lines[end - 1] ?? "") && end - 1 > token.map[0];
+        stack.push({
+          level: token.level + 1,
+          lastEnd: token.map[0] + 1,
+          close: token.type.replace(/_open$/, "_close"),
+          closeLine: closed ? end - 1 : void 0,
+          free: 0
+        });
+      }
+      continue;
+    }
+    out.push(token);
+  }
+  state.tokens = out;
+}
+function useLineBreaks(md, mode) {
+  if (mode !== "visual") return;
+  md.set({ breaks: true });
+  md.core.ruler.push("tn_blank_lines", (state) => insertBlankLineSpacers(state));
+}
+export {
+  BLANK_LINE_CLASS,
+  BLANK_LINE_HTML,
+  insertBlankLineSpacers,
+  isSpacedContainer,
+  resolveLineBreakMode,
+  useLineBreaks
+};

package/dist/swiper/hydrate.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Client-side tab activation for `.tn-swiper` shells emitted by the SSG
+ * markdown pipeline (empty `.tn-swiper-tabs`, all slides in the wrapper).
+ * Desk also uses this after building slide DOM so both hosts share one path.
+ */
+declare function applySwiperTabsPadding(tabs: HTMLElement, hasNav: boolean): void;
+declare function createSwiperTabNav(handlers: {
+    onPrev: () => void;
+    onNext: () => void;
+}): {
+    prev: HTMLButtonElement;
+    line: HTMLSpanElement;
+    next: HTMLButtonElement;
+};
+declare function wrapSlideIndex(index: number, length: number, delta: -1 | 1): number;
+declare const SWIPER_EMPTY_TEXT = "empty swiper";
+/** 没有图片幻灯片时的壳。Desk 与站点用同一段结构。 */
+declare function emptySwiperMarkup(): string;
+/**
+ * Hydrate every `.tn-swiper` under `root` (or `document`). Idempotent:
+ * already-hydrated roots are skipped via `data-tn-swiper-ready`.
+ * When `root` itself is a `.tn-swiper`, it is included.
+ */
+declare function hydrateTnSwipers(root?: ParentNode, options?: {
+    activeIndex?: number;
+    onActivate?: (index: number) => void;
+}): number;
+
+export { SWIPER_EMPTY_TEXT, applySwiperTabsPadding, createSwiperTabNav, emptySwiperMarkup, hydrateTnSwipers, wrapSlideIndex };

package/dist/swiper/hydrate.js

@@ -0,0 +1,131 @@
+// src/swiper/hydrate.ts
+function applySwiperTabsPadding(tabs, hasNav) {
+  tabs.style.padding = hasNav ? "0 0.8rem 0 3rem" : "0 0.8rem";
+}
+function createSwiperTabNav(handlers) {
+  const prev = document.createElement("button");
+  prev.type = "button";
+  prev.className = "tn-tab-nav tn-tab-prev";
+  prev.textContent = "<";
+  prev.title = "\u4E0A\u4E00\u9875";
+  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 = "\u4E0B\u4E00\u9875";
+  next.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    handlers.onNext();
+  });
+  return { prev, line, next };
+}
+function wrapSlideIndex(index, length, delta) {
+  if (length <= 0) return 0;
+  return (index + delta + length) % length;
+}
+var SWIPER_EMPTY_TEXT = "empty swiper";
+function emptySwiperMarkup() {
+  return `<div class="tn-swiper is-empty"><div class="swiper-container"><p class="tn-swiper-empty">${SWIPER_EMPTY_TEXT}</p></div></div>`;
+}
+var READY = "tnSwiperReady";
+function hydrateTnSwipers(root = document, options) {
+  const hosts = [];
+  if (root instanceof HTMLElement && root.classList.contains("tn-swiper")) {
+    hosts.push(root);
+  }
+  hosts.push(...root.querySelectorAll(".tn-swiper"));
+  let count = 0;
+  const seen = /* @__PURE__ */ new Set();
+  for (const host of hosts) {
+    if (seen.has(host)) continue;
+    seen.add(host);
+    if (host.dataset[READY] === "true") continue;
+    if (hydrateOne(host, options)) {
+      host.dataset[READY] = "true";
+      count += 1;
+    }
+  }
+  return count;
+}
+function hydrateOne(host, options) {
+  if (host.classList.contains("is-empty")) return true;
+  const tabs = host.querySelector(".tn-swiper-tabs");
+  const wrapper = host.querySelector(".swiper-wrapper");
+  if (!wrapper) return false;
+  const slides = [...wrapper.querySelectorAll(":scope > .swiper-slide")];
+  if (slides.length === 0) {
+    return true;
+  }
+  let tabsEl = tabs;
+  if (!tabsEl) {
+    tabsEl = document.createElement("div");
+    tabsEl.className = "tn-swiper-tabs";
+    host.prepend(tabsEl);
+  }
+  const useTabs = slides.length > 1;
+  tabsEl.replaceChildren();
+  applySwiperTabsPadding(tabsEl, useTabs);
+  const tabButtons = [];
+  const activate = (index) => {
+    tabButtons.forEach(
+      (button, buttonIndex) => button.classList.toggle("active", buttonIndex === index)
+    );
+    slides.forEach((slide, slideIndex) => {
+      const on = slideIndex === index;
+      slide.classList.toggle("is-active", on);
+      slide.hidden = !on;
+    });
+    options?.onActivate?.(index);
+  };
+  const activeIndex = () => {
+    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);
+    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);
+    if (tabsEl.parentElement !== host || host.firstElementChild !== tabsEl) {
+      host.prepend(tabsEl);
+    }
+  } else {
+    tabsEl.remove();
+  }
+  const start = Math.min(
+    Math.max(0, options?.activeIndex ?? 0),
+    Math.max(0, slides.length - 1)
+  );
+  activate(start);
+  return true;
+}
+export {
+  SWIPER_EMPTY_TEXT,
+  applySwiperTabsPadding,
+  createSwiperTabNav,
+  emptySwiperMarkup,
+  hydrateTnSwipers,
+  wrapSlideIndex
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/ui",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Shared Vue UI for TNotes built-in blocks — consumed by the TNotes SSG and Desk.",
   "type": "module",
   "exports": {
@@ -27,12 +27,19 @@
       "import": "./src/markdown/image.ts",
       "default": "./src/markdown/image.ts"
     },
+    "./line-breaks": {
+      "types": "./src/markdown/lineBreaks.ts",
+      "node": "./dist/markdown/lineBreaks.js",
+      "import": "./src/markdown/lineBreaks.ts",
+      "default": "./src/markdown/lineBreaks.ts"
+    },
     "./styles/tokens.css": "./src/styles/tokens.css",
     "./styles/prose.css": "./src/styles/prose.css",
     "./styles/code.css": "./src/styles/code.css",
     "./styles/swiper.css": "./src/styles/swiper.css",
     "./swiper": {
       "types": "./src/swiper/hydrate.ts",
+      "node": "./dist/swiper/hydrate.js",
       "import": "./src/swiper/hydrate.ts",
       "default": "./src/swiper/hydrate.ts"
     },
@@ -43,6 +50,7 @@
     },
     "./code-block": "./src/components/CodeBlock/CodeBlock.vue",
     "./code-group": "./src/components/CodeGroup/CodeGroup.vue",
+    "./alerts": "./src/alerts/icons.ts",
     "./badge": "./src/components/Badge/Badge.vue",
     "./image-preview": "./src/components/ImagePreview/ImagePreview.vue",
     "./bilibili-video": "./src/entries/bilibili-video.ts",
@@ -81,24 +89,24 @@
     "mermaid": "^11.17.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "sass": "^1.90.0",
-    "shiki": "4.4.2",
-    "@tnotesjs/mindmap-core": "^0.2.4"
+    "sass": "^1.107.1",
+    "shiki": "4.6.0",
+    "@tnotesjs/mindmap-core": "^0.2.5"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-vue": "^6.0.8",
-    "eslint": "^10.8.1",
-    "eslint-plugin-vue": "^10.10.0",
-    "globals": "^17.11.0",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "eslint": "^10.14.0",
+    "eslint-plugin-vue": "^10.12.0",
+    "globals": "^17.14.0",
     "happy-dom": "^20.12.0",
     "tsup": "8.5.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.67.0",
+    "typescript-eslint": "^8.72.1",
     "vitest": "^4.1.11",
-    "vue": "^3.5.25",
+    "vue": "^3.5.44",
     "vue-eslint-parser": "^10.4.1"
   },
   "engines": {
@@ -126,7 +134,7 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "tsup src/code/highlight.ts src/components/Footprints/parse.ts src/components/Mindmap/markdown.ts src/markdown/image.ts --format esm --dts --out-dir dist --clean",
+    "build": "tsup src/code/highlight.ts src/components/Footprints/parse.ts src/components/Mindmap/markdown.ts src/markdown/image.ts src/markdown/lineBreaks.ts src/swiper/hydrate.ts --format esm --dts --out-dir dist --clean",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "vitest run",
     "lint": "eslint . --max-warnings=0",

package/src/alerts/icons.ts

@@ -0,0 +1,32 @@
+/** GitHub Alerts 风格的容器图标。`currentColor`，颜色由侧边色条同一变量决定。 */
+export const ALERT_TYPES = ['tip', 'info', 'warning', 'danger', 'details'] as const
+
+export type AlertType = (typeof ALERT_TYPES)[number]
+
+const PATHS: Record<AlertType, string> = {
+  tip: '<path fill="currentColor" d="M8 1.5a4.5 4.5 0 0 0-2.6 8.17c.3.22.5.5.55.84l.2 1.24h3.7l.2-1.24c.05-.34.25-.62.55-.84A4.5 4.5 0 0 0 8 1.5Zm1.9 11.25H6.1l.15.9c.05.3.3.5.6.5h1.5c.3 0 .55-.2.6-.5l.15-.9ZM8 0a6 6 0 0 1 3.5 10.87l-.35 2.1A2.1 2.1 0 0 1 9.1 15H6.9a2.1 2.1 0 0 1-2.05-1.53l-.35-2.1A6 6 0 0 1 8 0Z"/>',
+  info: '<path fill="currentColor" d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-3.25a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-1.5 0V5.5A.75.75 0 0 1 8 4.75ZM7.25 7.5a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-1.5 0v-4Z"/>',
+  warning:
+    '<path fill="currentColor" d="M6.46 1.96a1.8 1.8 0 0 1 3.08 0l5.9 9.92A1.8 1.8 0 0 1 13.9 14.5H2.1a1.8 1.8 0 0 1-1.54-2.62l5.9-9.92ZM8 3.15 2.1 13h11.8L8 3.15Zm-.75 3.6a.75.75 0 0 1 1.5 0v2.5a.75.75 0 0 1-1.5 0V6.75Zm.75 5.5a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8Z"/>',
+  danger:
+    '<path fill="currentColor" d="M8 0 15.5 4.3v7.4L8 16 0.5 11.7V4.3L8 0Zm0 1.7L1.9 5.1v5.8L8 14.3l6.1-3.4V5.1L8 1.7ZM7.25 4.75a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0v-3.5Zm.75 6.5a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8Z"/>',
+  details:
+    '<path fill="currentColor" d="M2 3.75A.75.75 0 0 1 2.75 3h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 3.75ZM2 8a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 8Zm.75 3.5h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5Z"/>'
+}
+
+export function isAlertType(name: string): name is AlertType {
+  return (ALERT_TYPES as readonly string[]).includes(name)
+}
+
+export function alertIcon(name: string): string {
+  const type = isAlertType(name) ? name : 'info'
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">${PATHS[type]}</svg>`
+}
+
+export const ALERT_LABELS: Record<AlertType, string> = {
+  tip: '提示',
+  info: '信息',
+  warning: '警告',
+  danger: '错误',
+  details: '详情'
+}

package/src/browser/fullscreenLayer.ts

@@ -0,0 +1,16 @@
+/**
+ * CSS 全屏层的文档级标记。
+ *
+ * 全屏层（mindmap / mermaid / Desk 代码块）往往嵌在编辑器的层叠上下文里，z-index
+ * 盖不过应用壳。宿主据 `body[data-tn-fullscreen]` 隐藏壳层，再用
+ * `[data-tn-fullscreen-layer]` 把全屏层本身显示回来；DOM 不搬家，编辑器 widget 不会重建。
+ */
+export function setFullscreenLayer(el: HTMLElement | null | undefined, on: boolean): void {
+  if (typeof document === 'undefined') return
+  if (el) {
+    if (on) el.dataset.tnFullscreenLayer = ''
+    else delete el.dataset.tnFullscreenLayer
+  }
+  if (document.querySelector('[data-tn-fullscreen-layer]')) document.body.dataset.tnFullscreen = ''
+  else delete document.body.dataset.tnFullscreen
+}