@hanology/cham-browser 0.4.13 → 0.4.15

package/package.json

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

@@ -4,11 +4,10 @@ import { annotationToPronSegment } from '../utils/annotationParser'
 import PronunciationGroup from './PronunciationGroup.vue'
 import type { Annotation } from '../types'
 
-type DisplayMode = 'pane' | 'popup' | 'sheet'
-
 const props = defineProps<{
   visible: boolean
   annotations: Annotation[]
+  headword?: string
   layerLabels?: Record<string, string>
   style?: Record<string, string>
   vertical?: boolean
@@ -21,25 +20,14 @@ const emit = defineEmits<{
 }>()
 
 const ww = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
+const isMobile = computed(() => ww.value < 768)
 
 function onResize() { ww.value = window.innerWidth }
 
-const mode = computed<DisplayMode>(() => {
-  const w = ww.value
-  if (w < 768) return 'sheet'
-  if (w >= 1024) return 'pane'
-  return 'popup'
-})
-
 const stickyVisible = ref(false)
 
 watch(() => props.visible, (v) => {
   if (v) stickyVisible.value = true
-  else if (mode.value === 'popup') stickyVisible.value = false
-})
-
-watch(mode, () => {
-  if (mode.value === 'popup' && !props.visible) stickyVisible.value = false
 })
 
 function dismiss() {
@@ -77,77 +65,81 @@ 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)
-  if (el.closest('.ann-left-pane, .ann-right-pane, .ann-bottom-sheet, .ann-popup')) return
+  if (el.closest('.ann-card, .ann-sheet')) return
   if (el.closest('.ann-target')) return
   dismiss()
 }
 
 function onDocTouchMove(e: TouchEvent) {
-  if (!stickyVisible.value || ww.value >= 768) return
+  if (!stickyVisible.value || !isMobile.value) return
   const el = (e.target as HTMLElement)
-  if (el.closest('.ann-bottom-sheet')) return
+  if (el.closest('.ann-sheet')) return
   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>
 
 <template>
   <Teleport to="body">
-    <!-- Desktop pane: LEFT for horizontal, RIGHT for vertical -->
-    <Transition :name="vertical ? 'ann-slide-left' : 'ann-slide-right'">
+    <!-- Desktop/Tablet floating card -->
+    <Transition name="ann-pop">
       <div
-        v-if="mode === 'pane' && stickyVisible && annotations.length"
-        :class="vertical ? 'ann-right-pane' : 'ann-left-pane'"
+        v-if="!isMobile && stickyVisible && annotations.length"
+        class="ann-card"
+        :style="style"
         @mouseenter="emit('tooltipEnter')"
         @mouseleave="emit('tooltipLeave')"
       >
-        <button class="ann-pane-close" @click="dismiss" aria-label="關閉">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        <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-pane-scroll">
-          <div v-for="ann in annotations" :key="ann.id" class="ann-entry" :class="ann.kind">
-            <div class="ann-head">
+        <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>
               <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>
-        </div>
-      </div>
-    </Transition>
-
-    <!-- Tablet popup -->
-    <Transition name="ann-fade">
-      <div
-        v-if="mode === 'popup' && visible && annotations.length"
-        class="ann-popup"
-        :class="{ 'ann-popup--vertical': vertical }"
-        :style="style"
-        @mouseenter="emit('tooltipEnter')"
-        @mouseleave="emit('tooltipLeave')"
-      >
-        <div v-for="ann in annotations" :key="ann.id" class="ann-entry" :class="ann.kind">
-          <div class="ann-head">
-            <span class="ann-kind" :class="ann.kind">{{ kindLabel(ann) }}</span>
-            <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
+            <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>
-          <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
-          <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
         </div>
       </div>
     </Transition>
@@ -155,20 +147,26 @@ onBeforeUnmount(() => {
     <!-- Mobile bottom sheet -->
     <Transition name="ann-sheet">
       <div
-        v-if="mode === 'sheet' && stickyVisible && annotations.length"
-        class="ann-bottom-sheet"
+        v-if="isMobile && stickyVisible && annotations.length"
+        class="ann-sheet"
       >
         <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>
@@ -177,7 +175,38 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-/* ─── Compact 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);
@@ -189,12 +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;
-  vertical-align: baseline;
+  margin-bottom: 3px;
+}
+
+.ann-entry-body {
+  padding-left: 2px;
 }
 
 .ann-kind {
@@ -206,7 +238,6 @@ onBeforeUnmount(() => {
   font-weight: 700;
   letter-spacing: 1px;
   line-height: 1.5;
-  vertical-align: middle;
 }
 .ann-kind.pronunciation { background: var(--jade); color: #fff; }
 .ann-kind.semantic { background: var(--vermillion); color: #fff; }
@@ -229,7 +260,6 @@ onBeforeUnmount(() => {
   border: 1px solid var(--border-light);
   border-radius: 2px;
   letter-spacing: 0.5px;
-  line-height: 1.4;
 }
 
 .ann-text {
@@ -237,128 +267,79 @@ onBeforeUnmount(() => {
   line-height: 1.8;
 }
 
-/* ─── Desktop Left Pane (horizontal mode) ─── */
-.ann-left-pane {
+/* ─── Floating card ─── */
+.ann-card {
   position: fixed;
-  top: 72px;
-  left: 20px;
-  width: 280px;
-  max-height: calc(100vh - 100px);
   background: var(--surface-warm);
   border: 1px solid var(--border);
   border-radius: 10px;
-  box-shadow: 0 8px 40px rgba(var(--shadow-rgb), 0.12);
+  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-pane-close {
+.ann-card-close {
   position: absolute;
   top: 8px;
   right: 8px;
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
   border: none;
   border-radius: 4px;
-  background: var(--surface);
+  background: transparent;
   color: var(--ink-faint);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.15s;
+  opacity: 0;
   z-index: 1;
-  opacity: 0.6;
 }
-.ann-pane-close:hover {
-  opacity: 1;
+.ann-card:hover .ann-card-close,
+.ann-card-close:focus-visible {
+  opacity: 0.5;
+}
+.ann-card-close:hover {
+  opacity: 1 !important;
   background: var(--ink);
   color: var(--paper);
 }
 
-.ann-pane-scroll {
-  padding: 12px 14px;
+.ann-card-scroll {
+  padding: 10px 14px;
   overflow-y: auto;
   overscroll-behavior: contain;
   flex: 1;
 }
 
-/* ─── Desktop Right Pane (vertical mode) ─── */
-.ann-right-pane {
-  position: fixed;
-  top: 72px;
-  right: 20px;
-  height: calc(100vh - 100px);
-  width: auto;
-  max-width: 280px;
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  background: var(--surface-warm);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  box-shadow: 0 8px 40px rgba(var(--shadow-rgb), 0.12);
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-}
-.ann-right-pane .ann-pane-close {
-  position: static;
-  margin: 8px 8px 0;
-  opacity: 0.5;
-  flex-shrink: 0;
-}
-.ann-right-pane .ann-pane-scroll {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding: 12px 14px;
-  flex: 1;
+/* Card transition */
+.ann-pop-enter-active {
+  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-.ann-right-pane .ann-entry {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  border-bottom: none;
-  border-left: 1px solid var(--border-light);
-  padding: 0 0 0 12px;
-  margin-left: 8px;
-}
-.ann-right-pane .ann-entry:first-child { padding-top: 0; }
-.ann-right-pane .ann-entry:last-child { border-left: none; }
-.ann-right-pane .ann-head {
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: 0;
-  margin-left: 4px;
+.ann-pop-leave-active {
+  transition: opacity 0.1s ease, transform 0.1s ease;
 }
-.ann-right-pane .ann-text {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  line-height: 2;
+.ann-pop-enter-from {
+  opacity: 0;
+  transform: scale(0.96) translateY(4px);
 }
-
-/* ─── Tablet Popup ─── */
-.ann-popup {
-  position: fixed;
-  padding: 12px 14px;
-  background: var(--surface-warm);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.16);
-  max-width: 300px;
-  max-height: 50vh;
-  overflow-y: auto;
-  z-index: 1000;
+.ann-pop-leave-to {
+  opacity: 0;
+  transform: scale(0.98);
 }
 
-/* ─── Mobile Bottom Sheet ─── */
-.ann-bottom-sheet {
+/* ─── Mobile bottom sheet ─── */
+.ann-sheet {
   position: fixed;
   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;
@@ -394,53 +375,7 @@ onBeforeUnmount(() => {
   flex: 1;
 }
 
-/* ─── Transitions ─── */
-
-.ann-slide-right-enter-active {
-  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.ann-slide-right-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-.ann-slide-right-enter-from {
-  opacity: 0;
-  transform: translateX(-20px);
-}
-.ann-slide-right-leave-to {
-  opacity: 0;
-  transform: translateX(-12px);
-}
-
-.ann-slide-left-enter-active {
-  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.ann-slide-left-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-.ann-slide-left-enter-from {
-  opacity: 0;
-  transform: translateX(20px);
-}
-.ann-slide-left-leave-to {
-  opacity: 0;
-  transform: translateX(12px);
-}
-
-.ann-fade-enter-active {
-  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.ann-fade-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-.ann-fade-enter-from {
-  opacity: 0;
-  transform: scale(0.94) translateY(4px);
-}
-.ann-fade-leave-to {
-  opacity: 0;
-  transform: scale(0.96);
-}
-
+/* Sheet transition */
 .ann-sheet-enter-active {
   transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
@@ -452,11 +387,22 @@ onBeforeUnmount(() => {
   transform: translateY(100%);
 }
 
-@media (max-width: 1023px) {
-  .ann-left-pane, .ann-right-pane { display: none; }
+/* ─── 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: 1024px) {
-  .ann-bottom-sheet { display: none; }
+@media (min-width: 768px) {
+  .ann-sheet { display: none; }
 }
 </style>

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,6 +132,7 @@ 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[]) {
@@ -139,51 +140,66 @@ export function useAnnotationTooltip() {
     const el = (event.target as HTMLElement).closest('.ann-target') as HTMLElement | null
     const rect = (el ?? event.target as HTMLElement).getBoundingClientRect()
 
-    if (layout.value === 'vertical') {
-      const isMobile = window.innerWidth < 768
-      if (isMobile) {
-        style.value = {
-          left: '4vw',
-          right: '4vw',
-          bottom: '0',
-          maxWidth: 'none',
-        }
-      } else if (window.innerWidth >= 1024) {
-        style.value = {
-          right: '20px',
-          top: '72px',
-          maxHeight: 'calc(100vh - 100px)',
-        }
-      } else {
-        const right = window.innerWidth - rect.left + 8
-        style.value = {
-          right: Math.min(right, window.innerWidth - 40) + 'px',
-          top: '50%',
-          transform: 'translateY(-50%)',
-        }
+    // 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
+
+    if (vw < 768) {
+      // Mobile: bottom sheet
+      style.value = {
+        left: '0',
+        right: '0',
+        bottom: '0',
+      }
+    } else if (layout.value === 'vertical') {
+      // Vertical mode: card to the left of the annotation
+      const cardW = 340
+      const gap = 12
+      let left = Math.max(8, rect.left - cardW - gap)
+      let top = Math.max(8, Math.min(rect.top, vh - 300))
+
+      // If not enough room on left, go right
+      if (rect.left - cardW - gap < 8) {
+        left = Math.min(rect.right + gap, vw - cardW - 8)
+      }
+
+      style.value = {
+        left: left + 'px',
+        top: top + 'px',
+        width: cardW + 'px',
+        maxHeight: Math.min(vh - 16, 500) + 'px',
       }
     } else {
-      const isMobile = window.innerWidth < 768
-      if (isMobile) {
-        style.value = {
-          left: '4vw',
-          right: '4vw',
-          bottom: '0',
-          maxWidth: 'none',
-        }
-      } else {
-        const left = Math.max(8, Math.min(rect.left, window.innerWidth - 288))
-        const top = Math.max(8, rect.bottom + 8)
-        style.value = {
-          left: left + 'px',
-          top: Math.min(top, window.innerHeight - 200) + 'px',
-        }
+      // Horizontal mode: card below/above the annotation
+      const cardW = 340
+      const gap = 8
+      let left = Math.max(8, Math.min(rect.left, vw - cardW - 8))
+      let top = rect.bottom + gap
+
+      // If overflows bottom, show above
+      if (top + 200 > vh) {
+        top = Math.max(8, rect.top - gap - 200)
+      }
+
+      style.value = {
+        left: left + 'px',
+        top: top + 'px',
+        width: cardW + 'px',
+        maxHeight: Math.min(vh - top - 16, 500) + 'px',
       }
     }
     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(',')
@@ -198,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"