@hanology/cham-browser 0.4.41 → 0.4.43

package/package.json

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { annotationToPronSegment } from '../utils/annotationParser'
+import { toChineseNumber } from '../utils/chineseNumber'
 import PronunciationGroup from './PronunciationGroup.vue'
 import type { Annotation } from '../types'
 
@@ -124,8 +125,8 @@ onBeforeUnmount(() => {
         @mouseleave="emit('tooltipLeave')"
       >
         <div v-if="headword" class="ann-card-head" :class="dominantKind()">
+          <span class="ann-badge-count" v-if="annotations.length > 1">{{ toChineseNumber(annotations.length) }}</span>
           <span class="ann-headword">{{ headword }}</span>
-          <span class="ann-badge-count" v-if="annotations.length > 1">{{ annotations.length }}</span>
         </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>
@@ -157,8 +158,8 @@ onBeforeUnmount(() => {
         </button>
         <div class="ann-sheet-body" :class="{ vertical }">
           <div v-if="headword" class="ann-sheet-head" :class="dominantKind()">
+            <span class="ann-badge-count" v-if="annotations.length > 1">{{ toChineseNumber(annotations.length) }}</span>
             <span class="ann-headword">{{ headword }}</span>
-            <span class="ann-badge-count" v-if="annotations.length > 1">{{ annotations.length }}</span>
           </div>
           <div class="ann-sheet-scroll">
             <div v-for="ann in annotations" :key="ann.id" class="ann-entry">
@@ -174,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">{{ annotations.length }}</span>
+            <span v-if="annotations.length > 1" class="ann-badge-count-v">{{ toChineseNumber(annotations.length) }}</span>
           </div>
         </div>
       </div>
@@ -204,15 +205,16 @@ onBeforeUnmount(() => {
 }
 
 .ann-badge-count {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 3px;
+  font-size: 10px;
   font-family: var(--sans);
-  font-size: 11px;
   font-weight: 700;
-  color: var(--ink-faint);
-  background: var(--surface-warm);
-  border: 1px solid var(--border-light);
-  border-radius: 10px;
-  padding: 2px 8px;
-  letter-spacing: 0;
+  letter-spacing: 1px;
+  line-height: 1.5;
+  background: var(--vermillion);
+  color: #fff;
 }
 
 /* ─── Annotation entry ─── */
@@ -221,7 +223,7 @@ onBeforeUnmount(() => {
   border-bottom: 1px solid var(--border-light);
   font-size: 14px;
   color: var(--ink-mid);
-  letter-spacing: 0.5px;
+  letter-spacing: 1.5px;
   line-height: 1.8;
 }
 .ann-entry:last-child { border-bottom: none; padding-bottom: 0; }
@@ -252,7 +254,7 @@ onBeforeUnmount(() => {
 .ann-kind.etymology { background: #6b5b95; color: #fff; }
 .ann-kind.note,
 .ann-kind.definition { background: var(--ink); color: var(--paper); }
-.ann-kind.commentary { background: #c0392b; color: #fff; }
+.ann-kind.commentary { background: #c0392b; color: #fff; align-self: center; }
 .ann-kind.translation { background: #2c6e49; color: #fff; }
 .ann-kind.person { background: var(--ann-person); color: #fff; }
 .ann-kind.place { background: var(--ann-place); color: #fff; }
@@ -273,6 +275,7 @@ onBeforeUnmount(() => {
 .ann-text {
   white-space: pre-line;
   line-height: 1.8;
+  padding-top: 5px;
 }
 
 /* ─── Floating card ─── */
@@ -475,7 +478,7 @@ onBeforeUnmount(() => {
 .ann-card.vertical .ann-entry {
   flex-shrink: 0;
   border-bottom: none;
-  padding: 0 10px;
+  margin: 0 3px;
   border-right: 1px solid var(--border-light);
   writing-mode: vertical-rl;
   text-orientation: mixed;