@hanology/cham-browser 0.4.65 → 0.4.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.4.65",
+  "version": "0.4.67",
   "description": "CHAM — browser-compatible parser, serializer, and site generator for Classical Han Annotated Markdown",
   "type": "module",
   "main": "dist/index.js",

package/template/src/App.vue

@@ -56,7 +56,9 @@ function onKey(event: KeyboardEvent) {
         <Suspense :key="route.fullPath">
           <component :is="Component" />
           <template #fallback>
-            <div class="route-loading"></div>
+            <div class="route-loading">
+              <div class="route-loading-seal">文</div>
+            </div>
           </template>
         </Suspense>
       </Transition>
@@ -175,4 +177,17 @@ function onKey(event: KeyboardEvent) {
   justify-content: center;
   min-height: 100vh;
 }
+.route-loading-seal {
+  width: 56px; height: 56px;
+  border: 2px solid var(--vermillion);
+  border-radius: 4px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 28px; font-weight: 900;
+  color: var(--vermillion);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 0.6; transform: scale(0.96); }
+  50% { opacity: 1; transform: scale(1); }
+}
 </style>

package/template/src/components/PartBlock.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { Annotation, VerseLine, PieceSource } from '../types'
-import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations, countVerseSpans } from '../composables/useAnnotationRenderer'
+import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations } from '../composables/useAnnotationRenderer'
 
 const props = defineProps<{
   num: number
@@ -17,12 +18,24 @@ const emit = defineEmits<{
   annotationTap: [event: MouseEvent, annotations: Annotation[]]
 }>()
 
+const allVerseSpans = computed(() =>
+  props.verses.map((_, i) => buildVerseAnnotations(props.annotations, i))
+)
+
+const verseOffsets = computed(() => {
+  const offsets: number[] = []
+  let acc = 0
+  for (const spans of allVerseSpans.value) {
+    offsets.push(acc)
+    acc += spans.length
+  }
+  return offsets
+})
+
 function verseHtml(index: number): string {
   const useRuby = props.vertical
-  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, useRuby, offset)
+  const spans = allVerseSpans.value[index]
+  return renderAnnotatedText(props.verses[index].text, spans, useRuby, verseOffsets.value[index])
 }
 
 function onHover(event: MouseEvent) {

package/template/src/components/ReadingToolbar.vue

@@ -68,12 +68,12 @@ function close() { open.value = false }
         <div class="rt-label">{{ t('settings.theme') }}</div>
         <div class="rt-options">
           <button
-            v-for="t in THEMES"
-            :key="t"
+            v-for="th in THEMES"
+            :key="th"
             class="rt-opt rt-theme"
-            :class="{ active: theme === t, ['theme-' + t]: true }"
-            @click="setTheme(t)"
-          >{{ t('theme.' + t) }}</button>
+            :class="{ active: theme === th, ['theme-' + th]: true }"
+            @click="setTheme(th)"
+          >{{ t('theme.' + th) }}</button>
         </div>
       </div>
       <div class="rt-group">

package/template/src/components/SideNav.vue

@@ -78,12 +78,12 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
           <div class="ss-label">{{ t('settings.theme') }}</div>
           <div class="ss-options">
             <button
-              v-for="t in THEMES"
-              :key="t"
+              v-for="th in THEMES"
+              :key="th"
               class="ss-opt"
-              :class="{ active: theme === t }"
-              @click="setTheme(t)"
-            >{{ t('theme.' + t) }}</button>
+              :class="{ active: theme === th }"
+              @click="setTheme(th)"
+            >{{ t('theme.' + th) }}</button>
           </div>
         </div>
         <div class="ss-group">

package/template/src/composables/useAnnotationRenderer.ts

@@ -51,10 +51,6 @@ export function buildVerseAnnotations(annotations: Annotation[], verseIndex: num
   return segments
 }
 
-export function countVerseSpans(annotations: Annotation[], verseIndex: number): number {
-  return buildVerseAnnotations(annotations, verseIndex).length
-}
-
 export function renderAnnotatedText(text: string, spans: AnnSpan[], useRuby = false, startNum = 0): string {
   if (!spans.length) return esc(text)
 

package/template/src/styles/main.css

@@ -132,6 +132,7 @@
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 html {
   scroll-behavior: smooth;
+  scroll-padding-top: 56px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -144,6 +145,7 @@ body {
   line-height: 1.8;
   min-height: 100vh;
   overflow-x: hidden;
+  overscroll-behavior-y: contain;
 }
 ::selection { background: var(--vermillion); color: var(--selection-text); }
 ::-webkit-scrollbar { width: 6px; height: 6px; }
@@ -321,7 +323,7 @@ button:focus-visible {
 /* ===== DARK MODE VERTICAL WARMTH ===== */
 [data-theme="dark"] .v-scroll,
 [data-theme="oled"] .v-scroll {
-  box-shadow: 0 0 40px rgba(194, 58, 43, 0.03), 0 4px 16px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 40px color-mix(in srgb, var(--vermillion) 3%, transparent), 0 4px 16px rgba(var(--shadow-rgb), 0.2);
 }
 
 [data-theme="dark"] .sb-vertical,

package/template/src/views/AuthorView.vue

@@ -151,7 +151,7 @@ function goHome() { router.push('/') }
   flex-direction: row-reverse;
   overflow-x: auto;
   overflow-y: hidden;
-  margin-right: var(--nav-width, 56px);
+  margin-right: calc(var(--nav-width, 56px) + env(safe-area-inset-right, 0px));
   padding: 0 32px;
   background: var(--paper);
   scrollbar-width: thin;
@@ -349,6 +349,6 @@ function goHome() { router.push('/') }
   .h-hero { flex-direction: column; text-align: center; padding: 24px; }
   .h-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
   .h-content { padding: 30px 20px; }
-  .v-page { padding: 0 16px; }
+  .v-page { padding: 0 16px; margin-right: calc(var(--nav-width, 44px) + env(safe-area-inset-right, 0px)); }
 }
 </style>

package/template/src/views/PieceView.vue

@@ -364,13 +364,13 @@ function tcy(n: number): string {
           <template v-if="piece.contributors && piece.contributors.length > 1">
             <div v-for="group in contributorGroups" :key="group.title" class="v-author-group">
               <span class="v-author-role">{{ group.title }}</span>
-              <span v-for="name in group.names" :key="name" class="v-poem-author" @click="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)">{{ name }}</span>
+              <span v-for="name in group.names" :key="name" class="v-poem-author" role="button" tabindex="0" @click="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)" @keydown.enter="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)">{{ name }}</span>
             </div>
           </template>
-          <span v-else class="v-poem-author" @click="openAuthorPane">{{ piece.author }}</span>
-          <div v-if="piece.source?.textRef" class="v-source-link" @click="router.push(`/${piece.source.textRef}`)">
+          <span v-else class="v-poem-author" role="button" tabindex="0" @click="openAuthorPane" @keydown.enter="openAuthorPane">{{ piece.author }}</span>
+          <router-link v-if="piece.source?.textRef" :to="`/${piece.source.textRef}`" class="v-source-link">
             ← {{ meta?.title }}
-          </div>
+          </router-link>
           <div class="v-poem-meta">
             <template v-if="isMultiPart">
               <span class="v-meta-item" v-html="tcy(piece.parts!.length) + ' ' + t('piece.stanzas')" />
@@ -543,9 +543,9 @@ function tcy(n: number): string {
             <div class="h-nav-title-row">
               <span v-if="piece.era" class="h-era">{{ piece.era }}</span>
               <span class="h-breadcrumb">
-                <span v-if="piece.source?.textRef" class="h-source-link" @click="router.push(`/${piece.source.textRef}`)">
+                <router-link v-if="piece.source?.textRef" :to="`/${piece.source.textRef}`" class="h-source-link">
                   {{ meta?.title }} →
-                </span>
+                </router-link>
                 <span class="h-sep">{{ piece.num }}.</span>
                 {{ piece.title }}
               </span>
@@ -553,10 +553,10 @@ function tcy(n: number): string {
                 <template v-for="(group, gi) in contributorGroups" :key="group.title">
                   <span v-if="gi > 0" class="h-sep">|</span>
                   <span class="h-author-role">{{ group.title }}</span>
-                  <span v-for="name in group.names" :key="name" class="h-author-link" @click="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)">{{ name }}</span>
+                  <span v-for="name in group.names" :key="name" class="h-author-link" role="button" tabindex="0" @click="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)" @keydown.enter="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)">{{ name }}</span>
                 </template>
               </template>
-              <span v-else class="h-author-link" @click="openAuthorPane">{{ piece.author }}</span>
+              <span v-else class="h-author-link" role="button" tabindex="0" @click="openAuthorPane" @keydown.enter="openAuthorPane">{{ piece.author }}</span>
             </div>
             <div class="h-controls">
               <span class="h-tag h-tag-pager">{{ piece.num }} / {{ pieces.length }}</span>