@hanology/cham-browser 0.4.65 → 0.4.66

package/package.json

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

package/template/src/components/PartBlock.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { Annotation, VerseLine, PieceSource } from '../types'
-import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations, countVerseSpans } from '../composables/useAnnotationRenderer'
+import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations } from '../composables/useAnnotationRenderer'
 
 const props = defineProps<{
   num: number
@@ -17,12 +18,24 @@ const emit = defineEmits<{
   annotationTap: [event: MouseEvent, annotations: Annotation[]]
 }>()
 
+const allVerseSpans = computed(() =>
+  props.verses.map((_, i) => buildVerseAnnotations(props.annotations, i))
+)
+
+const verseOffsets = computed(() => {
+  const offsets: number[] = []
+  let acc = 0
+  for (const spans of allVerseSpans.value) {
+    offsets.push(acc)
+    acc += spans.length
+  }
+  return offsets
+})
+
 function verseHtml(index: number): string {
   const useRuby = props.vertical
-  let offset = 0
-  for (let i = 0; i < index; i++) offset += countVerseSpans(props.annotations, i)
-  const spans = buildVerseAnnotations(props.annotations, index)
-  return renderAnnotatedText(props.verses[index].text, spans, useRuby, offset)
+  const spans = allVerseSpans.value[index]
+  return renderAnnotatedText(props.verses[index].text, spans, useRuby, verseOffsets.value[index])
 }
 
 function onHover(event: MouseEvent) {

package/template/src/components/ReadingToolbar.vue

@@ -68,12 +68,12 @@ function close() { open.value = false }
         <div class="rt-label">{{ t('settings.theme') }}</div>
         <div class="rt-options">
           <button
-            v-for="t in THEMES"
-            :key="t"
+            v-for="th in THEMES"
+            :key="th"
             class="rt-opt rt-theme"
-            :class="{ active: theme === t, ['theme-' + t]: true }"
-            @click="setTheme(t)"
-          >{{ t('theme.' + t) }}</button>
+            :class="{ active: theme === th, ['theme-' + th]: true }"
+            @click="setTheme(th)"
+          >{{ t('theme.' + th) }}</button>
         </div>
       </div>
       <div class="rt-group">

package/template/src/components/SideNav.vue

@@ -78,12 +78,12 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
           <div class="ss-label">{{ t('settings.theme') }}</div>
           <div class="ss-options">
             <button
-              v-for="t in THEMES"
-              :key="t"
+              v-for="th in THEMES"
+              :key="th"
               class="ss-opt"
-              :class="{ active: theme === t }"
-              @click="setTheme(t)"
-            >{{ t('theme.' + t) }}</button>
+              :class="{ active: theme === th }"
+              @click="setTheme(th)"
+            >{{ t('theme.' + th) }}</button>
           </div>
         </div>
         <div class="ss-group">

package/template/src/styles/main.css

@@ -321,7 +321,7 @@ button:focus-visible {
 /* ===== DARK MODE VERTICAL WARMTH ===== */
 [data-theme="dark"] .v-scroll,
 [data-theme="oled"] .v-scroll {
-  box-shadow: 0 0 40px rgba(194, 58, 43, 0.03), 0 4px 16px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 40px color-mix(in srgb, var(--vermillion) 3%, transparent), 0 4px 16px rgba(var(--shadow-rgb), 0.2);
 }
 
 [data-theme="dark"] .sb-vertical,

package/template/src/views/AuthorView.vue

@@ -151,7 +151,7 @@ function goHome() { router.push('/') }
   flex-direction: row-reverse;
   overflow-x: auto;
   overflow-y: hidden;
-  margin-right: var(--nav-width, 56px);
+  margin-right: calc(var(--nav-width, 56px) + env(safe-area-inset-right, 0px));
   padding: 0 32px;
   background: var(--paper);
   scrollbar-width: thin;
@@ -349,6 +349,6 @@ function goHome() { router.push('/') }
   .h-hero { flex-direction: column; text-align: center; padding: 24px; }
   .h-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
   .h-content { padding: 30px 20px; }
-  .v-page { padding: 0 16px; }
+  .v-page { padding: 0 16px; margin-right: calc(var(--nav-width, 44px) + env(safe-area-inset-right, 0px)); }
 }
 </style>