@tnotesjs/ui 0.4.2 → 0.4.4

package/dist/alerts/icons.d.ts

@@ -0,0 +1,8 @@
+/** GitHub Alerts 风格的容器图标。`currentColor`，颜色由侧边色条同一变量决定。 */
+declare const ALERT_TYPES: readonly ["tip", "info", "warning", "danger", "details"];
+type AlertType = (typeof ALERT_TYPES)[number];
+declare function isAlertType(name: string): name is AlertType;
+declare function alertIcon(name: string): string;
+declare const ALERT_LABELS: Record<AlertType, string>;
+
+export { ALERT_LABELS, ALERT_TYPES, type AlertType, alertIcon, isAlertType };

package/dist/alerts/icons.js

@@ -0,0 +1,29 @@
+// src/alerts/icons.ts
+var ALERT_TYPES = ["tip", "info", "warning", "danger", "details"];
+var PATHS = {
+  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"/>'
+};
+function isAlertType(name) {
+  return ALERT_TYPES.includes(name);
+}
+function alertIcon(name) {
+  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>`;
+}
+var ALERT_LABELS = {
+  tip: "\u63D0\u793A",
+  info: "\u4FE1\u606F",
+  warning: "\u8B66\u544A",
+  danger: "\u9519\u8BEF",
+  details: "\u8BE6\u60C5"
+};
+export {
+  ALERT_LABELS,
+  ALERT_TYPES,
+  alertIcon,
+  isAlertType
+};

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

@@ -21,6 +21,9 @@ declare function emptySwiperMarkup(): string;
  * 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): number;
+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

@@ -37,7 +37,7 @@ 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) {
+function hydrateTnSwipers(root = document, options) {
   const hosts = [];
   if (root instanceof HTMLElement && root.classList.contains("tn-swiper")) {
     hosts.push(root);
@@ -49,14 +49,14 @@ function hydrateTnSwipers(root = document) {
     if (seen.has(host)) continue;
     seen.add(host);
     if (host.dataset[READY] === "true") continue;
-    if (hydrateOne(host)) {
+    if (hydrateOne(host, options)) {
       host.dataset[READY] = "true";
       count += 1;
     }
   }
   return count;
 }
-function hydrateOne(host) {
+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");
@@ -84,6 +84,7 @@ function hydrateOne(host) {
       slide.classList.toggle("is-active", on);
       slide.hidden = !on;
     });
+    options?.onActivate?.(index);
   };
   const activeIndex = () => {
     const found = tabButtons.findIndex((button) => button.classList.contains("active"));
@@ -113,7 +114,11 @@ function hydrateOne(host) {
   } else {
     tabsEl.remove();
   }
-  activate(0);
+  const start = Math.min(
+    Math.max(0, options?.activeIndex ?? 0),
+    Math.max(0, slides.length - 1)
+  );
+  activate(start);
   return true;
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/ui",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Shared Vue UI for TNotes built-in blocks — consumed by the TNotes SSG and Desk.",
   "type": "module",
   "exports": {
@@ -27,6 +27,12 @@
       "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",
@@ -44,6 +50,12 @@
     },
     "./code-block": "./src/components/CodeBlock/CodeBlock.vue",
     "./code-group": "./src/components/CodeGroup/CodeGroup.vue",
+    "./alerts": {
+      "types": "./src/alerts/icons.ts",
+      "node": "./dist/alerts/icons.js",
+      "import": "./src/alerts/icons.ts",
+      "default": "./src/alerts/icons.ts"
+    },
     "./badge": "./src/components/Badge/Badge.vue",
     "./image-preview": "./src/components/ImagePreview/ImagePreview.vue",
     "./bilibili-video": "./src/entries/bilibili-video.ts",
@@ -82,24 +94,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": {
@@ -127,7 +139,7 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "tsup src/code/highlight.ts src/components/Footprints/parse.ts src/components/Mindmap/markdown.ts src/markdown/image.ts src/swiper/hydrate.ts --format esm --dts --out-dir dist --clean",
+    "build": "tsup src/alerts/icons.ts 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
+}