@shotstack/shotstack-canvas 1.8.2 → 1.8.4

package/dist/entry.web.js

@@ -2349,335 +2349,6 @@ var isGlyphFill2 = (op) => {
   return op.op === "FillPath" && op.isShadow !== true;
 };
 
-// src/core/shape-generators.ts
-var KAPPA = 0.5522847498307936;
-var DEG_TO_RAD = Math.PI / 180;
-function generateShapePath(params) {
-  switch (params.shape) {
-    case "rectangle":
-      return generateRectanglePath(params);
-    case "circle":
-      return generateCirclePath(params);
-    case "ellipse":
-      return generateEllipsePath(params);
-    case "line":
-      return generateLinePath(params);
-    case "triangle":
-      return generateTrianglePath(params);
-    case "polygon":
-      return generatePolygonPath(params);
-    case "star":
-      return generateStarPath(params);
-    case "arrow":
-      return generateArrowPath(params);
-    case "heart":
-      return generateHeartPath(params);
-    case "cross":
-      return generateCrossPath(params);
-    case "ring":
-      return generateRingPath(params);
-  }
-}
-function generateRectanglePath(params) {
-  const { width, height, cornerRadius = 0 } = params;
-  if (cornerRadius === 0) {
-    return `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z`;
-  }
-  const r = Math.min(cornerRadius, width / 2, height / 2);
-  return [
-    `M ${r} 0`,
-    `L ${width - r} 0`,
-    `Q ${width} 0 ${width} ${r}`,
-    `L ${width} ${height - r}`,
-    `Q ${width} ${height} ${width - r} ${height}`,
-    `L ${r} ${height}`,
-    `Q 0 ${height} 0 ${height - r}`,
-    `L 0 ${r}`,
-    `Q 0 0 ${r} 0`,
-    "Z"
-  ].join(" ");
-}
-function generateCirclePath(params) {
-  const { radius } = params;
-  return generateEllipsePath({ radiusX: radius, radiusY: radius });
-}
-function generateEllipsePath(params) {
-  const { radiusX, radiusY } = params;
-  const kx = radiusX * KAPPA;
-  const ky = radiusY * KAPPA;
-  return [
-    `M ${radiusX} 0`,
-    `C ${radiusX} ${ky} ${kx} ${radiusY} 0 ${radiusY}`,
-    `C ${-kx} ${radiusY} ${-radiusX} ${ky} ${-radiusX} 0`,
-    `C ${-radiusX} ${-ky} ${-kx} ${-radiusY} 0 ${-radiusY}`,
-    `C ${kx} ${-radiusY} ${radiusX} ${-ky} ${radiusX} 0`,
-    "Z"
-  ].join(" ");
-}
-function generateLinePath(params) {
-  const { length, thickness } = params;
-  const halfThickness = thickness / 2;
-  return [
-    `M 0 ${-halfThickness}`,
-    `L ${length} ${-halfThickness}`,
-    `L ${length} ${halfThickness}`,
-    `L 0 ${halfThickness}`,
-    "Z"
-  ].join(" ");
-}
-function generateTrianglePath(params) {
-  const { width, height } = params;
-  const halfWidth = width / 2;
-  return `M 0 ${height} L ${halfWidth} 0 L ${width} ${height} Z`;
-}
-function generatePolygonPath(params) {
-  const { sides, radius } = params;
-  const points = generatePolygonPoints(sides, radius);
-  return pointsToPath(points, true);
-}
-function generatePolygonPoints(sides, radius) {
-  const points = [];
-  const angleStep = 2 * Math.PI / sides;
-  const startAngle = -Math.PI / 2;
-  for (let i = 0; i < sides; i++) {
-    const angle = startAngle + i * angleStep;
-    points.push({
-      x: radius * Math.cos(angle),
-      y: radius * Math.sin(angle)
-    });
-  }
-  return points;
-}
-function generateStarPath(params) {
-  const { points, outerRadius, innerRadius } = params;
-  const starPoints = generateStarPoints(points, outerRadius, innerRadius);
-  return pointsToPath(starPoints, true);
-}
-function generateStarPoints(pointCount, outerRadius, innerRadius) {
-  const points = [];
-  const totalPoints = pointCount * 2;
-  const angleStep = Math.PI / pointCount;
-  const startAngle = -Math.PI / 2;
-  for (let i = 0; i < totalPoints; i++) {
-    const radius = i % 2 === 0 ? outerRadius : innerRadius;
-    const angle = startAngle + i * angleStep;
-    points.push({
-      x: radius * Math.cos(angle),
-      y: radius * Math.sin(angle)
-    });
-  }
-  return points;
-}
-function generateArrowPath(params) {
-  const { length, headWidth, headLength, shaftWidth } = params;
-  const halfShaft = shaftWidth / 2;
-  const halfHead = headWidth / 2;
-  const shaftLength = length - headLength;
-  return [
-    `M 0 ${-halfShaft}`,
-    `L ${shaftLength} ${-halfShaft}`,
-    `L ${shaftLength} ${-halfHead}`,
-    `L ${length} 0`,
-    `L ${shaftLength} ${halfHead}`,
-    `L ${shaftLength} ${halfShaft}`,
-    `L 0 ${halfShaft}`,
-    "Z"
-  ].join(" ");
-}
-function generateHeartPath(params) {
-  const { size } = params;
-  const s = size / 2;
-  return [
-    `M 0 ${s * 0.3}`,
-    `C 0 ${-s * 0.3} ${-s} ${-s * 0.3} ${-s} ${s * 0.3}`,
-    `C ${-s} ${s * 0.7} 0 ${s} 0 ${s * 1.2}`,
-    `C 0 ${s} ${s} ${s * 0.7} ${s} ${s * 0.3}`,
-    `C ${s} ${-s * 0.3} 0 ${-s * 0.3} 0 ${s * 0.3}`,
-    "Z"
-  ].join(" ");
-}
-function generateCrossPath(params) {
-  const { width, height, thickness } = params;
-  const halfThickness = thickness / 2;
-  const halfWidth = width / 2;
-  const halfHeight = height / 2;
-  return [
-    `M ${-halfThickness} ${-halfHeight}`,
-    `L ${halfThickness} ${-halfHeight}`,
-    `L ${halfThickness} ${-halfThickness}`,
-    `L ${halfWidth} ${-halfThickness}`,
-    `L ${halfWidth} ${halfThickness}`,
-    `L ${halfThickness} ${halfThickness}`,
-    `L ${halfThickness} ${halfHeight}`,
-    `L ${-halfThickness} ${halfHeight}`,
-    `L ${-halfThickness} ${halfThickness}`,
-    `L ${-halfWidth} ${halfThickness}`,
-    `L ${-halfWidth} ${-halfThickness}`,
-    `L ${-halfThickness} ${-halfThickness}`,
-    "Z"
-  ].join(" ");
-}
-function generateRingPath(params) {
-  const { outerRadius, innerRadius } = params;
-  const outerPath = generateCirclePath({ radius: outerRadius });
-  const innerPath = generateCirclePath({ radius: innerRadius });
-  return `${outerPath} ${reverseWindingOrder(innerPath)}`;
-}
-function pointsToPath(points, closed = true) {
-  if (points.length === 0) return "";
-  const commands = [`M ${points[0].x} ${points[0].y}`];
-  for (let i = 1; i < points.length; i++) {
-    commands.push(`L ${points[i].x} ${points[i].y}`);
-  }
-  if (closed) {
-    commands.push("Z");
-  }
-  return commands.join(" ");
-}
-function reverseWindingOrder(path) {
-  const commands = parsePathCommands(path);
-  const reversed = [];
-  const points = [];
-  let currentX = 0;
-  let currentY = 0;
-  for (const cmd of commands) {
-    if (cmd.type === "M" || cmd.type === "L") {
-      points.push({ x: cmd.x, y: cmd.y });
-      currentX = cmd.x;
-      currentY = cmd.y;
-    } else if (cmd.type === "C") {
-      points.push({ x: cmd.x, y: cmd.y });
-      currentX = cmd.x;
-      currentY = cmd.y;
-    }
-  }
-  if (points.length === 0) return path;
-  points.reverse();
-  reversed.push(`M ${points[0].x} ${points[0].y}`);
-  for (let i = 1; i < points.length; i++) {
-    reversed.push(`L ${points[i].x} ${points[i].y}`);
-  }
-  reversed.push("Z");
-  return reversed.join(" ");
-}
-function parsePathCommands(path) {
-  const commands = [];
-  const regex = /([MLCQZ])\s*([^MLCQZ]*)/gi;
-  let match;
-  while ((match = regex.exec(path)) !== null) {
-    const type = match[1].toUpperCase();
-    const args = match[2].trim().split(/[\s,]+/).filter((s) => s.length > 0).map(parseFloat);
-    if (type === "M" || type === "L") {
-      commands.push({ type, x: args[0], y: args[1] });
-    } else if (type === "C") {
-      commands.push({
-        type,
-        x1: args[0],
-        y1: args[1],
-        x2: args[2],
-        y2: args[3],
-        x: args[4],
-        y: args[5]
-      });
-    } else if (type === "Q") {
-      commands.push({
-        type,
-        x1: args[0],
-        y1: args[1],
-        x: args[2],
-        y: args[3]
-      });
-    } else if (type === "Z") {
-      commands.push({ type });
-    }
-  }
-  return commands;
-}
-function computePathBounds3(path) {
-  const commands = parsePathCommands(path);
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  const updateBounds = (x, y) => {
-    minX = Math.min(minX, x);
-    minY = Math.min(minY, y);
-    maxX = Math.max(maxX, x);
-    maxY = Math.max(maxY, y);
-  };
-  for (const cmd of commands) {
-    if (cmd.x !== void 0 && cmd.y !== void 0) {
-      updateBounds(cmd.x, cmd.y);
-    }
-    if (cmd.x1 !== void 0 && cmd.y1 !== void 0) {
-      updateBounds(cmd.x1, cmd.y1);
-    }
-    if (cmd.x2 !== void 0 && cmd.y2 !== void 0) {
-      updateBounds(cmd.x2, cmd.y2);
-    }
-  }
-  if (minX === Infinity) {
-    return { x: 0, y: 0, w: 0, h: 0 };
-  }
-  return {
-    x: minX,
-    y: minY,
-    w: maxX - minX,
-    h: maxY - minY
-  };
-}
-function translatePath(path, dx, dy) {
-  return path.replace(
-    /(-?\d*\.?\d+(?:e[-+]?\d+)?)\s+(-?\d*\.?\d+(?:e[-+]?\d+)?)/gi,
-    (match, x, y) => {
-      const newX = parseFloat(x) + dx;
-      const newY = parseFloat(y) + dy;
-      return `${newX} ${newY}`;
-    }
-  );
-}
-function scalePath(path, sx, sy = sx) {
-  return path.replace(
-    /(-?\d*\.?\d+(?:e[-+]?\d+)?)\s+(-?\d*\.?\d+(?:e[-+]?\d+)?)/gi,
-    (match, x, y) => {
-      const newX = parseFloat(x) * sx;
-      const newY = parseFloat(y) * sy;
-      return `${newX} ${newY}`;
-    }
-  );
-}
-function rotatePath(path, angleDegrees) {
-  const angleRadians = angleDegrees * DEG_TO_RAD;
-  const cos = Math.cos(angleRadians);
-  const sin = Math.sin(angleRadians);
-  return path.replace(
-    /(-?\d*\.?\d+(?:e[-+]?\d+)?)\s+(-?\d*\.?\d+(?:e[-+]?\d+)?)/gi,
-    (match, x, y) => {
-      const px = parseFloat(x);
-      const py = parseFloat(y);
-      const newX = px * cos - py * sin;
-      const newY = px * sin + py * cos;
-      return `${newX} ${newY}`;
-    }
-  );
-}
-function centerPath(path) {
-  const bounds = computePathBounds3(path);
-  const cx = bounds.x + bounds.w / 2;
-  const cy = bounds.y + bounds.h / 2;
-  return translatePath(path, -cx, -cy);
-}
-function normalizePathToSize(path, targetWidth, targetHeight) {
-  const bounds = computePathBounds3(path);
-  if (bounds.w === 0 || bounds.h === 0) return path;
-  const scaleX = targetWidth / bounds.w;
-  const scaleY = targetHeight / bounds.h;
-  const scale = Math.min(scaleX, scaleY);
-  let normalized = translatePath(path, -bounds.x, -bounds.y);
-  normalized = scalePath(normalized, scale);
-  return normalized;
-}
-
 // src/core/svg-path-utils.ts
 var TAU = Math.PI * 2;
 var PATH_COMMAND_REGEX = /([MmLlHhVvCcSsQqTtAaZz])([^MmLlHhVvCcSsQqTtAaZz]*)/g;
