@tnotesjs/ui 0.1.4 → 0.2.0

package/src/components/WordList/RightClickMenu.vue

@@ -1,33 +1,15 @@
 <template>
-  <div
-    v-if="show"
-    class="rightClickMenu"
-    :style="{ left: x + 'px', top: y + 'px' }"
-  >
+  <div v-if="show" class="rightClickMenu" :style="{ left: x + 'px', top: y + 'px' }">
     <div v-if="showPin" class="menuItem" @click="handlePin">📌 Pin</div>
-    <div class="menuItem" @click="(e) => handlePronounce(e, 'en-GB')">
-      📢 Pronounce（英）
-    </div>
-    <div class="menuItem" @click="(e) => handlePronounce(e, 'en-US')">
-      📢 Pronounce（美）
-    </div>
-    <div
-      class="menuItem"
-      @click="(e) => handlePronounceAll(e, 'en-GB')"
-    >
+    <div class="menuItem" @click="(e) => handlePronounce(e, 'en-GB')">📢 Pronounce（英）</div>
+    <div class="menuItem" @click="(e) => handlePronounce(e, 'en-US')">📢 Pronounce（美）</div>
+    <div class="menuItem" @click="(e) => handlePronounceAll(e, 'en-GB')">
       📢 Pronounce All（英）
     </div>
-    <div
-      class="menuItem"
-      @click="(e) => handlePronounceAll(e, 'en-US')"
-    >
+    <div class="menuItem" @click="(e) => handlePronounceAll(e, 'en-US')">
       📢 Pronounce All（美）
     </div>
-    <div
-      v-if="showAutoShowCard"
-      class="menuItem"
-      @click="handleAutoShowCard"
-    >
+    <div v-if="showAutoShowCard" class="menuItem" @click="handleAutoShowCard">
       🔍 Auto Show Card（{{ isAutoShowCard ? '关' : '开' }}）
     </div>
     <div class="menuItem" @click="handleCheckAll">✅ Check All</div>
@@ -43,22 +25,15 @@ defineProps({
   y: Number,
   showPin: {
     type: Boolean,
-    default: true,
+    default: true
   },
   showAutoShowCard: {
     type: Boolean,
-    default: true,
-  },
+    default: true
+  }
 })
 
-const emit = defineEmits([
-  'pin',
-  'pronounce',
-  'pronounceAll',
-  'autoShowCard',
-  'checkAll',
-  'reset',
-])
+const emit = defineEmits(['pin', 'pronounce', 'pronounceAll', 'autoShowCard', 'checkAll', 'reset'])
 const handlePin = (e) => {
   emit('pin')
   e.preventDefault()

package/src/components/WordList/WordList.vue

@@ -3,10 +3,7 @@ import { marked } from 'marked'
 import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue'
 
 import RightClickMenu from './RightClickMenu.vue'
-import {
-  WORD_LIST_FEATURES_FULL,
-  resolveWordListFeatures
-} from './wordListFeatures'
+import { WORD_LIST_FEATURES_FULL, resolveWordListFeatures } from './wordListFeatures'
 
 const DEFAULT_WORDS_BASE_URL = 'https://github.com/tnotesjs/en-words/blob/main/'
 const DEFAULT_WORDS_RAW_BASE_URL =
@@ -15,34 +12,32 @@ const DEFAULT_WORDS_RAW_BASE_URL =
 const props = defineProps({
   words: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   needSort: {
     type: Boolean,
-    default: false,
+    default: false
   },
   wordsBaseUrl: {
     type: String,
-    default: DEFAULT_WORDS_BASE_URL,
+    default: DEFAULT_WORDS_BASE_URL
   },
   wordsRawBaseUrl: {
     type: String,
-    default: DEFAULT_WORDS_RAW_BASE_URL,
+    default: DEFAULT_WORDS_RAW_BASE_URL
   },
   /** Capability overrides; omit for full web/core behavior. */
   features: {
     type: Object,
-    default: () => ({ ...WORD_LIST_FEATURES_FULL }),
-  },
+    default: () => ({ ...WORD_LIST_FEATURES_FULL })
+  }
 })
 
 const features = computed(() => resolveWordListFeatures(props.features))
 
 const isMobile = computed(() => {
   if (typeof navigator === 'undefined') return false
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-    navigator.userAgent
-  )
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
 })
 
 // checkbox ---------------------------------------------------
@@ -51,9 +46,7 @@ const pathname = typeof window !== 'undefined' ? window.location.pathname : ''
 const sortedWords = computed(() => {
   const unique = [...new Set(props.words ?? [])]
   if (!props.needSort) return unique
-  return unique.sort(
-    (a, b) => a.toLowerCase().charCodeAt(0) - b.toLowerCase().charCodeAt(0)
-  )
+  return unique.sort((a, b) => a.toLowerCase().charCodeAt(0) - b.toLowerCase().charCodeAt(0))
 })
 const checkedStates = ref({})
 
@@ -256,7 +249,7 @@ const pinCard = (word) => {
     content: cardContent.value,
     width: CARD_DEFAULT_WIDTH,
     height: CARD_DEFAULT_HEIGHT,
-    zIndex: topZIndex.value++,
+    zIndex: topZIndex.value++
   })
 }
 
