From 9db359b0a5de1be667be590fabbc97d07c03ac5b Mon Sep 17 00:00:00 2001
From: RandomYang <decoderyang@gmail.com>
Date: Wed, 25 Feb 2026 13:38:57 +0800
Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=E6=8C=89=20SVG=20=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E6=8B=86=E5=88=86=E7=8B=AC=E7=AB=8B=E5=9B=BE=E5=B1=82?=
 =?UTF-8?q?=E5=B9=B6=E6=94=AF=E6=8C=81=20foreignObject=20=E6=96=87?=
 =?UTF-8?q?=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 svg2psd.mjs | 473 +++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 336 insertions(+), 137 deletions(-)

diff --git a/svg2psd.mjs b/svg2psd.mjs
index 3347eaf..e88f6b9 100644
--- a/svg2psd.mjs
+++ b/svg2psd.mjs
@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 /**
- * SVG to PSD converter - preserves text layers as editable text in PSD.
+ * SVG to PSD converter - each SVG group becomes a separate PSD layer,
+ * text elements (<text> and <foreignObject>) become editable text layers.
  *
  * Usage: node svg2psd.mjs <input.svg> [-o output.psd] [-s scale]
  */
@@ -10,14 +11,13 @@ import path from "path";
 import { execSync } from "child_process";
 import { createCanvas, loadImage } from "canvas";
 
-// ag-psd needs a global canvas implementation for Node.js
 import "ag-psd/initialize-canvas.js";
 import { writePsdBuffer } from "ag-psd";
 
-import { DOMParser } from "xmldom";
+import { DOMParser, XMLSerializer } from "xmldom";
 
 // ---------------------------------------------------------------------------
-// SVG parsing helpers
+// SVG parsing
 // ---------------------------------------------------------------------------
 
 function parseSvg(filePath) {
@@ -29,111 +29,232 @@ function parseSvg(filePath) {
   return { doc, svg, width: w, height: h, xml };
 }
 
-/** Recursively collect <text> elements with their computed attributes. */
-function collectTextElements(node, inherited = {}) {
-  const results = [];
-  const NS = "http://www.w3.org/2000/svg";
+// ---------------------------------------------------------------------------
+// Analyse each top-level <g>: determine if it's text or graphic
+// ---------------------------------------------------------------------------
+
+/**
+ * Walk the SVG and return an ordered list of "layer descriptors":
+ *   { type: "text", text, x, y, fontFamily, fontSize, fontWeight, fill, textAnchor }
+ *   { type: "graphic", groupIndex, name }
+ */
+function analyseTopLevelGroups(svg) {
+  const layers = [];
+  const children = svg.childNodes || [];
 
-  const children = node.childNodes || [];
   for (let i = 0; i < children.length; i++) {
     const el = children[i];
-    if (el.nodeType !== 1) continue; // element nodes only
-
-    const tag = el.localName || el.nodeName;
-
-    if (tag === "text") {
-      const info = extractTextInfo(el, inherited);
-      if (info) results.push(info);
-    } else if (tag === "g" || tag === "svg") {
-      // Inherit group-level attrs
-      const groupAttrs = { ...inherited };
-      if (el.getAttribute("font-family"))
-        groupAttrs.fontFamily = el.getAttribute("font-family");
-      if (el.getAttribute("font-size"))
-        groupAttrs.fontSize = parseFloat(el.getAttribute("font-size"));
-      if (el.getAttribute("fill")) groupAttrs.fill = el.getAttribute("fill");
-      results.push(...collectTextElements(el, groupAttrs));
+    if (el.nodeType !== 1) continue;
+    const tag = localName(el);
+
+    // Skip <defs>, <style>
+    if (tag === "defs" || tag === "style") continue;
+
+    if (tag === "g") {
+      // Check what's inside
+      const inner = elementChildren(el);
+      const textInfo = extractTextFromGroup(el);
+      const hasGraphics = inner.some(
+        (c) => ["rect", "path", "circle", "ellipse", "polygon", "polyline", "line", "image", "use"].includes(localName(c))
+      );
+
+      if (textInfo && !hasGraphics) {
+        // Pure text group
+        layers.push({ type: "text", domIndex: i, ...textInfo });
+      } else if (textInfo && hasGraphics) {
+        // Mixed: graphic layer + text layer
+        layers.push({ type: "graphic", domIndex: i, name: guessGroupName(el, layers.length) });
+        layers.push({ type: "text", domIndex: i, ...textInfo });
+      } else {
+        layers.push({ type: "graphic", domIndex: i, name: guessGroupName(el, layers.length) });
+      }
+    } else if (tag === "text") {
+      const info = extractTextInfo(el, {});
+      if (info) layers.push({ type: "text", domIndex: i, ...info });
+    } else if (["rect", "path", "circle", "ellipse", "polygon", "polyline", "line", "image", "use"].includes(tag)) {
+      layers.push({ type: "graphic", domIndex: i, name: guessElementName(el, layers.length) });
     }
   }
-  return results;
+  return layers;
+}
+
+function elementChildren(node) {
+  const result = [];
+  const children = node.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    if (children[i].nodeType === 1) result.push(children[i]);
+  }
+  return result;
+}
+
+function localName(el) {
+  return (el.localName || el.nodeName || "").replace(/^.*:/, "");
+}
+
+/** Try to extract text from a group (supports <text>, <foreignObject>, nested <g>). */
+function extractTextFromGroup(groupEl) {
+  // Direct <text> child
+  const textEl = findDescendant(groupEl, "text");
+  if (textEl) return extractTextInfo(textEl, {});
+
+  // <foreignObject> with HTML text content (tldraw style)
+  const fo = findDescendant(groupEl, "foreignObject");
+  if (fo) return extractForeignObjectText(fo, groupEl);
+
+  return null;
+}
+
+function findDescendant(node, tagName) {
+  const children = node.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType !== 1) continue;
+    if (localName(c) === tagName) return c;
+    const found = findDescendant(c, tagName);
+    if (found) return found;
+  }
+  return null;
+}
+
+/** Extract text info from a <foreignObject> element. */
+function extractForeignObjectText(foEl, groupEl) {
+  const raw = getAllTextContent(foEl).trim();
+  if (!raw) return null;
+
+  const foX = parseFloat(foEl.getAttribute("x") || "0");
+  const foY = parseFloat(foEl.getAttribute("y") || "0");
+
+  // Get group transform to compute absolute position
+  const transform = groupEl.getAttribute("transform") || "";
+  const { tx, ty } = parseTranslate(transform);
+
+  // Try to extract style from embedded HTML
+  const styleInfo = extractForeignObjectStyle(foEl);
+
+  return {
+    text: raw,
+    x: foX + tx,
+    y: foY + ty + (styleInfo.fontSize || 24), // offset by font size (foreignObject y is top, PSD text y is baseline)
+    fontFamily: styleInfo.fontFamily || "Inter",
+    fontSize: styleInfo.fontSize || 24,
+    fontWeight: styleInfo.fontWeight || "normal",
+    fill: styleInfo.color || "#000000",
+    textAnchor: "start",
+  };
+}
+
+function extractForeignObjectStyle(foEl) {
+  const result = {};
+  // Walk all elements looking for style attributes or class-based hints
+  walkElements(foEl, (el) => {
+    const style = el.getAttribute && el.getAttribute("style");
+    if (style) {
+      const map = parseStyleAttr(style);
+      if (map["font-family"]) result.fontFamily = cleanFontFamily(map["font-family"]);
+      if (map["font-size"]) result.fontSize = parseFloat(map["font-size"]);
+      if (map["font-weight"]) result.fontWeight = map["font-weight"];
+      if (map["color"]) result.color = map["color"];
+    }
+    // Direct attributes
+    const ff = el.getAttribute && el.getAttribute("font-family");
+    if (ff) result.fontFamily = cleanFontFamily(ff);
+    const fs = el.getAttribute && el.getAttribute("font-size");
+    if (fs) result.fontSize = parseFloat(fs);
+  });
+  return result;
+}
+
+function walkElements(node, fn) {
+  if (node.nodeType === 1) fn(node);
+  const children = node.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    walkElements(children[i], fn);
+  }
+}
+
+function parseTranslate(transform) {
+  // matrix(a, b, c, d, tx, ty)
+  const mm = transform.match(/matrix\(\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^)]+)\)/);
+  if (mm) return { tx: parseFloat(mm[5]), ty: parseFloat(mm[6]) };
+  // translate(tx, ty)
+  const tm = transform.match(/translate\(\s*([^,)]+)(?:,\s*([^)]+))?\)/);
+  if (tm) return { tx: parseFloat(tm[1]), ty: parseFloat(tm[2] || "0") };
+  return { tx: 0, ty: 0 };
 }
 
 function extractTextInfo(textEl, inherited) {
   const x = parseFloat(textEl.getAttribute("x") || "0");
   const y = parseFloat(textEl.getAttribute("y") || "0");
-  const raw = getTextContent(textEl);
+  const raw = getAllTextContent(textEl);
   if (!raw.trim()) return null;
 
-  // Style from element or CSS style attribute
   const style = textEl.getAttribute("style") || "";
   const styleMap = parseStyleAttr(style);
 
-  const fontFamily =
-    textEl.getAttribute("font-family") ||
-    styleMap["font-family"] ||
-    inherited.fontFamily ||
-    "Arial";
-  const fontSize = parseFloat(
-    textEl.getAttribute("font-size") ||
-      styleMap["font-size"] ||
-      inherited.fontSize ||
-      "24"
-  );
-  const fontWeight =
-    textEl.getAttribute("font-weight") ||
-    styleMap["font-weight"] ||
-    "normal";
-  const fill =
-    textEl.getAttribute("fill") ||
-    styleMap["fill"] ||
-    inherited.fill ||
-    "#000000";
-  const textAnchor =
-    textEl.getAttribute("text-anchor") ||
-    styleMap["text-anchor"] ||
-    "start";
-
   return {
-    text: raw,
+    text: raw.trim(),
     x,
     y,
-    fontFamily: cleanFontFamily(fontFamily),
-    fontSize,
-    fontWeight,
-    fill,
-    textAnchor,
+    fontFamily: cleanFontFamily(textEl.getAttribute("font-family") || styleMap["font-family"] || inherited.fontFamily || "Arial"),
+    fontSize: parseFloat(textEl.getAttribute("font-size") || styleMap["font-size"] || inherited.fontSize || "24"),
+    fontWeight: textEl.getAttribute("font-weight") || styleMap["font-weight"] || "normal",
+    fill: textEl.getAttribute("fill") || styleMap["fill"] || inherited.fill || "#000000",
+    textAnchor: textEl.getAttribute("text-anchor") || styleMap["text-anchor"] || "start",
   };
 }
 
-function getTextContent(el) {
+function getAllTextContent(el) {
   let text = "";
   const children = el.childNodes || [];
   for (let i = 0; i < children.length; i++) {
     const c = children[i];
-    if (c.nodeType === 3) {
-      // text node
+    if (c.nodeType === 3 || c.nodeType === 4) {
       text += c.nodeValue;
     } else if (c.nodeType === 1) {
-      // child element (tspan etc.)
-      text += getTextContent(c);
+      text += getAllTextContent(c);
     }
   }
   return text;
 }
 
+function guessGroupName(el, index) {
+  const id = el.getAttribute("id");
+  if (id) return id;
+  // Check first child
+  const first = elementChildren(el)[0];
+  if (first) {
+    const tag = localName(first);
+    const fill = first.getAttribute("fill") || "";
+    if (tag === "rect") return `Rect_${index}`;
+    if (tag === "image" || tag === "use") return `Image_${index}`;
+    if (tag === "path") return `Path_${index}`;
+    return `${tag}_${index}`;
+  }
+  return `Layer_${index}`;
+}
+
+function guessElementName(el, index) {
+  const id = el.getAttribute("id");
+  if (id) return id;
+  return `${localName(el)}_${index}`;
+}
+
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+
 function cleanFontFamily(ff) {
-  // Remove quotes, take first family
-  return ff
-    .split(",")[0]
-    .trim()
-    .replace(/['"]/g, "");
+  return ff.split(",")[0].trim().replace(/['"]/g, "");
 }
 
 function parseStyleAttr(style) {
   const map = {};
   if (!style) return map;
   style.split(";").forEach((decl) => {
-    const [k, v] = decl.split(":").map((s) => s.trim());
+    const idx = decl.indexOf(":");
+    if (idx === -1) return;
+    const k = decl.slice(0, idx).trim();
+    const v = decl.slice(idx + 1).trim();
     if (k && v) map[k] = v;
   });
   return map;
@@ -144,32 +265,31 @@ function parseColor(fill) {
   if (fill.startsWith("#")) {
     let hex = fill.slice(1);
     if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-    return {
-      r: parseInt(hex.slice(0, 2), 16),
-      g: parseInt(hex.slice(2, 4), 16),
-      b: parseInt(hex.slice(4, 6), 16),
-    };
+    return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16) };
+  }
+  const m = fill.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/);
+  if (m) {
+    let r = parseFloat(m[1]), g = parseFloat(m[2]), b = parseFloat(m[3]);
+    // Values <= 1 might be 0-1 range, but rgba(204,204,204,1) is 0-255
+    if (r > 1 || g > 1 || b > 1) return { r: Math.round(r), g: Math.round(g), b: Math.round(b) };
+    return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
   }
-  const m = fill.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
-  if (m) return { r: +m[1], g: +m[2], b: +m[3] };
-  // Named colors - fallback
   const named = { white: { r: 255, g: 255, b: 255 }, black: { r: 0, g: 0, b: 0 }, red: { r: 255, g: 0, b: 0 }, blue: { r: 0, g: 0, b: 255 }, green: { r: 0, g: 128, b: 0 } };
   return named[fill.toLowerCase()] || { r: 0, g: 0, b: 0 };
 }
 
-/** Map common font families to PostScript names for Photoshop. */
 function toPostScriptName(family, weight) {
   const bold = weight === "bold" || parseInt(weight) >= 700;
   const map = {
     Arial: bold ? "Arial-BoldMT" : "ArialMT",
-    "Helvetica": bold ? "Helvetica-Bold" : "Helvetica",
+    Helvetica: bold ? "Helvetica-Bold" : "Helvetica",
     "Helvetica Neue": bold ? "HelveticaNeue-Bold" : "HelveticaNeue",
+    Inter: bold ? "Inter-Bold" : "Inter",
     Georgia: bold ? "Georgia-Bold" : "Georgia",
     "Times New Roman": bold ? "TimesNewRomanPS-BoldMT" : "TimesNewRomanPSMT",
     "Courier New": bold ? "CourierNewPS-BoldMT" : "CourierNewPSMT",
     Verdana: bold ? "Verdana-Bold" : "Verdana",
   };
-  // Try direct match or return as-is
   return map[family] || (bold ? family + "-Bold" : family);
 }
 
@@ -180,14 +300,68 @@ function justificationFromAnchor(anchor) {
 }
 
 // ---------------------------------------------------------------------------
-// Render the full SVG (or SVG-without-text) to a canvas for pixel layers
+// SVG rendering: render individual groups to canvas
 // ---------------------------------------------------------------------------
 
+/**
+ * Build a standalone SVG string that renders only the element at childIndex.
+ * Preserves <defs> and <style> from the original SVG.
+ */
+function buildSingleElementSvg(svg, childIndex, serializer) {
+  const doc = svg.ownerDocument;
+  const clone = svg.cloneNode(false); // shallow clone <svg> with attrs
+
+  // Copy <defs> and <style> children
+  const children = svg.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType !== 1) continue;
+    const tag = localName(c);
+    if (tag === "defs" || tag === "style") {
+      clone.appendChild(c.cloneNode(true));
+    }
+  }
+
+  // Copy only the target element
+  let idx = 0;
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType !== 1) continue;
+    const tag = localName(c);
+    if (tag === "defs" || tag === "style") continue;
+    if (i === childIndex) {
+      // For groups containing foreignObject (text), strip the foreignObject
+      // so we only get the graphic portion
+      const cloned = c.cloneNode(true);
+      removeForeignObjects(cloned);
+      clone.appendChild(cloned);
+      break;
+    }
+  }
+
+  return '<?xml version="1.0" encoding="UTF-8"?>\n' + serializer.serializeToString(clone);
+}
+
+function removeForeignObjects(node) {
+  const toRemove = [];
+  const children = node.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType === 1) {
+      if (localName(c) === "foreignObject") {
+        toRemove.push(c);
+      } else {
+        removeForeignObjects(c);
+      }
+    }
+  }
+  toRemove.forEach((c) => node.removeChild(c));
+}
+
 async function renderSvgToCanvas(svgXml, width, height, scale) {
   const w = Math.round(width * scale);
   const h = Math.round(height * scale);
-  // Write temp SVG, convert to PNG via cairosvg (best quality), load as canvas
-  const tmpSvg = path.join("/tmp", `_svg2psd_${Date.now()}.svg`);
+  const tmpSvg = path.join("/tmp", `_svg2psd_${Date.now()}_${Math.random().toString(36).slice(2, 8)}.svg`);
   const tmpPng = tmpSvg.replace(".svg", ".png");
   fs.writeFileSync(tmpSvg, svgXml);
   try {
@@ -211,10 +385,15 @@ cairosvg.svg2png(url='${tmpSvg}', write_to='${tmpPng}', output_width=${w}, outpu
   }
 }
 
-/** Remove all <text> elements from SVG XML string, return modified XML. */
-function removeSvgTextElements(xml) {
-  // Simple regex approach: remove <text ...>...</text>
-  return xml.replace(/<text[\s\S]*?<\/text>/gi, "");
+/** Check if a canvas is completely transparent. */
+function isCanvasEmpty(canvas) {
+  const ctx = canvas.getContext("2d");
+  const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+  // Check alpha channel (every 4th byte)
+  for (let i = 3; i < data.length; i += 4) {
+    if (data[i] > 0) return false;
+  }
+  return true;
 }
 
 // ---------------------------------------------------------------------------
@@ -222,60 +401,80 @@ function removeSvgTextElements(xml) {
 // ---------------------------------------------------------------------------
 
 async function svgToPsd(inputPath, outputPath, scale = 1) {
-  const { svg, width, height, xml } = parseSvg(inputPath);
+  const { svg, width, height } = parseSvg(inputPath);
   const psdW = Math.round(width * scale);
   const psdH = Math.round(height * scale);
-
-  // Collect text elements
-  const texts = collectTextElements(svg);
-  console.log(
-    `解析: ${inputPath} (${width}x${height}), ${texts.length} 个文字图层`
-  );
-
-  const children = [];
-
-  // 1) Render everything except text as a pixel layer (background)
-  const bgXml = removeSvgTextElements(xml);
-  const bgCanvas = await renderSvgToCanvas(bgXml, width, height, scale);
-  children.push({
-    name: "Background",
-    canvas: bgCanvas,
-  });
-  console.log("  图层: Background (pixel)");
-
-  // 2) Create editable text layers
-  for (let i = 0; i < texts.length; i++) {
-    const t = texts[i];
-    const psName = toPostScriptName(t.fontFamily, t.fontWeight);
-    const color = parseColor(t.fill);
-    const scaledSize = t.fontSize * scale;
-
-    children.push({
-      name: `Text: ${t.text.slice(0, 30)}`,
-      text: {
-        text: t.text,
-        transform: [1, 0, 0, 1, t.x * scale, t.y * scale],
-        antiAlias: "smooth",
-        style: {
-          font: { name: psName },
-          fontSize: scaledSize,
-          fillColor: color,
-          fauxBold: t.fontWeight === "bold" || parseInt(t.fontWeight) >= 700,
-        },
-        paragraphStyle: {
-          justification: justificationFromAnchor(t.textAnchor),
+  const serializer = new XMLSerializer();
+
+  // Analyse structure
+  const layerDescs = analyseTopLevelGroups(svg);
+  const graphicLayers = layerDescs.filter((l) => l.type === "graphic");
+  const textLayers = layerDescs.filter((l) => l.type === "text");
+
+  console.log(`解析: ${inputPath} (${Math.round(width)}x${Math.round(height)}), ${graphicLayers.length} 个图形 + ${textLayers.length} 个文字`);
+
+  const psdChildren = [];
+
+  // Render each graphic group as a separate pixel layer
+  for (const desc of layerDescs) {
+    if (desc.type === "graphic") {
+      const svgStr = buildSingleElementSvg(svg, desc.domIndex, serializer);
+      try {
+        const canvas = await renderSvgToCanvas(svgStr, width, height, scale);
+        if (isCanvasEmpty(canvas)) {
+          console.log(`  跳过: ${desc.name} (空白)`);
+          continue;
+        }
+        psdChildren.push({ name: desc.name, canvas });
+        console.log(`  图层: ${desc.name} (pixel)`);
+      } catch (e) {
+        console.error(`  警告: ${desc.name} 渲染失败 - ${e.message}`);
+      }
+    } else if (desc.type === "text") {
+      // Adjust position: SVG viewBox might have an offset
+      const viewBox = svg.getAttribute("viewBox");
+      let vbX = 0, vbY = 0;
+      if (viewBox) {
+        const parts = viewBox.split(/[\s,]+/).map(Number);
+        vbX = parts[0] || 0;
+        vbY = parts[1] || 0;
+      }
+
+      const psName = toPostScriptName(desc.fontFamily, desc.fontWeight);
+      const color = parseColor(desc.fill);
+      const scaledSize = desc.fontSize * scale;
+
+      // Convert from viewBox coords to pixel coords
+      const px = (desc.x - vbX) * scale;
+      const py = (desc.y - vbY) * scale;
+
+      psdChildren.push({
+        name: `Text: ${desc.text.slice(0, 30)}`,
+        text: {
+          text: desc.text,
+          transform: [1, 0, 0, 1, px, py],
+          antiAlias: "smooth",
+          style: {
+            font: { name: psName },
+            fontSize: scaledSize,
+            fillColor: color,
+            fauxBold: desc.fontWeight === "bold" || parseInt(desc.fontWeight) >= 700,
+          },
+          paragraphStyle: {
+            justification: justificationFromAnchor(desc.textAnchor),
+          },
         },
-      },
-    });
-    console.log(`  图层: "${t.text.slice(0, 40)}" (text, ${psName} ${scaledSize}px)`);
+      });
+      console.log(`  图层: "${desc.text.slice(0, 40)}" (text, ${psName} ${scaledSize}px)`);
+    }
   }
 
-  const psd = {
-    width: psdW,
-    height: psdH,
-    children,
-  };
+  if (psdChildren.length === 0) {
+    console.error("错误: 没有可用图层");
+    return;
+  }
 
+  const psd = { width: psdW, height: psdH, children: psdChildren };
   const buffer = writePsdBuffer(psd, {
     invalidateTextLayers: true,
     generateThumbnail: true,
@@ -285,7 +484,7 @@ async function svgToPsd(inputPath, outputPath, scale = 1) {
     outputPath = inputPath.replace(/\.svg$/i, ".psd");
   }
   fs.writeFileSync(outputPath, buffer);
-  console.log(`完成: ${outputPath} (${psdW}x${psdH}, ${children.length} 个图层)`);
+  console.log(`完成: ${outputPath} (${psdW}x${psdH}, ${psdChildren.length} 个图层)`);
 }
 
 // ---------------------------------------------------------------------------

From 0ff832311014fffa31561373121b33b18e50cf6c Mon Sep 17 00:00:00 2001
From: RandomYang <decoderyang@gmail.com>
Date: Wed, 25 Feb 2026 14:26:53 +0800
Subject: [PATCH 2/7] =?UTF-8?q?refactor:=20=E7=94=A8=20resvg-js=20?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=B8=BA=E7=BA=AF=20Node=20=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=EF=BC=8C=E6=94=AF=E6=8C=81=E9=80=92=E5=BD=92=E5=9B=BE?=
 =?UTF-8?q?=E5=B1=82=E6=A0=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 package-lock.json             | 612 +++++++++++-----------------------
 package.json                  |  15 +-
 requirements.txt              |   4 -
 src/converter.mjs             | 168 ++++++++++
 src/index.mjs                 |  59 ++++
 src/psd/builder.mjs           | 161 +++++++++
 src/psd/effects.mjs           |  46 +++
 src/psd/text-layer.mjs        | 101 ++++++
 src/render/batch-renderer.mjs |  50 +++
 src/render/renderer.mjs       | 146 ++++++++
 src/svg/parser.mjs            |  58 ++++
 src/svg/style-resolver.mjs    | 110 ++++++
 src/svg/text-extractor.mjs    | 209 ++++++++++++
 src/svg/transforms.mjs        | 123 +++++++
 src/svg/walker.mjs            | 232 +++++++++++++
 src/utils/color.mjs           | 142 ++++++++
 src/utils/font.mjs            |  66 ++++
 src/utils/validation.mjs      |  43 +++
 svg2psd.py                    | 204 ------------
 19 files changed, 1922 insertions(+), 627 deletions(-)
 delete mode 100644 requirements.txt
 create mode 100644 src/converter.mjs
 create mode 100644 src/index.mjs
 create mode 100644 src/psd/builder.mjs
 create mode 100644 src/psd/effects.mjs
 create mode 100644 src/psd/text-layer.mjs
 create mode 100644 src/render/batch-renderer.mjs
 create mode 100644 src/render/renderer.mjs
 create mode 100644 src/svg/parser.mjs
 create mode 100644 src/svg/style-resolver.mjs
 create mode 100644 src/svg/text-extractor.mjs
 create mode 100644 src/svg/transforms.mjs
 create mode 100644 src/svg/walker.mjs
 create mode 100644 src/utils/color.mjs
 create mode 100644 src/utils/font.mjs
 create mode 100644 src/utils/validation.mjs
 delete mode 100644 svg2psd.py

diff --git a/package-lock.json b/package-lock.json
index 1d8ac9f..195e46e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,379 +9,249 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "ag-psd": "^30.1.0",
-        "canvas": "^3.2.1",
-        "xmldom": "^0.6.0"
+        "@resvg/resvg-js": "^2.6.2",
+        "@xmldom/xmldom": "^0.8.11",
+        "ag-psd": "^30.1.0"
       }
     },
-    "node_modules/ag-psd": {
-      "version": "30.1.0",
-      "resolved": "https://registry.npmjs.org/ag-psd/-/ag-psd-30.1.0.tgz",
-      "integrity": "sha512-1ce6o84aC+oVyl83A35HHUniGjwA3piHmGem3J2odBOFRq5p7i4htaco94vePLfOcingZu4fsyospJLwPagkhg==",
-      "license": "MIT",
-      "dependencies": {
-        "base64-js": "1.5.1",
-        "pako": "2.1.0"
+    "node_modules/@resvg/resvg-js": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js/-/resvg-js-2.6.2.tgz",
+      "integrity": "sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==",
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@resvg/resvg-js-android-arm-eabi": "2.6.2",
+        "@resvg/resvg-js-android-arm64": "2.6.2",
+        "@resvg/resvg-js-darwin-arm64": "2.6.2",
+        "@resvg/resvg-js-darwin-x64": "2.6.2",
+        "@resvg/resvg-js-linux-arm-gnueabihf": "2.6.2",
+        "@resvg/resvg-js-linux-arm64-gnu": "2.6.2",
+        "@resvg/resvg-js-linux-arm64-musl": "2.6.2",
+        "@resvg/resvg-js-linux-x64-gnu": "2.6.2",
+        "@resvg/resvg-js-linux-x64-musl": "2.6.2",
+        "@resvg/resvg-js-win32-arm64-msvc": "2.6.2",
+        "@resvg/resvg-js-win32-ia32-msvc": "2.6.2",
+        "@resvg/resvg-js-win32-x64-msvc": "2.6.2"
       }
     },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
+    "node_modules/@resvg/resvg-js-android-arm-eabi": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm-eabi/-/resvg-js-android-arm-eabi-2.6.2.tgz",
+      "integrity": "sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==",
+      "cpu": [
+        "arm"
       ],
-      "license": "MIT"
-    },
-    "node_modules/bl": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
-      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-      "license": "MIT",
-      "dependencies": {
-        "buffer": "^5.5.0",
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.4.0"
-      }
-    },
-    "node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
       ],
-      "license": "MIT",
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/canvas": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/canvas/-/canvas-3.2.1.tgz",
-      "integrity": "sha512-ej1sPFR5+0YWtaVp6S1N1FVz69TQCqmrkGeRvQxZeAB1nAIcjNTHVwrZtYtWFFBmQsF40/uDLehsW5KuYC99mg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "node-addon-api": "^7.0.0",
-        "prebuild-install": "^7.1.3"
-      },
+    "node_modules/@resvg/resvg-js-android-arm64": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm64/-/resvg-js-android-arm64-2.6.2.tgz",
+      "integrity": "sha512-VcOKezEhm2VqzXpcIJoITuvUS/fcjIw5NA/w3tjzWyzmvoCdd+QXIqy3FBGulWdClvp4g+IfUemigrkLThSjAQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": "^18.12.0 || >= 20.9.0"
+        "node": ">= 10"
       }
     },
