@shotstack/shotstack-canvas 1.7.2 → 1.8.1

package/dist/entry.web.js

@@ -12,7 +12,16 @@ import {
   richTextShadowSchema,
   richTextBackgroundSchema,
   richTextAlignmentSchema,
-  richTextAnimationSchema
+  richTextAnimationSchema,
+  svgAssetSchema,
+  svgShapeSchema,
+  svgSolidFillSchema,
+  svgLinearGradientFillSchema,
+  svgRadialGradientFillSchema,
+  svgStrokeSchema,
+  svgShadowSchema,
+  svgTransformSchema,
+  svgGradientStopSchema
 } from "@shotstack/schemas/zod";
 
 // src/config/canvas-constants.ts
@@ -168,6 +177,7 @@ var CanvasRichTextAssetSchema = richTextAssetSchema.extend({
   animation: canvasAnimationSchema.optional(),
   customFonts: z.array(customFontSchema).optional()
 }).strict();
+var CanvasSvgAssetSchema = svgAssetSchema;
 
 // src/wasm/hb-loader.ts
 var hbSingleton = null;
@@ -404,6 +414,9 @@ var _FontRegistry = class _FontRegistry {
     __publicField(this, "fonts", /* @__PURE__ */ new Map());
     __publicField(this, "blobs", /* @__PURE__ */ new Map());
     __publicField(this, "fontkitFonts", /* @__PURE__ */ new Map());
+    __publicField(this, "fontkitBaseFonts", /* @__PURE__ */ new Map());
+    __publicField(this, "colorEmojiFonts", /* @__PURE__ */ new Set());
+    __publicField(this, "colorEmojiFontBytes", /* @__PURE__ */ new Map());
     __publicField(this, "wasmBaseURL");
     __publicField(this, "initPromise");
     __publicField(this, "emojiFallbackDesc");
@@ -465,6 +478,49 @@ var _FontRegistry = class _FontRegistry {
   setEmojiFallback(desc) {
     this.emojiFallbackDesc = desc;
   }
+  isColorEmojiFont(family) {
+    return this.colorEmojiFonts.has(family);
+  }
+  getColorEmojiFontBytes(family) {
+    return this.colorEmojiFontBytes.get(family);
+  }
+  getColorEmojiFontFamilies() {
+    return Array.from(this.colorEmojiFonts);
+  }
+  detectColorEmojiFont(fkFont) {
+    try {
+      if (fkFont.directory && fkFont.directory.tables) {
+        const tables = fkFont.directory.tables;
+        if (tables.CBDT || tables.CBLC) {
+          return true;
+        }
+        if (tables.sbix) {
+          return true;
+        }
+        if (tables.COLR && tables.CPAL) {
+          return true;
+        }
+        if (tables.SVG) {
+          return true;
+        }
+      }
+      if (fkFont.availableTables) {
+        const tables = fkFont.availableTables;
+        if (tables.includes("CBDT") || tables.includes("CBLC") || tables.includes("sbix") || tables.includes("COLR") && tables.includes("CPAL") || tables.includes("SVG")) {
+          return true;
+        }
+      }
+      if (fkFont._tables) {
+        const tableNames = Object.keys(fkFont._tables);
+        if (tableNames.includes("CBDT") || tableNames.includes("CBLC") || tableNames.includes("sbix") || tableNames.includes("COLR") && tableNames.includes("CPAL") || tableNames.includes("SVG")) {
+          return true;
+        }
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
   async init() {
     if (this.initPromise) {
       await this.initPromise;
@@ -530,13 +586,29 @@ var _FontRegistry = class _FontRegistry {
       try {
         const buffer = typeof Buffer !== "undefined" ? Buffer.from(bytes) : new Uint8Array(bytes);
         const fkFont = fontkit.create(buffer);
+        const baseFontKey = desc.family;
+        if (!this.fontkitBaseFonts.has(baseFontKey)) {
+          this.fontkitBaseFonts.set(baseFontKey, fkFont);
+        }
+        const isColorEmojiFont = this.detectColorEmojiFont(fkFont);
+        if (isColorEmojiFont) {
+          this.colorEmojiFonts.add(desc.family);
+          if (!this.colorEmojiFontBytes.has(desc.family)) {
+            this.colorEmojiFontBytes.set(desc.family, bytes.slice(0));
+          }
+          console.log(`\u{1F3A8} Registered color emoji font: ${desc.family}`);
+        }
         if (fkFont.variationAxes && Object.keys(fkFont.variationAxes).length > 0) {
           const variationFont = fkFont.getVariation({ wght: weightNum });
           this.fontkitFonts.set(k, variationFont);
-          console.log(`\u2705 Registered variable font: ${desc.family} weight=${weightNum}`);
+          if (!isColorEmojiFont) {
+            console.log(`\u2705 Registered variable font: ${desc.family} weight=${weightNum}`);
+          }
         } else {
           this.fontkitFonts.set(k, fkFont);
-          console.log(`\u2705 Registered static font: ${desc.family}`);
+          if (!isColorEmojiFont) {
+            console.log(`\u2705 Registered static font: ${desc.family}`);
+          }
         }
       } catch (err) {
         console.warn(`\u26A0\uFE0F  Fontkit failed for ${desc.family}:`, err);
@@ -575,6 +647,9 @@ var _FontRegistry = class _FontRegistry {
         const installed = await this.tryFallbackInstall(desc);
         f = installed ? this.fonts.get(k) : void 0;
       }
+      if (!f) {
+        f = await this.tryDeriveFromExistingFont(desc);
+      }
       if (!f) throw new Error(`Font not registered for ${k}`);
       return f;
     } catch (err) {
@@ -586,6 +661,53 @@ var _FontRegistry = class _FontRegistry {
       );
     }
   }
+  async tryDeriveFromExistingFont(desc) {
+    const targetFamily = desc.family;
+    const targetWeight = normalizeWeight(desc.weight);
+    const targetWeightNum = parseInt(targetWeight, 10);
+    let existingBlob;
+    for (const [key, blob] of this.blobs) {
+      if (key.startsWith(`${targetFamily}__`)) {
+        existingBlob = blob;
+        break;
+      }
+    }
+    const baseFkFont = this.fontkitBaseFonts.get(targetFamily);
+    if (!existingBlob || !baseFkFont) {
+      return void 0;
+    }
+    const hasWeightAxis = baseFkFont.variationAxes && baseFkFont.variationAxes["wght"] !== void 0;
+    if (!hasWeightAxis) {
+      console.warn(
+        `Font ${targetFamily} is not a variable font, cannot derive weight ${targetWeight}`
+      );
+      return void 0;
+    }
+    const k = this.key(desc);
+    const face = this.hb.createFace(existingBlob, 0);
+    const font = this.hb.createFont(face);
+    const upem = face.upem || 1e3;
+    font.setScale(upem, upem);
+    if (typeof font.setVariations === "function") {
+      try {
+        font.setVariations(`wght=${targetWeightNum}`);
+      } catch (e) {
+      }
+    }
+    this.faces.set(k, face);
+    this.fonts.set(k, font);
+    try {
+      const variationFont = baseFkFont.getVariation({ wght: targetWeightNum });
+      this.fontkitFonts.set(k, variationFont);
+      console.log(
+        `\u2705 Derived variable font: ${targetFamily} weight=${targetWeightNum} from existing registration`
+      );
+    } catch (err) {
+      this.fontkitFonts.set(k, baseFkFont);
+      console.warn(`\u26A0\uFE0F Could not apply weight variation, using base font for ${targetFamily}`);
+    }
+    return font;
+  }
   async getFace(desc) {
     try {
       if (!this.hb) await this.init();
@@ -595,6 +717,10 @@ var _FontRegistry = class _FontRegistry {
         const installed = await this.tryFallbackInstall(desc);
         face = installed ? this.faces.get(k) : void 0;
       }
+      if (!face) {
+        await this.tryDeriveFromExistingFont(desc);
+        face = this.faces.get(k);
+      }
       return face;
     } catch (err) {
       throw new Error(
@@ -665,6 +791,9 @@ var _FontRegistry = class _FontRegistry {
       this.faces.clear();
       this.blobs.clear();
       this.fontkitFonts.clear();
+      this.fontkitBaseFonts.clear();
+      this.colorEmojiFonts.clear();
+      this.colorEmojiFontBytes.clear();
       this.hb = void 0;
       this.initPromise = void 0;
     } catch (err) {
@@ -794,7 +923,10 @@ var LayoutEngine = class {
         const charIndex = g.cl;
         let char;
         if (charIndex >= 0 && charIndex < input.length) {
-          char = input[charIndex];
+          const codePoint = input.codePointAt(charIndex);
+          if (codePoint !== void 0) {
+            char = String.fromCodePoint(codePoint);
+          }
         }
         return {
           id: g.g,
@@ -979,13 +1111,27 @@ async function buildDrawOps(p) {
       });
     }
     for (const glyph of line.glyphs) {
+      const glyphX = xCursor + glyph.xOffset;
+      const glyphY = baselineY + glyph.yOffset;
+      const glyphFamily = glyph.fontDesc?.family;
+      const isColorEmoji = glyph.isColorEmoji || glyphFamily && p.isColorEmojiFont && p.isColorEmojiFont(glyphFamily);
+      if (isColorEmoji && glyph.char) {
+        textOps.push({
+          op: "DrawColorEmoji",
+          char: glyph.char,
+          x: glyphX,
+          y: glyphY,
+          fontSize: p.font.size,
+          fontFamily: glyphFamily || "NotoColorEmoji"
+        });
+        xCursor += glyph.xAdvance;
+        continue;
+      }
       const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
       }
-      const glyphX = xCursor + glyph.xOffset;
-      const glyphY = baselineY + glyph.yOffset;
       const pb = computePathBounds(path);
       const x1 = glyphX + scale * pb.x;
       const x2 = glyphX + scale * (pb.x + pb.w);
@@ -1913,6 +2059,81 @@ function createWebPainter(canvas) {
           ctx.restore();
           continue;
         }
+        if (op.op === "DrawColorEmoji") {
+          ctx.save();
+          ctx.font = `${op.fontSize}px "${op.fontFamily}"`;
+          ctx.textBaseline = "alphabetic";
+          ctx.fillText(op.char, op.x, op.y);
+          ctx.restore();
+          continue;
+        }
+        if (op.op === "Ellipse") {
+          ctx.save();
+          const bbox = op.gradientBBox ?? {
+            x: op.cx - op.rx,
+            y: op.cy - op.ry,
+            w: op.rx * 2,
+            h: op.ry * 2
+          };
+          const fill = makeGradientFromBBox(ctx, op.fill, bbox);
+          ctx.fillStyle = fill;
+          ctx.beginPath();
+          const rotation = (op.rotation ?? 0) * Math.PI / 180;
+          ctx.ellipse(op.cx, op.cy, op.rx, op.ry, rotation, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.restore();
+          continue;
+        }
+        if (op.op === "EllipseStroke") {
+          ctx.save();
+          applyStrokeSpec(ctx, op.stroke);
+          ctx.beginPath();
+          const rotation = (op.rotation ?? 0) * Math.PI / 180;
+          ctx.ellipse(op.cx, op.cy, op.rx, op.ry, rotation, 0, Math.PI * 2);
+          ctx.stroke();
+          ctx.restore();
+          continue;
+        }
+        if (op.op === "Polygon") {
+          ctx.save();
+          const bbox = op.gradientBBox ?? computePointsBounds(op.points);
+          const fill = makeGradientFromBBox(ctx, op.fill, bbox);
+          ctx.fillStyle = fill;
+          ctx.beginPath();
+          drawPolygonPath(ctx, op.points, op.closed ?? true);
+          ctx.fill();
+          ctx.restore();
+          continue;
+        }
+        if (op.op === "PolygonStroke") {
+          ctx.save();
+          applyStrokeSpec(ctx, op.stroke);
+          ctx.beginPath();
+          drawPolygonPath(ctx, op.points, op.closed ?? true);
+          ctx.stroke();
+          ctx.restore();
+          continue;
+        }
+        if (op.op === "ShapePath") {
+          ctx.save();
+          ctx.translate(op.x, op.y);
+          const bbox = op.gradientBBox ?? computePathBounds2(op.path);
+          const fill = makeGradientFromBBox(ctx, op.fill, bbox);
+          ctx.fillStyle = fill;
+          const p = new Path2D(op.path);
+          ctx.fill(p);
+          ctx.restore();
+          continue;
+        }
+        if (op.op === "ShapePathStroke") {
+          ctx.save();
+          ctx.translate(op.x, op.y);
+          applyStrokeSpec(ctx, op.stroke);
+          const p = new Path2D(op.path);
+          ctx.stroke(p);
+          ctx.restore();
+          continue;
+        }
       }
     }
   };
@@ -2052,6 +2273,48 @@ function computePathBounds2(d) {
 function tokenizePath2(d) {
   return d.match(/[MLCQZ]|-?\d*\.?\d+(?:e[-+]?\d+)?/gi) ?? [];
 }
+function applyStrokeSpec(ctx, stroke) {
+  const c = parseHex6(stroke.color, stroke.opacity);
+  ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+  ctx.lineWidth = stroke.width;
+  ctx.lineCap = stroke.lineCap ?? "butt";
+  ctx.lineJoin = stroke.lineJoin ?? "miter";
+  if (stroke.dashArray && stroke.dashArray.length > 0) {
+    ctx.setLineDash(stroke.dashArray);
+  }
+}
+function computePointsBounds(points) {
+  if (points.length === 0) {
+    return { x: 0, y: 0, w: 0, h: 0 };
+  }
+  let minX = points[0].x;
+  let minY = points[0].y;
+  let maxX = points[0].x;
+  let maxY = points[0].y;
+  for (let i = 1; i < points.length; i++) {
+    const p = points[i];
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+  return {
+    x: minX,
+    y: minY,
+    w: maxX - minX,
+    h: maxY - minY
+  };
+}
+function drawPolygonPath(ctx, points, closed) {
+  if (points.length === 0) return;
+  ctx.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) {
+    ctx.lineTo(points[i].x, points[i].y);
+  }
+  if (closed) {
+    ctx.closePath();
+  }
+}
 
 // src/io/web.ts
 async function fetchToArrayBuffer(url) {
@@ -2086,6 +2349,1131 @@ 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;
+var NUMBER_REGEX = /-?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/g;
+function parseSvgPath(pathData) {
+  const commands = [];
+  let currentX = 0;
+  let currentY = 0;
+  let startX = 0;
+  let startY = 0;
+  let lastCommand = null;
+  let lastControlX = 0;
+  let lastControlY = 0;
+  const matches = pathData.matchAll(PATH_COMMAND_REGEX);
+  for (const match of matches) {
+    const commandType = match[1];
+    const argsString = match[2];
+    const args = extractNumbers(argsString);
+    const isRelative = commandType === commandType.toLowerCase();
+    switch (commandType.toUpperCase()) {
+      case "M": {
+        const coords = parseCoordinatePairs(args, isRelative, currentX, currentY);
+        for (let i = 0; i < coords.length; i++) {
+          const { x, y } = coords[i];
+          if (i === 0) {
+            commands.push({ type: "M", x, y });
+            startX = x;
+            startY = y;
+          } else {
+            commands.push({ type: "L", x, y });
+          }
+          currentX = x;
+          currentY = y;
+        }
+        break;
+      }
+      case "L": {
+        const coords = parseCoordinatePairs(args, isRelative, currentX, currentY);
+        for (const { x, y } of coords) {
+          commands.push({ type: "L", x, y });
+          currentX = x;
+          currentY = y;
+        }
+        break;
+      }
+      case "H": {
+        for (const arg of args) {
+          const x = isRelative ? currentX + arg : arg;
+          commands.push({ type: "L", x, y: currentY });
+          currentX = x;
+        }
+        break;
+      }
+      case "V": {
+        for (const arg of args) {
+          const y = isRelative ? currentY + arg : arg;
+          commands.push({ type: "L", x: currentX, y });
+          currentY = y;
+        }
+        break;
+      }
+      case "C": {
+        for (let i = 0; i + 5 < args.length + 1; i += 6) {
+          let x1 = args[i];
+          let y1 = args[i + 1];
+          let x2 = args[i + 2];
+          let y2 = args[i + 3];
+          let x = args[i + 4];
+          let y = args[i + 5];
+          if (isRelative) {
+            x1 += currentX;
+            y1 += currentY;
+            x2 += currentX;
+            y2 += currentY;
+            x += currentX;
+            y += currentY;
+          }
+          commands.push({ type: "C", x1, y1, x2, y2, x, y });
+          lastControlX = x2;
+          lastControlY = y2;
+          currentX = x;
+          currentY = y;
+        }
+        break;
+      }
+      case "S": {
+        for (let i = 0; i + 3 < args.length + 1; i += 4) {
+          let x1;
+          let y1;
+          if (lastCommand === "C" || lastCommand === "S") {
+            x1 = 2 * currentX - lastControlX;
+            y1 = 2 * currentY - lastControlY;
+          } else {
+            x1 = currentX;
+            y1 = currentY;
+          }
+          let x2 = args[i];
+          let y2 = args[i + 1];
+          let x = args[i + 2];
+          let y = args[i + 3];
+          if (isRelative) {
+            x2 += currentX;
+            y2 += currentY;
+            x += currentX;
+            y += currentY;
+          }
+          commands.push({ type: "C", x1, y1, x2, y2, x, y });
+          lastControlX = x2;
+          lastControlY = y2;
+          currentX = x;
+          currentY = y;
+          lastCommand = "S";
+        }
+        break;
+      }
+      case "Q": {
+        for (let i = 0; i + 3 < args.length + 1; i += 4) {
+          let x1 = args[i];
+          let y1 = args[i + 1];
+          let x = args[i + 2];
+          let y = args[i + 3];
+          if (isRelative) {
+            x1 += currentX;
+            y1 += currentY;
+            x += currentX;
+            y += currentY;
+          }
+          commands.push({ type: "Q", x1, y1, x, y });
+          lastControlX = x1;
+          lastControlY = y1;
+          currentX = x;
+          currentY = y;
+        }
+        break;
+      }
+      case "T": {
+        for (let i = 0; i + 1 < args.length + 1; i += 2) {
+          let x1;
+          let y1;
+          if (lastCommand === "Q" || lastCommand === "T") {
+            x1 = 2 * currentX - lastControlX;
+            y1 = 2 * currentY - lastControlY;
+          } else {
+            x1 = currentX;
+            y1 = currentY;
+          }
+          let x = args[i];
+          let y = args[i + 1];
+          if (isRelative) {
+            x += currentX;
+            y += currentY;
+          }
+          commands.push({ type: "Q", x1, y1, x, y });
+          lastControlX = x1;
+          lastControlY = y1;
+          currentX = x;
+          currentY = y;
+          lastCommand = "T";
+        }
+        break;
+      }
+      case "A": {
+        for (let i = 0; i + 6 < args.length + 1; i += 7) {
+          const rx = Math.abs(args[i]);
+          const ry = Math.abs(args[i + 1]);
+          const xAxisRotation = args[i + 2];
+          const largeArcFlag = args[i + 3] !== 0;
+          const sweepFlag = args[i + 4] !== 0;
+          let x = args[i + 5];
+          let y = args[i + 6];
+          if (isRelative) {
+            x += currentX;
+            y += currentY;
+          }
+          commands.push({
+            type: "A",
+            rx,
+            ry,
+            xAxisRotation,
+            largeArcFlag,
+            sweepFlag,
+            x,
+            y
+          });
+          currentX = x;
+          currentY = y;
+        }
+        break;
+      }
+      case "Z": {
+        commands.push({ type: "Z" });
+        currentX = startX;
+        currentY = startY;
+        break;
+      }
+    }
+    lastCommand = commandType.toUpperCase();
+  }
+  return commands;
+}
+function normalizePath(commands) {
+  const normalized = [];
+  let currentX = 0;
+  let currentY = 0;
+  for (const cmd of commands) {
+    switch (cmd.type) {
+      case "M":
+      case "L":
+      case "C":
+      case "Q":
+      case "Z":
+        normalized.push(cmd);
+        if (cmd.type !== "Z") {
+          currentX = cmd.x;
+          currentY = cmd.y;
+        }
+        break;
+      case "A": {
+        const cubicCurves = arcToCubicBeziers(
+          currentX,
+          currentY,
+          cmd.rx,
+          cmd.ry,
+          cmd.xAxisRotation,
+          cmd.largeArcFlag,
+          cmd.sweepFlag,
+          cmd.x,
+          cmd.y
+        );
+        normalized.push(...cubicCurves);
+        currentX = cmd.x;
+        currentY = cmd.y;
+        break;
+      }
+    }
+  }
+  return normalized;
+}
+function commandsToPathString(commands) {
+  const parts = [];
+  for (const cmd of commands) {
+    switch (cmd.type) {
+      case "M":
+        parts.push(`M ${cmd.x} ${cmd.y}`);
+        break;
+      case "L":
+        parts.push(`L ${cmd.x} ${cmd.y}`);
+        break;
+      case "C":
+        parts.push(`C ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`);
+        break;
+      case "Q":
+        parts.push(`Q ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`);
+        break;
+      case "Z":
+        parts.push("Z");
+        break;
+    }
+  }
+  return parts.join(" ");
+}
+function normalizePathString(pathData) {
+  const parsed = parseSvgPath(pathData);
+  const normalized = normalizePath(parsed);
+  return commandsToPathString(normalized);
+}
+function extractNumbers(str) {
+  const matches = str.match(NUMBER_REGEX);
+  return matches ? matches.map(parseFloat) : [];
+}
+function parseCoordinatePairs(args, isRelative, currentX, currentY) {
+  const coords = [];
+  for (let i = 0; i + 1 < args.length + 1; i += 2) {
+    let x = args[i];
+    let y = args[i + 1];
+    if (isRelative && coords.length === 0) {
+      x += currentX;
+      y += currentY;
+    } else if (isRelative) {
+      x += coords[coords.length - 1].x;
+      y += coords[coords.length - 1].y;
+    }
+    coords.push({ x, y });
+  }
+  return coords;
+}
+function arcToCubicBeziers(x1, y1, rx, ry, phi, largeArc, sweep, x2, y2) {
+  if (rx === 0 || ry === 0) {
+    return [{ type: "L", x: x2, y: y2 }];
+  }
+  if (x1 === x2 && y1 === y2) {
+    return [];
+  }
+  const sinPhi = Math.sin(phi * Math.PI / 180);
+  const cosPhi = Math.cos(phi * Math.PI / 180);
+  const x1p = cosPhi * (x1 - x2) / 2 + sinPhi * (y1 - y2) / 2;
+  const y1p = -sinPhi * (x1 - x2) / 2 + cosPhi * (y1 - y2) / 2;
+  const x1pSq = x1p * x1p;
+  const y1pSq = y1p * y1p;
+  let rxSq = rx * rx;
+  let rySq = ry * ry;
+  const lambda = x1pSq / rxSq + y1pSq / rySq;
+  if (lambda > 1) {
+    const sqrtLambda = Math.sqrt(lambda);
+    rx *= sqrtLambda;
+    ry *= sqrtLambda;
+    rxSq = rx * rx;
+    rySq = ry * ry;
+  }
+  let sq = (rxSq * rySq - rxSq * y1pSq - rySq * x1pSq) / (rxSq * y1pSq + rySq * x1pSq);
+  sq = sq < 0 ? 0 : sq;
+  const coef = (largeArc === sweep ? -1 : 1) * Math.sqrt(sq);
+  const cxp = coef * rx * y1p / ry;
+  const cyp = -coef * ry * x1p / rx;
+  const cx = cosPhi * cxp - sinPhi * cyp + (x1 + x2) / 2;
+  const cy = sinPhi * cxp + cosPhi * cyp + (y1 + y2) / 2;
+  const theta1 = vectorAngle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
+  let dTheta = vectorAngle(
+    (x1p - cxp) / rx,
+    (y1p - cyp) / ry,
+    (-x1p - cxp) / rx,
+    (-y1p - cyp) / ry
+  );
+  if (!sweep && dTheta > 0) {
+    dTheta -= TAU;
+  } else if (sweep && dTheta < 0) {
+    dTheta += TAU;
+  }
+  const segments = Math.max(Math.ceil(Math.abs(dTheta) / (Math.PI / 2)), 1);
+  const segmentAngle = dTheta / segments;
+  const curves = [];
+  let currentTheta = theta1;
+  for (let i = 0; i < segments; i++) {
+    const nextTheta = currentTheta + segmentAngle;
+    const curve = arcSegmentToCubic(cx, cy, rx, ry, phi, currentTheta, nextTheta);
+    curves.push(curve);
+    currentTheta = nextTheta;
+  }
+  return curves;
+}
+function vectorAngle(ux, uy, vx, vy) {
+  const sign = ux * vy - uy * vx < 0 ? -1 : 1;
+  const dot = ux * vx + uy * vy;
+  const uLen = Math.sqrt(ux * ux + uy * uy);
+  const vLen = Math.sqrt(vx * vx + vy * vy);
+  let cos = dot / (uLen * vLen);
+  cos = Math.max(-1, Math.min(1, cos));
+  return sign * Math.acos(cos);
+}
+function arcSegmentToCubic(cx, cy, rx, ry, phi, theta1, theta2) {
+  const sinPhi = Math.sin(phi * Math.PI / 180);
+  const cosPhi = Math.cos(phi * Math.PI / 180);
+  const dTheta = theta2 - theta1;
+  const t = 4 / 3 * Math.tan(dTheta / 4);
+  const x1 = Math.cos(theta1);
+  const y1 = Math.sin(theta1);
+  const x2 = Math.cos(theta2);
+  const y2 = Math.sin(theta2);
+  const dx1 = -t * y1;
+  const dy1 = t * x1;
+  const dx2 = t * y2;
+  const dy2 = -t * x2;
+  const transform = (px, py) => {
+    const x = rx * px;
+    const y = ry * py;
+    return {
+      x: cosPhi * x - sinPhi * y + cx,
+      y: sinPhi * x + cosPhi * y + cy
+    };
+  };
+  const p1 = transform(x1, y1);
+  const cp1 = transform(x1 + dx1, y1 + dy1);
+  const cp2 = transform(x2 + dx2, y2 + dy2);
+  const p2 = transform(x2, y2);
+  return {
+    type: "C",
+    x1: cp1.x,
+    y1: cp1.y,
+    x2: cp2.x,
+    y2: cp2.y,
+    x: p2.x,
+    y: p2.y
+  };
+}
+function quadraticToCubic(x0, y0, qx, qy, x, y) {
+  return {
+    type: "C",
+    x1: x0 + 2 / 3 * (qx - x0),
+    y1: y0 + 2 / 3 * (qy - y0),
+    x2: x + 2 / 3 * (qx - x),
+    y2: y + 2 / 3 * (qy - y),
+    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"
+  };
+  const lowerColor = color.toLowerCase();
+  if (namedColors[lowerColor]) {
+    return namedColors[lowerColor];
+  }
+  return void 0;
+}
+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) {
+    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}`,
+    `Q ${x + width} ${y} ${x + width} ${y + r}`,
+    `L ${x + width} ${y + height - r}`,
+    `Q ${x + width} ${y + height} ${x + width - r} ${y + height}`,
+    `L ${x + r} ${y + height}`,
+    `Q ${x} ${y + height} ${x} ${y + height - r}`,
+    `L ${x} ${y + r}`,
+    `Q ${x} ${y} ${x + r} ${y}`,
+    "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;
+  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}`,
+    "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;
+  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}`,
+    "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 "";
+  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]}`);
+      }
+    }
+  }
+  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 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 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 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;
+    }
+  }
+  if (path.opacity !== void 0 && path.opacity !== 1) {
+    asset.opacity = path.opacity;
+  }
+  if (width > 0) {
+    asset.width = width;
+  }
+  if (height > 0) {
+    asset.height = height;
+  }
+  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
+    };
+  }
+  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
+    }
+  };
+  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;
+      }
+    }
+  }
+  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;
+      }
+    }
+  }
+  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);
+}
+
 // src/env/entry.web.ts
 var DEFAULT_ROBOTO_URL = "https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf";
 async function createTextEngine(opts = {}) {
@@ -2213,12 +3601,17 @@ async function createTextEngine(opts = {}) {
         const desc = { family: main.family, weight: `${main.weight}` };
         let lines;
         try {
-          const emojiDesc = { family: "NotoEmoji", weight: "400" };
-          let emojiAvailable = false;
-          try {
-            await fonts.getFace(emojiDesc);
-            emojiAvailable = true;
-          } catch {
+          let emojiFallback = void 0;
+          const colorEmojiFamilies = fonts.getColorEmojiFontFamilies();
+          if (colorEmojiFamilies.length > 0) {
+            emojiFallback = { family: colorEmojiFamilies[0], weight: "400" };
+          } else {
+            const notoEmojiDesc = { family: "NotoEmoji", weight: "400" };
+            try {
+              await fonts.getFace(notoEmojiDesc);
+              emojiFallback = notoEmojiDesc;
+            } catch {
+            }
           }
           const padding2 = asset.padding ? typeof asset.padding === "number" ? {
             top: asset.padding,
@@ -2234,7 +3627,7 @@ async function createTextEngine(opts = {}) {
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,
             textTransform: asset.style?.textTransform ?? "none",
-            emojiFallback: emojiAvailable ? emojiDesc : void 0
+            emojiFallback
           });
         } catch (err) {
           throw new Error(
@@ -2289,7 +3682,8 @@ async function createTextEngine(opts = {}) {
             border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
-            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
+            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc),
+            isColorEmojiFont: (family) => fonts.isColorEmojiFont(family)
           });
         } catch (err) {
           throw new Error(
@@ -2342,7 +3736,50 @@ async function createTextEngine(opts = {}) {
 }
 export {
   CanvasRichTextAssetSchema,
+  CanvasSvgAssetSchema,
+  arcToCubicBeziers,
+  centerPath,
+  commandsToPathString,
+  computePathBounds3 as computePathBounds,
   createTextEngine,
+  createWebPainter,
+  generateArrowPath,
+  generateCirclePath,
+  generateCrossPath,
+  generateEllipsePath,
+  generateHeartPath,
+  generateLinePath,
+  generatePolygonPath,
+  generatePolygonPoints,
+  generateRectanglePath,
+  generateRingPath,
+  generateShapePath,
+  generateStarPath,
+  generateStarPoints,
+  generateTrianglePath,
+  importSvg,
   isGlyphFill2 as isGlyphFill,
-  isShadowFill2 as isShadowFill
+  isShadowFill2 as isShadowFill,
+  normalizePath,
+  normalizePathString,
+  normalizePathToSize,
+  parseSvgMarkup,
+  parseSvgPath,
+  pointsToPath,
+  quadraticToCubic,
+  reverseWindingOrder,
+  rotatePath,
+  scalePath,
+  svgAssetSchema,
+  svgGradientStopSchema,
+  svgLinearGradientFillSchema,
+  svgRadialGradientFillSchema,
+  svgShadowSchema,
+  svgShapeSchema,
+  svgSolidFillSchema,
+  svgStrokeSchema,
+  svgToAsset,
+  svgToSingleAsset,
+  svgTransformSchema,
+  translatePath
 };