@scribdown/ui-handdrawn 0.1.0

package/src/styles/table.css

@@ -0,0 +1,252 @@
+/* TableRenderer：cell padding 12px 16px，横向滚动 */
+.scribdown-markdown table {
+  /* 表格视觉主色 token：边框与阴影统一来源。 */
+  --scribdown-table-ink-token: var(--scribdown-color-accent);
+  /* 表格外框最终填充色，配合 code-block 边条 mask 使用。 */
+  --scribdown-table-border-fill: color-mix(
+    in srgb,
+    var(--scribdown-table-ink-token) 88%,
+    transparent
+  );
+  /* 单元格边线默认横向 SVG。 */
+  --scribdown-table-cell-border-horizontal-svg: var(--scribdown-frame-edge-horizontal);
+  /* 单元格边线默认纵向 SVG。 */
+  --scribdown-table-cell-border-vertical-svg: var(--scribdown-frame-edge-vertical);
+  /* 单元格边线填充色（比外框更轻，避免视觉抢占）。 */
+  --scribdown-table-cell-border-fill: color-mix(
+    in srgb,
+    var(--scribdown-table-ink-token) 40%,
+    transparent
+  );
+  /* thead 阴影层填充色（与边框同 token）。 */
+  --scribdown-table-head-shadow-fill: color-mix(
+    in srgb,
+    var(--scribdown-table-ink-token) 22%,
+    transparent
+  );
+  /* thead 阴影纹理：复用代码块 chrome 的 rect-shadow 资产。 */
+  --scribdown-table-head-shadow-svg: var(--scribdown-code-block-rect-shadow);
+  /* 间隔行（zebra）填充色：accent 极淡 tint，提升长表格可读性又不抢视觉。 */
+  --scribdown-table-row-stripe-fill: color-mix(
+    in srgb,
+    var(--scribdown-table-ink-token) 8%,
+    var(--scribdown-color-surface)
+  );
+  /* 行 hover 填充色：与 zebra（8%）拉开明显差距，单一阅读光带清晰可见。 */
+  --scribdown-table-row-hover-fill: color-mix(
+    in srgb,
+    var(--scribdown-table-ink-token) 32%,
+    var(--scribdown-color-surface)
+  );
+
+  position: relative;
+  z-index: 0;
+  isolation: isolate;
+  /* 关键步骤：小列数按内容收缩，避免右侧留白。 */
+  width: max-content;
+  max-width: 100%;
+  min-width: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0 0 var(--scribdown-space-3);
+  display: block;
+  overflow-x: auto;
+  box-shadow: none;
+}
+
+/* 关键步骤：表格外框复用代码块同款边条结构。 */
+.scribdown-markdown table::after {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  background-image:
+    var(--scribdown-rough-line-shadow-horizontal), var(--scribdown-rough-line-shadow-horizontal),
+    var(--scribdown-rough-line-shadow-vertical), var(--scribdown-rough-line-shadow-vertical);
+  background-position:
+    left 2px top -4px,
+    left 0px bottom -1px,
+    left -4px top 0px,
+    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);
+}
+
+.scribdown-markdown th,
+.scribdown-markdown td {
+  border: 0;
+  padding: var(--scribdown-space-2) var(--scribdown-space-3);
+  text-align: left;
+  /* 关键步骤：列宽下限，压到此值仍超出则整表横向滚动，避免窄列被逐字挤压。 */
+  min-width: 4rem;
+  /* 关键步骤：列宽上限，超出则单元格内换行（行变高），避免长文本把整表撑宽。 */
+  max-width: 22rem;
+  /* 关键步骤：短词（如 ID）不逐字拆，仅超长 token 放不下时才断行。 */
+  word-break: normal;
+  overflow-wrap: anywhere;
+  background-color: var(--scribdown-color-surface);
+  background-image:
+    var(--scribdown-table-cell-border-horizontal-svg),
+    var(--scribdown-table-cell-border-vertical-svg);
+  background-position:
+    left bottom,
+    right top;
+  background-repeat: repeat-x, repeat-y;
+  background-size:
+    96px 4px,
+    4px 72px;
+}
+
+/* 关键步骤：最后一列不再绘制纵向单元格边线，避免与外框重叠。 */
+.scribdown-markdown tr > *:last-child {
+  --scribdown-table-cell-border-vertical-svg: none;
+}
+
+/* 关键步骤：仅最后一行数据不再绘制横向单元格边线，避免与外框重叠。 */
+.scribdown-markdown table > tbody > tr:last-child > *,
+.scribdown-markdown table > tr:last-child > * {
+  --scribdown-table-cell-border-horizontal-svg: none;
+}
+
+.scribdown-markdown th {
+  font-family: var(--scribdown-font-heading);
+  font-weight: 700;
+  background-color: var(--scribdown-color-surface);
+}
+
+/* 关键步骤：tbody 偶数行加 zebra 填充；因 td 自带 background-color，
+   须落到单元格上才能生效，不能写在 tr 上。 */
+.scribdown-markdown table > tbody > tr:nth-child(even) > td {
+  background-color: var(--scribdown-table-row-stripe-fill);
+}
+
+/* 关键步骤：tbody 行 hover 高亮；选择器特异度需高于 zebra，确保覆盖奇偶行。
+   仅设色不加 transition，与手绘风格的瞬时反馈更搭。 */
+.scribdown-markdown table > tbody > tr:hover > td,
+.scribdown-markdown table > tbody > tr:nth-child(even):hover > td {
+  background-color: var(--scribdown-table-row-hover-fill);
+}
+
+/* 关键步骤：thead 使用独立纹理层，确保文本与边线不受遮挡。 */
+.scribdown-markdown thead th {
+  position: relative;
+  z-index: 0;
+  isolation: isolate;
+}
+
+.scribdown-markdown thead th::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  pointer-events: none;
+  background-image: var(--scribdown-table-head-shadow-svg);
+  background-position: center;
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+}
+
+@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
+  .scribdown-markdown th,
+  .scribdown-markdown td {
+    /* 关键步骤：单元格边线改为 mask 着色，保留纯线条层。 */
+    position: relative;
+    isolation: isolate;
+    background-image: none;
+  }
+
+  .scribdown-markdown th::after,
+  .scribdown-markdown td::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-color: var(--scribdown-table-cell-border-fill);
+    -webkit-mask-image:
+      var(--scribdown-table-cell-border-horizontal-svg),
+      var(--scribdown-table-cell-border-vertical-svg);
+    -webkit-mask-position:
+      left bottom,
+      right top;
+    -webkit-mask-repeat: repeat-x, repeat-y;
+    -webkit-mask-size:
+      96px 4px,
+      4px 72px;
+    -webkit-mask-mode: alpha;
+    mask-image:
+      var(--scribdown-table-cell-border-horizontal-svg),
+      var(--scribdown-table-cell-border-vertical-svg);
+    mask-position:
+      left bottom,
+      right top;
+    mask-repeat: repeat-x, repeat-y;
+    mask-size:
+      96px 4px,
+      4px 72px;
+    mask-mode: alpha;
+  }
+
+  /* 关键步骤：右下角单元格已关闭横竖边线时，移除伪元素，避免背景填充残留。 */
+  .scribdown-markdown table > tbody > tr:last-child > *:last-child::after,
+  .scribdown-markdown table > tr:last-child > *:last-child::after {
+    content: none;
+  }
+
+  .scribdown-markdown thead th::before {
+    /* 关键步骤：shadow 纹理改为 mask，颜色统一由表格主 token 控制。 */
+    background-color: var(--scribdown-table-head-shadow-fill);
+    background-image: none;
+    -webkit-mask-image: var(--scribdown-table-head-shadow-svg);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: repeat-x;
+    -webkit-mask-size: auto 100%;
+    -webkit-mask-mode: alpha;
+    mask-image: var(--scribdown-table-head-shadow-svg);
+    mask-position: center;
+    mask-repeat: repeat-x;
+    mask-size: auto 100%;
+    mask-mode: alpha;
+  }
+
+  .scribdown-markdown table::after {
+    /* 关键步骤：保持代码块边条形状，改用绿色 token 着色。 */
+    background-color: var(--scribdown-table-border-fill);
+    background-image: none;
+    -webkit-mask-image:
+      var(--scribdown-rough-line-shadow-horizontal), var(--scribdown-rough-line-shadow-horizontal),
+      var(--scribdown-rough-line-shadow-vertical), var(--scribdown-rough-line-shadow-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-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),
+      var(--scribdown-rough-line-shadow-vertical), var(--scribdown-rough-line-shadow-vertical);
+    mask-position:
+      left 2px top -4px,
+      left 0px bottom -1px,
+      left -4px top 0px,
+      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);
+    mask-mode: alpha, alpha, alpha, alpha;
+  }
+}

