@tnotesjs/ui 0.1.0 → 0.1.2

package/src/components/Mermaid/Mermaid.vue

@@ -1,5 +1,9 @@
 <template>
-  <div ref="rootRef" class="tn-mermaid" :class="{ 'is-centered': centered }">
+  <div
+    ref="rootRef"
+    class="tn-mermaid"
+    :class="{ 'is-centered': centered, 'is-fullscreen': isFullscreen }"
+  >
     <div
       v-if="showActions"
       class="tn-mermaid__actions"
@@ -51,7 +55,6 @@
 
     <div
       class="tn-mermaid__stage"
-      :class="{ 'is-fullscreen': isFullscreen }"
       @mousedown="startDrag"
       @mousemove="onDrag"
       @mouseup="endDrag"
@@ -61,7 +64,7 @@
       <div
         ref="diagramRef"
         class="tn-mermaid__diagram"
-        :class="{ 'is-centered': centered, 'is-obscured': loading || empty || !!error }"
+        :class="{ 'is-centered': centered, 'is-obscured': empty || !!error }"
         :style="diagramTransform ? { transform: diagramTransform, transformOrigin: 'top left' } : undefined"
         @wheel="handleWheel"
       />
@@ -83,6 +86,7 @@
 import mermaid from 'mermaid'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import { adoptLiveSvg } from './adoptLiveSvg'
 import iconCenterOff from './icons/icon__center_off.svg?url'
 import iconCenterOn from './icons/icon__center_on.svg?url'
 import iconCheck from './icons/icon__check.svg?url'
@@ -92,6 +96,56 @@ import iconFullscreenExit from './icons/icon__fullscreen_exit.svg?url'
 
 let idSeq = 0
 
+/** Mermaid's renderer is not safe for overlapping `render()` calls. */
+let renderChain = Promise.resolve()
+/** Re-init wipes layout engines mid-flight when several diagrams mount at once. */
+let initializedKey = null
+
+function enqueueRender(task) {
+  const run = renderChain.then(task, task)
+  renderChain = run.then(
+    () => undefined,
+    () => undefined
+  )
+  return run
+}
+
+function ensureMermaidInitialized(dark, securityLevel) {
+  const key = `${dark ? 'dark' : 'light'}:${securityLevel}`
+  if (initializedKey === key) return
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: dark ? 'dark' : 'default',
+    securityLevel,
+    fontFamily: 'inherit'
+  })
+  initializedKey = key
+}
+
+function waitForLayoutBox(el) {
+  if (!el || el.clientWidth > 0) return Promise.resolve()
+  return new Promise((resolve) => {
+    let settled = false
+    const finish = () => {
+      if (settled) return
+      settled = true
+      observer?.disconnect()
+      resolve()
+    }
+    const observer =
+      typeof ResizeObserver === 'function'
+        ? new ResizeObserver(() => {
+            if (el.clientWidth > 0) finish()
+          })
+        : null
+    observer?.observe(el)
+    requestAnimationFrame(() => {
+      if (el.clientWidth > 0) finish()
+    })
+    setTimeout(finish, 1200)
+  })
+}
+
 const props = defineProps({
   /** Plain Mermaid source (preferred). */
   source: {
@@ -179,7 +233,9 @@ function toggleCenter() {
 
 function detectDark() {
   if (typeof props.isDark === 'boolean') return props.isDark
+  if (typeof document === 'undefined') return false
   const root = document.documentElement
+  if (root.dataset.theme === 'light') return false
   return root.classList.contains('dark') || root.dataset.theme === 'dark'
 }
 
@@ -194,23 +250,47 @@ const copyTitle = computed(() => {
   return '复制源码'
 })
 let copyResetTimer = null
+/** How fullscreen was entered — Electron usually needs the CSS overlay path. */
+let fullscreenMode = null
+
+/** Sync write that survives Electron's missing clipboard permission. */
+function writeTextFallback(text) {
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+  textarea.setAttribute('readonly', '')
+  textarea.style.position = 'fixed'
+  textarea.style.left = '-9999px'
+  textarea.style.opacity = '0'
+  document.body.append(textarea)
+  textarea.select()
+  let ok = false
+  try {
+    ok = document.execCommand('copy')
+  } catch {
+    ok = false
+  }
+  textarea.remove()
+  return ok
+}
 
-function copySource() {
+async function copySource() {
   const text = decodedSource.value
-  navigator.clipboard
-    .writeText(text)
-    .then(() => {
-      copyState.value = 'copied'
-    })
-    .catch(() => {
-      copyState.value = 'failed'
-    })
-    .finally(() => {
-      if (copyResetTimer) clearTimeout(copyResetTimer)
-      copyResetTimer = setTimeout(() => {
-        copyState.value = 'idle'
-      }, COPY_RESET_DELAY)
-    })
+  let ok = false
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text)
+      ok = true
+    } catch {
+      // Electron can expose Clipboard without granting the renderer's async
+      // Clipboard permission. Fall through to the synchronous user-gesture path.
+    }
+  }
+  if (!ok) ok = writeTextFallback(text)
+  copyState.value = ok ? 'copied' : 'failed'
+  if (copyResetTimer) clearTimeout(copyResetTimer)
+  copyResetTimer = setTimeout(() => {
+    copyState.value = 'idle'
+  }, COPY_RESET_DELAY)
 }
 
 const scale = ref(1)
@@ -257,21 +337,70 @@ function handleWheel(e) {
   scale.value = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale.value + delta))
 }
 
