@hanology/cham-browser 0.4.8 → 0.4.10

package/package.json

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

package/template/src/components/AnnotationControlBar.vue

@@ -42,28 +42,21 @@ function toggleLayer(id: string) {
 <template>
   <div v-if="hasAnnotations" class="ann-bar">
     <button
-      class="ann-master"
-      :class="{ active: annotationsVisible }"
+      class="ann-toggle"
+      :class="{ on: annotationsVisible }"
       @click="toggleAnnotations"
-    >
-      <span class="ann-master-icon">{{ annotationsVisible ? '✓' : '注' }}</span>
-      <span class="ann-master-text">{{ annotationsVisible ? '注釋' : '顯示注釋' }}</span>
-      <span v-if="hasLayers() && annotationsVisible" class="ann-count">{{ activeIds.length }}/{{ layers.length }}</span>
-    </button>
-    <template v-if="hasLayers() && annotationsVisible">
-      <div class="ann-chips">
-        <button
-          v-for="layer in layers"
-          :key="layer.id"
-          :class="['ann-chip', { active: activeIds.includes(layer.id) }]"
-          :title="layer.label"
-          @click="toggleLayer(layer.id)"
-        >
-          <span class="ann-chip-check">{{ activeIds.includes(layer.id) ? '✓' : '' }}</span>
-          {{ layer.shortLabel }}
-        </button>
-      </div>
-    </template>
+      :title="annotationsVisible ? '隱藏注釋' : '顯示注釋'"
+    >注</button>
+    <div v-if="hasLayers() && annotationsVisible" class="ann-layers">
+      <button
+        v-for="layer in layers"
+        :key="layer.id"
+        class="ann-layer-btn"
+        :class="{ active: activeIds.includes(layer.id) }"
+        @click="toggleLayer(layer.id)"
+        :title="layer.label"
+      >{{ layer.shortLabel }}</button>
+    </div>
   </div>
 </template>
 
@@ -71,124 +64,86 @@ function toggleLayer(id: string) {
 .ann-bar {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 6px;
+  align-items: stretch;
 }
 
-.ann-master {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 20px;
+.ann-toggle {
+  width: 36px;
+  height: 36px;
   border: 1.5px solid var(--vermillion);
-  border-radius: 20px;
+  border-radius: 6px;
   background: none;
   color: var(--vermillion);
-  font-family: var(--sans);
-  font-size: 13px;
-  font-weight: 600;
+  font-family: var(--serif);
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0;
   cursor: pointer;
   transition: all 0.2s;
-  letter-spacing: 1px;
-  min-height: 44px;
-  align-self: flex-start;
-}
-
-.ann-master.active {
-  background: var(--vermillion);
-  color: #fff;
-}
-
-.ann-master:active {
-  transform: scale(0.97);
-}
-
-.ann-master:hover {
-  box-shadow: 0 2px 12px rgba(194, 58, 43, 0.15);
-}
-
-.ann-master-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 1.5px solid currentColor;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
-  flex-shrink: 0;
 }
 
-.ann-master.active .ann-master-icon {
-  border-color: rgba(255, 255, 255, 0.5);
-  background: rgba(255, 255, 255, 0.15);
+.ann-toggle:hover {
+  box-shadow: 0 2px 8px rgba(194, 58, 43, 0.15);
 }
 
-.ann-master-text {
-  white-space: nowrap;
+.ann-toggle:active {
+  transform: scale(0.94);
 }
 
-.ann-count {
-  font-size: 11px;
-  opacity: 0.7;
-  margin-left: 2px;
+.ann-toggle.on {
+  background: var(--vermillion);
+  color: #fff;
 }
 
-.ann-chips {
+.ann-layers {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding-left: 4px;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.ann-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 14px;
+.ann-layer-btn {
+  padding: 5px 10px;
   border: 1px solid var(--border);
-  border-radius: 16px;
-  background: var(--surface);
-  color: var(--ink-mid);
+  border-radius: 4px;
+  background: none;
+  color: var(--ink-faint);
   font-family: var(--sans);
-  font-size: 12px;
+  font-size: 11px;
   letter-spacing: 1px;
   cursor: pointer;
-  transition: all 0.2s;
-  min-height: 36px;
+  transition: all 0.15s;
+  white-space: nowrap;
+  text-align: center;
 }
 
-.ann-chip:hover {
+.ann-layer-btn:hover {
   border-color: var(--gold);
   color: var(--ink);
 }
 
-.ann-chip.active {
+.ann-layer-btn.active {
   background: var(--ink);
   color: var(--paper);
   border-color: var(--ink);
 }
 
-.ann-chip:active {
-  transform: scale(0.96);
-}
-
-.ann-chip-check {
-  font-size: 11px;
-  width: 12px;
-  text-align: center;
+.ann-layer-btn:active {
+  transform: scale(0.95);
 }
 
 @media (max-width: 768px) {
-  .ann-master {
-    padding: 10px 24px;
-    font-size: 14px;
-  }
-  .ann-chips {
-    gap: 6px;
+  .ann-toggle {
+    width: 40px;
+    height: 40px;
+    font-size: 17px;
   }
-  .ann-chip {
-    padding: 8px 16px;
-    font-size: 13px;
+  .ann-layer-btn {
+    padding: 6px 12px;
+    font-size: 12px;
   }
 }
 </style>

package/template/src/components/AnnotationTooltip.vue

@@ -77,18 +77,6 @@ function kindLabel(ann: Annotation): string {
   return map[ann.kind] || ann.kind
 }
 
-const hasOverlap = computed(() =>
-  props.annotations.some(a => {
-    const seg = annotationToPronSegment(a)
-    return !seg && props.annotations.filter(b =>
-      b.range.scope === a.range.scope &&
-      b.range.verseIndex === a.range.verseIndex &&
-      (b.range.start ?? 0) !== (a.range.start ?? 0) ||
-      (b.range.end ?? 0) !== (a.range.end ?? 0)
-    ).length > 0
-  })
-)
-
 function onDocClick(e: MouseEvent) {
   if (!stickyVisible.value) return
   const el = (e.target as HTMLElement)
@@ -128,18 +116,16 @@ onBeforeUnmount(() => {
         @mouseleave="emit('tooltipLeave')"
       >
         <button class="ann-pane-close" @click="dismiss" aria-label="關閉">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
         </button>
-        <div class="ann-pane-inner">
-          <div v-for="ann in annotations" :key="ann.id" class="ann-detail" :class="ann.kind">
-            <div class="ann-detail-head">
-              <span class="ann-kind-tag" :class="ann.kind">{{ kindLabel(ann) }}</span>
-              <span v-if="layerLabel(ann)" class="ann-layer-tag">{{ layerLabel(ann) }}</span>
-            </div>
-            <div class="ann-detail-body">
-              <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" class="ann-pron-block" />
-              <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text-block">{{ ann.text }}</div>
+        <div class="ann-pane-scroll">
+          <div v-for="ann in annotations" :key="ann.id" class="ann-entry" :class="ann.kind">
+            <div class="ann-head">
+              <span class="ann-kind" :class="ann.kind">{{ kindLabel(ann) }}</span>
+              <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
             </div>
+            <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
+            <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
           </div>
         </div>
       </div>
@@ -155,13 +141,13 @@ onBeforeUnmount(() => {
         @mouseenter="emit('tooltipEnter')"
         @mouseleave="emit('tooltipLeave')"
       >
-        <div v-for="ann in annotations" :key="ann.id" class="ann-detail" :class="ann.kind">
-          <div class="ann-detail-head">
-            <span class="ann-kind-tag" :class="ann.kind">{{ kindLabel(ann) }}</span>
-            <span v-if="layerLabel(ann)" class="ann-layer-tag">{{ layerLabel(ann) }}</span>
+        <div v-for="ann in annotations" :key="ann.id" class="ann-entry" :class="ann.kind">
+          <div class="ann-head">
+            <span class="ann-kind" :class="ann.kind">{{ kindLabel(ann) }}</span>
+            <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
           </div>
           <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
-          <span v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text-block">{{ ann.text }}</span>
+          <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
         </div>
       </div>
     </Transition>
@@ -175,16 +161,14 @@ onBeforeUnmount(() => {
         <button class="ann-sheet-handle" @click="dismiss">
           <span class="ann-handle-bar" />
         </button>
-        <div class="ann-sheet-inner">
-          <div v-for="ann in annotations" :key="ann.id" class="ann-detail" :class="ann.kind">
-            <div class="ann-detail-head">
-              <span class="ann-kind-tag" :class="ann.kind">{{ kindLabel(ann) }}</span>
-              <span v-if="layerLabel(ann)" class="ann-layer-tag">{{ layerLabel(ann) }}</span>
-            </div>
-            <div class="ann-detail-body">
-              <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" class="ann-pron-block" />
-              <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text-block">{{ ann.text }}</div>
+        <div class="ann-sheet-scroll">
+          <div v-for="ann in annotations" :key="ann.id" class="ann-entry" :class="ann.kind">
+            <div class="ann-head">
+              <span class="ann-kind" :class="ann.kind">{{ kindLabel(ann) }}</span>
+              <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
             </div>
+            <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
+            <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text">{{ ann.text }}</div>
           </div>
         </div>
       </div>
@@ -193,66 +177,64 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-/* ─── Shared Entry Styles ─── */
-.ann-detail {
-  margin-bottom: 16px;
-  letter-spacing: 1px;
-  font-size: 15px;
+/* ─── Compact annotation entry ─── */
+.ann-entry {
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-light);
+  font-size: 14px;
   color: var(--ink-mid);
+  letter-spacing: 0.5px;
+  line-height: 1.8;
 }
-.ann-detail:last-child { margin-bottom: 0; }
+.ann-entry:last-child { border-bottom: none; padding-bottom: 0; }
+.ann-entry:first-child { padding-top: 0; }
 
-.ann-detail-head {
-  display: flex;
+.ann-head {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
+  gap: 6px;
+  margin-bottom: 2px;
+  vertical-align: baseline;
 }
 
-.ann-kind-tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 3px 10px;
-  border-radius: 4px;
-  font-size: 12px;
+.ann-kind {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 3px;
+  font-size: 10px;
   font-family: var(--sans);
   font-weight: 700;
   letter-spacing: 1px;
-}
-.ann-kind-tag.pronunciation { background: var(--jade); color: #fff; }
-.ann-kind-tag.semantic { background: var(--vermillion); color: #fff; }
-.ann-kind-tag.etymology { background: #6b5b95; color: #fff; }
-.ann-kind-tag.note,
-.ann-kind-tag.definition { background: var(--ink); color: var(--paper); }
-.ann-kind-tag.commentary { background: #c0392b; color: #fff; }
-.ann-kind-tag.translation { background: #2c6e49; color: #fff; }
-.ann-kind-tag.person { background: var(--ann-person); color: #fff; }
-.ann-kind-tag.place { background: var(--ann-place); color: #fff; }
-.ann-kind-tag.event { background: var(--ann-event); color: #fff; }
-.ann-kind-tag.date { background: var(--ann-date); color: #fff; }
-.ann-kind-tag.allusion { background: var(--ann-allusion); color: #fff; }
-
-.ann-layer-tag {
-  font-size: 11px;
+  line-height: 1.5;
+  vertical-align: middle;
+}
+.ann-kind.pronunciation { background: var(--jade); color: #fff; }
+.ann-kind.semantic { background: var(--vermillion); color: #fff; }
+.ann-kind.etymology { background: #6b5b95; color: #fff; }
+.ann-kind.note,
+.ann-kind.definition { background: var(--ink); color: var(--paper); }
+.ann-kind.commentary { background: #c0392b; color: #fff; }
+.ann-kind.translation { background: #2c6e49; color: #fff; }
+.ann-kind.person { background: var(--ann-person); color: #fff; }
+.ann-kind.place { background: var(--ann-place); color: #fff; }
+.ann-kind.event { background: var(--ann-event); color: #fff; }
+.ann-kind.date { background: var(--ann-date); color: #fff; }
+.ann-kind.allusion { background: var(--ann-allusion); color: #fff; }
+
+.ann-layer {
+  font-size: 10px;
   font-family: var(--sans);
   color: var(--ink-faint);
-  padding: 2px 6px;
+  padding: 1px 5px;
   border: 1px solid var(--border-light);
-  border-radius: 3px;
-  letter-spacing: 1px;
-}
-
-.ann-detail-body {
-  padding-left: 4px;
-}
-
-.ann-pron-block {
-  margin-bottom: 6px;
+  border-radius: 2px;
+  letter-spacing: 0.5px;
+  line-height: 1.4;
 }
 
-.ann-text-block {
-  line-height: 1.9;
+.ann-text {
   white-space: pre-line;
+  line-height: 1.8;
 }
 
 /* ─── Desktop Left Pane (horizontal mode) ─── */
@@ -260,15 +242,46 @@ onBeforeUnmount(() => {
   position: fixed;
   top: 72px;
   left: 20px;
-  width: 300px;
+  width: 280px;
   max-height: calc(100vh - 100px);
   background: var(--surface-warm);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 10px;
   box-shadow: 0 8px 40px rgba(var(--shadow-rgb), 0.12);
   z-index: 1000;
+  display: flex;
+  flex-direction: column;
+}
+
+.ann-pane-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 4px;
+  background: var(--surface);
+  color: var(--ink-faint);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  z-index: 1;
+  opacity: 0.6;
+}
+.ann-pane-close:hover {
+  opacity: 1;
+  background: var(--ink);
+  color: var(--paper);
+}
+
+.ann-pane-scroll {
+  padding: 12px 14px;
   overflow-y: auto;
   overscroll-behavior: contain;
+  flex: 1;
 }
 
 /* ─── Desktop Right Pane (vertical mode) ─── */
@@ -278,83 +291,63 @@ onBeforeUnmount(() => {
   right: 20px;
   height: calc(100vh - 100px);
   width: auto;
-  max-width: 300px;
+  max-width: 280px;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   background: var(--surface-warm);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 10px;
   box-shadow: 0 8px 40px rgba(var(--shadow-rgb), 0.12);
   z-index: 1000;
-  overflow-x: auto;
-  overscroll-behavior: contain;
-}
-.ann-right-pane .ann-pane-inner {
-  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
 }
 .ann-right-pane .ann-pane-close {
-  top: 10px;
-  right: auto;
-  left: 10px;
+  position: static;
+  margin: 8px 8px 0;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+.ann-right-pane .ann-pane-scroll {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 12px 14px;
+  flex: 1;
 }
-.ann-right-pane .ann-detail {
+.ann-right-pane .ann-entry {
   writing-mode: vertical-rl;
   text-orientation: mixed;
+  border-bottom: none;
+  border-left: 1px solid var(--border-light);
+  padding: 0 0 0 12px;
+  margin-left: 8px;
 }
-.ann-right-pane .ann-detail-head {
+.ann-right-pane .ann-entry:first-child { padding-top: 0; }
+.ann-right-pane .ann-entry:last-child { border-left: none; }
+.ann-right-pane .ann-head {
   flex-direction: column;
   align-items: flex-start;
   margin-bottom: 0;
-  margin-left: 8px;
+  margin-left: 4px;
 }
-.ann-right-pane .ann-detail-body {
-  padding-left: 0;
-  padding-top: 4px;
-}
-.ann-right-pane .ann-text-block {
+.ann-right-pane .ann-text {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   line-height: 2;
 }
 
-.ann-pane-close {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 28px;
-  height: 28px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--surface);
-  color: var(--ink-light);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.15s;
-  z-index: 1;
-}
-.ann-pane-close:hover {
-  background: var(--ink);
-  color: var(--paper);
-  border-color: var(--ink);
-}
-
-.ann-pane-inner {
-  padding: 16px;
-  padding-top: 14px;
-}
-
 /* ─── Tablet Popup ─── */
 .ann-popup {
   position: fixed;
-  padding: 14px 18px;
+  padding: 12px 14px;
   background: var(--surface-warm);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: 8px;
   box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.16);
-  max-width: 320px;
-  max-height: 60vh;
+  max-width: 300px;
+  max-height: 50vh;
   overflow-y: auto;
   z-index: 1000;
 }
@@ -365,41 +358,44 @@ onBeforeUnmount(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  max-height: 55vh;
+  max-height: 50vh;
   background: var(--surface-warm);
   border-top: 1px solid var(--border);
-  border-radius: 16px 16px 0 0;
+  border-radius: 14px 14px 0 0;
   box-shadow: 0 -4px 32px rgba(var(--shadow-rgb), 0.15);
   z-index: 1000;
-  overflow-y: auto;
-  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
 }
 
 .ann-sheet-handle {
   display: flex;
   justify-content: center;
-  padding: 12px 0 6px;
+  padding: 10px 0 4px;
   width: 100%;
   border: none;
   background: none;
   cursor: pointer;
+  flex-shrink: 0;
 }
 
 .ann-handle-bar {
   display: block;
-  width: 40px;
+  width: 36px;
   height: 4px;
   border-radius: 2px;
   background: var(--border);
 }
 
-.ann-sheet-inner {
-  padding: 0 20px 28px;
+.ann-sheet-scroll {
+  padding: 4px 16px 24px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  flex: 1;
 }
 
 /* ─── Transitions ─── */
 
-/* Left pane slide from left (horizontal mode) */
 .ann-slide-right-enter-active {
   transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
@@ -408,14 +404,13 @@ onBeforeUnmount(() => {
 }
 .ann-slide-right-enter-from {
   opacity: 0;
-  transform: translateX(-24px);
+  transform: translateX(-20px);
 }
 .ann-slide-right-leave-to {
   opacity: 0;
-  transform: translateX(-16px);
+  transform: translateX(-12px);
 }
 
-/* Right pane slide from right (vertical mode) */
 .ann-slide-left-enter-active {
   transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
@@ -424,14 +419,13 @@ onBeforeUnmount(() => {
 }
 .ann-slide-left-enter-from {
   opacity: 0;
-  transform: translateX(24px);
+  transform: translateX(20px);
 }
 .ann-slide-left-leave-to {
   opacity: 0;
-  transform: translateX(16px);
+  transform: translateX(12px);
 }
 
-/* Popup fade */
 .ann-fade-enter-active {
   transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
@@ -440,14 +434,13 @@ onBeforeUnmount(() => {
 }
 .ann-fade-enter-from {
   opacity: 0;
-  transform: scale(0.92) translateY(4px);
+  transform: scale(0.94) translateY(4px);
 }
 .ann-fade-leave-to {
   opacity: 0;
   transform: scale(0.96);
 }
 
-/* Bottom sheet slide up */
 .ann-sheet-enter-active {
   transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

package/template/src/components/ReadingToolbar.vue

@@ -4,7 +4,7 @@ import { useReadingMode, THEMES, THEME_LABELS, FONT_SIZES } from '../composables
 import type { LayoutMode, FontSize } from '../composables/useReadingMode'
 import { useI18n, LOCALE_LABELS, type Locale } from '../composables/useI18n'
 
-const { theme, layout, mainFontSize, bodyFontSize, setTheme, setLayout, setMainFontSize, setBodyFontSize } = useReadingMode()
+const { theme, layout, mainFontSize, bodyFontSize, annotationsVisible, setTheme, setLayout, setMainFontSize, setBodyFontSize, setAnnotationsVisible } = useReadingMode()
 const { t, setLocale, locale, availableLocales, localeLabels } = useI18n()
 const open = ref(false)
 
@@ -34,6 +34,21 @@ function close() { open.value = false }
           >{{ t('settings.vertical') }}</button>
         </div>
       </div>
+      <div class="rt-group">
+        <div class="rt-label">{{ t('settings.annotations') }}</div>
+        <div class="rt-options">
+          <button
+            class="rt-opt"
+            :class="{ active: annotationsVisible }"
+            @click="setAnnotationsVisible(true)"
+          >{{ t('settings.show') }}</button>
+          <button
+            class="rt-opt"
+            :class="{ active: !annotationsVisible }"
+            @click="setAnnotationsVisible(false)"
+          >{{ t('settings.hide') }}</button>
+        </div>
+      </div>
       <div class="rt-group">
         <div class="rt-label">{{ t('settings.theme') }}</div>
         <div class="rt-options">

package/template/src/composables/useI18n.ts

@@ -24,6 +24,9 @@ const messages: Record<Locale, Record<string, string>> = {
     'settings.bodyFontSize': '內文字號',
     'settings.reading': '閱讀設定',
     'settings.close': '關閉設定',
+    'settings.annotations': '注釋',
+    'settings.show': '顯示',
+    'settings.hide': '隱藏',
     'piece.stanzas': '段',
     'piece.notes': '注',
     'piece.noNotes': '無注',
@@ -79,6 +82,9 @@ const messages: Record<Locale, Record<string, string>> = {
     'settings.bodyFontSize': '内文字号',
     'settings.reading': '阅读设定',
     'settings.close': '关闭设定',
+    'settings.annotations': '注释',
+    'settings.show': '显示',
+    'settings.hide': '隐藏',
     'piece.stanzas': '段',
     'piece.notes': '注',
     'piece.noNotes': '无注',
@@ -134,6 +140,9 @@ const messages: Record<Locale, Record<string, string>> = {
     'settings.bodyFontSize': 'Body Size',
     'settings.reading': 'Reading Settings',
     'settings.close': 'Close Settings',
+    'settings.annotations': 'Annotations',
+    'settings.show': 'Show',
+    'settings.hide': 'Hide',
     'piece.stanzas': 'stanzas',
     'piece.notes': 'notes',
     'piece.noNotes': 'No notes',

package/template/src/composables/useReadingMode.ts

@@ -19,6 +19,7 @@ const theme = ref<Theme>('light')
 const layout = ref<LayoutMode>('vertical')
 const mainFontSize = ref<FontSize>(24)
 const bodyFontSize = ref<FontSize>(16)
+const annotationsVisible = ref(true)
 
 if (!import.meta.env.SSR) {
   // Theme and font sizes only affect CSS, safe to apply before hydration
@@ -31,6 +32,9 @@ if (!import.meta.env.SSR) {
   const savedBody = parseInt(localStorage.getItem('bodyFontSize') || '', 10)
   if (FONT_SIZES.includes(savedBody as any)) bodyFontSize.value = savedBody as FontSize
 
+  const savedAnnVis = localStorage.getItem('annotationsVisible')
+  if (savedAnnVis === 'false') annotationsVisible.value = false
+
   // Layout controls v-if/v-else DOM structure — must defer to after hydration
   // to avoid SSR/client mismatch (SSR always renders vertical)
   nextTick(() => {
@@ -57,6 +61,10 @@ if (!import.meta.env.SSR) {
     document.documentElement.style.setProperty('--body-font-size', s + 'px')
     localStorage.setItem('bodyFontSize', String(s))
   }, { immediate: true })
+
+  watch(annotationsVisible, v => {
+    localStorage.setItem('annotationsVisible', String(v))
+  })
 }
 
 export function useReadingMode() {
@@ -71,5 +79,7 @@ export function useReadingMode() {
   }
   function setMainFontSize(s: FontSize) { mainFontSize.value = s }
   function setBodyFontSize(s: FontSize) { bodyFontSize.value = s }
-  return { theme, layout, mainFontSize, bodyFontSize, setTheme, cycleTheme, setLayout, toggleLayout, setMainFontSize, setBodyFontSize }
+  function setAnnotationsVisible(v: boolean) { annotationsVisible.value = v }
+  function toggleAnnotationsVisible() { annotationsVisible.value = !annotationsVisible.value }
+  return { theme, layout, mainFontSize, bodyFontSize, annotationsVisible, setTheme, cycleTheme, setLayout, toggleLayout, setMainFontSize, setBodyFontSize, setAnnotationsVisible, toggleAnnotationsVisible }
 }

package/template/src/views/LibraryHome.vue

@@ -85,9 +85,6 @@ function openBook(bookId: string) {
     <div v-if="isVertical" class="v-root">
       <SideNav @home="router.push('/')" @back="router.push('/')" />
       <div ref="vPageRef" class="v-page">
-        <div v-if="aboutHtml" class="v-about-col">
-          <button class="v-about-link" @click="aboutPane?.toggleAbout()">{{ t('nav.about') }}</button>
-        </div>
         <section class="v-hero">
           <h1 class="v-title">{{ spacedTitle }}</h1>
           <p v-if="siteSubtitle" class="v-subtitle">{{ siteSubtitle }}</p>
@@ -117,7 +114,7 @@ function openBook(bookId: string) {
       <header class="lib-hero">
         <img v-if="logoUrl" :src="logoUrl" alt="" class="lib-logo" />
         <div v-else class="lib-seal">{{ displayTitle.slice(0, 2) }}</div>
-        <h1>{{ displayTitle }} <button v-if="aboutHtml" class="lib-about-link" @click="aboutPane?.toggleAbout()">{{ t('nav.about') }}</button></h1>
+        <h1>{{ displayTitle }}</h1>
         <p v-if="siteSubtitle" class="lib-subtitle">{{ siteSubtitle }}</p>
         <div class="lib-stats-bar">
           <span class="lib-stat">{{ books.length }} {{ t('stat.books') }}</span>
@@ -174,33 +171,6 @@ function openBook(bookId: string) {
   justify-content: center;
   padding: 40px 20px;
 }
-.v-about-col {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  flex-shrink: 0;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 12px;
-  border-right: 1px solid var(--border-light);
-}
-.v-about-link {
-  font-size: 14px;
-  color: var(--ink-faint);
-  letter-spacing: 6px;
-  font-family: var(--sans);
-  padding: 12px 8px;
-  border: 1px solid var(--border-light);
-  border-radius: 2px;
-  background: none;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.v-about-link:hover {
-  color: var(--ink);
-  border-color: var(--ink);
-}
 .v-title {
   font-size: 48px; font-weight: 900;
   letter-spacing: 16px; color: var(--ink);
@@ -345,25 +315,6 @@ function openBook(bookId: string) {
 }
 .lib-stat-sep { color: var(--border); }
 
-.lib-about-link {
-  display: inline-block;
-  font-family: var(--sans);
-  font-size: 13px;
-  color: var(--ink-faint);
-  letter-spacing: 2px;
-  padding: 4px 12px;
-  border: 1px solid var(--border-light);
-  border-radius: 4px;
-  background: none;
-  cursor: pointer;
-  transition: all 0.2s;
-  vertical-align: middle;
-}
-.lib-about-link:hover {
-  color: var(--ink);
-  border-color: var(--ink);
-}
-
 .lib-group { margin-bottom: 40px; }
 .lib-group-title {
   font-size: 15px;

package/template/src/views/PieceView.vue

@@ -24,7 +24,7 @@ const router = useRouter()
 const { getPiece, pieces, meta, load, getAdjacentNums } = useBook()
 await load(props.bookId)
 
-const { layout } = useReadingMode()
+const { layout, annotationsVisible: prefAnnotationsVisible } = useReadingMode()
 const vPageRef = ref<HTMLElement | null>(null)
 const vScroll = useHorizontalScroll(vPageRef)
 const { t } = useI18n()
@@ -95,7 +95,7 @@ const totalAnnotationCount = computed(() => {
 const annotationLayers = computed<AnnotationLayer[]>(() => piece.value?.annotationLayers || [])
 const hasLayers = computed(() => annotationLayers.value.length > 1)
 const activeLayerIds = ref<string[]>([])
-const annotationsVisible = ref(true)
+const annotationsVisible = prefAnnotationsVisible
 
 function initLayers() {
   if (hasLayers.value && activeLayerIds.value.length === 0) {