package/src/styles/toc.css

@@ -0,0 +1,163 @@
+/* TableOfContents：由 [TOC] 占位符生成（inline），同时被 toolbar 抽屉复用，
+   class 名是项目独占的命名空间，故全部不再依赖 .scribdown-markdown 父容器，
+   让 inline TOC 与抽屉目录共享一套层级 / 折叠样式。 */
+.scribdown-toc {
+  width: fit-content;
+  max-width: 100%;
+  margin: 0 0 var(--scribdown-space-4);
+  padding: 8px 16px;
+  /* 关键步骤：目录根引入 .scribdown-frame 的手绘边框后，自身再补上卡片底色。 */
+  background: var(--scribdown-color-surface);
+}
+
+.scribdown-toc[open] {
+  width: 100%;
+  padding-bottom: var(--scribdown-space-4);
+}
+
+.scribdown-toc-summary {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--scribdown-space-2);
+  min-height: 36px;
+  color: var(--scribdown-color-accent);
+  cursor: pointer;
+  font-family: var(--scribdown-font-heading);
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+  list-style: none;
+  user-select: none;
+}
+
+.scribdown-toc-summary:focus,
+.scribdown-toc-summary:focus-visible {
+  outline: none;
+}
+
+.scribdown-toc-summary::marker,
+.scribdown-toc-summary::-webkit-details-marker {
+  display: none;
+}
+
+.scribdown-toc-summary::before {
+  content: "";
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  background-image: var(--scribdown-toc-toggle-icon);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  transform: rotate(-5deg);
+  transition: transform var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-toc[open] .scribdown-toc-summary::before {
+  transform: rotate(85deg);
+}
+
+.scribdown-toc-nav {
+  margin-top: var(--scribdown-space-2);
+}
+
+.scribdown-toc-list {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+/* 嵌套子列表：层级缩进由每个条目左侧固定 gutter 累加体现，这里仅补一点纵向间距。 */
+.scribdown-toc-list--nested {
+  margin: 4px 0 0;
+  padding-left: 0;
+}
+
+/* 折叠态：隐藏当前分支条目的嵌套子列表。 */
+.scribdown-toc-item--collapsed > .scribdown-toc-list--nested {
+  display: none;
+}
+
+/* 目录条目：左侧预留固定 gutter 容纳折叠按钮；叶子无按钮但同样缩进，标题天然对齐。
+   层级缩进通过条目嵌套累加 padding-left 实现，无需 --depth-N 专门定位。 */
+.scribdown-toc-item {
+  position: relative;
+  min-height: 28px;
+  margin-bottom: 4px;
+  padding-left: 22px;
+  color: var(--scribdown-color-text-secondary);
+}
+
+/* 分支折叠按钮：定位在左侧 gutter，重置原生按钮样式，用手绘三角图标表示展开/折叠。
+   与标题链接彻底分离，点击只折叠、不跳转。 */
+.scribdown-toc-toggle {
+  position: absolute;
+  left: 0;
+  top: 3px;
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  background-image: var(--scribdown-toc-toggle-icon);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+  cursor: pointer;
+  /* 展开态：三角朝下。 */
+  transform: rotate(85deg);
+  transition: transform var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+/* 折叠态：三角朝右。 */
+.scribdown-toc-item--collapsed > .scribdown-toc-toggle {
+  transform: rotate(-5deg);
+}
+
+.scribdown-toc-toggle:focus {
+  outline: none;
+}
+
+.scribdown-toc-toggle:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--scribdown-color-warning) 68%, transparent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+/* 标题跳转链接：叶子与分支共用同一种元素与样式。 */
+.scribdown-toc-link {
+  color: var(--scribdown-color-accent);
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+.scribdown-toc-link:hover {
+  opacity: 0.8;
+  text-decoration: none;
+}
+
+.scribdown-toc-link:focus {
+  outline: none;
+}
+
+.scribdown-toc-link:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--scribdown-color-warning) 68%, transparent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+/* 当前章节：scrollspy 命中当前可视区标题时高亮对应目录项，与工具栏当前章节指示器同步。
+   关键步骤：底色用 box-shadow「外扩」而非 padding，行内链接换行时不挤动布局。 */
+.scribdown-toc-link--active {
+  font-weight: 700;
+  opacity: 1;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--scribdown-color-accent) 15%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--scribdown-color-accent) 15%, transparent);
+}
+
+/* 当前章节项 hover：保持高亮不被通用 hover 的半透明削弱。 */
+.scribdown-toc-link--active:hover {
+  opacity: 1;
+}

