@scribdown/ui-handdrawn 0.2.2 → 0.3.0

package/package.json

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

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

@@ -144,12 +144,26 @@
   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 {
@@ -392,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。 */
@@ -424,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%;
@@ -444,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;
 }
@@ -453,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";