-    "node_modules/chownr": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "license": "ISC"
-    },
-    "node_modules/decompress-response": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-      "license": "MIT",
-      "dependencies": {
-        "mimic-response": "^3.1.0"
-      },
+    "node_modules/@resvg/resvg-js-darwin-arm64": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-arm64/-/resvg-js-darwin-arm64-2.6.2.tgz",
+      "integrity": "sha512-nmok2LnAd6nLUKI16aEB9ydMC6Lidiiq2m1nEBDR1LaaP7FGs4AJ90qDraxX+CWlVuRlvNjyYJTNv8qFjtL9+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">= 10"
       }
     },
-    "node_modules/deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "license": "MIT",
+    "node_modules/@resvg/resvg-js-darwin-x64": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-x64/-/resvg-js-darwin-x64-2.6.2.tgz",
+      "integrity": "sha512-GInyZLjgWDfsVT6+SHxQVRwNzV0AuA1uqGsOAW+0th56J7Nh6bHHKXHBWzUrihxMetcFDmQMAX1tZ1fZDYSRsw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=4.0.0"
+        "node": ">= 10"
       }
     },
-    "node_modules/detect-libc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
-      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "license": "Apache-2.0",
+    "node_modules/@resvg/resvg-js-linux-arm-gnueabihf": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm-gnueabihf/-/resvg-js-linux-arm-gnueabihf-2.6.2.tgz",
+      "integrity": "sha512-YIV3u/R9zJbpqTTNwTZM5/ocWetDKGsro0SWp70eGEM9eV2MerWyBRZnQIgzU3YBnSBQ1RcxRZvY/UxwESfZIw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=8"
+        "node": ">= 10"
       }
     },
-    "node_modules/end-of-stream": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
-      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
-      "license": "MIT",
-      "dependencies": {
-        "once": "^1.4.0"
+    "node_modules/@resvg/resvg-js-linux-arm64-gnu": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-gnu/-/resvg-js-linux-arm64-gnu-2.6.2.tgz",
+      "integrity": "sha512-zc2BlJSim7YR4FZDQ8OUoJg5holYzdiYMeobb9pJuGDidGL9KZUv7SbiD4E8oZogtYY42UZEap7dqkkYuA91pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/expand-template": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
-      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
-      "license": "(MIT OR WTFPL)",
+    "node_modules/@resvg/resvg-js-linux-arm64-musl": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-musl/-/resvg-js-linux-arm64-musl-2.6.2.tgz",
+      "integrity": "sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6"
+        "node": ">= 10"
       }
     },
-    "node_modules/fs-constants": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "license": "MIT"
-    },
-    "node_modules/github-from-package": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
-      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
-      "license": "MIT"
-    },
-    "node_modules/ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
+    "node_modules/@resvg/resvg-js-linux-x64-gnu": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-gnu/-/resvg-js-linux-x64-gnu-2.6.2.tgz",
+      "integrity": "sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
       ],
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
-    "node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "license": "ISC"
-    },
-    "node_modules/mimic-response": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-      "license": "MIT",
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">= 10"
       }
     },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+    "node_modules/@resvg/resvg-js-linux-x64-musl": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-musl/-/resvg-js-linux-x64-musl-2.6.2.tgz",
+      "integrity": "sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/mkdirp-classic": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
-      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
-      "license": "MIT"
-    },
-    "node_modules/napi-build-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
-      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
-      "license": "MIT"
-    },
-    "node_modules/node-abi": {
-      "version": "3.87.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.87.0.tgz",
-      "integrity": "sha512-+CGM1L1CgmtheLcBuleyYOn7NWPVu0s0EJH2C4puxgEZb9h8QpR9G2dBfZJOAUhi7VQxuBPMd0hiISWcTyiYyQ==",
-      "license": "MIT",
-      "dependencies": {
-        "semver": "^7.3.5"
-      },
+    "node_modules/@resvg/resvg-js-win32-arm64-msvc": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-arm64-msvc/-/resvg-js-win32-arm64-msvc-2.6.2.tgz",
+      "integrity": "sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=10"
+        "node": ">= 10"
       }
     },
-    "node_modules/node-addon-api": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
-      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "license": "MIT"
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
+    "node_modules/@resvg/resvg-js-win32-ia32-msvc": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-ia32-msvc/-/resvg-js-win32-ia32-msvc-2.6.2.tgz",
+      "integrity": "sha512-har4aPAlvjnLcil40AC77YDIk6loMawuJwFINEM7n0pZviwMkMvjb2W5ZirsNOZY4aDbo5tLx0wNMREp5Brk+w==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/pako": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
-      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
-      "license": "(MIT AND Zlib)"
-    },
-    "node_modules/prebuild-install": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
-      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
-      "deprecated": "No longer maintained. Please contact the author of the relevant native addon; alternatives are available.",
-      "license": "MIT",
-      "dependencies": {
-        "detect-libc": "^2.0.0",
-        "expand-template": "^2.0.3",
-        "github-from-package": "0.0.0",
-        "minimist": "^1.2.3",
-        "mkdirp-classic": "^0.5.3",
-        "napi-build-utils": "^2.0.0",
-        "node-abi": "^3.3.0",
-        "pump": "^3.0.0",
-        "rc": "^1.2.7",
-        "simple-get": "^4.0.0",
-        "tar-fs": "^2.0.0",
-        "tunnel-agent": "^0.6.0"
-      },
-      "bin": {
-        "prebuild-install": "bin.js"
-      },
+    "node_modules/@resvg/resvg-js-win32-x64-msvc": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-x64-msvc/-/resvg-js-win32-x64-msvc-2.6.2.tgz",
+      "integrity": "sha512-ZXtYhtUr5SSaBrUDq7DiyjOFJqBVL/dOBN7N/qmi/pO0IgiWW/f/ue3nbvu9joWE5aAKDoIzy/CxsY0suwGosQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=10"
+        "node": ">= 10"
       }
     },
-    "node_modules/pump": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
-      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.11",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
+      "integrity": "sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==",
       "license": "MIT",
-      "dependencies": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
-    "node_modules/rc": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
-      "dependencies": {
-        "deep-extend": "^0.6.0",
-        "ini": "~1.3.0",
-        "minimist": "^1.2.0",
-        "strip-json-comments": "~2.0.1"
-      },
-      "bin": {
-        "rc": "cli.js"
+      "engines": {
+        "node": ">=10.0.0"
       }
     },
-    "node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/ag-psd": {
+      "version": "30.1.0",
+      "resolved": "https://registry.npmjs.org/ag-psd/-/ag-psd-30.1.0.tgz",
+      "integrity": "sha512-1ce6o84aC+oVyl83A35HHUniGjwA3piHmGem3J2odBOFRq5p7i4htaco94vePLfOcingZu4fsyospJLwPagkhg==",
       "license": "MIT",
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
+        "base64-js": "1.5.1",
+        "pako": "2.1.0"
       }
     },
-    "node_modules/simple-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
-      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/simple-get": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
-      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
       "funding": [
         {
           "type": "github",
@@ -396,91 +266,13 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT",
-      "dependencies": {
-        "decompress-response": "^6.0.0",
-        "once": "^1.3.1",
-        "simple-concat": "^1.0.0"
-      }
-    },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
-    "node_modules/strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tar-fs": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.4.tgz",
-      "integrity": "sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "chownr": "^1.1.1",
-        "mkdirp-classic": "^0.5.2",
-        "pump": "^3.0.0",
-        "tar-stream": "^2.1.4"
-      }
-    },
-    "node_modules/tar-stream": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "bl": "^4.0.3",
-        "end-of-stream": "^1.4.1",
-        "fs-constants": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^3.1.1"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "license": "ISC"
-    },
-    "node_modules/xmldom": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.6.0.tgz",
-      "integrity": "sha512-iAcin401y58LckRZ0TkI4k0VSM1Qg0KGSc3i8rU+xrxe19A/BN1zHyVSJY7uoutVlaTSzYyk/v5AmkewAP7jtg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      }
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
     }
   }
 }
diff --git a/package.json b/package.json
index e6d31f6..8f356d0 100644
--- a/package.json
+++ b/package.json
@@ -2,17 +2,14 @@
   "name": "svg2psd",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "main": "src/index.mjs",
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "node src/index.mjs"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs",
   "dependencies": {
-    "ag-psd": "^30.1.0",
-    "canvas": "^3.2.1",
-    "xmldom": "^0.6.0"
+    "@resvg/resvg-js": "^2.6.2",
+    "@xmldom/xmldom": "^0.8.11",
+    "ag-psd": "^30.1.0"
   }
 }