-function toggleFullscreen() {
-  if (!rootRef.value) return
-  if (!isFullscreen.value) {
-    rootRef.value.requestFullscreen?.()
-  } else {
-    document.exitFullscreen?.()
+function resetPanZoom() {
+  scale.value = 1
+  panX.value = 0
+  panY.value = 0
+}
+
+function exitFullscreenOverlay() {
+  if (!isFullscreen.value && fullscreenMode == null) return
+  const root = rootRef.value
+  if (fullscreenMode === 'native' && root && document.fullscreenElement === root) {
+    void document.exitFullscreen().catch(() => {
+      /* ignore */
+    })
+  }
+  fullscreenMode = null
+  isFullscreen.value = false
+  resetPanZoom()
+}
+
+async function toggleFullscreen() {
+  const root = rootRef.value
+  if (!root) return
+
+  if (isFullscreen.value) {
+    exitFullscreenOverlay()
+    return
+  }
+
+  // CSS overlay first — Electron often rejects/hangs on requestFullscreen.
+  fullscreenMode = 'css'
+  isFullscreen.value = true
+
+  // Best-effort native fullscreen for browser / VitePress (non-blocking).
+  if (!document.fullscreenEnabled || typeof root.requestFullscreen !== 'function') return
+  if (/Electron/i.test(navigator.userAgent)) return
+  try {
+    await Promise.race([
+      root.requestFullscreen(),
+      new Promise((_, reject) => {
+        window.setTimeout(() => reject(new Error('fullscreen-timeout')), 500)
+      })
+    ])
+    if (document.fullscreenElement === root) fullscreenMode = 'native'
+  } catch {
+    /* keep CSS overlay */
   }
 }
 
 function handleFullscreenChange() {
-  isFullscreen.value = !!document.fullscreenElement
-  if (!isFullscreen.value) {
-    scale.value = 1
-    panX.value = 0
-    panY.value = 0
+  const root = rootRef.value
+  if (root && document.fullscreenElement === root) {
+    fullscreenMode = 'native'
+    isFullscreen.value = true
+  } else if (fullscreenMode === 'native') {
+    fullscreenMode = null
+    isFullscreen.value = false
+    resetPanZoom()
+  }
+}
+
+function handleDocumentKeydown(event) {
+  if (event.key === 'Escape' && isFullscreen.value && fullscreenMode === 'css') {
+    event.preventDefault()
+    exitFullscreenOverlay()
   }
 }
 
@@ -290,22 +419,25 @@ async function renderDiagram() {
   const dark = detectDark()
   lastThemeDark = dark
 
+  loading.value = true
+  error.value = null
+
   try {
-    loading.value = true
-    error.value = null
-    mermaid.initialize({
-      startOnLoad: false,
-      theme: dark ? 'dark' : 'default',
-      securityLevel: props.securityLevel,
-      fontFamily: 'inherit'
-    })
-    // Mermaid requires a unique DOM id per render; reusing the same id on
-    // theme re-render (common on hard refresh) clears/fails the second pass.
-    const renderId = `${idPrefix}-${++idSeq}`
-    const { svg, bindFunctions } = await mermaid.render(renderId, decodedSource.value)
+    await waitForLayoutBox(rootRef.value || diagramRef.value)
     if (token !== renderToken || !diagramRef.value) return
-    diagramRef.value.innerHTML = svg
-    if (bindFunctions) bindFunctions(diagramRef.value)
+
+    await enqueueRender(async () => {
+      if (token !== renderToken || !diagramRef.value) return
+      ensureMermaidInitialized(dark, props.securityLevel)
+      // Unique render id (mermaid deletes getElementById(id) before the next
+      // draw). After insert, adoptLiveSvg renames the root so a later render
+      // cannot yank this live SVG out of Desk.
+      const renderId = `${idPrefix}-${++idSeq}`
+      const { svg, bindFunctions } = await mermaid.render(renderId, decodedSource.value)
+      if (token !== renderToken || !diagramRef.value) return
+      diagramRef.value.innerHTML = adoptLiveSvg(svg, renderId)
+      if (bindFunctions) bindFunctions(diagramRef.value)
+    })
   } catch (err) {
     if (token !== renderToken) return
     const message = err instanceof Error ? err.message : String(err)
@@ -330,17 +462,35 @@ function observeTheme() {
 }
 
 let themeObserver = null
+let layoutObserver = null
 
 onMounted(() => {
   void renderDiagram()
   themeObserver = observeTheme()
   document.addEventListener('fullscreenchange', handleFullscreenChange)
+  document.addEventListener('keydown', handleDocumentKeydown, true)
+
+  // Desk NodeViews often mount at width 0. Wait once for a real box — do not
+  // re-render on later width flicker (that cancels in-flight mermaid.render).
+  const root = rootRef.value
+  if (root && root.clientWidth === 0 && typeof ResizeObserver === 'function') {
+    layoutObserver = new ResizeObserver(() => {
+      if (root.clientWidth <= 0) return
+      layoutObserver?.disconnect()
+      layoutObserver = null
+      void renderDiagram()
+    })
+    layoutObserver.observe(root)
+  }
 })
 
 onBeforeUnmount(() => {
   themeObserver?.disconnect()
+  layoutObserver?.disconnect()
   document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  document.removeEventListener('keydown', handleDocumentKeydown, true)
   if (copyResetTimer) clearTimeout(copyResetTimer)
+  if (isFullscreen.value) exitFullscreenOverlay()
 })
 
 watch(
@@ -362,13 +512,23 @@ watch(
   overflow: hidden;
   color: var(--tn-c-text);
   transition: border-color 0.2s ease;
+
+  &.is-fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    margin: 0;
+    border-radius: 0;
+    border-color: var(--tn-c-divider);
+  }
 }
 
 .tn-mermaid:hover,
 .tn-mermaid:has(.tn-mermaid__actions:hover),
 .tn-mermaid:has(.tn-mermaid__actions:focus-within),
 .tn-mermaid:has(.tn-mermaid__actions[data-copy-state='copied']),
-.tn-mermaid:has(.tn-mermaid__actions[data-copy-state='failed']) {
+.tn-mermaid:has(.tn-mermaid__actions[data-copy-state='failed']),
+.tn-mermaid.is-fullscreen {
   border-color: var(--tn-c-divider);
 }
 
@@ -392,7 +552,8 @@ watch(
 .tn-mermaid__actions:hover,
 .tn-mermaid__actions:focus-within,
 .tn-mermaid__actions[data-copy-state='copied'],
-.tn-mermaid__actions[data-copy-state='failed'] {
+.tn-mermaid__actions[data-copy-state='failed'],
+.tn-mermaid.is-fullscreen .tn-mermaid__actions {
   opacity: 1;
 }
 
@@ -473,22 +634,34 @@ watch(
   min-height: 160px;
   padding: 20px;
   background: transparent;
+}
 
-  &.is-fullscreen {
-    position: fixed;
-    inset: 0;
-    z-index: 9999;
-    padding: 40px;
-    overflow: hidden;
-    cursor: grab;
-    background: var(--tn-c-bg);
+.tn-mermaid.is-fullscreen .tn-mermaid__stage {
+  min-height: 100%;
+  height: 100%;
+  padding: 40px;
+  overflow: hidden;
+  cursor: grab;
+  background: var(--tn-c-bg);
 
-    &:active {
-      cursor: grabbing;
-    }
+  &:active {
+    cursor: grabbing;
   }
 }
 
+.tn-mermaid.is-fullscreen.is-centered .tn-mermaid__stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tn-mermaid.is-fullscreen.is-centered .tn-mermaid__diagram {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
 .tn-mermaid__status {
   position: absolute;
   inset: 0;

package/src/components/Mermaid/adoptLiveSvg.test.ts

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

package/src/components/Mermaid/adoptLiveSvg.ts

@@ -0,0 +1,15 @@
+/**
+ * Mermaid's next `render(id)` deletes `document.getElementById(id)` (and
+ * `d${id}` / `i${id}` temps). Keep the theme CSS (`#id …`) working by renaming
+ * only the root svg id after we take ownership of the markup.
+ */
+export function adoptLiveSvg(svg: string, renderId: string): string {
+  if (!renderId || !svg.includes(renderId)) return svg
+  const liveId = `${renderId}-live`
+  const withRootId = svg.replace(/(<svg\b[^>]*?)\sid="([^"]*)"/i, (full, prefix, id) =>
+    id === renderId ? `${prefix} id="${liveId}"` : full
+  )
+  const escaped = renderId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  // `#tn-mermaid-1{` / `#tn-mermaid-1 .node` — not `#tn-mermaid-1_flowchart-…`
+  return withRootId.replace(new RegExp(`#${escaped}(?![\\w-])`, 'g'), `#${liveId}`)
+}

package/src/components/Mindmap/Mindmap.vue

@@ -112,7 +112,9 @@ const emit = defineEmits<{
 
 function detectDark(): boolean {
   if (typeof props.isDark === 'boolean') return props.isDark
+  if (typeof document === 'undefined') return false
   const root = document.documentElement
+  if (root.dataset.theme === 'light') return false
   return root.classList.contains('dark') || root.dataset.theme === 'dark'
 }
 

package/src/components/sharedMedia.test.ts

@@ -0,0 +1,139 @@
+// @vitest-environment happy-dom
+
+import { createApp, defineComponent, h, nextTick, type Component } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import CodeBlock from "./CodeBlock/CodeBlock.vue";
+import CodeGroup from "./CodeGroup/CodeGroup.vue";
+import ImagePreview from "./ImagePreview/ImagePreview.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 = "";
+  document.documentElement.style.overflow = "";
+  vi.restoreAllMocks();
+});
+
+describe("shared code and media components", () => {
+  it("copies raw code and closes its fullscreen dialog with Escape", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText },
+    });
+    const host = mount(CodeBlock, {
+      code: "const value = 1\n",
+      info: "ts [demo.ts]",
+      highlightedHtml: '<pre class="tn-code-highlight"><code>ok</code></pre>',
+    });
+
+    const buttons = host.querySelectorAll<HTMLButtonElement>("button");
+    buttons[0].click();
+    await nextTick();
+    expect(writeText).toHaveBeenCalledWith("const value = 1");
+
+    buttons[1].click();
+    await nextTick();
+    expect(document.body.querySelector('[role="dialog"]')).not.toBeNull();
+    document.body
+      .querySelector<HTMLElement>('[role="dialog"]')!
+      .dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+      );
+    await nextTick();
+    expect(document.body.querySelector('[role="dialog"]')).toBeNull();
+  });
+
+  it("switches code-group tabs with click and arrow keys", async () => {
+    const host = mount(CodeGroup, {
+      items: [
+        { code: "one", info: "text [one.txt]" },
+        { code: "two", info: "text [two.txt]" },
+      ],
+    });
+    const tabs = host.querySelectorAll<HTMLButtonElement>('[role="tab"]');
+    tabs[0].dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }),
+    );
+    await nextTick();
+    await nextTick();
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(
+      host.querySelectorAll<HTMLElement>('[role="tabpanel"]')[1].hidden,
+    ).toBe(false);
+  });
+
+  it("previews prose images, navigates, and restores document overflow", async () => {
+    const prose = document.createElement("div");
+    prose.className = "tn-prose";
+    prose.innerHTML = '<img src="/one.png"><img src="/two.png">';
+    document.body.append(prose);
+    cleanups.push(() => prose.remove());
+    mount(ImagePreview);
+
+    prose.querySelector<HTMLImageElement>("img")!.click();
+    await nextTick();
+    expect(document.documentElement.style.overflow).toBe("hidden");
+    expect(
+      document.body.querySelector<HTMLImageElement>(".tn-image-preview > img")
+        ?.src,
+    ).toContain("/one.png");
+    document.body
+      .querySelector<HTMLButtonElement>('[aria-label="下一张"]')!
+      .click();
+    await nextTick();
+    expect(
+      document.body.querySelector<HTMLImageElement>(".tn-image-preview > img")
+        ?.src,
+    ).toContain("/two.png");
+    document.body
+      .querySelector<HTMLButtonElement>('[aria-label="关闭"]')!
+      .click();
+    await nextTick();
+    expect(document.documentElement.style.overflow).toBe("");
+  });
+
+  it("opens from a programmatic preview request", async () => {
+    const prose = document.createElement("div");
+    prose.className = "tn-prose tn-preview-ignore";
+    prose.innerHTML = '<img src="/requested.png">';
+    document.body.append(prose);
+    cleanups.push(() => prose.remove());
+    mount(ImagePreview);
+
+    document.dispatchEvent(
+      new CustomEvent("tn:preview-image", {
+        detail: prose.querySelector("img"),
+      }),
+    );
+    await nextTick();
+    expect(
+      document.body.querySelector<HTMLImageElement>(".tn-image-preview > img")
+        ?.src,
+    ).toContain("/requested.png");
+    document.body
+      .querySelector<HTMLButtonElement>('[aria-label="关闭"]')!
+      .click();
+    await nextTick();
+  });
+});

