@scribdown/ui-handdrawn 0.1.0

package/src/styles/markdown.css

@@ -0,0 +1,270 @@
+/* ─── Markdown 正文排版 ─────────────────────────────────────────────── */
+/* body-md：18px / 1.75 / 400 */
+.scribdown-markdown {
+  /* 关键步骤：列宽由父级 .scribdown-app（即 --scribdown-content-width）控制，本卡片 width:auto
+     填满其内容盒；box-sizing:border-box 让自身 padding 计入宽度。
+     max-width 兜底：脱离 .scribdown-app 单独使用（第三方接入 / 预览沙盒）时仍受 --scribdown-content-width 约束，
+     margin:auto 在此场景下居中。 */
+  box-sizing: border-box;
+  width: auto;
+  max-width: var(--scribdown-content-width, 840px);
+  margin-left: auto;
+  margin-right: auto;
+  --scribdown-frame-edge-horizontal: url("../assets/rough-line-horizontal.svg");
+  --scribdown-frame-edge-vertical: url("../assets/rough-line-vertical.svg");
+  /* 手绘边框颜色：通过 mask + background-color 让外部 token 接管描边色。 */
+  --scribdown-frame-edge-color: var(--scribdown-color-accent);
+  /* 手绘边框 SVG 切片的平铺尺寸：长边 = 单段花纹长度，短边 = 描边粗细。
+     用于 background-size / mask-size，避免在各 CSS 文件里重复硬编码。 */
+  --scribdown-frame-edge-tile-horizontal: 200px 6px;
+  --scribdown-frame-edge-tile-vertical: 6px 200px;
+  /* 代码块行号分隔线（rough-line-shadow-vertical.svg）的平铺尺寸，花纹周期短于通用边框。 */
+  --scribdown-rough-line-shadow-tile-vertical: 6px 144px;
+  /* 表格外框（共用 rough-line-shadow svg）的平铺尺寸：横向 192×12，纵向 12×144，描边比通用边框略粗。 */
+  --scribdown-table-border-tile-horizontal: 192px 12px;
+  --scribdown-table-border-tile-vertical: 12px 144px;
+  --scribdown-blockquote-bar: url("../assets/blockquote-bar.svg");
+  --scribdown-underline-stroke: url("../assets/underline-stroke.svg");
+  --scribdown-heading-mark: url("../assets/heading-mark.svg");
+  --scribdown-rough-line-dash-horizontal: url("../assets/rough-line-dash-horizontal.svg");
+  --scribdown-rough-line-dash-vertical: url("../assets/rough-line-dash-vertical.svg");
+  --scribdown-rough-line-shadow-horizontal: url("../assets/rough-line-shadow-horizontal.svg");
+  --scribdown-rough-line-shadow-vertical: url("../assets/rough-line-shadow-vertical.svg");
+  --scribdown-code-block-rect-shadow: url("../assets/rect-shadow.svg");
+  --scribdown-code-block-lang-tag-body-outline: url("../assets/tag-body-outline.svg");
+  --scribdown-code-block-lang-tag-body-hatch: url("../assets/tag-body-hatch.svg");
+  --scribdown-code-block-lang-tag-left-line: url("../assets/tag-left-line.svg");
+  --scribdown-code-block-lang-tag-right-outline: url("../assets/tag-right-outline.svg");
+  --scribdown-code-block-lang-tag-right-hatch: url("../assets/tag-right-hatch.svg");
+  --scribdown-code-block-lang-tag-right-safe-width: 18px;
+  --scribdown-code-block-chrome-shadow-token: var(--scribdown-color-border);
+  --scribdown-code-block-chrome-shadow-fill: color-mix(
+    in srgb,
+    var(--scribdown-code-block-chrome-shadow-token) 40%,
+    transparent
+  );
+
+  position: relative;
+  background-color: var(--scribdown-color-surface);
+  background-image:
+    radial-gradient(circle at 24% 14%, var(--scribdown-paper-grain) 0 1px, transparent 1.7px),
+    radial-gradient(circle at 72% 58%, var(--scribdown-paper-fiber) 0 1.2px, transparent 1.9px);
+  background-size:
+    28px 25px,
+    39px 34px;
+  padding: var(--scribdown-space-3);
+  font-size: 16px;
+  line-height: 1.65;
+  font-weight: 400;
+  color: var(--scribdown-color-text-primary);
+  word-break: break-word;
+}
+
+/* 外层边框：复用 blockquote 的 frame-edge SVG，保持视觉语言一致。 */
+.scribdown-markdown::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    var(--scribdown-frame-edge-horizontal), var(--scribdown-frame-edge-horizontal),
+    var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
+  background-position:
+    left top,
+    left bottom,
+    left top,
+    right top;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  background-size:
+    var(--scribdown-frame-edge-tile-horizontal),
+    var(--scribdown-frame-edge-tile-horizontal),
+    var(--scribdown-frame-edge-tile-vertical),
+    var(--scribdown-frame-edge-tile-vertical);
+}
+
+@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
+  .scribdown-markdown::before {
+    /* 关键步骤：用 mask 保留 SVG 形状，描边色交给 frame-edge-color token，便于主题化。 */
+    background-color: var(--scribdown-frame-edge-color);
+    background-image: none;
+    -webkit-mask-image:
+      var(--scribdown-frame-edge-horizontal), var(--scribdown-frame-edge-horizontal),
+      var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
+    -webkit-mask-position:
+      left top,
+      left bottom,
+      left top,
+      right top;
+    -webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    -webkit-mask-size:
+      var(--scribdown-frame-edge-tile-horizontal),
+      var(--scribdown-frame-edge-tile-horizontal),
+      var(--scribdown-frame-edge-tile-vertical),
+      var(--scribdown-frame-edge-tile-vertical);
+    -webkit-mask-mode: alpha, alpha, alpha, alpha;
+    mask-image:
+      var(--scribdown-frame-edge-horizontal), var(--scribdown-frame-edge-horizontal),
+      var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
+    mask-position:
+      left top,
+      left bottom,
+      left top,
+      right top;
+    mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    mask-size:
+      var(--scribdown-frame-edge-tile-horizontal),
+      var(--scribdown-frame-edge-tile-horizontal),
+      var(--scribdown-frame-edge-tile-vertical),
+      var(--scribdown-frame-edge-tile-vertical);
+    mask-mode: alpha, alpha, alpha, alpha;
+  }
+}
+
+.scribdown-markdown > :first-child {
+  margin-top: 0;
+}
+
+.scribdown-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+/* HeadingRenderer：字体 heading，Typography 规范字号 / 行高 / 字重 */
+.scribdown-markdown h1,
+.scribdown-markdown h2,
+.scribdown-markdown h3,
+.scribdown-markdown h4,
+.scribdown-markdown h5,
+.scribdown-markdown h6 {
+  position: relative;
+  isolation: isolate;
+  font-family: var(--scribdown-font-heading);
+  margin-top: var(--scribdown-space-4);
+  margin-bottom: var(--scribdown-space-1);
+  letter-spacing: 0;
+}
+
+.scribdown-markdown h1 {
+  --scribdown-heading-mark-fade: 0%;
+  --scribdown-heading-mark-height: 0.36em;
+
+  font-size: 34px;
+  line-height: 1.2;
+  font-weight: 700;
+  text-shadow: 0.9px 0 color-mix(in srgb, var(--scribdown-color-text-primary) 20%, transparent);
+}
+
+/* 关键步骤：手绘 SVG 高亮，结合 box-decoration-break 让多行标题逐行复制。 */
+.scribdown-markdown h1 .scribdown-heading-mark,
+.scribdown-markdown h2 .scribdown-heading-mark,
+.scribdown-markdown h3 .scribdown-heading-mark,
+.scribdown-markdown h4 .scribdown-heading-mark,
+.scribdown-markdown h5 .scribdown-heading-mark,
+.scribdown-markdown h6 .scribdown-heading-mark {
+  background-image:
+    linear-gradient(
+      color-mix(
+        in srgb,
+        var(--scribdown-color-surface) var(--scribdown-heading-mark-fade),
+        transparent
+      ),
+      color-mix(
+        in srgb,
+        var(--scribdown-color-surface) var(--scribdown-heading-mark-fade),
+        transparent
+      )
+    ),
+    var(--scribdown-heading-mark);
+  background-position:
+    0 92%,
+    0 92%;
+  background-repeat: no-repeat, no-repeat;
+  background-size:
+    100% var(--scribdown-heading-mark-height),
+    100% var(--scribdown-heading-mark-height);
+  padding: 0 0.08em;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+.scribdown-markdown h2 {
+  --scribdown-heading-mark-fade: 14%;
+  --scribdown-heading-mark-height: 0.3em;
+
+  font-size: 26px;
+  line-height: 1.3;
+  font-weight: 700;
+}
+
+.scribdown-markdown h3 {
+  --scribdown-heading-mark-fade: 26%;
+  --scribdown-heading-mark-height: 0.24em;
+
+  font-size: 21px;
+  line-height: 1.35;
+  font-weight: 600;
+}
+
+.scribdown-markdown h4 {
+  --scribdown-heading-mark-fade: 38%;
+  --scribdown-heading-mark-height: 0.18em;
+
+  font-size: 18px;
+  line-height: 1.4;
+  font-weight: 600;
+}
+.scribdown-markdown h5 {
+  --scribdown-heading-mark-fade: 50%;
+  --scribdown-heading-mark-height: 0.14em;
+
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 600;
+}
+.scribdown-markdown h6 {
+  --scribdown-heading-mark-fade: 60%;
+  --scribdown-heading-mark-height: 0.1em;
+
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 600;
+}
+
+/* ParagraphRenderer：段间距 space-3，紧凑版 */
+.scribdown-markdown p {
+  margin: 0 0 var(--scribdown-space-3);
+}
+
+.scribdown-markdown strong {
+  font-weight: 700;
+  text-shadow: 0.7px 0 color-mix(in srgb, var(--scribdown-color-text-primary) 24%, transparent);
+}
+
+.scribdown-markdown u {
+  padding-bottom: 0.1em;
+  background-image: var(--scribdown-underline-stroke);
+  background-position: 0 96%;
+  background-repeat: repeat-x;
+  background-size: 96px 0.38em;
+  text-decoration: none;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+/* HanddrawnDivider：不用直线，上下留白 space-5 */
+.scribdown-markdown hr {
+  height: 12px;
+  border: none;
+  /* 关键步骤：用 mask 保留 SVG 形状，描边色由 color-border token 接管，便于主题化。 */
+  background-color: var(--scribdown-color-border);
+  -webkit-mask-image: var(--scribdown-frame-edge-horizontal);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 8px;
+  -webkit-mask-mode: alpha;
+  mask-image: var(--scribdown-frame-edge-horizontal);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100% 8px;
+  mask-mode: alpha;
+  margin: var(--scribdown-space-3) 0;
+  transform: rotate(-0.3deg);
+}

package/src/styles/mermaid.css

@@ -0,0 +1,405 @@
+/* MermaidBlock：复用代码块的手绘外框，承载 SVG 图表 + 失败态。 */
+.scribdown-markdown .scribdown-mermaid {
+  position: relative;
+  margin: 32px auto 36px;
+  padding: 0;
+  background: var(--scribdown-color-surface);
+  border: 1.5px solid color-mix(in srgb, var(--scribdown-color-border) 80%, transparent);
+  border-radius: 10px 12px 11px 13px;
+  box-shadow: 4px 5px 0 color-mix(in srgb, var(--scribdown-color-border) 28%, transparent);
+  transform: rotate(-0.18deg);
+  width: min(100%, 720px);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* 顶部 chrome：仅放置 Mermaid 类型标签，对齐代码块视觉语言。 */
+.scribdown-markdown .scribdown-mermaid__chrome {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  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);
+}
+
+.scribdown-markdown .scribdown-mermaid__label {
+  font-family: var(--scribdown-font-heading);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: color-mix(in srgb, var(--scribdown-color-text-primary) 78%, transparent);
+  text-transform: uppercase;
+}
+
+.scribdown-markdown .scribdown-mermaid__body {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 给 body 一个确定高度，使内部 canvas 的 height:100% 能解析，
+     从而让 SVG 的 max-height:100% 触发等比缩放，避免极端长宽比图表被压成一条。 */
+  height: clamp(280px, 50vh, 480px);
+  padding: 24px;
+  box-sizing: border-box;
+  background:
+    radial-gradient(circle at 18px 20px, var(--scribdown-paper-grain) 0 1px, transparent 1.6px),
+    color-mix(in srgb, var(--scribdown-color-surface) 94%, var(--scribdown-color-border) 6%);
+  background-size:
+    32px 29px,
+    auto;
+}
+
+/* 右下角悬浮全屏按钮：默认轻量呈现，hover 后增强对比。 */
+.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;
+}
+
+.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:focus-visible {
+  outline: 2px solid var(--scribdown-color-accent);
+  outline-offset: 2px;
+}
+
+.scribdown-markdown .scribdown-mermaid__fullscreen:disabled {
+  cursor: default;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.scribdown-markdown .scribdown-mermaid__fullscreen svg {
+  display: block;
+}
+
+.scribdown-markdown .scribdown-mermaid__canvas {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* 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%;
+}
+
+/* Loading 态：画布尚未填充 SVG 时的占位脉冲。 */
+.scribdown-markdown .scribdown-mermaid--loading .scribdown-mermaid__canvas {
+  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
+    );
+  opacity: 0.6;
+  animation: scribdown-mermaid-loading 1.6s linear infinite;
+}
+
+@keyframes scribdown-mermaid-loading {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 32px 0;
+  }
+}
+
+/* 失败态：替换 canvas 为错误说明 + 源码块。 */
+.scribdown-markdown .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 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--scribdown-space-2);
+  max-width: 100%;
+  color: var(--scribdown-color-text-primary);
+  text-align: center;
+}
+
+/* 失败态图标：手绘风方框 + 中心叉号。 */
+.scribdown-markdown .scribdown-mermaid__fallback-icon {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  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%);
+  transform: rotate(-2deg);
+}
+
+.scribdown-markdown .scribdown-mermaid__fallback-icon::before,
+.scribdown-markdown .scribdown-mermaid__fallback-icon::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 30px;
+  height: 2.5px;
+  background: var(--scribdown-color-text-primary);
+  transform-origin: center;
+}
+
+.scribdown-markdown .scribdown-mermaid__fallback-icon::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.scribdown-markdown .scribdown-mermaid__fallback-icon::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.scribdown-markdown .scribdown-mermaid__fallback-text {
+  margin: 0;
+  font-family: var(--scribdown-font-heading);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.scribdown-markdown pre.scribdown-mermaid__fallback-source,
+.scribdown-markdown p.scribdown-mermaid__fallback-source {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 8px 12px;
+  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);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: left;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* MermaidViewer：mermaid 全屏查看器，与图片查看器并列，整体风格保持一致。 */
+.scribdown-mermaid-viewer {
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background:
+    radial-gradient(
+      circle at 16% 18%,
+      color-mix(in srgb, var(--scribdown-color-bg) 10%, transparent) 0 1px,
+      transparent 1.7px
+    ),
+    color-mix(in srgb, var(--scribdown-color-text-primary) 84%, transparent);
+  color: var(--scribdown-color-text-primary);
+}
+
+.scribdown-mermaid-viewer:not([open]) {
+  display: none;
+}
+
+.scribdown-mermaid-viewer[open] {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.scribdown-mermaid-viewer::backdrop {
+  background: color-mix(in srgb, var(--scribdown-color-text-primary) 78%, transparent);
+  backdrop-filter: blur(2px);
+}
+
+.scribdown-mermaid-viewer__chrome {
+  position: relative;
+  z-index: 2;
+  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;
+  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;
+}
+
+.scribdown-mermaid-viewer__controls {
+  display: inline-flex;
+  align-items: center;
+  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,
+    var(--scribdown-color-surface) 82%,
+    var(--scribdown-color-danger) 18%
+  );
+}
+
+.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;
+  display: flex;
+  align-items: safe center;
+  justify-content: safe center;
+  padding: var(--scribdown-space-5);
+  overflow: auto;
+  overscroll-behavior: contain;
+  touch-action: none;
+}
+
+.scribdown-mermaid-viewer--zoomed .scribdown-mermaid-viewer__viewport {
+  cursor: grab;
+}
+
+.scribdown-mermaid-viewer--zoomed.scribdown-mermaid-viewer--dragging
+  .scribdown-mermaid-viewer__viewport {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.scribdown-mermaid-viewer__canvas {
+  flex: 0 0 auto;
+  display: block;
+  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: none;
+}
+
+.scribdown-mermaid-viewer--dragging .scribdown-mermaid-viewer__canvas {
+  pointer-events: none;
+}
+
+@media (max-width: 640px) {
+  .scribdown-mermaid-viewer__chrome {
+    grid-template-columns: 1fr;
+    gap: var(--scribdown-space-2);
+    padding: var(--scribdown-space-3);
+  }
+
+  .scribdown-mermaid-viewer__controls {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .scribdown-mermaid-viewer__button {
+    width: 34px;
+    height: 34px;
+  }
+
+  .scribdown-mermaid-viewer__viewport {
+    padding: var(--scribdown-space-3);
+  }
+}

package/src/styles/shell.css

@@ -0,0 +1,24 @@
+/* ─── Shell Components ──────────────────────────────────────────────── */
+/* DocumentShell：正文列最大宽度 840px，侧边距至少 48px，顶部 64px，底部 96px */
+.scribdown-page {
+  margin: 0;
+  padding: 0;
+  background: var(--scribdown-color-bg);
+  min-height: 100vh;
+  box-sizing: border-box;
+  font-family: var(--scribdown-font-body);
+  color: var(--scribdown-color-text-primary);
+}
+
+.scribdown-app {
+  box-sizing: border-box;
+  /* 关键步骤：正文列宽（含页面 padding）由 --scribdown-content-width 控制；box-sizing:border-box
+     让该宽度覆盖 padding 在内的整列外框。固定档（px）下视口更窄也保持该宽度不压缩，由外层
+     content-scroll 横向滚动，padding / 背景随列宽完整延伸；100% 档则铺满滚动视口。
+     视口比列宽更宽时 margin:auto 让整列居中。 */
+  width: var(--scribdown-content-width, 840px);
+  margin-left: auto;
+  margin-right: auto;
+  /* 关键步骤：wrapper 负责页面 padding，正文卡片（.scribdown-markdown）填满其内容盒。 */
+  padding: var(--scribdown-space-6) var(--scribdown-space-5) var(--scribdown-space-7);
+}