@scribdown/ui-handdrawn 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scribdown/ui-handdrawn",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Scribdown 手绘风格视觉组件：设计 Token、样式与 SVG 资产。",
   "license": "MIT",
   "type": "module",

package/src/assets/rough-line-horizontal.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="200" height="6" viewBox="0 0 200 6" preserveAspectRatio="none">
   <g fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M-0.8885389623697847 2.835747448122129 C5.98063496722219 3.023836115614201, 26.163666460150857 3.3836979418154813, 39.665068303281444 3.2720676984544848 C53.16647014641203 3.160437455093488, 66.7766827083969 2.1343503594553717, 80.11987209641376 2.165965987956151 C93.46306148443061 2.1975816164569304, 106.29286793692347 3.454849899923429, 119.72420463138259 3.4617614694591614 C133.1555413258417 3.468673038994894, 147.18285253716945 2.1781550389683497, 160.7078922631685 2.207435405170545 C174.23293198916755 2.23671577137274, 194.21855270786523 3.414428028380498, 200.87444298737682 3.637443666672334" />
-    <path d="M19.680227263411506 2.550232136854902 C29.60333365944421 2.7579639204105155, 59.151220776611524 4.316996703819475, 78.98881145630342 4.451140555848057 C98.82640213599532 4.585284407876639, 118.8756678476671 3.468230293965381, 138.7057713415629 3.355095249026393 C158.53587483545869 3.2419602040874045, 188.1445200029088 3.586171521686224, 197.96943241967818 3.772330286214128" />
+    <path d="M-0.8885389623697847 3.835747448122129 C5.98063496722219 3.023836115614201, 26.163666460150857 3.3836979418154813, 39.665068303281444 3.2720676984544848 C53.16647014641203 3.160437455093488, 66.7766827083969 2.1343503594553717, 80.11987209641376 2.165965987956151 C93.46306148443061 2.1975816164569304, 106.29286793692347 3.454849899923429, 119.72420463138259 3.4617614694591614 C133.1555413258417 3.468673038994894, 147.18285253716945 2.1781550389683497, 160.7078922631685 2.207435405170545 C174.23293198916755 2.23671577137274, 194.21855270786523 3.414428028380498, 200.87444298737682 3.637443666672334" />
+    <path d="M19.680227263411506 3.150232136854902 C29.60333365944421 2.7579639204105155, 59.151220776611524 4.316996703819475, 78.98881145630342 4.451140555848057 C98.82640213599532 4.585284407876639, 118.8756678476671 3.468230293965381, 138.7057713415629 3.355095249026393 C158.53587483545869 3.2419602040874045, 188.1445200029088 3.586171521686224, 197.96943241967818 3.772330286214128" />
   </g>
 </svg>

package/src/assets/tag-body-hatch.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="63.653" height="48" viewBox="9.239 0 63.653 48" role="img" aria-label="handdrawn tag">
+<svg xmlns="http://www.w3.org/2000/svg" width="66" height="48" viewBox="8.5 0 66 48" overflow="visible" role="img" aria-label="handdrawn tag">
   <style>
     .tag-fill-rect,
     .tag-fill-triangle {

package/src/assets/tag-right-hatch.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="27.005" height="48" viewBox="66.898 0 27.005 48" role="img" aria-label="handdrawn tag">
+<svg xmlns="http://www.w3.org/2000/svg" width="39.903" height="48" viewBox="54 0 39.903 48" role="img" aria-label="handdrawn tag">
   <style>
     .tag-fill-rect,
     .tag-fill-triangle {
@@ -46,6 +46,7 @@
       }
     }
   </style>
-  <path class="tag-fill-triangle" d="M70.4237706752122 38.26480130717802 C70.4237706752122 38.26480130717802, 70.4237706752122 38.26480130717802, 70.4237706752122 38.26480130717802 M70.4237706752122 38.26480130717802 C70.4237706752122 38.26480130717802, 70.4237706752122 38.26480130717802, 70.4237706752122 38.26480130717802 M73.4469873344831 34.961023081565735 C71.98366817648477 34.92708062922884, 70.7358433989635 34.0037472716233, 69.65509930142562 33.548700574279295 M73.23832219498306 35.43807427456835 C72.42446913007835 34.919960507517374, 71.30799972853754 34.08322924600833, 70.07104369940784 33.19273557353439 M76.5357928189563 33.42369589327702 C74.45869046134862 32.16536178402244, 73.65220244846036 31.623668278793918, 71.33012385428177 28.142944509685588 M77.0673001471015 32.83793279051462 C75.78428859805638 31.925655383893602, 73.7963050097036 30.692979392591912, 70.73638699292616 28.654910013385663 M81.40515983046376 31.11584017612848 C76.77450155702314 27.40595785081873, 75.45937306562682 26.063533288112236, 68.98331095065755 22.689056984875517 M81.17489882759814 30.016970849787512 C77.56428261934575 28.943711123239098, 74.3713812424317 27.418133071113882, 70.55178897645438 24.121840223328377 M83.02022981597217 30.024242458629196 C79.73132477057155 27.218537660092817, 79.66303306730408 23.704551460609764, 72.31423250233638 18.24733109030525 M84.80078985781608 28.356022306177536 C82.42944170955137 26.229222188616355, 78.6040136950766 25.548900884630427, 69.7489131964685 20.105117541481988 M90.45063426493722 26.022530256870056 C83.23151616946713 22.896816911298135, 80.423212605641 19.511513666320518, 67.79809519127251 12.42297204475464 M89.33360597220305 27.2298116854642 C83.34628217243005 22.688003253096234, 78.43521476428062 19.85982467862676, 69.27251050574944 13.404617160983252" />
+  <!-- 关键步骤：左端笔画以不同距离越过切片边界，裁切后形成自然、不整齐的拼接起笔。 -->
+  <path class="tag-fill-triangle" d="M58.4237706752122 9.26480130717802 C66.4237706752122 12.56480130717802, 84.2237706752122 18.86480130717802, 91.1067660103552 22.50208585606888 M62.15509930142562 12.548700574279295 C69.75509930142562 16.148700574279295, 84.53509930142562 21.248700574279295, 90.8853535654489 25.101957783615216 M57.17104369940784 15.19273557353439 C65.57104369940784 18.89273557353439, 83.45104369940784 23.89273557353439, 89.33360597220305 27.2298116854642 M60.23012385428177 18.142944509685588 C68.93012385428177 21.642944509685588, 80.73012385428177 26.242944509685588, 87.02022981597217 29.524242458629196 M55.63638699292616 21.654910013385663 C63.23638699292616 24.654910013385663, 78.93638699292616 28.754910013385663, 84.80078985781608 31.356022306177536 M60.38331095065755 24.689056984875517 C66.98331095065755 27.289056984875517, 76.28331095065755 30.689056984875517, 81.40515983046376 33.11584017612848 M58.15178897645438 27.521840223328377 C65.45178897645438 29.821840223328377, 74.55178897645438 32.32184022332838, 77.0673001471015 34.83793279051462 M64.09809519127251 30.42297204475464 C67.59809519127251 31.82297204475464, 72.89809519127251 33.92297204475464, 73.4469873344831 36.961023081565735 M61.67251050574944 33.40461716098325 C66.07251050574944 34.10461716098325, 71.27251050574944 35.60461716098325, 70.4237706752122 38.26480130717802" />
 
 </svg>

package/src/assets/tag-right-outline.svg

@@ -46,7 +46,7 @@
       }
     }
   </style>
