@hanology/cham-browser 0.4.63 → 0.4.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.4.63",
+  "version": "0.4.64",
   "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

@@ -168,4 +168,11 @@ function onKey(event: KeyboardEvent) {
   color: var(--ink-faint);
   letter-spacing: 1px;
 }
+
+.route-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
 </style>

package/template/src/components/AnnotationPane.vue

@@ -146,7 +146,7 @@ onBeforeUnmount(() => {
   <Teleport to="body">
     <Transition name="ann-dim">
       <div
-        v-if="visible && annotations.length && vertical && isMobile"
+        v-if="visible && annotations.length && vertical && ww < 768"
         class="ann-pane-dim"
         @click="emit('close')"
       />
@@ -341,18 +341,18 @@ onBeforeUnmount(() => {
   line-height: 1.5;
 }
 
-.ann-pane-kind.pronunciation { background: var(--jade); color: #fff; }
-.ann-pane-kind.semantic { background: var(--vermillion); color: #fff; }
-.ann-pane-kind.etymology { background: var(--ann-etymology); color: #fff; }
+.ann-pane-kind.pronunciation { background: var(--jade); color: var(--paper); }
+.ann-pane-kind.semantic { background: var(--vermillion); color: var(--paper); }
+.ann-pane-kind.etymology { background: var(--ann-etymology); color: var(--paper); }
 .ann-pane-kind.note,
 .ann-pane-kind.definition { background: var(--ink); color: var(--paper); }
-.ann-pane-kind.commentary { background: var(--ann-commentary); color: #fff; }
-.ann-pane-kind.translation { background: var(--ann-translation); color: #fff; }
-.ann-pane-kind.person { background: var(--ann-person); color: #fff; }
-.ann-pane-kind.place { background: var(--ann-place); color: #fff; }
-.ann-pane-kind.event { background: var(--ann-event); color: #fff; }
-.ann-pane-kind.date { background: var(--ann-date); color: #fff; }
-.ann-pane-kind.allusion { background: var(--ann-allusion); color: #fff; }
+.ann-pane-kind.commentary { background: var(--ann-commentary); color: var(--paper); }
+.ann-pane-kind.translation { background: var(--ann-translation); color: var(--paper); }
+.ann-pane-kind.person { background: var(--ann-person); color: var(--paper); }
+.ann-pane-kind.place { background: var(--ann-place); color: var(--paper); }
+.ann-pane-kind.event { background: var(--ann-event); color: var(--paper); }
+.ann-pane-kind.date { background: var(--ann-date); color: var(--paper); }
+.ann-pane-kind.allusion { background: var(--ann-allusion); color: var(--paper); }
 
 .ann-pane-layer {
   font-size: 10px;

package/template/src/components/AnnotationTooltip.vue

@@ -231,18 +231,18 @@ onBeforeUnmount(() => {
   letter-spacing: 1px;
   line-height: 1.5;
 }
-.ann-kind.pronunciation { background: var(--jade); color: #fff; }
-.ann-kind.semantic { background: var(--vermillion); color: #fff; }
-.ann-kind.etymology { background: var(--ann-etymology); color: #fff; }
+.ann-kind.pronunciation { background: var(--jade); color: var(--paper); }
+.ann-kind.semantic { background: var(--vermillion); color: var(--paper); }
+.ann-kind.etymology { background: var(--ann-etymology); color: var(--paper); }
 .ann-kind.note,
 .ann-kind.definition { background: var(--ink); color: var(--paper); }
-.ann-kind.commentary { background: var(--ann-commentary); color: #fff; }
-.ann-kind.translation { background: var(--ann-translation); color: #fff; }
-.ann-kind.person { background: var(--ann-person); color: #fff; }
-.ann-kind.place { background: var(--ann-place); color: #fff; }
-.ann-kind.event { background: var(--ann-event); color: #fff; }
-.ann-kind.date { background: var(--ann-date); color: #fff; }
-.ann-kind.allusion { background: var(--ann-allusion); color: #fff; }
+.ann-kind.commentary { background: var(--ann-commentary); color: var(--paper); }
+.ann-kind.translation { background: var(--ann-translation); color: var(--paper); }
+.ann-kind.person { background: var(--ann-person); color: var(--paper); }
+.ann-kind.place { background: var(--ann-place); color: var(--paper); }
+.ann-kind.event { background: var(--ann-event); color: var(--paper); }
+.ann-kind.date { background: var(--ann-date); color: var(--paper); }
+.ann-kind.allusion { background: var(--ann-allusion); color: var(--paper); }
 
 .ann-layer {
   font-size: 10px;
@@ -396,6 +396,34 @@ onBeforeUnmount(() => {
   background: rgba(58, 90, 140, 0.12) !important;
   box-shadow: 0 0 0 2px rgba(58, 90, 140, 0.15);
 }
+:global(.ann-target.ann-active.place) {
+  background: rgba(139, 105, 20, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(139, 105, 20, 0.15);
+}
+:global(.ann-target.ann-active.event) {
+  background: rgba(107, 76, 138, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(107, 76, 138, 0.15);
+}
+:global(.ann-target.ann-active.date) {
+  background: rgba(42, 122, 122, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(42, 122, 122, 0.15);
+}
+:global(.ann-target.ann-active.allusion) {
+  background: rgba(181, 101, 29, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(181, 101, 29, 0.15);
+}
+:global(.ann-target.ann-active.etymology) {
+  background: rgba(107, 91, 149, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(107, 91, 149, 0.15);
+}
+:global(.ann-target.ann-active.commentary) {
+  background: rgba(192, 57, 43, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
+}
+:global(.ann-target.ann-active.translation) {
+  background: rgba(44, 110, 73, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(44, 110, 73, 0.15);
+}
 
 @media (min-width: 768px) {
   .ann-sheet { display: none; }

package/template/src/components/BackToTop.vue

@@ -61,7 +61,7 @@ onUnmounted(detach)
 
 <template>
   <Transition name="btt">
-    <button v-if="visible" class="btt" :class="{ 'btt-v': vertical }" @click="scrollToTop" :aria-label="vertical ? t('action.backToStart') : t('action.backToStart')">
+    <button v-if="visible" class="btt" :class="{ 'btt-v': vertical }" @click="scrollToTop" :aria-label="vertical ? t('action.backToStart') : t('action.backToTop')">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M12 19V5M5 12l7-7 7 7"/>
       </svg>

package/template/src/components/PronunciationGroup.vue

@@ -39,7 +39,7 @@ defineProps<{
 }
 .pron-yue {
   background: var(--jade);
-  color: #fff;
+  color: var(--paper);
 }
 .pron-cmn {
   background: var(--ink);

package/template/src/components/ReadingToolbar.vue

@@ -15,7 +15,7 @@ function close() { open.value = false }
 <template>
   <div class="rt" :class="{ open }">
     <button class="rt-fab" @click="toggle" :aria-label="open ? t('settings.close') : t('settings.reading')">
-      <span v-if="!open" class="rt-icon">設</span>
+      <span v-if="!open" class="rt-icon">{{ t('settings.shortTitle').charAt(0) }}</span>
       <span v-else class="rt-icon">✕</span>
     </button>
     <div v-if="open" class="rt-panel" @click.stop>

package/template/src/components/SectionBlock.vue

@@ -104,7 +104,7 @@ const paragraphsHtml = computed(() => {
 .sb-num {
   display: inline-flex; align-items: center; justify-content: center;
   width: 28px; height: 28px; border-radius: 50%;
-  background: var(--vermillion); color: #fff;
+  background: var(--vermillion); color: var(--paper);
   font-family: var(--sans); font-size: 13px; font-weight: 700;
   flex-shrink: 0;
 }
@@ -142,7 +142,7 @@ const paragraphsHtml = computed(() => {
   height: 22px;
   border-radius: 4px;
   background: var(--vermillion);
-  color: #fff;
+  color: var(--paper);
   font-family: var(--sans);
   font-size: 12px;
   font-weight: 700;

package/template/src/composables/useI18n.ts

@@ -78,6 +78,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'annotation.noteCount': '{count}注',
     'action.close': '關閉',
     'action.backToStart': '回到起始',
+    'action.backToTop': '回到頂部',
     'shortcut.toggleLayout': '直/橫',
     'shortcut.toggleTheme': '主題',
     'shortcut.goHome': '首頁',
@@ -175,6 +176,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'annotation.noteCount': '{count}注',
     'action.close': '关闭',
     'action.backToStart': '回到起始',
+    'action.backToTop': '回到顶部',
     'shortcut.toggleLayout': '直/横',
     'shortcut.toggleTheme': '主题',
     'shortcut.goHome': '首页',
@@ -272,6 +274,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'annotation.noteCount': '{count} notes',
     'action.close': 'Close',
     'action.backToStart': 'Back to start',
+    'action.backToTop': 'Back to top',
     'shortcut.toggleLayout': 'V/H',
     'shortcut.toggleTheme': 'Theme',
     'shortcut.goHome': 'Home',

package/template/src/composables/useReadingMode.ts

@@ -5,13 +5,6 @@ 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]
 

package/template/src/styles/annotation-targets.css

@@ -45,6 +45,18 @@
   background: rgba(181, 101, 29, 0.1);
   box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(181, 101, 29, 0.08);
 }
+.ann-target.etymology:hover {
+  background: rgba(107, 91, 149, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(107, 91, 149, 0.08);
+}
+.ann-target.commentary:hover {
+  background: rgba(192, 57, 43, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(192, 57, 43, 0.08);
+}
+.ann-target.translation:hover {
+  background: rgba(44, 110, 73, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(44, 110, 73, 0.08);
+}
 
 /* ─── Annotation number ─── */
 .ann-num {

package/template/src/styles/main.css

@@ -328,3 +328,13 @@ button:focus-visible {
 [data-theme="oled"] .sb-vertical {
   border-right-color: var(--border-light);
 }
+
+/* ===== REDUCED MOTION ===== */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/template/src/utils/annotationLabels.ts

@@ -1,6 +1,8 @@
 import type { Annotation } from '../types'
 import { useI18n } from '../composables/useI18n'
 
+const { t } = useI18n()
+
 const KIND_I18N_KEYS: Record<string, string> = {
   pronunciation: 'annotation.kind.pronunciation',
   semantic: 'annotation.kind.semantic',
@@ -18,9 +20,5 @@ const KIND_I18N_KEYS: Record<string, string> = {
 
 export function kindLabel(ann: Annotation): string {
   const key = KIND_I18N_KEYS[ann.kind]
-  if (key) {
-    const { t } = useI18n()
-    return t(key)
-  }
-  return ann.kind
+  return key ? t(key) : ann.kind
 }

package/template/src/views/AuthorView.vue

@@ -177,8 +177,7 @@ function goHome() { router.push('/') }
   display: flex; align-items: center; justify-content: center;
   font-size: 28px; font-weight: 900;
   color: var(--vermillion);
-  margin-left: 24px; padding-left: 20px;
-  border-left: 3px solid var(--vermillion);
+  margin-left: 24px;
 }
 .v-name {
   font-size: 48px; font-weight: 900;
@@ -251,7 +250,7 @@ function goHome() { router.push('/') }
 .h-page { min-height: 100vh; }
 .h-nav {
   position: sticky; top: 0; z-index: 100;
-  background: var(--paper); opacity: 0.97;
+  background: var(--paper);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border-light);
   padding: 0 40px;

package/template/src/views/BookHome.vue

@@ -78,7 +78,7 @@ function scrollToCatalog() {
         <span class="v-ch-line"> </span>
         <span class="v-count">{{ t('catalog.total', { count: filtered.length }) }}</span>
         <span class="v-search-wrap">
-          <input v-model="searchQuery" class="v-search" :placeholder="t('catalog.search')" aria-label="search" />
+          <input v-model="searchQuery" class="v-search" :placeholder="t('catalog.search')" :aria-label="t('catalog.search')" />
         </span>
       </section>
 
@@ -92,6 +92,9 @@ function scrollToCatalog() {
           @click="openPiece(piece.num)"
         />
       </div>
+      <div v-if="searchQuery && filtered.length === 0" class="v-empty">
+        <span class="v-empty-text">{{ t('catalog.noResults', { query: searchQuery }) }}</span>
+      </div>
     </div>
   </div>
 
@@ -379,6 +382,23 @@ function scrollToCatalog() {
   opacity: 0.5;
 }
 
+.v-empty {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  flex-shrink: 0;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+}
+.v-empty-text {
+  font-size: 14px;
+  color: var(--ink-faint);
+  letter-spacing: 2px;
+  font-family: var(--sans);
+}
+
 @media (max-width: 768px) {
   .h-hero { min-height: 80vh; height: auto; padding: 60px 16px; }
   .h-ornament { font-size: 32px; letter-spacing: 12px; margin-bottom: 20px; }

package/template/src/views/PieceView.vue

@@ -312,20 +312,20 @@ function navigate(delta: number) {
   if (target !== null) router.push(`/${props.bookId}/${target}`)
 }
 
-const ROLE_LABELS: Record<string, string> = {
+const ROLE_LABELS = computed(() => ({
   author: t('role.author'),
   commentator: t('role.commentator'),
   editor: t('role.editor'),
   translator: t('role.translator'),
   annotator: t('role.annotator'),
-}
+}))
 
 const contributorGroups = computed(() => {
   const c = piece.value?.contributors
   if (!c || c.length <= 1) return []
   const groups = new Map<string, string[]>()
   for (const x of c) {
-    const t = x.title || ROLE_LABELS[x.role] || t('role.defaultAuthor')
+    const t = x.title || ROLE_LABELS.value[x.role] || t('role.defaultAuthor')
     if (!groups.has(t)) groups.set(t, [])
     groups.get(t)!.push(x.name)
   }
@@ -516,8 +516,8 @@ function tcy(n: number): string {
               </div>
               <div class="v-pane-links">
                 <a v-if="selectedAuthorData?.ctextId" :href="`https://ctext.org/wiki.pl?if=en&res=${selectedAuthorData.ctextId}`" target="_blank" rel="noopener" class="v-pane-link">CTEXT</a>
-                <a v-if="selectedAuthorData?.wikipediaZh" :href="selectedAuthorData.wikipediaZh" target="_blank" rel="noopener" class="v-pane-link">Wikipedia</a>
-                <a v-if="selectedAuthorData?.wikipediaEn" :href="selectedAuthorData.wikipediaEn" target="_blank" rel="noopener" class="v-pane-link">Wikipedia</a>
+                <a v-if="selectedAuthorData?.wikipediaZh" :href="selectedAuthorData.wikipediaZh" target="_blank" rel="noopener" class="v-pane-link">Wikipedia ZH</a>
+                <a v-if="selectedAuthorData?.wikipediaEn" :href="selectedAuthorData.wikipediaEn" target="_blank" rel="noopener" class="v-pane-link">Wikipedia EN</a>
                 <a v-if="selectedAuthorData?.wikidata" :href="`https://www.wikidata.org/wiki/${selectedAuthorData.wikidata}`" target="_blank" rel="noopener" class="v-pane-link">Wikidata</a>
               </div>
               <div v-if="selectedAuthorBio" class="v-pane-bio">
@@ -671,8 +671,8 @@ function tcy(n: number): string {
                     <span v-if="selectedAuthorWorkCount" class="h-pane-count">{{ t('piece.collected', { count: selectedAuthorWorkCount }) }}</span>
                   </div>
                   <div v-if="selectedAuthorData?.courtesyName || selectedAuthorData?.artName" class="h-pane-alt-names">
-                    <span v-if="selectedAuthorData?.courtesyName">字 {{ selectedAuthorData.courtesyName }}</span>
-                    <span v-if="selectedAuthorData?.artName">號 {{ selectedAuthorData.artName }}</span>
+                    <span v-if="selectedAuthorData?.courtesyName">{{ t('author.courtesyName', { name: selectedAuthorData.courtesyName }) }}</span>
+                    <span v-if="selectedAuthorData?.artName">{{ t('author.artName', { name: selectedAuthorData.artName }) }}</span>
                   </div>
                 </div>
               </div>
@@ -857,7 +857,7 @@ function tcy(n: number): string {
 .h-page { min-height: 100vh; }
 .h-nav {
   position: sticky; top: 0; z-index: 100;
-  background: var(--paper); opacity: 0.97;
+  background: var(--paper);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border-light);
   padding: 0 40px;