sparkdesign 0.4.3 → 0.4.5

package/dist/stateDiagram-FKZM4ZOC-ZVsJlaHJ.js

@@ -0,0 +1,263 @@
+import { s as G, a as W, S as N } from "./chunk-DI55MBZ5-NCQTvayw.js";
+import { _ as f, c as t, d as H, l as S, e as P, k as z, R as _, S as U, O as C, u as F } from "./mermaid.core-gFR0XUlD.js";
+import { G as O } from "./graph-DPcK91G3.js";
+import { l as J } from "./layout-CdLdvj1j.js";
+var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit).attr("cy", t().state.padding + t().state.sizeUnit), "drawStartState"), D = /* @__PURE__ */ f((e) => e.append("line").style("stroke", "grey").style("stroke-dasharray", "3").attr("x1", t().state.textHeight).attr("class", "divider").attr("x2", t().state.textHeight * 2).attr("y1", 0).attr("y2", 0), "drawDivider"), Y = /* @__PURE__ */ f((e, i) => {
+  const d = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 2 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.id), c = d.node().getBBox();
+  return e.insert("rect", ":first-child").attr("x", t().state.padding).attr("y", t().state.padding).attr("width", c.width + 2 * t().state.padding).attr("height", c.height + 2 * t().state.padding).attr("rx", t().state.radius), d;
+}, "drawSimpleState"), I = /* @__PURE__ */ f((e, i) => {
+  const d = /* @__PURE__ */ f(function(g, m, B) {
+    const E = g.append("tspan").attr("x", 2 * t().state.padding).text(m);
+    B || E.attr("dy", t().state.textHeight);
+  }, "addTspan"), n = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 1.3 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.descriptions[0]).node().getBBox(), l = n.height, x = e.append("text").attr("x", t().state.padding).attr(
+    "y",
+    l + t().state.padding * 0.4 + t().state.dividerMargin + t().state.textHeight
+  ).attr("class", "state-description");
+  let a = !0, s = !0;
+  i.descriptions.forEach(function(g) {
+    a || (d(x, g, s), s = !1), a = !1;
+  });
+  const w = e.append("line").attr("x1", t().state.padding).attr("y1", t().state.padding + l + t().state.dividerMargin / 2).attr("y2", t().state.padding + l + t().state.dividerMargin / 2).attr("class", "descr-divider"), p = x.node().getBBox(), o = Math.max(p.width, n.width);
+  return w.attr("x2", o + 3 * t().state.padding), e.insert("rect", ":first-child").attr("x", t().state.padding).attr("y", t().state.padding).attr("width", o + 2 * t().state.padding).attr("height", p.height + l + 2 * t().state.padding).attr("rx", t().state.radius), e;
+}, "drawDescrState"), $ = /* @__PURE__ */ f((e, i, d) => {
+  const c = t().state.padding, n = 2 * t().state.padding, l = e.node().getBBox(), x = l.width, a = l.x, s = e.append("text").attr("x", 0).attr("y", t().state.titleShift).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.id), p = s.node().getBBox().width + n;
+  let o = Math.max(p, x);
+  o === x && (o = o + n);
+  let g;
+  const m = e.node().getBBox();
+  i.doc, g = a - c, p > x && (g = (x - o) / 2 + c), Math.abs(a - m.x) < c && p > x && (g = a - (p - x) / 2);
+  const B = 1 - t().state.textHeight;
+  return e.insert("rect", ":first-child").attr("x", g).attr("y", B).attr("class", d ? "alt-composit" : "composit").attr("width", o).attr(
+    "height",
+    m.height + t().state.textHeight + t().state.titleShift + 1
+  ).attr("rx", "0"), s.attr("x", g + c), p <= x && s.attr("x", a + (o - n) / 2 - p / 2 + c), e.insert("rect", ":first-child").attr("x", g).attr(
+    "y",
+    t().state.titleShift - t().state.textHeight - t().state.padding
+  ).attr("width", o).attr("height", t().state.textHeight * 3).attr("rx", t().state.radius), e.insert("rect", ":first-child").attr("x", g).attr(
+    "y",
+    t().state.titleShift - t().state.textHeight - t().state.padding
+  ).attr("width", o).attr("height", m.height + 3 + 2 * t().state.textHeight).attr("rx", t().state.radius), e;
+}, "addTitleAndBox"), q = /* @__PURE__ */ f((e) => (e.append("circle").attr("class", "end-state-outer").attr("r", t().state.sizeUnit + t().state.miniPadding).attr(
+  "cx",
+  t().state.padding + t().state.sizeUnit + t().state.miniPadding
+).attr(
+  "cy",
+  t().state.padding + t().state.sizeUnit + t().state.miniPadding
+), e.append("circle").attr("class", "end-state-inner").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit + 2).attr("cy", t().state.padding + t().state.sizeUnit + 2)), "drawEndState"), Z = /* @__PURE__ */ f((e, i) => {
+  let d = t().state.forkWidth, c = t().state.forkHeight;
+  if (i.parentId) {
+    let n = d;
+    d = c, c = n;
+  }
+  return e.append("rect").style("stroke", "black").style("fill", "black").attr("width", d).attr("height", c).attr("x", t().state.padding).attr("y", t().state.padding);
+}, "drawForkJoinState"), j = /* @__PURE__ */ f((e, i, d, c) => {
+  let n = 0;
+  const l = c.append("text");
+  l.style("text-anchor", "start"), l.attr("class", "noteText");
+  let x = e.replace(/\r\n/g, "<br/>");
+  x = x.replace(/\n/g, "<br/>");
+  const a = x.split(z.lineBreakRegex);
+  let s = 1.25 * t().state.noteMargin;
+  for (const w of a) {
+    const p = w.trim();
+    if (p.length > 0) {
+      const o = l.append("tspan");
+      if (o.text(p), s === 0) {
+        const g = o.node().getBBox();
+        s += g.height;
+      }
+      n += s, o.attr("x", i + t().state.noteMargin), o.attr("y", d + n + 1.25 * t().state.noteMargin);
+    }
+  }
+  return { textWidth: l.node().getBBox().width, textHeight: n };
+}, "_drawLongText"), K = /* @__PURE__ */ f((e, i) => {
+  i.attr("class", "state-note");
+  const d = i.append("rect").attr("x", 0).attr("y", t().state.padding), c = i.append("g"), { textWidth: n, textHeight: l } = j(e, 0, 0, c);
+  return d.attr("height", l + 2 * t().state.noteMargin), d.attr("width", n + t().state.noteMargin * 2), d;
+}, "drawNote"), L = /* @__PURE__ */ f(function(e, i) {
+  const d = i.id, c = {
+    id: d,
+    label: i.id,
+    width: 0,
+    height: 0
+  }, n = e.append("g").attr("id", d).attr("class", "stateGroup");
+  i.type === "start" && X(n), i.type === "end" && q(n), (i.type === "fork" || i.type === "join") && Z(n, i), i.type === "note" && K(i.note.text, n), i.type === "divider" && D(n), i.type === "default" && i.descriptions.length === 0 && Y(n, i), i.type === "default" && i.descriptions.length > 0 && I(n, i);
+  const l = n.node().getBBox();
+  return c.width = l.width + 2 * t().state.padding, c.height = l.height + 2 * t().state.padding, c;
+}, "drawState"), R = 0, Q = /* @__PURE__ */ f(function(e, i, d) {
+  const c = /* @__PURE__ */ f(function(s) {
+    switch (s) {
+      case N.relationType.AGGREGATION:
+        return "aggregation";
+      case N.relationType.EXTENSION:
+        return "extension";
+      case N.relationType.COMPOSITION:
+        return "composition";
+      case N.relationType.DEPENDENCY:
+        return "dependency";
+    }
+  }, "getRelationType");
+  i.points = i.points.filter((s) => !Number.isNaN(s.y));
+  const n = i.points, l = _().x(function(s) {
+    return s.x;
+  }).y(function(s) {
+    return s.y;
+  }).curve(U), x = e.append("path").attr("d", l(n)).attr("id", "edge" + R).attr("class", "transition");
+  let a = "";
+  if (t().state.arrowMarkerAbsolute && (a = C(!0)), x.attr(
+    "marker-end",
+    "url(" + a + "#" + c(N.relationType.DEPENDENCY) + "End)"
+  ), d.title !== void 0) {
+    const s = e.append("g").attr("class", "stateLabel"), { x: w, y: p } = F.calcLabelPosition(i.points), o = z.getRows(d.title);
+    let g = 0;
+    const m = [];
+    let B = 0, E = 0;
+    for (let u = 0; u <= o.length; u++) {
+      const h = s.append("text").attr("text-anchor", "middle").text(o[u]).attr("x", w).attr("y", p + g), y = h.node().getBBox();
+      B = Math.max(B, y.width), E = Math.min(E, y.x), S.info(y.x, w, p + g), g === 0 && (g = h.node().getBBox().height, S.info("Title height", g, p)), m.push(h);
+    }
+    let k = g * o.length;
+    if (o.length > 1) {
+      const u = (o.length - 1) * g * 0.5;
+      m.forEach((h, y) => h.attr("y", p + y * g - u)), k = g * o.length;
+    }
+    const r = s.node().getBBox();
+    s.insert("rect", ":first-child").attr("class", "box").attr("x", w - B / 2 - t().state.padding / 2).attr("y", p - k / 2 - t().state.padding / 2 - 3.5).attr("width", B + t().state.padding).attr("height", k + t().state.padding), S.info(r);
+  }
+  R++;
+}, "drawEdge"), b, T = {}, V = /* @__PURE__ */ f(function() {
+}, "setConf"), tt = /* @__PURE__ */ f(function(e) {
+  e.append("defs").append("marker").attr("id", "dependencyEnd").attr("refX", 19).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 19,7 L9,13 L14,7 L9,1 Z");
+}, "insertMarkers"), et = /* @__PURE__ */ f(function(e, i, d, c) {
+  b = t().state;
+  const n = t().securityLevel;
+  let l;
+  n === "sandbox" && (l = H("#i" + i));
+  const x = n === "sandbox" ? H(l.nodes()[0].contentDocument.body) : H("body"), a = n === "sandbox" ? l.nodes()[0].contentDocument : document;
+  S.debug("Rendering diagram " + e);
+  const s = x.select(`[id='${i}']`);
+  tt(s);
+  const w = c.db.getRootDoc();
+  A(w, s, void 0, !1, x, a, c);
+  const p = b.padding, o = s.node().getBBox(), g = o.width + p * 2, m = o.height + p * 2, B = g * 1.75;
+  P(s, m, B, b.useMaxWidth), s.attr(
+    "viewBox",
+    `${o.x - b.padding}  ${o.y - b.padding} ` + g + " " + m
+  );
+}, "draw"), at = /* @__PURE__ */ f((e) => e ? e.length * b.fontSizeFactor : 1, "getLabelWidth"), A = /* @__PURE__ */ f((e, i, d, c, n, l, x) => {
+  const a = new O({
+    compound: !0,
+    multigraph: !0
+  });
+  let s, w = !0;
+  for (s = 0; s < e.length; s++)
+    if (e[s].stmt === "relation") {
+      w = !1;
+      break;
+    }
+  d ? a.setGraph({
+    rankdir: "LR",
+    multigraph: !0,
+    compound: !0,
+    // acyclicer: 'greedy',
+    ranker: "tight-tree",
+    ranksep: w ? 1 : b.edgeLengthFactor,
+    nodeSep: w ? 1 : 50,
+    isMultiGraph: !0
+    // ranksep: 5,
+    // nodesep: 1
+  }) : a.setGraph({
+    rankdir: "TB",
+    multigraph: !0,
+    compound: !0,
+    // isCompound: true,
+    // acyclicer: 'greedy',
+    // ranker: 'longest-path'
+    ranksep: w ? 1 : b.edgeLengthFactor,
+    nodeSep: w ? 1 : 50,
+    ranker: "tight-tree",
+    // ranker: 'network-simplex'
+    isMultiGraph: !0
+  }), a.setDefaultEdgeLabel(function() {
+    return {};
+  });
+  const p = x.db.getStates(), o = x.db.getRelations(), g = Object.keys(p);
+  for (const r of g) {
+    const u = p[r];
+    d && (u.parentId = d);
+    let h;
+    if (u.doc) {
+      let y = i.append("g").attr("id", u.id).attr("class", "stateGroup");
+      h = A(u.doc, y, u.id, !c, n, l, x);
+      {
+        y = $(y, u, c);
+        let v = y.node().getBBox();
+        h.width = v.width, h.height = v.height + b.padding / 2, T[u.id] = { y: b.compositTitleSize };
+      }
+    } else
+      h = L(i, u, a);
+    if (u.note) {
+      const y = {
+        descriptions: [],
+        id: u.id + "-note",
+        note: u.note,
+        type: "note"
+      }, v = L(i, y, a);
+      u.note.position === "left of" ? (a.setNode(h.id + "-note", v), a.setNode(h.id, h)) : (a.setNode(h.id, h), a.setNode(h.id + "-note", v)), a.setParent(h.id, h.id + "-group"), a.setParent(h.id + "-note", h.id + "-group");
+    } else
+      a.setNode(h.id, h);
+  }
+  S.debug("Count=", a.nodeCount(), a);
+  let m = 0;
+  o.forEach(function(r) {
+    m++, S.debug("Setting edge", r), a.setEdge(
+      r.id1,
+      r.id2,
+      {
+        relation: r,
+        width: at(r.title),
+        height: b.labelHeight * z.getRows(r.title).length,
+        labelpos: "c"
+      },
+      "id" + m
+    );
+  }), J(a), S.debug("Graph after layout", a.nodes());
+  const B = i.node();
+  a.nodes().forEach(function(r) {
+    r !== void 0 && a.node(r) !== void 0 ? (S.warn("Node " + r + ": " + JSON.stringify(a.node(r))), n.select("#" + B.id + " #" + r).attr(
+      "transform",
+      "translate(" + (a.node(r).x - a.node(r).width / 2) + "," + (a.node(r).y + (T[r] ? T[r].y : 0) - a.node(r).height / 2) + " )"
+    ), n.select("#" + B.id + " #" + r).attr("data-x-shift", a.node(r).x - a.node(r).width / 2), l.querySelectorAll("#" + B.id + " #" + r + " .divider").forEach((h) => {
+      const y = h.parentElement;
+      let v = 0, M = 0;
+      y && (y.parentElement && (v = y.parentElement.getBBox().width), M = parseInt(y.getAttribute("data-x-shift"), 10), Number.isNaN(M) && (M = 0)), h.setAttribute("x1", 0 - M + 8), h.setAttribute("x2", v - M - 8);
+    })) : S.debug("No Node " + r + ": " + JSON.stringify(a.node(r)));
+  });
+  let E = B.getBBox();
+  a.edges().forEach(function(r) {
+    r !== void 0 && a.edge(r) !== void 0 && (S.debug("Edge " + r.v + " -> " + r.w + ": " + JSON.stringify(a.edge(r))), Q(i, a.edge(r), a.edge(r).relation));
+  }), E = B.getBBox();
+  const k = {
+    id: d || "root",
+    label: d || "root",
+    width: 0,
+    height: 0
+  };
+  return k.width = E.width + 2 * b.padding, k.height = E.height + 2 * b.padding, S.debug("Doc rendered", k, a), k;
+}, "renderDoc"), it = {
+  setConf: V,
+  draw: et
+}, ot = {
+  parser: W,
+  get db() {
+    return new N(1);
+  },
+  renderer: it,
+  styles: G,
+  init: /* @__PURE__ */ f((e) => {
+    e.state || (e.state = {}), e.state.arrowMarkerAbsolute = e.arrowMarkerAbsolute;
+  }, "init")
+};
+export {
+  ot as diagram
+};