-  <path class="tag-outline-triangle" d="M67.81899030609057 8.78106529759243 C77.54079624171952 12.693676162540212, 84.65957415774115 21.805816044128733, 91.1067660103552 22.50208585606888 M67.59937126510776 10.550338016962632 C78.38768789225605 15.400502316764324, 85.76194378321408 19.722923510445984, 90.8853535654489 25.101957783615216" />
-  <path class="tag-outline-triangle" d="M91.00484327096493 24.589532747678458 C86.15963499819627 30.161803733457344, 77.65431767267874 31.346669881318228, 70.49413215536624 39.2532716838643 M93.00340586742387 23.704626417253166 C83.19385184191401 29.44669538330985, 75.75757446244593 35.71291955639376, 69.36792313596234 38.81769603798166" />
+  <path class="tag-outline-triangle" d="M67.81899030609057 8.18106529759243 C77.54079624171952 12.693676162540212, 84.65957415774115 21.805816044128733, 91.1067660103552 22.50208585606888 M67.59937126510776 10.550338016962632 C78.38768789225605 15.400502316764324, 85.76194378321408 19.722923510445984, 90.8853535654489 25.101957783615216" />
+  <path class="tag-outline-triangle" d="M91.00484327096493 24.589532747678458 C81.15963499819627 31.161803733457344, 77.65431767267874 31.346669881318228, 67.49413215536624 38.5532716838643 M93.00340586742387 23.704626417253166 C83.19385184191401 29.44669538330985, 75.75757446244593 35.71291955639376, 69.36792313596234 38.81769603798166" />
 
 </svg>

package/src/styles/code.css

@@ -75,7 +75,7 @@
     var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
   background-position:
     left top,
-    50% bottom,
+    80% bottom,
     left 40%,
     right top;
   background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
@@ -111,7 +111,7 @@
   border-radius: inherit;
   pointer-events: none;
   background-image: var(--scribdown-code-block-rect-shadow);
-  background-position: center;
+  background-position: left top;
   background-repeat: repeat-x;
   background-size: auto 100%;
 }
@@ -135,7 +135,7 @@
   background-image: var(--scribdown-frame-edge-horizontal);
   background-repeat: repeat-x;
   background-size: var(--scribdown-frame-edge-tile-horizontal);
-  background-position: left bottom;
+  background-position: 40% bottom;
 }
 
 @supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
@@ -148,7 +148,7 @@
       var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
     -webkit-mask-position:
       left top,
-      50% bottom,
+      80% bottom,
       left 40%,
       right top;
     -webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
@@ -163,7 +163,7 @@
       var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
     mask-position:
       left top,
-      50% bottom,
+      80% bottom,
       left 40%,
       right top;
     mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
@@ -180,12 +180,12 @@
     background-color: var(--scribdown-code-block-chrome-shadow-fill);
     background-image: none;
     -webkit-mask-image: var(--scribdown-code-block-rect-shadow);
-    -webkit-mask-position: center;
+    -webkit-mask-position: left top;
     -webkit-mask-repeat: repeat-x;
     -webkit-mask-size: auto 100%;
     -webkit-mask-mode: alpha;
     mask-image: var(--scribdown-code-block-rect-shadow);
-    mask-position: center;
+    mask-position: left top;
     mask-repeat: repeat-x;
     mask-size: auto 100%;
     mask-mode: alpha;
@@ -197,12 +197,12 @@
     -webkit-mask-image: var(--scribdown-frame-edge-horizontal);
     -webkit-mask-repeat: repeat-x;
     -webkit-mask-size: var(--scribdown-frame-edge-tile-horizontal);
-    -webkit-mask-position: left bottom;
+    -webkit-mask-position: 40% bottom;
     -webkit-mask-mode: alpha;
     mask-image: var(--scribdown-frame-edge-horizontal);
     mask-repeat: repeat-x;
     mask-size: var(--scribdown-frame-edge-tile-horizontal);
-    mask-position: left bottom;
+    mask-position: 40% bottom;
     mask-mode: alpha;
   }
 }

package/src/styles/copy-control.css

@@ -0,0 +1,51 @@
+/* Markdown 通用复制按钮：Mermaid 与表格复用同一图标和成功反馈。 */
+.scribdown-copy-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 8px 9px 7px 10px;
+  background: transparent;
+  color: var(--scribdown-color-text-primary);
+  cursor: pointer;
+  pointer-events: auto;
+  transition:
+    background var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    transform var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-copy-button:hover {
+  background: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+.scribdown-copy-button:active {
+  transform: translateY(1px);
+}
+
+.scribdown-copy-button:focus-visible {
+  outline: 2px solid var(--scribdown-color-accent);
+  outline-offset: 2px;
+}
+
+.scribdown-copy-button__icon {
+  width: 18px;
+  height: 18px;
+  flex: none;
+}
+
+.scribdown-copy-button[data-scribdown-copied="true"] .scribdown-copy-button__icon--copy {
+  display: none;
+}
+
+.scribdown-copy-button__icon--check {
+  display: none;
+}
+
+.scribdown-copy-button[data-scribdown-copied="true"] .scribdown-copy-button__icon--check {
+  display: inline-block;
+  color: var(--scribdown-color-accent);
+}

package/src/styles/image-viewer.css

@@ -1,5 +1,11 @@
 /* ImageViewer：运行时注入的全图查看层，支持按钮和快捷键缩放。 */
 .scribdown-image-viewer {
+  /* 与 Mermaid 共用控件样式，仅由宿主决定全屏按钮尺寸。 */
+  --scribdown-viewer-control-size: 36px;
+  --scribdown-viewer-control-font-size: 16px;
+  --scribdown-viewer-zoom-value-min-width: 56px;
+  --scribdown-viewer-zoom-value-font-size: 14px;
+
   width: 100vw;
   max-width: none;
   height: 100dvh;
@@ -84,48 +90,6 @@
   gap: var(--scribdown-space-2);
 }
 
-.scribdown-image-viewer__button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  border: 1px solid color-mix(in srgb, var(--scribdown-color-border) 72%, transparent);
-  border-radius: 8px 10px 9px 11px;
-  background: color-mix(
-    in srgb,
-    var(--scribdown-color-surface) 88%,
-    var(--scribdown-color-mark) 12%
-  );
-  box-shadow: var(--scribdown-shadow-sm);
-  color: var(--scribdown-color-text-primary);
-  cursor: pointer;
-  font-family: var(--scribdown-font-code);
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.scribdown-image-viewer__button:hover {
-  background: color-mix(
-    in srgb,
-    var(--scribdown-color-surface) 78%,
-    var(--scribdown-color-mark) 22%
-  );
-}
-
-.scribdown-image-viewer__button:focus-visible {
-  outline: 2px solid var(--scribdown-color-accent);
-  outline-offset: 3px;
-}
-
-.scribdown-image-viewer__button:disabled {
-  box-shadow: none;
-  cursor: default;
-  opacity: 0.46;
-}
-
 .scribdown-image-viewer__button--close {
   background: color-mix(
     in srgb,
@@ -134,19 +98,6 @@
   );
 }
 
-.scribdown-image-viewer__zoom-value {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 56px;
-  height: 36px;
-  color: var(--scribdown-color-text-primary);
-  font-family: var(--scribdown-font-code);
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1;
-}
-
 .scribdown-image-viewer__viewport {
   min-width: 0;
   min-height: 0;
@@ -157,6 +108,7 @@
   padding: var(--scribdown-space-5);
   overflow: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable both-edges;
   touch-action: none;
 }
 
@@ -197,9 +149,8 @@
     width: 100%;
   }
 
