@hanology/cham-browser 0.4.75 → 0.4.77

package/package.json

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

package/template/src/App.vue

@@ -144,7 +144,7 @@ function onKey(event: KeyboardEvent) {
 .about-pane-v {
   writing-mode: vertical-rl; text-orientation: mixed;
   position: relative;
-  height: 100vh;
+  height: 100dvh;
   background: var(--paper);
   padding: 32px 28px;
   overflow-x: auto;
@@ -174,7 +174,7 @@ function onKey(event: KeyboardEvent) {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 100vh;
+  min-height: 100dvh;
 }
 .route-loading-logo {
   width: 56px; height: auto;

package/template/src/components/AnnotationPane.vue

@@ -210,7 +210,7 @@ onBeforeUnmount(() => {
   position: fixed;
   left: 0;
   top: 0;
-  height: 100vh;
+  height: 100dvh;
   background: var(--surface-warm);
   border-right: 1px solid var(--border);
   z-index: 300;
@@ -568,7 +568,7 @@ onBeforeUnmount(() => {
     width: auto !important;
     max-width: 65vw !important;
     min-width: 180px;
-    height: 100vh !important;
+    height: 100dvh !important;
     max-height: none !important;
     top: 0 !important;
     bottom: auto !important;

package/template/src/components/AnnotationTooltip.vue

@@ -437,7 +437,7 @@ onBeforeUnmount(() => {
   top: 0;
   width: 85vw;
   max-height: none;
-  height: 100vh;
+  height: 100dvh;
   border-top: none;
   border-radius: 0;
   border-right: 1px solid var(--border);

package/template/src/components/PartBlock.vue

@@ -236,14 +236,16 @@ const annotationEntries = computed(() =>
 
 .part-block--vertical :deep(.ann-target) {
   border-bottom: none;
-  border-left-width: 2px;
-  border-left-style: solid;
-  padding-left: 2px;
+  border-right: none;
+  padding-right: 3px;
+  background-image: linear-gradient(to bottom, var(--vermillion), var(--vermillion));
+  background-size: 2px 100%;
+  background-position: right center;
+  background-repeat: no-repeat;
 }
 .part-block--vertical :deep(.ann-target.ann-overlap) {
-  border-left-width: 3px;
-  border-left-style: double;
-  padding-left: 3px;
+  padding-right: 4px;
+  background-size: 3px 100%;
 }
 .part-block--vertical :deep(.ann-num) {
   font-size: 0.45em;

package/template/src/components/SectionBlock.vue

@@ -179,7 +179,7 @@ const paragraphsHtml = computed(() => {
 .sb-vertical {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  height: 100vh;
+  height: 100dvh;
   flex-shrink: 0;
   padding: 32px 24px;
   border-right: 1px solid var(--border);

package/template/src/components/SideNav.vue

@@ -130,7 +130,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 .sidenav {
   position: fixed;
   top: 0; right: 0;
-  width: 56px; height: 100vh;
+  width: 56px; height: 100dvh;
   background: var(--paper);
   border-left: 1px solid var(--border);
   display: flex; flex-direction: column;

package/template/src/components/VerticalScroll.vue

@@ -73,7 +73,7 @@ function onTap(event: MouseEvent) {
   --ann-shadow-y: -2px;
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  height: calc(100vh - var(--nav-width, 56px));
+  height: calc(100dvh - var(--nav-width, 56px));
   padding: 32px 24px;
   background: var(--surface);
   border: 1px solid var(--border);
@@ -114,14 +114,16 @@ function onTap(event: MouseEvent) {
 
 :deep(.ann-target) {
   border-bottom: none;
-  border-left-width: 2px;
-  border-left-style: solid;
-  padding-left: 2px;
+  border-right: none;
+  padding-right: 3px;
+  background-image: linear-gradient(to bottom, var(--vermillion), var(--vermillion));
+  background-size: 2px 100%;
+  background-position: right center;
+  background-repeat: no-repeat;
 }
 :deep(.ann-target.ann-overlap) {
-  border-left-width: 3px;
-  border-left-style: double;
-  padding-left: 3px;
+  padding-right: 4px;
+  background-size: 3px 100%;
 }
 :deep(.ann-num) {
   font-size: 0.45em;

package/template/src/composables/useAnnotationRenderer.ts

@@ -69,7 +69,10 @@ export function renderAnnotatedText(text: string, spans: AnnSpan[], useRuby = fa
     const body = esc(text.slice(span.start, span.end))
     if (useRuby) {
       const rtCls = numText.length > 1 ? 'ann-num ann-num-long' : 'ann-num'
-      html += `<ruby class="ann-target${overlapCls} ${kinds}" data-ann-ids="${ids}">${body}<rp></rp><rt class="${rtCls}">${numText}</rt><rp></rp></ruby>`
+      const chars = [...body]
+      html += chars.map((ch, i) =>
+        `<ruby class="ann-target${overlapCls} ${kinds}" data-ann-ids="${ids}">${ch}<rp></rp>${i === 0 ? `<rt class="${rtCls}">${numText}</rt>` : ''}<rp></rp></ruby>`
+      ).join('')
     } else {
       html += `<span class="ann-target${overlapCls} ${kinds}" data-ann-ids="${ids}">${body}<sup class="ann-num">${numText}</sup></span>`
     }

package/template/src/styles/annotation-targets.css

@@ -5,6 +5,13 @@
   transition: background 0.2s ease, box-shadow 0.2s ease;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
+  text-decoration: none;
+}
+ruby.ann-target {
+  text-decoration: none;
+}
+rt.ann-num, sup.ann-num {
+  text-decoration: none;
 }
 
 /* ─── Annotation kind border colors ─── */
@@ -26,21 +33,60 @@
   border-bottom-style: double;
 }
 
-/* ─── Vertical mode: border-left ─── */
+/* ─── Vertical mode: background line on right ─── */
 [data-layout="vertical"] .ann-target,
 .v-scroll .ann-target,
 .part-block--vertical .ann-target {
   border-bottom: none;
-  border-left-width: 2px;
-  border-left-style: solid;
-  padding-left: 2px;
+  border-right: none;
+  padding-right: 3px;
+  background-image: linear-gradient(to bottom, var(--vermillion), var(--vermillion));
+  background-size: 2px 100%;
+  background-position: right center;
+  background-repeat: no-repeat;
 }
 [data-layout="vertical"] .ann-target.ann-overlap,
 .v-scroll .ann-target.ann-overlap,
 .part-block--vertical .ann-target.ann-overlap {
-  border-left-width: 3px;
-  border-left-style: double;
-  padding-left: 3px;
+  padding-right: 4px;
+  background-size: 3px 100%;
+}
+
+/* ─── Vertical mode: per-kind colors ─── */
+.v-scroll .ann-target.pronunciation,
+[data-layout="vertical"] .ann-target.pronunciation,
+.part-block--vertical .ann-target.pronunciation {
+  background-image: linear-gradient(to bottom, var(--jade), var(--jade));
+}
+.v-scroll .ann-target.pronunciation.semantic,
+[data-layout="vertical"] .ann-target.pronunciation.semantic,
+.part-block--vertical .ann-target.pronunciation.semantic {
+  background-image: linear-gradient(to bottom, var(--gold), var(--gold));
+}
+.v-scroll .ann-target.person,
+[data-layout="vertical"] .ann-target.person,
+.part-block--vertical .ann-target.person {
+  background-image: linear-gradient(to bottom, var(--ann-person), var(--ann-person));
+}
+.v-scroll .ann-target.place,
+[data-layout="vertical"] .ann-target.place,
+.part-block--vertical .ann-target.place {
+  background-image: linear-gradient(to bottom, var(--ann-place), var(--ann-place));
+}
+.v-scroll .ann-target.event,
+[data-layout="vertical"] .ann-target.event,
+.part-block--vertical .ann-target.event {
+  background-image: linear-gradient(to bottom, var(--ann-event), var(--ann-event));
+}
+.v-scroll .ann-target.date,
+[data-layout="vertical"] .ann-target.date,
+.part-block--vertical .ann-target.date {
+  background-image: linear-gradient(to bottom, var(--ann-date), var(--ann-date));
+}
+.v-scroll .ann-target.allusion,
+[data-layout="vertical"] .ann-target.allusion,
+.part-block--vertical .ann-target.allusion {
+  background-image: linear-gradient(to bottom, var(--ann-allusion), var(--ann-allusion));
 }
 
 /* ─── Annotation kind hover states ─── */

package/template/src/styles/main.css

@@ -143,7 +143,7 @@ body {
   background: var(--paper);
   color: var(--ink);
   line-height: 1.8;
-  min-height: 100vh;
+  min-height: 100dvh;
   overflow-x: hidden;
   overscroll-behavior-y: contain;
 }
@@ -248,7 +248,7 @@ button:focus-visible {
 
 /* ===== VERTICAL PAGE LAYOUT ===== */
 .v-page {
-  height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: row-reverse;
   overflow-x: auto;
@@ -298,7 +298,7 @@ button:focus-visible {
 .page-loading {
   display: flex; flex-direction: column;
   align-items: center; justify-content: center;
-  height: 100vh;
+  height: 100dvh;
 }
 .page-loading-seal {
   width: 56px; height: 56px;

package/template/src/views/AuthorView.vue

@@ -146,7 +146,7 @@ function goHome() { router.push('/') }
 /* ═══════ 直排模式 ═══════ */
 
 .v-page {
-  height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: row-reverse;
   overflow-x: auto;
@@ -164,7 +164,7 @@ function goHome() { router.push('/') }
   writing-mode: vertical-rl;
   text-orientation: mixed;
   flex-shrink: 0;
-  height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -198,7 +198,7 @@ function goHome() { router.push('/') }
   writing-mode: vertical-rl;
   text-orientation: mixed;
   flex-shrink: 0;
-  height: 100vh;
+  height: 100dvh;
   padding: 40px 16px;
   border-right: 1px solid var(--border);
 }
@@ -247,7 +247,7 @@ function goHome() { router.push('/') }
 
 /* ═══════ 橫排模式 ═══════ */
 
-.h-page { min-height: 100vh; }
+.h-page { min-height: 100dvh; }
 .h-nav {
   position: sticky; top: 0; z-index: 100;
   background: var(--paper);

package/template/src/views/BookHome.vue

@@ -165,7 +165,7 @@ function scrollToCatalog() {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   flex-shrink: 0;
-  height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -211,7 +211,7 @@ function scrollToCatalog() {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   flex-shrink: 0;
-  height: 100vh;
+  height: 100dvh;
   padding: 40px 16px;
   border-right: 1px solid var(--border);
   display: flex;
@@ -265,7 +265,7 @@ function scrollToCatalog() {
   grid-template-rows: repeat(auto-fill, 180px);
   gap: 10px;
   padding: 24px 16px;
-  height: 100vh;
+  height: 100dvh;
   box-sizing: border-box;
   direction: rtl;
   align-items: start;
@@ -279,7 +279,7 @@ function scrollToCatalog() {
 
 .h-hero {
   position: relative;
-  height: 100vh;
+  height: 100dvh;
   display: flex; flex-direction: column;
   align-items: center; justify-content: center;
   background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
@@ -386,7 +386,7 @@ function scrollToCatalog() {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   flex-shrink: 0;
-  height: 100vh;
+  height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;

package/template/src/views/LibraryHome.vue

@@ -182,7 +182,7 @@ function openBook(bookId: string) {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   flex-shrink: 0;
-  height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -213,7 +213,7 @@ function openBook(bookId: string) {
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100dvh;
   box-sizing: border-box;
   overflow-x: auto;
   overflow-y: hidden;
@@ -257,7 +257,7 @@ function openBook(bookId: string) {
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  height: 100vh;
+  height: 100dvh;
   width: 44px;
   padding: 16px 0;
   border-left: 1px solid var(--border-light);

package/template/src/views/PieceView.vue

@@ -727,7 +727,7 @@ function tcy(n: number): string {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   flex-shrink: 0;
-  height: 100vh;
+  height: 100dvh;
   display: flex;
   align-items: flex-start;
   justify-content: center;
@@ -781,7 +781,7 @@ function tcy(n: number): string {
   flex-direction: row-reverse;
   align-items: stretch;
   gap: 0;
-  height: 100vh;
+  height: 100dvh;
   box-sizing: border-box;
   padding: 20px 16px;
 }
@@ -810,7 +810,7 @@ function tcy(n: number): string {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   flex-shrink: 0;
-  height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -854,7 +854,7 @@ function tcy(n: number): string {
 
 /* ═══════ 橫排模式 ═══════ */
 
-.h-page { min-height: 100vh; }
+.h-page { min-height: 100dvh; }
 .h-nav {
   position: sticky; top: 0; z-index: 100;
   background: var(--paper);
@@ -1037,7 +1037,7 @@ function tcy(n: number): string {
 }
 .h-pane {
   width: min(420px, 90vw);
-  height: 100vh;
+  height: 100dvh;
   background: var(--paper);
   padding: 32px;
   overflow-y: auto;
@@ -1173,7 +1173,7 @@ function tcy(n: number): string {
 .v-author-pane {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  height: 100vh;
+  height: 100dvh;
   background: var(--paper);
   padding: 32px 24px;
   overflow-x: auto;
@@ -1290,7 +1290,7 @@ function tcy(n: number): string {
   flex-direction: column;
   gap: 8px;
   flex-shrink: 0;
-  height: 100vh;
+  height: 100dvh;
   align-items: center;
   justify-content: center;
   padding: 0 6px;