@hanology/cham-browser 0.4.48 → 0.4.50

package/package.json

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

@@ -125,8 +125,8 @@ onBeforeUnmount(() => {
         @mouseleave="emit('tooltipLeave')"
       >
         <div v-if="headword" class="ann-card-head" :class="dominantKind()">
-          <div class="ann-badge-count" v-if="annotations.length > 1">{{ toChineseNumber(annotations.length) }}</div>
           <div class="ann-headword">{{ headword }}</div>
+          <div class="ann-badge-count" v-if="annotations.length > 1">{{ toChineseNumber(annotations.length) }}注</div>
         </div>
         <button class="ann-card-close" @click="dismiss" aria-label="關閉">
           <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 6L6 18M6 6l12 12"/></svg>
@@ -158,8 +158,8 @@ onBeforeUnmount(() => {
         </button>
         <div class="ann-sheet-body" :class="{ vertical }">
           <div v-if="headword" class="ann-sheet-head" :class="dominantKind()">
-            <div class="ann-badge-count" v-if="annotations.length > 1">{{ toChineseNumber(annotations.length) }}</div>
             <div class="ann-headword">{{ headword }}</div>
+            <div class="ann-badge-count" v-if="annotations.length > 1">{{ toChineseNumber(annotations.length) }}注</div>
           </div>
           <div class="ann-sheet-scroll">
             <div v-for="ann in annotations" :key="ann.id" class="ann-entry">
@@ -175,7 +175,7 @@ onBeforeUnmount(() => {
           </div>
           <div v-if="headword" class="ann-sheet-v-head" :class="dominantKind()">
             <span class="ann-sheet-v-word">{{ headword }}</span>
-            <span v-if="annotations.length > 1" class="ann-badge-count-v">{{ toChineseNumber(annotations.length) }}</span>
+            <span v-if="annotations.length > 1" class="ann-badge-count-v">{{ toChineseNumber(annotations.length) }}注</span>
           </div>
         </div>
       </div>

package/template/src/composables/useAnnotationRenderer.ts

@@ -160,22 +160,27 @@ export function useAnnotationTooltip() {
         bottom: '0',
       }
     } else if (layout.value === 'vertical') {
-      // Vertical mode: wide card with multi-column layout to the left
-      const cardW = 260
+      // Vertical mode: card next to hovered text
+      const maxW = 260
       const cardH = Math.min(vh - 16, 480)
       const gap = 12
-      let left = Math.max(8, rect.left - cardW - gap)
+      let left = Math.max(8, rect.left - maxW - gap)
       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) {
-        left = Math.min(rect.right + gap, vw - cardW - 8)
+      if (left < 8) {
+        left = rect.right + gap
+      }
+
+      // Clamp to viewport
+      if (left + maxW > vw - 8) {
+        left = Math.max(8, vw - maxW - 8)
       }
 
       style.value = {
         left: left + 'px',
         top: top + 'px',
-        width: cardW + 'px',
+        maxWidth: maxW + 'px',
         maxHeight: cardH + 'px',
       }
     } else {

package/template/src/views/PieceView.vue

@@ -841,6 +841,9 @@ function tcy(n: number): string {
 .v-nav-btn {
   writing-mode: vertical-rl;
   text-orientation: mixed;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
   padding: 20px 14px;
   background: var(--surface);
   border: 1px solid var(--border-light);
@@ -857,12 +860,12 @@ function tcy(n: number): string {
 .v-nav-btn:hover .v-nav-title { color: var(--vermillion); }
 .v-nav-dir {
   font-size: 16px; color: var(--vermillion);
-  margin-bottom: 0.5em;
+  margin-bottom: 0.3em;
 }
 .v-nav-label {
   font-size: 11px; color: var(--ink-faint);
   font-family: var(--sans); letter-spacing: 2px;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.3em;
 }
 .v-nav-title {
   font-size: 18px; font-weight: 700;