@hanology/cham-browser 0.4.14 → 0.4.15

package/package.json

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

@@ -7,6 +7,7 @@ import type { Annotation } from '../types'
 const props = defineProps<{
   visible: boolean
   annotations: Annotation[]
+  headword?: string
   layerLabels?: Record<string, string>
   style?: Record<string, string>
   vertical?: boolean
@@ -64,6 +65,15 @@ function kindLabel(ann: Annotation): string {
   return map[ann.kind] || ann.kind
 }
 
+function dominantKind(): string {
+  if (!props.annotations.length) return ''
+  const counts: Record<string, number> = {}
+  for (const a of props.annotations) {
+    counts[a.kind] = (counts[a.kind] || 0) + 1
+  }
+  return Object.entries(counts).sort((a, b) => b[1] - a[1])[0][0]
+}
+
 function onDocClick(e: MouseEvent) {
   if (!stickyVisible.value) return
   const el = (e.target as HTMLElement)
@@ -79,16 +89,25 @@ function onDocTouchMove(e: TouchEvent) {
   dismiss()
 }
 
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && stickyVisible.value) {
+    e.preventDefault()
+    dismiss()
+  }
+}
+
 onMounted(() => {
   window.addEventListener('resize', onResize, { passive: true })
   document.addEventListener('click', onDocClick, true)
   document.addEventListener('touchmove', onDocTouchMove, { passive: true })
+  document.addEventListener('keydown', onKeydown)
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', onResize)
   document.removeEventListener('click', onDocClick, true)
   document.removeEventListener('touchmove', onDocTouchMove)
+  document.removeEventListener('keydown', onKeydown)
 })
 </script>
 
