@hanology/cham-browser 0.3.5 → 0.3.6

package/package.json

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

package/template/src/components/AnnotationTooltip.vue

@@ -198,10 +198,18 @@ onBeforeUnmount(() => {
 }
 
 /* ─── Transition ─── */
-.ann-fade-enter-active, .ann-fade-leave-active {
-  transition: opacity 0.15s ease;
+.ann-fade-enter-active {
+  transition: opacity var(--dur-fast, 0.15s) ease, transform var(--dur-mid, 0.25s) cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-.ann-fade-enter-from, .ann-fade-leave-to {
+.ann-fade-leave-active {
+  transition: opacity var(--dur-fast, 0.15s) ease, transform var(--dur-fast, 0.15s) ease;
+}
+.ann-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.92) translateY(4px);
+}
+.ann-fade-leave-to {
   opacity: 0;
+  transform: scale(0.96);
 }
 </style>

package/template/src/components/BackToTop.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const visible = ref(false)
+let ticking = false
+
+function onScroll() {
+  if (ticking) return
+  ticking = true
+  requestAnimationFrame(() => {
+    visible.value = window.scrollY > 400
+    ticking = false
+  })
+}
+
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }))
+onUnmounted(() => window.removeEventListener('scroll', onScroll))
+</script>
+
+<template>
+  <Transition name="btt">
+    <button v-if="visible" class="btt" @click="scrollToTop" aria-label="回到頂部">
+      <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>
+    </button>
+  </Transition>
+</template>
+
+<style scoped>
+.btt {
+  position: fixed;
+  bottom: 80px;
+  right: 24px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--ink-light);
+  cursor: pointer;
+  z-index: 400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.1);
+  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.btt:hover {
+  background: var(--ink);
+  color: var(--paper);
+  border-color: var(--ink);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.16);
+}
+
+.btt-enter-active { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.btt-leave-active { transition: all 0.15s ease; }
+.btt-enter-from { opacity: 0; transform: translateY(12px) scale(0.8); }
+.btt-leave-to { opacity: 0; transform: translateY(8px) scale(0.9); }
+</style>

package/template/src/components/PoemCard.vue

@@ -54,6 +54,13 @@ const preview = computed(() => {
   font-size: 11px; color: var(--ink-faint);
   font-family: var(--sans); letter-spacing: 2px;
   margin-bottom: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border: 1px solid var(--border-light);
+  border-radius: 2px;
+  background: var(--surface-warm);
 }
 .pc-title {
   font-size: 20px; font-weight: 700;

package/template/src/components/ReadingToolbar.vue

@@ -155,6 +155,25 @@ function close() { open.value = false }
   transition: all 0.15s;
 }
 .rt-opt:hover { border-color: var(--ink); color: var(--ink); }
+.rt-opt.rt-theme {
+  position: relative;
+  padding-left: 22px;
+}
+.rt-opt.rt-theme::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+}
+.rt-opt.theme-light::before { background: #faf6ee; }
+.rt-opt.theme-sepia::before { background: #f0e4c8; }
+.rt-opt.theme-dark::before { background: #1c1c1e; border-color: #48484a; }
+.rt-opt.theme-oled::before { background: #000; border-color: #333; }
 .rt-opt.active {
   background: var(--ink);
   color: var(--paper);

package/template/src/styles/main.css

@@ -90,23 +90,36 @@
   --sans: 'Noto Sans TC', 'PingFang TC', sans-serif;
   --nav-width: 56px;
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --dur-fast: 0.15s;
+  --dur-mid: 0.25s;
+  --dur-slow: 0.4s;
 }
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
-html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
+html {
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  hanging-punctuation: first last;
+}
 body {
   font-family: var(--serif);
   background: var(--paper);
   color: var(--ink);
   line-height: 1.8;
   min-height: 100vh;
+  overflow-x: hidden;
 }
 ::selection { background: var(--vermillion); color: var(--selection-text); }
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
+html[dir="rtl"] ::-webkit-scrollbar-thumb { background: var(--gold); }
 
 a { color: inherit; text-decoration: none; }
+button { font-family: inherit; }
 
 /* ===== LOADING SCREEN ===== */
 #app-loading {
@@ -166,6 +179,18 @@ a { color: inherit; text-decoration: none; }
   from { opacity: 0; transform: translateY(16px); }
   to { opacity: 1; transform: translateY(0); }
 }
+@keyframes cardEnter {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.92); }
+  to { opacity: 1; transform: scale(1); }
+}
 
 /* ===== RESPONSIVE ===== */
 @media (max-width: 768px) {

package/template/src/views/AboutView.vue

@@ -5,6 +5,7 @@ import { useReadingMode } from '../composables/useReadingMode'
 import { useHorizontalScroll } from '../composables/useHorizontalScroll'
 import SideNav from '../components/SideNav.vue'
 import ReadingToolbar from '../components/ReadingToolbar.vue'
+import BackToTop from '../components/BackToTop.vue'
 import { useSiteConfig } from '../composables/useSiteConfig'
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -63,6 +64,7 @@ function goHome() { router.push('/') }
         <p>Hanology is a digital library for classical Chinese texts. We believe that the wisdom of antiquity should not be locked behind impenetrable editions or forgotten in dusty shelves. By combining rigorous scholarship with thoughtful design, we make the classics accessible, beautiful, and alive for every reader.</p>
       </div>
     </div>
+    <BackToTop />
     <ReadingToolbar />
   </div>
 </template>

package/template/src/views/BookHome.vue

@@ -8,6 +8,7 @@ import { useHorizontalScroll } from '../composables/useHorizontalScroll'
 import PoemCard from '../components/PoemCard.vue'
 import SideNav from '../components/SideNav.vue'
 import ReadingToolbar from '../components/ReadingToolbar.vue'
+import BackToTop from '../components/BackToTop.vue'
 
 const props = defineProps<{ bookId: string }>()
 const router = useRouter()
@@ -128,14 +129,17 @@ function scrollToCatalog() {
       </div>
       <div class="h-grid">
         <PoemCard
-          v-for="piece in filtered"
+          v-for="(piece, idx) in filtered"
           :key="piece.num"
           :poem="piece"
+          :style="{ animationDelay: Math.min(idx * 0.04, 0.8) + 's' }"
+          class="h-card-anim"
           @click="openPiece(piece.num)"
         />
       </div>
     </section>
 
+    <BackToTop />
     <ReadingToolbar />
   </div>
 </template>
@@ -359,6 +363,9 @@ function scrollToCatalog() {
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 16px;
 }
+.h-card-anim {
+  animation: cardEnter 0.4s var(--ease-out-expo) both;
+}
 
 @media (max-width: 768px) {
   .h-stats { gap: 24px; }

package/template/src/views/LibraryHome.vue

@@ -9,6 +9,7 @@ import { useHorizontalScroll } from '../composables/useHorizontalScroll'
 import BookCard from '../components/BookCard.vue'
 import SideNav from '../components/SideNav.vue'
 import ReadingToolbar from '../components/ReadingToolbar.vue'
+import BackToTop from '../components/BackToTop.vue'
 import { useSiteConfig } from '../composables/useSiteConfig'
 import type { BookMeta } from '../types'
 
@@ -127,7 +128,7 @@ function openBook(bookId: string) {
           <div
             v-for="(book, bi) in group.books"
             :key="book.id"
-            class="lib-card"
+            class="lib-card lib-card-anim"
             :style="{ animationDelay: bi * 0.06 + 's' }"
             @click="openBook(book.id)"
           >
@@ -146,6 +147,7 @@ function openBook(bookId: string) {
         </div>
       </div>
       <ReadingToolbar />
+      <BackToTop />
     </div>
   </div>
 </template>
@@ -385,6 +387,10 @@ function openBook(bookId: string) {
   gap: 12px;
 }
 
+.lib-card-anim {
+  animation: cardEnter 0.4s var(--ease-out-expo) both;
+}
+
 .lib-card {
   display: flex;
   flex-direction: column;

package/template/src/views/PieceView.vue

@@ -15,6 +15,7 @@ import AnnotationControlBar from '../components/AnnotationControlBar.vue'
 import SideNav from '../components/SideNav.vue'
 import PartGroup from '../components/PartGroup.vue'
 import ReadingProgress from '../components/ReadingProgress.vue'
+import BackToTop from '../components/BackToTop.vue'
 import type { Piece, Annotation, AnnotationLayer, Part } from '../types'
 
 const props = defineProps<{ bookId: string; num: string | number }>()
@@ -387,19 +388,21 @@ function tcy(n: number): string {
       />
 
       <Teleport to="body">
-        <div v-if="authorPaneOpen" class="v-overlay" @click="closeAuthorPane">
-          <div class="v-author-pane" @click.stop>
-            <button class="v-pane-close" @click="closeAuthorPane">✕</button>
-            <div class="v-pane-header">
-              <div class="v-pane-name">{{ selectedAuthorName }}</div>
-            </div>
-            <div v-if="selectedAuthorBio" class="v-pane-bio">
-              <div v-for="p in selectedAuthorBio.split('\n').filter(l => l.trim())" :key="p" class="v-pane-p">
-                {{ p.trim() }}
+        <Transition name="overlay">
+          <div v-if="authorPaneOpen" class="v-overlay" @click="closeAuthorPane">
+            <div class="v-author-pane" @click.stop>
+              <button class="v-pane-close" @click="closeAuthorPane">✕</button>
+              <div class="v-pane-header">
+                <div class="v-pane-name">{{ selectedAuthorName }}</div>
+              </div>
+              <div v-if="selectedAuthorBio" class="v-pane-bio">
+                <div v-for="p in selectedAuthorBio.split('\n').filter(l => l.trim())" :key="p" class="v-pane-p">
+                  {{ p.trim() }}
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </Transition>
       </Teleport>
     </div>
 
@@ -530,8 +533,11 @@ function tcy(n: number): string {
         @tooltip-leave="interaction.onTooltipLeave"
       />
 
+      <BackToTop />
+
       <Teleport to="body">
-        <div v-if="authorPaneOpen" class="h-overlay" @click="closeAuthorPane">
+        <Transition name="overlay">
+          <div v-if="authorPaneOpen" class="h-overlay" @click="closeAuthorPane">
           <div class="h-pane" @click.stop>
             <button class="h-pane-close" @click="closeAuthorPane">✕</button>
             <div class="h-pane-header">
@@ -546,7 +552,7 @@ function tcy(n: number): string {
               </div>
             </div>
           </div>
-        </div>
+        </Transition>
       </Teleport>
     </div>
   </div>
@@ -791,40 +797,63 @@ function tcy(n: number): string {
 .h-nav-bottom {
   max-width: min(680px, calc(100vw - 80px));
   margin: 0 auto 60px;
-  display: flex; justify-content: space-between; gap: 16px;
+  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
 }
 .h-nav-btn {
-  flex: 1; padding: 16px 24px;
+  padding: 20px 24px;
   background: var(--surface); border: 1px solid var(--border-light);
   border-radius: 8px; cursor: pointer;
-  transition: all 0.2s ease; font-family: var(--serif);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  font-family: var(--serif);
   text-align: left;
+  position: relative;
+  overflow: hidden;
+}
+.h-nav-btn::after {
+  content: '';
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 2px;
+  background: var(--vermillion);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+.h-nav-btn:hover {
+  border-color: var(--gold);
+  box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.1);
+  transform: translateY(-2px);
 }
-.h-nav-btn:hover { border-color: var(--gold); box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.08); }
+.h-nav-btn:hover::after { transform: scaleX(1); }
 .h-nav-btn.h-nav-next { text-align: right; }
 .h-nav-label { font-size: 11px; color: var(--ink-faint); font-family: var(--sans); letter-spacing: 2px; margin-bottom: 4px; }
 .h-nav-title { font-size: 16px; font-weight: 600; letter-spacing: 1px; color: var(--ink); }
 
 .h-overlay {
   position: fixed; inset: 0;
-  background: rgba(var(--shadow-rgb), 0.2);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  background: rgba(var(--shadow-rgb), 0.24);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   z-index: 200;
   display: flex; justify-content: flex-end;
-  animation: fadeIn 0.2s ease;
 }
-@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 .h-pane {
   width: min(420px, 90vw);
   height: 100vh;
   background: var(--paper);
   padding: 32px;
   overflow-y: auto;
-  animation: slideIn 0.25s ease;
   box-shadow: -8px 0 32px rgba(var(--shadow-rgb), 0.1);
 }
-@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
+
+/* Overlay transition */
+.overlay-enter-active { transition: opacity var(--dur-mid, 0.25s) ease; }
+.overlay-enter-active .h-pane { transition: transform var(--dur-mid, 0.25s) cubic-bezier(0.34, 1.56, 0.64, 1); }
+.overlay-leave-active { transition: opacity var(--dur-fast, 0.15s) ease; }
+.overlay-leave-active .h-pane { transition: transform var(--dur-fast, 0.15s) ease; }
+.overlay-enter-from { opacity: 0; }
+.overlay-enter-from .h-pane { transform: translateX(100%); }
+.overlay-leave-to { opacity: 0; }
+.overlay-leave-to .h-pane { transform: translateX(40px); }
 .h-pane-close {
   display: block; margin-left: auto;
   width: 36px; height: 36px;
@@ -856,12 +885,11 @@ function tcy(n: number): string {
 
 .v-overlay {
   position: fixed; inset: 0;
-  background: rgba(var(--shadow-rgb), 0.2);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  background: rgba(var(--shadow-rgb), 0.24);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   z-index: 200;
   display: flex; justify-content: flex-start;
-  animation: fadeIn 0.2s ease;
 }
 .v-author-pane {
   writing-mode: vertical-rl;
@@ -871,9 +899,7 @@ function tcy(n: number): string {
   padding: 32px 24px;
   overflow-x: auto;
   box-shadow: 8px 0 32px rgba(var(--shadow-rgb), 0.1);
-  animation: slideInV 0.25s ease;
 }
-@keyframes slideInV { from { transform: translateX(-100%); } to { transform: translateX(0); } }
 .v-pane-close {
   display: block;
   width: 32px; height: 32px;