@hanology/cham-browser 0.4.18 → 0.4.20

package/package.json

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

package/template/src/components/AnnotationPane.vue

@@ -36,7 +36,7 @@ function kindLabel(ann: Annotation): string {
     etymology: '詞源',
     note: '備注',
     definition: '釋義',
-    commentary: '評註',
+    commentary: '注',
     translation: '譯文',
     person: '人名',
     place: '地名',
@@ -311,21 +311,26 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
 .ann-pane.vertical {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  width: 240px;
+  width: 220px;
 }
 
 .ann-pane.vertical .ann-pane-body {
-  overflow-x: auto;
-  overflow-y: hidden;
+  display: flex;
+  flex-direction: row;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .ann-pane.vertical .ann-pane-entry {
-  padding: 12px 8px;
+  padding: 10px 6px;
   border-bottom: none;
-  border-left: 1px solid var(--border-light);
   border-right: 3px solid transparent;
 }
 
+.ann-pane.vertical .ann-pane-entry + .ann-pane-entry {
+  border-top: 1px solid var(--border-light);
+}
+
 .ann-pane.vertical .ann-pane-entry.active {
   border-right-color: var(--vermillion);
 }
@@ -335,7 +340,7 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
 }
 
 .ann-pane.vertical .ann-pane-entry-head {
-  flex-direction: column;
+  flex-direction: row;
   gap: 4px;
 }
 
@@ -343,4 +348,12 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
   line-height: 2;
   letter-spacing: 1px;
 }
+
+.ann-pane.vertical .ann-pane-header {
+  flex-direction: row;
+}
+
+.ann-pane.vertical .ann-pane-close {
+  writing-mode: horizontal-tb;
+}
 </style>

package/template/src/components/AnnotationTooltip.vue

