refactor: 设计系统完整提取为 @stack/design-system 共享包（组件/tokens/类型唯一定义处，双端引用不再拷贝）

- 组件参数化适配双端：MemphisCard href/morph，EntryGuide 数据注入+linkChapter - RouteLine hover 跟随（站点 translateY(-3)、连线 CSS d 平滑插值、直线变斜线）随包回到 design-lab，shelf 场景接线演示 - tokens.css 显式 @source 包内源码——经 node_modules 解析时自动扫描漏类（text-mute 等静默丢失致 4% 画面偏差，已修复并验证） - E2E 新增 hover 跟随契约（静置 L 水平、hover 变斜线、双站点 -3px、卡片同步），28/28 全绿
2026-10-08 14:56:06 +08:00
1 parent c943a9e94d
commit 65df0ef1d7
@@ -6,10 +6,8 @@
 import type { CSSProperties } from 'react'
 import { Page, Section } from '../lib/ui'
 import { CHAPTERS, CONTENT } from '../lib/chapters'
-import type { ChapterId } from '../lib/types'
-import { AssignBlock } from './Ticket'
-import { BrickDots } from './MemphisCard'
-import { Mark, Ring, Tri, Wave } from './shapes'
+import type { ChapterId } from '@stack/design-system'
+import { AssignBlock, BrickDots, Mark, Ring, Tri, Wave } from '@stack/design-system'

 const ALL: ChapterId[] = [1, 2, 3, 4, 5, 6]

