@hanology/cham-browser 0.4.68 → 0.4.70

package/package.json

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

@@ -51,18 +51,8 @@ function onKey(event: KeyboardEvent) {
 
 <template>
   <div @keydown="onKey">
-    <router-view v-slot="{ Component, route }">
-      <Transition name="page-fade" mode="out-in">
-        <Suspense :key="route.fullPath">
-          <component :is="Component" />
-          <template #fallback>
-            <div class="route-loading">
-              <img v-if="logoUrl" :src="logoUrl" alt="" class="route-loading-logo" />
-              <div v-else class="route-loading-seal">文</div>
-            </div>
-          </template>
-        </Suspense>
-      </Transition>
+    <router-view v-slot="{ Component }">
+      <component :is="Component" />
     </router-view>
     <!-- 橫排模式才顯示浮動設定鈕 -->
     <ReadingToolbar v-if="!isVertical" />

package/template/src/components/HorizontalDisplay.vue

@@ -113,6 +113,9 @@ function onTap(event: MouseEvent) {
   vertical-align: super;
   margin-right: 1px;
 }
+:deep(.ann-num-long) {
+  letter-spacing: -1px;
+}
 
 @media (max-width: 768px) {
   .h-display {

package/template/src/components/PartBlock.vue

@@ -169,6 +169,10 @@ const sourceLabel = (() => {
   font-size: 0.45em;
   text-align: end;
   vertical-align: baseline;
+  ruby-position: under;
+}
+.part-block--vertical :deep(.ann-num-long) {
+  font-size: 0.38em;
 }
 
 .part-block--vertical .part-source {

package/template/src/components/PartGroup.vue

@@ -57,6 +57,8 @@ const emit = defineEmits<{
 .part-group--vertical {
   writing-mode: vertical-rl;
   text-orientation: mixed;
+  margin-bottom: 0;
+  height: 100%;
 }
 
 .part-group--vertical .part-group-label {

package/template/src/components/VerticalScroll.vue

@@ -113,6 +113,7 @@ function onTap(event: MouseEvent) {
 }
 
 :deep(.ann-target) {
+  border-bottom: none;
   border-left-width: 2px;
   border-left-style: solid;
   padding-left: 2px;
@@ -125,6 +126,7 @@ function onTap(event: MouseEvent) {
 :deep(.ann-num) {
   font-size: 0.45em;
   text-align: end;
+  ruby-position: under;
 }
 :deep(.ann-num-long) {
   font-size: 0.38em;

package/template/src/composables/useReadingMode.ts

@@ -44,10 +44,12 @@ if (!import.meta.env.SSR) {
     localStorage.setItem('theme', t)
   }, { immediate: true })
 
+  // Layout watch must NOT be immediate — it would overwrite localStorage
+  // with the default 'vertical' before nextTick restores the saved value
   watch(layout, l => {
     document.documentElement.setAttribute('data-layout', l)
     localStorage.setItem('layout', l)
-  }, { immediate: true })
+  })
 
   watch(mainFontSize, s => {
     document.documentElement.style.setProperty('--main-font-size', s + 'px')

package/template/src/main.ts

@@ -15,7 +15,8 @@ export async function createApp() {
 }
 
 if (!import.meta.env.SSR) {
-  createApp().then(({ app, router }) => {
+  createApp().then(async ({ app, router }) => {
+    await router.isReady()
     app.mount('#app')
     const loader = document.getElementById('app-loading')
     if (loader) {

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

@@ -16,6 +16,33 @@
 .ann-target.date { border-color: var(--ann-date); }
 .ann-target.allusion { border-color: var(--ann-allusion); }
 
+/* ─── Horizontal mode: border-bottom underline ─── */
+.ann-target {
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+}
+.ann-target.ann-overlap {
+  border-bottom-width: 3px;
+  border-bottom-style: double;
+}
+
+/* ─── Vertical mode: border-left ─── */
+[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;
+}
+[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;
+}
+
 /* ─── Annotation kind hover states ─── */
 .ann-target:hover {
   background: color-mix(in srgb, var(--vermillion) 10%, transparent);
@@ -58,13 +85,26 @@
   box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--ann-translation) 8%, transparent);
 }
 
-/* ─── Annotation number ─── */
+/* ─── Annotation number — horizontal mode (superscript) ─── */
 .ann-num {
   color: var(--vermillion);
   font-family: var(--sans);
   font-weight: 600;
   letter-spacing: 0;
+  font-size: 10px;
+  vertical-align: super;
+  margin-right: 1px;
+}
+
+/* ─── Annotation number — vertical mode (ruby) ─── */
+.v-scroll .ann-num,
+.part-block--vertical .ann-num {
+  font-size: 0.45em;
+  text-align: end;
+  vertical-align: baseline;
+  ruby-position: under;
 }
-.ann-num-long {
-  letter-spacing: -1px;
+.v-scroll .ann-num-long,
+.part-block--vertical .ann-num-long {
+  font-size: 0.38em;
 }

package/template/src/views/PieceView.vue

@@ -779,7 +779,7 @@ function tcy(n: number): string {
 .v-multipart {
   display: flex;
   flex-direction: row-reverse;
-  align-items: flex-start;
+  align-items: stretch;
   gap: 0;
   height: 100vh;
   box-sizing: border-box;