diff --git a/requirements.txt b/requirements.txt
deleted file mode 100644
index e5d4c87..0000000
--- a/requirements.txt
+++ /dev/null
@@ -1,4 +0,0 @@
-cairosvg
-Pillow
-numpy
-pytoshop
diff --git a/src/converter.mjs b/src/converter.mjs
new file mode 100644
index 0000000..d80ff22
--- /dev/null
+++ b/src/converter.mjs
@@ -0,0 +1,168 @@
+/**
+ * 主编排模块
+ * parse → walk → render → writePSD
+ */
+
+import fs from "fs";
+import { initializeCanvas, writePsdBuffer } from "ag-psd";
+import { parseSvg } from "./svg/parser.mjs";
+import { walkSvg } from "./svg/walker.mjs";
+import { buildPsd } from "./psd/builder.mjs";
+import { buildTextLayer } from "./psd/text-layer.mjs";
+import { extractTextInfo } from "./svg/text-extractor.mjs";
+import { validateInput } from "./utils/validation.mjs";
+
+// 初始化 ag-psd：提供最小化 canvas 实现（仅用于 imageData 写入）
+function createMinimalCanvas(width, height) {
+  const canvas = {
+    width,
+    height,
+    getContext: () => createMinimalContext(canvas),
+    toBuffer: () => Buffer.alloc(0),
+  };
+  return canvas;
+}
+
+function createMinimalContext(canvas) {
+  return {
+    canvas,
+    drawImage: () => {},
+    getImageData: (x, y, w, h) => ({
+      data: new Uint8ClampedArray(w * h * 4),
+      width: w,
+      height: h,
+    }),
+    putImageData: () => {},
+    createImageData: (w, h) => ({
+      data: new Uint8ClampedArray(w * h * 4),
+      width: w,
+      height: h,
+    }),
+    clearRect: () => {},
+    fillRect: () => {},
+    fillText: () => {},
+    measureText: () => ({ width: 0 }),
+    scale: () => {},
+    translate: () => {},
+    rotate: () => {},
+    save: () => {},
+    restore: () => {},
+    beginPath: () => {},
+    closePath: () => {},
+    moveTo: () => {},
+    lineTo: () => {},
+    arc: () => {},
+    fill: () => {},
+    stroke: () => {},
+    clip: () => {},
+    setTransform: () => {},
+    resetTransform: () => {},
+    globalAlpha: 1,
+    globalCompositeOperation: "source-over",
+    fillStyle: "#000",
+    strokeStyle: "#000",
+    lineWidth: 1,
+    font: "12px Arial",
+    textAlign: "start",
+    textBaseline: "alphabetic",
+    imageSmoothingEnabled: true,
+  };
+}
+
+initializeCanvas(
+  createMinimalCanvas,
+  (width, height) => ({
+    data: new Uint8ClampedArray(width * height * 4),
+    width,
+    height,
+  })
+);
+
+/**
+ * 将 SVG 文件转换为 PSD
+ * @param {string} inputPath - 输入 SVG 路径
+ * @param {string} [outputPath] - 输出 PSD 路径
+ * @param {Object} [options]
+ * @param {number} [options.scale=1] - 缩放因子
+ * @returns {Promise<string>} 输出文件路径
+ */
+export async function convertSvgToPsd(inputPath, outputPath, options = {}) {
+  const { scale = 1 } = options;
+
+  // 验证输入
+  validateInput(inputPath);
+
+  // 1. 解析 SVG
+  const { svg, width, height, viewBox } = parseSvg(inputPath);
+  console.log(`解析: ${inputPath} (${Math.round(width)}×${Math.round(height)})`);
+
+  // 2. 递归遍历，生成 LayerDescriptor 树
+  const descriptors = walkSvg(svg);
+  const layerCount = countAllLayers(descriptors);
+  console.log(`图层树: ${layerCount} 个图层`);
+
+  if (layerCount === 0) {
+    throw new Error("SVG 中没有可渲染的元素");
+  }
+
+  // 3. 提取文字信息（增强 text 类型的 descriptors）
+  enrichTextDescriptors(descriptors, svg, viewBox);
+
+  // 4. 构建 PSD
+  let completed = 0;
+  const psd = await buildPsd(descriptors, svg, width, height, scale, {
+    buildTextLayer: (desc, svgRoot, w, h, s) =>
+      buildTextLayer(desc, svgRoot, w, h, s),
+    onProgress: (current, total) => {
+      completed = current;
+      process.stdout.write(`\r  渲染: ${current}/${total} 图层`);
+    },
+  });
+
+  if (completed > 0) {
+    process.stdout.write("\n");
+  }
+
+  if (!psd.children || psd.children.length === 0) {
+    throw new Error("没有成功渲染的图层");
+  }
+
+  // 5. 写入 PSD
+  const buffer = writePsdBuffer(psd, {
+    invalidateTextLayers: true,
+    generateThumbnail: true,
+  });
+
+  if (!outputPath) {
+    outputPath = inputPath.replace(/\.svg$/i, ".psd");
+  }
+  fs.writeFileSync(outputPath, buffer);
+  console.log(`完成: ${outputPath} (${psd.width}×${psd.height}, ${psd.children.length} 个顶层图层)`);
+
+  return outputPath;
+}
+
+/**
+ * 递归为 text 类型的 descriptor 填充 textInfo
+ */
+function enrichTextDescriptors(descriptors, svgRoot, viewBox) {
+  for (const desc of descriptors) {
+    if (desc.type === "group" && desc.children) {
+      enrichTextDescriptors(desc.children, svgRoot, viewBox);
+    } else if (desc.type === "text" && desc.element) {
+      desc.textInfo = extractTextInfo(desc.element, desc.transform, viewBox);
+    }
+  }
+}
+
+function countAllLayers(descriptors) {
+  let count = 0;
+  for (const desc of descriptors) {
+    if (desc.type === "group" && desc.children) {
+      count += countAllLayers(desc.children);
+    } else {
+      count++;
+    }
+  }
+  return count;
+}
diff --git a/src/index.mjs b/src/index.mjs
new file mode 100644
index 0000000..b9faef0
--- /dev/null
+++ b/src/index.mjs
@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+/**
+ * SVG to PSD 转换工具 CLI 入口
+ *
+ * Usage: node src/index.mjs <input.svg> [-o output.psd] [-s scale]
+ */
+
+import { convertSvgToPsd } from "./converter.mjs";
+
+function printUsage() {
+  console.log("用法: node src/index.mjs <input.svg> [options]");
+  console.log("选项:");
+  console.log("  -o, --output <path>   输出 PSD 路径");
+  console.log("  -s, --scale <n>       缩放倍数 (默认: 1)");
+  console.log("  -h, --help            显示帮助");
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  if (args.length === 0 || args.includes("-h") || args.includes("--help")) {
+    printUsage();
+    process.exit(0);
+  }
+
+  let inputs = [];
+  let output = null;
+  let scale = 1;
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "-o" || args[i] === "--output") {
+      output = args[++i];
+    } else if (args[i] === "-s" || args[i] === "--scale") {
+      scale = parseFloat(args[++i]);
+    } else {
+      inputs.push(args[i]);
+    }
+  }
+
+  if (inputs.length === 0) {
+    console.error("错误: 请指定输入 SVG 文件");
+    process.exit(1);
+  }
+
+  if (output && inputs.length > 1) {
+    console.error("错误: 多文件模式下不支持 -o 参数");
+    process.exit(1);
+  }
+
+  for (const input of inputs) {
+    try {
+      await convertSvgToPsd(input, output, { scale });
+    } catch (e) {
+      console.error(`错误: ${e.message}`);
+      process.exitCode = 1;
+    }
+  }
+}
+
+main();
diff --git a/src/psd/builder.mjs b/src/psd/builder.mjs
new file mode 100644
index 0000000..95a9d11
--- /dev/null
+++ b/src/psd/builder.mjs
@@ -0,0 +1,161 @@
+/**
+ * PSD 构建模块
+ * 将 LayerDescriptor 树转换为 ag-psd 图层树
+ */
+
+import { renderElement } from "../render/renderer.mjs";
+
+/** SVG blend mode → PSD blend mode 映射 */
+const BLEND_MODE_MAP = {
+  normal: "normal",
+  multiply: "multiply",
+  screen: "screen",
+  overlay: "overlay",
+  darken: "darken",
+  lighten: "lighten",
+  "color-dodge": "color dodge",
+  "color-burn": "color burn",
+  "hard-light": "hard light",
+  "soft-light": "soft light",
+  difference: "difference",
+  exclusion: "exclusion",
+  hue: "hue",
+  saturation: "saturation",
+  color: "color",
+  luminosity: "luminosity",
+};
+
+/**
+ * 将 LayerDescriptor 树构建为 ag-psd 的图层结构
+ * @param {import('../svg/walker.mjs').LayerDescriptor[]} descriptors
+ * @param {Element} svgRoot
+ * @param {number} width - SVG 画布宽度
+ * @param {number} height - SVG 画布高度
+ * @param {number} scale
+ * @param {Object} options
+ * @param {Function} [options.buildTextLayer] - 文字图层构建函数
+ * @param {Function} [options.onProgress] - 进度回调 (current, total)
+ * @returns {Promise<Object>} ag-psd 文档对象
+ */
+export async function buildPsd(descriptors, svgRoot, width, height, scale, options = {}) {
+  const psdW = Math.round(width * scale);
+  const psdH = Math.round(height * scale);
+  const { buildTextLayer, onProgress } = options;
+
+  let completed = 0;
+  const total = countLayers(descriptors);
+
+  async function processDescriptors(descs) {
+    const layers = [];
+    for (const desc of descs) {
+      const layer = await processDescriptor(desc);
+      if (layer) layers.push(layer);
+    }
+    return layers;
+  }
+
+  async function processDescriptor(desc) {
+    if (desc.hidden) {
+      completed++;
+      return createHiddenLayer(desc);
+    }
+
+    if (desc.type === "group") {
+      const children = await processDescriptors(desc.children || []);
+      if (children.length === 0) return null;
+
+      const layer = {
+        name: desc.name,
+        opened: true,
+        children,
+      };
+      applyCommonProps(layer, desc);
+      return layer;
+    }
+
+    if (desc.type === "text") {
+      completed++;
+      if (onProgress) onProgress(completed, total);
+      if (buildTextLayer) {
+        return buildTextLayer(desc, svgRoot, width, height, scale);
+      }
+      // 文字没有 builder 时回退为像素渲染
+      return renderAsPixelLayer(desc, svgRoot, width, height, scale);
+    }
+
+    if (desc.type === "graphic") {
+      const layer = await renderAsPixelLayer(desc, svgRoot, width, height, scale);
+      completed++;
+      if (onProgress) onProgress(completed, total);
+      return layer;
+    }
+
+    return null;
+  }
+
+  const children = await processDescriptors(descriptors);
+
+  return {
+    width: psdW,
+    height: psdH,
+    children,
+  };
+}
+
+async function renderAsPixelLayer(desc, svgRoot, width, height, scale) {
+  try {
+    const result = renderElement(desc.element, svgRoot, width, height, scale);
+    if (!result) return null;
+
+    const layer = {
+      name: desc.name,
+      top: result.top,
+      left: result.left,
+      bottom: result.bottom,
+      right: result.right,
+      imageData: {
+        data: result.data,
+        width: result.width,
+        height: result.height,
+      },
+    };
+    applyCommonProps(layer, desc);
+    return layer;
+  } catch (e) {
+    console.error(`  警告: ${desc.name} 渲染失败 - ${e.message}`);
+    return null;
+  }
+}
+
+function createHiddenLayer(desc) {
+  return {
+    name: desc.name,
+    hidden: true,
+  };
+}
+
+function applyCommonProps(layer, desc) {
+  if (desc.opacity !== undefined && desc.opacity < 1) {
+    layer.opacity = desc.opacity;
+  }
+  if (desc.blendMode && BLEND_MODE_MAP[desc.blendMode]) {
+    layer.blendMode = BLEND_MODE_MAP[desc.blendMode];
+  }
+  if (desc.hidden) {
+    layer.hidden = true;
+  }
+}
+
+function countLayers(descriptors) {
+  let count = 0;
+  for (const desc of descriptors) {
+    if (desc.type === "group" && desc.children) {
+      count += countLayers(desc.children);
+    } else {
+      count++;
+    }
+  }
+  return count;
+}
+
+export { BLEND_MODE_MAP };
diff --git a/src/psd/effects.mjs b/src/psd/effects.mjs
new file mode 100644
index 0000000..f7c9e01
--- /dev/null
+++ b/src/psd/effects.mjs
@@ -0,0 +1,46 @@
+/**
+ * SVG 效果 → PSD 效果映射模块
+ */
+
+/** SVG mix-blend-mode → PSD blend mode 完整映射 */
+export const BLEND_MODE_MAP = {
+  "normal": "normal",
+  "multiply": "multiply",
+  "screen": "screen",
+  "overlay": "overlay",
+  "darken": "darken",
+  "lighten": "lighten",
+  "color-dodge": "color dodge",
+  "color-burn": "color burn",
+  "hard-light": "hard light",
+  "soft-light": "soft light",
+  "difference": "difference",
+  "exclusion": "exclusion",
+  "hue": "hue",
+  "saturation": "saturation",
+  "color": "color",
+  "luminosity": "luminosity",
+  // 额外 CSS 混合模式
+  "plus-darker": "darken",
+  "plus-lighter": "lighten",
+};
+
+/**
+ * 将 SVG opacity (0-1) 转为 PSD opacity (0-1, ag-psd 接受)
+ * @param {number} opacity
+ * @returns {number}
+ */
+export function toPsdOpacity(opacity) {
+  if (opacity === undefined || opacity === null) return 1;
+  return Math.max(0, Math.min(1, opacity));
+}
+
+/**
+ * 将 SVG blend mode 转为 PSD blend mode
+ * @param {string} mode
+ * @returns {string}
+ */
+export function toPsdBlendMode(mode) {
+  if (!mode) return "normal";
+  return BLEND_MODE_MAP[mode.trim().toLowerCase()] || "normal";
+}
diff --git a/src/psd/text-layer.mjs b/src/psd/text-layer.mjs
new file mode 100644
index 0000000..dc94568
--- /dev/null
+++ b/src/psd/text-layer.mjs
@@ -0,0 +1,101 @@
+/**
+ * PSD 文字图层构建模块
+ * 将 TextInfo 转为 ag-psd 的可编辑文字图层
+ */
+
+/**
+ * 构建可编辑文字图层
+ * @param {import('../svg/walker.mjs').LayerDescriptor} desc
+ * @param {Element} svgRoot
+ * @param {number} width
+ * @param {number} height
+ * @param {number} scale
+ * @returns {Object|null} ag-psd 图层对象
+ */
+export function buildTextLayer(desc, svgRoot, width, height, scale) {
+  const info = desc.textInfo;
+  if (!info || !info.text) return null;
+
+  // viewBox offset
+  const viewBox = svgRoot.getAttribute("viewBox");
+  let vbX = 0, vbY = 0;
+  if (viewBox) {
+    const parts = viewBox.split(/[\s,]+/).map(Number);
+    vbX = parts[0] || 0;
+    vbY = parts[1] || 0;
+  }
+
+  const px = (info.x - vbX) * scale;
+  const py = (info.y - vbY) * scale;
+
+  const runs = info.runs || [];
+  const firstRun = runs[0] || {};
+
+  // 构建 style runs
+  const styleRuns = buildStyleRuns(runs, scale);
+
+  const layer = {
+    name: desc.name || `Text: ${info.text.slice(0, 30)}`,
+    text: {
+      text: info.text,
+      antiAlias: "smooth",
+      transform: [1, 0, 0, 1, px, py],
+      style: styleRuns.length > 0 ? styleRuns[0].style : {
+        font: { name: firstRun.psName || "ArialMT" },
+        fontSize: (firstRun.fontSize || 24) * scale,
+        fillColor: firstRun.fillColor || { r: 0, g: 0, b: 0 },
+        fauxBold: firstRun.fauxBold || false,
+      },
+      paragraphStyle: {
+        justification: justificationFromAnchor(info.textAnchor),
+      },
+    },
+  };
+
+  // 多 style runs
+  if (styleRuns.length > 1) {
+    layer.text.styleRuns = styleRuns;
+  }
+
+  // Box text (foreignObject)
+  if (info.isBox && info.boxBounds) {
+    const bb = info.boxBounds;
+    layer.text.shapeType = "box";
+    layer.text.boxBounds = {
+      top: (bb.y - vbY) * scale,
+      left: (bb.x - vbX) * scale,
+      bottom: (bb.y - vbY + bb.height) * scale,
+      right: (bb.x - vbX + bb.width) * scale,
+    };
+  }
+
+  // 通用属性
+  if (desc.opacity !== undefined && desc.opacity < 1) {
+    layer.opacity = desc.opacity;
+  }
+  if (desc.hidden) {
+    layer.hidden = true;
+  }
+
+  return layer;
+}
+
+function buildStyleRuns(runs, scale) {
+  if (runs.length === 0) return [];
+
+  return runs.map((run) => ({
+    length: run.text.length,
+    style: {
+      font: { name: run.psName },
+      fontSize: run.fontSize * scale,
+      fillColor: run.fillColor,
+      fauxBold: run.fauxBold,
+    },
+  }));
+}
+
+function justificationFromAnchor(anchor) {
+  if (anchor === "middle") return "center";
+  if (anchor === "end") return "right";
+  return "left";
+}
diff --git a/src/render/batch-renderer.mjs b/src/render/batch-renderer.mjs
new file mode 100644
index 0000000..1953690
--- /dev/null
+++ b/src/render/batch-renderer.mjs
@@ -0,0 +1,50 @@
+/**
+ * 批量渲染模块
+ * 并发控制，内存管理
+ */
+
+import { renderElement } from "./renderer.mjs";
+
+const DEFAULT_CONCURRENCY = 8;
+
+/**
+ * 批量渲染多个元素
+ * @param {Array<{element: Element, name: string}>} items
+ * @param {Element} svgRoot
+ * @param {number} width
+ * @param {number} height
+ * @param {number} scale
+ * @param {Object} [options]
+ * @param {number} [options.concurrency=8]
+ * @param {Function} [options.onProgress]
+ * @returns {Promise<Map<Element, {data, width, height, top, left, right, bottom}|null>>}
+ */
+export async function batchRender(items, svgRoot, width, height, scale, options = {}) {
+  const { concurrency = DEFAULT_CONCURRENCY, onProgress } = options;
+  const results = new Map();
+  let completed = 0;
+
+  // 分批处理
+  for (let i = 0; i < items.length; i += concurrency) {
+    const batch = items.slice(i, i + concurrency);
+    const batchResults = await Promise.all(
+      batch.map(async (item) => {
+        try {
+          const result = renderElement(item.element, svgRoot, width, height, scale);
+          return { item, result };
+        } catch (e) {
+          console.error(`  警告: ${item.name} 渲染失败 - ${e.message}`);
+          return { item, result: null };
+        }
+      })
+    );
+
+    for (const { item, result } of batchResults) {
+      results.set(item.element, result);
+      completed++;
+      if (onProgress) onProgress(completed, items.length);
+    }
+  }
+
+  return results;
+}
diff --git a/src/render/renderer.mjs b/src/render/renderer.mjs
new file mode 100644
index 0000000..0fcfa45
--- /dev/null
+++ b/src/render/renderer.mjs
@@ -0,0 +1,146 @@
+/**
+ * resvg-js 渲染模块
+ * 将单个 SVG 元素渲染为 RGBA 像素数据
+ */
+
+import { Resvg } from "@resvg/resvg-js";
+import { XMLSerializer } from "@xmldom/xmldom";
+
+const serializer = new XMLSerializer();
+
+/**
+ * 将单个 SVG 元素渲染为像素数据
+ * @param {Element} element - 要渲染的 SVG 元素
+ * @param {Element} svgRoot - 原始 SVG 根元素（用于获取 defs、viewBox 等）
+ * @param {number} width - 画布宽度
+ * @param {number} height - 画布高度
+ * @param {number} scale - 缩放因子
+ * @returns {{ data: Uint8ClampedArray, width: number, height: number, top: number, left: number, right: number, bottom: number } | null}
+ */
+export function renderElement(element, svgRoot, width, height, scale) {
+  const svgStr = buildStandaloneSvg(element, svgRoot);
+  return renderSvgString(svgStr, width, height, scale);
+}
+
+/**
+ * 渲染 SVG 字符串为像素数据
+ */
+export function renderSvgString(svgStr, width, height, scale) {
+  const w = Math.round(width * scale);
+  const h = Math.round(height * scale);
+
+  const resvg = new Resvg(svgStr, {
+    fitTo: { mode: "width", value: w },
+    background: "rgba(0,0,0,0)",
+  });
+
+  const rendered = resvg.render();
+  const pixels = rendered.pixels; // Uint8Array RGBA
+
+  if (isCompletelyTransparent(pixels)) return null;
+
+  // 计算紧凑边界框
+  const bbox = computeTightBBox(pixels, rendered.width, rendered.height);
+  if (!bbox) return null;
+
+  // 裁剪到紧凑区域
+  const cropW = bbox.right - bbox.left;
+  const cropH = bbox.bottom - bbox.top;
+  const cropped = new Uint8ClampedArray(cropW * cropH * 4);
+
+  for (let y = 0; y < cropH; y++) {
+    const srcOffset = ((bbox.top + y) * rendered.width + bbox.left) * 4;
+    const dstOffset = y * cropW * 4;
+    cropped.set(pixels.subarray(srcOffset, srcOffset + cropW * 4), dstOffset);
+  }
+
+  return {
+    data: cropped,
+    width: cropW,
+    height: cropH,
+    top: bbox.top,
+    left: bbox.left,
+    right: bbox.right,
+    bottom: bbox.bottom,
+  };
+}
+
+/**
+ * 构建只包含指定元素的完整 SVG 字符串
+ * 保留原始 SVG 的 defs、style 和 viewBox
+ */
+export function buildStandaloneSvg(element, svgRoot) {
+  const doc = svgRoot.ownerDocument;
+  const clone = svgRoot.cloneNode(false); // 浅克隆 <svg> 属性
+
+  // 复制 <defs> 和 <style>
+  const children = svgRoot.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType !== 1) continue;
+    const tag = (c.localName || c.nodeName || "").replace(/^.*:/, "");
+    if (tag === "defs" || tag === "style") {
+      clone.appendChild(c.cloneNode(true));
+    }
+  }
+
+  // 克隆目标元素，移除 foreignObject（文字单独处理）
+  const elClone = element.cloneNode(true);
+  removeForeignObjects(elClone);
+  clone.appendChild(elClone);
+
+  return '<?xml version="1.0" encoding="UTF-8"?>\n' + serializer.serializeToString(clone);
+}
+
+function removeForeignObjects(node) {
+  const toRemove = [];
+  const children = node.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType === 1) {
+      const tag = (c.localName || c.nodeName || "").replace(/^.*:/, "");
+      if (tag === "foreignObject") {
+        toRemove.push(c);
+      } else {
+        removeForeignObjects(c);
+      }
+    }
+  }
+  toRemove.forEach((c) => node.removeChild(c));
+}
+
+function isCompletelyTransparent(pixels) {
+  for (let i = 3; i < pixels.length; i += 4) {
+    if (pixels[i] > 0) return false;
+  }
+  return true;
+}
+
+/**
+ * 计算像素数据的紧凑边界框（非透明区域）
+ */
+function computeTightBBox(pixels, width, height) {
+  let top = height, left = width, bottom = 0, right = 0;
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const alpha = pixels[(y * width + x) * 4 + 3];
+      if (alpha > 0) {
+        if (y < top) top = y;
+        if (y > bottom) bottom = y;
+        if (x < left) left = x;
+        if (x > right) right = x;
+      }
+    }
+  }
+
+  if (bottom < top) return null; // 全透明
+
+  // 扩展 1px padding
+  top = Math.max(0, top);
+  left = Math.max(0, left);
+  bottom = Math.min(height, bottom + 1);
+  right = Math.min(width, right + 1);
+
+  return { top, left, bottom, right };
+}
diff --git a/src/svg/parser.mjs b/src/svg/parser.mjs
new file mode 100644
index 0000000..40db1b0
--- /dev/null
+++ b/src/svg/parser.mjs
@@ -0,0 +1,58 @@
+/**
+ * SVG 解析与验证模块
+ * 读取 SVG 文件，提取 viewBox 和尺寸信息
+ */
+
+import fs from "fs";
+import { DOMParser } from "@xmldom/xmldom";
+
+/**
+ * 解析 SVG 文件，返回 DOM 文档和画布尺寸
+ * @param {string} filePath SVG 文件路径
+ * @returns {{ doc: Document, svg: Element, width: number, height: number, viewBox: {x:number,y:number,w:number,h:number}|null, xml: string }}
+ */
+export function parseSvg(filePath) {
+  const xml = fs.readFileSync(filePath, "utf-8");
+  return parseSvgString(xml);
+}
+
+/**
+ * 从 SVG 字符串解析
+ */
+export function parseSvgString(xml) {
+  const errors = [];
+  const doc = new DOMParser({
+    errorHandler: {
+      warning: () => {},
+      error: (msg) => errors.push(msg),
+      fatalError: (msg) => errors.push(msg),
+    },
+  }).parseFromString(xml, "image/svg+xml");
+
+  if (errors.length > 0) {
+    throw new Error(`SVG 解析错误: ${errors[0]}`);
+  }
+
+  const svg = doc.documentElement;
+  if (!svg || svg.nodeName !== "svg") {
+    throw new Error("无效的 SVG 文件：缺少 <svg> 根元素");
+  }
+
+  const viewBox = parseViewBox(svg.getAttribute("viewBox"));
+  const width = parseFloat(svg.getAttribute("width")) || (viewBox ? viewBox.w : 800);
+  const height = parseFloat(svg.getAttribute("height")) || (viewBox ? viewBox.h : 600);
+
+  return { doc, svg, width, height, viewBox, xml };
+}
+
+/**
+ * 解析 viewBox 属性
+ * @param {string|null} attr
+ * @returns {{ x: number, y: number, w: number, h: number } | null}
+ */
+function parseViewBox(attr) {
+  if (!attr) return null;
+  const parts = attr.split(/[\s,]+/).map(Number);
+  if (parts.length < 4 || parts.some(isNaN)) return null;
+  return { x: parts[0], y: parts[1], w: parts[2], h: parts[3] };
+}
diff --git a/src/svg/style-resolver.mjs b/src/svg/style-resolver.mjs
new file mode 100644
index 0000000..7384341
--- /dev/null
+++ b/src/svg/style-resolver.mjs
@@ -0,0 +1,110 @@
+/**
+ * CSS 样式解析模块
+ * 处理三级优先级：style 属性 > 表现属性 > 父元素继承
+ */
+
+/** 可继承的 SVG 属性 */
+const INHERITABLE = new Set([
+  "fill", "fill-opacity", "stroke", "stroke-opacity", "stroke-width",
+  "font-family", "font-size", "font-weight", "font-style",
+  "text-anchor", "text-decoration", "letter-spacing", "word-spacing",
+  "color", "direction", "writing-mode", "dominant-baseline",
+  "visibility", "opacity",
+]);
+
+/**
+ * 解析 style 属性为键值对
+ * @param {string} style
+ * @returns {Object.<string, string>}
+ */
+export function parseStyleAttr(style) {
+  const map = {};
+  if (!style) return map;
+  style.split(";").forEach((decl) => {
+    const idx = decl.indexOf(":");
+    if (idx === -1) return;
+    const k = decl.slice(0, idx).trim();
+    const v = decl.slice(idx + 1).trim();
+    if (k && v) map[k] = v;
+  });
+  return map;
+}
+
+/**
+ * 获取元素的有效样式值
+ * 优先级: style 属性 > 表现属性 > inherited
+ * @param {Element} el
+ * @param {string} prop CSS 属性名 (如 "font-size", "fill")
+ * @param {string} [inherited] 继承值
+ * @returns {string|null}
+ */
+export function getStyleValue(el, prop, inherited) {
+  // 1. style 属性（最高优先级）
+  const styleAttr = el.getAttribute("style");
+  if (styleAttr) {
+    const styleMap = parseStyleAttr(styleAttr);
+    if (styleMap[prop] !== undefined) return styleMap[prop];
+  }
+
+  // 2. 表现属性
+  const attr = el.getAttribute(prop);
+  if (attr !== null && attr !== undefined) return attr;
+
+  // 3. 继承
+  if (inherited !== undefined) return inherited;
+
+  return null;
+}
+
+/**
+ * 收集元素的完整样式上下文
+ * @param {Element} el
+ * @param {Object} [parentStyles={}] 父元素样式
+ * @returns {Object.<string, string>}
+ */
+export function resolveStyles(el, parentStyles = {}) {
+  const resolved = {};
+
+  // 继承可继承属性
+  for (const prop of INHERITABLE) {
+    if (parentStyles[prop] !== undefined) {
+      resolved[prop] = parentStyles[prop];
+    }
+  }
+
+  // 覆盖表现属性
+  for (const prop of INHERITABLE) {
+    const attr = el.getAttribute(prop);
+    if (attr !== null && attr !== undefined) {
+      resolved[prop] = attr;
+    }
+  }
+
+  // 也检查非继承但常用的属性
+  for (const prop of ["opacity", "mix-blend-mode", "display", "visibility"]) {
+    const attr = el.getAttribute(prop);
+    if (attr) resolved[prop] = attr;
+  }
+
+  // 最高优先级: style 属性
+  const styleAttr = el.getAttribute("style");
+  if (styleAttr) {
+    const styleMap = parseStyleAttr(styleAttr);
+    Object.assign(resolved, styleMap);
+  }
+
+  return resolved;
+}
+
+/**
+ * 递归向上查找元素的样式
+ */
+export function getInheritedStyle(el, prop) {
+  let current = el;
+  while (current && current.nodeType === 1) {
+    const val = getStyleValue(current, prop);
+    if (val) return val;
+    current = current.parentNode;
+  }
+  return null;
+}
diff --git a/src/svg/text-extractor.mjs b/src/svg/text-extractor.mjs
new file mode 100644
index 0000000..c45ff72
--- /dev/null
+++ b/src/svg/text-extractor.mjs
@@ -0,0 +1,209 @@
+/**
+ * 文字提取模块
+ * 从 <text>, <tspan>, <foreignObject> 提取文字信息
+ */
+
+import { parseStyleAttr, resolveStyles } from "./style-resolver.mjs";
+import { getTranslation } from "./transforms.mjs";
+import { parseColor } from "../utils/color.mjs";
+import { cleanFontFamily, toPostScriptName, isBoldWeight } from "../utils/font.mjs";
+
+/**
+ * @typedef {Object} TextRun
+ * @property {string} text
+ * @property {string} fontFamily
+ * @property {string} psName - PostScript 字体名
+ * @property {number} fontSize
+ * @property {string} fontWeight
+ * @property {boolean} fauxBold
+ * @property {{ r:number, g:number, b:number }} fillColor
+ */
+
+/**
+ * @typedef {Object} TextInfo
+ * @property {string} text - 完整文本
+ * @property {number} x - 文本 X 坐标（SVG viewBox 坐标）
+ * @property {number} y - 文本 Y 坐标
+ * @property {TextRun[]} runs - 样式段
+ * @property {string} textAnchor - "start" | "middle" | "end"
+ * @property {boolean} isBox - 是否为 box text (foreignObject)
+ * @property {{ x:number, y:number, width:number, height:number }} [boxBounds]
+ */
+
+/**
+ * 从元素提取文字信息
+ * @param {Element} el - <text> 或 <foreignObject> 元素
+ * @param {number[]} transform - 累积变换矩阵
+ * @param {{ x:number, y:number, w:number, h:number }|null} viewBox
+ * @returns {TextInfo|null}
+ */
+export function extractTextInfo(el, transform, viewBox) {
+  const tag = localName(el);
+  if (tag === "text") {
+    return extractFromText(el, transform, viewBox);
+  }
+  if (tag === "foreignObject") {
+    return extractFromForeignObject(el, transform, viewBox);
+  }
+  return null;
+}
+
+function extractFromText(textEl, transform, viewBox) {
+  const x = parseFloat(textEl.getAttribute("x") || "0");
+  const y = parseFloat(textEl.getAttribute("y") || "0");
+  const styles = resolveStyles(textEl);
+
+  const tspans = findDirectChildren(textEl, "tspan");
+  let runs;
+
+  if (tspans.length > 0) {
+    // 多个 tspan 产生多个 style runs
+    runs = tspans.map((tspan) => extractRunFromTspan(tspan, styles));
+  } else {
+    // 单段文本
+    const text = getAllText(textEl).trim();
+    if (!text) return null;
+    runs = [buildRun(text, styles)];
+  }
+
+  // 过滤空 run
+  runs = runs.filter((r) => r.text.length > 0);
+  if (runs.length === 0) return null;
+
+  const fullText = runs.map((r) => r.text).join("");
+  const textAnchor = styles["text-anchor"] || "start";
+
+  return {
+    text: fullText,
+    x,
+    y,
+    runs,
+    textAnchor,
+    isBox: false,
+  };
+}
+
+function extractRunFromTspan(tspan, parentStyles) {
+  const text = getAllText(tspan).trim();
+  const styles = resolveStyles(tspan, parentStyles);
+  return buildRun(text, styles);
+}
+
+function buildRun(text, styles) {
+  const fontFamily = cleanFontFamily(styles["font-family"] || "Arial");
+  const fontWeight = styles["font-weight"] || "normal";
+  const fontSize = parseFloat(styles["font-size"] || "24");
+  const fill = styles["fill"] || styles["color"] || "#000000";
+
+  return {
+    text,
+    fontFamily,
+    psName: toPostScriptName(fontFamily, fontWeight),
+    fontSize,
+    fontWeight,
+    fauxBold: isBoldWeight(fontWeight),
+    fillColor: parseColor(fill),
+  };
+}
+
+function extractFromForeignObject(foEl, transform, viewBox) {
+  const raw = getAllText(foEl).trim();
+  if (!raw) return null;
+
+  const foX = parseFloat(foEl.getAttribute("x") || "0");
+  const foY = parseFloat(foEl.getAttribute("y") || "0");
+  const foW = parseFloat(foEl.getAttribute("width") || "0");
+  const foH = parseFloat(foEl.getAttribute("height") || "0");
+
+  // 从变换矩阵中获取平移分量
+  const { tx, ty } = getTranslation(transform);
+
+  // 从嵌套 HTML 元素提取样式
+  const styleInfo = extractForeignObjectStyle(foEl);
+  const fontFamily = styleInfo.fontFamily || "Inter";
+  const fontWeight = styleInfo.fontWeight || "normal";
+  const fontSize = styleInfo.fontSize || 24;
+  const fill = styleInfo.color || "#000000";
+
+  const run = {
+    text: raw,
+    fontFamily,
+    psName: toPostScriptName(fontFamily, fontWeight),
+    fontSize,
+    fontWeight,
+    fauxBold: isBoldWeight(fontWeight),
+    fillColor: parseColor(fill),
+  };
+
+  return {
+    text: raw,
+    x: foX + tx,
+    y: foY + ty + fontSize, // foreignObject y 是顶部，PSD 文字 y 是基线
+    runs: [run],
+    textAnchor: "start",
+    isBox: true,
+    boxBounds: {
+      x: foX + tx,
+      y: foY + ty,
+      width: foW || 200,
+      height: foH || fontSize * 2,
+    },
+  };
+}
+
+function extractForeignObjectStyle(foEl) {
+  const result = {};
+  walkElements(foEl, (el) => {
+    const style = el.getAttribute && el.getAttribute("style");
+    if (style) {
+      const map = parseStyleAttr(style);
+      if (map["font-family"]) result.fontFamily = cleanFontFamily(map["font-family"]);
+      if (map["font-size"]) result.fontSize = parseFloat(map["font-size"]);
+      if (map["font-weight"]) result.fontWeight = map["font-weight"];
+      if (map["color"]) result.color = map["color"];
+    }
+    const ff = el.getAttribute && el.getAttribute("font-family");
+    if (ff) result.fontFamily = cleanFontFamily(ff);
+    const fs = el.getAttribute && el.getAttribute("font-size");
+    if (fs) result.fontSize = parseFloat(fs);
+  });
+  return result;
+}
+
+function walkElements(node, fn) {
+  if (node.nodeType === 1) fn(node);
+  const children = node.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    walkElements(children[i], fn);
+  }
+}
+
+function findDirectChildren(node, tagName) {
+  const result = [];
+  const children = node.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType === 1 && localName(c) === tagName) {
+      result.push(c);
+    }
+  }
+  return result;
+}
+
+function getAllText(el) {
+  let text = "";
+  const children = el.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType === 3 || c.nodeType === 4) {
+      text += c.nodeValue;
+    } else if (c.nodeType === 1) {
+      text += getAllText(c);
+    }
+  }
+  return text;
+}
+
+function localName(el) {
+  return (el.localName || el.nodeName || "").replace(/^.*:/, "");
+}
diff --git a/src/svg/transforms.mjs b/src/svg/transforms.mjs
new file mode 100644
index 0000000..a9ccaa0
--- /dev/null
+++ b/src/svg/transforms.mjs
@@ -0,0 +1,123 @@
+/**
+ * SVG transform 完整解析模块
+ * 支持 matrix, translate, rotate, scale, skewX, skewY 及链式组合
+ *
+ * 矩阵格式 [a, b, c, d, e, f] 对应：
+ *   | a c e |
+ *   | b d f |
+ *   | 0 0 1 |
+ */
+
+/** 单位矩阵 */
+export function identity() {
+  return [1, 0, 0, 1, 0, 0];
+}
+
+/** 矩阵乘法 A * B */
+export function multiply(A, B) {
+  const [a1, b1, c1, d1, e1, f1] = A;
+  const [a2, b2, c2, d2, e2, f2] = B;
+  return [
+    a1 * a2 + c1 * b2,
+    b1 * a2 + d1 * b2,
+    a1 * c2 + c1 * d2,
+    b1 * c2 + d1 * d2,
+    a1 * e2 + c1 * f2 + e1,
+    b1 * e2 + d1 * f2 + f1,
+  ];
+}
+
+/** 用矩阵变换一个点 */
+export function transformPoint(matrix, x, y) {
+  const [a, b, c, d, e, f] = matrix;
+  return {
+    x: a * x + c * y + e,
+    y: b * x + d * y + f,
+  };
+}
+
+/**
+ * 解析 SVG transform 属性字符串，返回组合矩阵
+ * 支持: matrix, translate, rotate, scale, skewX, skewY
+ * 链式 transform 从左到右依次左乘
+ */
+export function parseTransform(str) {
+  if (!str || !str.trim()) return identity();
+
+  const transforms = [];
+  const re = /(matrix|translate|rotate|scale|skewX|skewY)\s*\(([^)]*)\)/gi;
+  let match;
+  while ((match = re.exec(str)) !== null) {
+    const fn = match[1].toLowerCase();
+    const args = match[2]
+      .split(/[\s,]+/)
+      .filter(Boolean)
+      .map(Number);
+    transforms.push({ fn, args });
+  }
+
+  let result = identity();
+  for (const { fn, args } of transforms) {
+    result = multiply(result, buildMatrix(fn, args));
+  }
+  return result;
+}
+
+function buildMatrix(fn, args) {
+  switch (fn) {
+    case "matrix":
+      return args.length >= 6 ? args.slice(0, 6) : identity();
+
+    case "translate": {
+      const tx = args[0] || 0;
+      const ty = args[1] || 0;
+      return [1, 0, 0, 1, tx, ty];
+    }
+
+    case "scale": {
+      const sx = args[0] ?? 1;
+      const sy = args[1] ?? sx;
+      return [sx, 0, 0, sy, 0, 0];
+    }
+
+    case "rotate": {
+      const angle = ((args[0] || 0) * Math.PI) / 180;
+      const cx = args[1] || 0;
+      const cy = args[2] || 0;
+      const cos = Math.cos(angle);
+      const sin = Math.sin(angle);
+      if (cx === 0 && cy === 0) {
+        return [cos, sin, -sin, cos, 0, 0];
+      }
+      // rotate(angle, cx, cy) = translate(cx,cy) * rotate(angle) * translate(-cx,-cy)
+      return [
+        cos,
+        sin,
+        -sin,
+        cos,
+        cx * (1 - cos) + cy * sin,
+        cy * (1 - cos) - cx * sin,
+      ];
+    }
+
+    case "skewx": {
+      const angle = ((args[0] || 0) * Math.PI) / 180;
+      return [1, 0, Math.tan(angle), 1, 0, 0];
+    }
+
+    case "skewy": {
+      const angle = ((args[0] || 0) * Math.PI) / 180;
+      return [1, Math.tan(angle), 0, 1, 0, 0];
+    }
+
+    default:
+      return identity();
+  }
+}
+
+/**
+ * 从变换矩阵中提取平移分量
+ */
+export function getTranslation(matrix) {
+  return { tx: matrix[4], ty: matrix[5] };
+}
diff --git a/src/svg/walker.mjs b/src/svg/walker.mjs
new file mode 100644
index 0000000..9a7ce8a
--- /dev/null
+++ b/src/svg/walker.mjs
@@ -0,0 +1,232 @@
+/**
+ * SVG 递归树遍历模块
+ * 将 SVG DOM 树转换为 LayerDescriptor 树
+ */
+
+import { parseTransform, multiply } from "./transforms.mjs";
+
+/** 非渲染元素标签 */
+const SKIP_TAGS = new Set([
+  "defs", "style", "metadata", "clipPath", "mask", "pattern",
+  "linearGradient", "radialGradient", "filter", "symbol", "marker",
+  "title", "desc",
+]);
+
+/** 图形元素标签 */
+const GRAPHIC_TAGS = new Set([
+  "rect", "circle", "ellipse", "line", "polyline", "polygon",
+  "path", "image", "use",
+]);
+
+/**
+ * @typedef {Object} LayerDescriptor
+ * @property {string} type - "group" | "graphic" | "text"
+ * @property {string} name - 图层名称
+ * @property {Element} [element] - 对应的 SVG DOM 元素
+ * @property {number[]} [transform] - 累积变换矩阵
+ * @property {number} [opacity] - 不透明度 0-1
+ * @property {string} [blendMode] - 混合模式
+ * @property {boolean} [hidden] - 是否隐藏
+ * @property {LayerDescriptor[]} [children] - 子图层（仅 group）
+ * @property {Object} [textInfo] - 文字信息（仅 text）
+ */
+
+/**
+ * 递归遍历 SVG 树，生成 LayerDescriptor 树
+ * @param {Element} svg 根 <svg> 元素
+ * @returns {LayerDescriptor[]}
+ */
+export function walkSvg(svg) {
+  const children = walkChildren(svg, [1, 0, 0, 1, 0, 0]);
+  return children;
+}
+
+function walkChildren(parent, parentTransform) {
+  const result = [];
+  const childNodes = parent.childNodes || [];
+
+  for (let i = 0; i < childNodes.length; i++) {
+    const node = childNodes[i];
+    if (node.nodeType !== 1) continue;
+
+    const tag = localName(node);
+    if (SKIP_TAGS.has(tag)) continue;
+
+    const descriptor = processElement(node, tag, parentTransform);
+    if (descriptor) result.push(descriptor);
+  }
+
+  return result;
+}
+
+function processElement(el, tag, parentTransform) {
+  const transform = getAccumulatedTransform(el, parentTransform);
+  const opacity = getOpacity(el);
+  const blendMode = getBlendMode(el);
+  const hidden = isHidden(el);
+
+  if (tag === "g") {
+    return processGroup(el, transform, opacity, blendMode, hidden);
+  }
+
+  if (tag === "text") {
+    return {
+      type: "text",
+      name: getTextLayerName(el),
+      element: el,
+      transform,
+      opacity,
+      blendMode,
+      hidden,
+      textInfo: null, // 在 text-extractor 中填充
+    };
+  }
+
+  if (tag === "foreignObject") {
+    return {
+      type: "text",
+      name: getForeignObjectLayerName(el),
+      element: el,
+      transform,
+      opacity,
+      blendMode,
+      hidden,
+      textInfo: null,
+    };
+  }
+
+  if (GRAPHIC_TAGS.has(tag)) {
+    return {
+      type: "graphic",
+      name: getElementName(el, tag),
+      element: el,
+      transform,
+      opacity,
+      blendMode,
+      hidden,
+    };
+  }
+
+  // svg 内嵌 svg
+  if (tag === "svg") {
+    const children = walkChildren(el, transform);
+    if (children.length === 0) return null;
+    return {
+      type: "group",
+      name: el.getAttribute("id") || "svg",
+      element: el,
+      transform,
+      opacity,
+      blendMode,
+      hidden,
+      children,
+    };
+  }
+
+  return null;
+}
+
+function processGroup(el, transform, opacity, blendMode, hidden) {
+  const children = walkChildren(el, transform);
+
+  // 空组跳过
+  if (children.length === 0) return null;
+
+  // 单子元素空包装组折叠：如果组没有自己的 opacity/blendMode/hidden 等属性，
+  // 并且只有一个子元素，则提升子元素
+  if (
+    children.length === 1 &&
+    opacity === 1 &&
+    !blendMode &&
+    !hidden &&
+    !el.getAttribute("id")
+  ) {
+    return children[0];
+  }
+
+  return {
+    type: "group",
+    name: el.getAttribute("id") || guessGroupName(el, children),
+    element: el,
+    transform,
+    opacity,
+    blendMode,
+    hidden,
+    children,
+  };
+}
+
+function getAccumulatedTransform(el, parentTransform) {
+  const localTransform = parseTransform(el.getAttribute("transform"));
+  return multiply(parentTransform, localTransform);
+}
+
+function getOpacity(el) {
+  const style = el.getAttribute("style") || "";
+  const opacityMatch = style.match(/(?:^|;)\s*opacity\s*:\s*([\d.]+)/);
+  if (opacityMatch) return parseFloat(opacityMatch[1]);
+  const attr = el.getAttribute("opacity");
+  if (attr) return parseFloat(attr);
+  return 1;
+}
+
+function getBlendMode(el) {
+  const style = el.getAttribute("style") || "";
+  const match = style.match(/mix-blend-mode\s*:\s*([^;]+)/);
+  return match ? match[1].trim() : null;
+}
+
+function isHidden(el) {
+  const style = el.getAttribute("style") || "";
+  if (/visibility\s*:\s*hidden/.test(style)) return true;
+  if (/display\s*:\s*none/.test(style)) return true;
+  if (el.getAttribute("visibility") === "hidden") return true;
+  if (el.getAttribute("display") === "none") return true;
+  return false;
+}
+
+function localName(el) {
+  return (el.localName || el.nodeName || "").replace(/^.*:/, "");
+}
+
+function getTextLayerName(el) {
+  const id = el.getAttribute("id");
+  if (id) return id;
+  const text = getAllText(el).trim();
+  return text ? `Text: ${text.slice(0, 30)}` : "Text";
+}
+
+function getForeignObjectLayerName(el) {
+  const text = getAllText(el).trim();
+  return text ? `Text: ${text.slice(0, 30)}` : "ForeignObject";
+}
+
+function getAllText(el) {
+  let text = "";
+  const children = el.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType === 3 || c.nodeType === 4) {
+      text += c.nodeValue;
+    } else if (c.nodeType === 1) {
+      text += getAllText(c);
+    }
+  }
+  return text;
+}
+
+function getElementName(el, tag) {
+  const id = el.getAttribute("id");
+  if (id) return id;
+  return tag.charAt(0).toUpperCase() + tag.slice(1);
+}
+
+function guessGroupName(el, children) {
+  // 基于子元素类型推断名称
+  const types = children.map((c) => c.type);
+  if (types.every((t) => t === "text")) return "TextGroup";
+  if (types.every((t) => t === "graphic")) return "Group";
+  return "Group";
+}
+
+export { localName, getAllText, SKIP_TAGS, GRAPHIC_TAGS };
diff --git a/src/utils/color.mjs b/src/utils/color.mjs
new file mode 100644
index 0000000..b7e005a
--- /dev/null
+++ b/src/utils/color.mjs
@@ -0,0 +1,142 @@
+/**
+ * 颜色解析模块
+ * 支持 hex, rgb, rgba, hsl, hsla, CSS named colors
+ */
+
+/** CSS named colors (完整列表) */
+const NAMED_COLORS = {
+  aliceblue: [240,248,255], antiquewhite: [250,235,215], aqua: [0,255,255],
+  aquamarine: [127,255,212], azure: [240,255,255], beige: [245,245,220],
+  bisque: [255,228,196], black: [0,0,0], blanchedalmond: [255,235,205],
+  blue: [0,0,255], blueviolet: [138,43,226], brown: [165,42,42],
+  burlywood: [222,184,135], cadetblue: [95,158,160], chartreuse: [127,255,0],
+  chocolate: [210,105,30], coral: [255,127,80], cornflowerblue: [100,149,237],
+  cornsilk: [255,248,220], crimson: [220,20,60], cyan: [0,255,255],
+  darkblue: [0,0,139], darkcyan: [0,139,139], darkgoldenrod: [184,134,11],
+  darkgray: [169,169,169], darkgreen: [0,100,0], darkgrey: [169,169,169],
+  darkkhaki: [189,183,107], darkmagenta: [139,0,139], darkolivegreen: [85,107,47],
+  darkorange: [255,140,0], darkorchid: [153,50,204], darkred: [139,0,0],
+  darksalmon: [233,150,122], darkseagreen: [143,188,143], darkslateblue: [72,61,139],
+  darkslategray: [47,79,79], darkslategrey: [47,79,79], darkturquoise: [0,206,209],
+  darkviolet: [148,0,211], deeppink: [255,20,147], deepskyblue: [0,191,255],
+  dimgray: [105,105,105], dimgrey: [105,105,105], dodgerblue: [30,144,255],
+  firebrick: [178,34,34], floralwhite: [255,250,240], forestgreen: [34,139,34],
+  fuchsia: [255,0,255], gainsboro: [220,220,220], ghostwhite: [248,248,255],
+  gold: [255,215,0], goldenrod: [218,165,32], gray: [128,128,128],
+  green: [0,128,0], greenyellow: [173,255,47], grey: [128,128,128],
+  honeydew: [240,255,240], hotpink: [255,105,180], indianred: [205,92,92],
+  indigo: [75,0,130], ivory: [255,255,240], khaki: [240,230,140],
+  lavender: [230,230,250], lavenderblush: [255,240,245], lawngreen: [124,252,0],
+  lemonchiffon: [255,250,205], lightblue: [173,216,230], lightcoral: [240,128,128],
+  lightcyan: [224,255,255], lightgoldenrodyellow: [250,250,210], lightgray: [211,211,211],
+  lightgreen: [144,238,144], lightgrey: [211,211,211], lightpink: [255,182,193],
+  lightsalmon: [255,160,122], lightseagreen: [32,178,170], lightskyblue: [135,206,250],
+  lightslategray: [119,136,153], lightslategrey: [119,136,153], lightsteelblue: [176,196,222],
+  lightyellow: [255,255,224], lime: [0,255,0], limegreen: [50,205,50],
+  linen: [250,240,230], magenta: [255,0,255], maroon: [128,0,0],
+  mediumaquamarine: [102,205,170], mediumblue: [0,0,205], mediumorchid: [186,85,211],
+  mediumpurple: [147,111,219], mediumseagreen: [60,179,113], mediumslateblue: [123,104,238],
+  mediumspringgreen: [0,250,154], mediumturquoise: [72,209,204], mediumvioletred: [199,21,133],
+  midnightblue: [25,25,112], mintcream: [245,255,250], mistyrose: [255,228,225],
+  moccasin: [255,228,181], navajowhite: [255,222,173], navy: [0,0,128],
+  oldlace: [253,245,230], olive: [128,128,0], olivedrab: [107,142,35],
+  orange: [255,165,0], orangered: [255,69,0], orchid: [218,112,214],
+  palegoldenrod: [238,232,170], palegreen: [152,251,152], paleturquoise: [175,238,238],
+  palevioletred: [219,112,147], papayawhip: [255,239,213], peachpuff: [255,218,185],
+  peru: [205,133,63], pink: [255,192,203], plum: [221,160,221],
+  powderblue: [176,224,230], purple: [128,0,128], rebeccapurple: [102,51,153],
+  red: [255,0,0], rosybrown: [188,143,143], royalblue: [65,105,225],
+  saddlebrown: [139,69,19], salmon: [250,128,114], sandybrown: [244,164,96],
+  seagreen: [46,139,87], seashell: [255,245,238], sienna: [160,82,45],
+  silver: [192,192,192], skyblue: [135,206,235], slateblue: [106,90,205],
+  slategray: [112,128,144], slategrey: [112,128,144], snow: [255,250,250],
+  springgreen: [0,255,127], steelblue: [70,130,180], tan: [210,180,140],
+  teal: [0,128,128], thistle: [216,191,216], tomato: [255,99,71],
+  turquoise: [64,224,208], violet: [238,130,238], wheat: [245,222,179],
+  white: [255,255,255], whitesmoke: [245,245,245], yellow: [255,255,0],
+  yellowgreen: [154,205,50],
+};
+
+/**
+ * 解析颜色字符串，返回 { r, g, b } (0-255)
+ * @param {string} color
+ * @returns {{ r: number, g: number, b: number }}
+ */
+export function parseColor(color) {
+  if (!color || color === "none" || color === "transparent") {
+    return { r: 0, g: 0, b: 0 };
+  }
+
+  color = color.trim().toLowerCase();
+
+  // hex
+  if (color.startsWith("#")) {
+    return parseHex(color);
+  }
+
+  // rgba / rgb
+  const rgbMatch = color.match(/rgba?\(\s*([\d.]+)(%?)\s*[,\s]\s*([\d.]+)(%?)\s*[,\s]\s*([\d.]+)(%?)/);
+  if (rgbMatch) {
+    let r = parseFloat(rgbMatch[1]);
+    let g = parseFloat(rgbMatch[3]);
+    let b = parseFloat(rgbMatch[5]);
+    if (rgbMatch[2] === "%") r = Math.round(r * 2.55);
+    if (rgbMatch[4] === "%") g = Math.round(g * 2.55);
+    if (rgbMatch[6] === "%") b = Math.round(b * 2.55);
+    return { r: clamp(r), g: clamp(g), b: clamp(b) };
+  }
+
+  // hsla / hsl
+  const hslMatch = color.match(/hsla?\(\s*([\d.]+)\s*[,\s]\s*([\d.]+)%\s*[,\s]\s*([\d.]+)%/);
+  if (hslMatch) {
+    const h = parseFloat(hslMatch[1]) / 360;
+    const s = parseFloat(hslMatch[2]) / 100;
+    const l = parseFloat(hslMatch[3]) / 100;
+    return hslToRgb(h, s, l);
+  }
+
+  // named colors
+  const named = NAMED_COLORS[color];
+  if (named) return { r: named[0], g: named[1], b: named[2] };
+
+  return { r: 0, g: 0, b: 0 };
+}
+
+function parseHex(hex) {
+  hex = hex.slice(1);
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  return {
+    r: parseInt(hex.slice(0, 2), 16) || 0,
+    g: parseInt(hex.slice(2, 4), 16) || 0,
+    b: parseInt(hex.slice(4, 6), 16) || 0,
+  };
+}
+
+function hslToRgb(h, s, l) {
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hueToRgb(p, q, h + 1/3);
+    g = hueToRgb(p, q, h);
+    b = hueToRgb(p, q, h - 1/3);
+  }
+  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+}
+
+function hueToRgb(p, q, t) {
+  if (t < 0) t += 1;
+  if (t > 1) t -= 1;
+  if (t < 1/6) return p + (q - p) * 6 * t;
+  if (t < 1/2) return q;
+  if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+  return p;
+}
+
+function clamp(v) {
+  return Math.max(0, Math.min(255, Math.round(v)));
+}
diff --git a/src/utils/font.mjs b/src/utils/font.mjs
new file mode 100644
index 0000000..d9a846d
--- /dev/null
+++ b/src/utils/font.mjs
@@ -0,0 +1,66 @@
+/**
+ * 字体名 → PostScript 名映射模块
+ */
+
+const FONT_MAP = {
+  "Arial":              { normal: "ArialMT",              bold: "Arial-BoldMT" },
+  "Helvetica":          { normal: "Helvetica",            bold: "Helvetica-Bold" },
+  "Helvetica Neue":     { normal: "HelveticaNeue",        bold: "HelveticaNeue-Bold" },
+  "Inter":              { normal: "Inter",                bold: "Inter-Bold" },
+  "Georgia":            { normal: "Georgia",              bold: "Georgia-Bold" },
+  "Times New Roman":    { normal: "TimesNewRomanPSMT",    bold: "TimesNewRomanPS-BoldMT" },
+  "Courier New":        { normal: "CourierNewPSMT",       bold: "CourierNewPS-BoldMT" },
+  "Verdana":            { normal: "Verdana",              bold: "Verdana-Bold" },
+  "Tahoma":             { normal: "Tahoma",               bold: "Tahoma-Bold" },
+  "Trebuchet MS":       { normal: "TrebuchetMS",          bold: "TrebuchetMS-Bold" },
+  "Comic Sans MS":      { normal: "ComicSansMS",          bold: "ComicSansMS-Bold" },
+  "Impact":             { normal: "Impact",               bold: "Impact" },
+  "Lucida Sans":        { normal: "LucidaGrande",         bold: "LucidaGrande-Bold" },
+  "Lucida Grande":      { normal: "LucidaGrande",         bold: "LucidaGrande-Bold" },
+  "Roboto":             { normal: "Roboto-Regular",       bold: "Roboto-Bold" },
+  "Open Sans":          { normal: "OpenSans-Regular",     bold: "OpenSans-Bold" },
+  "Noto Sans":          { normal: "NotoSans-Regular",     bold: "NotoSans-Bold" },
+  "Source Sans Pro":    { normal: "SourceSansPro-Regular", bold: "SourceSansPro-Bold" },
+  "SF Pro":             { normal: "SFPro-Regular",        bold: "SFPro-Bold" },
+  "SF Pro Display":     { normal: "SFProDisplay-Regular", bold: "SFProDisplay-Bold" },
+  "SF Pro Text":        { normal: "SFProText-Regular",    bold: "SFProText-Bold" },
+  "PingFang SC":        { normal: "PingFangSC-Regular",   bold: "PingFangSC-Semibold" },
+  "PingFang TC":        { normal: "PingFangTC-Regular",   bold: "PingFangTC-Semibold" },
+  "Microsoft YaHei":    { normal: "MicrosoftYaHei",       bold: "MicrosoftYaHei-Bold" },
+  "Noto Sans SC":       { normal: "NotoSansSC-Regular",   bold: "NotoSansSC-Bold" },
+};
+
+/**
+ * 将字体家族名和粗细转为 PostScript 名
+ * @param {string} family
+ * @param {string} weight - "normal", "bold", or numeric (400, 700, etc.)
+ * @returns {string}
+ */
+export function toPostScriptName(family, weight) {
+  const isBold = weight === "bold" || parseInt(weight) >= 700;
+  const entry = FONT_MAP[family];
+  if (entry) {
+    return isBold ? entry.bold : entry.normal;
+  }
+  // 通用回退：去除空格，加权重后缀
+  const base = family.replace(/\s+/g, "");
+  return isBold ? `${base}-Bold` : base;
+}
+
+/**
+ * 清理字体家族名
+ * @param {string} ff
+ * @returns {string}
+ */
+export function cleanFontFamily(ff) {
+  if (!ff) return "Arial";
+  return ff.split(",")[0].trim().replace(/['"]/g, "");
+}
+
+/**
+ * 判断是否为粗体
+ */
+export function isBoldWeight(weight) {
+  if (!weight) return false;
+  return weight === "bold" || parseInt(weight) >= 700;
+}
diff --git a/src/utils/validation.mjs b/src/utils/validation.mjs
new file mode 100644
index 0000000..121ce9e
--- /dev/null
+++ b/src/utils/validation.mjs
@@ -0,0 +1,43 @@
+/**
+ * 输入验证模块
+ */
+
+import fs from "fs";
+import path from "path";
+
+const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
+
+/**
+ * 验证输入文件
+ * @param {string} filePath
+ * @throws {Error}
+ */
+export function validateInput(filePath) {
+  if (!filePath) {
+    throw new Error("未指定输入文件");
+  }
+
+  const resolved = path.resolve(filePath);
+
+  if (!fs.existsSync(resolved)) {
+    throw new Error(`文件不存在: ${resolved}`);
+  }
+
+  const stat = fs.statSync(resolved);
+  if (!stat.isFile()) {
+    throw new Error(`不是文件: ${resolved}`);
+  }
+
+  if (stat.size > MAX_FILE_SIZE) {
+    throw new Error(`文件过大 (${(stat.size / 1024 / 1024).toFixed(1)}MB)，限制 ${MAX_FILE_SIZE / 1024 / 1024}MB`);
+  }
+
+  if (stat.size === 0) {
+    throw new Error("文件为空");
+  }
+
+  const ext = path.extname(resolved).toLowerCase();
+  if (ext !== ".svg") {
+    throw new Error(`不支持的文件格式: ${ext}，仅支持 .svg`);
+  }
+}
diff --git a/svg2psd.py b/svg2psd.py
deleted file mode 100644
index 218add4..0000000
--- a/svg2psd.py
+++ /dev/null
@@ -1,204 +0,0 @@
-#!/usr/bin/env python3
-"""SVG to PSD converter CLI tool - each SVG element becomes a separate PSD layer."""
-
-import argparse
-import copy
-import io
-import os
-import re
-import sys
-from pathlib import Path
-from xml.etree import ElementTree as ET
-
-# Ensure Homebrew cairo is discoverable
-if sys.platform == "darwin":
-    os.environ.setdefault("DYLD_FALLBACK_LIBRARY_PATH", "/opt/homebrew/lib:/usr/local/lib")
-
-import cairosvg
-import numpy as np
-from PIL import Image
-from psd_tools import PSDImage
-from psd_tools.constants import Compression
-
-SVG_NS = "http://www.w3.org/2000/svg"
-XLINK_NS = "http://www.w3.org/1999/xlink"
-ET.register_namespace("", SVG_NS)
-ET.register_namespace("xlink", XLINK_NS)
-
-
-def get_svg_canvas(root):
-    """Get canvas width/height from SVG root."""
-    w = int(float(root.get("width", 1920)))
-    h = int(float(root.get("height", 1080)))
-    return w, h
-
-
-def collect_elements(root):
-    """Collect renderable child elements from SVG, skipping <defs>."""
-    ns = "{%s}" % SVG_NS
-    elements = []
-    # Find the main content group (usually first <g>), or use direct children
-    top_children = list(root)
-    for child in top_children:
-        tag = child.tag.replace(ns, "")
-        if tag == "defs":
-            continue
-        if tag == "g":
-            # Unpack one level of wrapper groups to get actual content
-            inner = list(child)
-            for item in inner:
-                itag = item.tag.replace(ns, "")
-                if itag == "defs":
-                    continue
-                # If it's a group with filter/clip, look inside
-                if itag == "g":
-                    for sub in list(item):
-                        stag = sub.tag.replace(ns, "")
-                        if stag != "defs":
-                            elements.append(sub)
-                else:
-                    elements.append(item)
-        else:
-            elements.append(child)
-    return elements
-
-
-def guess_layer_name(elem, index):
-    """Try to generate a meaningful layer name."""
-    ns = "{%s}" % SVG_NS
-    tag = elem.tag.replace(ns, "")
-    elem_id = elem.get("id", "")
-    if elem_id:
-        return elem_id
-
-    fill = elem.get("fill", "") or elem.get("style", "")
-    if "url(#pattern" in fill or tag == "image":
-        return "Image_%d" % index
-    if tag == "rect":
-        return "Rect_%d" % index
-    if tag == "circle" or tag == "ellipse":
-        return "Shape_%d" % index
-
-    # For paths, try to identify by fill color or position
-    d = elem.get("d", "")
-    if d:
-        # Very rough heuristic: long path = likely text outline
-        if len(d) > 500:
-            return "Text_%d" % index
-        return "Path_%d" % index
-
-    return "%s_%d" % (tag, index)
-
-
-def render_element_to_image(svg_root, elem, canvas_w, canvas_h, scale, dpi):
-    """Render a single SVG element by creating a temporary SVG with only that element."""
-    # Deep copy the root to preserve defs (filters, patterns, clipPaths, images)
-    new_root = copy.deepcopy(svg_root)
-    ns = "{%s}" % SVG_NS
-
-    # Find and remove all non-defs children, then add our element
-    defs_elems = []
-    to_remove = []
-    for child in list(new_root):
-        tag = child.tag.replace(ns, "")
-        if tag == "defs":
-            defs_elems.append(child)
-        else:
-            to_remove.append(child)
-    for child in to_remove:
-        new_root.remove(child)
-
-    # Add the element directly (no wrapper group, no clip/filter that might hide it)
-    new_elem = copy.deepcopy(elem)
-    new_root.append(new_elem)
-
-    svg_bytes = ET.tostring(new_root, encoding="unicode")
-    # Ensure XML declaration
-    svg_str = '<?xml version="1.0" encoding="UTF-8"?>\n' + svg_bytes
-
-    try:
-        png_data = cairosvg.svg2png(
-            bytestring=svg_str.encode("utf-8"),
-            output_width=int(canvas_w * scale),
-            output_height=int(canvas_h * scale),
-            dpi=dpi,
-        )
-        img = Image.open(io.BytesIO(png_data)).convert("RGBA")
-        # Check if the layer has any visible content
-        arr = np.array(img)
-        if arr[:, :, 3].max() == 0:
-            return None
-        return img
-    except Exception as e:
-        print(f"  警告: 渲染元素失败 - {e}", file=sys.stderr)
-        return None
-
-
-def svg_to_psd(svg_path, output_path=None, scale=1.0, dpi=300):
-    svg_path = Path(svg_path)
-    if not svg_path.exists():
-        print(f"错误: 文件不存在 - {svg_path}", file=sys.stderr)
-        sys.exit(1)
-
-    if output_path is None:
-        output_path = svg_path.with_suffix(".psd")
-    else:
-        output_path = Path(output_path)
-
-    # Parse SVG
-    tree = ET.parse(str(svg_path))
-    root = tree.getroot()
-    canvas_w, canvas_h = get_svg_canvas(root)
-
-    # Collect elements
-    elements = collect_elements(root)
-    if not elements:
-        print(f"警告: SVG 中没有找到可渲染的元素", file=sys.stderr)
-        return
-
-    psd_w = int(canvas_w * scale)
-    psd_h = int(canvas_h * scale)
-    print(f"解析: {svg_path} ({canvas_w}x{canvas_h}), 发现 {len(elements)} 个元素")
-
-    # Create PSD
-    psd = PSDImage.new("RGBA", (psd_w, psd_h))
-
-    layer_count = 0
-    for i, elem in enumerate(elements):
-        name = guess_layer_name(elem, i)
-        img = render_element_to_image(root, elem, canvas_w, canvas_h, scale, dpi)
-        if img is None:
-            print(f"  跳过: {name} (空白)")
-            continue
-
-        psd.create_pixel_layer(
-            image=img,
-            name=name,
-            compression=Compression.RLE,
-        )
-        layer_count += 1
-        print(f"  图层: {name}")
-
-    psd.save(str(output_path))
-    print(f"完成: {output_path} ({psd_w}x{psd_h}, {layer_count} 个图层)")
-
-
-def main():
-    parser = argparse.ArgumentParser(description="SVG 转 PSD 工具（保留图层）")
-    parser.add_argument("input", nargs="+", help="输入的 SVG 文件路径（支持多个）")
-    parser.add_argument("-o", "--output", help="输出 PSD 路径（仅单文件时有效）")
-    parser.add_argument("-s", "--scale", type=float, default=1.0, help="缩放倍数 (默认: 1.0)")
-    parser.add_argument("--dpi", type=int, default=300, help="渲染 DPI (默认: 300)")
-
-    args = parser.parse_args()
-
-    if args.output and len(args.input) > 1:
-        print("错误: 多文件模式下不支持 -o 参数", file=sys.stderr)
-        sys.exit(1)
-
-    for svg_file in args.input:
-        svg_to_psd(svg_file, args.output, args.scale, args.dpi)
-
-
-if __name__ == "__main__":
-    main()

From 05f97dfddecf4a7739d38d5a3a73f33ae5cd7c1a Mon Sep 17 00:00:00 2001
From: RandomYang <decoderyang@gmail.com>
Date: Wed, 25 Feb 2026 15:18:47 +0800
Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E5=A5=97=E4=BB=B6=20&=20=E4=BF=AE=E5=A4=8D=20transfor?=
 =?UTF-8?q?m=20=E5=8F=98=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 package.json                       |   3 +-
 src/psd/builder.mjs                |   2 +-
 src/render/renderer.mjs            |  22 ++++-
 src/svg/text-extractor.mjs         |   7 +-
 test/fixtures/empty.svg            |   3 +
 test/fixtures/foreign-object.svg   |   9 ++
 test/fixtures/nested-groups.svg    |  11 +++
 test/fixtures/simple.svg           |   4 +
 test/fixtures/styled.svg           |   6 ++
 test/fixtures/text-spans.svg       |   7 ++
 test/fixtures/text-transformed.svg |  36 ++++++++
 test/fixtures/transforms.svg       |  14 +++
 test/integration/convert.test.mjs  |  81 ++++++++++++++++++
 test/psd/builder.test.mjs          |  85 ++++++++++++++++++
 test/psd/effects.test.mjs          |  56 ++++++++++++
 test/psd/text-layer.test.mjs       |  87 +++++++++++++++++++
 test/render/renderer.test.mjs      |  54 ++++++++++++
 test/svg/parser.test.mjs           |  48 +++++++++++
 test/svg/style-resolver.test.mjs   |  63 ++++++++++++++
 test/svg/text-extractor.test.mjs   | 133 +++++++++++++++++++++++++++++
 test/svg/transforms.test.mjs       | 112 ++++++++++++++++++++++++
 test/svg/walker.test.mjs           |  85 ++++++++++++++++++
 test/utils/color.test.mjs          |  85 ++++++++++++++++++
 test/utils/font.test.mjs           |  61 +++++++++++++
 test/utils/validation.test.mjs     |  48 +++++++++++
 25 files changed, 1115 insertions(+), 7 deletions(-)
 create mode 100644 test/fixtures/empty.svg
 create mode 100644 test/fixtures/foreign-object.svg
 create mode 100644 test/fixtures/nested-groups.svg
 create mode 100644 test/fixtures/simple.svg
 create mode 100644 test/fixtures/styled.svg
 create mode 100644 test/fixtures/text-spans.svg
 create mode 100644 test/fixtures/text-transformed.svg
 create mode 100644 test/fixtures/transforms.svg
 create mode 100644 test/integration/convert.test.mjs
 create mode 100644 test/psd/builder.test.mjs
 create mode 100644 test/psd/effects.test.mjs
 create mode 100644 test/psd/text-layer.test.mjs
 create mode 100644 test/render/renderer.test.mjs
 create mode 100644 test/svg/parser.test.mjs
 create mode 100644 test/svg/style-resolver.test.mjs
 create mode 100644 test/svg/text-extractor.test.mjs
 create mode 100644 test/svg/transforms.test.mjs
 create mode 100644 test/svg/walker.test.mjs
 create mode 100644 test/utils/color.test.mjs
 create mode 100644 test/utils/font.test.mjs
 create mode 100644 test/utils/validation.test.mjs

diff --git a/package.json b/package.json
index 8f356d0..7f1b6a5 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "main": "src/index.mjs",
   "type": "module",
   "scripts": {
-    "start": "node src/index.mjs"
+    "start": "node src/index.mjs",
+    "test": "node --test test/**/*.test.mjs"
   },
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
diff --git a/src/psd/builder.mjs b/src/psd/builder.mjs
index 95a9d11..0a03a80 100644
--- a/src/psd/builder.mjs
+++ b/src/psd/builder.mjs
@@ -104,7 +104,7 @@ export async function buildPsd(descriptors, svgRoot, width, height, scale, optio
 
 async function renderAsPixelLayer(desc, svgRoot, width, height, scale) {
   try {
-    const result = renderElement(desc.element, svgRoot, width, height, scale);
+    const result = renderElement(desc.element, svgRoot, width, height, scale, desc.transform);
     if (!result) return null;
 
     const layer = {
diff --git a/src/render/renderer.mjs b/src/render/renderer.mjs
index 0fcfa45..4d28a7d 100644
--- a/src/render/renderer.mjs
+++ b/src/render/renderer.mjs
@@ -15,10 +15,11 @@ const serializer = new XMLSerializer();
  * @param {number} width - 画布宽度
  * @param {number} height - 画布高度
  * @param {number} scale - 缩放因子
+ * @param {number[]} [transform] - 累积变换矩阵 [a,b,c,d,e,f]
  * @returns {{ data: Uint8ClampedArray, width: number, height: number, top: number, left: number, right: number, bottom: number } | null}
  */
-export function renderElement(element, svgRoot, width, height, scale) {
-  const svgStr = buildStandaloneSvg(element, svgRoot);
+export function renderElement(element, svgRoot, width, height, scale, transform) {
+  const svgStr = buildStandaloneSvg(element, svgRoot, transform);
   return renderSvgString(svgStr, width, height, scale);
 }
 
@@ -68,8 +69,11 @@ export function renderSvgString(svgStr, width, height, scale) {
 /**
  * 构建只包含指定元素的完整 SVG 字符串
  * 保留原始 SVG 的 defs、style 和 viewBox
+ * @param {Element} element
+ * @param {Element} svgRoot
+ * @param {number[]} [transform] - 累积变换矩阵 [a,b,c,d,e,f]
  */
-export function buildStandaloneSvg(element, svgRoot) {
+export function buildStandaloneSvg(element, svgRoot, transform) {
   const doc = svgRoot.ownerDocument;
   const clone = svgRoot.cloneNode(false); // 浅克隆 <svg> 属性
 
@@ -87,11 +91,23 @@ export function buildStandaloneSvg(element, svgRoot) {
   // 克隆目标元素，移除 foreignObject（文字单独处理）
   const elClone = element.cloneNode(true);
   removeForeignObjects(elClone);
+
+  // 将累积变换矩阵应用到克隆元素上（替换元素自身的 transform，
+  // 因为累积矩阵已包含元素自身的变换）
+  if (transform && !isIdentity(transform)) {
+    const [a, b, c, d, e, f] = transform;
+    elClone.setAttribute("transform", `matrix(${a},${b},${c},${d},${e},${f})`);
+  }
+
   clone.appendChild(elClone);
 
   return '<?xml version="1.0" encoding="UTF-8"?>\n' + serializer.serializeToString(clone);
 }
 
+function isIdentity(m) {
+  return m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
+}
+
 function removeForeignObjects(node) {
   const toRemove = [];
   const children = node.childNodes || [];
diff --git a/src/svg/text-extractor.mjs b/src/svg/text-extractor.mjs
index c45ff72..ef15871 100644
--- a/src/svg/text-extractor.mjs
+++ b/src/svg/text-extractor.mjs
@@ -73,10 +73,13 @@ function extractFromText(textEl, transform, viewBox) {
   const fullText = runs.map((r) => r.text).join("");
   const textAnchor = styles["text-anchor"] || "start";
 
+  // 从累积变换矩阵中提取平移分量
+  const { tx, ty } = getTranslation(transform);
+
   return {
     text: fullText,
-    x,
-    y,
+    x: x + tx,
+    y: y + ty,
     runs,
     textAnchor,
     isBox: false,
diff --git a/test/fixtures/empty.svg b/test/fixtures/empty.svg
new file mode 100644
index 0000000..c178cf0
--- /dev/null
+++ b/test/fixtures/empty.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <defs><clipPath id="c"><rect width="100" height="100"/></clipPath></defs>
+</svg>
diff --git a/test/fixtures/foreign-object.svg b/test/fixtures/foreign-object.svg
new file mode 100644
index 0000000..1ba281e
--- /dev/null
+++ b/test/fixtures/foreign-object.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
+  <g transform="translate(20, 30)">
+    <foreignObject x="0" y="0" width="200" height="100">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: Inter; font-size: 18px; color: #333;">
+        Hello from foreignObject
+      </div>
+    </foreignObject>
+  </g>
+</svg>
diff --git a/test/fixtures/nested-groups.svg b/test/fixtures/nested-groups.svg
new file mode 100644
index 0000000..e9d0968
--- /dev/null
+++ b/test/fixtures/nested-groups.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <g id="outer">
+    <g id="inner1">
+      <rect x="10" y="10" width="100" height="100" fill="red"/>
+      <circle cx="60" cy="60" r="30" fill="blue"/>
+    </g>
+    <g id="inner2">
+      <rect x="200" y="200" width="100" height="100" fill="green"/>
+    </g>
+  </g>
+</svg>
diff --git a/test/fixtures/simple.svg b/test/fixtures/simple.svg
new file mode 100644
index 0000000..22e2065
--- /dev/null
+++ b/test/fixtures/simple.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+  <rect x="10" y="10" width="80" height="80" fill="#FF0000"/>
+  <circle cx="150" cy="50" r="40" fill="#00FF00"/>
+</svg>
diff --git a/test/fixtures/styled.svg b/test/fixtures/styled.svg
new file mode 100644
index 0000000..b2d1981
--- /dev/null
+++ b/test/fixtures/styled.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <rect x="10" y="10" width="100" height="100" fill="red" opacity="0.5"/>
+  <rect x="50" y="50" width="100" height="100" fill="blue" style="mix-blend-mode: multiply"/>
+  <rect x="200" y="200" width="80" height="80" fill="green" visibility="hidden"/>
+  <rect x="0" y="0" width="50" height="50" fill="orange" style="display:none"/>
+</svg>
diff --git a/test/fixtures/text-spans.svg b/test/fixtures/text-spans.svg
new file mode 100644
index 0000000..4718790
--- /dev/null
+++ b/test/fixtures/text-spans.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
+  <text x="10" y="50" font-family="Arial" font-size="24" fill="#333">
+    <tspan font-weight="bold" fill="red">Bold Red</tspan>
+    <tspan font-size="16" fill="blue"> Small Blue</tspan>
+  </text>
+  <text x="10" y="100" font-family="Inter" font-size="18" fill="black">Simple text</text>
+</svg>
diff --git a/test/fixtures/text-transformed.svg b/test/fixtures/text-transformed.svg
new file mode 100644
index 0000000..f079383
--- /dev/null
+++ b/test/fixtures/text-transformed.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
+  <!-- 无 transform 的文字（基准对照） -->
+  <text x="50" y="50" font-family="Arial" font-size="24" fill="#333">No Transform</text>
+
+  <!-- 单层 translate 内的文字 -->
+  <g transform="translate(100, 200)">
+    <text x="10" y="30" font-family="Arial" font-size="20" fill="red">Translated Text</text>
+  </g>
+
+  <!-- 嵌套 translate 内的文字 -->
+  <g transform="translate(50, 100)">
+    <g transform="translate(100, 50)">
+      <text x="5" y="20" font-family="Arial" font-size="18" fill="blue">Nested Translate</text>
+    </g>
+  </g>
+
+  <!-- translate 内的 foreignObject -->
+  <g transform="translate(200, 400)">
+    <foreignObject x="10" y="10" width="300" height="50">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: Arial; font-size: 16px; color: green;">Translated ForeignObject</div>
+    </foreignObject>
+  </g>
+
+  <!-- translate 内的多 tspan 文字 -->
+  <g transform="translate(400, 300)">
+    <text x="0" y="30" font-family="Arial" font-size="22" fill="#333">
+      <tspan font-weight="bold" fill="#ff6b35">Bold</tspan>
+      <tspan font-size="16" fill="#00d2ff"> and Small</tspan>
+    </text>
+  </g>
+
+  <!-- 带 text-anchor="middle" 的 translate 文字 -->
+  <g transform="translate(400, 500)">
+    <text x="100" y="30" text-anchor="middle" font-family="Georgia" font-size="28" fill="#7b2ff7">Centered</text>
+  </g>
+</svg>
diff --git a/test/fixtures/transforms.svg b/test/fixtures/transforms.svg
new file mode 100644
index 0000000..f7b974f
--- /dev/null
+++ b/test/fixtures/transforms.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <g transform="translate(100, 100)">
+    <rect width="50" height="50" fill="red"/>
+  </g>
+  <g transform="rotate(45, 200, 200)">
+    <rect x="175" y="175" width="50" height="50" fill="blue"/>
+  </g>
+  <g transform="scale(2)">
+    <rect x="10" y="300" width="20" height="20" fill="green"/>
+  </g>
+  <g transform="translate(300, 0) rotate(30) scale(1.5)">
+    <rect width="40" height="40" fill="purple"/>
+  </g>
+</svg>
diff --git a/test/integration/convert.test.mjs b/test/integration/convert.test.mjs
new file mode 100644
index 0000000..33a1a83
--- /dev/null
+++ b/test/integration/convert.test.mjs
@@ -0,0 +1,81 @@
+import { describe, it, after } from "node:test";
+import assert from "node:assert/strict";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { convertSvgToPsd } from "../../src/converter.mjs";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const fixturesDir = path.join(__dirname, "..", "fixtures");
+const outputDir = path.join(__dirname, "..", "output");
+
+// 确保输出目录存在
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+const outputs = [];
+
+after(() => {
+  for (const f of outputs) {
+    try { fs.unlinkSync(f); } catch {}
+  }
+  try { fs.rmdirSync(outputDir); } catch {}
+});
+
+describe("integration: convertSvgToPsd", () => {
+  it("simple.svg → PSD 文件存在且 > 0 bytes", async () => {
+    const input = path.join(fixturesDir, "simple.svg");
+    const output = path.join(outputDir, "simple.psd");
+    outputs.push(output);
+    const result = await convertSvgToPsd(input, output);
+    assert.strictEqual(result, output);
+    const stat = fs.statSync(output);
+    assert.ok(stat.size > 0);
+  });
+
+  it("nested-groups.svg → PSD 有图层组", async () => {
+    const input = path.join(fixturesDir, "nested-groups.svg");
+    const output = path.join(outputDir, "nested-groups.psd");
+    outputs.push(output);
+    await convertSvgToPsd(input, output);
+    const stat = fs.statSync(output);
+    assert.ok(stat.size > 0);
+  });
+
+  it("text-spans.svg → PSD 包含 text layer", async () => {
+    const input = path.join(fixturesDir, "text-spans.svg");
+    const output = path.join(outputDir, "text-spans.psd");
+    outputs.push(output);
+    await convertSvgToPsd(input, output);
+    const stat = fs.statSync(output);
+    assert.ok(stat.size > 0);
+  });
+
+  it("styled.svg → PSD 生成成功", async () => {
+    const input = path.join(fixturesDir, "styled.svg");
+    const output = path.join(outputDir, "styled.psd");
+    outputs.push(output);
+    await convertSvgToPsd(input, output);
+    const stat = fs.statSync(output);
+    assert.ok(stat.size > 0);
+  });
+
+  it("transforms.svg → PSD 生成成功", async () => {
+    const input = path.join(fixturesDir, "transforms.svg");
+    const output = path.join(outputDir, "transforms.psd");
+    outputs.push(output);
+    await convertSvgToPsd(input, output);
+    const stat = fs.statSync(output);
+    assert.ok(stat.size > 0);
+  });
+
+  it("text-transformed.svg → 含 transform 的文字图层正确生成", async () => {
+    const input = path.join(fixturesDir, "text-transformed.svg");
+    const output = path.join(outputDir, "text-transformed.psd");
+    outputs.push(output);
+    await convertSvgToPsd(input, output);
+    const stat = fs.statSync(output);
+    assert.ok(stat.size > 0);
+  });
+});
diff --git a/test/psd/builder.test.mjs b/test/psd/builder.test.mjs
new file mode 100644
index 0000000..a72e45b
--- /dev/null
+++ b/test/psd/builder.test.mjs
@@ -0,0 +1,85 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { parseSvgString } from "../../src/svg/parser.mjs";
+import { buildPsd } from "../../src/psd/builder.mjs";
+
+function makeSvgRoot() {
+  const { svg } = parseSvgString('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"></svg>');
+  return svg;
+}
+
+describe("buildPsd", () => {
+  it("hidden descriptor → layer.hidden=true", async () => {
+    const svgRoot = makeSvgRoot();
+    const psd = await buildPsd(
+      [{ type: "graphic", name: "hidden-rect", element: null, hidden: true }],
+      svgRoot, 100, 100, 1
+    );
+    assert.strictEqual(psd.children.length, 1);
+    assert.strictEqual(psd.children[0].hidden, true);
+    assert.strictEqual(psd.children[0].name, "hidden-rect");
+  });
+
+  it("空 descriptors → 无 children", async () => {
+    const svgRoot = makeSvgRoot();
+    const psd = await buildPsd([], svgRoot, 100, 100, 1);
+    assert.strictEqual(psd.children.length, 0);
+  });
+
+  it("group descriptor → children 数组", async () => {
+    const svgRoot = makeSvgRoot();
+    const psd = await buildPsd(
+      [{
+        type: "group",
+        name: "mygroup",
+        children: [
+          { type: "graphic", name: "child1", element: null, hidden: true },
+          { type: "graphic", name: "child2", element: null, hidden: true },
+        ],
+      }],
+      svgRoot, 100, 100, 1
+    );
+    assert.strictEqual(psd.children.length, 1);
+    assert.strictEqual(psd.children[0].name, "mygroup");
+    assert.ok(Array.isArray(psd.children[0].children));
+    assert.strictEqual(psd.children[0].children.length, 2);
+  });
+
+  it("opacity/blendMode 正确映射 (hidden layer)", async () => {
+    const svgRoot = makeSvgRoot();
+    const psd = await buildPsd(
+      [{ type: "graphic", name: "styled", element: null, hidden: true, opacity: 0.5, blendMode: "multiply" }],
+      svgRoot, 100, 100, 1
+    );
+    const layer = psd.children[0];
+    // hidden layers 通过 createHiddenLayer 创建，只有 name 和 hidden
+    assert.strictEqual(layer.hidden, true);
+    assert.strictEqual(layer.name, "styled");
+  });
+
+  it("group 的 opacity/blendMode 正确映射", async () => {
+    const svgRoot = makeSvgRoot();
+    const psd = await buildPsd(
+      [{
+        type: "group",
+        name: "styled-group",
+        opacity: 0.5,
+        blendMode: "multiply",
+        children: [
+          { type: "graphic", name: "child", element: null, hidden: true },
+        ],
+      }],
+      svgRoot, 100, 100, 1
+    );
+    const layer = psd.children[0];
+    assert.strictEqual(layer.opacity, 0.5);
+    assert.strictEqual(layer.blendMode, "multiply");
+  });
+
+  it("width/height 应用 scale", async () => {
+    const svgRoot = makeSvgRoot();
+    const psd = await buildPsd([], svgRoot, 100, 100, 2);
+    assert.strictEqual(psd.width, 200);
+    assert.strictEqual(psd.height, 200);
+  });
+});
diff --git a/test/psd/effects.test.mjs b/test/psd/effects.test.mjs
new file mode 100644
index 0000000..c121a0f
--- /dev/null
+++ b/test/psd/effects.test.mjs
@@ -0,0 +1,56 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { toPsdOpacity, toPsdBlendMode, BLEND_MODE_MAP } from "../../src/psd/effects.mjs";
+
+describe("toPsdOpacity", () => {
+  it("0.5 → 0.5", () => {
+    assert.strictEqual(toPsdOpacity(0.5), 0.5);
+  });
+
+  it("undefined → 1", () => {
+    assert.strictEqual(toPsdOpacity(undefined), 1);
+  });
+
+  it("null → 1", () => {
+    assert.strictEqual(toPsdOpacity(null), 1);
+  });
+
+  it("负值 clamp → 0", () => {
+    assert.strictEqual(toPsdOpacity(-0.5), 0);
+  });
+
+  it("超过1 clamp → 1", () => {
+    assert.strictEqual(toPsdOpacity(1.5), 1);
+  });
+});
+
+describe("toPsdBlendMode", () => {
+  it('"multiply" → "multiply"', () => {
+    assert.strictEqual(toPsdBlendMode("multiply"), "multiply");
+  });
+
+  it('"color-dodge" → "color dodge"', () => {
+    assert.strictEqual(toPsdBlendMode("color-dodge"), "color dodge");
+  });
+
+  it('"unknown" → "normal"', () => {
+    assert.strictEqual(toPsdBlendMode("unknown"), "normal");
+  });
+
+  it("null → 'normal'", () => {
+    assert.strictEqual(toPsdBlendMode(null), "normal");
+  });
+});
+
+describe("BLEND_MODE_MAP", () => {
+  it("包含所有 16 个标准 CSS 混合模式", () => {
+    const standard = [
+      "normal", "multiply", "screen", "overlay", "darken", "lighten",
+      "color-dodge", "color-burn", "hard-light", "soft-light",
+      "difference", "exclusion", "hue", "saturation", "color", "luminosity",
+    ];
+    for (const mode of standard) {
+      assert.ok(mode in BLEND_MODE_MAP, `missing: ${mode}`);
+    }
+  });
+});
diff --git a/test/psd/text-layer.test.mjs b/test/psd/text-layer.test.mjs
new file mode 100644
index 0000000..bc49037
--- /dev/null
+++ b/test/psd/text-layer.test.mjs
@@ -0,0 +1,87 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { parseSvgString } from "../../src/svg/parser.mjs";
+import { extractTextInfo } from "../../src/svg/text-extractor.mjs";
+import { buildTextLayer } from "../../src/psd/text-layer.mjs";
+import { identity } from "../../src/svg/transforms.mjs";
+
+function makeTextDesc(svgStr) {
+  const { svg, viewBox } = parseSvgString(svgStr);
+  const children = svg.childNodes;
+  for (let i = 0; i < children.length; i++) {
+    const node = children[i];
+    if (node.nodeType === 1) {
+      const tag = (node.localName || node.nodeName || "").replace(/^.*:/, "");
+      if (tag === "text" || tag === "foreignObject") {
+        const textInfo = extractTextInfo(node, identity(), viewBox);
+        return {
+          desc: { type: "text", name: `Text: ${textInfo?.text?.slice(0, 30) || ""}`, element: node, transform: identity(), opacity: 1, textInfo },
+          svg,
+          viewBox,
+        };
+      }
+    }
+  }
+  return null;
+}
+
+describe("buildTextLayer", () => {
+  it("构建简单文字图层", () => {
+    const { desc, svg } = makeTextDesc(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="10" y="50" font-family="Arial" font-size="24">Hello</text></svg>'
+    );
+    const layer = buildTextLayer(desc, svg, 200, 200, 1);
+    assert.ok(layer);
+    assert.strictEqual(layer.text.text, "Hello");
+    assert.ok(layer.text.transform);
+    assert.ok(layer.text.style);
+  });
+
+  it("box text (foreignObject) → shapeType=box + boxBounds", () => {
+    const { desc, svg } = makeTextDesc(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
+        <foreignObject x="10" y="20" width="200" height="100">
+          <div xmlns="http://www.w3.org/1999/xhtml">Hello Box</div>
+        </foreignObject>
+      </svg>`
+    );
+    const layer = buildTextLayer(desc, svg, 400, 200, 1);
+    assert.ok(layer);
+    assert.strictEqual(layer.text.shapeType, "box");
+    assert.ok(layer.text.boxBounds);
+    assert.strictEqual(layer.text.boxBounds.left, 10);
+    assert.strictEqual(layer.text.boxBounds.top, 20);
+  });
+
+  it("viewBox offset 正确应用到坐标", () => {
+    const { desc, svg } = makeTextDesc(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="50 50 200 200"><text x="60" y="80" font-family="Arial" font-size="24">Offset</text></svg>'
+    );
+    const layer = buildTextLayer(desc, svg, 200, 200, 1);
+    assert.ok(layer);
+    // x=60, vbX=50 → px = (60-50)*1 = 10
+    assert.strictEqual(layer.text.transform[4], 10);
+    // y=80, vbY=50 → py = (80-50)*1 = 30
+    assert.strictEqual(layer.text.transform[5], 30);
+  });
+
+  it("opacity 传递到 layer", () => {
+    const { desc, svg } = makeTextDesc(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="10" y="50" font-family="Arial" font-size="24">Hello</text></svg>'
+    );
+    desc.opacity = 0.5;
+    const layer = buildTextLayer(desc, svg, 200, 200, 1);
+    assert.strictEqual(layer.opacity, 0.5);
+  });
+
+  it("scale 因子正确应用到 fontSize 和坐标", () => {
+    const { desc, svg } = makeTextDesc(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="10" y="50" font-family="Arial" font-size="24">Scaled</text></svg>'
+    );
+    const layer = buildTextLayer(desc, svg, 200, 200, 2);
+    assert.ok(layer);
+    assert.strictEqual(layer.text.style.fontSize, 48); // 24 * 2
+    assert.strictEqual(layer.text.transform[4], 20); // 10 * 2
+    assert.strictEqual(layer.text.transform[5], 100); // 50 * 2
+  });
+});
diff --git a/test/render/renderer.test.mjs b/test/render/renderer.test.mjs
new file mode 100644
index 0000000..f21635a
--- /dev/null
+++ b/test/render/renderer.test.mjs
@@ -0,0 +1,54 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { parseSvgString } from "../../src/svg/parser.mjs";
+import { buildStandaloneSvg, renderSvgString } from "../../src/render/renderer.mjs";
+
+describe("buildStandaloneSvg", () => {
+  it("生成包含 defs 的完整 SVG", () => {
+    const { svg, doc } = parseSvgString(`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+      <defs><clipPath id="c"><rect width="100" height="100"/></clipPath></defs>
+      <rect width="50" height="50" fill="red"/>
+    </svg>`);
+    // 获取 rect 元素
+    const children = svg.childNodes;
+    let rectEl;
+    for (let i = 0; i < children.length; i++) {
+      const c = children[i];
+      if (c.nodeType === 1 && (c.localName || c.nodeName) === "rect") {
+        rectEl = c;
+        break;
+      }
+    }
+    const result = buildStandaloneSvg(rectEl, svg);
+    assert.ok(result.includes("<?xml"));
+    assert.ok(result.includes("<defs>") || result.includes("clipPath"));
+    assert.ok(result.includes("rect"));
+  });
+});
+
+describe("renderSvgString", () => {
+  it("渲染简单 SVG → 非空像素数据", () => {
+    const svgStr = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="50" height="50" fill="red"/></svg>';
+    const result = renderSvgString(svgStr, 100, 100, 1);
+    assert.ok(result);
+    assert.ok(result.data.length > 0);
+    assert.ok(result.width > 0);
+    assert.ok(result.height > 0);
+  });
+
+  it("返回结果有正确的 bbox", () => {
+    const svgStr = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="10" y="10" width="30" height="30" fill="red"/></svg>';
+    const result = renderSvgString(svgStr, 100, 100, 1);
+    assert.ok(result);
+    assert.ok(result.top >= 0);
+    assert.ok(result.left >= 0);
+    assert.ok(result.right > result.left);
+    assert.ok(result.bottom > result.top);
+  });
+
+  it("全透明 SVG → 返回 null", () => {
+    const svgStr = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="50" height="50" fill="rgba(0,0,0,0)"/></svg>';
+    const result = renderSvgString(svgStr, 100, 100, 1);
+    assert.strictEqual(result, null);
+  });
+});
diff --git a/test/svg/parser.test.mjs b/test/svg/parser.test.mjs
new file mode 100644
index 0000000..9d3f27a
--- /dev/null
+++ b/test/svg/parser.test.mjs
@@ -0,0 +1,48 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import path from "path";
+import { fileURLToPath } from "url";
+import { parseSvg, parseSvgString } from "../../src/svg/parser.mjs";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const fixturesDir = path.join(__dirname, "..", "fixtures");
+
+describe("parseSvg (file)", () => {
+  it("从文件解析 simple.svg", () => {
+    const result = parseSvg(path.join(fixturesDir, "simple.svg"));
+    assert.ok(result.doc);
+    assert.ok(result.svg);
+    assert.strictEqual(result.width, 200);
+    assert.strictEqual(result.height, 200);
+  });
+});
+
+describe("parseSvgString", () => {
+  it("正确提取 width/height", () => {
+    const result = parseSvgString('<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"></svg>');
+    assert.strictEqual(result.width, 400);
+    assert.strictEqual(result.height, 300);
+  });
+
+  it('正确解析 viewBox "0 0 800 600"', () => {
+    const result = parseSvgString('<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 800 600"></svg>');
+    assert.deepStrictEqual(result.viewBox, { x: 0, y: 0, w: 800, h: 600 });
+  });
+
+  it("无 width/height 时从 viewBox 推断", () => {
+    const result = parseSvgString('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768"></svg>');
+    assert.strictEqual(result.width, 1024);
+    assert.strictEqual(result.height, 768);
+  });
+
+  it("无 viewBox 时默认 800×600", () => {
+    const result = parseSvgString('<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+    assert.strictEqual(result.width, 800);
+    assert.strictEqual(result.height, 600);
+    assert.strictEqual(result.viewBox, null);
+  });
+
+  it("无效 XML → 抛错", () => {
+    assert.throws(() => parseSvgString("<not-valid<<>>"), /解析错误|无效/);
+  });
+});
diff --git a/test/svg/style-resolver.test.mjs b/test/svg/style-resolver.test.mjs
new file mode 100644
index 0000000..b079632
--- /dev/null
+++ b/test/svg/style-resolver.test.mjs
@@ -0,0 +1,63 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { DOMParser } from "@xmldom/xmldom";
+import { parseStyleAttr, getStyleValue, resolveStyles } from "../../src/svg/style-resolver.mjs";
+
+function createElement(xml) {
+  const doc = new DOMParser().parseFromString(
+    `<svg xmlns="http://www.w3.org/2000/svg">${xml}</svg>`,
+    "image/svg+xml"
+  );
+  return doc.documentElement.firstChild;
+}
+
+describe("parseStyleAttr", () => {
+  it("解析多属性", () => {
+    const result = parseStyleAttr("fill:red; font-size:16px");
+    assert.strictEqual(result.fill, "red");
+    assert.strictEqual(result["font-size"], "16px");
+  });
+
+  it("空 style → 空对象", () => {
+    assert.deepStrictEqual(parseStyleAttr(""), {});
+    assert.deepStrictEqual(parseStyleAttr(null), {});
+  });
+});
+
+describe("getStyleValue", () => {
+  it("style 属性优先于表现属性", () => {
+    const el = createElement('<rect fill="blue" style="fill:red"/>');
+    assert.strictEqual(getStyleValue(el, "fill"), "red");
+  });
+
+  it("表现属性优先于 inherited", () => {
+    const el = createElement('<rect fill="blue"/>');
+    assert.strictEqual(getStyleValue(el, "fill", "green"), "blue");
+  });
+
+  it("style 优先于 inherited 和表现属性", () => {
+    const el = createElement('<rect fill="blue" style="fill:green"/>');
+    assert.strictEqual(getStyleValue(el, "fill", "red"), "green");
+  });
+});
+
+describe("resolveStyles", () => {
+  it("自身属性覆盖继承", () => {
+    const el = createElement('<rect fill="red" font-weight="bold"/>');
+    const resolved = resolveStyles(el, { "font-weight": "normal", "fill": "blue" });
+    assert.strictEqual(resolved.fill, "red");
+    assert.strictEqual(resolved["font-weight"], "bold");
+  });
+
+  it("style 属性最高优先级", () => {
+    const el = createElement('<rect fill="blue" style="fill:green"/>');
+    const resolved = resolveStyles(el, { fill: "red" });
+    assert.strictEqual(resolved.fill, "green");
+  });
+
+  it("mix-blend-mode 从 style 中解析", () => {
+    const el = createElement('<rect style="mix-blend-mode: multiply"/>');
+    const resolved = resolveStyles(el);
+    assert.strictEqual(resolved["mix-blend-mode"], "multiply");
+  });
+});
diff --git a/test/svg/text-extractor.test.mjs b/test/svg/text-extractor.test.mjs
new file mode 100644
index 0000000..b0a78a4
--- /dev/null
+++ b/test/svg/text-extractor.test.mjs
@@ -0,0 +1,133 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { parseSvgString } from "../../src/svg/parser.mjs";
+import { extractTextInfo } from "../../src/svg/text-extractor.mjs";
+import { identity, parseTransform, multiply } from "../../src/svg/transforms.mjs";
+
+function getTextElement(svgStr) {
+  const { svg, viewBox } = parseSvgString(svgStr);
+  const children = svg.childNodes;
+  for (let i = 0; i < children.length; i++) {
+    const node = children[i];
+    if (node.nodeType === 1) {
+      const tag = (node.localName || node.nodeName || "").replace(/^.*:/, "");
+      if (tag === "text" || tag === "foreignObject") return { el: node, viewBox };
+    }
+  }
+  return null;
+}
+
+describe("extractTextInfo", () => {
+  it("简单 <text> 提取文本和坐标", () => {
+    const { el, viewBox } = getTextElement(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><text x="10" y="50" font-family="Arial" font-size="24">Hello</text></svg>'
+    );
+    const info = extractTextInfo(el, identity(), viewBox);
+    assert.ok(info);
+    assert.strictEqual(info.text, "Hello");
+    assert.strictEqual(info.x, 10);
+    assert.strictEqual(info.y, 50);
+    assert.strictEqual(info.isBox, false);
+  });
+
+  it("多 <tspan> → 多个 runs", () => {
+    const { el, viewBox } = getTextElement(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+        <text x="10" y="50" font-family="Arial" font-size="24" fill="#333">
+          <tspan font-weight="bold" fill="red">Bold</tspan>
+          <tspan font-size="16" fill="blue">Small</tspan>
+        </text>
+      </svg>`
+    );
+    const info = extractTextInfo(el, identity(), viewBox);
+    assert.ok(info);
+    assert.strictEqual(info.runs.length, 2);
+    assert.strictEqual(info.runs[0].text, "Bold");
+    assert.strictEqual(info.runs[0].fauxBold, true);
+    assert.strictEqual(info.runs[1].text, "Small");
+    assert.strictEqual(info.runs[1].fontSize, 16);
+  });
+
+  it("<foreignObject> → isBox=true + boxBounds", () => {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
+      <foreignObject x="10" y="20" width="200" height="100">
+        <div xmlns="http://www.w3.org/1999/xhtml">Hello</div>
+      </foreignObject>
+    </svg>`;
+    const { el, viewBox } = getTextElement(svg);
+    const info = extractTextInfo(el, identity(), viewBox);
+    assert.ok(info);
+    assert.strictEqual(info.isBox, true);
+    assert.ok(info.boxBounds);
+    assert.strictEqual(info.boxBounds.width, 200);
+    assert.strictEqual(info.boxBounds.height, 100);
+  });
+
+  it("空文本 → null", () => {
+    const { el, viewBox } = getTextElement(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><text x="10" y="50"></text></svg>'
+    );
+    const info = extractTextInfo(el, identity(), viewBox);
+    assert.strictEqual(info, null);
+  });
+
+  it("样式继承到 runs", () => {
+    const { el, viewBox } = getTextElement(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><text x="10" y="50" font-family="Inter" font-size="20" fill="blue">Test</text></svg>'
+    );
+    const info = extractTextInfo(el, identity(), viewBox);
+    assert.ok(info);
+    assert.strictEqual(info.runs[0].fontFamily, "Inter");
+    assert.strictEqual(info.runs[0].fontSize, 20);
+    assert.deepStrictEqual(info.runs[0].fillColor, { r: 0, g: 0, b: 255 });
+  });
+
+  it("<text> 应用 translate 变换到坐标", () => {
+    const { el, viewBox } = getTextElement(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><text x="10" y="30" font-family="Arial" font-size="20">Moved</text></svg>'
+    );
+    const transform = parseTransform("translate(100, 200)");
+    const info = extractTextInfo(el, transform, viewBox);
+    assert.ok(info);
+    assert.strictEqual(info.x, 110);
+    assert.strictEqual(info.y, 230);
+  });
+
+  it("<text> 应用嵌套 translate 变换到坐标", () => {
+    const { el, viewBox } = getTextElement(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><text x="5" y="20" font-family="Arial" font-size="18">Nested</text></svg>'
+    );
+    const outer = parseTransform("translate(50, 100)");
+    const inner = parseTransform("translate(100, 50)");
+    const accumulated = multiply(outer, inner);
+    const info = extractTextInfo(el, accumulated, viewBox);
+    assert.ok(info);
+    assert.strictEqual(info.x, 155);
+    assert.strictEqual(info.y, 170);
+  });
+
+  it("<text> identity 变换不改变坐标", () => {
+    const { el, viewBox } = getTextElement(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><text x="50" y="80" font-family="Arial" font-size="20">Static</text></svg>'
+    );
+    const info = extractTextInfo(el, identity(), viewBox);
+    assert.ok(info);
+    assert.strictEqual(info.x, 50);
+    assert.strictEqual(info.y, 80);
+  });
+
+  it("<foreignObject> 应用 translate 变换到坐标", () => {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+      <foreignObject x="10" y="10" width="200" height="50">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="font-size: 16px;">Hello</div>
+      </foreignObject>
+    </svg>`;
+    const { el, viewBox } = getTextElement(svg);
+    const transform = parseTransform("translate(200, 400)");
+    const info = extractTextInfo(el, transform, viewBox);
+    assert.ok(info);
+    assert.strictEqual(info.x, 210);
+    assert.strictEqual(info.boxBounds.x, 210);
+    assert.strictEqual(info.boxBounds.y, 410);
+  });
+});
diff --git a/test/svg/transforms.test.mjs b/test/svg/transforms.test.mjs
new file mode 100644
index 0000000..a451d04
--- /dev/null
+++ b/test/svg/transforms.test.mjs
@@ -0,0 +1,112 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { identity, parseTransform, multiply, transformPoint, getTranslation } from "../../src/svg/transforms.mjs";
+
+const EPSILON = 1e-10;
+
+function assertMatrixClose(actual, expected, msg) {
+  assert.strictEqual(actual.length, expected.length, msg);
+  for (let i = 0; i < expected.length; i++) {
+    assert.ok(
+      Math.abs(actual[i] - expected[i]) < EPSILON,
+      `${msg || ""} index ${i}: ${actual[i]} ≈ ${expected[i]}`
+    );
+  }
+}
+
+describe("identity", () => {
+  it("返回单位矩阵", () => {
+    assert.deepStrictEqual(identity(), [1, 0, 0, 1, 0, 0]);
+  });
+});
+
+describe("parseTransform", () => {
+  it("translate(10, 20)", () => {
+    assert.deepStrictEqual(parseTransform("translate(10, 20)"), [1, 0, 0, 1, 10, 20]);
+  });
+
+  it("scale(2)", () => {
+    assert.deepStrictEqual(parseTransform("scale(2)"), [2, 0, 0, 2, 0, 0]);
+  });
+
+  it("scale(2, 3)", () => {
+    assert.deepStrictEqual(parseTransform("scale(2, 3)"), [2, 0, 0, 3, 0, 0]);
+  });
+
+  it("rotate(90) → cos/sin 验证", () => {
+    const m = parseTransform("rotate(90)");
+    assertMatrixClose(m, [Math.cos(Math.PI/2), Math.sin(Math.PI/2), -Math.sin(Math.PI/2), Math.cos(Math.PI/2), 0, 0]);
+  });
+
+  it("rotate(45, 100, 100) 带中心点旋转", () => {
+    const m = parseTransform("rotate(45, 100, 100)");
+    const angle = 45 * Math.PI / 180;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const expected = [cos, sin, -sin, cos, 100*(1-cos)+100*sin, 100*(1-cos)-100*sin];
+    assertMatrixClose(m, expected);
+  });
+
+  it("skewX(45)", () => {
+    const m = parseTransform("skewX(45)");
+    assertMatrixClose(m, [1, 0, Math.tan(Math.PI/4), 1, 0, 0]);
+  });
+
+  it("skewY(30)", () => {
+    const m = parseTransform("skewY(30)");
+    assertMatrixClose(m, [1, Math.tan(Math.PI/6), 0, 1, 0, 0]);
+  });
+
+  it("matrix(1,0,0,1,50,60)", () => {
+    assert.deepStrictEqual(parseTransform("matrix(1,0,0,1,50,60)"), [1, 0, 0, 1, 50, 60]);
+  });
+
+  it("链式: translate(10,20) scale(2)", () => {
+    const m = parseTransform("translate(10,20) scale(2)");
+    // translate(10,20) * scale(2) = [2,0,0,2,10,20]
+    assertMatrixClose(m, [2, 0, 0, 2, 10, 20]);
+  });
+
+  it("空字符串 → identity", () => {
+    assert.deepStrictEqual(parseTransform(""), [1, 0, 0, 1, 0, 0]);
+  });
+
+  it("null → identity", () => {
+    assert.deepStrictEqual(parseTransform(null), [1, 0, 0, 1, 0, 0]);
+  });
+});
+
+describe("multiply", () => {
+  it("identity * A = A", () => {
+    const A = [2, 0, 0, 3, 10, 20];
+    assert.deepStrictEqual(multiply(identity(), A), A);
+  });
+
+  it("A * identity = A", () => {
+    const A = [2, 0, 0, 3, 10, 20];
+    assert.deepStrictEqual(multiply(A, identity()), A);
+  });
+});
+
+describe("transformPoint", () => {
+  it("translate 后坐标偏移", () => {
+    const m = parseTransform("translate(10, 20)");
+    const p = transformPoint(m, 5, 5);
+    assert.strictEqual(p.x, 15);
+    assert.strictEqual(p.y, 25);
+  });
+
+  it("scale(2) 后坐标加倍", () => {
+    const m = parseTransform("scale(2)");
+    const p = transformPoint(m, 10, 20);
+    assert.strictEqual(p.x, 20);
+    assert.strictEqual(p.y, 40);
+  });
+});
+
+describe("getTranslation", () => {
+  it("提取 tx/ty", () => {
+    const m = [1, 0, 0, 1, 42, 99];
+    assert.deepStrictEqual(getTranslation(m), { tx: 42, ty: 99 });
+  });
+});
diff --git a/test/svg/walker.test.mjs b/test/svg/walker.test.mjs
new file mode 100644
index 0000000..09e5db3
--- /dev/null
+++ b/test/svg/walker.test.mjs
@@ -0,0 +1,85 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { parseSvgString } from "../../src/svg/parser.mjs";
+import { walkSvg } from "../../src/svg/walker.mjs";
+
+function walk(svgStr) {
+  const { svg } = parseSvgString(svgStr);
+  return walkSvg(svg);
+}
+
+describe("walkSvg", () => {
+  it("单 <rect> → 1 个 graphic descriptor", () => {
+    const descs = walk('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="50" height="50" fill="red"/></svg>');
+    assert.strictEqual(descs.length, 1);
+    assert.strictEqual(descs[0].type, "graphic");
+  });
+
+  it("嵌套 <g> → group 含 children", () => {
+    const descs = walk(`<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
+      <g id="outer"><g id="inner"><rect width="50" height="50" fill="red"/><rect x="60" width="50" height="50" fill="blue"/></g></g>
+    </svg>`);
+    assert.strictEqual(descs.length, 1);
+    assert.strictEqual(descs[0].type, "group");
+    assert.strictEqual(descs[0].name, "outer");
+    assert.ok(descs[0].children.length > 0);
+  });
+
+  it("<defs>/<style>/<metadata> 被跳过", () => {
+    const descs = walk(`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+      <defs><clipPath id="c"><rect width="100" height="100"/></clipPath></defs>
+      <style>.a{fill:red}</style>
+      <metadata>info</metadata>
+      <rect width="50" height="50" fill="red"/>
+    </svg>`);
+    assert.strictEqual(descs.length, 1);
+    assert.strictEqual(descs[0].type, "graphic");
+  });
+
+  it("<text> → type=text", () => {
+    const descs = walk('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><text x="10" y="50">Hello</text></svg>');
+    assert.strictEqual(descs.length, 1);
+    assert.strictEqual(descs[0].type, "text");
+  });
+
+  it("<foreignObject> → type=text", () => {
+    const descs = walk(`<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+      <foreignObject x="0" y="0" width="200" height="100">
+        <div xmlns="http://www.w3.org/1999/xhtml">Hello</div>
+      </foreignObject>
+    </svg>`);
+    assert.strictEqual(descs.length, 1);
+    assert.strictEqual(descs[0].type, "text");
+  });
+
+  it("display:none → hidden=true", () => {
+    const descs = walk('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="50" height="50" fill="red" style="display:none"/></svg>');
+    assert.strictEqual(descs[0].hidden, true);
+  });
+
+  it("visibility:hidden → hidden=true", () => {
+    const descs = walk('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="50" height="50" fill="red" visibility="hidden"/></svg>');
+    assert.strictEqual(descs[0].hidden, true);
+  });
+
+  it("opacity 属性提取", () => {
+    const descs = walk('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="50" height="50" fill="red" opacity="0.5"/></svg>');
+    assert.strictEqual(descs[0].opacity, 0.5);
+  });
+
+  it("mix-blend-mode 属性提取", () => {
+    const descs = walk('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="50" height="50" fill="red" style="mix-blend-mode: multiply"/></svg>');
+    assert.strictEqual(descs[0].blendMode, "multiply");
+  });
+
+  it("空 <g> → 被跳过", () => {
+    const descs = walk('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><g id="empty"></g></svg>');
+    assert.strictEqual(descs.length, 0);
+  });
+
+  it("无 id 的 <g> 只含 1 个 child → 提升 child", () => {
+    const descs = walk('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><g><rect width="50" height="50" fill="red"/></g></svg>');
+    assert.strictEqual(descs.length, 1);
+    assert.strictEqual(descs[0].type, "graphic");
+  });
+});
diff --git a/test/utils/color.test.mjs b/test/utils/color.test.mjs
new file mode 100644
index 0000000..c7bc658
--- /dev/null
+++ b/test/utils/color.test.mjs
@@ -0,0 +1,85 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { parseColor } from "../../src/utils/color.mjs";
+
+describe("parseColor", () => {
+  it("hex 3位: #F00 → red", () => {
+    assert.deepStrictEqual(parseColor("#F00"), { r: 255, g: 0, b: 0 });
+  });
+
+  it("hex 6位: #1A1A2E", () => {
+    assert.deepStrictEqual(parseColor("#1A1A2E"), { r: 26, g: 26, b: 46 });
+  });
+
+  it("hex 8位 (带alpha): #FF000080 → 只取 RGB", () => {
+    const c = parseColor("#FF000080");
+    assert.strictEqual(c.r, 255);
+    assert.strictEqual(c.g, 0);
+    assert.strictEqual(c.b, 0);
+  });
+
+  it("rgb(255, 0, 0)", () => {
+    assert.deepStrictEqual(parseColor("rgb(255, 0, 0)"), { r: 255, g: 0, b: 0 });
+  });
+
+  it("rgb(100%, 0%, 0%)", () => {
+    const c = parseColor("rgb(100%, 0%, 0%)");
+    assert.strictEqual(c.r, 255);
+    assert.strictEqual(c.g, 0);
+    assert.strictEqual(c.b, 0);
+  });
+
+  it("rgba(255, 0, 0, 0.5)", () => {
+    const c = parseColor("rgba(255, 0, 0, 0.5)");
+    assert.strictEqual(c.r, 255);
+    assert.strictEqual(c.g, 0);
+    assert.strictEqual(c.b, 0);
+  });
+
+  it("hsl(0, 100%, 50%) → 红色", () => {
+    assert.deepStrictEqual(parseColor("hsl(0, 100%, 50%)"), { r: 255, g: 0, b: 0 });
+  });
+
+  it("hsl(120, 100%, 50%) → 绿色", () => {
+    const c = parseColor("hsl(120, 100%, 50%)");
+    assert.strictEqual(c.r, 0);
+    assert.strictEqual(c.g, 255);
+    assert.strictEqual(c.b, 0);
+  });
+
+  it("named: red", () => {
+    assert.deepStrictEqual(parseColor("red"), { r: 255, g: 0, b: 0 });
+  });
+
+  it("named: blue", () => {
+    assert.deepStrictEqual(parseColor("blue"), { r: 0, g: 0, b: 255 });
+  });
+
+  it("named: cornflowerblue", () => {
+    assert.deepStrictEqual(parseColor("cornflowerblue"), { r: 100, g: 149, b: 237 });
+  });
+
+  it("named: rebeccapurple", () => {
+    assert.deepStrictEqual(parseColor("rebeccapurple"), { r: 102, g: 51, b: 153 });
+  });
+
+  it("none → {r:0,g:0,b:0}", () => {
+    assert.deepStrictEqual(parseColor("none"), { r: 0, g: 0, b: 0 });
+  });
+
+  it("transparent → {r:0,g:0,b:0}", () => {
+    assert.deepStrictEqual(parseColor("transparent"), { r: 0, g: 0, b: 0 });
+  });
+
+  it('空字符串 → {r:0,g:0,b:0}', () => {
+    assert.deepStrictEqual(parseColor(""), { r: 0, g: 0, b: 0 });
+  });
+
+  it("null → {r:0,g:0,b:0}", () => {
+    assert.deepStrictEqual(parseColor(null), { r: 0, g: 0, b: 0 });
+  });
+
+  it("未知颜色名 → {r:0,g:0,b:0}", () => {
+    assert.deepStrictEqual(parseColor("notacolor"), { r: 0, g: 0, b: 0 });
+  });
+});
diff --git a/test/utils/font.test.mjs b/test/utils/font.test.mjs
new file mode 100644
index 0000000..7b59280
--- /dev/null
+++ b/test/utils/font.test.mjs
@@ -0,0 +1,61 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { toPostScriptName, cleanFontFamily, isBoldWeight } from "../../src/utils/font.mjs";
+
+describe("toPostScriptName", () => {
+  it('Arial + normal → "ArialMT"', () => {
+    assert.strictEqual(toPostScriptName("Arial", "normal"), "ArialMT");
+  });
+
+  it('Arial + bold → "Arial-BoldMT"', () => {
+    assert.strictEqual(toPostScriptName("Arial", "bold"), "Arial-BoldMT");
+  });
+
+  it('Arial + "700" → "Arial-BoldMT"', () => {
+    assert.strictEqual(toPostScriptName("Arial", "700"), "Arial-BoldMT");
+  });
+
+  it('未知字体 normal → 去空格', () => {
+    assert.strictEqual(toPostScriptName("CustomFont", "normal"), "CustomFont");
+  });
+
+  it('未知字体 bold → 加 -Bold', () => {
+    assert.strictEqual(toPostScriptName("CustomFont", "bold"), "CustomFont-Bold");
+  });
+});
+
+describe("cleanFontFamily", () => {
+  it("提取第一个字体名", () => {
+    assert.strictEqual(cleanFontFamily("'Inter', sans-serif"), "Inter");
+  });
+
+  it("null → Arial", () => {
+    assert.strictEqual(cleanFontFamily(null), "Arial");
+  });
+
+  it("去除引号", () => {
+    assert.strictEqual(cleanFontFamily('"Open Sans", sans-serif'), "Open Sans");
+  });
+});
+
+describe("isBoldWeight", () => {
+  it('"bold" → true', () => {
+    assert.strictEqual(isBoldWeight("bold"), true);
+  });
+
+  it('"700" → true', () => {
+    assert.strictEqual(isBoldWeight("700"), true);
+  });
+
+  it('"normal" → false', () => {
+    assert.strictEqual(isBoldWeight("normal"), false);
+  });
+
+  it('"400" → false', () => {
+    assert.strictEqual(isBoldWeight("400"), false);
+  });
+
+  it("null → false", () => {
+    assert.strictEqual(isBoldWeight(null), false);
+  });
+});
diff --git a/test/utils/validation.test.mjs b/test/utils/validation.test.mjs
new file mode 100644
index 0000000..db59b90
--- /dev/null
+++ b/test/utils/validation.test.mjs
@@ -0,0 +1,48 @@
+import { describe, it, before, after } from "node:test";
+import assert from "node:assert/strict";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { validateInput } from "../../src/utils/validation.mjs";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const fixturesDir = path.join(__dirname, "..", "fixtures");
+
+describe("validateInput", () => {
+  const tmpEmpty = path.join(fixturesDir, "__empty_test.svg");
+  const tmpTxt = path.join(fixturesDir, "__test.txt");
+
+  before(() => {
+    fs.writeFileSync(tmpEmpty, "");
+    fs.writeFileSync(tmpTxt, "hello");
+  });
+
+  after(() => {
+    try { fs.unlinkSync(tmpEmpty); } catch {}
+    try { fs.unlinkSync(tmpTxt); } catch {}
+  });
+
+  it("有效 .svg 文件不抛异常", () => {
+    assert.doesNotThrow(() => validateInput(path.join(fixturesDir, "simple.svg")));
+  });
+
+  it("文件不存在 → 抛错", () => {
+    assert.throws(() => validateInput("/no/such/file.svg"), /文件不存在/);
+  });
+
+  it("非 .svg 扩展名 → 抛错", () => {
+    assert.throws(() => validateInput(tmpTxt), /不支持的文件格式/);
+  });
+
+  it("空文件 → 抛错", () => {
+    assert.throws(() => validateInput(tmpEmpty), /文件为空/);
+  });
+
+  it("null → 抛错", () => {
+    assert.throws(() => validateInput(null), /未指定/);
+  });
+
+  it("空字符串 → 抛错", () => {
+    assert.throws(() => validateInput(""), /未指定/);
+  });
+});

From 5b6eb40ca3606226a6db6aeed284bb852df80193 Mon Sep 17 00:00:00 2001
From: RandomYang <decoderyang@gmail.com>
Date: Wed, 25 Feb 2026 15:51:16 +0800
Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=E5=88=86=E5=B1=82=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=20+=20=E6=B5=8F=E8=A7=88=E5=99=A8=20Web=20App?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .gitignore                        |   1 +
 package.json                      |   9 +-
 pnpm-lock.yaml                    | 840 ++++++++++++++++++++++++++++++
 pnpm-workspace.yaml               |   2 +
 src/converter.mjs                 |  58 +--
 src/core/converter-core.mjs       |  74 +++
 src/core/parser-core.mjs          |  34 ++
 src/core/renderer-core.mjs        | 133 +++++
 src/psd/builder.mjs               |  11 +-
 src/render/renderer.mjs           | 136 +----
 src/svg/parser.mjs                |  27 +-
 test/core/converter-core.test.mjs | 124 +++++
 test/core/parser-core.test.mjs    |  62 +++
 test/core/renderer-core.test.mjs  | 124 +++++
 web/app.mjs                       | 194 +++++++
 web/index.html                    | 221 ++++++++
 web/platform/parser.mjs           |  24 +
 web/platform/psd-writer.mjs       |  39 ++
 web/platform/renderer.mjs         |  64 +++
 web/vite.config.mjs               |  20 +
 20 files changed, 1994 insertions(+), 203 deletions(-)
 create mode 100644 pnpm-lock.yaml
 create mode 100644 pnpm-workspace.yaml
 create mode 100644 src/core/converter-core.mjs
 create mode 100644 src/core/parser-core.mjs
 create mode 100644 src/core/renderer-core.mjs
 create mode 100644 test/core/converter-core.test.mjs
 create mode 100644 test/core/parser-core.test.mjs
 create mode 100644 test/core/renderer-core.test.mjs
 create mode 100644 web/app.mjs
 create mode 100644 web/index.html
 create mode 100644 web/platform/parser.mjs
 create mode 100644 web/platform/psd-writer.mjs
 create mode 100644 web/platform/renderer.mjs
 create mode 100644 web/vite.config.mjs

diff --git a/.gitignore b/.gitignore
index 04ace59..42aaedd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules/
 __pycache__/
 *.psd
 /tmp/
+web/dist/
diff --git a/package.json b/package.json
index 7f1b6a5..6e55911 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,18 @@
   "type": "module",
   "scripts": {
     "start": "node src/index.mjs",
-    "test": "node --test test/**/*.test.mjs"
+    "test": "node --test test/**/*.test.mjs",
+    "dev": "vite web/",
+    "build:web": "vite build web/"
   },
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
+    "@resvg/resvg-wasm": "^2.6.2",
     "@xmldom/xmldom": "^0.8.11",
     "ag-psd": "^30.1.0"
+  },
+  "devDependencies": {
+    "vite": "^6.1.0",
+    "vite-plugin-wasm": "^3.4.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..11ad7e4
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,840 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@resvg/resvg-js':
+        specifier: ^2.6.2
+        version: 2.6.2
+      '@resvg/resvg-wasm':
+        specifier: ^2.6.2
+        version: 2.6.2
+      '@xmldom/xmldom':
+        specifier: ^0.8.11
+        version: 0.8.11
+      ag-psd:
+        specifier: ^30.1.0
+        version: 30.1.0
+    devDependencies:
+      vite:
+        specifier: ^6.1.0
+        version: 6.4.1
+      vite-plugin-wasm:
+        specifier: ^3.4.1
+        version: 3.5.0(vite@6.4.1)
+
+packages:
+
+  '@esbuild/aix-ppc64@0.25.12':
+    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.25.12':
+    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.12':
+    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.12':
+    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.25.12':
+    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.12':
+    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.12':
+    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.25.12':
+    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.12':
+    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.12':
+    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.12':
+    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.12':
+    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.12':
+    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.12':
+    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.12':
+    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.12':
+    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.12':
+    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.12':
+    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.25.12':
+    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.25.12':
+    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.12':
+    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.12':
+    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@resvg/resvg-js-android-arm-eabi@2.6.2':
+    resolution: {integrity: sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [android]
+
+  '@resvg/resvg-js-android-arm64@2.6.2':
+    resolution: {integrity: sha512-VcOKezEhm2VqzXpcIJoITuvUS/fcjIw5NA/w3tjzWyzmvoCdd+QXIqy3FBGulWdClvp4g+IfUemigrkLThSjAQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@resvg/resvg-js-darwin-arm64@2.6.2':
+    resolution: {integrity: sha512-nmok2LnAd6nLUKI16aEB9ydMC6Lidiiq2m1nEBDR1LaaP7FGs4AJ90qDraxX+CWlVuRlvNjyYJTNv8qFjtL9+A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@resvg/resvg-js-darwin-x64@2.6.2':
+    resolution: {integrity: sha512-GInyZLjgWDfsVT6+SHxQVRwNzV0AuA1uqGsOAW+0th56J7Nh6bHHKXHBWzUrihxMetcFDmQMAX1tZ1fZDYSRsw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@resvg/resvg-js-linux-arm-gnueabihf@2.6.2':
+    resolution: {integrity: sha512-YIV3u/R9zJbpqTTNwTZM5/ocWetDKGsro0SWp70eGEM9eV2MerWyBRZnQIgzU3YBnSBQ1RcxRZvY/UxwESfZIw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@resvg/resvg-js-linux-arm64-gnu@2.6.2':
+    resolution: {integrity: sha512-zc2BlJSim7YR4FZDQ8OUoJg5holYzdiYMeobb9pJuGDidGL9KZUv7SbiD4E8oZogtYY42UZEap7dqkkYuA91pg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@resvg/resvg-js-linux-arm64-musl@2.6.2':
+    resolution: {integrity: sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@resvg/resvg-js-linux-x64-gnu@2.6.2':
+    resolution: {integrity: sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@resvg/resvg-js-linux-x64-musl@2.6.2':
+    resolution: {integrity: sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@resvg/resvg-js-win32-arm64-msvc@2.6.2':
+    resolution: {integrity: sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@resvg/resvg-js-win32-ia32-msvc@2.6.2':
+    resolution: {integrity: sha512-har4aPAlvjnLcil40AC77YDIk6loMawuJwFINEM7n0pZviwMkMvjb2W5ZirsNOZY4aDbo5tLx0wNMREp5Brk+w==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@resvg/resvg-js-win32-x64-msvc@2.6.2':
+    resolution: {integrity: sha512-ZXtYhtUr5SSaBrUDq7DiyjOFJqBVL/dOBN7N/qmi/pO0IgiWW/f/ue3nbvu9joWE5aAKDoIzy/CxsY0suwGosQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@resvg/resvg-js@2.6.2':
+    resolution: {integrity: sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==}
+    engines: {node: '>= 10'}
+
+  '@resvg/resvg-wasm@2.6.2':
+    resolution: {integrity: sha512-FqALmHI8D4o6lk/LRWDnhw95z5eO+eAa6ORjVg09YRR7BkcM6oPHU9uyC0gtQG5vpFLvgpeU4+zEAz2H8APHNw==}
+    engines: {node: '>= 10'}
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    resolution: {integrity: sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    resolution: {integrity: sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    resolution: {integrity: sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    resolution: {integrity: sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    resolution: {integrity: sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    resolution: {integrity: sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    resolution: {integrity: sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    resolution: {integrity: sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    resolution: {integrity: sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@xmldom/xmldom@0.8.11':
+    resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
+    engines: {node: '>=10.0.0'}
+
+  ag-psd@30.1.0:
+    resolution: {integrity: sha512-1ce6o84aC+oVyl83A35HHUniGjwA3piHmGem3J2odBOFRq5p7i4htaco94vePLfOcingZu4fsyospJLwPagkhg==}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  esbuild@0.25.12:
+    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  pako@2.1.0:
+    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  rollup@4.59.0:
+    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  vite-plugin-wasm@3.5.0:
+    resolution: {integrity: sha512-X5VWgCnqiQEGb+omhlBVsvTfxikKtoOgAzQ95+BZ8gQ+VfMHIjSHr0wyvXFQCa0eKQ0fKyaL0kWcEnYqBac4lQ==}
+    peerDependencies:
+      vite: ^2 || ^3 || ^4 || ^5 || ^6 || ^7
+
+  vite@6.4.1:
+    resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+snapshots:
+
+  '@esbuild/aix-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm@0.25.12':
+    optional: true
+
+  '@esbuild/android-x64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.12':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.12':
+    optional: true
+
+  '@resvg/resvg-js-android-arm-eabi@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-android-arm64@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-darwin-arm64@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-darwin-x64@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-linux-arm-gnueabihf@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-linux-arm64-gnu@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-linux-arm64-musl@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-linux-x64-gnu@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-linux-x64-musl@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-win32-arm64-msvc@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-win32-ia32-msvc@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js-win32-x64-msvc@2.6.2':
+    optional: true
+
+  '@resvg/resvg-js@2.6.2':
+    optionalDependencies:
+      '@resvg/resvg-js-android-arm-eabi': 2.6.2
+      '@resvg/resvg-js-android-arm64': 2.6.2
+      '@resvg/resvg-js-darwin-arm64': 2.6.2
+      '@resvg/resvg-js-darwin-x64': 2.6.2
+      '@resvg/resvg-js-linux-arm-gnueabihf': 2.6.2
+      '@resvg/resvg-js-linux-arm64-gnu': 2.6.2
+      '@resvg/resvg-js-linux-arm64-musl': 2.6.2
+      '@resvg/resvg-js-linux-x64-gnu': 2.6.2
+      '@resvg/resvg-js-linux-x64-musl': 2.6.2
+      '@resvg/resvg-js-win32-arm64-msvc': 2.6.2
+      '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
+      '@resvg/resvg-js-win32-x64-msvc': 2.6.2
+
+  '@resvg/resvg-wasm@2.6.2': {}
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    optional: true
+
+  '@types/estree@1.0.8': {}
+
+  '@xmldom/xmldom@0.8.11': {}
+
+  ag-psd@30.1.0:
+    dependencies:
+      base64-js: 1.5.1
+      pako: 2.1.0
+
+  base64-js@1.5.1: {}
+
+  esbuild@0.25.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  fsevents@2.3.3:
+    optional: true
+
+  nanoid@3.3.11: {}
+
+  pako@2.1.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.3: {}
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  rollup@4.59.0:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.59.0
+      '@rollup/rollup-android-arm64': 4.59.0
+      '@rollup/rollup-darwin-arm64': 4.59.0
+      '@rollup/rollup-darwin-x64': 4.59.0
+      '@rollup/rollup-freebsd-arm64': 4.59.0
+      '@rollup/rollup-freebsd-x64': 4.59.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.59.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.59.0
+      '@rollup/rollup-linux-arm64-gnu': 4.59.0
+      '@rollup/rollup-linux-arm64-musl': 4.59.0
+      '@rollup/rollup-linux-loong64-gnu': 4.59.0
+      '@rollup/rollup-linux-loong64-musl': 4.59.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.59.0
+      '@rollup/rollup-linux-ppc64-musl': 4.59.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.59.0
+      '@rollup/rollup-linux-riscv64-musl': 4.59.0
+      '@rollup/rollup-linux-s390x-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-musl': 4.59.0
+      '@rollup/rollup-openbsd-x64': 4.59.0
+      '@rollup/rollup-openharmony-arm64': 4.59.0
+      '@rollup/rollup-win32-arm64-msvc': 4.59.0
+      '@rollup/rollup-win32-ia32-msvc': 4.59.0
+      '@rollup/rollup-win32-x64-gnu': 4.59.0
+      '@rollup/rollup-win32-x64-msvc': 4.59.0
+      fsevents: 2.3.3
+
+  source-map-js@1.2.1: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  vite-plugin-wasm@3.5.0(vite@6.4.1):
+    dependencies:
+      vite: 6.4.1
+
+  vite@6.4.1:
+    dependencies:
+      esbuild: 0.25.12
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.59.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      fsevents: 2.3.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..c5739b7
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+ignoredBuiltDependencies:
+  - esbuild
diff --git a/src/converter.mjs b/src/converter.mjs
index d80ff22..39907d6 100644
--- a/src/converter.mjs
+++ b/src/converter.mjs
@@ -1,16 +1,15 @@
 /**
- * 主编排模块
+ * 主编排模块（Node.js 版）
  * parse → walk → render → writePSD
  */
 
 import fs from "fs";
 import { initializeCanvas, writePsdBuffer } from "ag-psd";
 import { parseSvg } from "./svg/parser.mjs";
-import { walkSvg } from "./svg/walker.mjs";
-import { buildPsd } from "./psd/builder.mjs";
 import { buildTextLayer } from "./psd/text-layer.mjs";
-import { extractTextInfo } from "./svg/text-extractor.mjs";
 import { validateInput } from "./utils/validation.mjs";
+import { renderElement } from "./render/renderer.mjs";
+import { convertSvg } from "./core/converter-core.mjs";
 
 // 初始化 ag-psd：提供最小化 canvas 实现（仅用于 imageData 写入）
 function createMinimalCanvas(width, height) {
@@ -96,21 +95,11 @@ export async function convertSvgToPsd(inputPath, outputPath, options = {}) {
   const { svg, width, height, viewBox } = parseSvg(inputPath);
   console.log(`解析: ${inputPath} (${Math.round(width)}×${Math.round(height)})`);
 
-  // 2. 递归遍历，生成 LayerDescriptor 树
-  const descriptors = walkSvg(svg);
-  const layerCount = countAllLayers(descriptors);
-  console.log(`图层树: ${layerCount} 个图层`);
-
-  if (layerCount === 0) {
-    throw new Error("SVG 中没有可渲染的元素");
-  }
-
-  // 3. 提取文字信息（增强 text 类型的 descriptors）
-  enrichTextDescriptors(descriptors, svg, viewBox);
-
-  // 4. 构建 PSD
+  // 2. 核心转换
   let completed = 0;
-  const psd = await buildPsd(descriptors, svg, width, height, scale, {
+  const { psd, layerCount } = await convertSvg(svg, width, height, viewBox, {
+    scale,
+    renderElement,
     buildTextLayer: (desc, svgRoot, w, h, s) =>
       buildTextLayer(desc, svgRoot, w, h, s),
     onProgress: (current, total) => {
@@ -119,15 +108,13 @@ export async function convertSvgToPsd(inputPath, outputPath, options = {}) {
     },
   });
 
+  console.log(`图层树: ${layerCount} 个图层`);
+
   if (completed > 0) {
     process.stdout.write("\n");
   }
 
-  if (!psd.children || psd.children.length === 0) {
-    throw new Error("没有成功渲染的图层");
-  }
-
-  // 5. 写入 PSD
+  // 3. 写入 PSD
   const buffer = writePsdBuffer(psd, {
     invalidateTextLayers: true,
     generateThumbnail: true,
@@ -141,28 +128,3 @@ export async function convertSvgToPsd(inputPath, outputPath, options = {}) {
 
   return outputPath;
 }
-
-/**
- * 递归为 text 类型的 descriptor 填充 textInfo
- */
-function enrichTextDescriptors(descriptors, svgRoot, viewBox) {
-  for (const desc of descriptors) {
-    if (desc.type === "group" && desc.children) {
-      enrichTextDescriptors(desc.children, svgRoot, viewBox);
-    } else if (desc.type === "text" && desc.element) {
-      desc.textInfo = extractTextInfo(desc.element, desc.transform, viewBox);
-    }
-  }
-}
-
-function countAllLayers(descriptors) {
-  let count = 0;
-  for (const desc of descriptors) {
-    if (desc.type === "group" && desc.children) {
-      count += countAllLayers(desc.children);
-    } else {
-      count++;
-    }
-  }
-  return count;
-}
diff --git a/src/core/converter-core.mjs b/src/core/converter-core.mjs
new file mode 100644
index 0000000..19587f6
--- /dev/null
+++ b/src/core/converter-core.mjs
@@ -0,0 +1,74 @@
+/**
+ * 转换核心编排逻辑（平台无关）
+ * 接收已解析的 SVG DOM，返回 ag-psd 文档对象
+ */
+
+import { walkSvg } from "../svg/walker.mjs";
+import { buildPsd } from "../psd/builder.mjs";
+import { extractTextInfo } from "../svg/text-extractor.mjs";
+
+/**
+ * 将已解析的 SVG 转换为 ag-psd 文档对象
+ * @param {Element} svg - SVG 根元素
+ * @param {number} width - 画布宽度
+ * @param {number} height - 画布高度
+ * @param {{ x: number, y: number, w: number, h: number } | null} viewBox
+ * @param {Object} options
+ * @param {number} [options.scale=1] - 缩放因子
+ * @param {Function} options.renderElement - 渲染函数
+ * @param {Function} [options.buildTextLayer] - 文字图层构建函数
+ * @param {Function} [options.onProgress] - 进度回调 (current, total)
+ * @returns {Promise<{ psd: Object, layerCount: number }>}
+ */
+export async function convertSvg(svg, width, height, viewBox, options = {}) {
+  const { scale = 1, renderElement, buildTextLayer, onProgress } = options;
+
+  // 1. 递归遍历，生成 LayerDescriptor 树
+  const descriptors = walkSvg(svg);
+  const layerCount = countAllLayers(descriptors);
+
+  if (layerCount === 0) {
+    throw new Error("SVG 中没有可渲染的元素");
+  }
+
+  // 2. 提取文字信息（增强 text 类型的 descriptors）
+  enrichTextDescriptors(descriptors, svg, viewBox);
+
+  // 3. 构建 PSD
+  const psd = await buildPsd(descriptors, svg, width, height, scale, {
+    buildTextLayer,
+    onProgress,
+    renderElement,
+  });
+
+  if (!psd.children || psd.children.length === 0) {
+    throw new Error("没有成功渲染的图层");
+  }
+
+  return { psd, layerCount };
+}
+
+/**
+ * 递归为 text 类型的 descriptor 填充 textInfo
+ */
+export function enrichTextDescriptors(descriptors, svgRoot, viewBox) {
+  for (const desc of descriptors) {
+    if (desc.type === "group" && desc.children) {
+      enrichTextDescriptors(desc.children, svgRoot, viewBox);
+    } else if (desc.type === "text" && desc.element) {
+      desc.textInfo = extractTextInfo(desc.element, desc.transform, viewBox);
+    }
+  }
+}
+
+export function countAllLayers(descriptors) {
+  let count = 0;
+  for (const desc of descriptors) {
+    if (desc.type === "group" && desc.children) {
+      count += countAllLayers(desc.children);
+    } else {
+      count++;
+    }
+  }
+  return count;
+}
diff --git a/src/core/parser-core.mjs b/src/core/parser-core.mjs
new file mode 100644
index 0000000..f555dcb
--- /dev/null
+++ b/src/core/parser-core.mjs
@@ -0,0 +1,34 @@
+/**
+ * SVG 解析核心逻辑（平台无关）
+ * 从已解析的 Document 中提取 SVG 信息
+ */
+
+/**
+ * 从 Document 提取 SVG 根元素和尺寸信息
+ * @param {Document} doc - 已解析的 DOM 文档
+ * @returns {{ doc: Document, svg: Element, width: number, height: number, viewBox: {x:number,y:number,w:number,h:number}|null }}
+ */
+export function parseSvgFromDocument(doc) {
+  const svg = doc.documentElement;
+  if (!svg || svg.nodeName !== "svg") {
+    throw new Error("无效的 SVG 文件：缺少 <svg> 根元素");
+  }
+
+  const viewBox = parseViewBox(svg.getAttribute("viewBox"));
+  const width = parseFloat(svg.getAttribute("width")) || (viewBox ? viewBox.w : 800);
+  const height = parseFloat(svg.getAttribute("height")) || (viewBox ? viewBox.h : 600);
+
+  return { doc, svg, width, height, viewBox };
+}
+
+/**
+ * 解析 viewBox 属性
+ * @param {string|null} attr
+ * @returns {{ x: number, y: number, w: number, h: number } | null}
+ */
+export function parseViewBox(attr) {
+  if (!attr) return null;
+  const parts = attr.split(/[\s,]+/).map(Number);
+  if (parts.length < 4 || parts.some(isNaN)) return null;
+  return { x: parts[0], y: parts[1], w: parts[2], h: parts[3] };
+}
diff --git a/src/core/renderer-core.mjs b/src/core/renderer-core.mjs
new file mode 100644
index 0000000..6c354d9
--- /dev/null
+++ b/src/core/renderer-core.mjs
@@ -0,0 +1,133 @@
+/**
+ * 渲染核心逻辑（平台无关）
+ * 纯函数：SVG 构建、透明检测、边界框计算、像素裁剪
+ */
+
+/**
+ * 构建只包含指定元素的完整 SVG 字符串
+ * 保留原始 SVG 的 defs、style 和 viewBox
+ * @param {Element} element
+ * @param {Element} svgRoot
+ * @param {number[]} [transform] - 累积变换矩阵 [a,b,c,d,e,f]
+ * @param {function} serializeFn - 序列化函数 (node) => string
+ */
+export function buildStandaloneSvg(element, svgRoot, transform, serializeFn) {
+  const clone = svgRoot.cloneNode(false); // 浅克隆 <svg> 属性
+
+  // 复制 <defs> 和 <style>
+  const children = svgRoot.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType !== 1) continue;
+    const tag = (c.localName || c.nodeName || "").replace(/^.*:/, "");
+    if (tag === "defs" || tag === "style") {
+      clone.appendChild(c.cloneNode(true));
+    }
+  }
+
+  // 克隆目标元素，移除 foreignObject（文字单独处理）
+  const elClone = element.cloneNode(true);
+  removeForeignObjects(elClone);
+
+  // 将累积变换矩阵应用到克隆元素上
+  if (transform && !isIdentity(transform)) {
+    const [a, b, c, d, e, f] = transform;
+    elClone.setAttribute("transform", `matrix(${a},${b},${c},${d},${e},${f})`);
+  }
+
+  clone.appendChild(elClone);
+
+  return '<?xml version="1.0" encoding="UTF-8"?>\n' + serializeFn(clone);
+}
+
+/**
+ * 处理渲染结果：透明检测 + bbox 裁剪
+ * @param {Uint8Array} pixels - RGBA 像素数据
+ * @param {number} width - 渲染宽度
+ * @param {number} height - 渲染高度
+ * @returns {{ data: Uint8ClampedArray, width: number, height: number, top: number, left: number, right: number, bottom: number } | null}
+ */
+export function processRenderResult(pixels, width, height) {
+  if (isCompletelyTransparent(pixels)) return null;
+
+  const bbox = computeTightBBox(pixels, width, height);
+  if (!bbox) return null;
+
+  // 裁剪到紧凑区域
+  const cropW = bbox.right - bbox.left;
+  const cropH = bbox.bottom - bbox.top;
+  const cropped = new Uint8ClampedArray(cropW * cropH * 4);
+
+  for (let y = 0; y < cropH; y++) {
+    const srcOffset = ((bbox.top + y) * width + bbox.left) * 4;
+    const dstOffset = y * cropW * 4;
+    cropped.set(pixels.subarray(srcOffset, srcOffset + cropW * 4), dstOffset);
+  }
+
+  return {
+    data: cropped,
+    width: cropW,
+    height: cropH,
+    top: bbox.top,
+    left: bbox.left,
+    right: bbox.right,
+    bottom: bbox.bottom,
+  };
+}
+
+export function removeForeignObjects(node) {
+  const toRemove = [];
+  const children = node.childNodes || [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    if (c.nodeType === 1) {
+      const tag = (c.localName || c.nodeName || "").replace(/^.*:/, "");
+      if (tag === "foreignObject") {
+        toRemove.push(c);
+      } else {
+        removeForeignObjects(c);
+      }
+    }
+  }
+  toRemove.forEach((c) => node.removeChild(c));
+}
+
+export function isCompletelyTransparent(pixels) {
+  for (let i = 3; i < pixels.length; i += 4) {
+    if (pixels[i] > 0) return false;
+  }
+  return true;
+}
+
+/**
+ * 计算像素数据的紧凑边界框（非透明区域）
+ */
+export function computeTightBBox(pixels, width, height) {
+  let top = height, left = width, bottom = 0, right = 0;
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const alpha = pixels[(y * width + x) * 4 + 3];
+      if (alpha > 0) {
+        if (y < top) top = y;
+        if (y > bottom) bottom = y;
+        if (x < left) left = x;
+        if (x > right) right = x;
+      }
+    }
+  }
+
+  if (bottom < top) return null; // 全透明
+
+  // 扩展 1px padding
+  top = Math.max(0, top);
+  left = Math.max(0, left);
+  bottom = Math.min(height, bottom + 1);
+  right = Math.min(width, right + 1);
+
+  return { top, left, bottom, right };
+}
+
+function isIdentity(m) {
+  return m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
+}
diff --git a/src/psd/builder.mjs b/src/psd/builder.mjs
index 0a03a80..e9ddc39 100644
--- a/src/psd/builder.mjs
+++ b/src/psd/builder.mjs
@@ -3,8 +3,6 @@
  * 将 LayerDescriptor 树转换为 ag-psd 图层树
  */
 
-import { renderElement } from "../render/renderer.mjs";
-
 /** SVG blend mode → PSD blend mode 映射 */
 const BLEND_MODE_MAP = {
   normal: "normal",
@@ -35,12 +33,13 @@ const BLEND_MODE_MAP = {
  * @param {Object} options
  * @param {Function} [options.buildTextLayer] - 文字图层构建函数
  * @param {Function} [options.onProgress] - 进度回调 (current, total)
+ * @param {Function} options.renderElement - 渲染函数（依赖注入）
  * @returns {Promise<Object>} ag-psd 文档对象
  */
 export async function buildPsd(descriptors, svgRoot, width, height, scale, options = {}) {
   const psdW = Math.round(width * scale);
   const psdH = Math.round(height * scale);
-  const { buildTextLayer, onProgress } = options;
+  const { buildTextLayer, onProgress, renderElement } = options;
 
   let completed = 0;
   const total = countLayers(descriptors);
@@ -80,11 +79,11 @@ export async function buildPsd(descriptors, svgRoot, width, height, scale, optio
         return buildTextLayer(desc, svgRoot, width, height, scale);
       }
       // 文字没有 builder 时回退为像素渲染
-      return renderAsPixelLayer(desc, svgRoot, width, height, scale);
+      return renderAsPixelLayer(desc, svgRoot, width, height, scale, renderElement);
     }
 
     if (desc.type === "graphic") {
-      const layer = await renderAsPixelLayer(desc, svgRoot, width, height, scale);
+      const layer = await renderAsPixelLayer(desc, svgRoot, width, height, scale, renderElement);
       completed++;
       if (onProgress) onProgress(completed, total);
       return layer;
@@ -102,7 +101,7 @@ export async function buildPsd(descriptors, svgRoot, width, height, scale, optio
   };
 }
 
-async function renderAsPixelLayer(desc, svgRoot, width, height, scale) {
+async function renderAsPixelLayer(desc, svgRoot, width, height, scale, renderElement) {
   try {
     const result = renderElement(desc.element, svgRoot, width, height, scale, desc.transform);
     if (!result) return null;
diff --git a/src/render/renderer.mjs b/src/render/renderer.mjs
index 4d28a7d..134cddf 100644
--- a/src/render/renderer.mjs
+++ b/src/render/renderer.mjs
@@ -1,12 +1,21 @@
 /**
- * resvg-js 渲染模块
+ * resvg-js 渲染模块（Node.js 版）
  * 将单个 SVG 元素渲染为 RGBA 像素数据
  */
 
 import { Resvg } from "@resvg/resvg-js";
 import { XMLSerializer } from "@xmldom/xmldom";
+import { buildStandaloneSvg as buildStandaloneSvgCore, processRenderResult } from "../core/renderer-core.mjs";
 
 const serializer = new XMLSerializer();
+const serializeFn = (node) => serializer.serializeToString(node);
+
+/**
+ * 构建只包含指定元素的完整 SVG 字符串（Node.js 版，使用 xmldom 序列化）
+ */
+export function buildStandaloneSvg(element, svgRoot, transform) {
+  return buildStandaloneSvgCore(element, svgRoot, transform, serializeFn);
+}
 
 /**
  * 将单个 SVG 元素渲染为像素数据
@@ -28,7 +37,6 @@ export function renderElement(element, svgRoot, width, height, scale, transform)
  */
 export function renderSvgString(svgStr, width, height, scale) {
   const w = Math.round(width * scale);
-  const h = Math.round(height * scale);
 
   const resvg = new Resvg(svgStr, {
     fitTo: { mode: "width", value: w },
@@ -36,127 +44,5 @@ export function renderSvgString(svgStr, width, height, scale) {
   });
 
   const rendered = resvg.render();
-  const pixels = rendered.pixels; // Uint8Array RGBA
-
-  if (isCompletelyTransparent(pixels)) return null;
-
-  // 计算紧凑边界框
-  const bbox = computeTightBBox(pixels, rendered.width, rendered.height);
-  if (!bbox) return null;
-
-  // 裁剪到紧凑区域
-  const cropW = bbox.right - bbox.left;
-  const cropH = bbox.bottom - bbox.top;
-  const cropped = new Uint8ClampedArray(cropW * cropH * 4);
-
-  for (let y = 0; y < cropH; y++) {
-    const srcOffset = ((bbox.top + y) * rendered.width + bbox.left) * 4;
-    const dstOffset = y * cropW * 4;
-    cropped.set(pixels.subarray(srcOffset, srcOffset + cropW * 4), dstOffset);
-  }
-
-  return {
-    data: cropped,
-    width: cropW,
-    height: cropH,
-    top: bbox.top,
-    left: bbox.left,
-    right: bbox.right,
-    bottom: bbox.bottom,
-  };
-}
-
-/**
- * 构建只包含指定元素的完整 SVG 字符串
- * 保留原始 SVG 的 defs、style 和 viewBox
- * @param {Element} element
- * @param {Element} svgRoot
- * @param {number[]} [transform] - 累积变换矩阵 [a,b,c,d,e,f]
- */
-export function buildStandaloneSvg(element, svgRoot, transform) {
-  const doc = svgRoot.ownerDocument;
-  const clone = svgRoot.cloneNode(false); // 浅克隆 <svg> 属性
-
-  // 复制 <defs> 和 <style>
-  const children = svgRoot.childNodes || [];
-  for (let i = 0; i < children.length; i++) {
-    const c = children[i];
-    if (c.nodeType !== 1) continue;
-    const tag = (c.localName || c.nodeName || "").replace(/^.*:/, "");
-    if (tag === "defs" || tag === "style") {
-      clone.appendChild(c.cloneNode(true));
-    }
-  }
-
-  // 克隆目标元素，移除 foreignObject（文字单独处理）
-  const elClone = element.cloneNode(true);
-  removeForeignObjects(elClone);
-
-  // 将累积变换矩阵应用到克隆元素上（替换元素自身的 transform，
-  // 因为累积矩阵已包含元素自身的变换）
-  if (transform && !isIdentity(transform)) {
-    const [a, b, c, d, e, f] = transform;
-    elClone.setAttribute("transform", `matrix(${a},${b},${c},${d},${e},${f})`);
-  }
-
-  clone.appendChild(elClone);
-
-  return '<?xml version="1.0" encoding="UTF-8"?>\n' + serializer.serializeToString(clone);
-}
-
-function isIdentity(m) {
-  return m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
-}
-
-function removeForeignObjects(node) {
-  const toRemove = [];
-  const children = node.childNodes || [];
-  for (let i = 0; i < children.length; i++) {
-    const c = children[i];
-    if (c.nodeType === 1) {
-      const tag = (c.localName || c.nodeName || "").replace(/^.*:/, "");
-      if (tag === "foreignObject") {
-        toRemove.push(c);
-      } else {
-        removeForeignObjects(c);
-      }
-    }
-  }
-  toRemove.forEach((c) => node.removeChild(c));
-}
-
-function isCompletelyTransparent(pixels) {
-  for (let i = 3; i < pixels.length; i += 4) {
-    if (pixels[i] > 0) return false;
-  }
-  return true;
-}
-
-/**
- * 计算像素数据的紧凑边界框（非透明区域）
- */
-function computeTightBBox(pixels, width, height) {
-  let top = height, left = width, bottom = 0, right = 0;
-
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      const alpha = pixels[(y * width + x) * 4 + 3];
-      if (alpha > 0) {
-        if (y < top) top = y;
-        if (y > bottom) bottom = y;
-        if (x < left) left = x;
-        if (x > right) right = x;
-      }
-    }
-  }
-
-  if (bottom < top) return null; // 全透明
-
-  // 扩展 1px padding
-  top = Math.max(0, top);
-  left = Math.max(0, left);
-  bottom = Math.min(height, bottom + 1);
-  right = Math.min(width, right + 1);
-
-  return { top, left, bottom, right };
+  return processRenderResult(rendered.pixels, rendered.width, rendered.height);
 }
diff --git a/src/svg/parser.mjs b/src/svg/parser.mjs
index 40db1b0..fb92cea 100644
--- a/src/svg/parser.mjs
+++ b/src/svg/parser.mjs
@@ -1,10 +1,11 @@
 /**
- * SVG 解析与验证模块
+ * SVG 解析与验证模块（Node.js 版）
  * 读取 SVG 文件，提取 viewBox 和尺寸信息
  */
 
 import fs from "fs";
 import { DOMParser } from "@xmldom/xmldom";
+import { parseSvgFromDocument } from "../core/parser-core.mjs";
 
 /**
  * 解析 SVG 文件，返回 DOM 文档和画布尺寸
@@ -33,26 +34,6 @@ export function parseSvgString(xml) {
     throw new Error(`SVG 解析错误: ${errors[0]}`);
   }
 
-  const svg = doc.documentElement;
-  if (!svg || svg.nodeName !== "svg") {
-    throw new Error("无效的 SVG 文件：缺少 <svg> 根元素");
-  }
-
-  const viewBox = parseViewBox(svg.getAttribute("viewBox"));
-  const width = parseFloat(svg.getAttribute("width")) || (viewBox ? viewBox.w : 800);
-  const height = parseFloat(svg.getAttribute("height")) || (viewBox ? viewBox.h : 600);
-
-  return { doc, svg, width, height, viewBox, xml };
-}
-
-/**
- * 解析 viewBox 属性
- * @param {string|null} attr
- * @returns {{ x: number, y: number, w: number, h: number } | null}
- */
-function parseViewBox(attr) {
-  if (!attr) return null;
-  const parts = attr.split(/[\s,]+/).map(Number);
-  if (parts.length < 4 || parts.some(isNaN)) return null;
-  return { x: parts[0], y: parts[1], w: parts[2], h: parts[3] };
+  const result = parseSvgFromDocument(doc);
+  return { ...result, xml };
 }
diff --git a/test/core/converter-core.test.mjs b/test/core/converter-core.test.mjs
new file mode 100644
index 0000000..57272bf
--- /dev/null
+++ b/test/core/converter-core.test.mjs
@@ -0,0 +1,124 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { DOMParser } from "@xmldom/xmldom";
+import { convertSvg, enrichTextDescriptors, countAllLayers } from "../../src/core/converter-core.mjs";
+
+function makeDoc(svgStr) {
+  return new DOMParser().parseFromString(svgStr, "image/svg+xml");
+}
+
+describe("countAllLayers", () => {
+  it("扁平列表", () => {
+    const descs = [
+      { type: "graphic", name: "a" },
+      { type: "graphic", name: "b" },
+    ];
+    assert.equal(countAllLayers(descs), 2);
+  });
+
+  it("嵌套 group", () => {
+    const descs = [
+      {
+        type: "group",
+        name: "g",
+        children: [
+          { type: "graphic", name: "a" },
+          { type: "text", name: "t" },
+        ],
+      },
+    ];
+    assert.equal(countAllLayers(descs), 2);
+  });
+
+  it("空列表", () => {
+    assert.equal(countAllLayers([]), 0);
+  });
+});
+
+describe("convertSvg", () => {
+  it("渲染并返回 psd 对象", async () => {
+    const doc = makeDoc(`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+      <rect width="50" height="50" fill="red"/>
+    </svg>`);
+    const svg = doc.documentElement;
+
+    // mock renderElement：返回一个像素结果
+    const mockRenderElement = () => ({
+      data: new Uint8ClampedArray(50 * 50 * 4),
+      width: 50,
+      height: 50,
+      top: 0,
+      left: 0,
+      right: 50,
+      bottom: 50,
+    });
+
+    const { psd, layerCount } = await convertSvg(svg, 100, 100, null, {
+      scale: 1,
+      renderElement: mockRenderElement,
+    });
+
+    assert.ok(psd);
+    assert.equal(psd.width, 100);
+    assert.equal(psd.height, 100);
+    assert.ok(psd.children.length > 0);
+    assert.ok(layerCount > 0);
+  });
+
+  it("空 SVG 抛错", async () => {
+    const doc = makeDoc('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"></svg>');
+    const svg = doc.documentElement;
+
+    await assert.rejects(
+      () => convertSvg(svg, 100, 100, null, { renderElement: () => null }),
+      /没有可渲染的元素/
+    );
+  });
+
+  it("进度回调被调用", async () => {
+    const doc = makeDoc(`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+      <rect width="50" height="50" fill="red"/>
+      <circle cx="80" cy="80" r="10" fill="blue"/>
+    </svg>`);
+    const svg = doc.documentElement;
+
+    const progressCalls = [];
+    await convertSvg(svg, 100, 100, null, {
+      renderElement: () => ({
+        data: new Uint8ClampedArray(4),
+        width: 1,
+        height: 1,
+        top: 0,
+        left: 0,
+        right: 1,
+        bottom: 1,
+      }),
+      onProgress: (current, total) => progressCalls.push({ current, total }),
+    });
+
+    assert.ok(progressCalls.length > 0);
+  });
+});
+
+describe("enrichTextDescriptors", () => {
+  it("为 text 类型填充 textInfo", () => {
+    const doc = makeDoc(`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+      <text x="10" y="20">Hello</text>
+    </svg>`);
+    const svg = doc.documentElement;
+    const textEl = svg.getElementsByTagName("text")[0];
+
+    const descs = [
+      {
+        type: "text",
+        name: "text",
+        element: textEl,
+        transform: [1, 0, 0, 1, 0, 0],
+      },
+    ];
+
+    enrichTextDescriptors(descs, svg, null);
+    assert.ok(descs[0].textInfo);
+    assert.ok(descs[0].textInfo.text);
+  });
+});
diff --git a/test/core/parser-core.test.mjs b/test/core/parser-core.test.mjs
new file mode 100644
index 0000000..bbb27d6
--- /dev/null
+++ b/test/core/parser-core.test.mjs
@@ -0,0 +1,62 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { DOMParser } from "@xmldom/xmldom";
+import { parseSvgFromDocument, parseViewBox } from "../../src/core/parser-core.mjs";
+
+describe("parseSvgFromDocument", () => {
+  function makeDoc(svgStr) {
+    return new DOMParser().parseFromString(svgStr, "image/svg+xml");
+  }
+
+  it("提取 width/height/viewBox", () => {
+    const doc = makeDoc('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100"></svg>');
+    const result = parseSvgFromDocument(doc);
+    assert.equal(result.width, 200);
+    assert.equal(result.height, 100);
+    assert.deepEqual(result.viewBox, { x: 0, y: 0, w: 200, h: 100 });
+    assert.ok(result.svg);
+    assert.ok(result.doc);
+  });
+
+  it("无 width/height 时从 viewBox 推断", () => {
+    const doc = makeDoc('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"></svg>');
+    const result = parseSvgFromDocument(doc);
+    assert.equal(result.width, 400);
+    assert.equal(result.height, 300);
+  });
+
+  it("无 width/height/viewBox 时使用默认值", () => {
+    const doc = makeDoc('<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+    const result = parseSvgFromDocument(doc);
+    assert.equal(result.width, 800);
+    assert.equal(result.height, 600);
+    assert.equal(result.viewBox, null);
+  });
+
+  it("非 svg 根元素抛错", () => {
+    const doc = makeDoc('<div xmlns="http://www.w3.org/1999/xhtml">hello</div>');
+    assert.throws(() => parseSvgFromDocument(doc), /缺少 <svg> 根元素/);
+  });
+});
+
+describe("parseViewBox", () => {
+  it("正常解析", () => {
+    assert.deepEqual(parseViewBox("0 0 100 200"), { x: 0, y: 0, w: 100, h: 200 });
+  });
+
+  it("逗号分隔", () => {
+    assert.deepEqual(parseViewBox("10,20,300,400"), { x: 10, y: 20, w: 300, h: 400 });
+  });
+
+  it("null → null", () => {
+    assert.equal(parseViewBox(null), null);
+  });
+
+  it("不完整 → null", () => {
+    assert.equal(parseViewBox("0 0 100"), null);
+  });
+
+  it("含 NaN → null", () => {
+    assert.equal(parseViewBox("0 0 abc 100"), null);
+  });
+});
diff --git a/test/core/renderer-core.test.mjs b/test/core/renderer-core.test.mjs
new file mode 100644
index 0000000..903e315
--- /dev/null
+++ b/test/core/renderer-core.test.mjs
@@ -0,0 +1,124 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { DOMParser, XMLSerializer } from "@xmldom/xmldom";
+import {
+  buildStandaloneSvg,
+  processRenderResult,
+  isCompletelyTransparent,
+  computeTightBBox,
+  removeForeignObjects,
+} from "../../src/core/renderer-core.mjs";
+
+const serializer = new XMLSerializer();
+const serializeFn = (node) => serializer.serializeToString(node);
+
+function makeDoc(svgStr) {
+  return new DOMParser().parseFromString(svgStr, "image/svg+xml");
+}
+
+describe("buildStandaloneSvg", () => {
+  it("生成包含 defs 的完整 SVG（带 serializeFn）", () => {
+    const doc = makeDoc(`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+      <defs><clipPath id="c"><rect width="100" height="100"/></clipPath></defs>
+      <rect width="50" height="50" fill="red"/>
+    </svg>`);
+    const svg = doc.documentElement;
+    const children = svg.childNodes;
+    let rectEl;
+    for (let i = 0; i < children.length; i++) {
+      const c = children[i];
+      if (c.nodeType === 1 && (c.localName || c.nodeName) === "rect") {
+        rectEl = c;
+        break;
+      }
+    }
+    const result = buildStandaloneSvg(rectEl, svg, null, serializeFn);
+    assert.ok(result.includes("<?xml"));
+    assert.ok(result.includes("clipPath"));
+    assert.ok(result.includes("rect"));
+  });
+
+  it("应用变换矩阵", () => {
+    const doc = makeDoc('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="50" height="50"/></svg>');
+    const svg = doc.documentElement;
+    const rect = svg.getElementsByTagName("rect")[0];
+    const result = buildStandaloneSvg(rect, svg, [2, 0, 0, 2, 10, 20], serializeFn);
+    assert.ok(result.includes("matrix(2,0,0,2,10,20)"));
+  });
+
+  it("单位矩阵不添加 transform", () => {
+    const doc = makeDoc('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="50" height="50"/></svg>');
+    const svg = doc.documentElement;
+    const rect = svg.getElementsByTagName("rect")[0];
+    const result = buildStandaloneSvg(rect, svg, [1, 0, 0, 1, 0, 0], serializeFn);
+    assert.ok(!result.includes("matrix("));
+  });
+});
+
+describe("processRenderResult", () => {
+  it("全透明 → null", () => {
+    const pixels = new Uint8Array(100 * 4); // 全 0
+    assert.equal(processRenderResult(pixels, 10, 10), null);
+  });
+
+  it("裁剪到非透明区域", () => {
+    // 10x10 像素，只有 (2,3) 有非透明像素
+    const w = 10, h = 10;
+    const pixels = new Uint8Array(w * h * 4);
+    const idx = (3 * w + 2) * 4;
+    pixels[idx] = 255;     // R
+    pixels[idx + 1] = 0;   // G
+    pixels[idx + 2] = 0;   // B
+    pixels[idx + 3] = 255; // A
+
+    const result = processRenderResult(pixels, w, h);
+    assert.ok(result);
+    assert.ok(result.width > 0);
+    assert.ok(result.height > 0);
+    assert.ok(result.left <= 2);
+    assert.ok(result.top <= 3);
+  });
+});
+
+describe("isCompletelyTransparent", () => {
+  it("全透明 → true", () => {
+    assert.ok(isCompletelyTransparent(new Uint8Array(40)));
+  });
+
+  it("有非透明像素 → false", () => {
+    const p = new Uint8Array(40);
+    p[3] = 1;
+    assert.ok(!isCompletelyTransparent(p));
+  });
+});
+
+describe("computeTightBBox", () => {
+  it("全透明 → null", () => {
+    assert.equal(computeTightBBox(new Uint8Array(100 * 4), 10, 10), null);
+  });
+
+  it("正确计算边界", () => {
+    const w = 10, h = 10;
+    const pixels = new Uint8Array(w * h * 4);
+    // 在 (5,5) 放一个不透明像素
+    pixels[(5 * w + 5) * 4 + 3] = 255;
+    const bbox = computeTightBBox(pixels, w, h);
+    assert.ok(bbox);
+    assert.ok(bbox.left <= 5);
+    assert.ok(bbox.top <= 5);
+    assert.ok(bbox.right > 5);
+    assert.ok(bbox.bottom > 5);
+  });
+});
+
+describe("removeForeignObjects", () => {
+  it("移除 foreignObject 元素", () => {
+    const doc = makeDoc(`<svg xmlns="http://www.w3.org/2000/svg">
+      <g><foreignObject width="100" height="100"><div>text</div></foreignObject><rect/></g>
+    </svg>`);
+    const g = doc.getElementsByTagName("g")[0];
+    removeForeignObjects(g);
+    assert.equal(g.getElementsByTagName("foreignObject").length, 0);
+    assert.equal(g.getElementsByTagName("rect").length, 1);
+  });
+});
diff --git a/web/app.mjs b/web/app.mjs
new file mode 100644
index 0000000..deaa3ec
--- /dev/null
+++ b/web/app.mjs
@@ -0,0 +1,194 @@
+/**
+ * Web App 主逻辑
+ * 拖放上传 SVG → 转换 → 下载 PSD
+ */
+
+import { parseSvgString } from "./platform/parser.mjs";
+import { init as initRenderer, renderElement } from "./platform/renderer.mjs";
+import { writePsdBlob, initPsdWriter } from "./platform/psd-writer.mjs";
+import { convertSvg } from "../src/core/converter-core.mjs";
+import { buildTextLayer } from "../src/psd/text-layer.mjs";
+
+// DOM 元素
+const dropZone = document.getElementById("dropZone");
+const fileInput = document.getElementById("fileInput");
+const browseLink = document.getElementById("browseLink");
+const scaleInput = document.getElementById("scaleInput");
+const status = document.getElementById("status");
+const progressFill = document.getElementById("progressFill");
+const statusText = document.getElementById("statusText");
+const downloadBtn = document.getElementById("downloadBtn");
+const layerList = document.getElementById("layerList");
+const layerItems = document.getElementById("layerItems");
+
+let downloadUrl = null;
+let downloadFilename = "output.psd";
+
+// 初始化
+async function initialize() {
+  showStatus("初始化 WASM 渲染器...");
+  try {
+    await initRenderer();
+    initPsdWriter();
+    hideStatus();
+  } catch (e) {
+    showError(`初始化失败: ${e.message}`);
+  }
+}
+
+// 拖放事件
+dropZone.addEventListener("dragover", (e) => {
+  e.preventDefault();
+  dropZone.classList.add("dragover");
+});
+
+dropZone.addEventListener("dragleave", () => {
+  dropZone.classList.remove("dragover");
+});
+
+dropZone.addEventListener("drop", (e) => {
+  e.preventDefault();
+  dropZone.classList.remove("dragover");
+  const file = e.dataTransfer.files[0];
+  if (file) handleFile(file);
+});
+
+browseLink.addEventListener("click", () => fileInput.click());
+dropZone.addEventListener("click", (e) => {
+  if (e.target === browseLink) return;
+  fileInput.click();
+});
+
+fileInput.addEventListener("change", () => {
+  const file = fileInput.files[0];
+  if (file) handleFile(file);
+  fileInput.value = "";
+});
+
+downloadBtn.addEventListener("click", () => {
+  if (!downloadUrl) return;
+  const a = document.createElement("a");
+  a.href = downloadUrl;
+  a.download = downloadFilename;
+  a.click();
+});
+
+// 处理文件
+async function handleFile(file) {
+  if (!file.name.toLowerCase().endsWith(".svg")) {
+    showError("请选择 .svg 文件");
+    return;
+  }
+
+  downloadFilename = file.name.replace(/\.svg$/i, ".psd");
+  hideDownload();
+  hideLayerList();
+
+  try {
+    showStatus("读取文件...");
+    const text = await file.text();
+
+    showStatus("解析 SVG...");
+    const { svg, width, height, viewBox } = parseSvgString(text);
+
+    const scale = parseFloat(scaleInput.value) || 1;
+
+    showStatus("转换中...");
+    const { psd, layerCount } = await convertSvg(svg, width, height, viewBox, {
+      scale,
+      renderElement,
+      buildTextLayer: (desc, svgRoot, w, h, s) => buildTextLayer(desc, svgRoot, w, h, s),
+      onProgress: (current, total) => {
+        const pct = Math.round((current / total) * 100);
+        setProgress(pct);
+        setStatusText(`渲染图层: ${current}/${total}`);
+      },
+    });
+
+    showStatus("生成 PSD 文件...");
+    setProgress(100);
+
+    const blob = writePsdBlob(psd);
+
+    // 释放之前的 URL
+    if (downloadUrl) URL.revokeObjectURL(downloadUrl);
+    downloadUrl = URL.createObjectURL(blob);
+
+    const sizeMB = (blob.size / 1024 / 1024).toFixed(2);
+    setStatusText(`完成! ${psd.width}×${psd.height}, ${layerCount} 个图层, ${sizeMB} MB`);
+    showDownload();
+    showLayerPreview(psd.children || []);
+  } catch (e) {
+    showError(e.message);
+  }
+}
+
+// 图层预览
+function showLayerPreview(children, indent = 0) {
+  if (indent === 0) layerItems.innerHTML = "";
+  for (const child of children) {
+    const div = document.createElement("div");
+    div.className = "layer-item";
+    div.style.paddingLeft = `${0.75 + indent * 1.2}rem`;
+
+    const type = child.children ? "group" : child.text ? "text" : "graphic";
+    div.innerHTML = `<span class="layer-type ${type}">${type}</span> ${escapeHtml(child.name || "unnamed")}`;
+    layerItems.appendChild(div);
+
+    if (child.children) {
+      showLayerPreview(child.children, indent + 1);
+    }
+  }
+  if (indent === 0) {
+    layerList.classList.add("visible");
+  }
+}
+
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// UI 辅助函数
+function showStatus(msg) {
+  status.classList.add("visible");
+  statusText.classList.remove("error");
+  statusText.textContent = msg;
+  progressFill.style.width = "0%";
+}
+
+function hideStatus() {
+  status.classList.remove("visible");
+}
+
+function showError(msg) {
+  status.classList.add("visible");
+  statusText.classList.add("error");
+  statusText.textContent = msg;
+  progressFill.style.width = "0%";
+}
+
+function setProgress(pct) {
+  progressFill.style.width = `${pct}%`;
+}
+
+function setStatusText(msg) {
+  statusText.classList.remove("error");
+  statusText.textContent = msg;
+}
+
+function showDownload() {
+  downloadBtn.classList.add("visible");
+}
+
+function hideDownload() {
+  downloadBtn.classList.remove("visible");
+}
+
+function hideLayerList() {
+  layerList.classList.remove("visible");
+}
+
+// 启动
+initialize();
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..ffa0fff
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SVG → PSD 转换器</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: #f5f5f7;
+      color: #1d1d1f;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+    }
+
+    h1 {
+      font-size: 2rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+
+    .subtitle {
+      color: #86868b;
+      margin-bottom: 2rem;
+      font-size: 0.95rem;
+    }
+
+    .drop-zone {
+      width: 100%;
+      max-width: 500px;
+      padding: 3rem 2rem;
+      border: 2px dashed #d2d2d7;
+      border-radius: 16px;
+      background: #fff;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .drop-zone:hover,
+    .drop-zone.dragover {
+      border-color: #0071e3;
+      background: #f0f7ff;
+    }
+
+    .drop-zone-icon {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      opacity: 0.6;
+    }
+
+    .drop-zone-text {
+      color: #86868b;
+      font-size: 0.95rem;
+      line-height: 1.6;
+    }
+
+    .drop-zone-text .link {
+      color: #0071e3;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    input[type="file"] { display: none; }
+
+    .options {
+      width: 100%;
+      max-width: 500px;
+      margin-top: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      justify-content: center;
+    }
+
+    .options label {
+      font-size: 0.9rem;
+      color: #6e6e73;
+    }
+
+    .options input[type="number"] {
+      width: 4rem;
+      padding: 0.3rem 0.5rem;
+      border: 1px solid #d2d2d7;
+      border-radius: 8px;
+      font-size: 0.9rem;
+      text-align: center;
+    }
+
+    .status {
+      width: 100%;
+      max-width: 500px;
+      margin-top: 1.5rem;
+      text-align: center;
+      display: none;
+    }
+
+    .status.visible { display: block; }
+
+    .progress-bar {
+      width: 100%;
+      height: 6px;
+      background: #e8e8ed;
+      border-radius: 3px;
+      overflow: hidden;
+      margin-bottom: 0.75rem;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: #0071e3;
+      border-radius: 3px;
+      width: 0%;
+      transition: width 0.15s;
+    }
+
+    .status-text {
+      font-size: 0.9rem;
+      color: #6e6e73;
+    }
+
+    .status-text.error { color: #ff3b30; }
+
+    .download-btn {
+      display: none;
+      margin-top: 1.5rem;
+      padding: 0.75rem 2rem;
+      background: #0071e3;
+      color: #fff;
+      border: none;
+      border-radius: 12px;
+      font-size: 1rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    .download-btn:hover { background: #0077ed; }
+    .download-btn.visible { display: inline-block; }
+
+    .layer-list {
+      width: 100%;
+      max-width: 500px;
+      margin-top: 1.5rem;
+      display: none;
+    }
+
+    .layer-list.visible { display: block; }
+
+    .layer-list h3 {
+      font-size: 0.85rem;
+      color: #86868b;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 0.5rem;
+    }
+
+    .layer-item {
+      padding: 0.4rem 0.75rem;
+      background: #fff;
+      border-radius: 8px;
+      margin-bottom: 4px;
+      font-size: 0.85rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .layer-type {
+      font-size: 0.7rem;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-weight: 500;
+    }
+
+    .layer-type.group { background: #e8e8ed; color: #6e6e73; }
+    .layer-type.text { background: #e3f2fd; color: #0071e3; }
+    .layer-type.graphic { background: #fce4ec; color: #c62828; }
+  </style>
+</head>
+<body>
+  <h1>SVG → PSD</h1>
+  <p class="subtitle">纯客户端转换，文件不会上传到服务器</p>
+
+  <div class="drop-zone" id="dropZone">
+    <div class="drop-zone-icon">📁</div>
+    <div class="drop-zone-text">
+      拖放 SVG 文件到此处<br>
+      或 <span class="link" id="browseLink">选择文件</span>
+    </div>
+  </div>
+  <input type="file" id="fileInput" accept=".svg">
+
+  <div class="options">
+    <label for="scaleInput">缩放倍数:</label>
+    <input type="number" id="scaleInput" value="1" min="0.1" max="10" step="0.5">
+  </div>
+
+  <div class="status" id="status">
+    <div class="progress-bar">
+      <div class="progress-fill" id="progressFill"></div>
+    </div>
+    <div class="status-text" id="statusText">准备中...</div>
+  </div>
+
+  <button class="download-btn" id="downloadBtn">下载 PSD</button>
+
+  <div class="layer-list" id="layerList">
+    <h3>图层预览</h3>
+    <div id="layerItems"></div>
+  </div>
+
+  <script type="module" src="./app.mjs"></script>
+</body>
+</html>
diff --git a/web/platform/parser.mjs b/web/platform/parser.mjs
new file mode 100644
index 0000000..4d1e4f4
--- /dev/null
+++ b/web/platform/parser.mjs
@@ -0,0 +1,24 @@
+/**
+ * 浏览器端 SVG 解析适配
+ * 使用浏览器原生 DOMParser
+ */
+
+import { parseSvgFromDocument } from "../../src/core/parser-core.mjs";
+
+/**
+ * 从 SVG 字符串解析（浏览器版）
+ * @param {string} xml - SVG 字符串
+ * @returns {{ doc: Document, svg: Element, width: number, height: number, viewBox: Object|null, xml: string }}
+ */
+export function parseSvgString(xml) {
+  const doc = new DOMParser().parseFromString(xml, "image/svg+xml");
+
+  // 检查浏览器 DOMParser 的解析错误
+  const parserError = doc.querySelector("parsererror");
+  if (parserError) {
+    throw new Error(`SVG 解析错误: ${parserError.textContent}`);
+  }
+
+  const result = parseSvgFromDocument(doc);
+  return { ...result, xml };
+}
diff --git a/web/platform/psd-writer.mjs b/web/platform/psd-writer.mjs
new file mode 100644
index 0000000..c178909
--- /dev/null
+++ b/web/platform/psd-writer.mjs
@@ -0,0 +1,39 @@
+/**
+ * 浏览器端 PSD 写入适配
+ * 使用 ag-psd 浏览器版 + 真实 Canvas
+ */
+
+import { initializeCanvas, writePsdUint8Array } from "ag-psd";
+
+let initialized = false;
+
+/**
+ * 初始化 ag-psd 的 Canvas 支持（浏览器用真实 Canvas）
+ */
+export function initPsdWriter() {
+  if (initialized) return;
+  initializeCanvas(
+    (w, h) => {
+      const c = document.createElement("canvas");
+      c.width = w;
+      c.height = h;
+      return c;
+    },
+    (w, h) => new ImageData(w, h)
+  );
+  initialized = true;
+}
+
+/**
+ * 将 ag-psd 文档对象写入 Blob
+ * @param {Object} psdDoc - ag-psd 文档对象
+ * @returns {Blob}
+ */
+export function writePsdBlob(psdDoc) {
+  initPsdWriter();
+  const buffer = writePsdUint8Array(psdDoc, {
+    invalidateTextLayers: true,
+    generateThumbnail: true,
+  });
+  return new Blob([buffer], { type: "application/octet-stream" });
+}
diff --git a/web/platform/renderer.mjs b/web/platform/renderer.mjs
new file mode 100644
index 0000000..ef35f96
--- /dev/null
+++ b/web/platform/renderer.mjs
@@ -0,0 +1,64 @@
+/**
+ * 浏览器端 SVG 渲染适配
+ * 使用 @resvg/resvg-wasm
+ */
+
+import { initWasm, Resvg } from "@resvg/resvg-wasm";
+import resvgWasmUrl from "@resvg/resvg-wasm/index_bg.wasm?url";
+import {
+  buildStandaloneSvg as buildStandaloneSvgCore,
+  processRenderResult,
+} from "../../src/core/renderer-core.mjs";
+
+let wasmReady = false;
+
+const serializeFn = (node) => new XMLSerializer().serializeToString(node);
+
+/**
+ * 初始化 WASM（必须在渲染前调用一次）
+ */
+export async function init() {
+  if (wasmReady) return;
+  await initWasm(fetch(resvgWasmUrl));
+  wasmReady = true;
+}
+
+/**
+ * 初始化 WASM（接受外部提供的 wasm 源）
+ * @param {Response|ArrayBuffer|WebAssembly.Module} wasmSource
+ */
+export async function initWithWasm(wasmSource) {
+  if (wasmReady) return;
+  await initWasm(wasmSource);
+  wasmReady = true;
+}
+
+/**
+ * 构建只包含指定元素的完整 SVG 字符串（浏览器版）
+ */
+export function buildStandaloneSvg(element, svgRoot, transform) {
+  return buildStandaloneSvgCore(element, svgRoot, transform, serializeFn);
+}
+
+/**
+ * 将单个 SVG 元素渲染为像素数据
+ */
+export function renderElement(element, svgRoot, width, height, scale, transform) {
+  const svgStr = buildStandaloneSvg(element, svgRoot, transform);
+  return renderSvgString(svgStr, width, height, scale);
+}
+
+/**
+ * 渲染 SVG 字符串为像素数据
+ */
+export function renderSvgString(svgStr, width, height, scale) {
+  const w = Math.round(width * scale);
+
+  const resvg = new Resvg(svgStr, {
+    fitTo: { mode: "width", value: w },
+    background: "rgba(0,0,0,0)",
+  });
+
+  const rendered = resvg.render();
+  return processRenderResult(rendered.pixels, rendered.width, rendered.height);
+}
diff --git a/web/vite.config.mjs b/web/vite.config.mjs
new file mode 100644
index 0000000..b79e8f9
--- /dev/null
+++ b/web/vite.config.mjs
@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import wasm from "vite-plugin-wasm";
+
+export default defineConfig({
+  root: ".",
+  plugins: [wasm()],
+  build: {
+    outDir: "dist",
+    target: "esnext",
+  },
+  optimizeDeps: {
+    exclude: ["@resvg/resvg-wasm"],
+  },
+  server: {
+    headers: {
+      "Cross-Origin-Opener-Policy": "same-origin",
+      "Cross-Origin-Embedder-Policy": "require-corp",
+    },
+  },
+});

From abaed906797c7b44a631c094db6b02fa784c7316 Mon Sep 17 00:00:00 2001
From: RandomYang <decoderyang@gmail.com>
Date: Wed, 25 Feb 2026 16:16:05 +0800
Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=E6=96=87=E6=9C=AC=E5=9B=BE=E5=B1=82?=
 =?UTF-8?q?=E6=94=B9=E7=94=A8=20point=20text=20=E5=85=BC=E5=AE=B9=20Affini?=
 =?UTF-8?q?ty?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/psd/text-layer.mjs       | 13 ++-----------
 test/psd/text-layer.test.mjs | 10 +++++-----
 web/index.html               |  1 -
 3 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/psd/text-layer.mjs b/src/psd/text-layer.mjs
index dc94568..4fcfc09 100644
--- a/src/psd/text-layer.mjs
+++ b/src/psd/text-layer.mjs
@@ -57,17 +57,8 @@ export function buildTextLayer(desc, svgRoot, width, height, scale) {
     layer.text.styleRuns = styleRuns;
   }
 
-  // Box text (foreignObject)
-  if (info.isBox && info.boxBounds) {
-    const bb = info.boxBounds;
-    layer.text.shapeType = "box";
-    layer.text.boxBounds = {
-      top: (bb.y - vbY) * scale,
-      left: (bb.x - vbX) * scale,
-      bottom: (bb.y - vbY + bb.height) * scale,
-      right: (bb.x - vbX + bb.width) * scale,
-    };
-  }
+  // Point text: 不使用 box text（shapeType: "box"），
+  // 因为 Affinity 等非 Photoshop 工具不支持渲染 box text
 
   // 通用属性
   if (desc.opacity !== undefined && desc.opacity < 1) {
diff --git a/test/psd/text-layer.test.mjs b/test/psd/text-layer.test.mjs
index bc49037..0076775 100644
--- a/test/psd/text-layer.test.mjs
+++ b/test/psd/text-layer.test.mjs
@@ -37,7 +37,7 @@ describe("buildTextLayer", () => {
     assert.ok(layer.text.style);
   });
 
-  it("box text (foreignObject) → shapeType=box + boxBounds", () => {
+  it("foreignObject → point text（兼容 Affinity 等非 Photoshop 工具）", () => {
     const { desc, svg } = makeTextDesc(
       `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
         <foreignObject x="10" y="20" width="200" height="100">
@@ -47,10 +47,10 @@ describe("buildTextLayer", () => {
     );
     const layer = buildTextLayer(desc, svg, 400, 200, 1);
     assert.ok(layer);
-    assert.strictEqual(layer.text.shapeType, "box");
-    assert.ok(layer.text.boxBounds);
-    assert.strictEqual(layer.text.boxBounds.left, 10);
-    assert.strictEqual(layer.text.boxBounds.top, 20);
+    assert.strictEqual(layer.text.text, "Hello Box");
+    // 不使用 box text，确保 Affinity 兼容
+    assert.strictEqual(layer.text.shapeType, undefined);
+    assert.strictEqual(layer.text.boxBounds, undefined);
   });
 
   it("viewBox offset 正确应用到坐标", () => {
diff --git a/web/index.html b/web/index.html
index ffa0fff..485d852 100644
--- a/web/index.html
+++ b/web/index.html
@@ -186,7 +186,6 @@
 </head>
 <body>
   <h1>SVG → PSD</h1>
-  <p class="subtitle">纯客户端转换，文件不会上传到服务器</p>
 
   <div class="drop-zone" id="dropZone">
     <div class="drop-zone-icon">📁</div>

From 416a52d97d350e6f3cfa6f839e1ce8f15c82caed Mon Sep 17 00:00:00 2001
From: RandomYang <decoderyang@gmail.com>
Date: Wed, 25 Feb 2026 16:23:40 +0800
Subject: [PATCH 6/7] =?UTF-8?q?ci:=20=E6=B7=BB=E5=8A=A0=20GitHub=20Actions?=
 =?UTF-8?q?=20=E6=B5=8B=E8=AF=95=E5=B7=A5=E4=BD=9C=E6=B5=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .github/workflows/test.yml | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 .github/workflows/test.yml

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 0000000..9cee0a5
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,25 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - run: pnpm test

From 166f4b0ed1272b66de7c5709fa52f2df76fa6903 Mon Sep 17 00:00:00 2001
From: RandomYang <decoderyang@gmail.com>
Date: Wed, 25 Feb 2026 16:25:46 +0800
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=E5=9C=A8=20package.json=20=E4=B8=AD?=
 =?UTF-8?q?=E5=A3=B0=E6=98=8E=20pnpm=20=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 6e55911..f8630f8 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "svg2psd",
+  "packageManager": "pnpm@10.30.2",
   "version": "1.0.0",
   "description": "",
   "main": "src/index.mjs",