@hanology/cham-browser 0.4.24 → 0.4.26

package/package.json

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

@@ -432,30 +432,17 @@ onBeforeUnmount(() => {
 }
 
 /* ─── Vertical mode ─── */
-.ann-pane.vertical {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-}
-
-.ann-pane.vertical .ann-pane-body {
-  display: flex;
-  flex-direction: row;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
+/* Pane stays in horizontal-tb; only the headword uses vertical-rl */
 
 .ann-pane.vertical .ann-pane-entry {
   display: flex;
-  flex-direction: column;
-  padding: 10px 6px;
-  border-bottom: none;
+  flex-direction: row-reverse;
+  gap: 8px;
+  align-items: flex-start;
+  border-left: none;
   border-right: 3px solid transparent;
 }
 
-.ann-pane.vertical .ann-pane-entry + .ann-pane-entry {
-  border-top: 1px solid var(--border-light);
-}
-
 .ann-pane.vertical .ann-pane-entry.active {
   border-right-color: var(--vermillion);
 }
@@ -464,16 +451,22 @@ onBeforeUnmount(() => {
   border-right-color: var(--jade);
 }
 
-/* Vertical headword on the right (first in vertical-rl reading order) */
+.ann-pane.vertical .ann-pane-entry-main {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Vertical headword — only this element uses vertical writing */
 .ann-pane-v-word {
   writing-mode: vertical-rl;
   text-orientation: upright;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   gap: 6px;
-  padding: 6px 8px;
+  padding: 0 8px;
   border-left: 1px solid var(--border-light);
+  flex-shrink: 0;
 }
 
 .ann-pane-word-v {
@@ -495,31 +488,29 @@ onBeforeUnmount(() => {
   color: var(--jade);
 }
 
-.ann-pane.vertical .ann-pane-entry-head {
-  flex-direction: row;
-  gap: 4px;
-}
-
 .ann-pane.vertical .ann-pane-text {
   line-height: 2;
   letter-spacing: 1px;
 }
 
-.ann-pane.vertical .ann-pane-header {
-  flex-direction: row;
-}
-
-.ann-pane.vertical .ann-pane-close {
-  writing-mode: horizontal-tb;
-}
-
-.ann-pane.vertical .ann-pane-handle {
-  writing-mode: horizontal-tb;
-}
-
 @media (max-width: 768px) {
+  .ann-pane.vertical {
+    width: 80vw !important;
+    height: 100vh !important;
+    max-height: none !important;
+    top: 0 !important;
+    bottom: auto !important;
+    border-right: 1px solid var(--border) !important;
+    border-top: none !important;
+    border-radius: 0 !important;
+    box-shadow: 4px 0 24px rgba(var(--shadow-rgb), 0.06) !important;
+  }
   .ann-pane.vertical .ann-pane-handle {
-    display: none;
+    display: flex !important;
+  }
+  .ann-pane.vertical.ann-pane-enter-from,
+  .ann-pane.vertical.ann-pane-leave-to {
+    transform: translateX(-100%) !important;
   }
 }
 </style>

package/template/src/components/AnnotationTooltip.vue

@@ -181,6 +181,7 @@ onBeforeUnmount(() => {
 .ann-card-head,
 .ann-sheet-head {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px;
@@ -420,6 +421,7 @@ onBeforeUnmount(() => {
 }
 
 .ann-card.vertical .ann-card-head {
+  writing-mode: horizontal-tb;
   padding: 10px 6px;
   border-bottom: none;
   border-left: 1px solid var(--border-light);

package/template/src/views/PieceView.vue

@@ -385,13 +385,13 @@ function tcy(n: number): string {
         </section>
 
         <div class="v-inline-nav">
-          <button v-if="adjacent.next !== null" class="v-inav" @click="navigate(1)" :title="t('piece.next')">
-            ▼
-          </button>
-          <span v-else class="v-inav-spacer" />
           <button v-if="adjacent.prev !== null" class="v-inav" @click="navigate(-1)" :title="t('piece.previous')">
             ▲
           </button>
+          <span v-else class="v-inav-spacer" />
+          <button v-if="adjacent.next !== null" class="v-inav" @click="navigate(1)" :title="t('piece.next')">
+            ▼
+          </button>
         </div>
 
         <section v-if="isMultiPart" class="v-poem-col v-multipart">