@scribdown/ui-handdrawn 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scribdown/ui-handdrawn",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Scribdown 手绘风格视觉组件：设计 Token、样式与 SVG 资产。",
   "license": "MIT",
   "type": "module",
@@ -27,6 +27,10 @@
     "typescript": "^5.8.3",
     "vitest": "^3.2.4"
   },
+  "dependencies": {
+    "@fontsource-variable/noto-serif-sc": "5.3.0",
+    "lxgw-wenkai-screen-webfont": "1.7.0"
+  },
   "scripts": {
     "test": "vitest run --passWithNoTests",
     "lint": "eslint .",

package/src/styles/fonts.css

@@ -0,0 +1,3 @@
+/* 字体资产统一由共享 UI 包装配，所有宿主均使用本地 WOFF2，不依赖系统已安装字体。 */
+@import "@fontsource-variable/noto-serif-sc/wght.css";
+@import "lxgw-wenkai-screen-webfont/lxgwwenkaiscreen.css";

package/src/styles/lists.css

@@ -39,8 +39,7 @@
   left: 0;
   min-width: 26px;
   color: var(--scribdown-color-warning);
-  font-family: "Caveat", "Comic Sans MS", "Bradley Hand", "Segoe Print", "LXGW WenKai",
-    var(--scribdown-font-heading);
+  font-family: var(--scribdown-font-heading);
   font-size: 22px;
   font-style: normal;
   font-weight: 700;

package/src/styles/mermaid.css

@@ -1,5 +1,5 @@
 /* MermaidBlock：复用代码块的手绘外框，承载 SVG 图表 + 失败态。 */
-.scribdown-markdown .scribdown-mermaid {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid {
   position: relative;
   margin: 32px auto 36px;
   padding: 0;
@@ -14,7 +14,7 @@
 }
 
 /* 顶部 chrome：仅放置 Mermaid 类型标签，对齐代码块视觉语言。 */
-.scribdown-markdown .scribdown-mermaid__chrome {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__chrome {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -28,7 +28,7 @@
   border-bottom: 1px dashed color-mix(in srgb, var(--scribdown-color-border) 60%, transparent);
 }
 
-.scribdown-markdown .scribdown-mermaid__label {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__label {
   font-family: var(--scribdown-font-heading);
   font-size: 13px;
   font-weight: 700;
@@ -37,7 +37,7 @@
   text-transform: uppercase;
 }
 
-.scribdown-markdown .scribdown-mermaid__controls {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__controls {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
@@ -47,11 +47,12 @@
   scrollbar-width: none;
 }
 
-.scribdown-markdown .scribdown-mermaid__controls::-webkit-scrollbar {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer)
+  .scribdown-mermaid__controls::-webkit-scrollbar {
   display: none;
 }
 
-.scribdown-markdown .scribdown-mermaid__body {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__body {
   position: relative;
   display: flex;
   align-items: safe center;
@@ -68,27 +69,28 @@
     32px 29px,
     auto;
   overflow: auto;
-  overscroll-behavior: contain;
+  /* 图表无可滚动空间或已经到达边界时，继续把滚轮交给外层正文滚动容器。 */
+  overscroll-behavior: auto;
   scrollbar-gutter: stable both-edges;
 }
 
 /* 全屏按钮沿用工具按钮尺寸，图标跟随 currentColor。 */
-.scribdown-markdown .scribdown-mermaid__fullscreen {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__fullscreen {
   opacity: 0.82;
 }
 
-.scribdown-markdown .scribdown-mermaid__fullscreen svg {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__fullscreen svg {
   display: block;
 }
 
-.scribdown-markdown .scribdown-mermaid__canvas {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__canvas {
   display: block;
   flex: 0 0 auto;
   user-select: text;
 }
 
 /* SVG 尺寸由运行时 canvas 统一控制，选择模式下保留文本选择能力。 */
-.scribdown-markdown .scribdown-mermaid__canvas svg {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__canvas svg {
   display: block;
   width: 100%;
   height: 100%;
@@ -96,22 +98,36 @@
   max-height: none;
 }
 
-.scribdown-markdown .scribdown-mermaid--drag-mode .scribdown-mermaid__body {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer)
+  .scribdown-mermaid--drag-mode
+  .scribdown-mermaid__body {
   cursor: grab;
   touch-action: none;
   user-select: none;
 }
 
-.scribdown-markdown .scribdown-mermaid--dragging .scribdown-mermaid__body {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer)
+  .scribdown-mermaid--drag-mode
+  .scribdown-mermaid__canvas {
+  user-select: none;
+}
+
+:is(.scribdown-markdown, .scribdown-mermaid-viewer)
+  .scribdown-mermaid--dragging
+  .scribdown-mermaid__body {
   cursor: grabbing;
 }
 
-.scribdown-markdown .scribdown-mermaid--dragging .scribdown-mermaid__canvas {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer)
+  .scribdown-mermaid--dragging
+  .scribdown-mermaid__canvas {
   pointer-events: none;
 }
 
 /* Loading 态：画布尚未填充 SVG 时的占位脉冲。 */
-.scribdown-markdown .scribdown-mermaid--loading .scribdown-mermaid__canvas {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer)
+  .scribdown-mermaid--loading
+  .scribdown-mermaid__canvas {
   width: 100%;
   min-height: 180px;
   border-radius: 6px;
@@ -136,13 +152,15 @@
 }
 
 /* 失败态：替换 canvas 为错误说明 + 源码块。 */
-.scribdown-markdown .scribdown-mermaid--failed .scribdown-mermaid__body {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer)
+  .scribdown-mermaid--failed
+  .scribdown-mermaid__body {
   background:
     radial-gradient(circle at 18px 20px, var(--scribdown-paper-grain) 0 1px, transparent 1.6px),
     color-mix(in srgb, var(--scribdown-color-surface) 88%, transparent);
 }
 
-.scribdown-markdown .scribdown-mermaid__fallback {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__fallback {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -153,7 +171,7 @@
 }
 
 /* 失败态图标：手绘风方框 + 中心叉号。 */
-.scribdown-markdown .scribdown-mermaid__fallback-icon {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__fallback-icon {
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -168,8 +186,8 @@
   transform: rotate(-2deg);
 }
 
-.scribdown-markdown .scribdown-mermaid__fallback-icon::before,
-.scribdown-markdown .scribdown-mermaid__fallback-icon::after {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__fallback-icon::before,
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__fallback-icon::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -180,15 +198,15 @@
   transform-origin: center;
 }
 
-.scribdown-markdown .scribdown-mermaid__fallback-icon::before {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__fallback-icon::before {
   transform: translate(-50%, -50%) rotate(45deg);
 }
 
-.scribdown-markdown .scribdown-mermaid__fallback-icon::after {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__fallback-icon::after {
   transform: translate(-50%, -50%) rotate(-45deg);
 }
 
-.scribdown-markdown .scribdown-mermaid__fallback-text {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) .scribdown-mermaid__fallback-text {
   margin: 0;
   font-family: var(--scribdown-font-heading);
   font-size: 18px;
@@ -196,8 +214,8 @@
   line-height: 1.3;
 }
 
-.scribdown-markdown pre.scribdown-mermaid__fallback-source,
-.scribdown-markdown p.scribdown-mermaid__fallback-source {
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) pre.scribdown-mermaid__fallback-source,
+:is(.scribdown-markdown, .scribdown-mermaid-viewer) p.scribdown-mermaid__fallback-source {
   width: 100%;
   max-width: 100%;
   margin: 0;
@@ -248,8 +266,7 @@
 }
 
 .scribdown-mermaid-viewer[open] {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  display: block;
 }
 
 .scribdown-mermaid-viewer::backdrop {
@@ -257,99 +274,59 @@
   backdrop-filter: blur(2px);
 }
 
-.scribdown-mermaid-viewer__chrome {
-  position: relative;
-  z-index: 2;
+/* 同一图表组件的全屏布局：只覆盖容器尺寸和视觉，不定义另一套交互状态。 */
+.scribdown-mermaid-viewer > .scribdown-mermaid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--scribdown-space-3);
-  align-items: center;
-  padding: var(--scribdown-space-3) var(--scribdown-space-4);
-  background:
-    radial-gradient(circle at 18px 16px, var(--scribdown-paper-grain) 0 1px, transparent 1.6px),
-    color-mix(in srgb, var(--scribdown-color-surface) 94%, transparent);
-  background-size:
-    32px 29px,
-    auto;
-  box-shadow: 0 4px 0 color-mix(in srgb, var(--scribdown-color-text-primary) 14%, transparent);
-}
-
-.scribdown-mermaid-viewer__caption {
-  min-width: 0;
+  grid-template-rows: auto minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  max-width: none;
   margin: 0;
-  overflow: hidden;
-  color: var(--scribdown-color-text-primary);
-  font-family: var(--scribdown-font-heading);
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  transform: none;
+  background: transparent;
 }
 
-.scribdown-mermaid-viewer__controls {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--scribdown-space-2);
+.scribdown-mermaid-viewer .scribdown-mermaid__chrome {
+  padding: var(--scribdown-space-3) var(--scribdown-space-4);
+  background: var(--scribdown-color-surface);
 }
 
-.scribdown-mermaid-viewer__button--close {
-  background: color-mix(
-    in srgb,
-    var(--scribdown-color-surface) 82%,
-    var(--scribdown-color-danger) 18%
-  );
+.scribdown-mermaid-viewer .scribdown-mermaid__label {
+  font-size: 22px;
 }
 
-.scribdown-mermaid-viewer__viewport {
-  min-width: 0;
+.scribdown-mermaid-viewer .scribdown-mermaid__body {
+  height: auto;
   min-height: 0;
-  display: flex;
-  align-items: safe center;
-  justify-content: safe center;
   padding: var(--scribdown-space-5);
-  overflow: auto;
+  background: transparent;
   overscroll-behavior: contain;
-  scrollbar-gutter: stable both-edges;
-  touch-action: auto;
-}
-
-.scribdown-mermaid-viewer--drag-mode .scribdown-mermaid-viewer__viewport {
-  cursor: grab;
-  touch-action: none;
-  user-select: none;
 }
 
-.scribdown-mermaid-viewer--drag-mode.scribdown-mermaid-viewer--dragging
-  .scribdown-mermaid-viewer__viewport {
-  cursor: grabbing;
-}
-
-.scribdown-mermaid-viewer__canvas {
-  flex: 0 0 auto;
-  display: block;
+.scribdown-mermaid-viewer .scribdown-mermaid__canvas {
   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;
 }
 
-.scribdown-mermaid-viewer--dragging .scribdown-mermaid-viewer__canvas {
-  pointer-events: none;
+.scribdown-mermaid-viewer__button--close {
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 82%,
+    var(--scribdown-color-danger) 18%
+  );
 }
 
 @media (max-width: 640px) {
-  .scribdown-mermaid-viewer__chrome {
-    grid-template-columns: 1fr;
-    gap: var(--scribdown-space-2);
+  .scribdown-mermaid-viewer .scribdown-mermaid__chrome {
+    flex-wrap: wrap;
     padding: var(--scribdown-space-3);
   }
 
-  .scribdown-mermaid-viewer__controls {
+  .scribdown-mermaid-viewer .scribdown-mermaid__controls {
     justify-content: space-between;
     width: 100%;
   }
@@ -358,7 +335,7 @@
     --scribdown-viewer-control-size: 34px;
   }
 
-  .scribdown-mermaid-viewer__viewport {
+  .scribdown-mermaid-viewer .scribdown-mermaid__body {
     padding: var(--scribdown-space-3);
   }
 }

package/src/styles/tokens.css

@@ -120,8 +120,9 @@
 
 /* ─── 与主题无关的 Token ──────────────────────────────────────────── */
 :root {
-  --scribdown-font-body: "Source Serif 4", "Noto Serif SC", serif;
-  --scribdown-font-heading: "Caveat", "LXGW WenKai", "Noto Serif SC", serif;
+  /* 字体由 styles.css 本地加载；同一字体覆盖中英文，避免逐字符回退造成视觉基线错位。 */
+  --scribdown-font-body: "Noto Serif SC Variable", "Songti SC", serif;
+  --scribdown-font-heading: "LXGW WenKai Screen", "Kaiti SC", serif;
   --scribdown-font-code: "JetBrains Mono", "Fira Code", monospace;
 
   /* 四角独立写法，呼应手绘感 */

package/src/styles.css

@@ -7,6 +7,9 @@
  * 调整顺序或新增模块时，仅需修改本文件。
  */
 
+/* 0. 字体资产：随宿主本地打包，保证浏览器插件、文档站与 VS Code Webview 字形一致。 */
+@import "./styles/fonts.css";
+
 /* 1. 设计 token：浅色 + 暗色主题变量 */
 @import "./styles/tokens.css";