package/src/entries/bilibili-video.ts

@@ -0,0 +1 @@
+export { default } from "../components/BilibiliVideo/BilibiliVideo.vue";

package/src/entries/footprints.ts

@@ -0,0 +1 @@
+export { default } from "../components/Footprints/Footprints.vue";

package/src/entries/mermaid.ts

@@ -0,0 +1 @@
+export { default } from "../components/Mermaid/Mermaid.vue";

package/src/entries/mindmap.ts

@@ -0,0 +1 @@
+export { default } from "../components/Mindmap/Mindmap.vue";

package/src/entries/notes-table.ts

@@ -0,0 +1,2 @@
+export { default } from "../components/NotesTable/NotesTable.vue";
+export type { NotesTableRow } from "../components/NotesTable/types";

package/src/entries/word-list.ts

@@ -0,0 +1 @@
+export { default } from "../components/WordList/WordList.vue";

package/src/icons/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg>

package/src/icons/copy.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+</svg>

package/src/index.ts

@@ -1,30 +1,43 @@
-export { default as BilibiliVideo } from './components/BilibiliVideo/BilibiliVideo.vue'
-export { default as WordList } from './components/WordList/WordList.vue'
-export { default as Mermaid } from './components/Mermaid/Mermaid.vue'
-export { default as Mindmap } from './components/Mindmap/Mindmap.vue'
-export { default as FocusBreadcrumbs } from './components/Mindmap/FocusBreadcrumbs.vue'
-export { default as NotesTable } from './components/NotesTable/NotesTable.vue'
-export { default as Footprints } from './components/Footprints/Footprints.vue'
+export { default as BilibiliVideo } from "./components/BilibiliVideo/BilibiliVideo.vue";
+export { default as WordList } from "./components/WordList/WordList.vue";
+export { default as Mermaid } from "./components/Mermaid/Mermaid.vue";
+export { default as Mindmap } from "./components/Mindmap/Mindmap.vue";
+export { default as FocusBreadcrumbs } from "./components/Mindmap/FocusBreadcrumbs.vue";
+export { default as NotesTable } from "./components/NotesTable/NotesTable.vue";
+export { default as Footprints } from "./components/Footprints/Footprints.vue";
 export {
   WORD_LIST_FEATURES_FULL,
   WORD_LIST_FEATURES_STATIC,
-  resolveWordListFeatures
-} from './components/WordList/wordListFeatures'
-export type { WordListFeatures } from './components/WordList/wordListFeatures'
+  resolveWordListFeatures,
+} from "./components/WordList/wordListFeatures";
+export type { WordListFeatures } from "./components/WordList/wordListFeatures";
 export {
   normalizeMindmapMarkdown,
   parseMindmapFence,
-  parseMindmapReference
-} from './components/Mindmap/markdown'
+  parseMindmapReference,
+} from "./components/Mindmap/markdown";
 export type {
   MindmapFenceOptions,
   MindmapReference,
-  NormalizeMindmapOptions
-} from './components/Mindmap/markdown'
-export type { NotesTableRow } from './components/NotesTable/types'
+  NormalizeMindmapOptions,
+} from "./components/Mindmap/markdown";
+export type { NotesTableRow } from "./components/NotesTable/types";
 export {
   parseFootprintsSource,
   rebuildFootprintsSource,
-  parseFootprintsDatetime
-} from './components/Footprints/parse'
-export type { FootprintsPayload } from './components/Footprints/parse'
+  parseFootprintsDatetime,
+} from "./components/Footprints/parse";
+export type { FootprintsPayload } from "./components/Footprints/parse";
+export { default as Badge } from "./components/Badge/Badge.vue";
+export { default as CodeBlock } from "./components/CodeBlock/CodeBlock.vue";
+export { default as CodeGroup } from "./components/CodeGroup/CodeGroup.vue";
+export { default as ImagePreview } from "./components/ImagePreview/ImagePreview.vue";
+export * from "./browser/clipboard";
+export * from "./browser/theme";
+export * from "./code/highlight";
+export {
+  hydrateTnSwipers,
+  applySwiperTabsPadding,
+  createSwiperTabNav,
+  wrapSlideIndex,
+} from "./swiper/hydrate";