package/dist/stateDiagram-v2-4FDKWEC3-CB_nTHcE.js

@@ -0,0 +1,16 @@
+import { s as a, b as t, a as r, S as s } from "./chunk-DI55MBZ5-NCQTvayw.js";
+import { _ as i } from "./mermaid.core-gFR0XUlD.js";
+var _ = {
+  parser: r,
+  get db() {
+    return new s(2);
+  },
+  renderer: t,
+  styles: a,
+  init: /* @__PURE__ */ i((e) => {
+    e.state || (e.state = {}), e.state.arrowMarkerAbsolute = e.arrowMarkerAbsolute;
+  }, "init")
+};
+export {
+  _ as diagram
+};

package/dist/stateDiagram-v2-4FDKWEC3-Xkx17v6T.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./chunk-DI55MBZ5-D1YJMs6x.cjs"),t=require("./mermaid.core-DBwAx_jp.cjs");var a={parser:r.stateDiagram_default,get db(){return new r.StateDB(2)},renderer:r.stateRenderer_v3_unified_default,styles:r.styles_default,init:t.__name(e=>{e.state||(e.state={}),e.state.arrowMarkerAbsolute=e.arrowMarkerAbsolute},"init")};exports.diagram=a;

package/dist/theme-base.css

@@ -0,0 +1,270 @@
+/* ============================================
+ * [POS]: src/tokens/theme-base.css - Tailwind v4 @theme 映射 + 动画 + 公共样式
+ * [OUTPUT]: CSS 变量映射到 Tailwind 工具类
+ *
+ * 此文件定义了 Token → Tailwind 的映射契约，不包含具体颜色值。
+ * 颜色值由 themes/*.css 中的 [data-theme="xxx"] 块定义。
+ *
+ * 用户自定义主题时只需：
+ * 1. 引入此文件（定义映射）
+ * 2. 引入自己的主题 CSS（覆盖 --token-color-* 变量）
+ * ============================================ */
+
+/* ============================================
+   Tailwind v4 @theme 映射
+   ============================================ */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, [data-theme="dark-parchment"], [data-theme="dark-parchment"] *));
+
+/* font-size / radius / spacing 随 data-style 变化，需用 @theme inline 让工具类直接引用运行时变量 */
+@theme inline {
+  --text-xs: var(--font-size-xs);
+  --text-xs--line-height: var(--font-size-xs--line-height);
+  --text-sm: var(--font-size-sm);
+  --text-sm--line-height: var(--font-size-sm--line-height);
+  --text-base: var(--font-size-base);
+  --text-base--line-height: var(--font-size-base--line-height);
+  --text-lg: var(--font-size-lg);
+  --text-lg--line-height: var(--font-size-lg--line-height);
+  --text-xl: var(--font-size-xl);
+  --text-xl--line-height: var(--font-size-xl--line-height);
+  --text-2xl: var(--font-size-2xl);
+  --text-2xl--line-height: var(--font-size-2xl--line-height);
+  --text-3xl: var(--font-size-3xl);
+  --text-3xl--line-height: var(--font-size-3xl--line-height);
+  --text-4xl: var(--font-size-4xl);
+  --text-4xl--line-height: var(--font-size-4xl--line-height);
+  --text-5xl: var(--font-size-5xl);
+  --text-5xl--line-height: var(--font-size-5xl--line-height);
+  --text-6xl: var(--font-size-6xl);
+  --text-6xl--line-height: var(--font-size-6xl--line-height);
+  --radius: var(--radius-DEFAULT);
+  --radius-none: var(--radius-none);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+  --radius-full: var(--radius-full);
+  --spacing-0: var(--spacing-0);
+  --spacing-px: var(--spacing-px);
+  --spacing-0\.5: var(--spacing-0\.5);
+  --spacing-1: var(--spacing-1);
+  --spacing-1\.5: var(--spacing-1\.5);
+  --spacing-2: var(--spacing-2);
+  --spacing-2\.5: var(--spacing-2\.5);
+  --spacing-3: var(--spacing-3);
+  --spacing-3\.5: var(--spacing-3\.5);
+  --spacing-4: var(--spacing-4);
+  --spacing-5: var(--spacing-5);
+  --spacing-6: var(--spacing-6);
+  --spacing-7: var(--spacing-7);
+  --spacing-8: var(--spacing-8);
+  --spacing-9: var(--spacing-9);
+  --spacing-10: var(--spacing-10);
+  --spacing-11: var(--spacing-11);
+  --spacing-12: var(--spacing-12);
+  --spacing-14: var(--spacing-14);
+  --spacing-16: var(--spacing-16);
+  --spacing-20: var(--spacing-20);
+  --spacing-24: var(--spacing-24);
+  --spacing-28: var(--spacing-28);
+  --spacing-32: var(--spacing-32);
+  --spacing-36: var(--spacing-36);
+  --spacing-40: var(--spacing-40);
+  --spacing-44: var(--spacing-44);
+  --spacing-48: var(--spacing-48);
+  --spacing-52: var(--spacing-52);
+  --spacing-56: var(--spacing-56);
+  --spacing-60: var(--spacing-60);
+  --spacing-64: var(--spacing-64);
+  --spacing-72: var(--spacing-72);
+  --spacing-80: var(--spacing-80);
+  --spacing-96: var(--spacing-96);
+}
+
+@theme {
+  /* Font */
+  --font-display: 'Inter var', system-ui, sans-serif;
+  /* Primary */
+  --color-primary: var(--token-color-primary);
+  --color-primary-hover: var(--token-color-primary-hover);
+  --color-primary-active: var(--token-color-primary-active);
+  --color-primary-bg: var(--token-color-primary-bg);
+  --color-primary-bg-hover: var(--token-color-primary-bg-hover);
+  --color-primary-border: var(--token-color-primary-border);
+  --color-primary-border-hover: var(--token-color-primary-border-hover);
+  --color-primary-text: var(--token-color-primary-text);
+  --color-primary-text-hover: var(--token-color-primary-text-hover);
+  --color-primary-text-active: var(--token-color-primary-text-active);
+  --color-text-on-primary: var(--token-color-text-on-primary);
+
+  /* Text */
+  --color-text: var(--token-color-text);
+  --color-text-secondary: var(--token-color-text-secondary);
+  --color-text-tertiary: var(--token-color-text-tertiary);
+  --color-text-quaternary: var(--token-color-text-quaternary);
+  --color-text-base: var(--token-color-text-base);
+
+  /* Border */
+  --color-border: var(--token-color-border);
+  /* Select 等 - 映射到现有 token */
+  --color-input: var(--token-color-border-tertiary);
+  --color-ring: var(--token-color-primary-border);
+  --color-popover: var(--token-color-bg-container);
+  --color-popover-foreground: var(--token-color-text);
+  --color-accent: var(--token-color-fill-secondary);
+  --color-accent-foreground: var(--token-color-text);
+  --color-muted: var(--token-color-fill-tertiary);
+  --color-muted-foreground: var(--token-color-text-secondary);
+  --color-background: var(--token-color-bg-base);
+  --color-border-secondary: var(--token-color-border-secondary);
+  --color-border-tertiary: var(--token-color-border-tertiary);
+
+  /* Fill */
+  --color-fill: var(--token-color-fill);
+  --color-fill-secondary: var(--token-color-fill-secondary);
+  --color-fill-tertiary: var(--token-color-fill-tertiary);
+  --color-fill-quaternary: var(--token-color-fill-quaternary);
+  --color-fill-disable: var(--token-color-fill-disable);
+
+  /* Background */
+  --color-bg-container: var(--token-color-bg-container);
+  --color-bg-elevated: var(--token-color-bg-elevated);
+  --color-bg-layout: var(--token-color-bg-layout);
+  --color-bg-spotlight: var(--token-color-bg-spotlight);
+  --color-bg-mask: var(--token-color-bg-mask);
+  --color-mask-shimmer-weak: var(--token-color-mask-shimmer-weak);
+  --color-mask-shimmer-strong: var(--token-color-mask-shimmer-strong);
+  --color-mask-shimmer-full: var(--token-color-mask-shimmer-full);
+  --color-bg-base: var(--token-color-bg-base);
+  --color-bg-highlight: var(--token-color-bg-highlight);
+  --color-bg-highlight-hover: var(--token-color-bg-highlight-hover);
+
+  /* Shadow（1～4 级，与 primary/secondary/tertiary/quaternary 一致） */
+  --color-shadow-primary: var(--token-color-shadow-primary);
+  --color-shadow-secondary: var(--token-color-shadow-secondary);
+  --color-shadow-tertiary: var(--token-color-shadow-tertiary);
+  --color-shadow-quaternary: var(--token-color-shadow-quaternary);
+
+  /* Semantic */
+  --color-link: var(--token-color-link);
+  --color-error: var(--token-color-error);
+  --color-error-hover: var(--token-color-error-hover);
+  --color-error-bg: var(--token-color-error-bg);
+  --color-error-bg-hover: var(--token-color-error-bg-hover);
+  --color-error-border: var(--token-color-error-border);
+  --color-info: var(--token-color-info);
+  --color-info-hover: var(--token-color-info-hover);
+  --color-info-bg: var(--token-color-info-bg);
+  --color-info-bg-hover: var(--token-color-info-bg-hover);
+  --color-info-border: var(--token-color-info-border);
+  --color-success: var(--token-color-success);
+  --color-success-hover: var(--token-color-success-hover);
+  --color-success-bg: var(--token-color-success-bg);
+  --color-success-bg-hover: var(--token-color-success-bg-hover);
+  --color-success-border: var(--token-color-success-border);
+  --color-warning: var(--token-color-warning);
+  --color-warning-hover: var(--token-color-warning-hover);
+  --color-warning-bg: var(--token-color-warning-bg);
+  --color-warning-bg-hover: var(--token-color-warning-bg-hover);
+  --color-warning-border: var(--token-color-warning-border);
+
+  /* Accent */
+  --color-pink: var(--token-color-pink);
+  --color-pink-bg: var(--token-color-pink-bg);
+  --color-pink-bg-hover: var(--token-color-pink-bg-hover);
+  --color-purple: var(--token-color-purple);
+  --color-purple-bg: var(--token-color-purple-bg);
+  --color-purple-bg-hover: var(--token-color-purple-bg-hover);
+  --color-yellow: var(--token-color-yellow);
+  --color-yellow-bg: var(--token-color-yellow-bg);
+  --color-yellow-bg-hover: var(--token-color-yellow-bg-hover);
+  --color-orange: var(--token-color-orange);
+  --color-orange-bg: var(--token-color-orange-bg);
+  --color-orange-bg-hover: var(--token-color-orange-bg-hover);
+  --color-teal: var(--token-color-teal);
+  --color-teal-bg: var(--token-color-teal-bg);
+  --color-teal-bg-hover: var(--token-color-teal-bg-hover);
+  --color-blue: var(--token-color-blue);
+  --color-blue-bg: var(--token-color-blue-bg);
+  --color-blue-bg-hover: var(--token-color-blue-bg-hover);
+  --color-mauve: var(--token-color-mauve);
+  --color-mauve-bg: var(--token-color-mauve-bg);
+  --color-mauve-bg-hover: var(--token-color-mauve-bg-hover);
+  --color-slate: var(--token-color-slate);
+  --color-slate-bg: var(--token-color-slate-bg);
+  --color-slate-bg-hover: var(--token-color-slate-bg-hover);
+  --color-lavender: var(--token-color-lavender);
+  --color-lavender-bg: var(--token-color-lavender-bg);
+  --color-lavender-bg-hover: var(--token-color-lavender-bg-hover);
+  --color-sage: var(--token-color-sage);
+  --color-sage-bg: var(--token-color-sage-bg);
+  --color-sage-bg-hover: var(--token-color-sage-bg-hover);
+
+  /* Diff */
+  --color-diff-insert: var(--token-color-diff-insert);
+  --color-diff-insert-bg: var(--token-color-diff-insert-bg);
+  --color-diff-remove: var(--token-color-diff-remove);
+  --color-diff-remove-bg: var(--token-color-diff-remove-bg);
+
+  /* Accordion 展开/收起动画（Radix 提供 --radix-accordion-content-height） */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-accordion-right: accordion-right 0.2s ease-out;
+  --animate-accordion-left: accordion-left 0.2s ease-out;
+}
+
+/* 行高随 data-style 变化，与 text-xs/text-sm/text-base 等配套使用，避免固定 leading-6 等 */
+.leading-xs { line-height: var(--font-size-xs--line-height); }
+.leading-sm { line-height: var(--font-size-sm--line-height); }
+.leading-base { line-height: var(--font-size-base--line-height); }
+.leading-lg { line-height: var(--font-size-lg--line-height); }
+.leading-xl { line-height: var(--font-size-xl--line-height); }
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+@keyframes accordion-right {
+  from {
+    width: 0;
+  }
+  to {
+    width: var(--radix-accordion-content-width);
+  }
+}
+@keyframes accordion-left {
+  from {
+    width: var(--radix-accordion-content-width);
+  }
+  to {
+    width: 0;
+  }
+}
+
+/* ============================================
+   Seti 文件图标字体（与 QodeChatPanel 一致；需将 qoder-seti.woff 置于 public/ 或根路径）
+   ============================================ */
+@font-face {
+  font-family: 'Seti';
+  src: url('/qoder-seti.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+.font-seti {
+  font-family: 'Seti', sans-serif;
+}

package/dist/theme.css

@@ -0,0 +1,17 @@
+/* ============================================
+ * [DEPRECATED] 此文件已被拆分，保留以向后兼容。
+ * 请使用新的引入方式：@import "./tokens/index.css";
+ *
+ * 新的文件结构：
+ * - theme-base.css: @theme 映射 + 动画 + 公共样式
+ * - themes/light.css: 亮色主题
+ * - themes/dark.css: 暗色主题
+ * - themes/light-parchment.css: 羊皮纸亮色
+ * - themes/dark-parchment.css: 羊皮纸暗色
+ * ============================================ */
+
+@import "./theme-base.css";
+@import "./themes/light-qoder.css";
+@import "./themes/dark-qoder.css";
+@import "./themes/light-parchment.css";
+@import "./themes/dark-parchment.css";