@hanology/cham-browser 0.1.0 → 0.2.0

package/template/src/components/VerticalScroll.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { Annotation, VerseLine } from '../types'
+import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations, countVerseSpans } from '../composables/useAnnotationRenderer'
+
+const props = defineProps<{
+  title: string
+  author: string
+  verses: VerseLine[]
+  authorInitial: string
+  annotations: Annotation[]
+}>()
+
+const emit = defineEmits<{
+  annotationHover: [event: MouseEvent, annotations: Annotation[]]
+  annotationLeave: []
+  annotationTap: [event: MouseEvent, annotations: Annotation[]]
+  openAuthor: [name: string]
+}>()
+
+function verseHtml(index: number): string {
+  let offset = 0
+  for (let i = 0; i < index; i++) offset += countVerseSpans(props.annotations, i)
+  const spans = buildVerseAnnotations(props.annotations, index)
+  return renderAnnotatedText(props.verses[index].text, spans, true, offset)
+}
+
+function onHover(event: MouseEvent) {
+  const matched = resolveHoveredAnnotations(event, props.annotations)
+  if (matched) emit('annotationHover', event, matched)
+}
+
+function onLeave() {
+  emit('annotationLeave')
+}
+
+function onTap(event: MouseEvent) {
+  const matched = resolveHoveredAnnotations(event, props.annotations)
+  if (matched) emit('annotationTap', event, matched)
+}
+</script>
+
+<template>
+  <div class="v-scroll" @mouseover="onHover" @mouseleave="onLeave" @click="onTap">
+    <span class="v-scroll-title">{{ title }}</span>
+    <span class="v-scroll-author v-scroll-clickable" @click="emit('openAuthor', author)">{{ author }}</span>
+    <div class="v-scroll-body">
+      <span
+        v-for="(_, i) in verses"
+        :key="i"
+        class="v-scroll-line"
+        v-html="verseHtml(i)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.v-scroll {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  height: calc(100vh - 120px);
+  overflow-x: auto; overflow-y: hidden;
+  padding: 32px 24px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.08);
+  position: relative;
+  scrollbar-width: thin;
+  scrollbar-color: var(--gold) var(--paper);
+}
+.v-scroll::-webkit-scrollbar { height: 4px; }
+.v-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
+
+.v-scroll-title {
+  font-size: 36px; font-weight: 900; color: var(--ink);
+  letter-spacing: 12px; margin-left: 24px;
+  padding-left: 24px; border-left: 3px solid var(--vermillion);
+  line-height: 1.6;
+}
+.v-scroll-author {
+  font-size: 22px; font-weight: 400; color: var(--ink-light);
+  margin-left: 16px; padding-left: 16px; letter-spacing: 6px;
+}
+.v-scroll-clickable { cursor: pointer; transition: color 0.15s; }
+.v-scroll-clickable:hover { color: var(--vermillion); }
+.v-scroll-body { margin-left: 28px; }
+.v-scroll-line {
+  font-size: var(--main-font-size, 24px); line-height: 2.4; letter-spacing: 8px;
+  color: var(--ink); display: block;
+}
+
+:deep(.ann-target) {
+  border-left: 2px solid var(--vermillion);
+  padding-left: 2px;
+  cursor: help;
+  transition: background 0.15s;
+}
+:deep(.ann-num) {
+  font-size: 0.45em;
+  font-family: var(--sans);
+  font-weight: 600;
+  color: var(--vermillion);
+  text-combine-upright: all;
+  text-align: end;
+  letter-spacing: 0;
+}
+:deep(.ann-target:hover) {
+  background: rgba(194, 58, 43, 0.08);
+}
+:deep(.ann-target.pronunciation:hover) {
+  background: rgba(58, 107, 94, 0.08);
+}
+:deep(.ann-target.pronunciation) {
+  border-left-color: var(--jade);
+}
+:deep(.ann-target.pronunciation.semantic) {
+  border-left-color: var(--gold);
+}
+</style>

package/template/src/composables/useAnnotationRenderer.ts

