@hanology/cham-browser 0.4.59 → 0.4.60

package/package.json

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

package/template/src/components/HorizontalDisplay.vue

@@ -88,70 +88,17 @@ function onTap(event: MouseEvent) {
 }
 
 :deep(.ann-target) {
-  border-bottom: 2px solid var(--vermillion);
-  cursor: help;
-  transition: background 0.2s ease, box-shadow 0.2s ease;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
 }
 :deep(.ann-target.ann-overlap) {
   border-bottom-width: 3px;
   border-bottom-style: double;
 }
-:deep(.ann-target:hover) {
-  background: rgba(194, 58, 43, 0.1);
-  box-shadow: 0 2px 8px rgba(194, 58, 43, 0.08);
-}
 :deep(.ann-num) {
   font-size: 10px;
-  color: var(--vermillion);
-  font-family: var(--sans);
-  font-weight: 600;
   vertical-align: super;
   margin-right: 1px;
-  letter-spacing: 0;
-}
-:deep(.ann-target.pronunciation:hover) {
-  background: rgba(58, 107, 94, 0.1);
-  box-shadow: 0 2px 8px rgba(58, 107, 94, 0.08);
-}
-:deep(.ann-target.pronunciation) {
-  border-bottom-color: var(--jade);
-}
-:deep(.ann-target.person) {
-  border-bottom-color: var(--ann-person);
-}
-:deep(.ann-target.place) {
-  border-bottom-color: var(--ann-place);
-}
-:deep(.ann-target.event) {
-  border-bottom-color: var(--ann-event);
-}
-:deep(.ann-target.date) {
-  border-bottom-color: var(--ann-date);
-}
-:deep(.ann-target.allusion) {
-  border-bottom-color: var(--ann-allusion);
-}
-:deep(.ann-target.person:hover) {
-  background: rgba(58, 90, 140, 0.1);
-  box-shadow: 0 2px 8px rgba(58, 90, 140, 0.08);
-}
-:deep(.ann-target.place:hover) {
-  background: rgba(139, 105, 20, 0.1);
-  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.08);
-}
-:deep(.ann-target.event:hover) {
-  background: rgba(107, 76, 138, 0.1);
-  box-shadow: 0 2px 8px rgba(107, 76, 138, 0.08);
-}
-:deep(.ann-target.date:hover) {
-  background: rgba(42, 122, 122, 0.1);
-  box-shadow: 0 2px 8px rgba(42, 122, 122, 0.08);
-}
-:deep(.ann-target.allusion:hover) {
-  background: rgba(181, 101, 29, 0.1);
-  box-shadow: 0 2px 8px rgba(181, 101, 29, 0.08);
 }
 
 @media (max-width: 768px) {

package/template/src/components/PartBlock.vue

@@ -75,6 +75,9 @@ const sourceLabel = (() => {
 .part-block--vertical {
   writing-mode: vertical-rl;
   text-orientation: mixed;
+  margin-left: 12px;
+  padding-left: 12px;
+  border-left: 1px dashed var(--border-light);
 }
 
 .part-source {
@@ -125,75 +128,23 @@ const sourceLabel = (() => {
 }
 
 :deep(.ann-target) {
-  border-bottom: 2px solid var(--vermillion);
-  cursor: help;
-  transition: background 0.2s ease, box-shadow 0.2s ease;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
 }
 :deep(.ann-target.ann-overlap) {
   border-bottom-width: 3px;
   border-bottom-style: double;
 }
-:deep(.ann-target:hover) {
-  background: rgba(194, 58, 43, 0.1);
-  box-shadow: 0 2px 8px rgba(194, 58, 43, 0.08);
-}
 :deep(.ann-num) {
   font-size: 10px;
-  color: var(--vermillion);
-  font-family: var(--sans);
-  font-weight: 600;
   vertical-align: super;
   margin-right: 1px;
-  letter-spacing: 0;
-}
-:deep(.ann-target.pronunciation) {
-  border-bottom-color: var(--jade);
-}
-:deep(.ann-target.pronunciation:hover) {
-  background: rgba(58, 107, 94, 0.1);
-  box-shadow: 0 2px 8px rgba(58, 107, 94, 0.08);
-}
-:deep(.ann-target.person) {
-  border-bottom-color: var(--ann-person);
-}
-:deep(.ann-target.place) {
-  border-bottom-color: var(--ann-place);
-}
-:deep(.ann-target.event) {
-  border-bottom-color: var(--ann-event);
-}
-:deep(.ann-target.date) {
-  border-bottom-color: var(--ann-date);
-}
-:deep(.ann-target.allusion) {
-  border-bottom-color: var(--ann-allusion);
-}
-:deep(.ann-target.person:hover) {
-  background: rgba(58, 90, 140, 0.1);
-  box-shadow: 0 2px 8px rgba(58, 90, 140, 0.08);
-}
-:deep(.ann-target.place:hover) {
-  background: rgba(139, 105, 20, 0.1);
-  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.08);
-}
-:deep(.ann-target.event:hover) {
-  background: rgba(107, 76, 138, 0.1);
-  box-shadow: 0 2px 8px rgba(107, 76, 138, 0.08);
-}
-:deep(.ann-target.date:hover) {
-  background: rgba(42, 122, 122, 0.1);
-  box-shadow: 0 2px 8px rgba(42, 122, 122, 0.08);
-}
-:deep(.ann-target.allusion:hover) {
-  background: rgba(181, 101, 29, 0.1);
-  box-shadow: 0 2px 8px rgba(181, 101, 29, 0.08);
 }
 
 .part-block--vertical :deep(.ann-target) {
   border-bottom: none;
-  border-left: 2px solid var(--vermillion);
+  border-left-width: 2px;
+  border-left-style: solid;
   padding-left: 2px;
 }
 .part-block--vertical :deep(.ann-target.ann-overlap) {
@@ -201,59 +152,9 @@ const sourceLabel = (() => {
   border-left-style: double;
   padding-left: 3px;
 }
-.part-block--vertical :deep(.ann-target.pronunciation) {
-  border-left-color: var(--jade);
-}
-.part-block--vertical :deep(.ann-target.pronunciation.semantic) {
-  border-left-color: var(--gold);
-}
-.part-block--vertical :deep(.ann-target.person) {
-  border-left-color: var(--ann-person);
-}
-.part-block--vertical :deep(.ann-target.place) {
-  border-left-color: var(--ann-place);
-}
-.part-block--vertical :deep(.ann-target.event) {
-  border-left-color: var(--ann-event);
-}
-.part-block--vertical :deep(.ann-target.date) {
-  border-left-color: var(--ann-date);
-}
-.part-block--vertical :deep(.ann-target.allusion) {
-  border-left-color: var(--ann-allusion);
-}
-.part-block--vertical :deep(.ann-target:hover) {
-  background: rgba(194, 58, 43, 0.1);
-  box-shadow: 0 -2px 8px rgba(194, 58, 43, 0.08);
-}
-.part-block--vertical :deep(.ann-target.pronunciation:hover) {
-  background: rgba(58, 107, 94, 0.1);
-  box-shadow: 0 -2px 8px rgba(58, 107, 94, 0.08);
-}
-.part-block--vertical :deep(.ann-target.person:hover) {
-  background: rgba(58, 90, 140, 0.1);
-  box-shadow: 0 -2px 8px rgba(58, 90, 140, 0.08);
-}
-.part-block--vertical :deep(.ann-target.place:hover) {
-  background: rgba(139, 105, 20, 0.1);
-  box-shadow: 0 -2px 8px rgba(139, 105, 20, 0.08);
-}
-.part-block--vertical :deep(.ann-target.event:hover) {
-  background: rgba(107, 76, 138, 0.1);
-  box-shadow: 0 -2px 8px rgba(107, 76, 138, 0.08);
-}
-.part-block--vertical :deep(.ann-target.date:hover) {
-  background: rgba(42, 122, 122, 0.1);
-  box-shadow: 0 -2px 8px rgba(42, 122, 122, 0.08);
-}
-.part-block--vertical :deep(.ann-target.allusion:hover) {
-  background: rgba(181, 101, 29, 0.1);
-  box-shadow: 0 -2px 8px rgba(181, 101, 29, 0.08);
-}
 .part-block--vertical :deep(.ann-num) {
   font-size: 0.45em;
   text-align: end;
-  letter-spacing: 0;
   vertical-align: baseline;
 }
 

package/template/src/components/PoemCard.vue

@@ -85,8 +85,8 @@ const preview = computed(() => {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   direction: ltr;
-  width: 180px;
-  min-height: 240px;
+  width: 140px;
+  min-height: 180px;
   flex-shrink: 0;
   align-self: start;
   justify-self: start;
@@ -121,13 +121,7 @@ const preview = computed(() => {
   display: block;
 }
 .pc-vertical .pc-preview {
-  margin-top: 0;
-  margin-left: 6px;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: 2;
-  display: block;
-  overflow: hidden;
+  display: none;
 }
 .pc-vertical .pc-accent {
   top: auto; left: 0; bottom: 0;

package/template/src/components/VerticalScroll.vue

@@ -57,22 +57,18 @@ function onTap(event: MouseEvent) {
 
 <style scoped>
 .v-scroll {
+  --ann-shadow-y: -2px;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   height: calc(100vh - 100px);
-  overflow-x: auto; overflow-y: hidden;
   padding: 32px 24px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.08);
   position: relative;
-  scrollbar-width: thin;
-  scrollbar-color: var(--gold) transparent;
   animation: poemRevealV 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
-.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);
@@ -104,12 +100,9 @@ function onTap(event: MouseEvent) {
 }
 
 :deep(.ann-target) {
-  border-left: 2px solid var(--vermillion);
+  border-left-width: 2px;
+  border-left-style: solid;
   padding-left: 2px;
-  cursor: help;
-  transition: background 0.2s ease, box-shadow 0.2s ease;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
 }
 :deep(.ann-target.ann-overlap) {
   border-left-width: 3px;
@@ -118,63 +111,9 @@ function onTap(event: MouseEvent) {
 }
 :deep(.ann-num) {
   font-size: 0.45em;
-  font-family: var(--sans);
-  font-weight: 600;
-  color: var(--vermillion);
   text-align: end;
-  letter-spacing: 0;
 }
 :deep(.ann-num-long) {
   font-size: 0.38em;
-  letter-spacing: -1px;
-}
-:deep(.ann-target:hover) {
-  background: rgba(194, 58, 43, 0.1);
-  box-shadow: 0 -2px 8px rgba(194, 58, 43, 0.08);
-}
-:deep(.ann-target.pronunciation:hover) {
-  background: rgba(58, 107, 94, 0.1);
-  box-shadow: 0 -2px 8px rgba(58, 107, 94, 0.08);
-}
-:deep(.ann-target.pronunciation) {
-  border-left-color: var(--jade);
-}
-:deep(.ann-target.pronunciation.semantic) {
-  border-left-color: var(--gold);
-}
-:deep(.ann-target.person) {
-  border-left-color: var(--ann-person);
-}
-:deep(.ann-target.place) {
-  border-left-color: var(--ann-place);
-}
-:deep(.ann-target.event) {
-  border-left-color: var(--ann-event);
-}
-:deep(.ann-target.date) {
-  border-left-color: var(--ann-date);
-}
-:deep(.ann-target.allusion) {
-  border-left-color: var(--ann-allusion);
-}
-:deep(.ann-target.person:hover) {
-  background: rgba(58, 90, 140, 0.1);
-  box-shadow: 0 -2px 8px rgba(58, 90, 140, 0.08);
-}
-:deep(.ann-target.place:hover) {
-  background: rgba(139, 105, 20, 0.1);
-  box-shadow: 0 -2px 8px rgba(139, 105, 20, 0.08);
-}
-:deep(.ann-target.event:hover) {
-  background: rgba(107, 76, 138, 0.1);
-  box-shadow: 0 -2px 8px rgba(107, 76, 138, 0.08);
-}
-:deep(.ann-target.date:hover) {
-  background: rgba(42, 122, 122, 0.1);
-  box-shadow: 0 -2px 8px rgba(42, 122, 122, 0.08);
-}
-:deep(.ann-target.allusion:hover) {
-  background: rgba(181, 101, 29, 0.1);
-  box-shadow: 0 -2px 8px rgba(181, 101, 29, 0.08);
 }
 </style>

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

@@ -0,0 +1,58 @@
+/* ─── Annotation target base ─── */
+.ann-target {
+  cursor: help;
+  border-color: var(--vermillion);
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+/* ─── Annotation kind border colors ─── */
+.ann-target.pronunciation { border-color: var(--jade); }
+.ann-target.pronunciation.semantic { border-color: var(--gold); }
+.ann-target.person { border-color: var(--ann-person); }
+.ann-target.place { border-color: var(--ann-place); }
+.ann-target.event { border-color: var(--ann-event); }
+.ann-target.date { border-color: var(--ann-date); }
+.ann-target.allusion { border-color: var(--ann-allusion); }
+
+/* ─── 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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+}
+
+/* ─── Annotation number ─── */
+.ann-num {
+  color: var(--vermillion);
+  font-family: var(--sans);
+  font-weight: 600;
+  letter-spacing: 0;
+}
+.ann-num-long {
+  letter-spacing: -1px;
+}

package/template/src/styles/main.css

@@ -1,3 +1,5 @@
+@import './annotation-targets.css';
+
 /* ===== THEME DEFINITIONS ===== */
 :root,
 [data-theme="light"] {

package/template/src/views/BookHome.vue

@@ -259,13 +259,11 @@ function scrollToCatalog() {
   flex-shrink: 0;
   display: grid;
   grid-auto-flow: column;
-  grid-template-rows: repeat(auto-fill, 240px);
-  gap: 12px;
+  grid-template-rows: repeat(auto-fill, 180px);
+  gap: 10px;
   padding: 24px 16px;
   height: 100vh;
   box-sizing: border-box;
-  overflow-x: auto;
-  overflow-y: hidden;
   direction: rtl;
   align-items: start;
 }

package/template/src/views/LibraryHome.vue

@@ -97,10 +97,11 @@ function openBook(bookId: string) {
               <span class="v-cat-label">{{ group.category }}</span>
             </div>
             <div
-              v-for="book in group.books"
+              v-for="(book, bi) in group.books"
               :key="book.id"
-              class="v-spine"
+              class="v-spine v-spine-anim"
               :class="'v-spine-' + bookCategory(book).replace(/\s/g, '-')"
+              :style="{ animationDelay: bi * 0.04 + 's' }"
               @click="openBook(book.id)"
             >
               <span class="v-spine-accent"></span>
@@ -261,6 +262,14 @@ function openBook(bookId: string) {
   transform: scale(0.97);
 }
 
+.v-spine-anim {
+  animation: spineEnter 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+@keyframes spineEnter {
+  from { opacity: 0; transform: scaleX(0.6); }
+  to { opacity: 1; transform: scaleX(1); }
+}
+
 .v-spine-accent {
   position: absolute;
   top: 0;

package/template/src/views/PieceView.vue

@@ -791,16 +791,9 @@ function tcy(n: number): string {
   gap: 0;
   height: 100vh;
   box-sizing: border-box;
-  overflow-x: auto;
-  overflow-y: hidden;
   padding: 20px 16px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--gold) transparent;
 }
 
-.v-multipart::-webkit-scrollbar { height: 3px; }
-.v-multipart::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
-
 .v-section {
   flex-shrink: 0;
 }