@scribdown/ui-handdrawn 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 GrainFull
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@scribdown/ui-handdrawn",
+  "version": "0.1.0",
+  "description": "Scribdown 手绘风格视觉组件：设计 Token、样式与 SVG 资产。",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/share-man-man/scribdown.git",
+    "directory": "packages/ui-handdrawn"
+  },
+  "exports": {
+    "./styles.css": "./src/styles.css",
+    "./styles/*": "./src/styles/*",
+    "./assets/*": "./src/assets/*"
+  },
+  "files": [
+    "src/styles.css",
+    "src/styles",
+    "src/assets"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "roughjs": "^4.6.6",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "test": "vitest run --passWithNoTests",
+    "lint": "eslint .",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "gen:rough-lines": "node scripts/generate-rough-lines.mjs"
+  }
+}

package/src/assets/blockquote-bar.svg

@@ -0,0 +1,68 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="72" viewBox="0 0 12 72" preserveAspectRatio="none">
+  <style>
+    .wash {
+      fill: #2F6A5F;
+      opacity: 0.28;
+    }
+
+    .fill {
+      fill: #2F6A5F;
+    }
+
+    .gap {
+      fill: #FFFDF8;
+      opacity: 0.78;
+    }
+
+    .line {
+      fill: none;
+      opacity: 0.7;
+      stroke: #2F6A5F;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.25;
+    }
+
+    .dry {
+      fill: none;
+      opacity: 0.5;
+      stroke: #FFFDF8;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.8;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .wash {
+        fill: #5FBFAD;
+        opacity: 0.22;
+      }
+
+      .fill {
+        fill: #5FBFAD;
+      }
+
+      .gap {
+        fill: #2A2420;
+      }
+
+      .line {
+        stroke: #5FBFAD;
+      }
+
+      .dry {
+        stroke: #2A2420;
+        opacity: 0.6;
+      }
+    }
+  </style>
+  <path class="wash" d="M2.0 -1.0 C4.2 -1.8 8.1 -0.4 10.2 -1.0 C9.1 10.2 10.9 21.0 9.8 31.4 C8.6 43.0 10.8 55.2 10.2 73.0 C8.1 72.4 4.2 73.8 2.0 73.0 C3.0 56.4 1.1 42.0 2.2 29.0 C3.4 16.0 1.0 5.8 2.0 -1.0 Z" />
+  <path class="fill" d="M3.0 -1.0 C5.0 -1.9 7.8 -0.4 9.6 -1.0 C8.8 11.6 10.0 23.1 9.0 34.0 C7.9 45.0 10.0 55.7 9.6 73.0 C7.8 72.4 5.0 73.7 3.0 73.0 C3.4 57.7 1.8 43.8 3.0 30.4 C4.2 18.1 2.1 5.8 3.0 -1.0 Z" />
+  <path class="gap" d="M4.7 6.4 C5.5 16.4 4.6 24.0 5.3 33.0 C5.6 37.2 4.9 42.0 5.2 47.1 C6.0 45.5 6.2 42.8 6.4 39.8 C6.9 31.7 5.8 23.6 6.5 15.7 C6.8 11.6 6.3 8.4 6.8 5.9 C6.0 6.3 5.4 6.2 4.7 6.4 Z" />
+  <path class="gap" d="M7.1 38.8 C7.9 44.3 6.7 49.0 7.4 54.5 C7.9 58.4 6.9 62.8 7.3 67.4 C8.1 65.6 8.4 62.7 8.5 59.5 C8.7 52.3 7.7 45.6 8.3 38.5 C7.9 38.9 7.5 38.8 7.1 38.8 Z" />
+  <path class="gap" d="M3.2 18.8 C3.7 24.2 2.8 29.8 3.3 35.1 C3.8 33.8 4.0 31.6 4.0 29.2 C4.2 25.1 3.8 21.2 4.1 18.4 C3.7 18.7 3.5 18.8 3.2 18.8 Z" />
+  <path class="line" d="M3.4 -1.0 C2.5 10.4 4.5 21.9 3.6 32.6 C2.5 44.8 4.6 57.0 3.4 73.0 M8.7 -1.0 C9.8 11.8 7.6 23.8 8.8 35.2 C10.0 47.0 7.5 58.6 8.7 73.0 M6.0 -1.0 C7.0 12.8 4.8 25.2 6.0 37.2 C7.2 49.1 5.2 61.6 6.0 73.0" />
+  <path class="dry" d="M4.1 10.2 C5.0 15.0 4.0 20.2 4.7 25.1" />
+  <path class="dry" d="M7.6 22.8 C8.4 28.8 7.2 34.3 7.9 39.6" />
+  <path class="dry" d="M4.4 49.0 C5.1 55.6 4.1 61.8 4.8 68.2" />
+</svg>

package/src/assets/delete.svg

