@scribdown/ui-handdrawn 0.3.1 → 0.3.2

package/package.json

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

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;
@@ -74,22 +75,22 @@
 }
 
 /* 全屏按钮沿用工具按钮尺寸，图标跟随 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%;
@@ -97,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;
@@ -137,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;
@@ -154,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;
@@ -169,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%;
@@ -181,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;
@@ -197,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;
@@ -249,8 +266,7 @@
 }
 
 .scribdown-mermaid-viewer[open] {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  display: block;
 }
 
 .scribdown-mermaid-viewer::backdrop {
@@ -258,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%;
   }
@@ -359,7 +335,7 @@
     --scribdown-viewer-control-size: 34px;
   }
 
-  .scribdown-mermaid-viewer__viewport {
+  .scribdown-mermaid-viewer .scribdown-mermaid__body {
     padding: var(--scribdown-space-3);
   }
 }