@scribdown/ui-handdrawn 0.1.0

package/src/styles/host-reset.css

@@ -0,0 +1,46 @@
+/* 宿主默认样式隔离：
+ * VS Code Webview 会注入默认层（如 code/pre/a 等基础样式），
+ * 这里先把常见标签拉回到容器基线，再交给后续分模块样式接管。
+ */
+.scribdown-markdown {
+  color: var(--scribdown-color-text-primary);
+  font-family: var(--scribdown-font-body);
+}
+
+/* 关键步骤：统一文本色与字体继承，抹平宿主兜底差异。 */
+.scribdown-markdown :where(
+    p,
+    ul,
+    ol,
+    li,
+    blockquote,
+    pre,
+    code,
+    a,
+    strong,
+    em,
+    del,
+    s,
+    mark,
+    details,
+    summary,
+    table,
+    thead,
+    tbody,
+    tr,
+    th,
+    td,
+    img,
+    figure,
+    figcaption,
+    hr
+  ) {
+  color: inherit;
+  font-family: inherit;
+}
+
+/* 宿主常见的 pre/code 背景与边框兜底清空，避免和手绘样式叠加。 */
+.scribdown-markdown :where(pre, code) {
+  border: 0;
+  background: transparent;
+}

package/src/styles/image-viewer.css

