@hanology/cham-browser 0.4.17 → 0.4.18

package/package.json

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

package/template/src/components/AnnotationPane.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
   headwords: Record<string, string>
   layerLabels?: Record<string, string>
   activeId: string
+  vertical?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -75,7 +76,7 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
 <template>
   <Teleport to="body">
     <Transition name="ann-pane">
-      <div v-if="visible && annotations.length" class="ann-pane">
+      <div v-if="visible && annotations.length" class="ann-pane" :class="{ vertical }">
         <div class="ann-pane-header">
           <span class="ann-pane-title">注釋</span>
           <span class="ann-pane-count">{{ annotations.length }}</span>
@@ -305,4 +306,41 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
     transform: translateY(100%);
   }
 }
+
+/* ─── Vertical mode ─── */
+.ann-pane.vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  width: 240px;
+}
+
+.ann-pane.vertical .ann-pane-body {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.ann-pane.vertical .ann-pane-entry {
+  padding: 12px 8px;
+  border-bottom: none;
+  border-left: 1px solid var(--border-light);
+  border-right: 3px solid transparent;
+}
+
+.ann-pane.vertical .ann-pane-entry.active {
+  border-right-color: var(--vermillion);
+}
+
+.ann-pane.vertical .ann-pane-entry.active.pronunciation {
+  border-right-color: var(--jade);
+}
+
+.ann-pane.vertical .ann-pane-entry-head {
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ann-pane.vertical .ann-pane-text {
+  line-height: 2;
+  letter-spacing: 1px;
+}
 </style>

package/template/src/components/AnnotationTooltip.vue

@@ -118,6 +118,7 @@ onBeforeUnmount(() => {
       <div
         v-if="!isMobile && stickyVisible && annotations.length"
         class="ann-card"
+        :class="{ vertical }"
         :style="style"
         @mouseenter="emit('tooltipEnter')"
         @mouseleave="emit('tooltipLeave')"
@@ -136,7 +137,7 @@ onBeforeUnmount(() => {
               <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
             </div>
             <div class="ann-entry-body">
-              <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
+              <div v-if="getSegment(ann)" class="ann-pron-h"><PronunciationGroup :segment="getSegment(ann)!" /></div>
               <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
             </div>
           </div>
@@ -149,6 +150,7 @@ onBeforeUnmount(() => {
       <div
         v-if="isMobile && stickyVisible && annotations.length"
         class="ann-sheet"
+        :class="{ vertical }"
       >
         <button class="ann-sheet-handle" @click="dismiss">
           <span class="ann-handle-bar" />
@@ -164,7 +166,7 @@ onBeforeUnmount(() => {
               <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
             </div>
             <div class="ann-entry-body">
-              <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
+              <div v-if="getSegment(ann)" class="ann-pron-h"><PronunciationGroup :segment="getSegment(ann)!" /></div>
               <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
             </div>
           </div>
@@ -407,4 +409,80 @@ onBeforeUnmount(() => {
 @media (min-width: 768px) {
   .ann-sheet { display: none; }
 }
+
+/* ─── Vertical mode ─── */
+.ann-card.vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+.ann-card.vertical .ann-card-scroll {
+  display: flex;
+  flex-direction: row;
+  padding: 10px 8px;
+}
+
+.ann-card.vertical .ann-entry {
+  border-bottom: none;
+  padding: 8px 4px;
+}
+
+.ann-card.vertical .ann-entry + .ann-entry {
+  border-top: 1px solid var(--border-light);
+  margin-top: 4px;
+}
+
+.ann-card.vertical .ann-card-close {
+  writing-mode: horizontal-tb;
+}
+
+.ann-card.vertical .ann-pron-h {
+  writing-mode: horizontal-tb;
+}
+
+.ann-card.vertical .ann-entry-body {
+  padding-left: 0;
+  padding-top: 4px;
+}
+
+.ann-card.vertical .ann-text {
+  white-space: pre-line;
+  line-height: 2;
+}
+
+.ann-sheet.vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+.ann-sheet.vertical .ann-sheet-scroll {
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 4px 16px 24px;
+}
+
+.ann-sheet.vertical .ann-entry {
+  border-bottom: none;
+  border-left: 1px solid var(--border-light);
+  padding: 0 12px;
+}
+
+.ann-sheet.vertical .ann-entry:first-child {
+  border-left: none;
+}
+
+.ann-sheet.vertical .ann-pron-h {
+  writing-mode: horizontal-tb;
+}
+
+.ann-sheet.vertical .ann-text {
+  white-space: pre-line;
+  line-height: 2;
+}
+
+.ann-sheet.vertical .ann-sheet-handle {
+  writing-mode: horizontal-tb;
+}
 </style>

package/template/src/composables/useAnnotationRenderer.ts

@@ -160,11 +160,12 @@ export function useAnnotationTooltip() {
         bottom: '0',
       }
     } else if (layout.value === 'vertical') {
-      // Vertical mode: card to the left of the annotation
-      const cardW = 340
+      // Vertical mode: tall narrow card to the left of the annotation
+      const cardW = 180
+      const cardH = Math.min(vh - 16, 480)
       const gap = 12
       let left = Math.max(8, rect.left - cardW - gap)
-      let top = Math.max(8, Math.min(rect.top, vh - 300))
+      let top = Math.max(8, Math.min(rect.top, vh - cardH))
 
       // If not enough room on left, go right
       if (rect.left - cardW - gap < 8) {
@@ -175,7 +176,7 @@ export function useAnnotationTooltip() {
         left: left + 'px',
         top: top + 'px',
         width: cardW + 'px',
-        maxHeight: Math.min(vh - 16, 500) + 'px',
+        maxHeight: cardH + 'px',
       }
     } else {
       // Horizontal mode: card below/above the annotation

package/template/src/views/PieceView.vue

@@ -495,6 +495,7 @@ function tcy(n: number): string {
         :headwords="annotationHeadwords"
         :layer-labels="layerLabels"
         :active-id="paneActiveId"
+        :vertical="isVertical"
         @close="paneVisible = false"
         @select="onPaneSelect"
       />
@@ -711,6 +712,7 @@ function tcy(n: number): string {
     :headword="interaction.headword"
     :layer-labels="layerLabels"
     :style="interaction.style"
+    :vertical="isVertical"
     @close="interaction.dismiss"
     @tooltip-enter="interaction.onTooltipEnter"
     @tooltip-leave="interaction.onTooltipLeave"