@@ -0,0 +1,158 @@
+import { ref } from 'vue'
+import type { Annotation } from '../types'
+import { useReadingMode } from './useReadingMode'
+import { toChineseNumber } from '../utils/chineseNumber'
+
+export interface AnnSpan {
+  start: number
+  end: number
+  annotations: Annotation[]
+}
+
+export function esc(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+export function buildVerseAnnotations(annotations: Annotation[], verseIndex: number): AnnSpan[] {
+  const anns = annotations.filter(a =>
+    a.range.scope === 'verse' && a.range.verseIndex === verseIndex
+  )
+  const spanMap = new Map<string, Annotation[]>()
+  for (const a of anns) {
+    const key = `${a.range.start ?? 0}:${a.range.end ?? 0}`
+    if (!spanMap.has(key)) spanMap.set(key, [])
+    spanMap.get(key)!.push(a)
+  }
+  return Array.from(spanMap.entries()).map(([k, matched]) => {
+    const [start, end] = k.split(':').map(Number)
+    return { start, end, annotations: matched }
+  }).sort((a, b) => a.start - b.start)
+}
+
+export function countVerseSpans(annotations: Annotation[], verseIndex: number): number {
+  const anns = annotations.filter(a =>
+    a.range.scope === 'verse' && a.range.verseIndex === verseIndex
+  )
+  const keys = new Set<string>()
+  for (const a of anns) {
+    keys.add(`${a.range.start ?? 0}:${a.range.end ?? 0}`)
+  }
+  return keys.size
+}
+
+export function renderAnnotatedText(text: string, spans: AnnSpan[], useRuby = false, startNum = 0): string {
+  if (!spans.length) return esc(text)
+
+  let annCounter = startNum
+  let html = ''
+  let cursor = 0
+  for (const span of spans) {
+    if (span.start > cursor) {
+      html += esc(text.slice(cursor, span.start))
+    }
+    annCounter++
+    const ids = span.annotations.map(a => a.id).join(',')
+    const kinds = [...new Set(span.annotations.map(a => a.kind))].join(' ')
+    const numText = toChineseNumber(annCounter)
+    const body = esc(text.slice(span.start, span.end))
+    if (useRuby) {
+      html += `<ruby class="ann-target ${kinds}" data-ann-ids="${ids}">${body}<rp></rp><rt class="ann-num">${numText}</rt><rp></rp></ruby>`
+    } else {
+      html += `<span class="ann-target ${kinds}" data-ann-ids="${ids}">${body}<sup class="ann-num">${numText}</sup></span>`
+    }
+    cursor = span.end
+  }
+  if (cursor < text.length) {
+    html += esc(text.slice(cursor))
+  }
+  return html
+}
+
+export interface VerseGutterRender {
+  textHtml: string
+  gutterHtml: string
+}
+
+export function renderVerseGutter(text: string, spans: AnnSpan[], startNum = 0): VerseGutterRender {
+  if (!spans.length) return { textHtml: esc(text), gutterHtml: '' }
+
+  const gutter = new Array<string>(text.length).fill('　')
+  let annCounter = startNum
+  let textHtml = ''
+  let cursor = 0
+
+  for (const span of spans) {
+    if (span.start > cursor) {
+      textHtml += esc(text.slice(cursor, span.start))
+    }
+    annCounter++
+    const ids = span.annotations.map(a => a.id).join(',')
+    const kinds = [...new Set(span.annotations.map(a => a.kind))].join(' ')
+    textHtml += `<span class="ann-target ${kinds}" data-ann-ids="${ids}">${esc(text.slice(span.start, span.end))}</span>`
+    gutter[span.start] = `<span class="ann-gutter-num ${kinds}" data-ann-ids="${ids}">${toChineseNumber(annCounter)}</span>`
+    cursor = span.end
+  }
+  if (cursor < text.length) {
+    textHtml += esc(text.slice(cursor))
+  }
+
+  return { textHtml, gutterHtml: gutter.join('') }
+}
+
+export function resolveHoveredAnnotations(
+  event: MouseEvent,
+  annotations: Annotation[],
+): Annotation[] | null {
+  const target = (event.target as HTMLElement).closest('.ann-target') as HTMLElement | null
+  if (!target) return null
+  const ids = target.getAttribute('data-ann-ids')?.split(',') || []
+  const matched = annotations.filter(a => ids.includes(a.id))
+  return matched.length ? matched : null
+}
+
+export function useAnnotationTooltip() {
+  const visible = ref(false)
+  const items = ref<Annotation[]>([])
+  const style = ref<Record<string, string>>({})
+  const { layout } = useReadingMode()
+
+  function show(event: MouseEvent, annotations: Annotation[]) {
+    items.value = annotations
+    const el = (event.target as HTMLElement).closest('.ann-target') as HTMLElement | null
+    const rect = (el ?? event.target as HTMLElement).getBoundingClientRect()
+
+    if (layout.value === 'vertical') {
+      const left = rect.left - 12
+      style.value = {
+        right: Math.max(8, window.innerWidth - left) + 'px',
+        top: '50%',
+        transform: 'translateY(-50%)',
+      }
+    } else {
+      const isMobile = window.innerWidth < 768
+      if (isMobile) {
+        style.value = {
+          left: '4vw',
+          right: '4vw',
+          bottom: '0',
+          maxWidth: 'none',
+        }
+      } else {
+        const left = Math.max(8, Math.min(rect.left, window.innerWidth - 288))
+        const top = Math.max(8, rect.bottom + 8)
+        style.value = {
+          left: left + 'px',
+          top: Math.min(top, window.innerHeight - 200) + 'px',
+        }
+      }
+    }
+    visible.value = true
+  }
+
+  function hide() { visible.value = false }
+  function toggle(event: MouseEvent, annotations: Annotation[]) {
+    if (visible.value) { hide() } else { show(event, annotations) }
+  }
+
+  return { visible, items, style, show, hide, toggle }
+}

package/template/src/composables/useBook.ts

@@ -0,0 +1,93 @@
+import { ref, shallowRef, computed, type Ref, type ShallowRef, type ComputedRef } from 'vue'
+import type { BookMeta, Piece, Author } from '../types'
+
+// ─── Helpers ──────────────────────────────────────────────────
+
+function cleanHardWraps(text: string): string {
+  return text
+    .split('\n\n')
+    .map(seg => seg.replace(/\n/g, ''))
+    .join('\n\n')
+}
+
+function cleanPiece(piece: Piece): Piece {
+  const sections: Record<string, string> = {}
+  for (const [key, val] of Object.entries(piece.sections)) {
+    sections[key] = cleanHardWraps(val)
+  }
+  return { ...piece, sections }
+}
+
+// ─── Book Cache (module-level singleton) ──────────────────────
+
+const bookCache = new Map<string, { meta: BookMeta; pieces: Piece[] }>()
+
+async function fetchBook(bookId: string): Promise<{ meta: BookMeta; pieces: Piece[] }> {
+  if (bookCache.has(bookId)) return bookCache.get(bookId)!
+
+  let data: { meta: BookMeta; pieces: Piece[] }
+
+  if (import.meta.env.SSR) {
+    const { readFileSync } = await import('fs')
+    const { join } = await import('path')
+    const base = process.env.CHAM_DATA_DIR || join('public', 'data')
+    data = JSON.parse(readFileSync(join(base, 'books', `${bookId}.json`), 'utf-8'))
+  } else {
+    const res = await fetch(`/data/books/${bookId}.json`)
+    data = await res.json()
+  }
+
+  data.pieces = data.pieces.map(cleanPiece)
+  bookCache.set(bookId, data)
+  return data
+}
+
+// ─── Composable ───────────────────────────────────────────────
+
+export function useBook(): {
+  bookId: Ref<string>
+  pieces: ShallowRef<Piece[]>
+  meta: Ref<BookMeta | null>
+  loaded: ComputedRef<boolean>
+  load: (id: string) => Promise<void>
+  getPiece: (num: number) => Piece | undefined
+  getPiecesByAuthor: (name: string) => Piece[]
+  getAdjacentNums: (num: number) => { prev: number | null; next: number | null }
+} {
+  const bookId = ref('')
+  const pieces = shallowRef<Piece[]>([])
+  const meta = ref<BookMeta | null>(null)
+  const loaded = computed(() => meta.value !== null)
+
+  // Index maps (rebuilt on load)
+  let byNum = new Map<number, Piece>()
+
+  async function load(id: string): Promise<void> {
+    bookId.value = id
+    const data = await fetchBook(id)
+    pieces.value = data.pieces
+    meta.value = data.meta
+
+    byNum = new Map()
+    for (const p of data.pieces) byNum.set(p.num, p)
+  }
+
+  function getPiece(num: number): Piece | undefined {
+    return byNum.get(num)
+  }
+
+  function getPiecesByAuthor(name: string): Piece[] {
+    return pieces.value.filter(p => p.author === name)
+  }
+
+  function getAdjacentNums(num: number): { prev: number | null; next: number | null } {
+    const nums = pieces.value.map(p => p.num).sort((a, b) => a - b)
+    const idx = nums.indexOf(num)
+    return {
+      prev: idx > 0 ? nums[idx - 1] : null,
+      next: idx < nums.length - 1 ? nums[idx + 1] : null,
+    }
+  }
+
+  return { bookId, pieces, meta, loaded, load, getPiece, getPiecesByAuthor, getAdjacentNums }
+}

package/template/src/composables/useData.ts

@@ -0,0 +1,41 @@
+import { ref, shallowRef, computed } from 'vue'
+import type { Author, Dynasty } from '../types'
+
+const authors = shallowRef<Author[]>([])
+const dynasties = ref<Record<string, Dynasty>>({})
+const sharedLoaded = ref(false)
+
+async function loadShared(): Promise<void> {
+  if (sharedLoaded.value) return
+
+  if (import.meta.env.SSR) {
+    const { readFileSync } = await import('fs')
+    const { resolve } = await import('path')
+    const base = process.env.CHAM_DATA_DIR || resolve('public/data')
+    authors.value = JSON.parse(readFileSync(`${base}/authors.json`, 'utf-8'))
+    dynasties.value = JSON.parse(readFileSync(`${base}/dynasties.json`, 'utf-8'))
+  } else {
+    const [aRes, dRes] = await Promise.all([
+      fetch('/data/authors.json'),
+      fetch('/data/dynasties.json'),
+    ])
+    authors.value = await aRes.json()
+    dynasties.value = await dRes.json()
+  }
+
+  sharedLoaded.value = true
+}
+
+const authorByName = computed(() => {
+  const map = new Map<string, Author>()
+  for (const a of authors.value) map.set(a.name, a)
+  return map
+})
+
+export function useData() {
+  function getAuthor(name: string): Author | undefined {
+    return authorByName.value.get(name)
+  }
+
+  return { authors, dynasties, loaded: sharedLoaded, loadShared, getAuthor }
+}

package/template/src/composables/useHorizontalScroll.ts

@@ -0,0 +1,60 @@
+import { type Ref, onMounted, onBeforeUnmount, readonly, ref } from 'vue'
+
+export function useHorizontalScroll(container: Ref<HTMLElement | null>) {
+  const isScrolling = ref(false)
+  let scrollTimer: ReturnType<typeof setTimeout> | null = null
+
+  function isTrackpad(e: WheelEvent): boolean {
+    // Trackpad produces smooth, small deltas; mouse wheel produces large, quantized deltas
+    return e.deltaMode === 0 && (Math.abs(e.deltaY) < 12 && e.deltaY !== 0)
+      || Math.abs(e.deltaX) > 0
+  }
+
+  function onWheel(e: WheelEvent) {
+    const el = container.value
+    if (!el) return
+
+    if (isTrackpad(e)) return
+
+    e.preventDefault()
+    // Mouse wheel: swap scroll direction so scroll-up → right, scroll-down → left
+    el.scrollLeft -= e.deltaY
+  }
+
+  function scrollToStart() {
+    const el = container.value
+    if (!el) return
+    el.scrollLeft = 0
+  }
+
+  function scrollToEnd() {
+    const el = container.value
+    if (!el) return
+    el.scrollLeft = el.scrollWidth - el.clientWidth
+  }
+
+  function onScroll() {
+    isScrolling.value = true
+    if (scrollTimer) clearTimeout(scrollTimer)
+    scrollTimer = setTimeout(() => {
+      isScrolling.value = false
+    }, 150)
+  }
+
+  onMounted(() => {
+    const el = container.value
+    if (!el) return
+    el.addEventListener('wheel', onWheel, { passive: false })
+    el.addEventListener('scroll', onScroll, { passive: true })
+  })
+
+  onBeforeUnmount(() => {
+    const el = container.value
+    if (!el) return
+    el.removeEventListener('wheel', onWheel)
+    el.removeEventListener('scroll', onScroll)
+    if (scrollTimer) clearTimeout(scrollTimer)
+  })
+
+  return { isScrolling: readonly(isScrolling), scrollToStart, scrollToEnd }
+}

package/template/src/composables/useLibrary.ts

@@ -0,0 +1,40 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import type { LibraryIndex, LibraryScale, BookMeta } from '../types'
+
+const library: Ref<LibraryIndex | null> = ref(null)
+const loaded = ref(false)
+
+async function loadLibrary(): Promise<void> {
+  if (loaded.value) return
+
+  if (import.meta.env.SSR) {
+    const { readFileSync } = await import('fs')
+    const { resolve, join } = await import('path')
+    const base = process.env.CHAM_DATA_DIR || resolve('public/data')
+    library.value = JSON.parse(readFileSync(join(base, 'library.json'), 'utf-8'))
+  } else {
+    const res = await fetch('/data/library.json')
+    library.value = await res.json()
+  }
+
+  loaded.value = true
+}
+
+export function useLibrary(): {
+  library: Ref<LibraryIndex | null>
+  loaded: Ref<boolean>
+  scale: ComputedRef<LibraryScale>
+  books: ComputedRef<BookMeta[]>
+  singleBook: ComputedRef<BookMeta | null>
+  isSinglePiece: ComputedRef<boolean>
+  loadLibrary: () => Promise<void>
+} {
+  const scale = computed<LibraryScale>(() => library.value?.scale ?? 'library')
+  const books = computed<BookMeta[]>(() => library.value?.books ?? [])
+  const singleBook = computed(() => books.value.length === 1 ? books.value[0] : null)
+  const isSinglePiece = computed(() =>
+    scale.value === 'single-piece'
+  )
+
+  return { library, loaded, scale, books, singleBook, isSinglePiece, loadLibrary }
+}

package/template/src/composables/usePageLayout.ts

@@ -0,0 +1,25 @@
+import { computed, ref, type Ref } from 'vue'
+import { useReadingMode } from './useReadingMode'
+import { useHorizontalScroll } from './useHorizontalScroll'
+
+export interface PageLayoutConfig {
+  mode: 'vertical' | 'horizontal'
+  navSide: 'top' | 'right'
+  contentDirection: 'ltr' | 'rtl'
+  isVertical: boolean
+}
+
+export function usePageLayout() {
+  const { layout } = useReadingMode()
+  const scrollRef = ref<HTMLElement | null>(null)
+  const scroll = useHorizontalScroll(scrollRef)
+
+  const config = computed<PageLayoutConfig>(() => ({
+    mode: layout.value,
+    navSide: layout.value === 'vertical' ? 'right' : 'top',
+    contentDirection: layout.value === 'vertical' ? 'rtl' : 'ltr',
+    isVertical: layout.value === 'vertical',
+  }))
+
+  return { config, scrollRef, ...scroll }
+}

package/template/src/composables/useReadingMode.ts

@@ -0,0 +1,70 @@
+import { ref, watch } from 'vue'
+
+export type Theme = 'light' | 'sepia' | 'dark' | 'oled'
+export type LayoutMode = 'horizontal' | 'vertical'
+
+export const THEMES: Theme[] = ['light', 'sepia', 'dark', 'oled']
+
+export const THEME_LABELS: Record<Theme, string> = {
+  light: '亮',
+  sepia: '暖',
+  dark: '暗',
+  oled: '黑',
+}
+
+export const FONT_SIZES = [12, 14, 16, 18, 20, 22, 24, 28, 32] as const
+export type FontSize = typeof FONT_SIZES[number]
+
+const theme = ref<Theme>('light')
+const layout = ref<LayoutMode>('vertical')
+const mainFontSize = ref<FontSize>(24)
+const bodyFontSize = ref<FontSize>(16)
+
+if (!import.meta.env.SSR) {
+  const savedTheme = localStorage.getItem('theme') as Theme | null
+  if (savedTheme && THEMES.includes(savedTheme)) theme.value = savedTheme
+
+  const savedLayout = localStorage.getItem('layout') as LayoutMode | null
+  if (savedLayout === 'vertical' || savedLayout === 'horizontal') layout.value = savedLayout
+
+  const savedMain = parseInt(localStorage.getItem('mainFontSize') || '', 10)
+  if (FONT_SIZES.includes(savedMain as any)) mainFontSize.value = savedMain as FontSize
+
+  const savedBody = parseInt(localStorage.getItem('bodyFontSize') || '', 10)
+  if (FONT_SIZES.includes(savedBody as any)) bodyFontSize.value = savedBody as FontSize
+
+  watch(theme, t => {
+    document.documentElement.setAttribute('data-theme', t)
+    localStorage.setItem('theme', t)
+  }, { immediate: true })
+
+  watch(layout, l => {
+    document.documentElement.setAttribute('data-layout', l)
+    localStorage.setItem('layout', l)
+  }, { immediate: true })
+
+  watch(mainFontSize, s => {
+    document.documentElement.style.setProperty('--main-font-size', s + 'px')
+    localStorage.setItem('mainFontSize', String(s))
+  }, { immediate: true })
+
+  watch(bodyFontSize, s => {
+    document.documentElement.style.setProperty('--body-font-size', s + 'px')
+    localStorage.setItem('bodyFontSize', String(s))
+  }, { immediate: true })
+}
+
+export function useReadingMode() {
+  function setTheme(t: Theme) { theme.value = t }
+  function cycleTheme() {
+    const idx = THEMES.indexOf(theme.value)
+    theme.value = THEMES[(idx + 1) % THEMES.length]
+  }
+  function setLayout(l: LayoutMode) { layout.value = l }
+  function toggleLayout() {
+    layout.value = layout.value === 'horizontal' ? 'vertical' : 'horizontal'
+  }
+  function setMainFontSize(s: FontSize) { mainFontSize.value = s }
+  function setBodyFontSize(s: FontSize) { bodyFontSize.value = s }
+  return { theme, layout, mainFontSize, bodyFontSize, setTheme, cycleTheme, setLayout, toggleLayout, setMainFontSize, setBodyFontSize }
+}

package/template/src/composables/useTitle.ts

@@ -0,0 +1,5 @@
+import { useHead } from '@unhead/vue'
+
+export function useTitle(title: string) {
+  useHead({ title })
+}

package/template/src/main.ts

@@ -0,0 +1,22 @@
+import { createApp as _createApp } from 'vue'
+import { createHead as createHeadSSR } from '@unhead/vue/server'
+import { createHead as createHeadClient } from '@unhead/vue/client'
+import { createRouterInstance, routes } from './router'
+import App from './App.vue'
+import './styles/main.css'
+
+export async function createApp() {
+  const router = createRouterInstance()
+  const head = import.meta.env.SSR ? createHeadSSR() : createHeadClient()
+  const app = _createApp(App)
+  app.use(head)
+  app.use(router)
+  return { app, router, routes, head }
+}
+
+if (!import.meta.env.SSR) {
+  createApp().then(({ app, router }) => {
+    app.mount('#app')
+    document.getElementById('app-loading')?.remove()
+  })
+}

package/template/src/router.ts

@@ -0,0 +1,29 @@
+import {
+  createRouter,
+  createWebHistory,
+  createMemoryHistory,
+  type RouteRecordRaw,
+} from 'vue-router'
+import LibraryHome from './views/LibraryHome.vue'
+import BookHome from './views/BookHome.vue'
+import PieceView from './views/PieceView.vue'
+import AuthorView from './views/AuthorView.vue'
+
+export const routes: RouteRecordRaw[] = [
+  { path: '/', component: LibraryHome },
+  { path: '/author/:name', component: AuthorView, props: true },
+  { path: '/:bookId', component: BookHome, props: true },
+  { path: '/:bookId/:num', component: PieceView, props: true },
+]
+
+export function createRouterInstance() {
+  return createRouter({
+    history: typeof window !== 'undefined'
+      ? createWebHistory()
+      : createMemoryHistory(),
+    routes,
+    scrollBehavior() {
+      return { top: 0 }
+    },
+  })
+}

package/template/src/shims-vue.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}