@tnotesjs/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) tnotesjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+# @tnotesjs/ui
+
+Shared Vue UI for TNotes built-in blocks. Consumed by:
+
+- `@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
+
+```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`.
+
+## Components
+
+### `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` |
+
+```md
+<BilibiliVideo id="BV1QR4y1y7GG" :autoplay="true" :muted="true" />
+```
+
+### `WordList` — `<WordList :words="[…]" />`
+
+| Prop | Default | Notes |
+|------|---------|--------|
+| `words` | `[]` | Word strings |
+| `needSort` | `false` | Sort A→Z by first letter |
+| `wordsBaseUrl` | TNotes.en-words blob URL | Optional host override |
+| `wordsRawBaseUrl` | TNotes.en-words raw URL | Optional host override |
+| `features` | `WORD_LIST_FEATURES_FULL` | Capability flags (see below) |
+
+```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` | — | — | — | — |
+
+### `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'` | Desk preview uses `'strict'` |
+| `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`).

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@tnotesjs/ui",
+  "version": "0.1.0",
+  "description": "Shared Vue UI for TNotes built-in blocks — consumed by VitePress (core) and Desk.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./footprints-parse": {
+      "types": "./src/components/Footprints/parse.ts",
+      "import": "./src/components/Footprints/parse.ts",
+      "default": "./src/components/Footprints/parse.ts"
+    },
+    "./styles/tokens.css": "./src/styles/tokens.css"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@tnotesjs/mindmap-core": "^0.2.2",
+    "marked": "^15.0.11",
+    "mermaid": "^11.17.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.8",
+    "happy-dom": "^20.12.0",
+    "sass": "^1.90.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.11",
+    "vue": "^3.5.25"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tnotesjs/ui.git"
+  },
+  "homepage": "https://github.com/tnotesjs/ui#readme",
+  "bugs": {
+    "url": "https://github.com/tnotesjs/ui/issues"
+  },
+  "keywords": [
+    "tnotesjs",
+    "vue",
+    "vitepress",
+    "desk"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run"
+  }
+}

package/src/components/BilibiliVideo/BilibiliVideo.vue

@@ -0,0 +1,55 @@
+<template>
+  <iframe
+    class="tn-bilibili-video"
+    :src="playerSrc"
+    scrolling="no"
+    border="0"
+    frameborder="no"
+    framespacing="0"
+    allowfullscreen="true"
+    title="Bilibili video"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Bilibili BV id, e.g. BV1QR4y1y7GG */
+    id: string
+    /** Start playback when the iframe loads. Default off — embeds must not surprise readers. */
+    autoplay?: boolean
+    /** Start muted. Useful if autoplay is enabled (browser policies often require mute). */
+    muted?: boolean
+  }>(),
+  {
+    autoplay: false,
+    muted: false
+  }
+)
+
+const playerSrc = computed(() => {
+  const id = props.id?.trim() ?? ''
+  if (!id) return ''
+  const params = new URLSearchParams({
+    isOutside: 'true',
+    bvid: id,
+    // Official embed docs: boolean query values are 0 | 1.
+    autoplay: props.autoplay ? '1' : '0',
+    muted: props.muted ? '1' : '0'
+  })
+  return `https://player.bilibili.com/player.html?${params.toString()}`
+})
+</script>
+
+<style scoped>
+.tn-bilibili-video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  margin: 1rem 0;
+  border: 0;
+  background: var(--tn-c-divider, #e2e2e3);
+}
+</style>