-  .scribdown-image-viewer__button {
-    width: 34px;
-    height: 34px;
+  .scribdown-image-viewer {
+    --scribdown-viewer-control-size: 34px;
   }
 
   .scribdown-image-viewer__hint {

package/src/styles/mermaid.css

@@ -18,8 +18,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--scribdown-space-2);
   padding: 6px 12px;
-  background: color-mix(in srgb, var(--scribdown-color-surface) 90%, var(--scribdown-color-border) 10%);
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 90%,
+    var(--scribdown-color-border) 10%
+  );
   border-bottom: 1px dashed color-mix(in srgb, var(--scribdown-color-border) 60%, transparent);
 }
 
@@ -32,11 +37,25 @@
   text-transform: uppercase;
 }
 
+.scribdown-markdown .scribdown-mermaid__controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.scribdown-markdown .scribdown-mermaid__controls::-webkit-scrollbar {
+  display: none;
+}
+
 .scribdown-markdown .scribdown-mermaid__body {
   position: relative;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: safe center;
+  justify-content: safe center;
   /* 给 body 一个确定高度，使内部 canvas 的 height:100% 能解析，
      从而让 SVG 的 max-height:100% 触发等比缩放，避免极端长宽比图表被压成一条。 */
   height: clamp(280px, 50vh, 480px);
@@ -48,70 +67,47 @@
   background-size:
     32px 29px,
     auto;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable both-edges;
 }
 
-/* 右下角悬浮全屏按钮：默认轻量呈现，hover 后增强对比。 */
+/* 全屏按钮沿用工具按钮尺寸，图标跟随 currentColor。 */
 .scribdown-markdown .scribdown-mermaid__fullscreen {
-  position: absolute;
-  right: 12px;
-  bottom: 12px;
-  z-index: 3;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: 1px solid color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
-  border-radius: 8px 10px 9px 11px;
-  background: color-mix(in srgb, var(--scribdown-color-surface) 92%, transparent);
-  color: var(--scribdown-color-text-primary);
-  cursor: pointer;
-  box-shadow: 0 2px 0 color-mix(in srgb, var(--scribdown-color-border) 40%, transparent);
-  opacity: 0.75;
-  transition:
-    opacity 120ms ease,
-    transform 120ms ease;
+  opacity: 0.82;
 }
 
