@hanology/cham-browser 0.4.12 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "CHAM — browser-compatible parser, serializer, and site generator for Classical Han Annotated Markdown",
   "type": "module",
   "main": "dist/index.js",

package/template/src/components/AnnotationControlBar.vue

@@ -67,6 +67,7 @@ function toggleLayer(id: string) {
 
 <style scoped>
 .ann-bar {
+  writing-mode: horizontal-tb;
   display: flex;
   flex-direction: column;
   gap: 6px;

package/template/src/components/AnnotationTooltip.vue

@@ -4,8 +4,6 @@ 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[]
@@ -21,25 +19,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() {
@@ -80,15 +67,15 @@ function kindLabel(ann: Annotation): string {
 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()
 }
 
@@ -107,18 +94,19 @@ onBeforeUnmount(() => {
 
 <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>
+        <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 class="ann-card-scroll">
           <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>
@@ -131,32 +119,11 @@ onBeforeUnmount(() => {
       </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>
-          <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>
-
     <!-- 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" />
@@ -177,7 +144,7 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-/* ─── Compact annotation entry ─── */
+/* ─── Shared annotation entry ─── */
 .ann-entry {
   padding: 10px 0;
   border-bottom: 1px solid var(--border-light);
@@ -194,7 +161,6 @@ onBeforeUnmount(() => {
   align-items: center;
   gap: 6px;
   margin-bottom: 2px;
-  vertical-align: baseline;
 }
 
 .ann-kind {
@@ -206,7 +172,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 +194,6 @@ onBeforeUnmount(() => {
   border: 1px solid var(--border-light);
   border-radius: 2px;
   letter-spacing: 0.5px;
-  line-height: 1.4;
 }
 
 .ann-text {
@@ -237,123 +201,68 @@ onBeforeUnmount(() => {
   line-height: 1.8;
 }
 
-/* ─── Desktop Left Pane (horizontal mode) ─── */
-.ann-left-pane {
+/* ─── Desktop/Tablet 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 40px rgba(var(--shadow-rgb), 0.18);
   z-index: 1000;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
-.ann-pane-close {
+.ann-card-close {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 24px;
-  height: 24px;
+  top: 6px;
+  right: 6px;
+  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.4;
   z-index: 1;
-  opacity: 0.6;
 }
-.ann-pane-close:hover {
+.ann-card-close:hover {
   opacity: 1;
   background: var(--ink);
   color: var(--paper);
 }
 
-.ann-pane-scroll {
+.ann-card-scroll {
   padding: 12px 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.2s 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-pop-leave-active {
+  transition: opacity 0.12s ease, transform 0.12s ease;
 }
-.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-right-pane .ann-text {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  line-height: 2;
+.ann-pop-enter-from {
+  opacity: 0;
+  transform: scale(0.95) translateY(6px);
 }
-
-/* ─── 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.97);
 }
 
-/* ─── Mobile Bottom Sheet ─── */
-.ann-bottom-sheet {
+/* ─── Mobile bottom sheet ─── */
+.ann-sheet {
   position: fixed;
   left: 0;
   right: 0;
@@ -394,53 +303,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 +315,7 @@ onBeforeUnmount(() => {
   transform: translateY(100%);
 }
 
-@media (max-width: 1023px) {
-  .ann-left-pane, .ann-right-pane { display: none; }
-}
-
-@media (min-width: 1024px) {
-  .ann-bottom-sheet { display: none; }
+@media (min-width: 768px) {
+  .ann-sheet { display: none; }
 }
 </style>

package/template/src/composables/useAnnotationRenderer.ts

@@ -138,46 +138,51 @@ export function useAnnotationTooltip() {
     items.value = annotations
     const el = (event.target as HTMLElement).closest('.ann-target') as HTMLElement | null
     const rect = (el ?? event.target as HTMLElement).getBoundingClientRect()
+    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)
+      }
 
-    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%)',
-        }
+      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

package/template/src/views/PieceView.vue

@@ -778,16 +778,13 @@ function tcy(n: number): string {
 .v-nav-btn {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  padding: 16px 8px;
+  padding: 20px 12px;
   background: var(--surface);
   border: 1px solid var(--border-light);
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s;
+  line-height: 1.6;
 }
 .v-nav-btn:hover {
   border-color: var(--gold);
@@ -795,10 +792,12 @@ function tcy(n: number): string {
 }
 .v-nav-dir {
   font-size: 16px; color: var(--vermillion);
+  margin-bottom: 0.5em;
 }
 .v-nav-label {
   font-size: 11px; color: var(--ink-faint);
   font-family: var(--sans); letter-spacing: 2px;
+  margin-bottom: 0.5em;
 }
 .v-nav-title {
   font-size: 18px; font-weight: 700;