@pixerate/editor 0.100.0 → 0.101.0

package/dist/{chunk-YGZNGDIT.js → chunk-63EFQCT5.js}

@@ -75,6 +75,25 @@ var VECTOR_GRADIENT_SPREADS = ["pad", "reflect", "repeat"];
 var VECTOR_GRADIENT_INTERPOLATIONS = ["srgb", "linear", "oklab"];
 var VECTOR_STROKE_GRADIENT_MODES = ["within", "along", "across"];
 var VECTOR_ARROWHEADS = ["triangle", "arrow", "open", "circle", "square", "bar"];
+var VECTOR_BLEND_MODES = [
+  "normal",
+  "darken",
+  "multiply",
+  "color-burn",
+  "lighten",
+  "screen",
+  "color-dodge",
+  "linear-dodge",
+  "overlay",
+  "soft-light",
+  "hard-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity"
+];
 var VECTOR_BLEND_SPACINGS = ["steps", "distance", "smoothColor"];
 var VECTOR_TOOLS = [
   "select",
@@ -100,6 +119,7 @@ var VECTOR_TRANSFORM_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w", "rot
 var VECTOR_PATHFINDER_OPERATIONS = ["divide", "trim", "merge", "crop", "outline", "minusBack"];
 var VECTOR_EFFECT_TYPES = ["trim", "roundCorners", "puckerBloat", "twist", "zigzag", "wiggle", "offset", "merge", "repeater", "envelope"];
 var VECTOR_MERGE_MODES = ["merge", "add", "subtract", "intersect", "exclude"];
+var VECTOR_FILTER_TYPES = ["dropShadow", "innerShadow", "outerGlow", "innerGlow", "layerBlur", "feather"];
 
 // src/vector/gradient.ts
 var clamp = (v2, lo, hi) => Math.min(hi, Math.max(lo, v2));
@@ -1255,8 +1275,8 @@ function removeWidthPoints(points, indices) {
 }
 function ease(u, e) {
   const x = Math.min(Math.max(u, 0), 1);
-  const round = Math.sqrt(Math.max(0, 1 - (1 - x) * (1 - x)));
-  return x + (round - x) * Math.min(Math.max(e, 0), 1);
+  const round3 = Math.sqrt(Math.max(0, 1 - (1 - x) * (1 - x)));
+  return x + (round3 - x) * Math.min(Math.max(e, 0), 1);
 }
 function taperWaveFactor(t, taper, wave) {
   let k = 1;
@@ -1880,6 +1900,278 @@ function vectorStrokeReach(style) {
   return reach;
 }
 
+// src/vector/paintLayers.ts
+var VECTOR_STROKE_SETTING_KEYS = [
+  "strokeWidth",
+  "strokeLinecap",
+  "strokeLinejoin",
+  "strokeDasharray",
+  "strokeAlign",
+  "startArrow",
+  "endArrow",
+  "arrowAlign",
+  "startArrowScale",
+  "endArrowScale",
+  "strokeWidthProfile"
+];
+var VECTOR_BLEND_MODE_LABELS = {
+  normal: "Normal",
+  darken: "Darken",
+  multiply: "Multiply",
+  "color-burn": "Color Burn",
+  lighten: "Lighten",
+  screen: "Screen",
+  "color-dodge": "Color Dodge",
+  "linear-dodge": "Linear Dodge (Add)",
+  overlay: "Overlay",
+  "soft-light": "Soft Light",
+  "hard-light": "Hard Light",
+  difference: "Difference",
+  exclusion: "Exclusion",
+  hue: "Hue",
+  saturation: "Saturation",
+  color: "Color",
+  luminosity: "Luminosity"
+};
+function isVectorBlendMode(value) {
+  return typeof value === "string" && VECTOR_BLEND_MODES.includes(value);
+}
+function vectorBlendModeCss(mode) {
+  if (!mode || mode === "normal" || !isVectorBlendMode(mode)) return void 0;
+  return mode === "linear-dodge" ? "plus-lighter" : mode;
+}
+function vectorBlendModeFromCss(value) {
+  const v2 = (value ?? "").trim().toLowerCase();
+  if (v2 === "plus-lighter") return "linear-dodge";
+  return isVectorBlendMode(v2) ? v2 : null;
+}
+var draws = (paint) => {
+  if (paint === void 0 || paint === null) return false;
+  if (typeof paint === "string") {
+    const p = paint.trim().toLowerCase();
+    return p !== "" && p !== "none" && p !== "transparent";
+  }
+  return true;
+};
+function isPlainVectorPaintLayer(layer) {
+  return (layer.opacity ?? 1) >= 1 && (layer.blendMode ?? "normal") === "normal" && layer.visible !== false && (layer.kind ?? "paint") === "paint";
+}
+function isDrawnVectorPaintLayer(layer) {
+  return layer.visible !== false && (layer.kind ?? "paint") === "paint" && draws(layer.paint) && (layer.opacity ?? 1) > 0;
+}
+function vectorFills(style) {
+  if (Array.isArray(style.fills)) return style.fills;
+  return draws(style.fill) ? [{ paint: style.fill }] : [];
+}
+function vectorStrokeSettings(style) {
+  const out = {};
+  for (const key of VECTOR_STROKE_SETTING_KEYS) {
+    const v2 = style[key];
+    if (v2 !== void 0 && v2 !== null) out[key] = v2;
+  }
+  return out;
+}
+function vectorStrokes(style) {
+  if (Array.isArray(style.strokes)) return style.strokes;
+  return draws(style.stroke) ? [{ paint: style.stroke, ...vectorStrokeSettings(style) }] : [];
+}
+function hasVectorPaintStacks(style) {
+  return Array.isArray(style.fills) || Array.isArray(style.strokes);
+}
+function withVectorFills(node, fills) {
+  const next = { ...node };
+  if (fills.length === 0 || fills.length === 1 && isPlainVectorPaintLayer(fills[0])) {
+    delete next.fills;
+    next.fill = fills[0]?.paint ?? null;
+    return next;
+  }
+  next.fills = fills.map((l) => ({ ...l }));
+  next.fill = fills[fills.length - 1].paint;
+  return next;
+}
+function withVectorStrokes(node, strokes) {
+  const next = { ...node };
+  if (strokes.length === 0) {
+    delete next.strokes;
+    next.stroke = null;
+    return next;
+  }
+  const top = strokes[strokes.length - 1];
+  for (const key of VECTOR_STROKE_SETTING_KEYS) delete next[key];
+  Object.assign(next, vectorStrokeSettings(top));
+  next.stroke = top.paint;
+  if (strokes.length === 1 && isPlainVectorPaintLayer(top)) delete next.strokes;
+  else next.strokes = strokes.map((l) => ({ ...l }));
+  return next;
+}
+var json = (v2) => JSON.stringify(v2 ?? null);
+function strokeShorthandDiff(node, top) {
+  const out = [];
+  if (json(node.stroke) !== json(top?.paint)) out.push("stroke");
+  for (const key of VECTOR_STROKE_SETTING_KEYS) if (json(node[key]) !== json(top?.[key])) out.push(key);
+  return out;
+}
+var checked = /* @__PURE__ */ new WeakSet();
+function normalizeVectorPaintStacks(node, prefer = "shorthand") {
+  if (!hasVectorPaintStacks(node)) {
+    if (!("fills" in node) && !("strokes" in node)) return node;
+    const next2 = { ...node };
+    delete next2.fills;
+    delete next2.strokes;
+    return next2;
+  }
+  if (checked.has(node)) return node;
+  let next = node;
+  if (Array.isArray(node.fills)) {
+    let fills = node.fills;
+    const top = fills[fills.length - 1];
+    if (prefer === "shorthand" && json(node.fill) !== json(top?.paint)) {
+      if (!draws(node.fill)) fills = [];
+      else fills = top ? [...fills.slice(0, -1), { ...top, paint: node.fill }] : [{ paint: node.fill }];
+    }
+    next = withVectorFills(next, fills);
+  }
+  if (Array.isArray(node.strokes)) {
+    let strokes = node.strokes;
+    const top = strokes[strokes.length - 1];
+    const diff = prefer === "shorthand" ? strokeShorthandDiff(node, top) : [];
+    if (diff.length) {
+      if (diff.includes("stroke") && !draws(node.stroke)) strokes = [];
+      else {
+        const layer = top ? { ...top } : { paint: node.stroke ?? null };
+        for (const key of diff) {
+          if (key === "stroke") layer.paint = node.stroke ?? null;
+          else if (node[key] === void 0 || node[key] === null) delete layer[key];
+          else layer[key] = node[key];
+        }
+        strokes = top ? [...strokes.slice(0, -1), layer] : [layer];
+      }
+    }
+    next = withVectorStrokes(next, strokes);
+  }
+  const keys = ["fill", "fills", "stroke", "strokes", ...VECTOR_STROKE_SETTING_KEYS];
+  const same2 = keys.every((k) => k in next === k in node && json(next[k]) === json(node[k]));
+  const out = same2 ? node : next;
+  checked.add(out);
+  return out;
+}
+function sanitizePaint(value) {
+  if (value === null || value === void 0) return null;
+  if (typeof value === "string") return value;
+  return sanitizeVectorGradient(value);
+}
+function sanitizeLayerBase(raw) {
+  const out = { paint: sanitizePaint(raw.paint) };
+  if (typeof raw.opacity === "number" && Number.isFinite(raw.opacity) && raw.opacity < 1) out.opacity = Math.max(0, raw.opacity);
+  if (isVectorBlendMode(raw.blendMode) && raw.blendMode !== "normal") out.blendMode = raw.blendMode;
+  if (raw.visible === false) out.visible = false;
+  return out;
+}
+function sanitizeVectorFills(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter((l) => !!l && typeof l === "object").map(sanitizeLayerBase);
+}
+var ARROW_ALIGNS = ["extend", "tip"];
+function sanitizeVectorStrokeSettings(raw) {
+  const out = {};
+  const num2 = (v2) => typeof v2 === "number" && Number.isFinite(v2) ? v2 : void 0;
+  const width = num2(raw.strokeWidth);
+  if (width !== void 0 && width >= 0) out.strokeWidth = width;
+  if (raw.strokeLinecap === "butt" || raw.strokeLinecap === "round" || raw.strokeLinecap === "square") out.strokeLinecap = raw.strokeLinecap;
+  if (raw.strokeLinejoin === "miter" || raw.strokeLinejoin === "round" || raw.strokeLinejoin === "bevel") out.strokeLinejoin = raw.strokeLinejoin;
+  if (Array.isArray(raw.strokeDasharray)) {
+    const dash = raw.strokeDasharray.filter((n) => typeof n === "number" && Number.isFinite(n) && n >= 0);
+    if (dash.length && dash.some((n) => n > 0)) out.strokeDasharray = dash;
+  }
+  if (raw.strokeAlign === "center" || raw.strokeAlign === "inside" || raw.strokeAlign === "outside") out.strokeAlign = raw.strokeAlign;
+  for (const key of ["startArrow", "endArrow"]) if (VECTOR_ARROWHEADS.includes(raw[key])) out[key] = raw[key];
+  if (ARROW_ALIGNS.includes(raw.arrowAlign)) out.arrowAlign = raw.arrowAlign;
+  for (const key of ["startArrowScale", "endArrowScale"]) {
+    const n = num2(raw[key]);
+    if (n !== void 0 && n > 0) out[key] = n;
+  }
+  if (Array.isArray(raw.strokeWidthProfile)) {
+    const p = sanitizeWidthProfile(raw.strokeWidthProfile);
+    if (p.length) out.strokeWidthProfile = p;
+  }
+  return out;
+}
+function sanitizeVectorStrokes(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter((l) => !!l && typeof l === "object").map((raw) => {
+    if (raw.kind !== void 0 && raw.kind !== "paint") return { ...raw };
+    return { ...sanitizeLayerBase(raw), ...sanitizeVectorStrokeSettings(raw) };
+  });
+}
+var layerNodeCache = /* @__PURE__ */ new WeakMap();
+function vectorPaintLayerNodes(node) {
+  const hit = layerNodeCache.get(node);
+  if (hit) return hit;
+  const { fills: _f, strokes: _s, ...base } = node;
+  const plain2 = { ...base };
+  for (const key of VECTOR_STROKE_SETTING_KEYS) delete plain2[key];
+  const out = [];
+  vectorFills(node).forEach((layer, index) => {
+    out.push({ kind: "fill", index, layer, node: { ...plain2, fill: layer.paint, stroke: null }, drawn: isDrawnVectorPaintLayer(layer) });
+  });
+  vectorStrokes(node).forEach((layer, index) => {
+    const settings = (layer.kind ?? "paint") === "paint" ? vectorStrokeSettings(layer) : {};
+    out.push({ kind: "stroke", index, layer, node: { ...plain2, fill: null, ...settings, stroke: layer.paint }, drawn: isDrawnVectorPaintLayer(layer) });
+  });
+  layerNodeCache.set(node, out);
+  return out;
+}
+function needsVectorPaintLayers(node) {
+  if (!hasVectorPaintStacks(node)) return false;
+  const fills = vectorFills(node);
+  const strokes = vectorStrokes(node);
+  return fills.length > 1 || strokes.length > 1 || fills.some((l) => !isPlainVectorPaintLayer(l)) || strokes.some((l) => !isPlainVectorPaintLayer(l));
+}
+function vectorStrokeStackReach(node) {
+  let reach = 0;
+  for (const l of vectorPaintLayerNodes(node)) if (l.kind === "stroke" && l.drawn) reach = Math.max(reach, vectorStrokeReach(l.node));
+  return reach;
+}
+function hitTestVectorPaintLayer(node, path, p, tolerance = 0) {
+  if (!path.length) return null;
+  const layers = vectorPaintLayerNodes(node);
+  for (let i = layers.length - 1; i >= 0; i--) {
+    const l = layers[i];
+    if (!l.drawn) continue;
+    if (l.kind === "stroke") {
+      if ((l.node.strokeWidth ?? 1) > 0 && hitTestVectorStroke(path, p, l.node, tolerance)) return { kind: "stroke", index: l.index };
+    } else if (pointInBezierPath(path, [p.x, p.y], node.fillRule ?? "nonzero")) return { kind: "fill", index: l.index };
+  }
+  return null;
+}
+function hitTestVectorPaintStack(node, path, p, tolerance = 0) {
+  if (hitTestVectorPaintLayer(node, path, p, tolerance)) return true;
+  if (vectorPaintLayerNodes(node).some((l) => l.kind === "stroke" && l.drawn)) return false;
+  return distanceToBezierPath(path, [p.x, p.y]) <= tolerance;
+}
+function vectorStacksHaveGradient(style) {
+  return [...style.fills ?? [], ...style.strokes ?? []].some((l) => isVectorGradient(l.paint));
+}
+function newVectorStrokeLayer(node, patch = {}) {
+  const top = vectorStrokes(node).at(-1);
+  const settings = top && (top.kind ?? "paint") === "paint" ? vectorStrokeSettings(top) : { strokeWidth: node.strokeWidth ?? 1 };
+  return { paint: "#000000", ...settings, ...patch };
+}
+function vectorTargetPaint(style, target, layer = null) {
+  if (layer === null) return style[target];
+  const stack = target === "fill" ? vectorFills(style) : vectorStrokes(style);
+  return stack[layer] ? stack[layer].paint : style[target];
+}
+function withVectorTargetPaint(node, target, layer, paint) {
+  const stack = target === "fill" ? vectorFills(node) : vectorStrokes(node);
+  if (layer === null || !stack[layer]) {
+    if (!stack.length) return { ...node, [target]: paint };
+    layer = stack.length - 1;
+  }
+  const next = stack.map((l, i) => i === layer ? { ...l, paint } : l);
+  return target === "fill" ? withVectorFills(node, next) : withVectorStrokes(node, next);
+}
+
 // src/vector/pathMap.ts
 var MAX_PIECES = 1 << 20;
 var MAX_DEPTH = 6;
@@ -2616,6 +2908,9 @@ function shapeNode(shape, id) {
     locked: _l,
     visible: _v,
     opacity: _o,
+    // The node's own blend mode and filters stay on the node, not on each shape it draws.
+    blendMode: _bm,
+    filters: _fl,
     ...style
   } = shape.source;
   return { ...style, id, type: "path", subpaths: bezierToSubpaths(shape.path), ...shape.opacity < 1 ? { opacity: shape.opacity } : {} };
@@ -2627,7 +2922,9 @@ function placement(node) {
     ...node.visible === false ? { visible: false } : {},
     ...node.locked ? { locked: true } : {},
     ...node.blendStep ? { blendStep: true } : {},
-    ...node.booleanOperation ? { booleanOperation: node.booleanOperation } : {}
+    ...node.booleanOperation ? { booleanOperation: node.booleanOperation } : {},
+    ...node.blendMode ? { blendMode: node.blendMode } : {},
+    ...node.filters?.length ? { filters: node.filters } : {}
   };
 }
 function vectorAppearanceNodes(node) {
@@ -2942,10 +3239,7 @@ function hitTestVectorNode(node, p, tolerance = 0, parent = IDENTITY_MATRIX, opt
   }
   const path = vectorPathWorldBezier(node, parent);
   if (path.length === 0) return false;
-  const point = [p.x, p.y];
-  if (hasPaint(node.fill) && pointInBezierPath(path, point, node.fillRule ?? "nonzero")) return true;
-  if (hasPaint(node.stroke)) return hitTestVectorStroke(path, p, node, tolerance);
-  return distanceToBezierPath(path, point) <= tolerance;
+  return hitTestVectorPaintStack(node, path, p, tolerance);
 }
 function vectorStrokeOutline(node, parent = IDENTITY_MATRIX) {
   if (!hasPaint(node.stroke) || !((node.strokeWidth ?? 1) > 0)) return [];
@@ -2995,13 +3289,21 @@ function bakeIntoGeometry(node, m) {
     return { ...group, children, blend: { ...group.blend, spine: moved } };
   }
   const path = node;
-  const mirrored = m[0] * m[3] - m[1] * m[2] < 0 && path.strokeWidthProfile?.length;
+  const flips = m[0] * m[3] - m[1] * m[2] < 0;
+  const mirrored = flips && path.strokeWidthProfile?.length;
+  const layer = (l) => ({
+    ...l,
+    ...isVectorGradient(l.paint) ? { paint: transformVectorPaint(l.paint, m) } : {},
+    ...flips && l.strokeWidthProfile?.length ? { strokeWidthProfile: mirrorWidthProfile(l.strokeWidthProfile) } : {}
+  });
   return {
     ...path,
     ...mirrored ? { strokeWidthProfile: mirrorWidthProfile(path.strokeWidthProfile) } : {},
     // Gradients in the node's own space move with its geometry.
     ...isVectorGradient(path.fill) ? { fill: transformVectorPaint(path.fill, m) } : {},
     ...isVectorGradient(path.stroke) ? { stroke: transformVectorPaint(path.stroke, m) } : {},
+    ...Array.isArray(path.fills) ? { fills: path.fills.map(layer) } : {},
+    ...Array.isArray(path.strokes) ? { strokes: path.strokes.map(layer) } : {},
     subpaths: path.subpaths.map((sp) => ({
       closed: sp.closed,
       anchors: sp.anchors.map((a) => mapAnchor(a, m))
@@ -4267,6 +4569,201 @@ function evaluateVectorPathKeyframes(keyframes, time, options = {}) {
   return morph.at(u);
 }
 
+// src/vector/filters.ts
+var VECTOR_FILTER_DEFAULTS = {
+  dropShadow: { color: "#000000", opacity: 0.25, offsetX: 0, offsetY: 4, blur: 4, spread: 0 },
+  innerShadow: { color: "#000000", opacity: 0.25, offsetX: 0, offsetY: 4, blur: 4, spread: 0 },
+  outerGlow: { color: "#ffffbe", opacity: 0.75, blur: 10, spread: 0 },
+  innerGlow: { color: "#ffffbe", opacity: 0.75, blur: 10, spread: 0 },
+  layerBlur: { radius: 4 },
+  feather: { radius: 8 }
+};
+var VECTOR_FILTER_LABELS = {
+  dropShadow: "Drop Shadow",
+  innerShadow: "Inner Shadow",
+  outerGlow: "Outer Glow",
+  innerGlow: "Inner Glow",
+  layerBlur: "Layer Blur",
+  feather: "Feather"
+};
+var SHADOW_SPECS = [
+  { key: "color", label: "Color", kind: "color" },
+  { key: "opacity", label: "Opacity", kind: "number", min: 0, max: 1, step: 0.01, slider: true },
+  { key: "offsetX", label: "X", kind: "number", min: -1e3, max: 1e3, step: 1 },
+  { key: "offsetY", label: "Y", kind: "number", min: -1e3, max: 1e3, step: 1 },
+  { key: "blur", label: "Blur", kind: "number", min: 0, max: 500, step: 1 },
+  { key: "spread", label: "Spread", kind: "number", min: 0, max: 500, step: 1 }
+];
+var GLOW_SPECS = SHADOW_SPECS.filter((s) => s.key !== "offsetX" && s.key !== "offsetY");
+var VECTOR_FILTER_PARAM_SPECS = {
+  dropShadow: SHADOW_SPECS,
+  innerShadow: SHADOW_SPECS.map((s) => s.key === "spread" ? { ...s, label: "Choke" } : s),
+  outerGlow: GLOW_SPECS,
+  innerGlow: GLOW_SPECS.map((s) => s.key === "spread" ? { ...s, label: "Choke" } : s),
+  layerBlur: [{ key: "radius", label: "Radius", kind: "number", min: 0, max: 500, step: 1, slider: true }],
+  feather: [{ key: "radius", label: "Radius", kind: "number", min: 0, max: 500, step: 1, slider: true }]
+};
+function isVectorFilterType(value) {
+  return typeof value === "string" && VECTOR_FILTER_TYPES.includes(value);
+}
+function normalizeVectorFilterParams(type, params, base) {
+  if (!isVectorFilterType(type)) return null;
+  const out = { ...VECTOR_FILTER_DEFAULTS[type], ...base ?? {} };
+  for (const spec of VECTOR_FILTER_PARAM_SPECS[type]) {
+    const v2 = params?.[spec.key];
+    if (v2 === void 0) continue;
+    if (spec.kind === "number" && typeof v2 === "number" && Number.isFinite(v2)) out[spec.key] = Math.min(spec.max ?? Infinity, Math.max(spec.min ?? -Infinity, v2));
+    else if (spec.kind === "color" && typeof v2 === "string" && v2.trim()) out[spec.key] = v2.trim();
+  }
+  return out;
+}
+function vectorFilterParamKeys(type) {
+  return VECTOR_FILTER_PARAM_SPECS[type].map((s) => s.key);
+}
+function createVectorFilter(type, id, params) {
+  const p = normalizeVectorFilterParams(type, params);
+  return p ? { id, type, params: p } : null;
+}
+function sanitizeVectorFilters(value) {
+  if (!Array.isArray(value)) return [];
+  const out = [];
+  const used = /* @__PURE__ */ new Set();
+  for (const raw of value) {
+    if (!raw || typeof raw !== "object") continue;
+    const r = raw;
+    if (!isVectorFilterType(r.type)) continue;
+    let id = typeof r.id === "string" && r.id && !used.has(r.id) ? r.id : "";
+    for (let k = out.length + 1; !id; k++) if (!used.has(`filter${k}`)) id = `filter${k}`;
+    used.add(id);
+    const filter = createVectorFilter(r.type, id, r.params ?? {});
+    out.push(r.enabled === false ? { ...filter, enabled: false } : filter);
+  }
+  return out;
+}
+function activeVectorFilters(node) {
+  return (node.filters ?? []).filter((f) => {
+    if (f.enabled === false || !isVectorFilterType(f.type)) return false;
+    if (f.type === "layerBlur" || f.type === "feather") return f.params.radius > 0;
+    return f.params.opacity > 0;
+  });
+}
+function vectorFilterReach(filters) {
+  let outer = 0;
+  let blur = 0;
+  for (const f of filters) {
+    switch (f.type) {
+      case "dropShadow":
+      case "innerShadow":
+        outer = Math.max(outer, Math.max(Math.abs(f.params.offsetX), Math.abs(f.params.offsetY)) + f.params.blur * 1.5 + f.params.spread);
+        break;
+      case "outerGlow":
+      case "innerGlow":
+        outer = Math.max(outer, f.params.blur * 1.5 + f.params.spread);
+        break;
+      case "layerBlur":
+        blur += f.params.radius * 1.5;
+        break;
+    }
+  }
+  return outer + blur;
+}
+var round = (n) => Math.round(n * 1e3) / 1e3;
+var fe = (tag, attrs, children) => ({ tag, attrs, ...children ? { children } : {} });
+function vectorFilterSvg(filters, id, bounds) {
+  const active = filters.filter((f) => activeVectorFilters({ filters: [f] }).length);
+  if (!active.length || !bounds) return null;
+  const primitives = [];
+  let body = "SourceGraphic";
+  let n = 0;
+  const name = (part) => `${part}${n}`;
+  for (const f of active) {
+    if (f.type !== "innerShadow" && f.type !== "innerGlow") continue;
+    n++;
+    const p = f.params;
+    primitives.push(fe("feComponentTransfer", { in: "SourceAlpha", result: name("inv") }, [fe("feFuncA", { type: "table", tableValues: "1 0" })]));
+    let last = name("inv");
+    if (f.type === "innerShadow" && (f.params.offsetX || f.params.offsetY)) {
+      primitives.push(fe("feOffset", { in: last, dx: round(f.params.offsetX), dy: round(f.params.offsetY), result: name("off") }));
+      last = name("off");
+    }
+    if (p.spread > 0) {
+      primitives.push(fe("feMorphology", { in: last, operator: "dilate", radius: round(p.spread), result: name("grow") }));
+      last = name("grow");
+    }
+    if (p.blur > 0) {
+      primitives.push(fe("feGaussianBlur", { in: last, stdDeviation: round(p.blur / 2), result: name("blur") }));
+      last = name("blur");
+    }
+    primitives.push(fe("feFlood", { "flood-color": p.color, "flood-opacity": round(p.opacity), result: name("color") }));
+    primitives.push(fe("feComposite", { in: name("color"), in2: last, operator: "in", result: name("tint") }));
+    primitives.push(fe("feComposite", { in: name("tint"), in2: "SourceAlpha", operator: "in", result: name("inner") }));
+    primitives.push(fe("feComposite", { in: name("inner"), in2: body, operator: "over", result: name("body") }));
+    body = name("body");
+  }
+  for (const f of active) {
+    if (f.type !== "feather") continue;
+    n++;
+    const r = f.params.radius;
+    primitives.push(fe("feMorphology", { in: "SourceAlpha", operator: "erode", radius: round(r / 2), result: name("core") }));
+    primitives.push(fe("feGaussianBlur", { in: name("core"), stdDeviation: round(r / 4), result: name("fade") }));
+    primitives.push(fe("feComposite", { in: body, in2: name("fade"), operator: "in", result: name("body") }));
+    body = name("body");
+  }
+  const under = [];
+  for (const f of active) {
+    if (f.type !== "dropShadow" && f.type !== "outerGlow") continue;
+    n++;
+    const p = f.params;
+    let last = "SourceAlpha";
+    if (p.spread > 0) {
+      primitives.push(fe("feMorphology", { in: last, operator: "dilate", radius: round(p.spread), result: name("grow") }));
+      last = name("grow");
+    }
+    if (p.blur > 0) {
+      primitives.push(fe("feGaussianBlur", { in: last, stdDeviation: round(p.blur / 2), result: name("blur") }));
+      last = name("blur");
+    }
+    if (f.type === "dropShadow" && (f.params.offsetX || f.params.offsetY)) {
+      primitives.push(fe("feOffset", { in: last, dx: round(f.params.offsetX), dy: round(f.params.offsetY), result: name("off") }));
+      last = name("off");
+    }
+    primitives.push(fe("feFlood", { "flood-color": p.color, "flood-opacity": round(p.opacity), result: name("color") }));
+    primitives.push(fe("feComposite", { in: name("color"), in2: last, operator: "in", result: name("shadow") }));
+    under.push(name("shadow"));
+  }
+  if (under.length) {
+    n++;
+    primitives.push(fe("feMerge", { result: name("merged") }, [...under, body].map((i) => fe("feMergeNode", { in: i }))));
+    body = name("merged");
+  }
+  for (const f of active) {
+    if (f.type !== "layerBlur") continue;
+    n++;
+    primitives.push(fe("feGaussianBlur", { in: body, stdDeviation: round(f.params.radius / 2), result: name("body") }));
+    body = name("body");
+  }
+  const lastResult = primitives[primitives.length - 1]?.attrs.result;
+  if (lastResult !== body) primitives.push(fe("feMerge", {}, [fe("feMergeNode", { in: body })]));
+  const pad = vectorFilterReach(active) + 2;
+  return {
+    id,
+    x: round(bounds.x - pad),
+    y: round(bounds.y - pad),
+    width: round(bounds.width + 2 * pad),
+    height: round(bounds.height + 2 * pad),
+    primitives
+  };
+}
+var escapeAttr = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function primitiveMarkup(p) {
+  const attrs = Object.entries(p.attrs).map(([k, v2]) => ` ${k}="${escapeAttr(String(v2))}"`).join("");
+  return p.children?.length ? `<${p.tag}${attrs}>${p.children.map(primitiveMarkup).join("")}</${p.tag}>` : `<${p.tag}${attrs}/>`;
+}
+function vectorFilterMarkup(filter, extra = "") {
+  return `<filter id="${escapeAttr(filter.id)}" filterUnits="userSpaceOnUse" x="${filter.x}" y="${filter.y}" width="${filter.width}" height="${filter.height}" color-interpolation-filters="sRGB"${extra}>${filter.primitives.map(primitiveMarkup).join("")}</filter>`;
+}
+var VECTOR_FILTER_MENU = VECTOR_FILTER_TYPES.map((type) => ({ type, label: VECTOR_FILTER_LABELS[type] }));
+
 // src/vector/gradientStroke.ts
 var SHARP = 1.25;
 var TOLERANCE = 0.2;
@@ -4450,7 +4947,7 @@ function applyVectorCornersAttribute(subpaths, value) {
   }
   return subpaths;
 }
-var escapeAttr = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var escapeAttr2 = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 function vectorPathLocalBounds(node) {
   const b = bezierPathBounds(subpathsToBezier(node.subpaths));
   return b ? { x: b.minX, y: b.minY, width: b.maxX - b.minX, height: b.maxY - b.minY } : null;
@@ -4506,6 +5003,26 @@ function computeStrokeSvgParts(node, clipId, precision) {
     heads: parts.heads.map((h) => bezierPathToSvg(h.path, { precision }))
   };
 }
+function vectorNodeLocalPaintBounds(node) {
+  const drawn = expandVectorAppearance(node);
+  const reach = (n) => n.type === "path" ? vectorStrokeStackReach(n) : Math.max(0, ...n.children.map(reach));
+  let b;
+  if (drawn.type === "path") b = vectorPathLocalBounds(drawn);
+  else b = unionBounds(drawn.children.filter((c) => c.visible !== false).map((c) => vectorNodeBounds(c, IDENTITY_MATRIX)));
+  if (!b) return null;
+  const pad = reach(drawn);
+  return { x: b.x - pad, y: b.y - pad, width: b.width + 2 * pad, height: b.height + 2 * pad };
+}
+var filterCache = /* @__PURE__ */ new WeakMap();
+function vectorNodeFilterSvg(node, id) {
+  if (!node.filters?.length) return null;
+  const hit = filterCache.get(node);
+  if (hit && hit.id === id) return hit.filter;
+  const active = activeVectorFilters(node);
+  const filter = active.length ? vectorFilterSvg(active, id, vectorNodeLocalPaintBounds(node)) : null;
+  filterCache.set(node, { id, filter });
+  return filter;
+}
 function widthProfileToAttribute(points, precision = 4) {
   return points.map((p) => [p.t, p.left, p.right].map((n) => formatNumber(n, precision)).join(",")).join(";");
 }
@@ -4521,16 +5038,16 @@ function widthProfileFromAttribute(value) {
 var round2 = (n) => Math.round(n * 100) / 100;
 function gradientMarkup(def, extra = "") {
   const tag = def.type === "radial" ? "radialGradient" : "linearGradient";
-  const attrs = Object.entries(def.attrs).map(([k, v2]) => ` ${k}="${escapeAttr(String(v2))}"`).join("");
-  const stops = def.stops.map((s) => `<stop offset="${s.offset}" stop-color="${escapeAttr(s.stopColor)}"${s.stopOpacity !== void 0 ? ` stop-opacity="${s.stopOpacity}"` : ""}/>`).join("");
-  return `<${tag} id="${escapeAttr(def.id)}"${attrs}${extra}>${stops}</${tag}>`;
+  const attrs = Object.entries(def.attrs).map(([k, v2]) => ` ${k}="${escapeAttr2(String(v2))}"`).join("");
+  const stops = def.stops.map((s) => `<stop offset="${s.offset}" stop-color="${escapeAttr2(s.stopColor)}"${s.stopOpacity !== void 0 ? ` stop-opacity="${s.stopOpacity}"` : ""}/>`).join("");
+  return `<${tag} id="${escapeAttr2(def.id)}"${attrs}${extra}>${stops}</${tag}>`;
 }
 function paintDefMarkup(def, gradient) {
-  const extra = gradient ? ` data-vector-gradient="${escapeAttr(JSON.stringify(gradient))}"` : "";
+  const extra = gradient ? ` data-vector-gradient="${escapeAttr2(JSON.stringify(gradient))}"` : "";
   if (def.type !== "pattern") return gradientMarkup(def, extra);
-  const attrs = Object.entries(def.attrs).map(([k, v2]) => ` ${k}="${escapeAttr(String(v2))}"`).join("");
-  const inner = def.gradients.map((g) => gradientMarkup(g)).join("") + def.tiles.map((t) => `<path d="${t.d}" fill="${escapeAttr(t.fill)}"/>`).join("");
-  return `<pattern id="${escapeAttr(def.id)}"${attrs}${extra}>${inner}</pattern>`;
+  const attrs = Object.entries(def.attrs).map(([k, v2]) => ` ${k}="${escapeAttr2(String(v2))}"`).join("");
+  const inner = def.gradients.map((g) => gradientMarkup(g)).join("") + def.tiles.map((t) => `<path d="${t.d}" fill="${escapeAttr2(t.fill)}"/>`).join("");
+  return `<pattern id="${escapeAttr2(def.id)}"${attrs}${extra}>${inner}</pattern>`;
 }
 var paintMarkup = (paint, defs) => defs.map((d, i) => paintDefMarkup(d, i === 0 && isVectorGradient(paint) ? paint : void 0));
 function blendFromAttribute(value, m) {
@@ -4569,25 +5086,113 @@ function vectorDocumentToSvg(doc, options = {}) {
   const num2 = (n) => formatNumber(n, precision);
   const indent = (depth) => pretty ? "  ".repeat(depth) : "";
   const common = (node) => {
-    let out2 = ` id="${escapeAttr(node.id)}"`;
+    let out2 = ` id="${escapeAttr2(node.id)}"`;
     if (node.transform) out2 += ` transform="matrix(${node.transform.map((n) => formatNumber(n, 6)).join(" ")})"`;
     if (node.opacity !== void 0 && node.opacity < 1) out2 += ` opacity="${num2(node.opacity)}"`;
     if (node.visible === false) out2 += ` display="none"`;
     if (node.blendStep) out2 += ` data-vector-blend-step=""`;
-    if (node.type === "group" && node.blend) out2 += ` data-vector-blend="${escapeAttr(JSON.stringify(node.blend))}"`;
+    if (node.type === "group" && node.blend) out2 += ` data-vector-blend="${escapeAttr2(JSON.stringify(node.blend))}"`;
     if (node.booleanOperation) out2 += ` data-vector-boolean-operation="${node.booleanOperation}"`;
+    const blend = vectorBlendModeCss(node.blendMode);
+    if (blend) out2 += ` style="mix-blend-mode:${blend}"`;
+    if (node.filters?.length) {
+      const filter = vectorNodeFilterSvg(node, `${prefix}filter-${node.id}`);
+      const data = ` data-vector-filters="${escapeAttr2(JSON.stringify(node.filters))}"`;
+      if (filter) {
+        defs.push(vectorFilterMarkup(filter, data));
+        out2 += ` filter="url(#${escapeAttr2(filter.id)})"`;
+      } else out2 += data;
+    }
     return out2;
   };
+  const layerAttrs = (layer) => {
+    let out2 = "";
+    if (layer.opacity !== void 0 && layer.opacity < 1) out2 += ` opacity="${num2(layer.opacity)}"`;
+    const blend = vectorBlendModeCss(layer.blendMode);
+    if (blend) out2 += ` style="mix-blend-mode:${blend}"`;
+    return out2;
+  };
+  const strokePartLines = (node, parts, strokeValue, d, lineAttrs, depth) => {
+    const out2 = [];
+    if (options.strokes === "outline") {
+      const area = bezierPathToSvg(vectorStrokeOutlinePath(subpathsToBezier(node.subpaths), node), { precision });
+      out2.push(`${indent(depth)}<path data-vector-part="stroke-outline" d="${area}" fill="${escapeAttr2(strokeValue)}"/>`);
+      return out2;
+    }
+    let clip = "";
+    if (parts.clip) {
+      const rule = node.fillRule === "evenodd" ? "evenodd" : "nonzero";
+      const id = escapeAttr2(parts.clip.id);
+      if (parts.clip.kind === "clip") {
+        defs.push(`<clipPath id="${id}"><path d="${d}" clip-rule="${rule}"/></clipPath>`);
+        clip = ` clip-path="url(#${id})"`;
+      } else {
+        const b = parts.clip.bounds;
+        const box = `x="${num2(b.x)}" y="${num2(b.y)}" width="${num2(b.width)}" height="${num2(b.height)}"`;
+        defs.push(`<mask id="${id}" maskUnits="userSpaceOnUse" ${box}><rect ${box} fill="#fff"/><path d="${d}" fill="#000" fill-rule="${rule}"/></mask>`);
+        clip = ` mask="url(#${id})"`;
+      }
+    }
+    if (parts.outline !== void 0) out2.push(`${indent(depth)}<path data-vector-part="stroke-outline" d="${parts.outline}" fill="${escapeAttr2(strokeValue)}"${clip}/>`);
+    else out2.push(`${indent(depth)}<path data-vector-part="stroke" d="${parts.d}" fill="none"${lineAttrs(parts.width)}${clip}/>`);
+    for (const h2 of parts.heads) out2.push(`${indent(depth)}<path data-vector-part="head" d="${h2}" fill="${escapeAttr2(strokeValue)}"/>`);
+    return out2;
+  };
+  const lineAttrsOf = (node, strokeValue) => (width) => {
+    let out2 = ` stroke="${escapeAttr2(strokeValue)}" stroke-width="${num2(width)}"`;
+    if (node.strokeLinecap && node.strokeLinecap !== "butt") out2 += ` stroke-linecap="${node.strokeLinecap}"`;
+    if (node.strokeLinejoin && node.strokeLinejoin !== "miter") out2 += ` stroke-linejoin="${node.strokeLinejoin}"`;
+    if (node.strokeDasharray?.length) out2 += ` stroke-dasharray="${node.strokeDasharray.map(num2).join(" ")}"`;
+    return out2;
+  };
+  const liveCorners = (node) => {
+    const corners = vectorCornersAttribute(node.subpaths, precision);
+    return corners ? ` data-vector-d="${bezierPathToSvg(subpathsToBezier(node.subpaths, { corners: false }), { precision })}" data-vector-corners="${corners}"` : "";
+  };
+  const emitStacked = (node, depth) => {
+    const d = vectorPathData(node, precision);
+    const rule = node.fillRule === "evenodd" ? ` fill-rule="evenodd"` : "";
+    let data = ` data-vector-path="" data-vector-fills="${escapeAttr2(JSON.stringify(vectorFills(node)))}" data-vector-strokes="${escapeAttr2(JSON.stringify(vectorStrokes(node)))}"`;
+    if (node.fillRule === "evenodd") data += ` data-vector-fill-rule="evenodd"`;
+    lines.push(`${indent(depth)}<g${common(node)}${data}>`);
+    const layers = vectorPaintLayerNodes(node).filter((l) => l.drawn);
+    let geometry = liveCorners(node);
+    if (!layers.some((l) => l.kind === "fill")) {
+      lines.push(`${indent(depth + 1)}<path data-vector-part="fill" d="${d}" fill="none"${rule}${geometry}/>`);
+      geometry = "";
+    }
+    for (const l of layers) {
+      const id = `${prefix}${l.kind}-${node.id}-${l.index}`;
+      const paint = vectorPaintToSvg(l.layer.paint, id, { node: l.node, precision, ...l.kind === "stroke" ? { role: "stroke" } : {} });
+      defs.push(...paintMarkup(l.layer.paint, paint.defs));
+      const attrs = ` data-vector-layer="${l.index}"${layerAttrs(l.layer)}`;
+      if (l.kind === "fill") {
+        lines.push(`${indent(depth + 1)}<path data-vector-part="fill"${attrs} d="${d}" fill="${escapeAttr2(paint.value)}"${rule}${geometry}/>`);
+        geometry = "";
+        continue;
+      }
+      const lineAttrs = lineAttrsOf(l.node, paint.value);
+      const parts = vectorStrokeSvgParts(l.node, `${prefix}clip-${node.id}-${l.index}`, precision);
+      if (!parts) {
+        lines.push(`${indent(depth + 1)}<path data-vector-part="stroke"${attrs} d="${d}" fill="none"${lineAttrs(l.node.strokeWidth ?? 1)}/>`);
+        continue;
+      }
+      lines.push(`${indent(depth + 1)}<g data-vector-part="stroke-layer"${attrs}>`);
+      lines.push(...strokePartLines(l.node, parts, paint.value, d, lineAttrs, depth + 2));
+      lines.push(`${indent(depth + 1)}</g>`);
+    }
+    lines.push(`${indent(depth)}</g>`);
+  };
   const emit2 = (node, depth) => {
     if (node.visible === false && !options.includeHidden) return;
     const wrappers = options.wrap?.[node.id] ?? [];
     wrappers.forEach((w2, i) => {
-      let attrs = w2.id !== void 0 ? ` id="${escapeAttr(w2.id)}"` : "";
-      if (w2.transform) attrs += ` transform="${escapeAttr(w2.transform)}"`;
+      let attrs = w2.id !== void 0 ? ` id="${escapeAttr2(w2.id)}"` : "";
+      if (w2.transform) attrs += ` transform="${escapeAttr2(w2.transform)}"`;
       if (w2.clip) {
         const shape = Object.entries(w2.clip.attrs).map(([k, v2]) => ` ${k}="${formatNumber(v2, 4)}"`).join("");
-        defs.push(`<clipPath id="${escapeAttr(w2.clip.id)}" clipPathUnits="objectBoundingBox"><${w2.clip.shape}${w2.clip.shapeId !== void 0 ? ` id="${escapeAttr(w2.clip.shapeId)}"` : ""}${shape}/></clipPath>`);
-        attrs += ` clip-path="url(#${escapeAttr(w2.clip.id)})"`;
+        defs.push(`<clipPath id="${escapeAttr2(w2.clip.id)}" clipPathUnits="objectBoundingBox"><${w2.clip.shape}${w2.clip.shapeId !== void 0 ? ` id="${escapeAttr2(w2.clip.shapeId)}"` : ""}${shape}/></clipPath>`);
+        attrs += ` clip-path="url(#${escapeAttr2(w2.clip.id)})"`;
       }
       lines.push(`${indent(depth + i)}<g${attrs}>`);
     });
@@ -4601,13 +5206,13 @@ function vectorDocumentToSvg(doc, options = {}) {
         ...node.effects?.length ? { effects: node.effects } : {},
         ...node.type === "group" && node.liveBoolean ? { liveBoolean: node.liveBoolean } : {}
       };
-      lines.push(`${indent(depth)}<g${common(node)} data-vector-live="${escapeAttr(JSON.stringify(live2))}">`);
+      lines.push(`${indent(depth)}<g${common(node)} data-vector-live="${escapeAttr2(JSON.stringify(live2))}">`);
       lines.push(`${indent(depth + 1)}<g data-vector-part="appearance">`);
       for (const shape of vectorAppearanceNodes(node)) emit2(shape, depth + 2);
       lines.push(`${indent(depth + 1)}</g>`);
       lines.push(`${indent(depth + 1)}<g data-vector-part="source" display="none">`);
       if (node.type === "path") {
-        const { effects: _e, transform: _t, opacity: _o, visible: _v, booleanOperation: _b, blendStep: _s, ...source } = node;
+        const { effects: _e, transform: _t, opacity: _o, visible: _v, booleanOperation: _b, blendStep: _s, blendMode: _bm, filters: _f, ...source } = node;
         emit2({ ...source, id: `${node.id}~src` }, depth + 2);
       } else for (const child of node.children) emit2(child, depth + 2);
       lines.push(`${indent(depth + 1)}</g>`);
@@ -4620,20 +5225,17 @@ function vectorDocumentToSvg(doc, options = {}) {
       lines.push(`${indent(depth)}</g>`);
       return;
     }
+    if (needsVectorPaintLayers(node)) {
+      emitStacked(node, depth);
+      return;
+    }
     const fill = vectorPaintToSvg(node.fill, `${prefix}fill-${node.id}`, { node, precision });
     const stroke = vectorPaintToSvg(node.stroke, `${prefix}stroke-${node.id}`, { node, role: "stroke", precision });
     defs.push(...paintMarkup(node.fill, fill.defs), ...paintMarkup(node.stroke, stroke.defs));
     const d = vectorPathData(node, precision);
-    const corners = vectorCornersAttribute(node.subpaths, precision);
-    const live = corners ? ` data-vector-d="${bezierPathToSvg(subpathsToBezier(node.subpaths, { corners: false }), { precision })}" data-vector-corners="${corners}"` : "";
-    const fillAttrs = ` fill="${escapeAttr(fill.value)}"${node.fillRule === "evenodd" ? ` fill-rule="evenodd"` : ""}`;
-    const lineAttrs = (width) => {
-      let out2 = ` stroke="${escapeAttr(stroke.value)}" stroke-width="${num2(width)}"`;
-      if (node.strokeLinecap && node.strokeLinecap !== "butt") out2 += ` stroke-linecap="${node.strokeLinecap}"`;
-      if (node.strokeLinejoin && node.strokeLinejoin !== "miter") out2 += ` stroke-linejoin="${node.strokeLinejoin}"`;
-      if (node.strokeDasharray?.length) out2 += ` stroke-dasharray="${node.strokeDasharray.map(num2).join(" ")}"`;
-      return out2;
-    };
+    const live = liveCorners(node);
+    const fillAttrs = ` fill="${escapeAttr2(fill.value)}"${node.fillRule === "evenodd" ? ` fill-rule="evenodd"` : ""}`;
+    const lineAttrs = lineAttrsOf(node, stroke.value);
     const parts = stroke.value !== "none" ? vectorStrokeSvgParts(node, `${prefix}clip-${node.id}`, precision) : void 0;
     if (!parts) {
       lines.push(`${indent(depth)}<path${common(node)} d="${d}"${fillAttrs}${stroke.value !== "none" ? lineAttrs(node.strokeWidth ?? 1) : ""}${live}/>`);
@@ -4655,28 +5257,7 @@ function vectorDocumentToSvg(doc, options = {}) {
     }
     lines.push(`${indent(depth)}<g${common(node)}${data}>`);
     lines.push(`${indent(depth + 1)}<path data-vector-part="fill" d="${d}"${fillAttrs}${live}/>`);
-    if (options.strokes === "outline") {
-      const area = bezierPathToSvg(vectorStrokeOutlinePath(subpathsToBezier(node.subpaths), node), { precision });
-      lines.push(`${indent(depth + 1)}<path data-vector-part="stroke-outline" d="${area}" fill="${escapeAttr(stroke.value)}"/>`);
-    } else {
-      let clip = "";
-      if (parts.clip) {
-        const rule = node.fillRule === "evenodd" ? "evenodd" : "nonzero";
-        const id = escapeAttr(parts.clip.id);
-        if (parts.clip.kind === "clip") {
-          defs.push(`<clipPath id="${id}"><path d="${d}" clip-rule="${rule}"/></clipPath>`);
-          clip = ` clip-path="url(#${id})"`;
-        } else {
-          const b = parts.clip.bounds;
-          const box = `x="${num2(b.x)}" y="${num2(b.y)}" width="${num2(b.width)}" height="${num2(b.height)}"`;
-          defs.push(`<mask id="${id}" maskUnits="userSpaceOnUse" ${box}><rect ${box} fill="#fff"/><path d="${d}" fill="#000" fill-rule="${rule}"/></mask>`);
-          clip = ` mask="url(#${id})"`;
-        }
-      }
-      if (parts.outline !== void 0) lines.push(`${indent(depth + 1)}<path data-vector-part="stroke-outline" d="${parts.outline}" fill="${escapeAttr(stroke.value)}"${clip}/>`);
-      else lines.push(`${indent(depth + 1)}<path data-vector-part="stroke" d="${parts.d}" fill="none"${lineAttrs(parts.width)}${clip}/>`);
-      for (const h2 of parts.heads) lines.push(`${indent(depth + 1)}<path data-vector-part="head" d="${h2}" fill="${escapeAttr(stroke.value)}"/>`);
-    }
+    lines.push(...strokePartLines(node, parts, stroke.value, d, lineAttrs, depth + 1));
     lines.push(`${indent(depth)}</g>`);
   };
   for (const node of doc.nodes) emit2(node, 1);
@@ -4686,7 +5267,7 @@ function vectorDocumentToSvg(doc, options = {}) {
   const out = [`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`];
   if (defs.length) out.push(`${indent(1)}<defs>${defs.join("")}</defs>`);
   if (doc.background && options.background !== false && hasPaint(doc.background)) {
-    out.push(`${indent(1)}<rect width="${w}" height="${h}" fill="${escapeAttr(doc.background)}"/>`);
+    out.push(`${indent(1)}<rect width="${w}" height="${h}" fill="${escapeAttr2(doc.background)}"/>`);
   }
   out.push(...lines, "</svg>");
   return out.join(nl);
@@ -4777,10 +5358,15 @@ var STYLE_KEYS2 = {
   "stroke-linecap": "strokeLinecap",
   "stroke-linejoin": "strokeLinejoin",
   "stroke-dasharray": "strokeDasharray",
-  "fill-rule": "fillRule"
+  "fill-rule": "fillRule",
+  "fill-opacity": "fillOpacity",
+  "stroke-opacity": "strokeOpacity",
+  "mix-blend-mode": "mixBlendMode",
+  filter: "filter"
 };
 function readStyle(el, parent) {
-  const out = { ...parent };
+  const { mixBlendMode: _m, filter: _f, ...inherited } = parent;
+  const out = { ...inherited };
   for (const [attr, key] of Object.entries(STYLE_KEYS2)) if (el.attrs[attr] !== void 0) out[key] = el.attrs[attr].trim();
   for (const decl of (el.attrs.style ?? "").split(";")) {
     const i = decl.indexOf(":");
@@ -4816,6 +5402,45 @@ function collectGradients(el, raw) {
   if (PAINT_SERVERS.has(el.name) && el.attrs.id) raw.set(el.attrs.id, el);
   for (const c of el.children) collectGradients(c, raw);
 }
+function collectFilters(el, raw) {
+  if (el.name === "filter" && el.attrs.id) raw.set(el.attrs.id, el);
+  for (const c of el.children) collectFilters(c, raw);
+}
+function filtersFromElement(el) {
+  const own = el.attrs["data-vector-filters"];
+  if (own !== void 0) {
+    try {
+      return sanitizeVectorFilters(JSON.parse(own));
+    } catch {
+      return [];
+    }
+  }
+  const prims = el.children.filter((c) => c.name.startsWith("fe"));
+  const out = [];
+  for (const p of prims) {
+    const std = numberList(p.attrs.stdDeviation)[0] ?? 0;
+    if (p.name === "feDropShadow") {
+      const style = Object.fromEntries(
+        (p.attrs.style ?? "").split(";").map((d) => d.split(":").map((x) => x.trim())).filter((d) => d.length === 2)
+      );
+      const opacity = parseFloat(style["flood-opacity"] ?? p.attrs["flood-opacity"] ?? "1");
+      out.push({
+        type: "dropShadow",
+        params: {
+          color: style["flood-color"] ?? p.attrs["flood-color"] ?? "#000000",
+          opacity: Number.isFinite(opacity) ? opacity : 1,
+          offsetX: length(p.attrs.dx, 2),
+          offsetY: length(p.attrs.dy, 2),
+          blur: std * 2,
+          spread: 0
+        }
+      });
+    } else if (p.name === "feGaussianBlur" && prims.length === 1 && (p.attrs.in === void 0 || p.attrs.in === "SourceGraphic")) {
+      out.push({ type: "layerBlur", params: { radius: std * 2 } });
+    } else return [];
+  }
+  return sanitizeVectorFilters(out);
+}
 function gradientFromAttribute(value) {
   if (!value) return null;
   try {
@@ -4913,6 +5538,13 @@ function parseVectorSvg(svg, options = {}) {
   };
   const rawGradients = /* @__PURE__ */ new Map();
   collectGradients(root, rawGradients);
+  const rawFilters = /* @__PURE__ */ new Map();
+  collectFilters(root, rawFilters);
+  const filtersOf = (value) => {
+    const url = /^url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/.exec((value ?? "").trim());
+    const el = url ? rawFilters.get(url[1]) : void 0;
+    return el ? filtersFromElement(el) : [];
+  };
   const paint = (value) => {
     const v2 = value.trim();
     const url = /^url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/.exec(v2);
@@ -4979,8 +5611,55 @@ function parseVectorSvg(svg, options = {}) {
     if (m === IDENTITY_MATRIX) return node;
     const next = transformVectorNode(node, m);
     const strokeScale = Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2]));
-    if (hasPaint(next.stroke) && strokeScale > 0 && Math.abs(strokeScale - 1) > 1e-9) next.strokeWidth = (next.strokeWidth ?? 1) * strokeScale;
-    return next;
+    if (strokeScale > 0 && Math.abs(strokeScale - 1) > 1e-9) {
+      if (hasPaint(next.stroke)) next.strokeWidth = (next.strokeWidth ?? 1) * strokeScale;
+      if (Array.isArray(next.strokes)) next.strokes = next.strokes.map((l) => (l.kind ?? "paint") === "paint" ? { ...l, strokeWidth: (l.strokeWidth ?? 1) * strokeScale } : l);
+    }
+    return normalizeVectorPaintStacks(next, "stack");
+  };
+  const withOpacities = (node, s) => {
+    let out = node;
+    const fo = s.fillOpacity !== void 0 ? fraction(s.fillOpacity, 1) : 1;
+    const so = s.strokeOpacity !== void 0 ? fraction(s.strokeOpacity, 1) : 1;
+    if (fo < 1 && hasPaint(out.fill)) out = withVectorFills(out, [{ paint: out.fill, opacity: Math.max(0, fo) }]);
+    if (so < 1 && hasPaint(out.stroke)) out = withVectorStrokes(out, vectorStrokes(out).map((l) => ({ ...l, opacity: Math.max(0, so) })));
+    return out;
+  };
+  const stackedPath = (g, _style, m, meta) => {
+    const fillEl = g.children.find((c) => c.name === "path" && c.attrs["data-vector-part"] === "fill");
+    const subpaths = fillEl ? shapeOf(fillEl) : null;
+    if (!subpaths?.length) return null;
+    const parse = (v2) => {
+      try {
+        return v2 ? JSON.parse(v2) : [];
+      } catch {
+        return [];
+      }
+    };
+    let node = { id: idFor(g), type: "path", ...meta, subpaths, fill: null, stroke: null };
+    if (g.attrs["data-vector-fill-rule"] === "evenodd") node.fillRule = "evenodd";
+    node = withVectorFills(node, sanitizeVectorFills(parse(g.attrs["data-vector-fills"])));
+    node = withVectorStrokes(node, sanitizeVectorStrokes(parse(g.attrs["data-vector-strokes"])));
+    return placed(node, m);
+  };
+  const mergeStacked = (nodes2) => {
+    const out = [];
+    const key = (n) => JSON.stringify([n.subpaths, n.transform ?? null, n.opacity ?? 1, n.visible !== false, n.filters ?? null, n.blendMode ?? "normal", n.fillRule ?? "nonzero", n.booleanOperation ?? null]);
+    for (const n of nodes2) {
+      const prev = out[out.length - 1];
+      if (prev?.type === "path" && n.type === "path" && key(prev) === key(n)) {
+        const fills = vectorFills(n);
+        const strokesBefore = vectorStrokes(prev);
+        if (!(fills.length && strokesBefore.length)) {
+          let merged = withVectorFills(prev, [...vectorFills(prev), ...fills]);
+          merged = withVectorStrokes(merged, [...strokesBefore, ...vectorStrokes(n)]);
+          out[out.length - 1] = merged;
+          continue;
+        }
+      }
+      out.push(n);
+    }
+    return out;
   };
   const mergedPath = (g, style, m, meta) => {
     const part = (name) => g.children.find((c) => c.name === "path" && c.attrs["data-vector-part"] === name);
@@ -5063,10 +5742,14 @@ function parseVectorSvg(svg, options = {}) {
       const s = readStyle(child, style);
       const opacity = child.attrs.opacity !== void 0 ? parseFloat(child.attrs.opacity) : void 0;
       const hidden = child.attrs.display === "none" || child.attrs.visibility === "hidden";
+      const blendMode = vectorBlendModeFromCss(s.mixBlendMode);
+      const filters = filtersOf(s.filter);
       const meta = {
         ...child.attrs["inkscape:label"] || child.attrs["data-name"] ? { name: child.attrs["inkscape:label"] ?? child.attrs["data-name"] } : {},
         ...opacity !== void 0 && Number.isFinite(opacity) && opacity < 1 ? { opacity } : {},
-        ...hidden ? { visible: false } : {}
+        ...hidden ? { visible: false } : {},
+        ...blendMode && blendMode !== "normal" ? { blendMode } : {},
+        ...filters.length ? { filters } : {}
       };
       if (child.attrs["data-vector-blend-step"] !== void 0) continue;
       const operation = child.attrs["data-vector-boolean-operation"];
@@ -5076,6 +5759,11 @@ function parseVectorSvg(svg, options = {}) {
         if (node2) out.push(node2);
         continue;
       }
+      if (child.name === "g" && child.attrs["data-vector-path"] !== void 0 && child.attrs["data-vector-fills"] !== void 0) {
+        const node2 = stackedPath(child, s, m, meta);
+        if (node2) out.push(node2);
+        continue;
+      }
       if (child.name === "g" && child.attrs["data-vector-path"] !== void 0) {
         const node2 = mergedPath(child, s, m, meta);
         if (node2) out.push(node2);
@@ -5093,20 +5781,23 @@ function parseVectorSvg(svg, options = {}) {
       const subpaths = shapeOf(child);
       if (!subpaths || !subpaths.length) continue;
       const node = placed(
-        {
-          id: idFor(child),
-          type: "path",
-          ...meta,
-          subpaths,
-          fill: child.name === "line" ? null : paint(s.fill),
-          stroke: paint(s.stroke),
-          ...strokeStyle(s)
-        },
+        withOpacities(
+          {
+            id: idFor(child),
+            type: "path",
+            ...meta,
+            subpaths,
+            fill: child.name === "line" ? null : paint(s.fill),
+            stroke: paint(s.stroke),
+            ...strokeStyle(s)
+          },
+          s
+        ),
         m
       );
       out.push(node);
     }
-    return out;
+    return options.mergeStackedShapes ? mergeStacked(out) : out;
   };
   const nodes = visit(root, readStyle(root, { fill: "#000", stroke: "none", strokeWidth: "" }), rootMatrix);
   return { width, height, nodes };
@@ -5119,12 +5810,14 @@ export {
   VECTOR_GRADIENT_INTERPOLATIONS,
   VECTOR_STROKE_GRADIENT_MODES,
   VECTOR_ARROWHEADS,
+  VECTOR_BLEND_MODES,
   VECTOR_BLEND_SPACINGS,
   VECTOR_TOOLS,
   VECTOR_TRANSFORM_HANDLES,
   VECTOR_PATHFINDER_OPERATIONS,
   VECTOR_EFFECT_TYPES,
   VECTOR_MERGE_MODES,
+  VECTOR_FILTER_TYPES,
   isVectorGradient,
   parseVectorColor,
   VECTOR_GRADIENT_MIN_STOPS,
@@ -5223,6 +5916,32 @@ export {
   vectorStrokeOutlinePath,
   hitTestVectorStroke,
   vectorStrokeReach,
+  VECTOR_STROKE_SETTING_KEYS,
+  VECTOR_BLEND_MODE_LABELS,
+  isVectorBlendMode,
+  vectorBlendModeCss,
+  vectorBlendModeFromCss,
+  isPlainVectorPaintLayer,
+  isDrawnVectorPaintLayer,
+  vectorFills,
+  vectorStrokeSettings,
+  vectorStrokes,
+  hasVectorPaintStacks,
+  withVectorFills,
+  withVectorStrokes,
+  normalizeVectorPaintStacks,
+  sanitizeVectorFills,
+  sanitizeVectorStrokeSettings,
+  sanitizeVectorStrokes,
+  vectorPaintLayerNodes,
+  needsVectorPaintLayers,
+  vectorStrokeStackReach,
+  hitTestVectorPaintLayer,
+  hitTestVectorPaintStack,
+  vectorStacksHaveGradient,
+  newVectorStrokeLayer,
+  vectorTargetPaint,
+  withVectorTargetPaint,
   effectPathLength,
   effectPathVertexCount,
   trimIntervals,
@@ -5331,16 +6050,31 @@ export {
   createVectorMorph,
   interpolateVectorPaths,
   evaluateVectorPathKeyframes,
+  VECTOR_FILTER_DEFAULTS,
+  VECTOR_FILTER_LABELS,
+  VECTOR_FILTER_PARAM_SPECS,
+  isVectorFilterType,
+  normalizeVectorFilterParams,
+  vectorFilterParamKeys,
+  createVectorFilter,
+  sanitizeVectorFilters,
+  activeVectorFilters,
+  vectorFilterReach,
+  vectorFilterSvg,
+  vectorFilterMarkup,
+  VECTOR_FILTER_MENU,
   vectorStrokeGradientDefs,
   vectorCornersAttribute,
   applyVectorCornersAttribute,
   vectorPathLocalBounds,
   vectorPaintToSvg,
   vectorStrokeSvgParts,
+  vectorNodeLocalPaintBounds,
+  vectorNodeFilterSvg,
   widthProfileToAttribute,
   widthProfileFromAttribute,
   vectorDocumentToSvg,
   parseSvgTransform,
   parseVectorSvg
 };
-//# sourceMappingURL=chunk-YGZNGDIT.js.map
+//# sourceMappingURL=chunk-63EFQCT5.js.map