@hanology/cham-browser 0.4.17 → 0.4.19

package/package.json

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

package/template/src/components/AnnotationPane.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
   headwords: Record<string, string>
   layerLabels?: Record<string, string>
   activeId: string
+  vertical?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -35,7 +36,7 @@ function kindLabel(ann: Annotation): string {
     etymology: '詞源',
     note: '備注',
     definition: '釋義',
-    commentary: '評註',
+    commentary: '注',
     translation: '譯文',
     person: '人名',
     place: '地名',
@@ -75,7 +76,7 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
 <template>
   <Teleport to="body">
     <Transition name="ann-pane">
-      <div v-if="visible && annotations.length" class="ann-pane">
+      <div v-if="visible && annotations.length" class="ann-pane" :class="{ vertical }">
         <div class="ann-pane-header">
           <span class="ann-pane-title">注釋</span>
           <span class="ann-pane-count">{{ annotations.length }}</span>
@@ -305,4 +306,54 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
     transform: translateY(100%);
   }
 }
+
+/* ─── Vertical mode ─── */
+.ann-pane.vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  width: 220px;
+}
+
+.ann-pane.vertical .ann-pane-body {
+  display: flex;
+  flex-direction: row;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.ann-pane.vertical .ann-pane-entry {
+  padding: 10px 6px;
+  border-bottom: none;
+  border-right: 3px solid transparent;
+}
+
+.ann-pane.vertical .ann-pane-entry + .ann-pane-entry {
+  border-top: 1px solid var(--border-light);
+}
+
+.ann-pane.vertical .ann-pane-entry.active {
+  border-right-color: var(--vermillion);
+}
+
+.ann-pane.vertical .ann-pane-entry.active.pronunciation {
+  border-right-color: var(--jade);
+}
+
+.ann-pane.vertical .ann-pane-entry-head {
+  flex-direction: row;
+  gap: 4px;
+}
+
+.ann-pane.vertical .ann-pane-text {
+  line-height: 2;
+  letter-spacing: 1px;
+}
+
+.ann-pane.vertical .ann-pane-header {
+  flex-direction: row;
+}
+
+.ann-pane.vertical .ann-pane-close {
+  writing-mode: horizontal-tb;
+}
 </style>

package/template/src/components/AnnotationTooltip.vue

@@ -54,7 +54,7 @@ function kindLabel(ann: Annotation): string {
     etymology: '詞源',
     note: '備注',
     definition: '釋義',
-    commentary: '評註',
+    commentary: '注',
     translation: '譯文',
     person: '人名',
     place: '地名',
@@ -118,6 +118,7 @@ onBeforeUnmount(() => {
       <div
         v-if="!isMobile && stickyVisible && annotations.length"
         class="ann-card"
+        :class="{ vertical }"
         :style="style"
         @mouseenter="emit('tooltipEnter')"
         @mouseleave="emit('tooltipLeave')"
@@ -136,7 +137,7 @@ onBeforeUnmount(() => {
               <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
             </div>
             <div class="ann-entry-body">
-              <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
+              <div v-if="getSegment(ann)" class="ann-pron-h"><PronunciationGroup :segment="getSegment(ann)!" /></div>
               <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
             </div>
           </div>
@@ -149,6 +150,7 @@ onBeforeUnmount(() => {
       <div
         v-if="isMobile && stickyVisible && annotations.length"
         class="ann-sheet"
+        :class="{ vertical }"
       >
         <button class="ann-sheet-handle" @click="dismiss">
           <span class="ann-handle-bar" />
@@ -164,7 +166,7 @@ onBeforeUnmount(() => {
               <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
             </div>
             <div class="ann-entry-body">
-              <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
+              <div v-if="getSegment(ann)" class="ann-pron-h"><PronunciationGroup :segment="getSegment(ann)!" /></div>
               <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
             </div>
           </div>
@@ -407,4 +409,86 @@ onBeforeUnmount(() => {
 @media (min-width: 768px) {
   .ann-sheet { display: none; }
 }
+
+/* ─── Vertical mode ─── */
+.ann-card.vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  flex-direction: row;
+}
+
+.ann-card.vertical .ann-card-head {
+  padding: 10px 6px;
+}
+
+.ann-card.vertical .ann-card-scroll {
+  display: flex;
+  flex-direction: row;
+  padding: 8px 6px;
+  overflow-y: auto;
+}
+
+.ann-card.vertical .ann-entry {
+  border-bottom: none;
+  padding: 8px 0;
+}
+
+.ann-card.vertical .ann-entry + .ann-entry {
+  border-top: 1px solid var(--border-light);
+}
+
+.ann-card.vertical .ann-card-close {
+  writing-mode: horizontal-tb;
+  top: 4px;
+  right: 4px;
+}
+
+.ann-card.vertical .ann-pron-h {
+  writing-mode: horizontal-tb;
+}
+
+.ann-card.vertical .ann-entry-body {
+  padding-left: 0;
+}
+
+.ann-card.vertical .ann-text {
+  white-space: pre-line;
+  line-height: 2;
+}
+
+.ann-sheet.vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  flex-direction: row;
+}
+
+.ann-sheet.vertical .ann-sheet-handle {
+  writing-mode: horizontal-tb;
+}
+
+.ann-sheet.vertical .ann-sheet-scroll {
+  display: flex;
+  flex-direction: row;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 4px 16px 24px;
+}
+
+.ann-sheet.vertical .ann-entry {
+  border-bottom: none;
+  padding: 8px 0;
+}
+
+.ann-sheet.vertical .ann-entry + .ann-entry {
+  border-top: 1px solid var(--border-light);
+}
+
+.ann-sheet.vertical .ann-pron-h {
+  writing-mode: horizontal-tb;
+}
+
+.ann-sheet.vertical .ann-text {
+  white-space: pre-line;
+  line-height: 2;
+}
 </style>

package/template/src/components/ReadingProgress.vue

@@ -67,17 +67,20 @@ onUnmounted(detach)
 .rp {
   position: fixed;
   z-index: 1001;
-  background: linear-gradient(90deg, var(--vermillion), var(--vermillion-light));
   pointer-events: none;
   will-change: width, height;
+  transition: width 0.1s ease, height 0.1s ease;
 }
 .rp:not(.rp-v) {
   top: 0; left: 0;
   height: 2px;
+  background: var(--vermillion);
+  box-shadow: 0 0 8px rgba(194, 58, 43, 0.3);
 }
 .rp-v {
   top: 0; left: 0;
   width: 2px;
-  background: linear-gradient(180deg, var(--vermillion), var(--vermillion-light));
+  background: var(--vermillion);
+  box-shadow: 0 0 8px rgba(194, 58, 43, 0.3);
 }
 </style>

package/template/src/components/SectionBlock.vue

@@ -172,39 +172,51 @@ const paragraphsHtml = computed(() => {
   text-orientation: mixed;
   height: 100vh;
   flex-shrink: 0;
-  padding: 32px 20px;
+  padding: 32px 24px;
   border-right: 1px solid var(--border);
   overflow-x: auto;
   overflow-y: hidden;
   opacity: 1;
   transform: none;
   transition: none;
+  scrollbar-width: thin;
+  scrollbar-color: var(--gold) transparent;
 }
+.sb-vertical::-webkit-scrollbar { height: 3px; }
+.sb-vertical::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 .sb-vertical .sb-header {
   flex-direction: column;
   align-items: flex-start;
   margin-bottom: 0;
-  margin-left: 16px;
+  margin-left: 20px;
   padding-bottom: 0;
   border-bottom: none;
   padding-left: 16px;
-  border-left: 1px solid var(--border);
+  border-left: 2px solid var(--vermillion);
 }
 .sb-vertical .sb-num {
   width: auto; height: auto;
   border-radius: 0;
   background: none;
   color: var(--vermillion);
-  font-size: 18px;
+  font-size: 16px;
+}
+.sb-vertical .sb-header h3 {
+  font-size: 20px;
+  letter-spacing: 6px;
 }
 .sb-vertical .sb-text {
   margin-left: 16px;
   text-align: start;
+  font-size: var(--body-font-size, 16px);
+  line-height: 2.2;
+  letter-spacing: 1px;
 }
 .sb-vertical .sb-text :deep(p) {
   margin-bottom: 0;
   margin-left: 12px;
   text-indent: 0;
+  line-height: 2.4;
 }
 .sb-vertical .sb-ann-entry {
   margin-bottom: 0;

package/template/src/components/SideNav.vue

@@ -347,10 +347,13 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 }
 
 @media (max-width: 768px) {
-  .sidenav { width: 44px; padding: 8px 0; gap: 6px; }
-  .sn-brand { width: 32px; height: 38px; }
-  .sn-seal { font-size: 15px; }
-  .sn-btn { width: 30px; height: 30px; }
-  .sn-context { font-size: 10px; max-height: 80px; }
+  .sidenav { width: 44px; padding: 8px 0; gap: 5px; }
+  .sn-brand { width: 30px; height: 36px; margin-bottom: 2px; }
+  .sn-seal { font-size: 14px; }
+  .sn-btn { width: 28px; height: 28px; }
+  .sn-btn svg { width: 15px; height: 15px; }
+  .sn-context { font-size: 10px; max-height: 70px; }
+  .sn-settings { width: 180px; right: 52px; padding: 12px; }
+  .sn-layout-tag { width: 20px; height: 20px; font-size: 10px; }
 }
 </style>

package/template/src/components/VerticalScroll.vue

@@ -58,7 +58,7 @@ function onTap(event: MouseEvent) {
 .v-scroll {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  height: calc(100vh - 120px);
+  height: calc(100vh - 100px);
   overflow-x: auto; overflow-y: hidden;
   padding: 32px 24px;
   background: var(--surface);
@@ -67,15 +67,15 @@ function onTap(event: MouseEvent) {
   box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.08);
   position: relative;
   scrollbar-width: thin;
-  scrollbar-color: var(--gold) var(--paper);
+  scrollbar-color: var(--gold) transparent;
 }
-.v-scroll::-webkit-scrollbar { height: 4px; }
+.v-scroll::-webkit-scrollbar { height: 3px; }
 .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);
+  letter-spacing: 10px; margin-left: 24px;
+  padding-left: 20px; border-left: 3px solid var(--vermillion);
   line-height: 1.6;
 }
 .v-scroll-author {
@@ -84,9 +84,9 @@ function onTap(event: MouseEvent) {
 }
 .v-scroll-clickable { cursor: pointer; transition: color 0.15s; }
 .v-scroll-clickable:hover { color: var(--vermillion); }
-.v-scroll-body { margin-left: 28px; }
+.v-scroll-body { margin-left: 24px; }
 .v-scroll-line {
-  font-size: var(--main-font-size, 24px); line-height: 2.4; letter-spacing: 8px;
+  font-size: var(--main-font-size, 24px); line-height: 2.4; letter-spacing: 6px;
   color: var(--ink); display: block;
 }
 

package/template/src/composables/useAnnotationRenderer.ts

@@ -160,11 +160,12 @@ export function useAnnotationTooltip() {
         bottom: '0',
       }
     } else if (layout.value === 'vertical') {
-      // Vertical mode: card to the left of the annotation
-      const cardW = 340
+      // Vertical mode: tall narrow card to the left of the annotation
+      const cardW = 180
+      const cardH = Math.min(vh - 16, 480)
       const gap = 12
       let left = Math.max(8, rect.left - cardW - gap)
-      let top = Math.max(8, Math.min(rect.top, vh - 300))
+      let top = Math.max(8, Math.min(rect.top, vh - cardH))
 
       // If not enough room on left, go right
       if (rect.left - cardW - gap < 8) {
@@ -175,7 +176,7 @@ export function useAnnotationTooltip() {
         left: left + 'px',
         top: top + 'px',
         width: cardW + 'px',
-        maxHeight: Math.min(vh - 16, 500) + 'px',
+        maxHeight: cardH + 'px',
       }
     } else {
       // Horizontal mode: card below/above the annotation

package/template/src/styles/main.css

@@ -228,8 +228,9 @@ button { font-family: inherit; }
   scrollbar-width: thin;
   scrollbar-color: var(--gold) transparent;
   scroll-snap-type: x proximity;
+  scroll-padding: 0 48px;
 }
-.v-page::-webkit-scrollbar { height: 4px; }
+.v-page::-webkit-scrollbar { height: 3px; }
 .v-page::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 
 /* ===== VIEW LOADING STATE ===== */
@@ -284,3 +285,19 @@ button { font-family: inherit; }
   object-fit: contain;
   animation: pulse 1.2s ease-in-out infinite;
 }
+
+/* ===== LAYOUT TRANSITION ===== */
+.v-root, .h-root {
+  transition: opacity 0.2s ease;
+}
+
+/* ===== 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);
+}
+
+[data-theme="dark"] .sb-vertical,
+[data-theme="oled"] .sb-vertical {
+  border-right-color: var(--border-light);
+}

package/template/src/views/PieceView.vue

@@ -495,6 +495,7 @@ function tcy(n: number): string {
         :headwords="annotationHeadwords"
         :layer-labels="layerLabels"
         :active-id="paneActiveId"
+        :vertical="isVertical"
         @close="paneVisible = false"
         @select="onPaneSelect"
       />
@@ -711,6 +712,7 @@ function tcy(n: number): string {
     :headword="interaction.headword"
     :layer-labels="layerLabels"
     :style="interaction.style"
+    :vertical="isVertical"
     @close="interaction.dismiss"
     @tooltip-enter="interaction.onTooltipEnter"
     @tooltip-leave="interaction.onTooltipLeave"
@@ -740,13 +742,13 @@ function tcy(n: number): string {
   align-items: flex-start;
   justify-content: center;
   gap: 16px;
-  padding: 40px 24px;
+  padding: 40px 20px;
   border-right: 1px solid var(--border);
   scroll-snap-align: start;
 }
 .v-poem-title {
   font-size: 40px; font-weight: 900;
-  letter-spacing: 12px; color: var(--ink);
+  letter-spacing: 10px; color: var(--ink);
   padding-left: 20px;
   border-left: 4px solid var(--vermillion);
   line-height: 1.6;
@@ -781,7 +783,7 @@ function tcy(n: number): string {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  padding: 24px;
+  padding: 20px 16px;
 }
 
 .v-multipart {
@@ -789,15 +791,15 @@ function tcy(n: number): string {
   flex-direction: row-reverse;
   align-items: flex-start;
   gap: 0;
-  max-height: calc(100vh - 120px);
+  max-height: calc(100vh - 100px);
   overflow-x: auto;
   overflow-y: hidden;
-  padding: 24px 16px;
+  padding: 20px 16px;
   scrollbar-width: thin;
-  scrollbar-color: var(--gold) var(--paper);
+  scrollbar-color: var(--gold) transparent;
 }
 
-.v-multipart::-webkit-scrollbar { height: 4px; }
+.v-multipart::-webkit-scrollbar { height: 3px; }
 .v-multipart::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 
 .v-section {
@@ -829,15 +831,17 @@ function tcy(n: number): string {
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 24px 12px;
+  padding: 24px 16px;
   gap: 32px;
   scroll-snap-align: start;
+  background: var(--surface);
+  border-right: 1px solid var(--border-light);
 }
 .v-nav-spacer { flex: 1; }
 .v-nav-btn {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  padding: 20px 12px;
+  padding: 20px 14px;
   background: var(--surface);
   border: 1px solid var(--border-light);
   border-radius: 6px;
@@ -1343,10 +1347,16 @@ function tcy(n: number): string {
 @media (max-width: 768px) {
   /* ─── 直排模式 ─── */
   .v-page { margin-right: var(--nav-width, 44px); }
-  .v-title-col { padding: 24px 16px; }
-  .v-poem-title { font-size: 32px; letter-spacing: 8px; }
-  .v-poem-author { font-size: 20px; }
-  .v-poem-col { padding: 16px; }
+  .v-title-col { padding: 20px 12px; }
+  .v-poem-title { font-size: 28px; letter-spacing: 6px; padding-left: 12px; }
+  .v-poem-author { font-size: 18px; letter-spacing: 4px; }
+  .v-poem-col { padding: 12px 8px; }
+  .v-inline-nav { padding: 0 4px; }
+  .v-inav { width: 26px; height: 36px; font-size: 12px; }
+  .v-inav-spacer { width: 26px; height: 36px; }
+  .v-nav { padding: 16px 8px; gap: 20px; }
+  .v-nav-btn { padding: 14px 10px; }
+  .v-nav-title { font-size: 16px; letter-spacing: 2px; }
 
   /* ─── 橫排模式導航 ─── */
   .h-nav { padding: 0 16px; }