npm - @hanology/cham-browser - Versions diffs - 0.4.64 → 0.4.65 - Mend

@hanology/cham-browser 0.4.64 → 0.4.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/package.json +1 -1
package/template/index.html +1 -1
package/template/src/components/AnnotationTooltip.vue +21 -21
package/template/src/components/BackToTop.vue +2 -2
package/template/src/components/HorizontalDisplay.vue +18 -5
package/template/src/components/PoemCard.vue +2 -2
package/template/src/components/PronunciationGroup.vue +12 -2
package/template/src/components/ReadingToolbar.vue +3 -2
package/template/src/components/SectionBlock.vue +10 -1
package/template/src/components/SideNav.vue +4 -4
package/template/src/components/VerticalScroll.vue +19 -6
package/template/src/composables/useI18n.ts +7 -2
package/template/src/styles/annotation-targets.css +20 -20
package/template/src/styles/main.css +2 -2
package/template/src/views/PieceView.vue +1 -1

package/package.json CHANGED Viewed

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

package/template/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="zh-Hant">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
   <title>CHAM</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

package/template/src/components/AnnotationTooltip.vue CHANGED Viewed

@@ -364,7 +364,7 @@ onBeforeUnmount(() => {
 }
 .ann-sheet-scroll {
-  padding: 4px 16px 24px;
+  padding: 4px 16px max(24px, env(safe-area-inset-bottom, 0px));
   overflow-y: auto;
   overscroll-behavior: contain;
   flex: 1;
@@ -384,45 +384,45 @@ onBeforeUnmount(() => {
 /* ─── Active annotation on page ─── */
 :global(.ann-target.ann-active) {
-  background: rgba(194, 58, 43, 0.12) !important;
-  box-shadow: 0 0 0 2px rgba(194, 58, 43, 0.15);
+  background: color-mix(in srgb, var(--vermillion) 12%, transparent) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vermillion) 15%, transparent);
   border-radius: 2px;
 }
 :global(.ann-target.ann-active.pronunciation) {
-  background: rgba(58, 107, 94, 0.12) !important;
-  box-shadow: 0 0 0 2px rgba(58, 107, 94, 0.15);
+  background: color-mix(in srgb, var(--jade) 12%, transparent) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--jade) 15%, transparent);
 }
 :global(.ann-target.ann-active.person) {
-  background: rgba(58, 90, 140, 0.12) !important;
-  box-shadow: 0 0 0 2px rgba(58, 90, 140, 0.15);
+  background: color-mix(in srgb, var(--ann-person) 12%, transparent) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ann-person) 15%, transparent);
 }
 :global(.ann-target.ann-active.place) {
-  background: rgba(139, 105, 20, 0.12) !important;
-  box-shadow: 0 0 0 2px rgba(139, 105, 20, 0.15);
+  background: color-mix(in srgb, var(--ann-place) 12%, transparent) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ann-place) 15%, transparent);
 }
 :global(.ann-target.ann-active.event) {
-  background: rgba(107, 76, 138, 0.12) !important;
-  box-shadow: 0 0 0 2px rgba(107, 76, 138, 0.15);
+  background: color-mix(in srgb, var(--ann-event) 12%, transparent) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ann-event) 15%, transparent);
 }
 :global(.ann-target.ann-active.date) {
-  background: rgba(42, 122, 122, 0.12) !important;
-  box-shadow: 0 0 0 2px rgba(42, 122, 122, 0.15);
+  background: color-mix(in srgb, var(--ann-date) 12%, transparent) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ann-date) 15%, transparent);
 }
 :global(.ann-target.ann-active.allusion) {
-  background: rgba(181, 101, 29, 0.12) !important;
-  box-shadow: 0 0 0 2px rgba(181, 101, 29, 0.15);
+  background: color-mix(in srgb, var(--ann-allusion) 12%, transparent) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ann-allusion) 15%, transparent);
 }
 :global(.ann-target.ann-active.etymology) {
-  background: rgba(107, 91, 149, 0.12) !important;
-  box-shadow: 0 0 0 2px rgba(107, 91, 149, 0.15);
+  background: color-mix(in srgb, var(--ann-etymology) 12%, transparent) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ann-etymology) 15%, transparent);
 }
 :global(.ann-target.ann-active.commentary) {
-  background: rgba(192, 57, 43, 0.12) !important;
-  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
+  background: color-mix(in srgb, var(--ann-commentary) 12%, transparent) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ann-commentary) 15%, transparent);
 }
 :global(.ann-target.ann-active.translation) {
-  background: rgba(44, 110, 73, 0.12) !important;
-  box-shadow: 0 0 0 2px rgba(44, 110, 73, 0.15);
+  background: color-mix(in srgb, var(--ann-translation) 12%, transparent) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ann-translation) 15%, transparent);
 }
 @media (min-width: 768px) {

package/template/src/components/BackToTop.vue CHANGED Viewed

@@ -72,7 +72,7 @@ onUnmounted(detach)
 <style scoped>
 .btt {
   position: fixed;
-  bottom: 80px;
+  bottom: max(80px, calc(72px + env(safe-area-inset-bottom, 0px)));
   right: 24px;
   width: 40px;
   height: 40px;
@@ -98,7 +98,7 @@ onUnmounted(detach)
 }
 @media (max-width: 768px) {
-  .btt { bottom: 88px; right: 16px; width: 36px; height: 36px; }
+  .btt { bottom: max(88px, calc(80px + env(safe-area-inset-bottom, 0px))); right: 16px; width: 36px; height: 36px; }
 }
 .btt:hover {
   background: var(--vermillion);

package/template/src/components/HorizontalDisplay.vue CHANGED Viewed

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { Annotation, VerseLine } from '../types'
-import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations, countVerseSpans } from '../composables/useAnnotationRenderer'
+import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations } from '../composables/useAnnotationRenderer'
 const props = defineProps<{
   title: string
@@ -15,11 +16,23 @@ 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 {
-  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, false, offset)
+  const spans = allVerseSpans.value[index]
+  return renderAnnotatedText(props.verses[index].text, spans, false, verseOffsets.value[index])
 }
 function onHover(event: MouseEvent) {

package/template/src/components/PoemCard.vue CHANGED Viewed

@@ -97,8 +97,8 @@ const preview = computed(() => {
   box-sizing: border-box;
   overflow: hidden;
   height: auto;
-  -webkit-mask-image: linear-gradient(to left, black 60%, transparent);
-  mask-image: linear-gradient(to left, black 60%, transparent);
+  -webkit-mask-image: linear-gradient(to left, black 80%, transparent);
+  mask-image: linear-gradient(to left, black 80%, transparent);
 }
 .pc-vertical .pc-num {
   font-size: 11px;

package/template/src/components/PronunciationGroup.vue CHANGED Viewed

@@ -1,15 +1,25 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { PronSegment } from '../types'
+import { useI18n } from '../composables/useI18n'
-defineProps<{
+const { t } = useI18n()
+const props = defineProps<{
   segment: PronSegment
 }>()
+const label = computed(() => {
+  if (props.segment.lang === 'yue') return t('pron.yue')
+  if (props.segment.lang === 'cmn') return t('pron.cmn')
+  return props.segment.label
+})
 </script>
 <template>
   <span class="pron-group">
     <span class="pron-badge" :class="segment.lang === 'yue' ? 'pron-yue' : 'pron-cmn'">
-      {{ segment.label }}
+      {{ label }}
     </span>
     <span class="pron-text">{{ segment.parts.join(' ') }}</span>
   </span>

package/template/src/components/ReadingToolbar.vue CHANGED Viewed

@@ -117,13 +117,13 @@ function close() { open.value = false }
 <style scoped>
 .rt {
   position: fixed;
-  bottom: 24px;
+  bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 0px)));
   right: 24px;
   z-index: 500;
 }
 @media (max-width: 768px) {
-  .rt { bottom: 16px; right: 16px; }
+  .rt { bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px))); right: 16px; }
   .rt-panel {
     position: fixed;
     bottom: 0;
@@ -134,6 +134,7 @@ function close() { open.value = false }
     max-height: 60vh;
     overflow-y: auto;
     overscroll-behavior: contain;
+    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
     animation: slideUpMobile 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
   }
   @keyframes slideUpMobile {

package/template/src/components/SectionBlock.vue CHANGED Viewed

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { parseAnnotationBlock } from '../utils/annotationParser'
+import { useI18n } from '../composables/useI18n'
 import PronunciationGroup from './PronunciationGroup.vue'
+const { locale } = useI18n()
 const props = defineProps<{
   num: string
   label: string
@@ -49,6 +52,12 @@ const displayNum = computed(() => {
   return props.num
 })
+const displayLabel = computed(() => {
+  if (!props.special) return props.label
+  if (locale.value === 'en') return props.label
+  return '【' + props.label + '】'
+})
 const entries = computed(() =>
   props.isAnnotations ? parseAnnotationBlock(props.text) : []
 )
@@ -64,7 +73,7 @@ const paragraphsHtml = computed(() => {
   <div v-if="text" ref="rootRef" class="sb-root" :class="{ 'sb-vertical': vertical, 'sb-visible': visible }">
     <div class="sb-header">
       <span v-if="displayNum" class="sb-num" :class="{ special }">{{ displayNum }}</span>
-      <h3>{{ special ? '【' + label + '】' : label }}</h3>
+      <h3>{{ displayLabel }}</h3>
     </div>
     <div v-if="isAnnotations" class="sb-text sb-ann-list">
       <div v-for="entry in entries" :key="entry.num" class="sb-ann-entry">

package/template/src/components/SideNav.vue CHANGED Viewed

@@ -135,7 +135,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
   border-left: 1px solid var(--border);
   display: flex; flex-direction: column;
   align-items: center;
-  padding: 12px 0;
+  padding: max(12px, env(safe-area-inset-top, 0px)) 0 max(12px, env(safe-area-inset-bottom, 0px));
   z-index: 200;
   gap: 8px;
 }
@@ -347,11 +347,11 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 }
 @media (max-width: 768px) {
-  .sidenav { width: 44px; padding: 8px 0; gap: 5px; }
+  .sidenav { width: 44px; padding: max(8px, env(safe-area-inset-top, 0px)) 0 max(8px, env(safe-area-inset-bottom, 0px)); gap: 5px; }
   .sn-brand { width: 30px; height: 36px; margin-bottom: 2px; }
   .sn-seal { font-size: 14px; }
-  .sn-btn { width: 28px; height: 28px; }
-  .sn-btn svg { width: 15px; height: 15px; }
+  .sn-btn { width: 32px; height: 32px; }
+  .sn-btn svg { width: 16px; height: 16px; }
   .sn-context { font-size: 10px; max-height: 70px; }
   .sn-settings { width: 180px; right: 52px; padding: 12px; }
   .sn-layout-tag { width: 20px; height: 20px; font-size: 10px; }

package/template/src/components/VerticalScroll.vue CHANGED Viewed

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { Annotation, VerseLine } from '../types'
-import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations, countVerseSpans } from '../composables/useAnnotationRenderer'
+import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations } from '../composables/useAnnotationRenderer'
 const props = defineProps<{
   title: string
@@ -17,11 +18,23 @@ const emit = defineEmits<{
   openAuthor: [name: string]
 }>()
+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 {
-  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, true, offset)
+  const spans = allVerseSpans.value[index]
+  return renderAnnotatedText(props.verses[index].text, spans, true, verseOffsets.value[index])
 }
 function onHover(event: MouseEvent) {
@@ -60,7 +73,7 @@ function onTap(event: MouseEvent) {
   --ann-shadow-y: -2px;
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  height: calc(100vh - 100px);
+  height: calc(100vh - var(--nav-width, 56px));
   padding: 32px 24px;
   background: var(--surface);
   border: 1px solid var(--border);

package/template/src/composables/useI18n.ts CHANGED Viewed

@@ -94,8 +94,9 @@ const messages: Record<Locale, Record<string, string>> = {
     'theme.sepia': '暖',
     'theme.dark': '暗',
     'theme.oled': '黑',
-    'annotation.kind.pronunciation': '讀音',
-    'annotation.kind.semantic': '釋義',
+    'pron.yue': '粵',
+    'pron.cmn': '普',
+    'annotation.kind.pronunciation': '讀音',    'annotation.kind.semantic': '釋義',
     'annotation.kind.etymology': '詞源',
     'annotation.kind.note': '備注',
     'annotation.kind.definition': '釋義',
@@ -192,6 +193,8 @@ const messages: Record<Locale, Record<string, string>> = {
     'theme.sepia': '暖',
     'theme.dark': '暗',
     'theme.oled': '黑',
+    'pron.yue': '粤',
+    'pron.cmn': '普',
     'annotation.kind.pronunciation': '读音',
     'annotation.kind.semantic': '释义',
     'annotation.kind.etymology': '词源',
@@ -290,6 +293,8 @@ const messages: Record<Locale, Record<string, string>> = {
     'theme.sepia': 'Warm',
     'theme.dark': 'Dark',
     'theme.oled': 'Black',
+    'pron.yue': 'Yue',
+    'pron.cmn': 'Man',
     'annotation.kind.pronunciation': 'Pronunciation',
     'annotation.kind.semantic': 'Definition',
     'annotation.kind.etymology': 'Etymology',

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

@@ -18,44 +18,44 @@
 /* ─── Annotation kind hover states ─── */
 .ann-target:hover {
-  background: rgba(194, 58, 43, 0.1);
-  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(194, 58, 43, 0.08);
+  background: color-mix(in srgb, var(--vermillion) 10%, transparent);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--vermillion) 8%, transparent);
 }
 .ann-target.pronunciation:hover {
-  background: rgba(58, 107, 94, 0.1);
-  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(58, 107, 94, 0.08);
+  background: color-mix(in srgb, var(--jade) 10%, transparent);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--jade) 8%, transparent);
 }
 .ann-target.person:hover {
-  background: rgba(58, 90, 140, 0.1);
-  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(58, 90, 140, 0.08);
+  background: color-mix(in srgb, var(--ann-person) 10%, transparent);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--ann-person) 8%, transparent);
 }
 .ann-target.place:hover {
-  background: rgba(139, 105, 20, 0.1);
-  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(139, 105, 20, 0.08);
+  background: color-mix(in srgb, var(--ann-place) 10%, transparent);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--ann-place) 8%, transparent);
 }
 .ann-target.event:hover {
-  background: rgba(107, 76, 138, 0.1);
-  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(107, 76, 138, 0.08);
+  background: color-mix(in srgb, var(--ann-event) 10%, transparent);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--ann-event) 8%, transparent);
 }
 .ann-target.date:hover {
-  background: rgba(42, 122, 122, 0.1);
-  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(42, 122, 122, 0.08);
+  background: color-mix(in srgb, var(--ann-date) 10%, transparent);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--ann-date) 8%, transparent);
 }
 .ann-target.allusion:hover {
-  background: rgba(181, 101, 29, 0.1);
-  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(181, 101, 29, 0.08);
+  background: color-mix(in srgb, var(--ann-allusion) 10%, transparent);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--ann-allusion) 8%, transparent);
 }
 .ann-target.etymology:hover {
-  background: rgba(107, 91, 149, 0.1);
-  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(107, 91, 149, 0.08);
+  background: color-mix(in srgb, var(--ann-etymology) 10%, transparent);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--ann-etymology) 8%, transparent);
 }
 .ann-target.commentary:hover {
-  background: rgba(192, 57, 43, 0.1);
-  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(192, 57, 43, 0.08);
+  background: color-mix(in srgb, var(--ann-commentary) 10%, transparent);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--ann-commentary) 8%, transparent);
 }
 .ann-target.translation:hover {
-  background: rgba(44, 110, 73, 0.1);
-  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(44, 110, 73, 0.08);
+  background: color-mix(in srgb, var(--ann-translation) 10%, transparent);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px color-mix(in srgb, var(--ann-translation) 8%, transparent);
 }
 /* ─── Annotation number ─── */

