@hanology/cham-browser 0.4.81 → 0.4.83

package/package.json

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

@@ -110,22 +110,24 @@ onBeforeUnmount(() => {
         @mouseenter="emit('tooltipEnter')"
         @mouseleave="emit('tooltipLeave')"
       >
-        <div v-if="headword" class="ann-card-head" :class="dominantKind()">
-          <div class="ann-headword">{{ headword }}</div>
-          <div class="ann-badge-count" v-if="annotations.length > 1">{{ t('annotation.noteCount', { count: toChineseNumber(annotations.length) }) }}</div>
-        </div>
-        <button class="ann-card-close" @click="dismiss" :aria-label="t('action.close')">
-          <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>
-        </button>
-        <div class="ann-card-scroll">
-          <div v-for="ann in annotations" :key="ann.id" class="ann-entry">
-            <div class="ann-entry-header">
-              <span class="ann-kind" :class="ann.kind">{{ kindLabel(ann) }}</span>
-            </div>
-            <div class="ann-entry-body">
-              <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
-              <div v-if="getSegment(ann)" class="ann-pron-h"><PronunciationGroup :segment="getSegment(ann)!" /></div>
-              <span v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</span>
+        <div class="ann-card-inner">
+          <div v-if="headword" class="ann-card-head" :class="dominantKind()">
+            <div class="ann-headword">{{ headword }}</div>
+            <div class="ann-badge-count" v-if="annotations.length > 1">{{ t('annotation.noteCount', { count: toChineseNumber(annotations.length) }) }}</div>
+          </div>
+          <button class="ann-card-close" @click="dismiss" :aria-label="t('action.close')">
+            <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>
+          </button>
+          <div class="ann-card-scroll">
+            <div v-for="ann in annotations" :key="ann.id" class="ann-entry">
+              <div class="ann-entry-header">
+                <span class="ann-kind" :class="ann.kind">{{ kindLabel(ann) }}</span>
+              </div>
+              <div class="ann-entry-body">
+                <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
+                <div v-if="getSegment(ann)" class="ann-pron-h"><PronunciationGroup :segment="getSegment(ann)!" /></div>
+                <span v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -485,21 +487,24 @@ onBeforeUnmount(() => {
   overflow-x: auto;
   flex: 1;
   min-width: 0;
+  align-items: stretch;
 }
 
 .ann-card.vertical .ann-entry {
-  flex-shrink: 0;
-  border-bottom: none;
-  margin: 0 3px;
-  border-right: 1px solid var(--border-light);
   writing-mode: vertical-rl;
   text-orientation: mixed;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
+  flex-shrink: 0;
+  padding: 0 6px;
+  margin: 0;
+  border-bottom: none;
+  border-right: 1px solid var(--border-light);
 }
 
 .ann-card.vertical .ann-entry:first-child {
+  padding: 0 6px;
   border-right: none;
 }
 
@@ -514,12 +519,17 @@ onBeforeUnmount(() => {
   flex-shrink: 0;
 }
 
-.ann-card.vertical .ann-pron-h {
-  writing-mode: vertical-lr;
+.ann-card.vertical .ann-entry-header {
+  gap: 4px;
+  margin-bottom: 4px;
 }
 
 .ann-card.vertical .ann-entry-body {
-  padding-left: 0;
+  padding: 0;
+}
+
+.ann-card.vertical .ann-pron-h {
+  writing-mode: vertical-lr;
 }
 
 .ann-card.vertical .ann-text {
@@ -527,10 +537,6 @@ onBeforeUnmount(() => {
   line-height: 2;
 }
 
-.ann-card.vertical .ann-entry-header {
-  gap: 4px;
-}
-
 .ann-card.vertical .ann-entry:last-child {
   border-right: none;
 }

package/template/src/composables/useAnnotationRenderer.ts

@@ -139,12 +139,17 @@ export function useAnnotationTooltip() {
     const el = (event.target as HTMLElement).closest('.ann-target') as HTMLElement | null
     const rect = (el ?? event.target as HTMLElement).getBoundingClientRect()
 
-    // Extract headword text (strip the annotation number)
+    // Extract headword text from all .ann-target elements sharing the same data-ann-ids
     if (el) {
-      const clone = el.cloneNode(true) as HTMLElement
-      const nums = clone.querySelectorAll('.ann-num, sup')
-      nums.forEach(n => n.remove())
-      headword.value = clone.textContent?.trim() || ''
+      const ids = el.getAttribute('data-ann-ids') || ''
+      const container = el.closest('.v-scroll-line, .v-scroll-body, .sb-text, .part-block, [class*="section"]') || el.parentElement
+      const allTargets = container ? container.querySelectorAll(`.ann-target[data-ann-ids="${ids}"]`) : [el]
+      const text = [...allTargets].map(t => {
+        const clone = t.cloneNode(true) as HTMLElement
+        clone.querySelectorAll('.ann-num, sup, rt, rp').forEach(n => n.remove())
+        return clone.textContent?.trim() || ''
+      }).join('')
+      headword.value = text || el.textContent?.trim() || ''
     } else {
       headword.value = ''
     }