@@ -3074,109 +2745,212 @@ function quadraticToCubic(x0, y0, qx, qy, x, y) {
   };
 }
 
-// src/core/svg-import.ts
-var SVG_ATTRS_REGEX = /<svg([^>]*)>/i;
-var PATH_TAG_REGEX = /<path([^/>]*)\/?>/gi;
-var RECT_TAG_REGEX = /<rect([^/>]*)\/?>/gi;
-var CIRCLE_TAG_REGEX = /<circle([^/>]*)\/?>/gi;
-var ELLIPSE_TAG_REGEX = /<ellipse([^/>]*)\/?>/gi;
-var LINE_TAG_REGEX = /<line([^/>]*)\/?>/gi;
-var POLYLINE_TAG_REGEX = /<polyline([^/>]*)\/?>/gi;
-var POLYGON_TAG_REGEX = /<polygon([^/>]*)\/?>/gi;
-function extractAttribute(attrs, name) {
-  const regex = new RegExp(`${name}\\s*=\\s*["']([^"']*)["']`, "i");
-  const match = attrs.match(regex);
-  return match ? match[1] : void 0;
-}
-function parseColor(color) {
-  if (!color || color === "none" || color === "transparent") {
-    return void 0;
-  }
-  color = color.trim();
-  if (color.startsWith("#")) {
-    if (color.length === 4) {
-      const r = color[1];
-      const g = color[2];
-      const b = color[3];
-      return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
-    }
-    return color.toUpperCase();
-  }
-  const rgbMatch = color.match(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i);
-  if (rgbMatch) {
-    const r = parseInt(rgbMatch[1], 10);
-    const g = parseInt(rgbMatch[2], 10);
-    const b = parseInt(rgbMatch[3], 10);
-    return rgbToHex(r, g, b);
-  }
-  const rgbaMatch = color.match(/rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*[\d.]+\s*\)/i);
-  if (rgbaMatch) {
-    const r = parseInt(rgbaMatch[1], 10);
-    const g = parseInt(rgbaMatch[2], 10);
-    const b = parseInt(rgbaMatch[3], 10);
-    return rgbToHex(r, g, b);
-  }
-  const namedColors = {
-    black: "#000000",
-    white: "#FFFFFF",
-    red: "#FF0000",
-    green: "#008000",
-    blue: "#0000FF",
-    yellow: "#FFFF00",
-    cyan: "#00FFFF",
-    magenta: "#FF00FF",
-    gray: "#808080",
-    grey: "#808080",
-    orange: "#FFA500",
-    purple: "#800080",
-    pink: "#FFC0CB",
-    brown: "#A52A2A",
-    navy: "#000080",
-    teal: "#008080",
-    olive: "#808000",
-    maroon: "#800000",
-    aqua: "#00FFFF",
-    lime: "#00FF00",
-    silver: "#C0C0C0",
-    fuchsia: "#FF00FF"
+// src/core/resvg-renderer-web.ts
+var resvgWasmModule = null;
+var wasmInitialized = false;
+async function initResvgWasm() {
+  if (resvgWasmModule && wasmInitialized) {
+    return resvgWasmModule;
+  }
+  const wasmModule = await import("@resvg/resvg-wasm");
+  resvgWasmModule = wasmModule;
+  if (!wasmInitialized) {
+    const wasmUrl = new URL("@resvg/resvg-wasm/index_bg.wasm", import.meta.url);
+    const wasmResponse = await fetch(wasmUrl);
+    const wasmBytes = await wasmResponse.arrayBuffer();
+    const compiled = await WebAssembly.compile(wasmBytes);
+    await resvgWasmModule.initWasm(compiled);
+    wasmInitialized = true;
+  }
+  return resvgWasmModule;
+}
+async function initResvg(wasmBinary) {
+  if (wasmInitialized) {
+    return;
+  }
+  const wasmModule = await import("@resvg/resvg-wasm");
+  resvgWasmModule = wasmModule;
+  if (wasmBinary) {
+    const compiled = await WebAssembly.compile(wasmBinary);
+    await resvgWasmModule.initWasm(compiled);
+  } else {
+    const wasmUrl = new URL("@resvg/resvg-wasm/index_bg.wasm", import.meta.url);
+    const wasmResponse = await fetch(wasmUrl);
+    const wasmBytes = await wasmResponse.arrayBuffer();
+    const compiled = await WebAssembly.compile(wasmBytes);
+    await resvgWasmModule.initWasm(compiled);
+  }
+  wasmInitialized = true;
+}
+async function renderSvgToPng(svgString, options = {}) {
+  const { Resvg } = await initResvgWasm();
+  const resvgOptions = {};
+  if (options.background) {
+    resvgOptions.background = options.background;
+  }
+  if (options.fitTo) {
+    resvgOptions.fitTo = options.fitTo;
+  } else if (options.width) {
+    resvgOptions.fitTo = { mode: "width", value: options.width };
+  } else if (options.height) {
+    resvgOptions.fitTo = { mode: "height", value: options.height };
+  }
+  const resvg = new Resvg(svgString, resvgOptions);
+  const rendered = resvg.render();
+  const png = rendered.asPng();
+  return {
+    png,
+    width: rendered.width,
+    height: rendered.height
   };
-  const lowerColor = color.toLowerCase();
-  if (namedColors[lowerColor]) {
-    return namedColors[lowerColor];
+}
+function shapeToSvgString(asset, defaultWidth, defaultHeight) {
+  if (!asset.shape) {
+    throw new Error("Shape is required for shape mode");
+  }
+  const width = asset.width ?? defaultWidth;
+  const height = asset.height ?? defaultHeight;
+  const pathData = generateShapePathData(asset.shape);
+  const bounds = computeSimplePathBounds(pathData);
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const pathCenterX = bounds.x + bounds.w / 2;
+  const pathCenterY = bounds.y + bounds.h / 2;
+  let offsetX = centerX - pathCenterX;
+  let offsetY = centerY - pathCenterY;
+  if (asset.transform) {
+    offsetX += asset.transform.x ?? 0;
+    offsetY += asset.transform.y ?? 0;
+  }
+  const elements = [];
+  if (asset.shadow) {
+    const shadowOffsetX = asset.shadow.offsetX ?? 4;
+    const shadowOffsetY = asset.shadow.offsetY ?? 4;
+    const shadowColor = asset.shadow.color ?? "#000000";
+    const shadowOpacity = asset.shadow.opacity ?? 0.5;
+    elements.push(
+      `<path d="${pathData}" transform="translate(${offsetX + shadowOffsetX}, ${offsetY + shadowOffsetY})" fill="${shadowColor}" fill-opacity="${shadowOpacity}"/>`
+    );
+  }
+  const pathAttrs = [`d="${pathData}"`, `transform="translate(${offsetX}, ${offsetY})"`];
+  if (asset.fill) {
+    const fillId = `fill-${Date.now()}`;
+    const fillDef = generateFillDefinition(asset.fill, fillId, bounds);
+    if (fillDef.defs) {
+      elements.unshift(fillDef.defs);
+    }
+    pathAttrs.push(`fill="${fillDef.fill}"`);
+    if (asset.fill.opacity !== void 0 && asset.fill.opacity !== 1) {
+      pathAttrs.push(`fill-opacity="${asset.fill.opacity}"`);
+    }
+  } else {
+    pathAttrs.push(`fill="none"`);
+  }
+  if (asset.stroke && asset.stroke.width && asset.stroke.width > 0) {
+    pathAttrs.push(`stroke="${asset.stroke.color ?? "#000000"}"`);
+    pathAttrs.push(`stroke-width="${asset.stroke.width}"`);
+    if (asset.stroke.opacity !== void 0 && asset.stroke.opacity !== 1) {
+      pathAttrs.push(`stroke-opacity="${asset.stroke.opacity}"`);
+    }
+    if (asset.stroke.dashArray && asset.stroke.dashArray.length > 0) {
+      pathAttrs.push(`stroke-dasharray="${asset.stroke.dashArray.join(" ")}"`);
+    }
+    if (asset.stroke.lineCap) {
+      pathAttrs.push(`stroke-linecap="${asset.stroke.lineCap}"`);
+    }
+    if (asset.stroke.lineJoin) {
+      pathAttrs.push(`stroke-linejoin="${asset.stroke.lineJoin}"`);
+    }
+  }
+  if (asset.opacity !== void 0 && asset.opacity !== 1) {
+    pathAttrs.push(`opacity="${asset.opacity}"`);
   }
-  return void 0;
+  elements.push(`<path ${pathAttrs.join(" ")}/>`);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${elements.join(
+    ""
+  )}</svg>`;
 }
-function rgbToHex(r, g, b) {
-  const toHex = (n) => {
-    const hex = Math.max(0, Math.min(255, n)).toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
-}
-function parseNumber(value) {
-  if (!value) return void 0;
-  const num = parseFloat(value);
-  return isNaN(num) ? void 0 : num;
-}
-function parseViewBox(viewBox) {
-  if (!viewBox) return void 0;
-  const parts = viewBox.trim().split(/[\s,]+/).map(parseFloat);
-  if (parts.length === 4 && parts.every((p) => !isNaN(p))) {
-    return { x: parts[0], y: parts[1], width: parts[2], height: parts[3] };
-  }
-  return void 0;
-}
-function rectToPath(attrs) {
-  const x = parseNumber(extractAttribute(attrs, "x")) || 0;
-  const y = parseNumber(extractAttribute(attrs, "y")) || 0;
-  const width = parseNumber(extractAttribute(attrs, "width")) || 0;
-  const height = parseNumber(extractAttribute(attrs, "height")) || 0;
-  const rx = parseNumber(extractAttribute(attrs, "rx")) || 0;
-  const ry = parseNumber(extractAttribute(attrs, "ry")) || rx;
-  if (rx === 0 && ry === 0) {
+function generateFillDefinition(fill, id, _bounds) {
+  if (fill.type === "solid") {
+    return { fill: fill.color };
+  }
+  if (fill.type === "linear") {
+    const angle = fill.angle ?? 0;
+    const rad = angle * Math.PI / 180;
+    const x1 = 50 - Math.cos(rad) * 50;
+    const y1 = 50 - Math.sin(rad) * 50;
+    const x2 = 50 + Math.cos(rad) * 50;
+    const y2 = 50 + Math.sin(rad) * 50;
+    const stops = fill.stops.map((s) => `<stop offset="${s.offset * 100}%" stop-color="${s.color}"/>`).join("");
+    const defs = `<defs><linearGradient id="${id}" x1="${x1}%" y1="${y1}%" x2="${x2}%" y2="${y2}%">${stops}</linearGradient></defs>`;
+    return { fill: `url(#${id})`, defs };
+  }
+  if (fill.type === "radial") {
+    const stops = fill.stops.map((s) => `<stop offset="${s.offset * 100}%" stop-color="${s.color}"/>`).join("");
+    const defs = `<defs><radialGradient id="${id}" cx="50%" cy="50%" r="50%">${stops}</radialGradient></defs>`;
+    return { fill: `url(#${id})`, defs };
+  }
+  return { fill: "#000000" };
+}
+function generateShapePathData(shape) {
+  const shapeType = shape.type;
+  switch (shapeType) {
+    case "rectangle": {
+      const s = shape;
+      return generateRectanglePath(s.width, s.height, s.cornerRadius ?? 0);
+    }
+    case "circle": {
+      const s = shape;
+      return generateCirclePath(s.radius);
+    }
+    case "ellipse": {
+      const s = shape;
+      return generateEllipsePath(s.radiusX, s.radiusY);
+    }
+    case "line": {
+      const s = shape;
+      return generateLinePath(s.length, s.thickness ?? 2);
+    }
+    case "polygon": {
+      const s = shape;
+      return generatePolygonPath(s.sides, s.radius);
+    }
+    case "star": {
+      const s = shape;
+      return generateStarPath(s.points, s.outerRadius, s.innerRadius);
+    }
+    case "arrow": {
+      const s = shape;
+      return generateArrowPath(s.length, s.headWidth ?? 30, s.headLength ?? 25, s.shaftWidth ?? 10);
+    }
+    case "heart": {
+      const s = shape;
+      return generateHeartPath(s.size);
+    }
+    case "cross": {
+      const s = shape;
+      return generateCrossPath(s.width, s.height, s.thickness);
+    }
+    case "ring": {
+      const s = shape;
+      return generateRingPath(s.outerRadius, s.innerRadius);
+    }
+    case "path": {
+      const s = shape;
+      return s.d;
+    }
+    default:
+      throw new Error(`Unknown shape type: ${shapeType}`);
+  }
+}
+var KAPPA = 0.5522847498307936;
+function generateRectanglePath(width, height, cornerRadius) {
+  const x = -width / 2;
+  const y = -height / 2;
+  const r = Math.min(cornerRadius, width / 2, height / 2);
+  if (r === 0) {
     return `M ${x} ${y} L ${x + width} ${y} L ${x + width} ${y + height} L ${x} ${y + height} Z`;
   }
-  const r = Math.min(rx, ry, width / 2, height / 2);
   return [
     `M ${x + r} ${y}`,
     `L ${x + width - r} ${y}`,
@@ -3190,288 +2964,350 @@ function rectToPath(attrs) {
     "Z"
   ].join(" ");
 }
-function circleToPath(attrs) {
-  const cx = parseNumber(extractAttribute(attrs, "cx")) || 0;
-  const cy = parseNumber(extractAttribute(attrs, "cy")) || 0;
-  const r = parseNumber(extractAttribute(attrs, "r")) || 0;
-  if (r === 0) return "";
-  const KAPPA2 = 0.5522847498307936;
-  const k = r * KAPPA2;
+function generateCirclePath(radius) {
+  const k = radius * KAPPA;
   return [
-    `M ${cx + r} ${cy}`,
-    `C ${cx + r} ${cy + k} ${cx + k} ${cy + r} ${cx} ${cy + r}`,
-    `C ${cx - k} ${cy + r} ${cx - r} ${cy + k} ${cx - r} ${cy}`,
-    `C ${cx - r} ${cy - k} ${cx - k} ${cy - r} ${cx} ${cy - r}`,
-    `C ${cx + k} ${cy - r} ${cx + r} ${cy - k} ${cx + r} ${cy}`,
+    `M ${radius} 0`,
+    `C ${radius} ${k} ${k} ${radius} 0 ${radius}`,
+    `C ${-k} ${radius} ${-radius} ${k} ${-radius} 0`,
+    `C ${-radius} ${-k} ${-k} ${-radius} 0 ${-radius}`,
+    `C ${k} ${-radius} ${radius} ${-k} ${radius} 0`,
     "Z"
   ].join(" ");
 }
-function ellipseToPath(attrs) {
-  const cx = parseNumber(extractAttribute(attrs, "cx")) || 0;
-  const cy = parseNumber(extractAttribute(attrs, "cy")) || 0;
-  const rx = parseNumber(extractAttribute(attrs, "rx")) || 0;
-  const ry = parseNumber(extractAttribute(attrs, "ry")) || 0;
-  if (rx === 0 || ry === 0) return "";
-  const KAPPA2 = 0.5522847498307936;
-  const kx = rx * KAPPA2;
-  const ky = ry * KAPPA2;
+function generateCirclePathReversed(radius) {
+  const k = radius * KAPPA;
   return [
-    `M ${cx + rx} ${cy}`,
-    `C ${cx + rx} ${cy + ky} ${cx + kx} ${cy + ry} ${cx} ${cy + ry}`,
-    `C ${cx - kx} ${cy + ry} ${cx - rx} ${cy + ky} ${cx - rx} ${cy}`,
-    `C ${cx - rx} ${cy - ky} ${cx - kx} ${cy - ry} ${cx} ${cy - ry}`,
-    `C ${cx + kx} ${cy - ry} ${cx + rx} ${cy - ky} ${cx + rx} ${cy}`,
+    `M ${radius} 0`,
+    `C ${radius} ${-k} ${k} ${-radius} 0 ${-radius}`,
+    `C ${-k} ${-radius} ${-radius} ${-k} ${-radius} 0`,
+    `C ${-radius} ${k} ${-k} ${radius} 0 ${radius}`,
+    `C ${k} ${radius} ${radius} ${k} ${radius} 0`,
+    "Z"
+  ].join(" ");
+}
+function generateEllipsePath(radiusX, radiusY) {
+  const kx = radiusX * KAPPA;
+  const ky = radiusY * KAPPA;
+  return [
+    `M ${radiusX} 0`,
+    `C ${radiusX} ${ky} ${kx} ${radiusY} 0 ${radiusY}`,
+    `C ${-kx} ${radiusY} ${-radiusX} ${ky} ${-radiusX} 0`,
+    `C ${-radiusX} ${-ky} ${-kx} ${-radiusY} 0 ${-radiusY}`,
+    `C ${kx} ${-radiusY} ${radiusX} ${-ky} ${radiusX} 0`,
     "Z"
   ].join(" ");
 }
-function lineToPath(attrs) {
-  const x1 = parseNumber(extractAttribute(attrs, "x1")) || 0;
-  const y1 = parseNumber(extractAttribute(attrs, "y1")) || 0;
-  const x2 = parseNumber(extractAttribute(attrs, "x2")) || 0;
-  const y2 = parseNumber(extractAttribute(attrs, "y2")) || 0;
-  return `M ${x1} ${y1} L ${x2} ${y2}`;
-}
-function polylineToPath(attrs) {
-  const points = extractAttribute(attrs, "points");
-  if (!points) return "";
-  const coords = points.trim().split(/[\s,]+/).map(parseFloat);
-  if (coords.length < 2) return "";
+function generateLinePath(length, thickness) {
+  const halfLen = length / 2;
+  const halfThick = thickness / 2;
+  return `M ${-halfLen} ${-halfThick} L ${halfLen} ${-halfThick} L ${halfLen} ${halfThick} L ${-halfLen} ${halfThick} Z`;
+}
+function generatePolygonPath(sides, radius) {
+  const angleStep = 2 * Math.PI / sides;
+  const startAngle = -Math.PI / 2;
+  const points = [];
+  for (let i = 0; i < sides; i++) {
+    const angle = startAngle + i * angleStep;
+    const x = Math.cos(angle) * radius;
+    const y = Math.sin(angle) * radius;
+    points.push(i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`);
+  }
+  points.push("Z");
+  return points.join(" ");
+}
+function generateStarPath(points, outerRadius, innerRadius) {
+  const angleStep = Math.PI / points;
+  const startAngle = -Math.PI / 2;
   const pathParts = [];
-  for (let i = 0; i < coords.length; i += 2) {
-    if (i + 1 < coords.length) {
-      if (i === 0) {
-        pathParts.push(`M ${coords[i]} ${coords[i + 1]}`);
-      } else {
-        pathParts.push(`L ${coords[i]} ${coords[i + 1]}`);
-      }
-    }
+  for (let i = 0; i < points * 2; i++) {
+    const angle = startAngle + i * angleStep;
+    const radius = i % 2 === 0 ? outerRadius : innerRadius;
+    const x = Math.cos(angle) * radius;
+    const y = Math.sin(angle) * radius;
+    pathParts.push(i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`);
   }
+  pathParts.push("Z");
   return pathParts.join(" ");
 }
-function polygonToPath(attrs) {
-  const polyPath = polylineToPath(attrs);
-  if (!polyPath) return "";
-  return polyPath + " Z";
-}
-function extractPathAttributes(attrs) {
-  const d = extractAttribute(attrs, "d") || "";
-  const fill = extractAttribute(attrs, "fill");
-  const fillOpacity = parseNumber(extractAttribute(attrs, "fill-opacity"));
-  const stroke = extractAttribute(attrs, "stroke");
-  const strokeWidth = parseNumber(extractAttribute(attrs, "stroke-width"));
-  const strokeOpacity = parseNumber(extractAttribute(attrs, "stroke-opacity"));
-  const opacity = parseNumber(extractAttribute(attrs, "opacity"));
-  const transform = extractAttribute(attrs, "transform");
-  const style = extractAttribute(attrs, "style");
-  let styleFill = fill;
-  let styleStroke = stroke;
-  let styleStrokeWidth = strokeWidth;
-  let styleOpacity = opacity;
-  if (style) {
-    const fillMatch = style.match(/fill\s*:\s*([^;]+)/i);
-    if (fillMatch) styleFill = fillMatch[1].trim();
-    const strokeMatch = style.match(/stroke\s*:\s*([^;]+)/i);
-    if (strokeMatch) styleStroke = strokeMatch[1].trim();
-    const strokeWidthMatch = style.match(/stroke-width\s*:\s*([^;]+)/i);
-    if (strokeWidthMatch) styleStrokeWidth = parseNumber(strokeWidthMatch[1].trim());
-    const opacityMatch = style.match(/opacity\s*:\s*([^;]+)/i);
-    if (opacityMatch) styleOpacity = parseNumber(opacityMatch[1].trim());
-  }
-  return {
-    d,
-    fill: styleFill,
-    fillOpacity,
-    stroke: styleStroke,
-    strokeWidth: styleStrokeWidth,
-    strokeOpacity,
-    opacity: styleOpacity,
-    transform
-  };
+function generateArrowPath(length, headWidth, headLength, shaftWidth) {
+  const halfShaft = shaftWidth / 2;
+  const halfHead = headWidth / 2;
+  const shaftLength = length - headLength;
+  const startX = -length / 2;
+  return [
+    `M ${startX} ${-halfShaft}`,
+    `L ${startX + shaftLength} ${-halfShaft}`,
+    `L ${startX + shaftLength} ${-halfHead}`,
+    `L ${startX + length} 0`,
+    `L ${startX + shaftLength} ${halfHead}`,
+    `L ${startX + shaftLength} ${halfShaft}`,
+    `L ${startX} ${halfShaft}`,
+    "Z"
+  ].join(" ");
 }
-function extractShapeAsPath(tagAttrs, convertFn) {
-  const d = convertFn(tagAttrs);
-  if (!d) return null;
-  const pathAttrs = extractPathAttributes(tagAttrs);
-  pathAttrs.d = d;
-  return pathAttrs;
-}
-function parseSvgMarkup(svgString) {
-  const svgMatch = svgString.match(SVG_ATTRS_REGEX);
-  const svgAttrs = svgMatch ? svgMatch[1] : "";
-  const widthAttr = extractAttribute(svgAttrs, "width");
-  const heightAttr = extractAttribute(svgAttrs, "height");
-  const viewBoxAttr = extractAttribute(svgAttrs, "viewBox");
-  let width = parseNumber(widthAttr?.replace(/px$/, "")) || 0;
-  let height = parseNumber(heightAttr?.replace(/px$/, "")) || 0;
-  const viewBox = parseViewBox(viewBoxAttr);
-  if (viewBox && (!width || !height)) {
-    width = width || viewBox.width;
-    height = height || viewBox.height;
-  }
-  const paths = [];
-  let match;
-  PATH_TAG_REGEX.lastIndex = 0;
-  while ((match = PATH_TAG_REGEX.exec(svgString)) !== null) {
-    const pathAttrs = extractPathAttributes(match[1]);
-    if (pathAttrs.d) {
-      paths.push(pathAttrs);
-    }
-  }
-  RECT_TAG_REGEX.lastIndex = 0;
-  while ((match = RECT_TAG_REGEX.exec(svgString)) !== null) {
-    const path = extractShapeAsPath(match[1], rectToPath);
-    if (path) paths.push(path);
-  }
-  CIRCLE_TAG_REGEX.lastIndex = 0;
-  while ((match = CIRCLE_TAG_REGEX.exec(svgString)) !== null) {
-    const path = extractShapeAsPath(match[1], circleToPath);
-    if (path) paths.push(path);
-  }
-  ELLIPSE_TAG_REGEX.lastIndex = 0;
-  while ((match = ELLIPSE_TAG_REGEX.exec(svgString)) !== null) {
-    const path = extractShapeAsPath(match[1], ellipseToPath);
-    if (path) paths.push(path);
-  }
-  LINE_TAG_REGEX.lastIndex = 0;
-  while ((match = LINE_TAG_REGEX.exec(svgString)) !== null) {
-    const path = extractShapeAsPath(match[1], lineToPath);
-    if (path) paths.push(path);
-  }
-  POLYLINE_TAG_REGEX.lastIndex = 0;
-  while ((match = POLYLINE_TAG_REGEX.exec(svgString)) !== null) {
-    const path = extractShapeAsPath(match[1], polylineToPath);
-    if (path) paths.push(path);
-  }
-  POLYGON_TAG_REGEX.lastIndex = 0;
-  while ((match = POLYGON_TAG_REGEX.exec(svgString)) !== null) {
-    const path = extractShapeAsPath(match[1], polygonToPath);
-    if (path) paths.push(path);
-  }
-  return {
-    width,
-    height,
-    viewBox,
-    paths
-  };
+function generateHeartPath(size) {
+  const scale = size / 32;
+  const points = [
+    "M 0 6",
+    "C -0.5 -3 -12 -3 -12 6",
+    "C -12 12 0 18 0 24",
+    "C 0 18 12 12 12 6",
+    "C 12 -3 0.5 -3 0 6",
+    "Z"
+  ];
+  return points.map((cmd) => {
+    return cmd.replace(/-?\d+(\.\d+)?/g, (match) => {
+      return String(parseFloat(match) * scale);
+    });
+  }).join(" ");
 }
-function svgToAsset(svgString) {
-  const parsed = parseSvgMarkup(svgString);
-  if (parsed.paths.length === 0) {
-    return {
-      type: "svg",
-      shape: {
-        type: "path",
-        d: ""
-      },
-      width: parsed.width || void 0,
-      height: parsed.height || void 0
-    };
-  }
-  if (parsed.paths.length === 1) {
-    return pathToAsset(parsed.paths[0], parsed.width, parsed.height);
-  }
-  return parsed.paths.map((path) => pathToAsset(path, parsed.width, parsed.height));
+function generateCrossPath(width, height, thickness) {
+  const hw = width / 2;
+  const hh = height / 2;
+  const ht = thickness / 2;
+  return [
+    `M ${-ht} ${-hh}`,
+    `L ${ht} ${-hh}`,
+    `L ${ht} ${-ht}`,
+    `L ${hw} ${-ht}`,
+    `L ${hw} ${ht}`,
+    `L ${ht} ${ht}`,
+    `L ${ht} ${hh}`,
+    `L ${-ht} ${hh}`,
+    `L ${-ht} ${ht}`,
+    `L ${-hw} ${ht}`,
+    `L ${-hw} ${-ht}`,
+    `L ${-ht} ${-ht}`,
+    "Z"
+  ].join(" ");
 }
-function pathToAsset(path, width, height) {
-  const asset = {
-    type: "svg",
-    shape: {
-      type: "path",
-      d: path.d
-    }
-  };
-  const fillColor = parseColor(path.fill);
-  if (fillColor) {
-    asset.fill = {
-      type: "solid",
-      color: fillColor
-    };
-    if (path.fillOpacity !== void 0 && path.fillOpacity !== 1) {
-      asset.fill.opacity = path.fillOpacity;
-    }
-  }
-  const strokeColor = parseColor(path.stroke);
-  if (strokeColor && path.strokeWidth && path.strokeWidth > 0) {
-    asset.stroke = {
-      color: strokeColor,
-      width: path.strokeWidth
-    };
-    if (path.strokeOpacity !== void 0 && path.strokeOpacity !== 1) {
-      asset.stroke.opacity = path.strokeOpacity;
+function generateRingPath(outerRadius, innerRadius) {
+  const outerPath = generateCirclePath(outerRadius);
+  const innerPath = generateCirclePathReversed(innerRadius);
+  return `${outerPath} ${innerPath}`;
+}
+function computeSimplePathBounds(d) {
+  const numberRegex = /-?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/g;
+  const numbers = [];
+  let match;
+  while ((match = numberRegex.exec(d)) !== null) {
+    const num = parseFloat(match[0]);
+    if (!isNaN(num) && isFinite(num)) {
+      numbers.push(num);
     }
   }
-  if (path.opacity !== void 0 && path.opacity !== 1) {
-    asset.opacity = path.opacity;
-  }
-  if (width > 0) {
-    asset.width = width;
+  if (numbers.length < 2) {
+    return { x: 0, y: 0, w: 0, h: 0 };
   }
-  if (height > 0) {
-    asset.height = height;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let currentX = 0;
+  let currentY = 0;
+  const commands = d.match(/[MmLlHhVvCcSsQqTtAaZz]/g) || [];
+  let cmdIndex = 0;
+  let numIndex = 0;
+  while (cmdIndex < commands.length) {
+    const cmd = commands[cmdIndex];
+    switch (cmd) {
+      case "M":
+      case "L":
+      case "T":
+        if (numIndex + 1 < numbers.length) {
+          currentX = numbers[numIndex++];
+          currentY = numbers[numIndex++];
+          minX = Math.min(minX, currentX);
+          maxX = Math.max(maxX, currentX);
+          minY = Math.min(minY, currentY);
+          maxY = Math.max(maxY, currentY);
+        }
+        break;
+      case "m":
+      case "l":
+      case "t":
+        if (numIndex + 1 < numbers.length) {
+          currentX += numbers[numIndex++];
+          currentY += numbers[numIndex++];
+          minX = Math.min(minX, currentX);
+          maxX = Math.max(maxX, currentX);
+          minY = Math.min(minY, currentY);
+          maxY = Math.max(maxY, currentY);
+        }
+        break;
+      case "H":
+        if (numIndex < numbers.length) {
+          currentX = numbers[numIndex++];
+          minX = Math.min(minX, currentX);
+          maxX = Math.max(maxX, currentX);
+        }
+        break;
+      case "h":
+        if (numIndex < numbers.length) {
+          currentX += numbers[numIndex++];
+          minX = Math.min(minX, currentX);
+          maxX = Math.max(maxX, currentX);
+        }
+        break;
+      case "V":
+        if (numIndex < numbers.length) {
+          currentY = numbers[numIndex++];
+          minY = Math.min(minY, currentY);
+          maxY = Math.max(maxY, currentY);
+        }
+        break;
+      case "v":
+        if (numIndex < numbers.length) {
+          currentY += numbers[numIndex++];
+          minY = Math.min(minY, currentY);
+          maxY = Math.max(maxY, currentY);
+        }
+        break;
+      case "C":
+        if (numIndex + 5 < numbers.length) {
+          for (let j = 0; j < 3; j++) {
+            const x = numbers[numIndex++];
+            const y = numbers[numIndex++];
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+            if (j === 2) {
+              currentX = x;
+              currentY = y;
+            }
+          }
+        }
+        break;
+      case "c":
+        if (numIndex + 5 < numbers.length) {
+          for (let j = 0; j < 3; j++) {
+            const x = currentX + numbers[numIndex++];
+            const y = currentY + numbers[numIndex++];
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+            if (j === 2) {
+              currentX = x;
+              currentY = y;
+            }
+          }
+        }
+        break;
+      case "S":
+      case "Q":
+        if (numIndex + 3 < numbers.length) {
+          for (let j = 0; j < 2; j++) {
+            const x = numbers[numIndex++];
+            const y = numbers[numIndex++];
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+            if (j === 1) {
+              currentX = x;
+              currentY = y;
+            }
+          }
+        }
+        break;
+      case "s":
+      case "q":
+        if (numIndex + 3 < numbers.length) {
+          for (let j = 0; j < 2; j++) {
+            const x = currentX + numbers[numIndex++];
+            const y = currentY + numbers[numIndex++];
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+            if (j === 1) {
+              currentX = x;
+              currentY = y;
+            }
+          }
+        }
+        break;
+      case "A":
+        if (numIndex + 6 < numbers.length) {
+          numIndex += 5;
+          currentX = numbers[numIndex++];
+          currentY = numbers[numIndex++];
+          minX = Math.min(minX, currentX);
+          maxX = Math.max(maxX, currentX);
+          minY = Math.min(minY, currentY);
+          maxY = Math.max(maxY, currentY);
+        }
+        break;
+      case "a":
+        if (numIndex + 6 < numbers.length) {
+          numIndex += 5;
+          currentX += numbers[numIndex++];
+          currentY += numbers[numIndex++];
+          minX = Math.min(minX, currentX);
+          maxX = Math.max(maxX, currentX);
+          minY = Math.min(minY, currentY);
+          maxY = Math.max(maxY, currentY);
+        }
+        break;
+      case "Z":
+      case "z":
+        break;
+    }
+    cmdIndex++;
   }
-  return asset;
-}
-function svgToSingleAsset(svgString) {
-  const parsed = parseSvgMarkup(svgString);
-  if (parsed.paths.length === 0) {
-    return {
-      type: "svg",
-      shape: {
-        type: "path",
-        d: ""
-      },
-      width: parsed.width || void 0,
-      height: parsed.height || void 0
-    };
+  if (minX === Infinity) {
+    return { x: 0, y: 0, w: 0, h: 0 };
   }
-  const combinedD = parsed.paths.map((p) => p.d).join(" ");
-  const firstPathWithFill = parsed.paths.find((p) => p.fill && p.fill !== "none");
-  const firstPathWithStroke = parsed.paths.find((p) => p.stroke && p.stroke !== "none");
-  const asset = {
-    type: "svg",
-    shape: {
-      type: "path",
-      d: combinedD
-    }
+  return {
+    x: minX,
+    y: minY,
+    w: maxX - minX,
+    h: maxY - minY
   };
-  if (firstPathWithFill) {
-    const fillColor = parseColor(firstPathWithFill.fill);
-    if (fillColor) {
-      asset.fill = {
-        type: "solid",
-        color: fillColor
-      };
-      if (firstPathWithFill.fillOpacity !== void 0 && firstPathWithFill.fillOpacity !== 1) {
-        asset.fill.opacity = firstPathWithFill.fillOpacity;
-      }
-    }
+}
+async function renderSvgAssetToPng(asset, options = {}) {
+  const defaultWidth = options.defaultWidth ?? 1920;
+  const defaultHeight = options.defaultHeight ?? 1080;
+  let svgString;
+  let targetWidth;
+  let targetHeight;
+  if (asset.src) {
+    svgString = asset.src;
+    const dimensions = extractSvgDimensions(svgString);
+    targetWidth = dimensions.width || defaultWidth;
+    targetHeight = dimensions.height || defaultHeight;
+  } else if (asset.shape) {
+    targetWidth = asset.width ?? defaultWidth;
+    targetHeight = asset.height ?? defaultHeight;
+    svgString = shapeToSvgString(asset, targetWidth, targetHeight);
+  } else {
+    throw new Error("Either 'src' or 'shape' must be provided");
   }
-  if (firstPathWithStroke) {
-    const strokeColor = parseColor(firstPathWithStroke.stroke);
-    if (strokeColor && firstPathWithStroke.strokeWidth && firstPathWithStroke.strokeWidth > 0) {
-      asset.stroke = {
-        color: strokeColor,
-        width: firstPathWithStroke.strokeWidth
-      };
-      if (firstPathWithStroke.strokeOpacity !== void 0 && firstPathWithStroke.strokeOpacity !== 1) {
-        asset.stroke.opacity = firstPathWithStroke.strokeOpacity;
+  return renderSvgToPng(svgString, {
+    width: targetWidth,
+    height: targetHeight,
+    background: options.background
+  });
+}
+function extractSvgDimensions(svgString) {
+  const widthMatch = svgString.match(/width\s*=\s*["']?(\d+(?:\.\d+)?)/i);
+  const heightMatch = svgString.match(/height\s*=\s*["']?(\d+(?:\.\d+)?)/i);
+  let width = widthMatch ? parseFloat(widthMatch[1]) : 0;
+  let height = heightMatch ? parseFloat(heightMatch[1]) : 0;
+  if (!width || !height) {
+    const viewBoxMatch = svgString.match(/viewBox\s*=\s*["']([^"']+)["']/i);
+    if (viewBoxMatch) {
+      const parts = viewBoxMatch[1].trim().split(/[\s,]+/).map(parseFloat);
+      if (parts.length === 4) {
+        width = width || parts[2];
+        height = height || parts[3];
       }
     }
   }
-  const firstPathWithOpacity = parsed.paths.find((p) => p.opacity !== void 0 && p.opacity !== 1);
-  if (firstPathWithOpacity) {
-    asset.opacity = firstPathWithOpacity.opacity;
-  }
-  if (parsed.width > 0) {
-    asset.width = parsed.width;
-  }
-  if (parsed.height > 0) {
-    asset.height = parsed.height;
-  }
-  return asset;
-}
-function importSvg(svgString) {
-  return svgToSingleAsset(svgString);
+  return { width, height };
 }
 
 // src/env/entry.web.ts
@@ -3738,38 +3574,21 @@ export {
   CanvasRichTextAssetSchema,
   CanvasSvgAssetSchema,
   arcToCubicBeziers,
-  centerPath,
   commandsToPathString,
-  computePathBounds3 as computePathBounds,
+  computeSimplePathBounds,
   createTextEngine,
   createWebPainter,
-  generateArrowPath,
-  generateCirclePath,
-  generateCrossPath,
-  generateEllipsePath,
-  generateHeartPath,
-  generateLinePath,
-  generatePolygonPath,
-  generatePolygonPoints,
-  generateRectanglePath,
-  generateRingPath,
-  generateShapePath,
-  generateStarPath,
-  generateStarPoints,
-  generateTrianglePath,
-  importSvg,
+  generateShapePathData,
+  initResvg,
   isGlyphFill2 as isGlyphFill,
   isShadowFill2 as isShadowFill,
   normalizePath,
   normalizePathString,
-  normalizePathToSize,
-  parseSvgMarkup,
   parseSvgPath,
-  pointsToPath,
   quadraticToCubic,
-  reverseWindingOrder,
-  rotatePath,
-  scalePath,
+  renderSvgAssetToPng,
+  renderSvgToPng,
+  shapeToSvgString,
   svgAssetSchema,
   svgGradientStopSchema,
   svgLinearGradientFillSchema,
@@ -3778,8 +3597,5 @@ export {
   svgShapeSchema,
   svgSolidFillSchema,
   svgStrokeSchema,
-  svgToAsset,
-  svgToSingleAsset,
-  svgTransformSchema,
-  translatePath
+  svgTransformSchema
 };