package/src/components/Footprints/Footprints.vue

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useSlots,
+  watch
+} from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** ISO-ish datetime parts: [y, m, d?, h?, min?, s?] */
+    times?: number[]
+    /** Text paragraphs when not using `#text-area` slot. */
+    paragraphs?: string[]
+    /** Image URLs when not using `#image-list` slot. */
+    images?: string[]
+    /** Footer / other info plain text when not using `#other-info` slot. */
+    otherInfo?: string
+  }>(),
+  {
+    times: () => [],
+    paragraphs: () => [],
+    images: () => [],
+    otherInfo: ''
+  }
+)
+
+const slots = useSlots()
+const textEl = ref<HTMLElement | null>(null)
+const imageEl = ref<HTMLElement | null>(null)
+
+const isCollapsed = ref(true)
+const isExpandable = ref(false)
+const isModalVisible = ref(false)
+const currentIndex = ref(0)
+const slottedImages = ref<string[]>([])
+
+const useTextSlot = computed(() => !!slots['text-area'])
+const useImageSlot = computed(() => !!slots['image-list'])
+const useOtherSlot = computed(() => !!slots['other-info'])
+
+const resolvedImages = computed(() =>
+  useImageSlot.value ? slottedImages.value : (props.images ?? [])
+)
+const currentImage = computed(() => resolvedImages.value[currentIndex.value] ?? '')
+
+const imageLayoutClass = computed(() => {
+  const n = resolvedImages.value.length
+  if (n === 1) return 'fp-layout-1'
+  if (n === 2) return 'fp-layout-2'
+  if (n === 4) return 'fp-layout-4'
+  if (n >= 3) return 'fp-layout-grid'
+  return ''
+})
+
+const formattedTime = computed(() => {
+  const times = props.times ?? []
+  if (times.length < 2) return ''
+  const [year, month, day, hour, minute, second] = times
+  const datePart = `${String(year).padStart(4, '0')}-${String(month).padStart(2, '0')}`
+  const dayPart = day !== undefined ? `-${String(day).padStart(2, '0')}` : ''
+  let timePart = ''
+  if (hour !== undefined && minute !== undefined && second !== undefined) {
+    timePart = ` ${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:${String(second).padStart(2, '0')}`
+  } else if (hour !== undefined && minute !== undefined) {
+    timePart = ` ${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`
+  }
+  let daysSinceBirthday = ''
+  if (day !== undefined) {
+    const birthday = new Date(Date.UTC(1999, 5, 29))
+    const currentDate = new Date(Date.UTC(year, month - 1, day))
+    const diffInDays =
+      Math.floor((currentDate.getTime() - birthday.getTime()) / (1000 * 60 * 60 * 24)) + 1
+    daysSinceBirthday = `👣 ${diffInDays} | `
+  }
+  return daysSinceBirthday + datePart + dayPart + timePart
+})
+
+function openModal(index: number) {
+  currentIndex.value = index
+  isModalVisible.value = true
+}
+function closeModal() {
+  isModalVisible.value = false
+}
+function toggleCollapse() {
+  isCollapsed.value = !isCollapsed.value
+}
+
+function refreshTextExpandable() {
+  if (useTextSlot.value) {
+    isExpandable.value = (textEl.value?.children.length ?? 0) > 2
+    return
+  }
+  isExpandable.value = (props.paragraphs?.length ?? 0) > 2
+}
+
+function refreshSlottedImages() {
+  if (!useImageSlot.value || !imageEl.value) {
+    slottedImages.value = []
+    return
+  }
+  const imgs = imageEl.value.querySelectorAll('img')
+  slottedImages.value = Array.from(imgs).map((img) => img.currentSrc || img.src)
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!isModalVisible.value) return
+  if (event.key === 'ArrowLeft' && currentIndex.value > 0) currentIndex.value -= 1
+  if (event.key === 'ArrowRight' && currentIndex.value < resolvedImages.value.length - 1)
+    currentIndex.value += 1
+  if (event.key === 'Escape') closeModal()
+}
+
+function refresh() {
+  nextTick(() => {
+    refreshTextExpandable()
+    refreshSlottedImages()
+  })
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown)
+  refresh()
+})
+onBeforeUnmount(() => window.removeEventListener('keydown', handleKeyDown))
+
+watch(
+  () => [props.paragraphs, props.images, slots['text-area'], slots['image-list']],
+  () => {
+    isCollapsed.value = true
+    refresh()
+  }
+)
+</script>
+
+<template>
+  <!-- tn-preview-ignore: opt out of Layout ImagePreview so only the in-component modal opens -->
+  <div class="tn-footprints tn-preview-ignore">
+    <div class="tn-footprints__text">
+      <div
+        ref="textEl"
+        class="tn-footprints__text-body"
+        :class="{ 'is-collapsed': isCollapsed }"
+      >
+        <slot name="text-area">
+          <p v-for="(line, i) in paragraphs" :key="i">{{ line }}</p>
+        </slot>
+      </div>
+      <button
+        v-if="isExpandable"
+        type="button"
+        class="tn-footprints__toggle"
+        @click="toggleCollapse"
+      >
+        {{ isCollapsed ? '全文' : '收起' }}
+      </button>
+    </div>
+
+    <div
+      v-if="useImageSlot || images.length"
+      ref="imageEl"
+      class="tn-footprints__images"
+      :class="imageLayoutClass"
+    >
+      <slot name="image-list" :open-modal="openModal" :openModal="openModal">
+        <button
+          v-for="(src, index) in images"
+          :key="`${src}-${index}`"
+          type="button"
+          class="tn-footprints__image-btn"
+          @click="openModal(index)"
+        >
+          <img :src="src" alt="" />
+        </button>
+      </slot>
+    </div>
+
+    <div v-show="isModalVisible" class="tn-footprints__modal" @click.self="closeModal">
+      <button type="button" class="tn-footprints__modal-close" @click="closeModal">&times;</button>
+      <img class="tn-footprints__modal-img" :src="currentImage" alt="Preview" />
+    </div>
+
+    <div v-if="formattedTime" class="tn-footprints__time">
+      <p>{{ formattedTime }}</p>
+    </div>
+    <div v-if="useOtherSlot || otherInfo" class="tn-footprints__other">
+      <slot name="other-info">
+        <p>{{ otherInfo }}</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.tn-footprints {
+  margin: 1rem 0;
+  color: var(--tn-c-text);
+}
+
+.tn-footprints__text {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.tn-footprints__text-body {
+  overflow: hidden;
+
+  :deep(p) {
+    display: block;
+    margin: 0 0 0.5rem;
+  }
+
+  &.is-collapsed > :nth-child(n + 3) {
+    display: none;
+  }
+}
+
+.tn-footprints__toggle {
+  display: block;
+  margin-top: 0.5rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--tn-c-brand, #007bff);
+  cursor: pointer;
+  font-size: 1rem;
+  text-align: left;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+/* 朋友圈式网格：slot 里的 img 常被 Markdown 包在 p/a 中 */
+.tn-footprints__images {
+  display: grid;
+  gap: 4px;
+  width: 100%;
+
+  :deep(> *) {
+    margin: 0;
+    min-width: 0;
+  }
+
+  :deep(p) {
+    margin: 0;
+    line-height: 0;
+  }
+
+  :deep(a) {
+    display: block;
+    line-height: 0;
+  }
+
+  :deep(img) {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+    display: block;
+    margin: 0;
+    cursor: pointer;
+    vertical-align: top;
+    border-radius: 4px;
+  }
+}
+
+.tn-footprints__image-btn {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.fp-layout-1 {
+  grid-template-columns: 1fr;
+  max-width: 280px;
+
+  :deep(img) {
+    width: auto;
+    max-width: 100%;
+    max-height: 360px;
+    aspect-ratio: auto;
+  }
+}
+.fp-layout-2 {
+  grid-template-columns: repeat(2, 1fr);
+  max-width: 360px;
+}
+.fp-layout-4 {
+  grid-template-columns: repeat(2, 1fr);
+  max-width: 360px;
+}
+.fp-layout-grid {
+  grid-template-columns: repeat(3, 1fr);
+  max-width: 480px;
+}
+
+.tn-footprints__modal {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.85);
+}
+
+.tn-footprints__modal-close {
+  position: absolute;
+  top: 16px;
+  right: 24px;
+  border: none;
+  background: transparent;
+  color: #fff;
+  font-size: 2rem;
+  cursor: pointer;
+}
+
+.tn-footprints__modal-img {
+  max-width: min(92vw, 960px);
+  max-height: 88vh;
+  object-fit: contain;
+}
+
+.tn-footprints__time,
+.tn-footprints__other {
+  font-size: 0.8rem;
+  color: var(--tn-c-text-2, gray);
+
+  :deep(p) {
+    margin: 0.25rem 0;
+  }
+}
+</style>

package/src/components/Footprints/parse.ts

@@ -0,0 +1,122 @@
+/** Parse `::: footprints` containers into props for the shared Footprints UI. */
+
+export interface FootprintsPayload {
+  times: number[]
+  paragraphs: string[]
+  images: string[]
+  otherInfo: string
+}
+
+/** `2025-01-22 23:47` / `2025-01-22` → [y,m,d,h?,min?,s?] */
+export function parseFootprintsDatetime(meta: string): number[] {
+  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] !== undefined) {
+    parts.push(Number(m[4]), Number(m[5]))
+    if (m[6] !== undefined) parts.push(Number(m[6]))
+  }
+  return parts
+}
+
+function formatDatetime(times: number[]): string {
+  if (times.length < 2) return ''
+  const [y, m, d, h, min, s] = times
+  let out = `${String(y).padStart(4, '0')}-${String(m).padStart(2, '0')}`
+  if (d !== undefined) out += `-${String(d).padStart(2, '0')}`
+  if (h !== undefined && min !== undefined) {
+    out += ` ${String(h).padStart(2, '0')}:${String(min).padStart(2, '0')}`
+    if (s !== undefined) out += `:${String(s).padStart(2, '0')}`
+  }
+  return out
+}
+
+/**
+ * Parse a full container source (`::: footprints …` … `:::`).
+ */
+export function parseFootprintsSource(source: string): FootprintsPayload {
+  const normalized = source.replace(/\r\n?/g, '\n')
+  const lines = normalized.split('\n')
+  const open = lines[0]?.match(/^ {0,3}:{3,}\s*footprints(?:\s+(.*))?$/i)
+  const times = parseFootprintsDatetime((open?.[1] ?? '').trim())
+
+  let end = lines.length - 1
+  while (end > 0 && !/^ {0,3}:{3,}\s*$/.test(lines[end])) end -= 1
+  const bodyLines = lines.slice(1, end)
+
+  const paragraphs: string[] = []
+  const images: string[] = []
+  let otherInfo = ''
+  let buf: string[] = []
+  let inOther = false
+
+  const flush = () => {
+    const text = buf.join('\n').trim()
+    buf = []
+    if (!text) return
+    if (inOther) {
+      otherInfo = otherInfo ? `${otherInfo}\n${text}` : text
+      return
+    }
+    const imgOnly = text.match(/^!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)$/)
+    if (imgOnly) {
+      images.push(imgOnly[2])
+      return
+    }
+    // Multiple images on separate lines in one block
+    const parts = text.split('\n')
+    let allImg = true
+    const blockImgs: string[] = []
+    for (const line of parts) {
+      const m = line.trim().match(/^!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)$/)
+      if (m) blockImgs.push(m[2])
+      else if (line.trim()) {
+        allImg = false
+        break
+      }
+    }
+    if (allImg && blockImgs.length) {
+      images.push(...blockImgs)
+      return
+    }
+    paragraphs.push(text)
+  }
+
+  for (const line of bodyLines) {
+    if (line.trim() === '---') {
+      flush()
+      inOther = true
+      continue
+    }
+    if (line.trim() === '') {
+      flush()
+      continue
+    }
+    buf.push(line)
+  }
+  flush()
+
+  return { times, paragraphs, images, otherInfo }
+}
+
+/** Rebuild canonical `::: footprints` source from structured fields. */
+export function rebuildFootprintsSource(payload: FootprintsPayload): string {
+  const meta = formatDatetime(payload.times)
+  const open = meta ? `::: footprints ${meta}` : '::: footprints'
+  const chunks: string[] = [open, '']
+  for (const p of payload.paragraphs) {
+    chunks.push(p, '')
+  }
+  for (const src of payload.images) {
+    chunks.push(`![](${src})`, '')
+  }
+  if (payload.otherInfo.trim()) {
+    chunks.push('---', '', payload.otherInfo.trim(), '')
+  }
+  chunks.push(':::')
+  return `${chunks.join('\n')}\n`
+}