@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="28" viewBox="0 0 180 28" preserveAspectRatio="none">
+  <style>
+    .brush-shadow {
+      fill: #6A5B53;
+      opacity: 0.08;
+    }
+
+    .brush-main {
+      fill: #A94A3F;
+      opacity: 0.32;
+    }
+
+    .brush-wet {
+      fill: #A94A3F;
+      opacity: 0.16;
+    }
+
+    .brush-bristle {
+      fill: none;
+      opacity: 0.3;
+      stroke: #A94A3F;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.9;
+    }
+
+    .brush-fray {
+      fill: none;
+      opacity: 0.22;
+      stroke: #A94A3F;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.7;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .brush-shadow {
+        fill: #9B8C82;
+        opacity: 0.12;
+      }
+
+      .brush-main,
+      .brush-wet {
+        fill: #D4706A;
+      }
+
+      .brush-bristle,
+      .brush-fray {
+        stroke: #D4706A;
+      }
+    }
+  </style>
+  <path class="brush-shadow" d="M2.0 19.2 C10.2 16.1 22.4 17.0 34.1 16.2 C52.0 15.0 69.4 13.8 87.2 14.6 C106.0 15.5 124.2 13.4 143.0 14.4 C156.5 15.2 169.2 13.6 177.9 14.7 C174.3 18.5 164.7 20.2 152.8 20.0 C134.5 19.5 116.3 22.2 98.2 20.6 C79.2 18.9 60.5 22.8 41.7 20.4 C25.0 18.2 11.4 22.4 2.0 19.2 Z" />
+  <path class="brush-main" fill-rule="evenodd" d="M1.7 11.4 C8.0 7.3 20.0 9.0 31.6 7.5 C45.7 5.7 58.7 9.8 72.8 7.6 C90.4 4.8 106.5 10.1 124.0 7.4 C140.7 4.9 158.6 9.7 178.4 7.8 C175.6 11.2 169.9 13.1 161.0 14.2 C143.9 16.3 127.9 14.4 110.4 16.0 C91.2 17.9 73.8 13.8 55.2 17.6 C37.7 21.0 19.8 15.6 1.7 20.7 C4.2 16.8 4.0 13.8 1.7 11.4 Z M18.5 13.0 C27.7 10.8 38.0 12.7 47.2 11.1 C41.6 14.2 28.0 15.1 18.5 13.0 Z M66.2 12.9 C80.5 10.6 93.1 14.4 106.5 11.8 C96.7 15.3 78.4 15.6 66.2 12.9 Z M120.3 12.2 C131.8 10.5 144.4 13.1 156.3 11.0 C147.8 14.1 130.7 14.9 120.3 12.2 Z" />
+  <path class="brush-wet" d="M5.1 10.5 C23.6 5.9 41.6 10.7 60.0 8.2 C78.8 5.7 97.0 10.8 116.0 8.0 C136.8 5.0 157.4 9.7 177.5 7.9 C164.0 11.0 149.3 12.0 134.0 12.3 C114.4 12.9 94.8 15.2 75.1 13.5 C52.4 11.5 28.3 16.5 5.1 10.5 Z" />
+  <path class="brush-bristle" d="M5.0 18.6 C21.5 15.5 38.2 19.6 54.0 16.4" />
+  <path class="brush-bristle" d="M61.4 19.4 C77.4 16.3 93.1 17.9 109.0 15.4" />
+  <path class="brush-bristle" d="M116.1 18.0 C133.1 15.0 149.8 17.0 166.8 14.3" />
+  <path class="brush-fray" d="M2.8 8.9 C7.7 6.8 12.0 7.6 17.0 6.7" />
+  <path class="brush-fray" d="M10.8 22.0 C22.6 17.8 35.1 21.1 46.8 18.0" />
+  <path class="brush-fray" d="M51.8 6.9 C61.5 9.0 68.5 9.0 77.2 7.4" />
+  <path class="brush-fray" d="M101.8 21.0 C112.4 17.1 123.3 18.7 134.2 15.7" />
+  <path class="brush-fray" d="M144.6 6.9 C156.0 9.2 166.4 8.6 178.0 7.8" />
+</svg>

package/src/assets/heading-mark.svg