@@ -1,36 +0,0 @@
-/** 入口梳理 —— 读者画像推荐路径：是推荐不是强制（无锁） */
-import { CHAPTERS, PROFILES } from '../lib/chapters'
-
-export function EntryGuide() {
-  return (
-    <div className="flex flex-wrap gap-5">
-      {PROFILES.map((p) => (
-        <div key={p.name} data-comp="entry-card" className="w-[252px] rounded-xl border-2 border-ink bg-paper p-3 shadow-hard">
-          <div className="flex items-center gap-2">
-            <span
-              className="flex h-[26px] w-[26px] items-center justify-center rounded-lg border-2 border-ink text-[14px]"
-              style={{ background: CHAPTERS[p.entry].color }}
-            >
-              {p.icon}
-            </span>
-            <b className="text-[13px]">{p.name}</b>
-          </div>
-          <div className="mt-2 flex flex-wrap items-center gap-1.5">
-            {p.path.map((id, i) => (
-              <span key={id} className="flex items-center gap-1.5">
-                {i > 0 && <span className="text-[10px] text-mute">→</span>}
-                <a
-                  href={`/ch${id}.html`}
-                  className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-[10.5px] no-underline ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
-                >
-                  {id === p.entry && ['①', '②', '③'][PROFILES.indexOf(p)]} {CHAPTERS[id].title}
-                </a>
-              </span>
-            ))}
-          </div>
-          <p className="m-0 mt-2 text-[10px] leading-relaxed text-mute">{p.note}</p>
-        </div>
-      ))}
-    </div>
-  )
-}
@@ -1,137 +0,0 @@
-/** CourseCard —— 教程的入口载体（孟菲斯骨架 × 拟物纸感）
- * 卡头三件套＝靶子：▲目标 + ○预期结果(16:9 相框) + ●积木点列
- * 交互：hover/聚焦拿起（浮起+投影加深）并播放 GIF；desc ⇄ GIF 每 8000ms 翻转；
- *      hover/Tab 锁定；触屏与 prefers-reduced-motion 不翻转。 */
-import { useEffect, useRef, useState, type ReactNode } from 'react'
-import type { Chapter } from '../lib/types'
-import { Ring, Tri } from './shapes'
-
-const FLIP_MS = 8000
-
-export function BrickDots({ bricks }: { bricks: Chapter['target']['bricks'] }) {
-  return (
-    <span className="flex items-center gap-1" aria-label={`积木 ${bricks.filter((b) => b.learned).length}/${bricks.length}`}>
-      {bricks.map((b, i) => (
-        <i
-          key={i}
-          className="inline-block h-[7px] w-[7px] rounded-full border-[1.5px] border-ink"
-          style={{ background: b.learned ? 'var(--color-ink)' : '#fff' }}
-        />
-      ))}
-    </span>
-  )
-}
-
-export function EntryBadge({ n }: { n: 1 | 2 | 3 }) {
-  return (
-    <span
-      className="absolute -left-[11px] -top-[11px] z-10 flex h-6 w-6 items-center justify-center rounded-full border-2 border-paper bg-ink text-[12px] font-extrabold text-clash2a"
-      aria-label={`推荐入口 ${n}`}
-    >
-      {'①②③'[n - 1]}
-    </span>
-  )
-}
-
-export function MemphisCard({
-  chapter,
-  entry,
-  compact = false,
-  zoneText,
-}: {
-  chapter: Chapter
-  entry?: 1 | 2 | 3
-  compact?: boolean
-  /** 静置态相框文字（可含 <Mark> 荧光标记）：教程卡片的价值区用法示例 */
-  zoneText?: ReactNode
-}) {
-  const [gifOn, setGifOn] = useState(false)
-  const [locked, setLocked] = useState(false)
-  const boxRef = useRef<HTMLAnchorElement>(null)
-
-  useEffect(() => {
-    const coarse = matchMedia('(pointer: coarse)').matches
-    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
-    if (coarse || reduced) return
-    const io = new IntersectionObserver(
-      ([e]) => {
-        if (e.isIntersecting) setGifOn(true)
-        else setGifOn(false)
-      },
-      { threshold: 0.3 },
-    )
-    if (boxRef.current) io.observe(boxRef.current)
-    return () => io.disconnect()
-  }, [])
-
-  useEffect(() => {
-    if (!gifOn) return
-    const t = setInterval(() => {
-      setFlip((f) => !f)
-    }, FLIP_MS)
-    return () => clearInterval(t)
-  }, [gifOn])
-
-  const [flip, setFlip] = useState(false)
-  const showGif = gifOn && (locked ? true : flip)
-
-  return (
-    <a
-      ref={boxRef}
-      href={`/ch${chapter.id}.html`}
-      data-comp="course-card"
-      className="group relative block rounded-[14px] border-2 border-ink bg-paper p-[11px] no-underline
-                 shadow-hard transition-transform duration-150 focus-visible:outline-none
-                 hover:-translate-y-[3px] hover:shadow-hard-lift
-                 focus-visible:-translate-y-[3px] focus-visible:shadow-hard-lift"
-      onMouseEnter={() => setLocked(true)}
-      onMouseLeave={() => setLocked(false)}
-      onFocus={() => setLocked(true)}
-      onBlur={() => setLocked(false)}
-      aria-label={`${chapter.title}：${chapter.target.goal}`}
-    >
-      {entry && <EntryBadge n={entry} />}
-      {/* ○ 预期结果：16:9 相框（章节撞色只进这里） */}
-      <div
-        className="relative flex aspect-video items-center justify-center overflow-hidden rounded-lg border-[3px] border-ink"
-        style={{
-          background: chapter.color,
-          boxShadow: 'inset 0 3px 8px rgba(26,26,26,0.30), inset 0 -1px 0 rgba(255,255,255,0.55)',
-          viewTransitionName: `ch-${chapter.id}`,
-        }}
-      >
-        {showGif ? (
-          chapter.gifUrl ? (
-            <img src={chapter.gifUrl} alt={chapter.target.expectation} className="h-full w-full object-cover" />
-          ) : (
-            <span className="px-3 text-center text-[11px] font-bold leading-snug text-paper">
-              ▶ {chapter.target.expectation}
-            </span>
-          )
-        ) : flip ? (
-          <span className="px-3 text-center text-[11px] leading-snug text-ink/80 mix-blend-multiply">
-            {chapter.target.goal}
-          </span>
-        ) : zoneText ? (
-          /* 静置态（用法示例）：过程文字骑在相框里，价值区短语带荧光标记 */
-          <span className="px-3 text-center text-[11.5px] font-semibold leading-snug text-ink">{zoneText}</span>
-        ) : (
-          /* 静置态：章节 emoji 是相框的视觉主体（对齐设计稿解剖卡） */
-          <span style={{ fontSize: compact ? '28px' : '40px' }}>{chapter.emoji}</span>
-        )}
-        <span className="absolute left-1.5 top-1 text-[9px] font-bold tracking-wide text-paper">
-          预期结果{showGif ? ' · GIF' : ''}
-        </span>
-        <Ring size={16} className="absolute bottom-1.5 right-1.5" />
-      </div>
-      {/* 卡头：▲ 目标 + 标题 + ● 积木点列 */}
-      <div className="mt-2 flex items-center gap-2">
-        <Tri size={14} />
-        <b className="flex-1 text-[14px] text-[#2b1d10] [text-shadow:0_1px_1px_rgba(255,255,255,0.9)]">
-          {chapter.title}
-        </b>
-        {!compact && <BrickDots bricks={chapter.target.bricks} />}
-      </div>
-    </a>
-  )
-}
@@ -1,105 +0,0 @@
-/** RouteLine —— 关系线：线形即含义（实=先后 虚=相关 点=同族）
- * 卡片联动：hovered 节点随卡浮起 -3px——站点 translateY 平滑跟随，
- * 连线以 CSS d: path() 过渡重算（与卡片同样 150ms，不支持的浏览器瞬时跟随）
- * 拓扑：横平竖直 + R8 直角步进；并行不合并(4px)；站点 r6 半嵌卡边
- * （圆心骑左右描边，各半在卡上）；线层 z-10 置于卡之上，站点不被卡遮挡；
- * 同口多线自动聚合胶囊（线止于胶囊边界）。 */
-import type React from 'react'
-import type { ChapterId, Edge } from '../lib/types'
-
-const STATION_COLORS = ['var(--color-clash2a)', 'var(--color-clash1b)', 'var(--color-clash3a)', 'var(--color-clash1a)']
-
-export interface LaneNode {
-  id: ChapterId
-  borderLeft: number // 左描边 x（入口圆心贴这里，点半嵌）
-  right: number // 右描边 x（出口圆心贴这里，点半嵌——不接阴影）
-  y: number // 卡中线 y
-}
-
-/* 水平出发 → 双弯直角步进 → 水平到达。
- * 微高差（<8px，含 hover 微浮 3px）＝斜线直连：M L 结构恒定，
- * 静置几何上是水平线，hover 时 CSS d 平滑插值成斜线（不折弯、不扭曲）。
- * 正常步进半径自适应：垂直/水平空间不足 2r 时收缩，防两段弧交叠倒置。 */
-function stepPath(x0: number, y0: number, x1: number, y1: number, r = 8): string {
-  const dyAbs = Math.abs(y1 - y0)
-  if (dyAbs < 8) return `M ${x0} ${y0} L ${x1} ${y1}`
-  const rr = Math.max(0.5, Math.min(r, dyAbs / 2, (x1 - x0) / 3))
-  const down = y1 > y0
-  const sweep1 = down ? 1 : 0
-  const sweep2 = down ? 0 : 1
-  const cornerX = Math.max(x0 + rr, x1 - 2 * rr)
-  return `M ${x0} ${y0} H ${cornerX} A ${rr} ${rr} 0 0 ${sweep1} ${cornerX + rr} ${y0 + (down ? rr : -rr)} V ${y1 - (down ? rr : -rr)} A ${rr} ${rr} 0 0 ${sweep2} ${cornerX + 2 * rr} ${y1} H ${x1}`
-}
-
-const HOVER_LIFT = -3 // 与 MemphisCard hover:-translate-y-[3px] 一致
-
-export function RouteLine({
-  edges,
-  nodes,
-  width,
-  height,
-  hovered = null,
-}: {
-  edges: Edge[]
-  nodes: Partial<Record<ChapterId, LaneNode>>
-  width: number
-  height: number
-  /** 正在浮起的卡（章 id）——线与站点跟随 */
-  hovered?: ChapterId | null
-}) {
-  const stationColor = (i: number) => STATION_COLORS[i % STATION_COLORS.length]
-  /** 节点跟随位移：hovered 卡 -3px，其余 0 */
-  const dy = (id: ChapterId) => (id === hovered ? HOVER_LIFT : 0)
-
-  const seqEdges = edges.filter((e) => e.kind === 'seq')
-  const insByTo = new Map<ChapterId, Edge[]>()
-  seqEdges.forEach((e) => insByTo.set(e.to, [...(insByTo.get(e.to) ?? []), e]))
-  const firstIn = new Set<ChapterId>()
-  insByTo.forEach((list) => firstIn.add(list[0].to))
-
-  let si = 0
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      className="pointer-events-none absolute left-0 top-0 z-10"
-      aria-hidden
-    >
-      {edges.map((e, i) => {
-        const a = nodes[e.from]
-        const b = nodes[e.to]
-        if (!a || !b) return null
-        const d = stepPath(a.right, a.y + dy(e.from), b.borderLeft, b.y + dy(e.to))
-        const follow = { d: `path("${d}")`, transition: 'd 150ms ease' } as React.CSSProperties
-        if (e.kind === 'rel') return <path key={i} d={d} style={follow} stroke="var(--color-ink)" strokeWidth={2} fill="none" strokeDasharray="4 2" />
-        if (e.kind === 'family') return <path key={i} d={d} style={follow} stroke="var(--color-ink)" strokeWidth={2.4} fill="none" strokeDasharray="0.1 6" strokeLinecap="round" />
-        return <path key={i} d={d} style={follow} stroke="var(--color-ink)" strokeWidth={2.5} fill="none" />
-      })}
-      {seqEdges.map((e) => {
-        const a = nodes[e.from]
-        const b = nodes[e.to]
-        if (!a || !b) return null
-        const ins = insByTo.get(e.to)!
-        const capsule = ins.length > 1 && firstIn.has(e.to)
-        // 源/目标站点：圆心骑卡描边，各半在卡上；目标：单线=圆点，多线=胶囊（只画一次）
-        return (
-          <g key={`st-${e.from}-${e.to}`}>
-            <g style={{ transform: `translateY(${dy(e.from)}px)`, transition: 'transform 150ms ease' }}>
-              <circle cx={a.right} cy={a.y} r={6} fill={stationColor(si++)} stroke="var(--color-ink)" strokeWidth={2} />
-            </g>
-            {(capsule || ins.length === 1) && (
-              <g style={{ transform: `translateY(${dy(e.to)}px)`, transition: 'transform 150ms ease' }}>
-                {capsule ? (
-                  <rect x={b.borderLeft - 3} y={b.y - 10} width={6} height={20} rx={3} fill="var(--color-clash1a)" stroke="var(--color-ink)" strokeWidth={2} />
-                ) : (
-                  <circle cx={b.borderLeft} cy={b.y} r={6} fill={stationColor(si++)} stroke="var(--color-ink)" strokeWidth={2} />
-                )}
-              </g>
-            )}
-          </g>
-        )
-      })}
-    </svg>
-  )
-}
@@ -1,90 +0,0 @@
-/** 散落形状摆放——「卡片附近空当 ＋ 随机」：
- * 网格采样容器空白 → 过滤出距内容盒（[data-comp]）≤ near 的空当（不胡乱撒）→
- * 种子随机挑位（彼此保距）＋空当内随机偏移＋随机旋转。
- * 种子固定 → 每次渲染一致（视觉基线可测）；容器重排（ResizeObserver）自动重算。 */
-import { useLayoutEffect, useRef, useState, type ReactNode } from 'react'
-
-function mulberry32(seed: number) {
-  let t = seed >>> 0
-  return () => {
-    t = (t + 0x6d2b79f5) >>> 0
-    let x = Math.imul(t ^ (t >>> 15), 1 | t)
-    x = (x + Math.imul(x ^ (x >>> 7), 61 | x)) ^ x
-    return ((x ^ (x >>> 14)) >>> 0) / 4294967296
-  }
-}
-
-type Place = { x: number; y: number; rot: number }
-
-export function Scatter({
-  shapes,
-  seed = 7,
-  near = 150,  // 空当须距某内容盒 ≤ near——只散在卡片附近
-  margin = 34, // 与内容盒保持的最小间隙（≥ 最大形状半对角）
-  step = 30,   // 采样网格密度
-  minGap = 80, // 形状彼此最小间距
-}: {
-  shapes: ReactNode[]
-  seed?: number
-  near?: number
-  margin?: number
-  step?: number
-  minGap?: number
-}) {
-  const layerRef = useRef<HTMLDivElement>(null)
-  const [places, setPlaces] = useState<Place[]>([])
-
-  useLayoutEffect(() => {
-    const layer = layerRef.current
-    const host = layer?.parentElement
-    if (!layer || !host) return
-
-    const place = () => {
-      const hb = host.getBoundingClientRect()
-      const rects = [...host.querySelectorAll('[data-comp]')].map((el) => el.getBoundingClientRect())
-      if (!rects.length || !hb.width) return
-      const dist = (x: number, y: number, r: DOMRect) =>
-        Math.hypot(Math.max(r.left - x, 0, x - r.right), Math.max(r.top - y, 0, y - r.bottom))
-      const cand: { x: number; y: number }[] = []
-      for (let x = 36; x < hb.width - 36; x += step)
-        for (let y = 36; y < hb.height - 36; y += step) {
-          const px = hb.left + x
-          const py = hb.top + y
-          if (rects.every((r) => dist(px, py, r) >= margin) && rects.some((r) => dist(px, py, r) <= near))
-            cand.push({ x, y })
-        }
-      const rnd = mulberry32(seed)
-      for (let i = cand.length - 1; i > 0; i--) {
-        const j = Math.floor(rnd() * (i + 1))
-        ;[cand[i], cand[j]] = [cand[j], cand[i]]
-      }
-      const taken: Place[] = []
-      for (const c of cand) {
-        if (taken.length >= shapes.length) break
-        if (taken.some((t) => Math.hypot(t.x - c.x, t.y - c.y) < minGap)) continue
-        taken.push({ x: c.x + (rnd() - 0.5) * 14, y: c.y + (rnd() - 0.5) * 14, rot: Math.round((rnd() - 0.5) * 52) })
-      }
-      setPlaces(taken)
-    }
-
-    place()
-    const ro = new ResizeObserver(place)
-    ro.observe(host)
-    return () => ro.disconnect()
-  }, [seed, near, margin, step, minGap, shapes.length])
-
-  return (
-    <div ref={layerRef} data-scatter-layer aria-hidden className="pointer-events-none absolute inset-0">
-      {places.map((p, i) => (
-        <div
-          key={i}
-          data-scatter
-          className="absolute"
-          style={{ left: p.x, top: p.y, transform: `translate(-50%, -50%) rotate(${p.rot}deg)` }}
-        >
-          {shapes[i]}
-        </div>
-      ))}
-    </div>
-  )
-}
@@ -1,84 +0,0 @@
-/** 票券 —— 只表达完成状态：完成＝沿撕线打孔（半圆缺口），未开始＝实线无孔。
- * 外层 wrapper 出阴影（drop-shadow 跟随挖空后的轮廓，box-shadow 会被 mask 裁掉）；
- * 内层票体裁切式：头部色块无独立描边，由票体 overflow-hidden 裁出单一描边圆角。 */
-import type { Chapter } from '../lib/types'
-
-export function Ticket({ chapter, done }: { chapter: Chapter; done: boolean }) {
-  return (
-    <div data-comp="ticket" className={`w-fit drop-shadow-hard ${done ? 'tk-pk' : ''}`}>
-      <div
-        className={`relative flex w-[216px] items-stretch overflow-hidden rounded-xl border-2 border-ink bg-paper ${done ? 'ticket-pk' : ''}`}
-      >
-      {/* 头部媒体块：章节色纯填充，无独立边框（由票体裁切） */}
-      <div className="flex w-14 shrink-0 items-center justify-center text-[22px]" style={{ background: chapter.color }}>{chapter.emoji}</div>
-      <div className="flex-1 py-2 pl-2.5 pr-2">
-        <b className="text-[12.5px]">{chapter.title}</b>
-        <div className="mt-0.5 font-mono text-[8.5px] text-mute">
-          No. {String(chapter.id).padStart(3, '0')} · {done ? '已完成（打孔）' : '未开始（无孔）'}
-        </div>
-      </div>
-      <div
-        className={`flex w-[42px] items-center justify-center font-mono text-[9.5px] text-mute ${done ? 'border-l-[1.5px] border-dashed border-ink' : 'border-l-[1.5px] border-solid border-ink'}`}
-      >
-        №{String(chapter.id).padStart(2, '0')}
-      </div>
-      </div>
-      {/* 孔缘弧线：mask 只减形不补线，弧线补上挖空边缘的 ink 描边 */}
-      {done && (
-        <>
-          <i className="pk-arc pk-arc-t" aria-hidden />
-          <i className="pk-arc pk-arc-b" aria-hidden />
-        </>
-      )}
-    </div>
-  )
-}
-
-/** 指派学习块 —— 普通内容块（非票据）：＋ 位置/预期/场景三样 + 脱靶标记 */
-export function AssignBlock({
-  title,
-  pos,
-  expect,
-  scenes,
-  miss,
-}: {
-  title: string
-  pos: string
-  expect: string
-  scenes: string[]
-  miss: { how: string; looks: string }
-}) {
-  return (
-    <div data-comp="assign" className="w-[260px] rounded-xl border-2 border-ink bg-paper p-3 shadow-hard">
-      <div className="flex items-center gap-2">
-        <svg width="16" height="16" viewBox="0 0 18 18" aria-hidden>
-          <path d="M9 1 v16 M1 9 h16" stroke="var(--color-clash2b)" strokeWidth="3.5" strokeLinecap="round" />
-          <path d="M9 1 v16 M1 9 h16" stroke="var(--color-ink)" strokeWidth="1.2" />
-        </svg>
-        <b className="text-[13px]">{title}</b>
-      </div>
-      <div className="mt-1.5 space-y-0.5 text-[11px] leading-relaxed text-body">
-        <div>
-          <b>位置</b>：{pos}
-        </div>
-        <div>
-          <b>预期</b>：{expect}
-        </div>
-        <div>
-          <b>场景</b>：{scenes.join(' / ')}
-        </div>
-      </div>
-      <div className="mt-2 border-t border-dashed border-ink/20 pt-2">
-        <div className="flex items-start gap-2.5">
-          <svg width="20" height="28" viewBox="0 0 24 34" className="mt-0.5 shrink-0" aria-hidden>
-            <path d="M 12 32 L 8 27 L 16 22 L 8 17 L 16 12 L 12 7 L 14 2" fill="none" stroke="var(--color-clash1a)" strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" />
-          </svg>
-          <div>
-            <b className="text-[11.5px]">脱靶 · {miss.how}</b>
-            <p className="m-0 mt-0.5 text-[10.5px] leading-relaxed text-body">{miss.looks}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
@@ -1,82 +0,0 @@
-/** 七个语义形状——装饰即语义（取自 ai-era-tutorial 词汇表） */
-import type { CSSProperties, ReactNode } from 'react'
-
-interface ShapeProps {
-  size?: number
-  className?: string
-  style?: CSSProperties
-}
-
-/** ▲ 靶子：目标，卡头打头 */
-export const Tri = ({ size = 24, className, style }: ShapeProps) => (
-  <svg width={size} height={size * 0.92} viewBox="0 0 26 24" className={className} style={style} aria-hidden>
-    <path d="M13 2 L25 22 L1 22 Z" fill="var(--color-clash1a)" stroke="var(--color-ink)" strokeWidth="2" />
-  </svg>
-)
-
-/** ● 积木：清单点列，实心=已学 */
-export const BrickDot = ({ size = 14, on = false, className, style }: ShapeProps & { on?: boolean }) => (
-  <svg width={size} height={size} viewBox="0 0 14 14" className={className} style={style} aria-hidden>
-    <circle cx="7" cy="7" r="5" fill={on ? 'var(--color-clash2a)' : 'var(--color-paper)'} stroke="var(--color-ink)" strokeWidth="2" />
-  </svg>
-)
-
-/** ○ 预期：可核对的结果 */
-export const Ring = ({ size = 24, className, style }: ShapeProps) => (
-  <svg width={size} height={size} viewBox="0 0 26 24" className={className} style={style} aria-hidden>
-    <circle cx="13" cy="12" r="8" fill="none" stroke="var(--color-clash1b)" strokeWidth="4" />
-    <circle cx="13" cy="12" r="8" fill="none" stroke="var(--color-ink)" strokeWidth="1.5" />
-  </svg>
-)
-
-/** ～ 代理区：横波，交给 agent */
-export const Wave = ({ size = 40, className, style }: ShapeProps) => (
-  <svg width={size} height={size * 0.5} viewBox="0 0 40 20" className={className} style={style} aria-hidden>
-    <path d="M2 12 q5 -16 10 0 t10 0 t10 0" fill="none" stroke="var(--color-clash3b)" strokeWidth="3" strokeLinecap="round" />
-  </svg>
-)
-
-/** 荧光标记 价值区：色块骑在文字背后——是标记不是形状，
- * 无描边、微斜、两端比字宽（荧光笔划过的手感），过程就地写清 */
-export const Mark = ({ children, className }: { children: ReactNode; className?: string }) => (
-  <mark
-    className={`-rotate-1 rounded-[3px] bg-clash2a px-[4px] py-[1px] font-bold text-ink [box-decoration-break:clone] ${className ?? ''}`}
-  >
-    {children}
-  </mark>
-)
-
-/** ⌇ 脱靶：竖立颤抖——图形入口，读者追随图形进入阅读 */
-export const Tremble = ({ size = 24, className, style }: ShapeProps) => (
-  <svg width={size} height={size * 1.4} viewBox="0 0 24 34" className={className} style={style} aria-hidden>
-    <path
-      d="M 12 32 L 8 27 L 16 22 L 8 17 L 16 12 L 12 7 L 14 2"
-      fill="none"
-      stroke="var(--color-clash1a)"
-      strokeWidth="3.5"
-      strokeLinejoin="round"
-      strokeLinecap="round"
-    />
-  </svg>
-)
-
-/** ＋ 指派学习：位置/预期/场景三样 */
-export const Cross = ({ size = 18, className, style }: ShapeProps) => (
-  <svg width={size} height={size} viewBox="0 0 18 18" className={className} style={style} aria-hidden>
-    <path d="M9 1 v16 M1 9 h16" stroke="var(--color-clash2b)" strokeWidth="4" strokeLinecap="round" />
-    <path d="M9 1 v16 M1 9 h16" stroke="var(--color-ink)" strokeWidth="1.2" />
-  </svg>
-)
-
-/** 脱靶标记：图形 + 文字，无容器（图形是第一视觉） */
-export function MissMark({ how, looks }: { how: string; looks: string }) {
-  return (
-    <div className="flex items-start gap-3">
-      <Tremble size={22} className="mt-0.5 shrink-0" />
-      <div>
-        <b className="text-[13px]">脱靶 · {how}</b>
-        <p className="m-0 mt-0.5 text-[12px] leading-relaxed text-body">{looks}</p>
-      </div>
-    </div>
-  )
-}