package/src/styles/tokens.css

@@ -0,0 +1,140 @@
+/* ─── Token 定义 ───────────────────────────────────────────────────── */
+/* 浅色主题：参考素描本米白纸张与水彩颜料色相。
+   长时间阅读偏好：暖色偏移降低蓝光眩光、文字采用深沉柏木色而非纯黑、
+   重点色保持低饱和的"褪色颜料"质感、纸面与卡面亮度差拉开以便内容浮起。 */
+:root {
+  /* 暖米纸：略冷于旧版的牛皮黄，减轻长时间阅读的"陈旧报纸"感。 */
+  --scribdown-color-bg: #ebe1c8;
+  /* 内容纸面：进一步提亮但保持暖调，与底色形成清晰层次。 */
+  --scribdown-color-surface: #f8f0db;
+  /* 主文字：深胡桃色沉淀墨，对比 surface ≈12:1，足够锐利又不刺眼。 */
+  --scribdown-color-text-primary: #2f2620;
+  /* 次文字：泛黄旧墨色。 */
+  --scribdown-color-text-secondary: #786758;
+  /* 主题色：松林青苔——明度居中、与文字蓝相区分。 */
+  --scribdown-color-accent: #436b5b;
+  /* 链接色：靛青水墨蓝，去掉过往略带紫感的偏色。 */
+  --scribdown-color-link: #355a7d;
+  /* 已访问链接：晾干后的紫罗兰，色相比未访问偏暖。 */
+  --scribdown-color-link-visited: #6a527b;
+  /* 高亮笔色：姜黄荧光，保留涂抹的颜料质地。 */
+  --scribdown-color-mark: #d7ab48;
+  /* 边线：铅笔石墨与纸张混合后的暖灰。 */
+  --scribdown-color-border: #c5ad8a;
+  /* 危险色：陶土红，去除生硬的猩红，落在书法朱砂。 */
+  --scribdown-color-danger: #a8504a;
+  /* 警告色：烧赭石。 */
+  --scribdown-color-warning: #8d6432;
+  /* 代码块墨色：板岩紫，与正文棕色明显区分但不抢眼。 */
+  --scribdown-color-code-ink: #5e5483;
+  --scribdown-color-blockquote-bg: color-mix(
+    in srgb,
+    var(--scribdown-color-border) 18%,
+    var(--scribdown-color-surface)
+  );
+  --scribdown-color-blockquote-text: color-mix(
+    in srgb,
+    var(--scribdown-color-text-secondary) 88%,
+    var(--scribdown-color-surface)
+  );
+  --scribdown-color-blockquote-link: color-mix(
+    in srgb,
+    var(--scribdown-color-link) 86%,
+    var(--scribdown-color-text-primary)
+  );
+  --scribdown-color-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);
+  /* 纸面纤维：浅青苔色丝纹，与 accent 同源。 */
+  --scribdown-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-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;
+
+  /* 四角独立写法，呼应手绘感 */
+  --scribdown-radius-sm: 8px 10px 9px 11px;
+  --scribdown-radius-md: 14px 16px 13px 17px;
+
+  --scribdown-space-1: 4px;
+  --scribdown-space-2: 8px;
+  --scribdown-space-3: 12px;
+  --scribdown-space-4: 16px;
+  --scribdown-space-5: 24px;
+  --scribdown-space-6: 32px;
+  --scribdown-space-7: 48px;
+
+  --scribdown-duration-fast: 120ms;
+  --scribdown-duration-base: 200ms;
+  --scribdown-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* 关键步骤：目录折叠箭头 SVG 由 inline TOC 与 toolbar 抽屉共用，
+     放在 :root 上避免抽屉脱离 .scribdown-markdown 作用域后变量失效。 */
+  --scribdown-toc-toggle-icon: url("../assets/toc-branch-toggle.svg");
+}
+
+/* 暗色主题："夜读台灯下的旧纸册"：
+   纸面为接近黑的暖褐底，墨色反相为米白；颜料色以"粉笔/水彩"的提亮版本出现，
+   保持与浅色主题一致的色相与语义。 */
+@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);
+  }
+}