@hanology/cham-browser 0.4.72 → 0.4.73

package/package.json

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

@@ -2,6 +2,8 @@
 import { computed } from 'vue'
 import type { Annotation, VerseLine, PieceSource } from '../types'
 import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations } from '../composables/useAnnotationRenderer'
+import { parseAnnotationBlock } from '../utils/annotationParser'
+import PronunciationGroup from './PronunciationGroup.vue'
 
 const props = defineProps<{
   num: number
@@ -54,6 +56,10 @@ const sourceLabel = (() => {
   const r = props.source?.range as Record<string, string> | undefined
   return r?.chapter || ''
 })()
+
+const annotationEntries = computed(() =>
+  props.annotationText ? parseAnnotationBlock(props.annotationText) : []
+)
 </script>
 
 <template>
@@ -69,7 +75,22 @@ const sourceLabel = (() => {
         v-html="verseHtml(i)"
       />
     </div>
-    <div v-if="annotationText" class="part-annotations">
+    <div v-if="annotationText && annotationEntries.length > 0" class="part-annotations">
+      <div v-for="entry in annotationEntries" :key="entry.num" class="part-ann-entry">
+        <div class="part-ann-head">
+          <span class="part-ann-num">{{ entry.numDisplay }}</span>
+          <span class="part-ann-term">{{ entry.term }}</span>
+          <PronunciationGroup
+            v-for="seg in entry.pronSegments"
+            :key="seg.lang"
+            :segment="seg"
+            class="part-ann-pron"
+          />
+        </div>
+        <div v-if="entry.definition" class="part-ann-def">{{ entry.definition }}</div>
+      </div>
+    </div>
+    <div v-else-if="annotationText" class="part-annotations">
       <div v-for="line in annotationText.split('\n')" :key="line" class="part-ann-line">{{ line }}</div>
     </div>
   </div>
@@ -114,6 +135,59 @@ const sourceLabel = (() => {
   margin-top: 16px;
   padding-top: 12px;
   border-top: 1px dashed var(--border-light);
+  text-align: start;
+}
+
+.part-ann-entry {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border-light);
+}
+.part-ann-entry:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.part-ann-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 10px;
+  margin-bottom: 4px;
+}
+
+.part-ann-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  background: var(--vermillion);
+  color: var(--paper);
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.part-ann-term {
+  font-weight: 700;
+  font-size: 1.05em;
+  color: var(--ink);
+  padding: 2px 8px;
+  background: var(--surface-warm);
+  border-radius: 3px;
+}
+
+.part-ann-pron {
+  margin-left: 2px;
+}
+
+.part-ann-def {
+  color: var(--ink-mid);
+  line-height: 2;
+  white-space: pre-line;
+  padding-left: 32px;
 }
 
 .part-ann-line {
@@ -188,4 +262,36 @@ const sourceLabel = (() => {
   border-top: none;
   border-left: 1px dashed var(--border-light);
 }
+
+.part-block--vertical .part-ann-entry {
+  margin-bottom: 0;
+  margin-left: 16px;
+  padding: 0;
+  border-bottom: none;
+}
+
+.part-block--vertical .part-ann-head {
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.part-block--vertical .part-ann-num {
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  background: none;
+  color: var(--vermillion);
+  font-size: inherit;
+}
+
+.part-block--vertical .part-ann-term {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+.part-block--vertical .part-ann-def {
+  padding-left: 0;
+  margin-left: 12px;
+}
 </style>