@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="24" viewBox="0 0 240 24" preserveAspectRatio="none">
+  <style>
+    .stop-a { stop-color: #d7a339; }
+    .stop-b { stop-color: #d7a339; }
+    .wash { fill: #d7a339; opacity: 0.14; }
+    .dry { fill: #d7a339; opacity: 0.38; }
+    .fleck { fill: #d7a339; opacity: 0.5; }
+    @media (prefers-color-scheme: dark) {
+      .stop-a,
+      .stop-b { stop-color: #c49a4a; }
+      .wash,
+      .dry,
+      .fleck { fill: #c49a4a; }
+    }
+  </style>
+  <defs>
+    <linearGradient id="scribdown-heading-mark-taper-a" x1="0" y1="0" x2="240" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" class="stop-a" stop-opacity="0" />
+      <stop offset="0.04" class="stop-a" stop-opacity="0.32" />
+      <stop offset="0.18" class="stop-a" stop-opacity="0.48" />
+      <stop offset="0.55" class="stop-a" stop-opacity="0.5" />
+      <stop offset="0.82" class="stop-a" stop-opacity="0.44" />
+      <stop offset="0.96" class="stop-a" stop-opacity="0.26" />
+      <stop offset="1" class="stop-a" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="scribdown-heading-mark-taper-b" x1="0" y1="0" x2="240" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" class="stop-b" stop-opacity="0" />
+      <stop offset="0.1" class="stop-b" stop-opacity="0.22" />
+      <stop offset="0.4" class="stop-b" stop-opacity="0.32" />
+      <stop offset="0.7" class="stop-b" stop-opacity="0.3" />
+      <stop offset="0.92" class="stop-b" stop-opacity="0.18" />
+      <stop offset="1" class="stop-b" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+
+  <!-- 底层 wash：最宽最淡，模拟纸面渗色 -->
+  <path class="wash" d="M1.4 5.6 C20 5.2 50 6.2 82 5.4 C120 4.6 160 6.0 200 5.4 C218 5.1 232 5.8 239 5.6 L239 19.2 C232 19.6 220 19.0 200 19.6 C160 20.4 120 19.0 80 19.7 C50 20.0 22 19.4 1.6 19.6 Z" />
+
+  <!-- 主笔触：上下边缘做明显锯齿/抖动，端点用渐变收尾 -->
+  <path fill="url(#scribdown-heading-mark-taper-a)" d="M2 8.4 C8 7.6 14 9.4 22 8.2 C32 6.8 44 9.6 56 7.8 C68 6.2 80 9.8 92 7.8 C106 6.0 120 9.8 134 7.6 C150 5.6 166 9.6 182 7.6 C200 5.8 216 9.4 234 7.4 C236 7.2 237 7.6 238 7.4 L238 16.6 C236 16.8 234 16.4 226 17.0 C212 18.0 196 16.4 180 17.8 C162 19.2 144 16.6 126 18.0 C108 19.2 90 16.6 72 18.1 C56 19.4 40 17.0 26 18.6 C16 19.5 8 17.4 3 18.2 C2.4 18.2 2 18.0 2 17.8 Z" />
+
+  <!-- 第二笔：偏上、略短，模拟二次划过 -->
+  <path fill="url(#scribdown-heading-mark-taper-b)" d="M14 10.6 C24 9.8 38 11.2 56 10.0 C76 8.8 100 11.0 124 9.8 C144 8.8 168 10.8 192 9.8 C210 9.2 222 10.4 230 9.8 L230 14.0 C222 14.4 210 13.6 192 14.2 C168 15.0 144 13.4 124 14.2 C100 15.0 76 13.6 56 14.4 C38 15.0 24 13.8 14 14.0 C13 12.8 13 11.6 14 10.6 Z" />
+
+  <!-- 起笔处的"干"笔触碎点 -->
+  <path class="dry" d="M0.4 9.6 C2.2 9.4 4.2 9.7 5.6 9.5 L5.0 10.6 C3.4 10.7 1.8 10.7 0.6 10.7 Z" />
+  <path class="dry" d="M1.4 13.4 C3.2 13.2 5.4 13.5 6.6 13.4 L6.0 14.4 C4.4 14.6 2.6 14.7 1.6 14.6 Z" />
+
+  <!-- 收笔处的"干"笔触碎点 -->
+  <path class="dry" d="M235.4 10.0 C236.8 9.8 238.4 10.0 239.6 9.9 L239.6 11.0 C238.4 11.0 236.6 11.0 235.4 11.0 Z" />
+  <path class="dry" d="M233.4 14.2 C235.4 13.9 237.6 14.2 239.4 14.0 L239.4 15.0 C237.6 15.1 235.6 15.0 233.6 15.0 Z" />
+
+  <!-- 沿带分布的零散墨点，强化粗糙感 -->
+  <path class="fleck" d="M44 5.6 C46 5.4 48 5.6 50 5.4 L49.6 6.2 C48 6.2 46 6.3 44 6.2 Z" />
+  <path class="fleck" d="M118 5.0 C120 4.8 122 5.0 124 4.8 L123.6 5.6 C122 5.6 120 5.7 118 5.6 Z" />
+  <path class="fleck" d="M186 5.4 C188 5.2 190 5.4 192 5.2 L191.6 6.0 C190 6.0 188 6.1 186 6.0 Z" />
+  <path class="fleck" d="M68 18.4 C70 18.2 72 18.4 74 18.2 L73.6 19.0 C72 19.0 70 19.1 68 19.0 Z" />
+  <path class="fleck" d="M138 18.6 C140 18.4 142 18.6 144 18.4 L143.6 19.2 C142 19.2 140 19.3 138 19.2 Z" />
+  <path class="fleck" d="M204 18.4 C206 18.2 208 18.4 210 18.2 L209.6 19.0 C208 19.0 206 19.1 204 19.0 Z" />
+</svg>

package/src/assets/rect-shadow.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<svg width="182.846" height="42.701" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" aria-label="handdrawn rectangle shadow">
+ <style>.rect-shadow-fill {
+      fill: none;
+      stroke: #8b6b2e;
+      stroke-linecap: round;
+      stroke-linejoin: miter;
+      stroke-width: 1.6;
+      opacity: 0.42;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .rect-shadow-fill {
+        stroke: #c49a4a;
+        opacity: 0.46;
+      }
+    }</style>
+ <g class="layer">
+  <title>Layer 1</title>
+  <path class="rect-shadow-fill" d="m4.55,38.73c0,0 0,0 0,0m0,0c0,0 0,0 0,0m6.32,-0.38c-3.55,-0.21 -3.35,-4.18 -5.89,-5.53m4.81,5.68c-1.65,-0.71 -2.72,-1.29 -4.33,-4.9m13.19,1.48c-7.83,1.71 -12.23,-4.44 -11.78,-3.66m11.17,8.45c-5.58,-4.74 -8.68,-6.41 -13.93,-10.58m17.75,12.93c-6.6,-6.4 -10.19,-6.42 -15.9,-15.14m14.46,13.35c-5.6,-6.16 -13.8,-11 -17.85,-14.64m23.1,12.53c-3.23,-1.01 -4.38,-9.95 -16.96,-19.33m19.04,20.3c-7.13,-7.24 -10.79,-10 -23.18,-18.12m35.95,21.35c-9.45,-5.77 -19.27,-11.05 -37.73,-24.52m32.35,22.24c-8.08,-7.28 -13.6,-12.71 -28.42,-24.89m38.54,25.47c-17.51,-12.54 -22.46,-18.94 -43.06,-28.13m38.33,25.13c-11.1,-8.62 -20.58,-14.01 -37.12,-25.42m40.56,29.1c-3.78,-7.86 -14.15,-18.21 -34.8,-29.87m37.93,28.15c-14.19,-11.31 -23.69,-20.97 -42.73,-31.72m46.5,33.71c-9.5,-15.76 -18.24,-16.97 -44.75,-34.61m49.05,30.12c-19.65,-10.79 -40.02,-24.55 -48.5,-33.53m57.32,33.31c-23.88,-5.92 -44.87,-20.35 -59.91,-38.56m56.36,39.14c-19.14,-11.25 -35.89,-22.46 -54.4,-35.58m56.98,40.97c-8.93,-14.31 -19.99,-25.38 -47.16,-42.53m47.97,36.24c-21.5,-9.81 -42.03,-26.6 -49.77,-37.61m56.89,43.12c-8.89,-8.62 -26.75,-18.29 -55.85,-45.01m58.65,40.61c-22.62,-10.52 -36.32,-20.44 -54.26,-38.42m63.33,42.25c-19.76,-15.28 -28.16,-19.25 -62.93,-38.11m56.67,33.82c-12.74,-7.43 -29.48,-19.25 -54.17,-38.58m65.63,38.28c-27.7,-10.33 -42.89,-26.24 -61.22,-32.92m56.45,35.19c-10.75,-13.06 -29.96,-23.72 -53.76,-36.96m58.98,33.18c-21.9,-7.26 -36.96,-18.87 -55.22,-37.92m57.45,39.39c-11.89,-7.56 -31.09,-18.51 -53.79,-37.83m61.29,36.39c-14.81,-7.1 -19.92,-13.02 -52.43,-34.06m50.12,37.23c-18.11,-12.06 -41.64,-29.99 -50.26,-37.23m60.55,32.91c-21.13,-8.49 -25.88,-20.11 -56.07,-37.79m55.05,42.28c-20.69,-14.17 -39.35,-29.77 -54.18,-39.22m54.46,35.16c-11.05,-7.41 -25.85,-19.02 -52.68,-38.06m56.33,42.48c-10.92,-9.1 -21.77,-14.43 -52.14,-39.67m54.29,41.38c-5.19,-6.35 -27.89,-22.33 -50.3,-38.93m56.59,37.45c-12.24,-9.49 -23.86,-17.96 -56.76,-39.81m63.54,40.79c-15.79,-9.83 -29.92,-26.59 -53.16,-36.8m51.51,34.75c-9.84,-6.96 -26.19,-13.4 -54.28,-39.21m60.08,36.19c-16.49,-12.2 -31.03,-14.58 -56.67,-33.77m56.66,35.74c-18.16,-10.48 -39,-20.02 -56.26,-37.88m60.51,42.65c-12.31,-12.99 -25.59,-30.68 -52.45,-42.07m53.04,36.88c-11.39,-5.79 -21.47,-16.38 -52.77,-34.12m59.51,40.13c-12.96,-15.05 -37.06,-26.41 -53.59,-44.64m54.18,42.64c-12.21,-11.38 -23.34,-22.7 -55.05,-40.52m61.59,36.55c-14.26,-7.02 -22.4,-17.52 -56.5,-32.44m57.73,33.16c-19.68,-10.85 -39.88,-24.26 -54.8,-34.82m62.89,35.91c-23.82,-11.11 -31.18,-22.23 -53.36,-40.74m50.33,39.57c-17.65,-12.18 -31.72,-23.53 -53.77,-38.3m56.29,41.37c-14.86,-14.31 -30.11,-27.04 -49.13,-41.89m54.08,38.05c-21.33,-14.37 -42.74,-26.76 -53.96,-37.37m60,35.79c-18.16,-1.47 -26.85,-9.55 -60.52,-32.15m58.54,35.78c-16.18,-12.75 -25.94,-18.24 -53.83,-37.16m56.69,40.15c-16.23,-15.83 -41.39,-33.54 -51.07,-44.54m54.36,40.75c-19.5,-16.12 -40.53,-28.77 -55.01,-36.67m64.41,38.58c-18.89,-8.46 -34.85,-21.94 -54.42,-37.91m50.18,38.63c-14.05,-14.42 -33.62,-23.68 -54.88,-39.8m59.95,36.97c-23.2,-18.46 -41.59,-31.28 -48.07,-41.24m44.83,40.8c-15.37,-12.93 -28.47,-22.02 -51.04,-37.75m56.49,28.22c-26.13,-11.92 -36.32,-25.95 -53.01,-29.17m50.32,34.44c-21.09,-12.61 -36.08,-27.12 -44.69,-33.19m44.64,30.77c-7.41,-11.39 -27.35,-22.99 -39.35,-32.41m36.64,27.62c-6.95,-6.57 -15.43,-11.9 -37.57,-24.16m37.07,22.24c-6.26,-8.36 -17.4,-18.06 -26.07,-24.21m28.83,23.66c-5.71,-7.52 -15.07,-14.39 -30.57,-21.49m28.27,15.3c-12.76,-4.88 -21.12,-10.84 -28.29,-14.54m29.41,14.58c-6.25,-4.83 -14.11,-10.64 -22.87,-16.49m22.93,16.81c-6.67,-6.86 -4.42,-5.48 -21.29,-18m23.99,14.67c-8.3,-6.65 -12.9,-11.16 -22.64,-13.26m17.68,12.64c2.18,-3.78 -1.72,-10.43 -7.47,-14.87m8.52,10.05c-3.3,-1.27 -3.29,-5 -12.51,-6.13m14.88,4.14c-2.27,-3.73 -7.16,-6.08 -7.43,-8.27m7.61,8.05c-2.66,-2.56 -3.46,-2.86 -8.69,-5.75m8.07,0.96c-0.85,-0.08 -1,-0.43 -1.57,-1.17m1.5,0.81c-0.61,-0.11 -1.27,-0.28 -1.5,-0.8" id="svg_1" transform="matrix(1.13125 0 0 1.14673 -13.1913 -0.411028)"/>
+ </g>
+</svg>

package/src/assets/rough-line-dash-horizontal.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="8" viewBox="0 0 64 8" preserveAspectRatio="none">
+  <style>
+    .dash {
+      fill: none;
+      stroke: #4A3F38;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.8;
+    }
+
+    .trace {
+      fill: none;
+      opacity: 0.48;
+      stroke: #6A5B53;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.8;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .dash { stroke: #D6C9BE; }
+      .trace { stroke: #A49388; opacity: 0.5; }
+    }
+  </style>
+  <path class="dash" d="M2 4.2 C6 3.8 10 4.5 14 4.1" />
+  <path class="dash" d="M22 4.0 C26 3.6 30 4.4 34 4.0" />
+  <path class="dash" d="M42 4.2 C46 3.7 50 4.5 54 4.1" />
+  <path class="dash" d="M58 4.0 C60 3.8 62 4.2 64 4.0" />
+  <path class="trace" d="M2 5.5 C6 5.0 10 5.8 14 5.4" />
+  <path class="trace" d="M22 5.3 C26 4.9 30 5.6 34 5.2" />
+  <path class="trace" d="M42 5.5 C46 5.1 50 5.8 54 5.4" />
+</svg>

package/src/assets/rough-line-dash-vertical.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="64" viewBox="0 0 8 64" preserveAspectRatio="none">
+  <style>
+    .dash {
+      fill: none;
+      stroke: #4A3F38;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.8;
+    }
+
+    .trace {
+      fill: none;
+      opacity: 0.48;
+      stroke: #6A5B53;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.8;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .dash { stroke: #D6C9BE; }
+      .trace { stroke: #A49388; opacity: 0.5; }
+    }
+  </style>
+  <path class="dash" d="M4.2 2 C3.8 6 4.5 10 4.1 14" />
+  <path class="dash" d="M4.0 22 C3.6 26 4.4 30 4.0 34" />
+  <path class="dash" d="M4.2 42 C3.7 46 4.5 50 4.1 54" />
+  <path class="dash" d="M4.0 58 C3.8 60 4.2 62 4.0 64" />
+  <path class="trace" d="M5.5 2 C5.0 6 5.8 10 5.4 14" />
+  <path class="trace" d="M5.3 22 C4.9 26 5.6 30 5.2 34" />
+  <path class="trace" d="M5.5 42 C5.1 46 5.8 50 5.4 54" />
+</svg>

package/src/assets/rough-line-horizontal.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="6" viewBox="0 0 200 6" preserveAspectRatio="none">
+  <g fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M-0.8885389623697847 2.835747448122129 C5.98063496722219 3.023836115614201, 26.163666460150857 3.3836979418154813, 39.665068303281444 3.2720676984544848 C53.16647014641203 3.160437455093488, 66.7766827083969 2.1343503594553717, 80.11987209641376 2.165965987956151 C93.46306148443061 2.1975816164569304, 106.29286793692347 3.454849899923429, 119.72420463138259 3.4617614694591614 C133.1555413258417 3.468673038994894, 147.18285253716945 2.1781550389683497, 160.7078922631685 2.207435405170545 C174.23293198916755 2.23671577137274, 194.21855270786523 3.414428028380498, 200.87444298737682 3.637443666672334" />
+    <path d="M19.680227263411506 2.550232136854902 C29.60333365944421 2.7579639204105155, 59.151220776611524 4.316996703819475, 78.98881145630342 4.451140555848057 C98.82640213599532 4.585284407876639, 118.8756678476671 3.468230293965381, 138.7057713415629 3.355095249026393 C158.53587483545869 3.2419602040874045, 188.1445200029088 3.586171521686224, 197.96943241967818 3.772330286214128" />
+  </g>
+</svg>

package/src/assets/rough-line-shadow-horizontal.svg

@@ -0,0 +1,80 @@
+<svg
+  width="192"
+  height="12"
+  viewBox="0 0 192 12"
+  preserveAspectRatio="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <defs>
+    <!-- 轻微纸面/笔触扰动 -->
+    <filter id="roughen">
+      <feTurbulence
+        type="fractalNoise"
+        baseFrequency="0.9"
+        numOctaves="2"
+        seed="8"
+      />
+      <feDisplacementMap
+        in="SourceGraphic"
+        scale="1.6"
+      />
+    </filter>
+  </defs>
+
+  <!-- <rect width="100%" height="100%" fill="#FAF7F0" /> -->
+
+  <g
+    fill="none"
+    stroke="#1F2933"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    filter="url(#roughen)"
+  >
+
+    <!-- 横线：主笔触 -->
+    <path
+      d="M0 6.2
+         C10.6 4.0, 22.2 8.7, 34.6 5.8
+         C47.9 2.8, 63.2 9.4, 79.0 5.7
+         C95.8 1.9, 112.4 9.9, 130.1 5.9
+         C147.8 3.2, 166.4 8.6, 192 6.1"
+      stroke-width="2.76"
+      opacity="0.9"
+    />
+
+    <!-- 横线：副笔触，模拟笔锋毛边 -->
+    <path
+      d="M0 8.9
+         C13.2 7.2, 26.0 10.8, 38.7 8.4
+         C51.8 6.1, 67.6 10.9, 83.8 8.0
+         C100.0 5.8, 118.3 10.4, 137.1 8.6
+         C154.4 6.8, 172.5 10.6, 192 8.8"
+      stroke-width="2.6"
+      opacity="0.42"
+    />
+
+    <!-- 横线：局部厚墨，制造粗细不均匀 -->
+    <path
+      d="M28.0 5.6
+         C38.1 4.7, 49.2 6.9, 60.4 5.5"
+      stroke-width="6.1"
+      opacity="0.24"
+    />
+
+    <!-- 横线：第二段厚墨 -->
+    <path
+      d="M122.0 5.8
+         C132.1 4.9, 142.7 7.3, 153.4 5.9"
+      stroke-width="5.4"
+      opacity="0.2"
+    />
+
+    <!-- 横线：细刮痕，增加不规则层次 -->
+    <path
+      d="M72.4 9.7
+         C82.4 8.8, 91.6 10.8, 101.4 9.5"
+      stroke-width="1.3"
+      opacity="0.35"
+    />
+  </g>
+</svg>

package/src/assets/rough-line-shadow-vertical.svg

@@ -0,0 +1,83 @@
+<svg
+  width="12"
+  height="144"
+  viewBox="0 0 12 144"
+  preserveAspectRatio="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <defs>
+    <!-- 轻微纸面/笔触扰动 -->
+    <filter id="roughen">
+      <feTurbulence
+        type="fractalNoise"
+        baseFrequency="0.9"
+        numOctaves="2"
+        seed="8"
+      />
+      <feDisplacementMap
+        in="SourceGraphic"
+        scale="1.6"
+      />
+    </filter>
+  </defs>
+
+  <!-- <rect width="100%" height="100%" fill="#FAF7F0" /> -->
+
+  <g
+    fill="none"
+    stroke="#1F2933"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    filter="url(#roughen)"
+  >
+    <!-- 竖线：主笔触 -->
+    <path
+      d="M5.9 0
+         C4.6 15.2, 7.8 30.6, 5.4 45.2
+         C3.6 57.0, 8.2 71.8, 5.7 86.0
+         C4.1 98.2, 7.5 113.4, 5.6 126.8
+         C4.8 134.8, 6.6 140.8, 5.9 144
+         C4.9 106.0, 6.8 58.8, 5.9 0
+         Z"
+      stroke-width="2.76"
+      opacity="0.9"
+    />
+
+    <!-- 竖线：副笔触，模拟重复描边 -->
+    <path
+      d="M8.8 0
+         C7.2 16.0, 9.9 31.8, 8.2 46.8
+         C6.9 58.6, 9.8 73.6, 8.0 88.8
+         C6.8 101.0, 9.3 115.4, 8.0 128.8
+         C7.4 136.8, 9.0 141.6, 8.5 144
+         C7.4 104.8, 9.3 58.2, 8.8 0
+         Z"
+      stroke-width="2.6"
+      opacity="0.45"
+    />
+
+    <!-- 竖线：局部厚墨，制造粗细不均匀 -->
+    <path
+      d="M4.8 34.0
+         C5.8 42.2, 4.4 50.6, 5.3 58.4"
+      stroke-width="6.0"
+      opacity="0.24"
+    />
+
+    <!-- 竖线：第二段厚墨 -->
+    <path
+      d="M6.6 94.0
+         C7.5 103.2, 6.1 112.0, 7.0 121.0"
+      stroke-width="5.5"
+      opacity="0.2"
+    />
+
+    <!-- 竖线：细刮痕，增加不规则层次 -->
+    <path
+      d="M9.7 66.0
+         C8.8 74.0, 10.1 82.0, 9.2 90.0"
+      stroke-width="1.2"
+      opacity="0.35"
+    />
+  </g>
+</svg>

package/src/assets/rough-line-vertical.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="200" viewBox="0 0 6 200" preserveAspectRatio="none">
+  <g fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2.8431877184659244 -0.48564193136990075 C3.2662338678787153 6.381703040127953, 3.909211670632164 25.88321975183984, 3.938330843523145 39.20814770571888 C3.9674500164141264 52.53307565959792, 3.233974394078056 66.0446432085087, 3.0179027558118103 79.46392579190434 C2.801831117545565 92.88320837529999, 2.665651256317894 106.35846038771172, 2.641901013925672 119.72384320609271 C2.61815077153345 133.0892260244737, 2.7947085659454265 146.0238534183552, 2.875401301458478 159.6562227021903 C2.956094036971529 173.28859198602538, 3.1683574232210714 194.57450963767866, 3.1260574270039796 201.51805890910327" />
+    <path d="M2.872066068276763 17.201181787624954 C3.462930953130126 27.412260766534338, 5.608235064769785 61.5370337244951, 5.246070444211364 81.79974586007495 C4.883905823652944 102.0624579956548, 1.0993595477193592 119.77361685008636, 0.6990783449262379 138.77745460110404 C0.29879714213311653 157.7812923521217, 2.7534149643033743 185.72151966595817, 2.844383227452636 195.82277236618103" />
+  </g>
+</svg>

package/src/assets/tag-body-hatch.svg

@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.653" height="48" viewBox="9.239 0 63.653 48" role="img" aria-label="handdrawn tag">
+  <style>
+    .tag-fill-rect,
+    .tag-fill-triangle {
+      fill: none;
+      stroke: #d7a339;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.85;
+      opacity: 0.42;
+    }
+
+    .tag-outline-rect,
+    .tag-outline-triangle {
+      fill: none;
+      stroke: #2f6a5f;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.7;
+      opacity: 0.78;
+    }
+
+    .tag-inner {
+      fill: none;
+      stroke: #8b6b2e;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.2;
+      opacity: 0.38;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .tag-fill-rect,
+      .tag-fill-triangle {
+        stroke: #c49a4a;
+        opacity: 0.48;
+      }
+
+      .tag-outline-rect,
+      .tag-outline-triangle {
+        stroke: #5fbfad;
+      }
+
+      .tag-inner {
+        stroke: #c49a4a;
+      }
+    }
+  </style>
+  <path class="tag-fill-rect" d="M11.734129124274144 37.83386543819361 C11.734129124274144 37.83386543819361, 11.734129124274144 37.83386543819361, 11.734129124274144 37.83386543819361 M11.734129124274144 37.83386543819361 C11.734129124274144 37.83386543819361, 11.734129124274144 37.83386543819361, 11.734129124274144 37.83386543819361 M20.7007734357647 39.01990569188553 C16.608945945450674 36.285401783308366, 13.888372073730244 34.4272632762393, 9.804008120980281 32.5509684567439 M19.30440106502337 37.7451976371409 C17.23265955087634 35.9667496797841, 13.996157355022985 34.87773982166283, 12.432928672407922 33.904906420355346 M25.973698193927387 39.59711755875799 C22.12320970286069 34.09420788006417, 15.403365739658533 31.631504664910718, 13.221489391293373 29.625151058903196 M26.571685799754317 37.772838430457966 C21.83114524978133 35.1514372269478, 17.56963304395103 32.823991013455206, 9.530135490460316 28.949003946487093 M36.98937916924264 36.80395729417524 C32.234274962660244 33.636761590921225, 27.281396543893287 30.90158094009087, 9.718916912254448 26.193068387324306 M34.51766521683913 39.219760824074804 C30.749955108585468 35.87600588028911, 25.454687225103395 31.222998544887645, 9.325471734002734 20.200868998861257 M43.28395785858162 36.01008097173823 C28.90743707981233 28.743553125176607, 18.454022093234734 25.767951642771763, 11.109467467936081 17.894725014608284 M43.19787282875978 38.91960644155918 C32.29061201223365 31.540864781989644, 22.085099292647893 26.235074780337033, 11.585674668839527 18.49251982482516 M49.56400396277656 36.993787161203095 C41.419797657723414 34.464782160546214, 36.39881304819908 28.776495870046233, 12.768075770958225 15.8521732129492 M48.46355199448292 38.31682565904966 C40.648938193590574 32.21325252893883, 31.57174415628996 27.010049204186558, 12.515358557346175 13.419554945692434 M55.59573086118701 36.40138062484988 C43.654051687399686 28.881974548008863, 30.896696987004432 23.125018274675533, 10.13919372471115 9.242702139427518 M56.35510371543842 38.928428194881015 C41.80928248135624 27.323505025431615, 26.81716928384788 19.80877336581908, 10.651776206233263 9.871667693348233 M64.97827795720323 37.33046301975907 C48.4293099515187 30.693182145924442, 38.04619145762657 17.718946486185377, 21.550218795118663 11.392356073655362 M63.584937048336855 37.0114511309384 C50.999711011600304 28.96719085761064, 36.28048783824642 21.061378578509313, 19.64233301599491 10.11791199095937 M70.13520115902837 37.008279218977535 C59.17086913215905 27.493708269994954, 43.81583347067772 22.161222755429797, 25.761060645163212 9.73751016961436 M71.99208458595167 37.82818023382335 C57.81125424711122 27.307805711663775, 42.64080920428376 18.639733546711856, 25.997278615433874 8.69515310481216 M73.27329001427056 36.011193933419726 C60.32872865278486 26.86517452926995, 45.888276868366056 19.464501923608665, 33.757074500360766 11.880794703817791 M74.06414459171133 31.99250157675504 C61.128026018875396 25.333427555108397, 49.90858889262608 18.904585266820956, 36.06576522713644 10.770866892474569 M72.63892392154074 29.92158478923134 C63.44345675036158 22.225026921139207, 57.593270767278455 19.141632410876777, 43.2834935141016 9.811217583346123 M74.01676221129706 28.633669616933833 C64.70939662839405 23.61179712115903, 59.851335391527506 20.228930013883723, 42.3334050328132 9.970137310831749 M71.33202353422921 21.848772193492856 C64.27430349669619 22.11312191265149, 58.981290968944066 18.1061406038476, 49.133015440745275 11.122349195479435 M72.77070587641951 26.084112061244902 C62.503328000170356 18.51931646933054, 53.893613584713826 12.779621371639221, 49.01298184639401 8.420716265718474 M72.94485329302655 22.422112116576727 C62.92548685227314 14.573512944489226, 63.17384554073987 11.882382560241155, 56.9070083007655 10.490175524854664 M72.60000652847694 18.939940542207655 C68.13602362519214 15.860285582936655, 64.97354143023908 13.773700158013302, 57.34042708349143 9.23223648823202 M73.45316769645227 15.538463198942301 C67.66030221364076 12.5922470981765, 65.94812645155012 11.078109335459942, 64.88563365038434 10.348637571304744 M72.63586865438292 13.494403469195758 C68.6151165378339 12.066092159565182, 66.38422248207289 10.616631264105829, 64.32710640105462 9.493785176225646" />
+
+</svg>

package/src/assets/tag-body-outline.svg

@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.653" height="48" viewBox="9.239 0 63.653 48" role="img" aria-label="handdrawn tag">
+  <style>
+    .tag-fill-rect,
+    .tag-fill-triangle {
+      fill: none;
+      stroke: #d7a339;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.85;
+      opacity: 0.42;
+    }
+
+    .tag-outline-rect,
+    .tag-outline-triangle {
+      fill: none;
+      stroke: #2f6a5f;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.7;
+      opacity: 0.78;
+    }
+
+    .tag-inner {
+      fill: none;
+      stroke: #8b6b2e;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.2;
+      opacity: 0.38;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .tag-fill-rect,
+      .tag-fill-triangle {
+        stroke: #c49a4a;
+        opacity: 0.48;
+      }
+
+      .tag-outline-rect,
+      .tag-outline-triangle {
+        stroke: #5fbfad;
+      }
+
+      .tag-inner {
+        stroke: #c49a4a;
+      }
+    }
+  </style>
+  <path class="tag-outline-rect" d="M9.003693818654865 9.334320288989693 C39.979484466183926 8.19957979390747, 51.671825006138526 8.762068823672598, 72.37015150925144 9.53503076527267 M9.295911033498124 9.521497987909243 C25.988783443951977 11.82070334431366, 38.00698701781221 9.789865786103764, 68.92839651410468 9.628132346970961" />
+  <path class="tag-outline-rect" d="M9.000399748403579 36.95125518916175 C39.244572159554814 36.536944090734464, 40.38458351800219 37.04475977660273, 73.14488379927352 38.2858747321181 M9.603980238130315 38.63007478849031 C27.176343747181818 38.67232606503996, 43.159328279411426 37.63124149385723, 72.89353565513156 37.05960885570384" />
+
+</svg>