@@ -266,7 +259,7 @@ const bringToFront = (card) => {
     pinnedCards.value = [
       ...pinnedCards.value.slice(0, index),
       ...pinnedCards.value.slice(index + 1),
-      { ...card, zIndex: topZIndex.value++ },
+      { ...card, zIndex: topZIndex.value++ }
     ]
   }
 }
@@ -315,10 +308,7 @@ const handleContextMenuPin = () => {
   if (currentWordForContextMenu) {
     const word = currentWordForContextMenu
     // 提前加载内容
-    showWordCard(
-      { clientX: contextMenuX.value, clientY: contextMenuY.value },
-      word
-    ).then(() => {
+    showWordCard({ clientX: contextMenuX.value, clientY: contextMenuY.value }, word).then(() => {
       pinCard(word)
       showCard.value = false
     })
@@ -390,10 +380,7 @@ const handlePronounceAll = (lang) => {
   isPronouncingAll.value = true
 
   const speakNext = async () => {
-    if (
-      !isPronouncingAll.value ||
-      currentPronounceAllIndex.value >= wordsToSpeak.length
-    ) {
+    if (!isPronouncingAll.value || currentPronounceAllIndex.value >= wordsToSpeak.length) {
       stopPronounceAll()
       return
     }
@@ -474,7 +461,7 @@ onUnmounted(() => {
         v-for="(word, index) in sortedWords"
         :key="word"
         :class="{
-          pronounced: isPronouncingAll && currentPronounceAllIndex === index + 1,
+          pronounced: isPronouncingAll && currentPronounceAllIndex === index + 1
         }"
       >
         <span class="index">{{ index + 1 }}.</span>
@@ -491,14 +478,9 @@ onUnmounted(() => {
             )}.md`"
             :class="{
               lineThrough: checkedStates[word],
-              textRed: failedWords[word],
+              textRed: failedWords[word]
             }"
-            @mouseenter="
-              (e) =>
-                features.enableCards &&
-                isAutoShowCard &&
-                showWordCard(e, word)
-            "
+            @mouseenter="(e) => features.enableCards && isAutoShowCard && showWordCard(e, word)"
             @mouseleave="handleMouseLeave"
             @contextmenu="(e) => showContextMenu(e, word)"
             @click.ctrl.exact="(e) => handlePronounce(word)"
@@ -528,7 +510,7 @@ onUnmounted(() => {
           top: card.y + 'px',
           width: card.width + 'px',
           height: card.height + 'px',
-          zIndex: card.zIndex,
+          zIndex: card.zIndex
         }"
         @mousedown="(e) => startDrag(card, e)"
         @click="bringToFront(card)"
@@ -536,13 +518,8 @@ onUnmounted(() => {
         <div class="wordCardContentWrapper">
           <div class="wordCardContent" v-html="card.content"></div>
         </div>
-        <button class="closeBtn" @click.stop="removeCard(card.id)">
-          ✖
-        </button>
-        <div
-          class="resizeHandle"
-          @mousedown.stop="startResize(card, $event)"
-        ></div>
+        <button class="closeBtn" @click.stop="removeCard(card.id)">✖</button>
+        <div class="resizeHandle" @mousedown.stop="startResize(card, $event)"></div>
       </div>
     </template>
   </div>

package/src/components/sharedMedia.test.ts

@@ -1,139 +1,121 @@
 // @vitest-environment happy-dom
 
-import { createApp, defineComponent, h, nextTick, type Component } from "vue";
-import { afterEach, describe, expect, it, vi } from "vitest";
+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";
+import CodeBlock from './CodeBlock/CodeBlock.vue'
+import CodeGroup from './CodeGroup/CodeGroup.vue'
+import ImagePreview from './ImagePreview/ImagePreview.vue'
 
-const cleanups: Array<() => void> = [];
+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);
+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;
+    app.unmount()
+    host.remove()
+  })
+  return host
 }
 
 afterEach(() => {
   cleanups
     .splice(0)
     .reverse()
-    .forEach((cleanup) => cleanup());
-  document.body.innerHTML = "";
-  document.documentElement.style.overflow = "";
-  vi.restoreAllMocks();
-});
+    .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", {
+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 },
-    });
+      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>',
-    });
+      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");
+    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();
+    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();
-  });
+      .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 () => {
+  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);
-  });
+        { 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);
+  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("");
-  });
+    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);
+  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();
-  });
-});
+      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

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

package/src/entries/excalidraw-editor.ts

@@ -0,0 +1,20 @@
+/**
+ * 画布编辑入口（Desk 专用；SSG 只用 excalidraw-view）。
+ *
+ * 目前导出宿主无关的编辑会话状态机；后续在同一入口补 React 编辑器宿主组件
+ * （稳定实例 + DOM 承载位置交接 + 撤销历史）。
+ */
+export { createExcalidrawSession, persistedSceneSignature } from '../excalidraw/editorSession'
+/**
+ * 编辑器宿主（React + Excalidraw 本体）通过动态 import 暴露，
+ * 保证 `excalidraw-editor` 入口本身不会把编辑器拖进静态依赖图。
+ */
+export const loadExcalidrawHost = () => import('../excalidraw/editorHost')
+export type { ExcalidrawHostHandle, MountExcalidrawHostOptions } from '../excalidraw/editorHost'
+export type {
+  ExcalidrawSaveInput,
+  ExcalidrawSaveResult,
+  ExcalidrawSession,
+  ExcalidrawSessionOptions,
+  ExcalidrawWriteState
+} from '../excalidraw/editorSession'

package/src/entries/excalidraw-view.ts

@@ -0,0 +1,15 @@
+/**
+ * 只读画布入口：Desk 笔记卡片与 SSG 站点共用同一套渲染逻辑。
+ * 导出能力（Excalidraw 本体）由渲染器内部动态 import，首屏不会引入编辑器。
+ */
+export { default as ExcalidrawSvg } from '../excalidraw/ExcalidrawSvg.vue'
+export { createExcalidrawSvgRenderer, toSvgDataUrl } from '../excalidraw/renderer'
+export type {
+  ExcalidrawSvgRenderer,
+  ExcalidrawSvgRendererOptions,
+  ExcalidrawViewState
+} from '../excalidraw/renderer'
+export { parseExcalidrawScene, sceneCacheKey, svgCache, SvgCache } from '../excalidraw/scene'
+/** 部署站点需要把官方字体指向站点内的目录（离线自包含） */
+export { setExcalidrawAssetPath, getExcalidrawAssetPath } from '../excalidraw/fonts'
+export type { ExcalidrawScene, SceneParseResult } from '../excalidraw/scene'

package/src/entries/footprints.ts

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

package/src/entries/mermaid.ts

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

package/src/entries/mindmap.ts

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

package/src/entries/notes-table.ts

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

package/src/entries/word-list.ts

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

package/src/excalidraw/ExcalidrawSvg.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * 共享只读画布：Desk 笔记卡片与 SSG 站点共用。
+ *
+ * 约束（计划 E2）：
+ * - 只读：不挂载可编辑实例、不写任何文件
+ * - 明暗跟随宿主，但只影响显示，不改磁盘 appState
+ * - 导出能力懒加载：首屏不引入 Excalidraw
+ * - 过期结果丢弃；卸载时释放 data URL 与观察器
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { createExcalidrawSvgRenderer } from './renderer'
+
+const props = withDefaults(
+  defineProps<{
+    /** 磁盘上的原始 JSON（唯一真相源） */
+    content: string
+    /** 不传则跟随宿主的 .dark 类 */
+    theme?: 'light' | 'dark'
+    height?: number | string
+    /** 无障碍描述 */
+    label?: string
+  }>(),
+  { theme: undefined, height: 480, label: 'Excalidraw 绘图' }
+)
+
+const resolvedTheme = ref<'light' | 'dark'>(props.theme ?? 'light')
+let observer: MutationObserver | null = null
+
+const renderer = createExcalidrawSvgRenderer({
+  getContent: () => props.content,
+  getTheme: () => resolvedTheme.value
+})
+
+const { state, errorReason, dataUrl } = renderer
+const heightStyle = computed(() =>
+  typeof props.height === 'number' ? `${props.height}px` : props.height
+)
+
+function readHostTheme(): 'light' | 'dark' {
+  if (props.theme) return props.theme
+  if (typeof document === 'undefined') return 'light'
+  return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+}
+
+onMounted(() => {
+  resolvedTheme.value = readHostTheme()
+  void renderer.render()
+  // SSG 通过切换 <html class="dark"> 换主题；这里只跟随显示，不写任何文件
+  if (!props.theme && typeof MutationObserver !== 'undefined') {
+    observer = new MutationObserver(() => {
+      const next = readHostTheme()
+      if (next !== resolvedTheme.value) resolvedTheme.value = next
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+  }
+})
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  observer = null
+  renderer.dispose()
+})
+
+watch(
+  () => props.content,
+  () => void renderer.render()
+)
+watch(resolvedTheme, () => void renderer.render())
+
+defineExpose({ state, errorReason })
+</script>
+
+<template>
+  <div class="tn-excalidraw-view" :style="{ height: heightStyle }" :data-state="state">
+    <img
+      v-if="state === 'ready'"
+      class="tn-excalidraw-view__image"
+      :src="dataUrl"
+      :alt="label"
+      loading="lazy"
+      decoding="async"
+    />
+    <div
+      v-else-if="state === 'error'"
+      class="tn-excalidraw-view__placeholder"
+      role="img"
+      :aria-label="label"
+    >
+      <span>无法显示画布</span>
+      <small>{{ errorReason }}</small>
+    </div>
+    <div v-else class="tn-excalidraw-view__placeholder" :aria-busy="state === 'loading'">
+      <span>画布加载中…</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tn-excalidraw-view {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--tn-excalidraw-bg, transparent);
+}
+.tn-excalidraw-view__image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.tn-excalidraw-view__placeholder {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  color: var(--tn-muted, #8a8a8a);
+  font-size: 13px;
+}
+</style>