@@ -103,17 +122,23 @@ onBeforeUnmount(() => {
         @mouseenter="emit('tooltipEnter')"
         @mouseleave="emit('tooltipLeave')"
       >
+        <div v-if="headword" class="ann-card-head" :class="dominantKind()">
+          <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>
         </button>
         <div class="ann-card-scroll">
-          <div v-for="ann in annotations" :key="ann.id" class="ann-entry" :class="ann.kind">
-            <div class="ann-head">
+          <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>
               <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
             </div>
-            <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
-            <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
+            <div class="ann-entry-body">
+              <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
+              <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -128,14 +153,20 @@ onBeforeUnmount(() => {
         <button class="ann-sheet-handle" @click="dismiss">
           <span class="ann-handle-bar" />
         </button>
+        <div v-if="headword" class="ann-sheet-head" :class="dominantKind()">
+          <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" :class="ann.kind">
-            <div class="ann-head">
+          <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>
               <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
             </div>
-            <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
-            <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
+            <div class="ann-entry-body">
+              <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
+              <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -144,7 +175,38 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-/* ─── Shared annotation entry ─── */
+/* ─── Headword header ─── */
+.ann-card-head,
+.ann-sheet-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-light);
+  background: var(--surface);
+}
+
+.ann-headword {
+  font-family: var(--serif);
+  font-size: 22px;
+  font-weight: 900;
+  letter-spacing: 4px;
+  color: var(--ink);
+}
+
+.ann-badge-count {
+  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;
+}
+
+/* ─── Annotation entry ─── */
 .ann-entry {
   padding: 10px 0;
   border-bottom: 1px solid var(--border-light);
@@ -156,11 +218,15 @@ onBeforeUnmount(() => {
 .ann-entry:last-child { border-bottom: none; padding-bottom: 0; }
 .ann-entry:first-child { padding-top: 0; }
 
-.ann-head {
+.ann-entry-header {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  margin-bottom: 2px;
+  margin-bottom: 3px;
+}
+
+.ann-entry-body {
+  padding-left: 2px;
 }
 
 .ann-kind {
@@ -201,23 +267,25 @@ onBeforeUnmount(() => {
   line-height: 1.8;
 }
 
-/* ─── Desktop/Tablet floating card ─── */
+/* ─── Floating card ─── */
 .ann-card {
   position: fixed;
   background: var(--surface-warm);
   border: 1px solid var(--border);
   border-radius: 10px;
-  box-shadow: 0 12px 40px rgba(var(--shadow-rgb), 0.18);
+  box-shadow: 0 12px 48px rgba(var(--shadow-rgb), 0.2), 0 2px 8px rgba(var(--shadow-rgb), 0.06);
   z-index: 1000;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
 
 .ann-card-close {
   position: absolute;
-  top: 6px;
-  right: 6px;
+  top: 8px;
+  right: 8px;
   width: 22px;
   height: 22px;
   border: none;
@@ -229,17 +297,21 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   transition: all 0.15s;
-  opacity: 0.4;
+  opacity: 0;
   z-index: 1;
 }
+.ann-card:hover .ann-card-close,
+.ann-card-close:focus-visible {
+  opacity: 0.5;
+}
 .ann-card-close:hover {
-  opacity: 1;
+  opacity: 1 !important;
   background: var(--ink);
   color: var(--paper);
 }
 
 .ann-card-scroll {
-  padding: 12px 14px;
+  padding: 10px 14px;
   overflow-y: auto;
   overscroll-behavior: contain;
   flex: 1;
@@ -247,18 +319,18 @@ onBeforeUnmount(() => {
 
 /* Card transition */
 .ann-pop-enter-active {
-  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 .ann-pop-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
+  transition: opacity 0.1s ease, transform 0.1s ease;
 }
 .ann-pop-enter-from {
   opacity: 0;
-  transform: scale(0.95) translateY(6px);
+  transform: scale(0.96) translateY(4px);
 }
 .ann-pop-leave-to {
   opacity: 0;
-  transform: scale(0.97);
+  transform: scale(0.98);
 }
 
 /* ─── Mobile bottom sheet ─── */
@@ -267,7 +339,7 @@ onBeforeUnmount(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  max-height: 50vh;
+  max-height: 60vh;
   background: var(--surface-warm);
   border-top: 1px solid var(--border);
   border-radius: 14px 14px 0 0;
@@ -315,6 +387,21 @@ onBeforeUnmount(() => {
   transform: translateY(100%);
 }
 
+/* ─── Active annotation on page ─── */
+:global(.ann-target.ann-active) {
+  background: rgba(194, 58, 43, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(194, 58, 43, 0.15);
+  border-radius: 2px;
+}
+:global(.ann-target.ann-active.pronunciation) {
+  background: rgba(58, 107, 94, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(58, 107, 94, 0.15);
+}
+:global(.ann-target.ann-active.person) {
+  background: rgba(58, 90, 140, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(58, 90, 140, 0.15);
+}
+
 @media (min-width: 768px) {
   .ann-sheet { display: none; }
 }

package/template/src/composables/useAnnotationInteraction.ts

@@ -8,19 +8,28 @@ function isMobile(): boolean {
 export function useAnnotationInteraction() {
   const tooltip = useAnnotationTooltip()
   let hideTimer: ReturnType<typeof setTimeout> | null = null
+  let activeEl: HTMLElement | null = null
 
   function cancelHide() {
     if (hideTimer) { clearTimeout(hideTimer); hideTimer = null }
   }
 
+  function setActive(el: HTMLElement | null) {
+    if (activeEl) activeEl.classList.remove('ann-active')
+    activeEl = el
+    if (activeEl) activeEl.classList.add('ann-active')
+  }
+
   function scheduleHide(delay = 300) {
     cancelHide()
-    hideTimer = setTimeout(() => { tooltip.hide(); hideTimer = null }, delay)
+    hideTimer = setTimeout(() => { tooltip.hide(); setActive(null); hideTimer = null }, delay)
   }
 
   function onHover(event: MouseEvent, annotations: Annotation[]) {
     if (isMobile()) return
     cancelHide()
+    const el = (event.target as HTMLElement).closest('.ann-target') as HTMLElement | null
+    setActive(el)
     tooltip.show(event, annotations)
   }
 
@@ -30,6 +39,8 @@ export function useAnnotationInteraction() {
 
   function onTap(event: MouseEvent, annotations: Annotation[]) {
     cancelHide()
+    const el = (event.target as HTMLElement).closest('.ann-target') as HTMLElement | null
+    setActive(el)
     tooltip.toggle(event, annotations)
   }
 
@@ -43,12 +54,14 @@ export function useAnnotationInteraction() {
 
   function dismiss() {
     cancelHide()
+    setActive(null)
     tooltip.hide()
   }
 
   return {
     visible: tooltip.visible,
     items: tooltip.items,
+    headword: tooltip.headword,
     style: tooltip.style,
     onHover,
     onLeave,

package/template/src/composables/useAnnotationRenderer.ts

@@ -132,12 +132,23 @@ export function useAnnotationTooltip() {
   const visible = ref(false)
   const items = ref<Annotation[]>([])
   const style = ref<Record<string, string>>({})
+  const headword = ref('')
   const { layout } = useReadingMode()
 
   function show(event: MouseEvent, annotations: Annotation[]) {
     items.value = annotations
     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)
+    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() || ''
+    } else {
+      headword.value = ''
+    }
     const vw = window.innerWidth
     const vh = window.innerHeight
 
@@ -188,7 +199,7 @@ export function useAnnotationTooltip() {
     visible.value = true
   }
 
-  function hide() { visible.value = false }
+  function hide() { visible.value = false; headword.value = '' }
   function toggle(event: MouseEvent, annotations: Annotation[]) {
     if (visible.value) {
       const currentIds = items.value.map(a => a.id).sort().join(',')
@@ -203,5 +214,5 @@ export function useAnnotationTooltip() {
     }
   }
 
-  return { visible, items, style, show, hide, toggle }
+  return { visible, items, style, headword, show, hide, toggle }
 }

package/template/src/views/PieceView.vue

@@ -434,6 +434,7 @@ function tcy(n: number): string {
       <AnnotationTooltip
         :visible="interaction.visible"
         :annotations="interaction.items"
+        :headword="interaction.headword"
         :layer-labels="layerLabels"
         :style="interaction.style"
         :vertical="true"
@@ -441,10 +442,6 @@ function tcy(n: number): string {
         @tooltip-enter="interaction.onTooltipEnter"
         @tooltip-leave="interaction.onTooltipLeave"
       />
-
-      <Teleport to="body">
-        <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">
@@ -602,6 +599,7 @@ function tcy(n: number): string {
       <AnnotationTooltip
         :visible="interaction.visible"
         :annotations="interaction.items"
+        :headword="interaction.headword"
         :layer-labels="layerLabels"
         :style="interaction.style"
         :vertical="false"