@@ -54,7 +54,7 @@ function kindLabel(ann: Annotation): string {
     etymology: '詞源',
     note: '備注',
     definition: '釋義',
-    commentary: '評註',
+    commentary: '注',
     translation: '譯文',
     person: '人名',
     place: '地名',
@@ -414,26 +414,33 @@ onBeforeUnmount(() => {
 .ann-card.vertical {
   writing-mode: vertical-rl;
   text-orientation: mixed;
+  flex-direction: row;
+}
+
+.ann-card.vertical .ann-card-head {
+  padding: 10px 6px;
 }
 
 .ann-card.vertical .ann-card-scroll {
   display: flex;
   flex-direction: row;
-  padding: 10px 8px;
+  padding: 8px 6px;
+  overflow-y: auto;
 }
 
 .ann-card.vertical .ann-entry {
   border-bottom: none;
-  padding: 8px 4px;
+  padding: 8px 0;
 }
 
 .ann-card.vertical .ann-entry + .ann-entry {
   border-top: 1px solid var(--border-light);
-  margin-top: 4px;
 }
 
 .ann-card.vertical .ann-card-close {
   writing-mode: horizontal-tb;
+  top: 4px;
+  right: 4px;
 }
 
 .ann-card.vertical .ann-pron-h {
@@ -442,7 +449,6 @@ onBeforeUnmount(() => {
 
 .ann-card.vertical .ann-entry-body {
   padding-left: 0;
-  padding-top: 4px;
 }
 
 .ann-card.vertical .ann-text {
@@ -453,6 +459,15 @@ onBeforeUnmount(() => {
 .ann-sheet.vertical {
   writing-mode: vertical-rl;
   text-orientation: mixed;
+  flex-direction: row;
+}
+
+.ann-sheet.vertical .ann-sheet-handle {
+  writing-mode: horizontal-tb;
+}
+
+.ann-sheet.vertical .ann-sheet-head {
+  writing-mode: horizontal-tb;
 }
 
 .ann-sheet.vertical .ann-sheet-scroll {
@@ -460,17 +475,18 @@ onBeforeUnmount(() => {
   flex-direction: column;
   overflow-x: auto;
   overflow-y: hidden;
-  padding: 4px 16px 24px;
+  padding: 8px 0 24px;
 }
 
 .ann-sheet.vertical .ann-entry {
+  flex-shrink: 0;
   border-bottom: none;
-  border-left: 1px solid var(--border-light);
-  padding: 0 12px;
+  padding: 0 14px;
+  border-right: 1px solid var(--border-light);
 }
 
 .ann-sheet.vertical .ann-entry:first-child {
-  border-left: none;
+  border-right: none;
 }
 
 .ann-sheet.vertical .ann-pron-h {
@@ -481,8 +497,4 @@ onBeforeUnmount(() => {
   white-space: pre-line;
   line-height: 2;
 }
-
-.ann-sheet.vertical .ann-sheet-handle {
-  writing-mode: horizontal-tb;
-}
 </style>

package/template/src/components/ReadingProgress.vue

@@ -67,17 +67,20 @@ onUnmounted(detach)
 .rp {
   position: fixed;
   z-index: 1001;
-  background: linear-gradient(90deg, var(--vermillion), var(--vermillion-light));
   pointer-events: none;
   will-change: width, height;
+  transition: width 0.1s ease, height 0.1s ease;
 }
 .rp:not(.rp-v) {
   top: 0; left: 0;
   height: 2px;
+  background: var(--vermillion);
+  box-shadow: 0 0 8px rgba(194, 58, 43, 0.3);
 }
 .rp-v {
   top: 0; left: 0;
   width: 2px;
-  background: linear-gradient(180deg, var(--vermillion), var(--vermillion-light));
+  background: var(--vermillion);
+  box-shadow: 0 0 8px rgba(194, 58, 43, 0.3);
 }
 </style>

package/template/src/components/SectionBlock.vue

@@ -172,39 +172,51 @@ const paragraphsHtml = computed(() => {
   text-orientation: mixed;
   height: 100vh;
   flex-shrink: 0;
-  padding: 32px 20px;
+  padding: 32px 24px;
   border-right: 1px solid var(--border);
   overflow-x: auto;
   overflow-y: hidden;
   opacity: 1;
   transform: none;
   transition: none;
+  scrollbar-width: thin;
+  scrollbar-color: var(--gold) transparent;
 }
+.sb-vertical::-webkit-scrollbar { height: 3px; }
+.sb-vertical::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 .sb-vertical .sb-header {
   flex-direction: column;
   align-items: flex-start;
   margin-bottom: 0;
-  margin-left: 16px;
+  margin-left: 20px;
   padding-bottom: 0;
   border-bottom: none;
   padding-left: 16px;
-  border-left: 1px solid var(--border);
+  border-left: 2px solid var(--vermillion);
 }
 .sb-vertical .sb-num {
   width: auto; height: auto;
   border-radius: 0;
   background: none;
   color: var(--vermillion);
-  font-size: 18px;
+  font-size: 16px;
+}
+.sb-vertical .sb-header h3 {
+  font-size: 20px;
+  letter-spacing: 6px;
 }
 .sb-vertical .sb-text {
   margin-left: 16px;
   text-align: start;
+  font-size: var(--body-font-size, 16px);
+  line-height: 2.2;
+  letter-spacing: 1px;
 }
 .sb-vertical .sb-text :deep(p) {
   margin-bottom: 0;
   margin-left: 12px;
   text-indent: 0;
+  line-height: 2.4;
 }
 .sb-vertical .sb-ann-entry {
   margin-bottom: 0;

package/template/src/components/SideNav.vue

@@ -347,10 +347,13 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 }
 
 @media (max-width: 768px) {
-  .sidenav { width: 44px; padding: 8px 0; gap: 6px; }
-  .sn-brand { width: 32px; height: 38px; }
-  .sn-seal { font-size: 15px; }
-  .sn-btn { width: 30px; height: 30px; }
-  .sn-context { font-size: 10px; max-height: 80px; }
+  .sidenav { width: 44px; padding: 8px 0; 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-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; }
 }
 </style>

package/template/src/components/VerticalScroll.vue

@@ -58,7 +58,7 @@ function onTap(event: MouseEvent) {
 .v-scroll {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  height: calc(100vh - 120px);
+  height: calc(100vh - 100px);
   overflow-x: auto; overflow-y: hidden;
   padding: 32px 24px;
   background: var(--surface);
@@ -67,15 +67,15 @@ function onTap(event: MouseEvent) {
   box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.08);
   position: relative;
   scrollbar-width: thin;
-  scrollbar-color: var(--gold) var(--paper);
+  scrollbar-color: var(--gold) transparent;
 }
-.v-scroll::-webkit-scrollbar { height: 4px; }
+.v-scroll::-webkit-scrollbar { height: 3px; }
 .v-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 
 .v-scroll-title {
   font-size: 36px; font-weight: 900; color: var(--ink);
-  letter-spacing: 12px; margin-left: 24px;
-  padding-left: 24px; border-left: 3px solid var(--vermillion);
+  letter-spacing: 10px; margin-left: 24px;
+  padding-left: 20px; border-left: 3px solid var(--vermillion);
   line-height: 1.6;
 }
 .v-scroll-author {
@@ -84,9 +84,9 @@ function onTap(event: MouseEvent) {
 }
 .v-scroll-clickable { cursor: pointer; transition: color 0.15s; }
 .v-scroll-clickable:hover { color: var(--vermillion); }
-.v-scroll-body { margin-left: 28px; }
+.v-scroll-body { margin-left: 24px; }
 .v-scroll-line {
-  font-size: var(--main-font-size, 24px); line-height: 2.4; letter-spacing: 8px;
+  font-size: var(--main-font-size, 24px); line-height: 2.4; letter-spacing: 6px;
   color: var(--ink); display: block;
 }
 

package/template/src/styles/main.css

@@ -228,8 +228,9 @@ button { font-family: inherit; }
   scrollbar-width: thin;
   scrollbar-color: var(--gold) transparent;
   scroll-snap-type: x proximity;
+  scroll-padding: 0 48px;
 }
-.v-page::-webkit-scrollbar { height: 4px; }
+.v-page::-webkit-scrollbar { height: 3px; }
 .v-page::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 
 /* ===== VIEW LOADING STATE ===== */
@@ -284,3 +285,19 @@ button { font-family: inherit; }
   object-fit: contain;
   animation: pulse 1.2s ease-in-out infinite;
 }
+
+/* ===== LAYOUT TRANSITION ===== */
+.v-root, .h-root {
+  transition: opacity 0.2s ease;
+}
+
+/* ===== 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);
+}
+
+[data-theme="dark"] .sb-vertical,
+[data-theme="oled"] .sb-vertical {
+  border-right-color: var(--border-light);
+}

package/template/src/views/PieceView.vue

@@ -742,13 +742,13 @@ function tcy(n: number): string {
   align-items: flex-start;
   justify-content: center;
   gap: 16px;
-  padding: 40px 24px;
+  padding: 40px 20px;
   border-right: 1px solid var(--border);
   scroll-snap-align: start;
 }
 .v-poem-title {
   font-size: 40px; font-weight: 900;
-  letter-spacing: 12px; color: var(--ink);
+  letter-spacing: 10px; color: var(--ink);
   padding-left: 20px;
   border-left: 4px solid var(--vermillion);
   line-height: 1.6;
@@ -783,7 +783,7 @@ function tcy(n: number): string {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  padding: 24px;
+  padding: 20px 16px;
 }
 
 .v-multipart {
@@ -791,15 +791,15 @@ function tcy(n: number): string {
   flex-direction: row-reverse;
   align-items: flex-start;
   gap: 0;
-  max-height: calc(100vh - 120px);
+  max-height: calc(100vh - 100px);
   overflow-x: auto;
   overflow-y: hidden;
-  padding: 24px 16px;
+  padding: 20px 16px;
   scrollbar-width: thin;
-  scrollbar-color: var(--gold) var(--paper);
+  scrollbar-color: var(--gold) transparent;
 }
 
-.v-multipart::-webkit-scrollbar { height: 4px; }
+.v-multipart::-webkit-scrollbar { height: 3px; }
 .v-multipart::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 
 .v-section {
@@ -831,15 +831,17 @@ function tcy(n: number): string {
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 24px 12px;
+  padding: 24px 16px;
   gap: 32px;
   scroll-snap-align: start;
+  background: var(--surface);
+  border-right: 1px solid var(--border-light);
 }
 .v-nav-spacer { flex: 1; }
 .v-nav-btn {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  padding: 20px 12px;
+  padding: 20px 14px;
   background: var(--surface);
   border: 1px solid var(--border-light);
   border-radius: 6px;
@@ -1345,10 +1347,16 @@ function tcy(n: number): string {
 @media (max-width: 768px) {
   /* ─── 直排模式 ─── */
   .v-page { margin-right: var(--nav-width, 44px); }
-  .v-title-col { padding: 24px 16px; }
-  .v-poem-title { font-size: 32px; letter-spacing: 8px; }
-  .v-poem-author { font-size: 20px; }
-  .v-poem-col { padding: 16px; }
+  .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; }
+  .v-poem-col { padding: 12px 8px; }
+  .v-inline-nav { padding: 0 4px; }
+  .v-inav { width: 26px; height: 36px; font-size: 12px; }
+  .v-inav-spacer { width: 26px; height: 36px; }
+  .v-nav { padding: 16px 8px; gap: 20px; }
+  .v-nav-btn { padding: 14px 10px; }
+  .v-nav-title { font-size: 16px; letter-spacing: 2px; }
 
   /* ─── 橫排模式導航 ─── */
   .h-nav { padding: 0 16px; }