package/template/src/styles/main.css CHANGED Viewed

@@ -167,7 +167,7 @@ button:focus-visible {
 /* ===== ACTIVE ANNOTATION FLASH ===== */
 @keyframes ann-flash-anim {
-  0% { background: rgba(194, 58, 43, 0.25); box-shadow: 0 0 12px rgba(194, 58, 43, 0.15); }
+  0% { background: color-mix(in srgb, var(--vermillion) 25%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--vermillion) 15%, transparent); }
   100% { background: transparent; box-shadow: none; }
 }
@@ -251,7 +251,7 @@ button:focus-visible {
   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));
   scrollbar-width: thin;
   scrollbar-color: var(--gold) transparent;
   scroll-snap-type: x proximity;

package/template/src/views/PieceView.vue CHANGED Viewed

@@ -1332,7 +1332,7 @@ function tcy(n: number): string {
 @media (max-width: 768px) {
   /* ─── 直排模式 ─── */
-  .v-page { margin-right: var(--nav-width, 44px); }
+  .v-page { margin-right: calc(var(--nav-width, 44px) + env(safe-area-inset-right, 0px)); }
   .v-title-col { padding: 20px 12px; }
   .v-poem-title { font-size: 28px; letter-spacing: 6px; padding-left: 12px; }
   .v-poem-author { font-size: 18px; letter-spacing: 4px; }