@@ -0,0 +1,213 @@
+/* ImageViewer：运行时注入的全图查看层，支持按钮和快捷键缩放。 */
+.scribdown-image-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-image-viewer:not([open]) {
+  display: none;
+}
+
+.scribdown-image-viewer[open] {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.scribdown-image-viewer::backdrop {
+  background: color-mix(in srgb, var(--scribdown-color-text-primary) 78%, transparent);
+  backdrop-filter: blur(2px);
+}
+
+.scribdown-image-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-image-viewer__caption-group {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--scribdown-space-1);
+}
+
+.scribdown-image-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-image-viewer__hint {
+  margin: 0;
+  color: color-mix(in srgb, var(--scribdown-color-text-primary) 60%, transparent);
+  font-family: var(--scribdown-font-code);
+  font-size: 12px;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+}
+
+.scribdown-image-viewer__controls {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--scribdown-space-2);
+}
+
+.scribdown-image-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-image-viewer__button:hover {
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 78%,
+    var(--scribdown-color-mark) 22%
+  );
+}
+
+.scribdown-image-viewer__button:focus-visible {
+  outline: 2px solid var(--scribdown-color-accent);
+  outline-offset: 3px;
+}
+
+.scribdown-image-viewer__button:disabled {
+  box-shadow: none;
+  cursor: default;
+  opacity: 0.46;
+}
+
+.scribdown-image-viewer__button--close {
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 82%,
+    var(--scribdown-color-danger) 18%
+  );
+}
+
+.scribdown-image-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-image-viewer__viewport {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  /* safe center：图片尺寸 ≤ 视口时居中；溢出时自动退化为 start，避免裁掉头部不可滚动。 */
+  align-items: safe center;
+  justify-content: safe center;
+  padding: var(--scribdown-space-5);
+  overflow: auto;
+  overscroll-behavior: contain;
+  touch-action: none;
+}
+
+.scribdown-image-viewer--zoomed .scribdown-image-viewer__viewport {
+  cursor: grab;
+}
+
+.scribdown-image-viewer--zoomed.scribdown-image-viewer--dragging .scribdown-image-viewer__viewport {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.scribdown-image-viewer__image {
+  flex: 0 0 auto;
+  max-width: none;
+  max-height: none;
+  object-fit: contain;
+  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;
+  -webkit-user-drag: none;
+}
+
+.scribdown-image-viewer--dragging .scribdown-image-viewer__image {
+  pointer-events: none;
+}
+
+@media (max-width: 640px) {
+  .scribdown-image-viewer__chrome {
+    grid-template-columns: 1fr;
+    gap: var(--scribdown-space-2);
+    padding: var(--scribdown-space-3);
+  }
+
+  .scribdown-image-viewer__controls {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .scribdown-image-viewer__button {
+    width: 34px;
+    height: 34px;
+  }
+
+  .scribdown-image-viewer__hint {
+    font-size: 11px;
+    white-space: normal;
+  }
+
+  .scribdown-image-viewer__viewport {
+    padding: var(--scribdown-space-3);
+  }
+}

package/src/styles/image.css

@@ -0,0 +1,232 @@
+/* ImageRenderer：块级图片转换为 figure；边框沿用 blockquote::after 的 frame-edge 方案，
+   通过 mask + background-color 让描边色由 token 接管。 */
+.scribdown-markdown .scribdown-image-figure {
+  width: min(100%, 720px);
+  margin: 0 auto var(--scribdown-space-3);
+}
+
+.scribdown-markdown .scribdown-image-frame {
+  /* 关键步骤：本地覆盖 frame-edge-color，避免和 blockquote 的 accent 撞色。 */
+  --scribdown-frame-edge-color: var(--scribdown-color-text-secondary);
+
+  position: relative;
+  isolation: isolate;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px;
+  overflow: visible;
+  background-color: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 92%,
+    var(--scribdown-color-border) 8%
+  );
+  background-image: var(--scribdown-code-block-rect-shadow);
+  background-position: left top;
+  background-repeat: repeat;
+  background-size: auto;
+  /* 关键步骤：保留视觉为方形，仅给 box-shadow 一个手绘风格的非对称圆角。 */
+  border-radius: var(--scribdown-radius-sm);
+  box-shadow: none;
+  transition: box-shadow var(--scribdown-duration-base) var(--scribdown-easing-standard);
+}
+
+.scribdown-markdown .scribdown-image-frame:hover {
+  box-shadow: var(--scribdown-shadow-md);
+}
+
+/* 关键步骤：横/纵向 frame-edge SVG 四边平铺，描边色由 background-color 接管。 */
+.scribdown-markdown .scribdown-image-frame::after {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  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,
+    20% bottom,
+    left 40%,
+    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 .scribdown-image-frame::after {
+    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,
+      20% bottom,
+      left 40%,
+      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,
+      20% bottom,
+      left 40%,
+      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 .scribdown-image {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  background: color-mix(in srgb, var(--scribdown-color-surface) 86%, transparent);
+  border: 0;
+  box-shadow: none;
+  cursor: zoom-in;
+}
+
+.scribdown-markdown .scribdown-image:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--scribdown-color-accent) 72%, transparent);
+  outline-offset: 4px;
+}
+
+.scribdown-markdown a .scribdown-image {
+  cursor: pointer;
+}
+
+.scribdown-markdown .scribdown-image-caption {
+  margin-top: var(--scribdown-space-2);
+  color: var(--scribdown-color-text-primary);
+  font-family: var(--scribdown-font-heading);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.3;
+  text-align: center;
+}
+
+.scribdown-markdown .scribdown-image-figure + p:has(> em:only-child) {
+  width: min(100%, 720px);
+  margin: calc(0px - var(--scribdown-space-1)) auto var(--scribdown-space-3);
+  color: var(--scribdown-color-text-primary);
+  font-size: 15px;
+  line-height: 1.55;
+  text-align: left;
+}
+
+.scribdown-markdown .scribdown-image-fallback {
+  display: none;
+}
+
+.scribdown-markdown .scribdown-image-frame--failed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 144px;
+  padding: var(--scribdown-space-4);
+  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-image-frame--failed::after {
+  background-image:
+    var(--scribdown-rough-line-dash-horizontal),
+    var(--scribdown-rough-line-dash-horizontal), var(--scribdown-rough-line-dash-vertical),
+    var(--scribdown-rough-line-dash-vertical);
+  background-size:
+    64px 8px,
+    64px 8px,
+    8px 64px,
+    8px 64px;
+}
+
+.scribdown-markdown .scribdown-image-frame--failed .scribdown-image {
+  display: none;
+}
+
+.scribdown-markdown .scribdown-image-frame--failed .scribdown-image-fallback {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  max-width: 100%;
+  color: var(--scribdown-color-text-primary);
+  text-align: center;
+}
+
+.scribdown-markdown .scribdown-image-fallback-icon {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  width: 58px;
+  height: 46px;
+  margin-bottom: var(--scribdown-space-3);
+  border: 2px solid var(--scribdown-color-text-primary);
+  background:
+    linear-gradient(
+      42deg,
+      transparent 0 47%,
+      var(--scribdown-color-accent) 48% 52%,
+      transparent 53% 100%
+    ),
+    linear-gradient(
+      138deg,
+      transparent 0 47%,
+      var(--scribdown-color-accent) 48% 52%,
+      transparent 53% 100%
+    ),
+    color-mix(in srgb, var(--scribdown-color-surface) 78%, var(--scribdown-color-accent) 8%);
+  transform: rotate(-1.5deg);
+}
+
+.scribdown-markdown .scribdown-image-fallback-icon::before {
+  content: "";
+  position: absolute;
+  right: 8px;
+  top: 7px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--scribdown-color-accent);
+  border-radius: 50%;
+}
+
+.scribdown-markdown .scribdown-image-fallback-text {
+  font-family: var(--scribdown-font-heading);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.scribdown-markdown .scribdown-image-fallback-source {
+  max-width: 100%;
+  margin-top: 4px;
+  overflow-wrap: anywhere;
+  color: var(--scribdown-color-text-secondary);
+  font-family: var(--scribdown-font-code);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.scribdown-markdown :not(.scribdown-image-frame) > img {
+  max-width: 720px;
+  width: 100%;
+  height: auto;
+  background: var(--scribdown-color-surface);
+  border-radius: var(--scribdown-radius-md);
+}

package/src/styles/inline.css

@@ -0,0 +1,101 @@
+/* Delete：SVG 笔触替代浏览器默认直线，避免删除线过硬。 */
+.scribdown-markdown del,
+.scribdown-markdown s {
+  --scribdown-delete-stroke: url("../assets/delete.svg");
+
+  position: relative;
+  color: var(--scribdown-color-text-secondary);
+  text-decoration: none;
+  background-image: var(--scribdown-delete-stroke);
+  background-repeat: no-repeat;
+  background-position: 50% 58%;
+  background-size: 100% 0.95em;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+/* Delete overlay：让删除笔触压在文字上方，避免被字形遮住。 */
+.scribdown-markdown del::after,
+.scribdown-markdown s::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  left: -0.08em;
+  right: -0.08em;
+  top: 50%;
+  height: 0.95em;
+  pointer-events: none;
+  background-image: var(--scribdown-delete-stroke);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  transform: translateY(-50%);
+}
+
+/* LinkRenderer：独立 link token，区分 default / hover / visited / focus-visible */
+.scribdown-markdown a {
+  color: var(--scribdown-color-link);
+  text-decoration: none;
+  transition: opacity var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-markdown a:visited {
+  color: var(--scribdown-color-link-visited);
+}
+
+.scribdown-markdown a:hover {
+  opacity: 0.8;
+}
+
+.scribdown-markdown a:focus-visible {
+  outline: 2px solid var(--scribdown-color-link);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Kbd：手绘风键帽，圆角矩形 + 微阴影，跟随正文字号自适应。 */
+.scribdown-markdown kbd {
+  display: inline-block;
+  min-width: 1.4em;
+  padding: 1px 7px 2px;
+  margin: 0 2px;
+  vertical-align: baseline;
+  font-family: var(--scribdown-font-code);
+  font-size: 0.86em;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--scribdown-color-text-primary);
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 88%,
+    var(--scribdown-color-border) 12%
+  );
+  border: 1px solid color-mix(in srgb, var(--scribdown-color-border) 72%, transparent);
+  border-bottom-width: 2px;
+  border-radius: 5px 6px 5px 7px;
+  box-shadow:
+    inset 0 -1px 0 color-mix(in srgb, var(--scribdown-color-border) 28%, transparent),
+    1px 1px 0 color-mix(in srgb, var(--scribdown-color-border) 22%, transparent);
+  text-align: center;
+  white-space: nowrap;
+}
+
+/* 嵌套：避免链接 / mark 内部的 kbd 与父级配色冲突。 */
+.scribdown-markdown a kbd,
+.scribdown-markdown mark kbd {
+  color: inherit;
+}
+
+/* mark 高亮 */
+.scribdown-markdown mark {
+  background: linear-gradient(
+    92deg,
+    transparent 0 3%,
+    color-mix(in srgb, var(--scribdown-color-mark) 68%, transparent) 8% 90%,
+    transparent 97% 100%
+  );
+  color: var(--scribdown-color-text-primary);
+  border-radius: var(--scribdown-radius-sm);
+  padding: 0 3px;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}

package/src/styles/lists.css

@@ -0,0 +1,126 @@
+/* ListRenderer：保留有序列表语义编号，只替换无序列表的浏览器默认 bullet。 */
+.scribdown-markdown ul:not(.scribdown-toc-list) {
+  margin: 0 0 var(--scribdown-space-3);
+  padding-left: 0;
+  list-style: none;
+}
+
+.scribdown-markdown ol:not(.scribdown-toc-list) {
+  margin: 0 0 var(--scribdown-space-3);
+  padding-left: 0;
+  list-style: none;
+  /* 启用有序列表序号计数器，配合 ::before 渲染手绘字体的数字。 */
+  counter-reset: scribdown-ol-counter;
+}
+
+.scribdown-markdown li:not(.scribdown-toc-item) {
+  position: relative;
+  margin-bottom: var(--scribdown-space-1);
+}
+
+.scribdown-markdown ul:not(.scribdown-toc-list) > li:not(.scribdown-toc-item) {
+  padding-left: 30px;
+}
+
+.scribdown-markdown ol:not(.scribdown-toc-list) > li:not(.scribdown-toc-item) {
+  padding-left: 32px;
+  counter-increment: scribdown-ol-counter;
+}
+
+.scribdown-markdown ol:not(.scribdown-toc-list) > li:not(.scribdown-toc-item)::marker {
+  /* 自定义 ::before 渲染数字，隐藏浏览器默认 marker，避免数字重复。 */
+  content: none;
+}
+
+.scribdown-markdown ol:not(.scribdown-toc-list) > li:not(.scribdown-toc-item)::before {
+  content: counter(scribdown-ol-counter) ".";
+  position: absolute;
+  top: 0;
+  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-size: 22px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.2;
+  text-align: left;
+  text-shadow: 0.7px 0 color-mix(in srgb, var(--scribdown-color-warning) 24%, transparent);
+  transform: rotate(-4deg);
+}
+
+.scribdown-markdown ol:not(.scribdown-toc-list) > li:not(.scribdown-toc-item):nth-child(2n)::before {
+  transform: rotate(3deg) translateY(1px);
+}
+
+.scribdown-markdown li:not(.scribdown-toc-item) > ul,
+.scribdown-markdown li:not(.scribdown-toc-item) > ol {
+  margin-top: var(--scribdown-space-2);
+  margin-bottom: var(--scribdown-space-2);
+}
+
+.scribdown-markdown ul:not(.scribdown-toc-list) > li:not(.scribdown-toc-item)::before {
+  content: "";
+  position: absolute;
+  top: 0.72em;
+  left: 6px;
+  width: 11px;
+  height: 9px;
+  border-radius: 54% 46% 58% 42%;
+  background:
+    radial-gradient(
+      circle at 36% 34%,
+      color-mix(in srgb, var(--scribdown-color-surface) 40%, transparent) 0 1.2px,
+      transparent 1.7px
+    ),
+    var(--scribdown-color-accent);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--scribdown-color-warning) 34%, transparent);
+  transform: rotate(-8deg);
+}
+
+.scribdown-markdown ul:not(.scribdown-toc-list) > li:nth-child(2n)::before {
+  transform: rotate(7deg) translateY(1px);
+}
+
+.scribdown-markdown ul:not(.scribdown-toc-list) ul > li:not(.scribdown-toc-item)::before {
+  top: 0.78em;
+  width: 14px;
+  height: 5px;
+  border-radius: 999px;
+  transform: rotate(-3deg);
+}
+
+.scribdown-markdown .task-list-item::before {
+  content: none !important;
+}
+
+.scribdown-markdown .task-list-item input[type="checkbox"] {
+  position: absolute;
+  top: 0.58em;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  appearance: none;
+  border: 2px solid var(--scribdown-color-accent);
+  border-radius: 4px 5px 3px 6px;
+  background: color-mix(in srgb, var(--scribdown-color-surface) 78%, transparent);
+  transform: rotate(-2deg);
+}
+
+.scribdown-markdown .task-list-item input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 2px;
+  width: 11px;
+  height: 7px;
+  border-bottom: 2px solid var(--scribdown-color-warning);
+  border-left: 2px solid var(--scribdown-color-warning);
+  transform: rotate(-45deg);
+}
+
+.scribdown-markdown .task-list-item:has(input[type="checkbox"]:checked) {
+  color: var(--scribdown-color-text-secondary);
+}