-.scribdown-markdown .scribdown-mermaid__fullscreen:hover {
-  opacity: 1;
-  transform: translateY(-1px);
-  background: color-mix(in srgb, var(--scribdown-color-surface) 80%, var(--scribdown-color-mark) 20%);
+.scribdown-markdown .scribdown-mermaid__fullscreen svg {
+  display: block;
 }
 
-.scribdown-markdown .scribdown-mermaid__fullscreen:focus-visible {
-  outline: 2px solid var(--scribdown-color-accent);
-  outline-offset: 2px;
+.scribdown-markdown .scribdown-mermaid__canvas {
+  display: block;
+  flex: 0 0 auto;
+  user-select: text;
 }
 
-.scribdown-markdown .scribdown-mermaid__fullscreen:disabled {
-  cursor: default;
-  opacity: 0;
-  pointer-events: none;
+/* SVG 尺寸由运行时 canvas 统一控制，选择模式下保留文本选择能力。 */
+.scribdown-markdown .scribdown-mermaid__canvas svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
 }
 
-.scribdown-markdown .scribdown-mermaid__fullscreen svg {
-  display: block;
+.scribdown-markdown .scribdown-mermaid--drag-mode .scribdown-mermaid__body {
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
 }
 
-.scribdown-markdown .scribdown-mermaid__canvas {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+.scribdown-markdown .scribdown-mermaid--dragging .scribdown-mermaid__body {
+  cursor: grabbing;
 }
 
-/* SVG 用 max-width/max-height 100% + auto 让浏览器按 viewBox 等比缩放，
-   总有一边贴合 canvas 边缘，保证整图可见；细节由右下角全屏查看器提供。 */
-.scribdown-markdown .scribdown-mermaid__canvas svg {
-  display: block;
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
+.scribdown-markdown .scribdown-mermaid--dragging .scribdown-mermaid__canvas {
+  pointer-events: none;
 }
 
 /* Loading 态：画布尚未填充 SVG 时的占位脉冲。 */
@@ -119,14 +115,13 @@
   width: 100%;
   min-height: 180px;
   border-radius: 6px;
-  background:
-    repeating-linear-gradient(
-      45deg,
-      color-mix(in srgb, var(--scribdown-color-border) 22%, transparent),
-      color-mix(in srgb, var(--scribdown-color-border) 22%, transparent) 8px,
-      transparent 8px,
-      transparent 16px
-    );
+  background: repeating-linear-gradient(
+    45deg,
+    color-mix(in srgb, var(--scribdown-color-border) 22%, transparent),
+    color-mix(in srgb, var(--scribdown-color-border) 22%, transparent) 8px,
+    transparent 8px,
+    transparent 16px
+  );
   opacity: 0.6;
   animation: scribdown-mermaid-loading 1.6s linear infinite;
 }
@@ -165,7 +160,11 @@
   width: 52px;
   height: 52px;
   border: 2px solid var(--scribdown-color-text-primary);
-  background: color-mix(in srgb, var(--scribdown-color-surface) 80%, var(--scribdown-color-warning) 12%);
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 80%,
+    var(--scribdown-color-warning) 12%
+  );
   transform: rotate(-2deg);
 }
 
@@ -203,7 +202,11 @@
   max-width: 100%;
   margin: 0;
   padding: 8px 12px;
-  background: color-mix(in srgb, var(--scribdown-color-surface) 86%, var(--scribdown-color-border) 14%);
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 86%,
+    var(--scribdown-color-border) 14%
+  );
   border-radius: 6px;
   color: var(--scribdown-color-text-secondary);
   font-family: var(--scribdown-font-code);
@@ -216,6 +219,12 @@
 
 /* MermaidViewer：mermaid 全屏查看器，与图片查看器并列，整体风格保持一致。 */
 .scribdown-mermaid-viewer {
+  /* 与行内 Mermaid 共用控件样式，仅通过变量放大全屏触控尺寸。 */
+  --scribdown-viewer-control-size: 36px;
+  --scribdown-viewer-control-font-size: 16px;
+  --scribdown-viewer-zoom-value-min-width: 56px;
+  --scribdown-viewer-zoom-value-font-size: 14px;
+
   width: 100vw;
   max-width: none;
   height: 100dvh;
@@ -284,48 +293,6 @@
   gap: var(--scribdown-space-2);
 }
 
-.scribdown-mermaid-viewer__button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  border: 1px solid color-mix(in srgb, var(--scribdown-color-border) 72%, transparent);
-  border-radius: 8px 10px 9px 11px;
-  background: color-mix(
-    in srgb,
-    var(--scribdown-color-surface) 88%,
-    var(--scribdown-color-mark) 12%
-  );
-  box-shadow: var(--scribdown-shadow-sm);
-  color: var(--scribdown-color-text-primary);
-  cursor: pointer;
-  font-family: var(--scribdown-font-code);
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.scribdown-mermaid-viewer__button:hover {
-  background: color-mix(
-    in srgb,
-    var(--scribdown-color-surface) 78%,
-    var(--scribdown-color-mark) 22%
-  );
-}
-
-.scribdown-mermaid-viewer__button:focus-visible {
-  outline: 2px solid var(--scribdown-color-accent);
-  outline-offset: 3px;
-}
-
-.scribdown-mermaid-viewer__button:disabled {
-  box-shadow: none;
-  cursor: default;
-  opacity: 0.46;
-}
-
 .scribdown-mermaid-viewer__button--close {
   background: color-mix(
     in srgb,
@@ -334,19 +301,6 @@
   );
 }
 
-.scribdown-mermaid-viewer__zoom-value {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 56px;
-  height: 36px;
-  color: var(--scribdown-color-text-primary);
-  font-family: var(--scribdown-font-code);
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1;
-}
-
 .scribdown-mermaid-viewer__viewport {
   min-width: 0;
   min-height: 0;
@@ -356,17 +310,19 @@
   padding: var(--scribdown-space-5);
   overflow: auto;
   overscroll-behavior: contain;
-  touch-action: none;
+  scrollbar-gutter: stable both-edges;
+  touch-action: auto;
 }
 
-.scribdown-mermaid-viewer--zoomed .scribdown-mermaid-viewer__viewport {
+.scribdown-mermaid-viewer--drag-mode .scribdown-mermaid-viewer__viewport {
   cursor: grab;
+  touch-action: none;
+  user-select: none;
 }
 
-.scribdown-mermaid-viewer--zoomed.scribdown-mermaid-viewer--dragging
+.scribdown-mermaid-viewer--drag-mode.scribdown-mermaid-viewer--dragging
   .scribdown-mermaid-viewer__viewport {
   cursor: grabbing;
-  user-select: none;
 }
 
 .scribdown-mermaid-viewer__canvas {
@@ -375,6 +331,10 @@
   background: var(--scribdown-color-surface);
   border-radius: 6px 7px 5px 6px;
   box-shadow: 6px 8px 0 color-mix(in srgb, var(--scribdown-color-text-primary) 26%, transparent);
+  user-select: text;
+}
+
+.scribdown-mermaid-viewer--drag-mode .scribdown-mermaid-viewer__canvas {
   user-select: none;
 }
 
@@ -394,9 +354,8 @@
     width: 100%;
   }
 
-  .scribdown-mermaid-viewer__button {
-    width: 34px;
-    height: 34px;
+  .scribdown-mermaid-viewer {
+    --scribdown-viewer-control-size: 34px;
   }
 
   .scribdown-mermaid-viewer__viewport {

package/src/styles/table.css

@@ -54,6 +54,69 @@
   box-shadow: none;
 }
 
+/* 表格交互壳层：复制按钮固定在右上角，不随表格横向滚动。 */
+.scribdown-markdown .scribdown-table {
+  --scribdown-table-ink-token: var(--scribdown-color-accent);
+  position: relative;
+  width: max-content;
+  max-width: 100%;
+  margin: 0 0 var(--scribdown-space-3);
+}
+
+.scribdown-markdown .scribdown-table > table {
+  margin: 0;
+}
+
+/* 为右上角复制按钮预留首行末列空间，避免遮住表头内容。 */
+.scribdown-markdown
+  .scribdown-table
+  > table
+  > :is(thead, tbody, tfoot)
+  > tr:first-child
+  > *:last-child,
+.scribdown-markdown .scribdown-table > table > tr:first-child > *:last-child {
+  padding-right: 52px;
+}
+
+.scribdown-markdown .scribdown-table__copy {
+  position: absolute;
+  z-index: 4;
+  top: 7px;
+  right: 8px;
+  opacity: 0;
+  background: color-mix(in srgb, var(--scribdown-color-surface) 88%, transparent);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--scribdown-table-ink-token) 34%, transparent);
+  color: var(--scribdown-table-ink-token);
+  pointer-events: none;
+  transition:
+    opacity var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    background var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+/* 鼠标进入表格或键盘焦点进入壳层时展示；复制反馈期间保持可见。 */
+.scribdown-markdown .scribdown-table:hover > .scribdown-table__copy,
+.scribdown-markdown .scribdown-table:focus-within > .scribdown-table__copy,
+.scribdown-markdown .scribdown-table > .scribdown-table__copy[data-scribdown-copied="true"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.scribdown-markdown .scribdown-table__copy:hover {
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 72%,
+    var(--scribdown-table-ink-token) 16%
+  );
+}
+
+/* 无 hover 能力的触屏设备始终展示入口，避免复制能力不可发现。 */
+@media (hover: none) {
+  .scribdown-markdown .scribdown-table__copy {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
 /* 关键步骤：表格外框复用代码块同款边条结构。 */
 .scribdown-markdown table::after {
   content: "";
@@ -72,10 +135,8 @@
     right -1px top 0px;
   background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
   background-size:
-    var(--scribdown-table-border-tile-horizontal),
-    var(--scribdown-table-border-tile-horizontal),
-    var(--scribdown-table-border-tile-vertical),
-    var(--scribdown-table-border-tile-vertical);
+    var(--scribdown-table-border-tile-horizontal), var(--scribdown-table-border-tile-horizontal),
+    var(--scribdown-table-border-tile-vertical), var(--scribdown-table-border-tile-vertical);
 }
 
 .scribdown-markdown th,
@@ -228,10 +289,8 @@
       right top;
     -webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
     -webkit-mask-size:
-      var(--scribdown-table-border-tile-horizontal),
-      var(--scribdown-table-border-tile-horizontal),
-      var(--scribdown-table-border-tile-vertical),
-      var(--scribdown-table-border-tile-vertical);
+      var(--scribdown-table-border-tile-horizontal), var(--scribdown-table-border-tile-horizontal),
+      var(--scribdown-table-border-tile-vertical), var(--scribdown-table-border-tile-vertical);
     -webkit-mask-mode: alpha, alpha, alpha, alpha;
     mask-image:
       var(--scribdown-rough-line-shadow-horizontal), var(--scribdown-rough-line-shadow-horizontal),
@@ -243,10 +302,8 @@
       right -1px top 0px;
     mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
     mask-size:
-      var(--scribdown-table-border-tile-horizontal),
-      var(--scribdown-table-border-tile-horizontal),
-      var(--scribdown-table-border-tile-vertical),
-      var(--scribdown-table-border-tile-vertical);
+      var(--scribdown-table-border-tile-horizontal), var(--scribdown-table-border-tile-horizontal),
+      var(--scribdown-table-border-tile-vertical), var(--scribdown-table-border-tile-vertical);
     mask-mode: alpha, alpha, alpha, alpha;
   }
 }

package/src/styles/tokens.css

@@ -1,60 +1,125 @@
-/* ─── Token 定义 ───────────────────────────────────────────────────── */
-/* 浅色主题：参考素描本米白纸张与水彩颜料色相。
+/* ─── 调色板原始值 ─────────────────────────────────────────────────
+   浅色与暗色两套色值在此各定义一次，下方的「语义 Token」只做 var() 映射。
+   宿主切换主题时不会出现色值副本，改一处即两套主题同步生效。
+
+   浅色主题：参考素描本米白纸张与水彩颜料色相。
    长时间阅读偏好：暖色偏移降低蓝光眩光、文字采用深沉柏木色而非纯黑、
-   重点色保持低饱和的"褪色颜料"质感、纸面与卡面亮度差拉开以便内容浮起。 */
+   重点色保持低饱和的"褪色颜料"质感、纸面与卡面亮度差拉开以便内容浮起。
+
+   暗色主题："夜读台灯下的旧纸册"：
+   纸面为接近黑的暖褐底，墨色反相为米白；颜料色以"粉笔/水彩"的提亮版本出现，
+   保持与浅色主题一致的色相与语义。
+
+   注：blockquote 系列是从其他 Token 派生的 color-mix 结果，两套主题的配比不同，
+   故同样分别定义；它们在被引用的那个映射块里求值，取到的必然是同主题的基准色。 */
 :root {
   /* 暖米纸：略冷于旧版的牛皮黄，减轻长时间阅读的"陈旧报纸"感。 */
-  --scribdown-color-bg: #ebe1c8;
+  --scribdown-palette-light-bg: #ebe1c8;
   /* 内容纸面：进一步提亮但保持暖调，与底色形成清晰层次。 */
-  --scribdown-color-surface: #f8f0db;
+  --scribdown-palette-light-surface: #f8f0db;
   /* 主文字：深胡桃色沉淀墨，对比 surface ≈12:1，足够锐利又不刺眼。 */
-  --scribdown-color-text-primary: #2f2620;
+  --scribdown-palette-light-text-primary: #2f2620;
   /* 次文字：泛黄旧墨色。 */
-  --scribdown-color-text-secondary: #786758;
+  --scribdown-palette-light-text-secondary: #786758;
   /* 主题色：松林青苔——明度居中、与文字蓝相区分。 */
-  --scribdown-color-accent: #436b5b;
+  --scribdown-palette-light-accent: #436b5b;
   /* 链接色：靛青水墨蓝，去掉过往略带紫感的偏色。 */
-  --scribdown-color-link: #355a7d;
+  --scribdown-palette-light-link: #355a7d;
   /* 已访问链接：晾干后的紫罗兰，色相比未访问偏暖。 */
-  --scribdown-color-link-visited: #6a527b;
+  --scribdown-palette-light-link-visited: #6a527b;
   /* 高亮笔色：姜黄荧光，保留涂抹的颜料质地。 */
-  --scribdown-color-mark: #d7ab48;
+  --scribdown-palette-light-mark: #d7ab48;
   /* 边线：铅笔石墨与纸张混合后的暖灰。 */
-  --scribdown-color-border: #c5ad8a;
+  --scribdown-palette-light-border: #c5ad8a;
   /* 危险色：陶土红，去除生硬的猩红，落在书法朱砂。 */
-  --scribdown-color-danger: #a8504a;
+  --scribdown-palette-light-danger: #a8504a;
   /* 警告色：烧赭石。 */
-  --scribdown-color-warning: #8d6432;
+  --scribdown-palette-light-warning: #8d6432;
   /* 代码块墨色：板岩紫，与正文棕色明显区分但不抢眼。 */
-  --scribdown-color-code-ink: #5e5483;
-  --scribdown-color-blockquote-bg: color-mix(
+  --scribdown-palette-light-code-ink: #5e5483;
+  --scribdown-palette-light-blockquote-bg: color-mix(
     in srgb,
     var(--scribdown-color-border) 18%,
     var(--scribdown-color-surface)
   );
-  --scribdown-color-blockquote-text: color-mix(
+  --scribdown-palette-light-blockquote-text: color-mix(
     in srgb,
     var(--scribdown-color-text-secondary) 88%,
     var(--scribdown-color-surface)
   );
-  --scribdown-color-blockquote-link: color-mix(
+  --scribdown-palette-light-blockquote-link: color-mix(
     in srgb,
     var(--scribdown-color-link) 86%,
     var(--scribdown-color-text-primary)
   );
-  --scribdown-color-blockquote-link-visited: color-mix(
+  --scribdown-palette-light-blockquote-link-visited: color-mix(
     in srgb,
     var(--scribdown-color-link-visited) 86%,
     var(--scribdown-color-text-primary)
   );
   /* 纸面颗粒：低饱和的褐色噪点，呼应"米黄毛边纸"。 */
-  --scribdown-paper-grain: rgba(132, 96, 44, 0.10);
+  --scribdown-palette-light-paper-grain: rgba(132, 96, 44, 0.10);
   /* 纸面纤维：浅青苔色丝纹，与 accent 同源。 */
-  --scribdown-paper-fiber: rgba(67, 107, 91, 0.06);
+  --scribdown-palette-light-paper-fiber: rgba(67, 107, 91, 0.06);
   /* 偏移阴影：保留手绘的"墨晕"感，避免过黑。 */
-  --scribdown-shadow-sm: 2px 3px 0 rgba(47, 38, 32, 0.13);
-  --scribdown-shadow-md: 4px 6px 0 rgba(47, 38, 32, 0.18);
+  --scribdown-palette-light-shadow-sm: 2px 3px 0 rgba(47, 38, 32, 0.13);
+  --scribdown-palette-light-shadow-md: 4px 6px 0 rgba(47, 38, 32, 0.18);
 
+  /* 夜间纸面底：暖褐近黑，避免冷调灰带来的"屏幕感"。 */
+  --scribdown-palette-dark-bg: #1e1915;
+  /* 卡面：底色之上 +6% 明度，让代码块/引用清晰浮起。 */
+  --scribdown-palette-dark-surface: #2a241f;
+  /* 主文字：温润米白粉笔。 */
+  --scribdown-palette-dark-text-primary: #ebdfcc;
+  /* 次文字：旧字迹褪色。 */
+  --scribdown-palette-dark-text-secondary: #ae9b85;
+  /* 主题色：粉笔薄荷青，亮度提到暗底易读区间。 */
+  --scribdown-palette-dark-accent: #7ebbab;
+  /* 链接色：粉笔水蓝。 */
+  --scribdown-palette-dark-link: #94b8de;
+  /* 已访问链接：粉笔薰衣草。 */
+  --scribdown-palette-dark-link-visited: #b39bcd;
+  /* 高亮色：暖琥珀粉笔。 */
+  --scribdown-palette-dark-mark: #d3aa57;
+  /* 边线：暗青铜，与底色同色相一脉。 */
+  --scribdown-palette-dark-border: #5a4a39;
+  /* 危险色：暗红粉笔。 */
+  --scribdown-palette-dark-danger: #db847a;
+  /* 警告色：黄铜粉笔。 */
+  --scribdown-palette-dark-warning: #d3a45f;
+  /* 代码块墨色：紫罗兰粉笔。 */
+  --scribdown-palette-dark-code-ink: #beacdc;
+  --scribdown-palette-dark-blockquote-bg: color-mix(
+    in srgb,
+    var(--scribdown-color-border) 28%,
+    var(--scribdown-color-surface)
+  );
+  --scribdown-palette-dark-blockquote-text: color-mix(
+    in srgb,
+    var(--scribdown-color-text-secondary) 90%,
+    var(--scribdown-color-bg)
+  );
+  --scribdown-palette-dark-blockquote-link: color-mix(
+    in srgb,
+    var(--scribdown-color-link) 88%,
+    var(--scribdown-color-text-primary)
+  );
+  --scribdown-palette-dark-blockquote-link-visited: color-mix(
+    in srgb,
+    var(--scribdown-color-link-visited) 88%,
+    var(--scribdown-color-text-primary)
+  );
+  /* 夜间纸面颗粒：暖琥珀微噪。 */
+  --scribdown-palette-dark-paper-grain: rgba(211, 170, 87, 0.10);
+  /* 夜间纸面纤维：薄荷青丝纹。 */
+  --scribdown-palette-dark-paper-fiber: rgba(126, 187, 171, 0.07);
+  /* 阴影更深以拉开层次。 */
+  --scribdown-palette-dark-shadow-sm: 2px 3px 0 rgba(0, 0, 0, 0.36);
+  --scribdown-palette-dark-shadow-md: 4px 6px 0 rgba(0, 0, 0, 0.48);
+}
+
+/* ─── 与主题无关的 Token ──────────────────────────────────────────── */
+:root {
   --scribdown-font-body: "Source Serif 4", "Noto Serif SC", serif;
   --scribdown-font-heading: "Caveat", "LXGW WenKai", "Noto Serif SC", serif;
   --scribdown-font-code: "JetBrains Mono", "Fira Code", monospace;
@@ -80,61 +145,82 @@
   --scribdown-toc-toggle-icon: url("../assets/toc-branch-toggle.svg");
 }
 
-/* 暗色主题："夜读台灯下的旧纸册"：
-   纸面为接近黑的暖褐底，墨色反相为米白；颜料色以"粉笔/水彩"的提亮版本出现，
-   保持与浅色主题一致的色相与语义。 */
+/* ─── 语义 Token ← 浅色 ────────────────────────────────────────────
+   默认主题。宿主给根元素显式加 .scribdown-theme-light 时，
+   该选择器的更高优先级会盖过下方「跟随系统」的暗色映射，实现强制浅色。 */
+:root,
+:root.scribdown-theme-light {
+  --scribdown-color-bg: var(--scribdown-palette-light-bg);
+  --scribdown-color-surface: var(--scribdown-palette-light-surface);
+  --scribdown-color-text-primary: var(--scribdown-palette-light-text-primary);
+  --scribdown-color-text-secondary: var(--scribdown-palette-light-text-secondary);
+  --scribdown-color-accent: var(--scribdown-palette-light-accent);
+  --scribdown-color-link: var(--scribdown-palette-light-link);
+  --scribdown-color-link-visited: var(--scribdown-palette-light-link-visited);
+  --scribdown-color-mark: var(--scribdown-palette-light-mark);
+  --scribdown-color-border: var(--scribdown-palette-light-border);
+  --scribdown-color-danger: var(--scribdown-palette-light-danger);
+  --scribdown-color-warning: var(--scribdown-palette-light-warning);
+  --scribdown-color-code-ink: var(--scribdown-palette-light-code-ink);
+  --scribdown-color-blockquote-bg: var(--scribdown-palette-light-blockquote-bg);
+  --scribdown-color-blockquote-text: var(--scribdown-palette-light-blockquote-text);
+  --scribdown-color-blockquote-link: var(--scribdown-palette-light-blockquote-link);
+  --scribdown-color-blockquote-link-visited: var(--scribdown-palette-light-blockquote-link-visited);
+  --scribdown-paper-grain: var(--scribdown-palette-light-paper-grain);
+  --scribdown-paper-fiber: var(--scribdown-palette-light-paper-fiber);
+  --scribdown-shadow-sm: var(--scribdown-palette-light-shadow-sm);
+  --scribdown-shadow-md: var(--scribdown-palette-light-shadow-md);
+}
+
+/* ─── 语义 Token ← 暗色（跟随系统偏好）───────────────────────────── */
 @media (prefers-color-scheme: dark) {
   :root {
-    /* 夜间纸面底：暖褐近黑，避免冷调灰带来的"屏幕感"。 */
-    --scribdown-color-bg: #1e1915;
-    /* 卡面：底色之上 +6% 明度，让代码块/引用清晰浮起。 */
-    --scribdown-color-surface: #2a241f;
-    /* 主文字：温润米白粉笔。 */
-    --scribdown-color-text-primary: #ebdfcc;
-    /* 次文字：旧字迹褪色。 */
-    --scribdown-color-text-secondary: #ae9b85;
-    /* 主题色：粉笔薄荷青，亮度提到暗底易读区间。 */
-    --scribdown-color-accent: #7ebbab;
-    /* 链接色：粉笔水蓝。 */
-    --scribdown-color-link: #94b8de;
-    /* 已访问链接：粉笔薰衣草。 */
-    --scribdown-color-link-visited: #b39bcd;
-    /* 高亮色：暖琥珀粉笔。 */
-    --scribdown-color-mark: #d3aa57;
-    /* 边线：暗青铜，与底色同色相一脉。 */
-    --scribdown-color-border: #5a4a39;
-    /* 危险色：暗红粉笔。 */
-    --scribdown-color-danger: #db847a;
-    /* 警告色：黄铜粉笔。 */
-    --scribdown-color-warning: #d3a45f;
-    /* 代码块墨色：紫罗兰粉笔。 */
-    --scribdown-color-code-ink: #beacdc;
-    --scribdown-color-blockquote-bg: color-mix(
-      in srgb,
-      var(--scribdown-color-border) 28%,
-      var(--scribdown-color-surface)
-    );
-    --scribdown-color-blockquote-text: color-mix(
-      in srgb,
-      var(--scribdown-color-text-secondary) 90%,
-      var(--scribdown-color-bg)
-    );
-    --scribdown-color-blockquote-link: color-mix(
-      in srgb,
-      var(--scribdown-color-link) 88%,
-      var(--scribdown-color-text-primary)
-    );
-    --scribdown-color-blockquote-link-visited: color-mix(
-      in srgb,
-      var(--scribdown-color-link-visited) 88%,
-      var(--scribdown-color-text-primary)
-    );
-    /* 夜间纸面颗粒：暖琥珀微噪。 */
-    --scribdown-paper-grain: rgba(211, 170, 87, 0.10);
-    /* 夜间纸面纤维：薄荷青丝纹。 */
-    --scribdown-paper-fiber: rgba(126, 187, 171, 0.07);
-    /* 阴影更深以拉开层次。 */
-    --scribdown-shadow-sm: 2px 3px 0 rgba(0, 0, 0, 0.36);
-    --scribdown-shadow-md: 4px 6px 0 rgba(0, 0, 0, 0.48);
+    --scribdown-color-bg: var(--scribdown-palette-dark-bg);
+    --scribdown-color-surface: var(--scribdown-palette-dark-surface);
+    --scribdown-color-text-primary: var(--scribdown-palette-dark-text-primary);
+    --scribdown-color-text-secondary: var(--scribdown-palette-dark-text-secondary);
+    --scribdown-color-accent: var(--scribdown-palette-dark-accent);
+    --scribdown-color-link: var(--scribdown-palette-dark-link);
+    --scribdown-color-link-visited: var(--scribdown-palette-dark-link-visited);
+    --scribdown-color-mark: var(--scribdown-palette-dark-mark);
+    --scribdown-color-border: var(--scribdown-palette-dark-border);
+    --scribdown-color-danger: var(--scribdown-palette-dark-danger);
+    --scribdown-color-warning: var(--scribdown-palette-dark-warning);
+    --scribdown-color-code-ink: var(--scribdown-palette-dark-code-ink);
+    --scribdown-color-blockquote-bg: var(--scribdown-palette-dark-blockquote-bg);
+    --scribdown-color-blockquote-text: var(--scribdown-palette-dark-blockquote-text);
+    --scribdown-color-blockquote-link: var(--scribdown-palette-dark-blockquote-link);
+    --scribdown-color-blockquote-link-visited: var(--scribdown-palette-dark-blockquote-link-visited);
+    --scribdown-paper-grain: var(--scribdown-palette-dark-paper-grain);
+    --scribdown-paper-fiber: var(--scribdown-palette-dark-paper-fiber);
+    --scribdown-shadow-sm: var(--scribdown-palette-dark-shadow-sm);
+    --scribdown-shadow-md: var(--scribdown-palette-dark-shadow-md);
   }
 }
+
+/* ─── 语义 Token ← 暗色（宿主显式指定）─────────────────────────────
+   宿主自带主题开关（如文档站的明暗切换、VS Code 主题）时，把 .scribdown-theme-dark
+   加到根元素上即可强制暗色；优先级高于上面的系统偏好映射，不受 OS 设置影响。
+   与「跟随系统」共用同一套调色板变量，色值仍只有一份。 */
+:root.scribdown-theme-dark {
+  --scribdown-color-bg: var(--scribdown-palette-dark-bg);
+  --scribdown-color-surface: var(--scribdown-palette-dark-surface);
+  --scribdown-color-text-primary: var(--scribdown-palette-dark-text-primary);
+  --scribdown-color-text-secondary: var(--scribdown-palette-dark-text-secondary);
+  --scribdown-color-accent: var(--scribdown-palette-dark-accent);
+  --scribdown-color-link: var(--scribdown-palette-dark-link);
+  --scribdown-color-link-visited: var(--scribdown-palette-dark-link-visited);
+  --scribdown-color-mark: var(--scribdown-palette-dark-mark);
+  --scribdown-color-border: var(--scribdown-palette-dark-border);
+  --scribdown-color-danger: var(--scribdown-palette-dark-danger);
+  --scribdown-color-warning: var(--scribdown-palette-dark-warning);
+  --scribdown-color-code-ink: var(--scribdown-palette-dark-code-ink);
+  --scribdown-color-blockquote-bg: var(--scribdown-palette-dark-blockquote-bg);
+  --scribdown-color-blockquote-text: var(--scribdown-palette-dark-blockquote-text);
+  --scribdown-color-blockquote-link: var(--scribdown-palette-dark-blockquote-link);
+  --scribdown-color-blockquote-link-visited: var(--scribdown-palette-dark-blockquote-link-visited);
+  --scribdown-paper-grain: var(--scribdown-palette-dark-paper-grain);
+  --scribdown-paper-fiber: var(--scribdown-palette-dark-paper-fiber);
+  --scribdown-shadow-sm: var(--scribdown-palette-dark-shadow-sm);
+  --scribdown-shadow-md: var(--scribdown-palette-dark-shadow-md);
+}

package/src/styles/toolbar.css

@@ -88,8 +88,7 @@
   align-self: stretch;
   margin-right: 2px;
   padding: 0 6px 0 4px;
-  border-right: 1px solid
-    color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
   /* 关键步骤：可点击跳转到当前章节标题。 */
   cursor: pointer;
 }
@@ -145,19 +144,35 @@
   opacity: 1;
 }
 
-/* 「更多」按钮展开态：保持轻量描边，避免被 hover 态覆盖。 */
-.scribdown-toolbar-btn--more[aria-expanded="true"] {
+/* 工具栏按钮展开态（目录侧栏 / 更多菜单共用）：底色加深 + 强调色，
+   与 hover 态区分开，让「当前已展开」在按钮上可见。 */
+.scribdown-toolbar-btn[aria-expanded="true"] {
   background: color-mix(in srgb, var(--scribdown-color-bg) 90%, transparent);
   color: var(--scribdown-color-accent);
 }
 
+/* 关键步骤：展开态下方一小段强调色下划线，作为颜色之外的第二重状态提示（色觉障碍友好）。 */
+.scribdown-toolbar-btn[aria-expanded="true"]::before {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  width: 12px;
+  height: 2px;
+  transform: translateX(-50%);
+  background: var(--scribdown-color-accent);
+  border-radius: 999px;
+}
+
 /* ─── 更多下拉菜单 ──────────────────────────────────────────────── */
 /* 关键步骤：菜单挂在 .scribdown-toolbar 内部，绝对定位到工具栏右下方。 */
 .scribdown-toolbar-menu {
+  --scribdown-toolbar-menu-width: 260px;
   position: absolute;
   top: calc(100% + 6px);
   right: 0;
-  min-width: 200px;
+  width: var(--scribdown-toolbar-menu-width);
+  box-sizing: border-box;
   padding: var(--scribdown-space-1);
   background: var(--scribdown-color-surface);
   border: 1.5px solid var(--scribdown-color-border);
@@ -221,11 +236,12 @@
 .scribdown-toolbar-menu-group {
   display: flex;
   flex-direction: column;
+  /* 语言与宽度列表的容器、间隙均保留可点击指针，避免层级间光标闪回默认样式。 */
+  cursor: pointer;
   /* 关键步骤：和上方菜单项之间用一条柔和分隔线划开层级。 */
   margin-top: 4px;
   padding-top: 4px;
-  border-top: 1px solid
-    color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
 }
 
 /* 触发行：复用 .scribdown-toolbar-menu-item 样式，右侧追加当前值 + chevron。 */
@@ -241,6 +257,7 @@
   font-family: var(--scribdown-font-code);
   font-size: 12px;
   color: var(--scribdown-color-text-secondary);
+  white-space: nowrap;
 }
 
 .scribdown-toolbar-menu-item--select:hover .scribdown-toolbar-menu-select-value {
@@ -263,6 +280,7 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
+  cursor: pointer;
   /* 关键步骤：与触发行文字左对齐（icon 16 + gap 8 = 24，再多 4 给视觉缩进）。 */
   padding: 0 4px 0 28px;
   max-height: 0;
@@ -273,11 +291,54 @@
 }
 
 .scribdown-toolbar-menu-group.is-open .scribdown-toolbar-menu-group-choices {
-  /* 关键步骤：固定档位最多 4 档 × 30px ≈ 160px，给点冗余兜底字体加大。 */
-  max-height: 200px;
+  /* 关键步骤：语言选择器有 11 项，常规视口完整展示；小视口按剩余空间滚动，避免被裁切。 */
+  max-height: min(360px, calc(100vh - 190px));
+  overflow-y: auto;
   padding: 4px 4px 4px 28px;
 }
 
+/* 关键步骤：语言列表始终固定在浮层位置；开合仅过渡可组合属性，避免定位与高度同时跳变。 */
+.scribdown-toolbar-menu-group.scribdown-toolbar-menu-group--language
+  .scribdown-toolbar-menu-group-choices {
+  position: fixed;
+  top: 42px;
+  right: calc(var(--scribdown-toolbar-menu-width) + 6px);
+  width: 220px;
+  max-height: calc(100vh - 54px);
+  box-sizing: border-box;
+  padding: 4px;
+  overflow-y: auto;
+  background: var(--scribdown-color-surface);
+  border: 1.5px solid var(--scribdown-color-border);
+  border-radius: var(--scribdown-radius-md);
+  box-shadow: var(--scribdown-shadow-md);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateX(4px);
+  transition:
+    opacity var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    transform var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    visibility var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-toolbar-menu-group.scribdown-toolbar-menu-group--language.is-open
+  .scribdown-toolbar-menu-group-choices {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+
+@media (max-width: 560px) {
+  .scribdown-toolbar-menu-group.scribdown-toolbar-menu-group--language
+    .scribdown-toolbar-menu-group-choices {
+    right: 6px;
+    left: 6px;
+    width: auto;
+  }
+}
+
 /* 档位选项：垂直列表项，左侧勾选位预留固定宽度，避免选中切换时文本抖动。 */
 .scribdown-toolbar-menu-sub-item {
   display: flex;
@@ -299,6 +360,13 @@
     background var(--scribdown-duration-fast) var(--scribdown-easing-standard);
 }
 
+/* 关键步骤：文字与勾选图标继承 button 的 pointer；列表空隙则由 choices 容器承接。 */
+.scribdown-toolbar-menu-sub-item-label,
+.scribdown-toolbar-menu-sub-item-mark,
+.scribdown-toolbar-menu-sub-item-mark svg {
+  cursor: inherit;
+}
+
 .scribdown-toolbar-menu-sub-item-mark {
   display: inline-flex;
   align-items: center;
@@ -338,7 +406,8 @@
 .scribdown-toc-host {
   display: flex;
   align-items: stretch;
-  /* TOC 宽度提到容器层，供 TOC 自身定宽 / 折叠位移共用。 */
+  /* TOC 宽度提到容器层，供 TOC 自身定宽 / 折叠位移共用；
+     用户拖拽调宽后由 toolbar.ts 以内联样式覆盖本默认值。 */
   --scribdown-toc-width: min(280px, 70vw);
   /* 关键步骤：定高铺满视口；overflow:hidden 让整页不滚动，
      折叠态 TOC（负 margin）也被裁切，滚动全部下沉到 content-scroll。 */
@@ -370,12 +439,18 @@
   overflow: auto;
 }
 
-/* 目录侧栏：flex item 贴最左，固定宽度；默认 margin-left 负值收进容器左外，is-open 归零滑入。 */
+/* 拖拽调宽期间：屏蔽正文文本选中并全局统一光标，避免拖动时误选内容 / 光标闪烁。 */
+.scribdown-toc-host.is-toc-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+/* 目录侧栏：flex item 贴最左，固定宽度；默认 margin-left 负值收进容器左外，is-open 归零滑入。
+   宽度变量由 .scribdown-toc-host 提供（用户拖拽后为内联覆盖值），此处仅做 fallback 兜底。 */
 .scribdown-toolbar-toc-panel {
-  --scribdown-toc-width: min(280px, 70vw);
   flex-shrink: 0;
   box-sizing: border-box;
-  width: var(--scribdown-toc-width);
+  width: var(--scribdown-toc-width, min(280px, 70vw));
   /* 关键步骤：填满外层容器高度（flex stretch 对齐 + 显式 100% 兜底），
      内部支持横向 + 纵向滚动，超长 / 超宽目录条目在面板内自滚。 */
   height: 100%;
@@ -390,7 +465,7 @@
   padding: var(--scribdown-space-4);
   /* 关键步骤：margin-left 负值占据负向布局空间收起，正文 flex:1 自然占满全宽；
      切到 0 时正文让出 var(--scribdown-toc-width)，整体平滑过渡。 */
-  margin-left: calc(-1 * var(--scribdown-toc-width));
+  margin-left: calc(-1 * var(--scribdown-toc-width, min(280px, 70vw)));
   transition: margin-left var(--scribdown-duration-base) var(--scribdown-easing-standard);
   z-index: 9001;
 }
@@ -399,6 +474,51 @@
   margin-left: 0;
 }
 
+/* ─── 目录调宽手柄 ─────────────────────────────────────────────
+   夹在目录侧栏与正文之间的 flex item：收起态宽度为 0（随侧栏一起塌陷，正文不留空条），
+   展开态占 6px 命中区，内部 ::after 画一条居中细线，hover / 拖拽时点亮为主题强调色。 */
+.scribdown-toc-resizer {
+  position: relative;
+  flex: 0 0 auto;
+  width: 0;
+  /* 关键步骤：与侧栏 margin-left 同一时长的过渡，开合时手柄与侧栏同步进出。 */
+  transition: width var(--scribdown-duration-base) var(--scribdown-easing-standard);
+  overflow: hidden;
+  cursor: col-resize;
+  /* 收起态不可交互 / 不可聚焦命中，展开时再恢复。 */
+  pointer-events: none;
+  /* 关键步骤：拖拽为横向手势，禁用触摸端的默认横向平移，避免与页面滚动争抢。 */
+  touch-action: none;
+  z-index: 9001;
+}
+
+.scribdown-toc-resizer.is-open {
+  width: 6px;
+  pointer-events: auto;
+}
+
+.scribdown-toc-resizer::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 2px;
+  transform: translateX(-50%);
+  background: transparent;
+  transition: background var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-toc-resizer:hover::after,
+.scribdown-toc-resizer:focus-visible::after,
+.scribdown-toc-resizer.is-dragging::after {
+  background: var(--scribdown-color-accent);
+}
+
+.scribdown-toc-resizer:focus-visible {
+  outline: none;
+}
+
 /* ─── 通用细滚动条（主题色，opt-in）────────────────────────────────
    目录侧栏（.scribdown-toolbar-toc-panel）与正文滚动层（.scribdown-content-scroll）共用：
    挂载时显式给滚动容器加 .scribdown-scrollbar-thin 引入，不在此罗列各容器选择器。

package/src/styles/viewer-controls.css

@@ -0,0 +1,96 @@
+/* 图片 / Mermaid 查看器共用的顶部按钮与缩放按钮组。 */
+.scribdown-viewer-control-button {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--scribdown-viewer-control-size, 28px);
+  height: var(--scribdown-viewer-control-size, 28px);
+  margin: 0;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--scribdown-color-border) 58%, transparent);
+  border-radius: 7px 9px 8px 10px;
+  background: color-mix(in srgb, var(--scribdown-color-surface) 88%, transparent);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--scribdown-color-border) 32%, transparent);
+  color: var(--scribdown-color-text-primary);
+  cursor: pointer;
+  font-family: var(--scribdown-font-code);
+  font-size: var(--scribdown-viewer-control-font-size, 13px);
+  font-weight: 700;
+  line-height: 1;
+}
+
+.scribdown-viewer-control-button svg {
+  pointer-events: none;
+}
+
+.scribdown-viewer-control-button:hover {
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 76%,
+    var(--scribdown-color-mark) 24%
+  );
+}
+
+.scribdown-viewer-control-button:focus-visible {
+  outline: 2px solid var(--scribdown-color-accent);
+  outline-offset: 2px;
+}
+
+.scribdown-viewer-control-button:disabled {
+  box-shadow: none;
+  cursor: default;
+  opacity: 0.42;
+}
+
+.scribdown-viewer-zoom-group {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--scribdown-color-border) 64%, transparent);
+  border-radius: 8px 10px 9px 11px;
+  background: color-mix(in srgb, var(--scribdown-color-surface) 88%, transparent);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--scribdown-color-border) 32%, transparent);
+}
+
+.scribdown-viewer-zoom-group .scribdown-viewer-control-button {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.scribdown-viewer-zoom-group .scribdown-viewer-control-button:hover {
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 76%,
+    var(--scribdown-color-mark) 24%
+  );
+}
+
+.scribdown-viewer-zoom-group .scribdown-viewer-control-button:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline-offset: -2px;
+}
+
+.scribdown-viewer-zoom-value {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--scribdown-viewer-zoom-value-min-width, 42px);
+  height: var(--scribdown-viewer-control-size, 28px);
+  border-right: 1px solid color-mix(in srgb, var(--scribdown-color-border) 48%, transparent);
+  border-left: 1px solid color-mix(in srgb, var(--scribdown-color-border) 48%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 94%,
+    var(--scribdown-color-border) 6%
+  );
+  color: color-mix(in srgb, var(--scribdown-color-text-primary) 78%, transparent);
+  font-family: var(--scribdown-font-code);
+  font-size: var(--scribdown-viewer-zoom-value-font-size, 12px);
+  font-weight: 700;
+}

package/src/styles.css

@@ -37,6 +37,12 @@
 /* 8. 代码：inline code + 代码块 + 语言标签 + 复制按钮 */
 @import "./styles/code.css";
 
+/* 8.0.1 Mermaid / 表格共用复制按钮 */
+@import "./styles/copy-control.css";
+
+/* 8.0.2 图片 / Mermaid 查看器共用顶部控件 */
+@import "./styles/viewer-controls.css";
+
 /* 8.1 Mermaid 图表块 */
 @import "./styles/mermaid.css";