@pixerate/editor 0.140.3 → 0.141.0

package/dist/{chunk-VSR5A22L.cjs → chunk-H6FX45CP.cjs}

@@ -18,7 +18,7 @@
 
 
 
-var _chunkRCUX6CT2cjs = require('./chunk-RCUX6CT2.cjs');
+var _chunkHRI3ZMDMcjs = require('./chunk-HRI3ZMDM.cjs');
 
 
 
@@ -37,7 +37,7 @@ var lerpP = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
 var toP = (v) => [v.x, v.y];
 var mapP = (m, p) => [m[0] * p[0] + m[2] * p[1] + m[4], m[1] * p[0] + m[3] * p[1] + m[5]];
 var curvesOf = (c) => Math.max(0, (c.pts.length - 1) / 3) | 0;
-function subpathToMorphContour(sp, m = _chunkRCUX6CT2cjs.IDENTITY_MATRIX) {
+function subpathToMorphContour(sp, m = _chunkHRI3ZMDMcjs.IDENTITY_MATRIX) {
   const n = sp.anchors.length;
   if (!n) return null;
   const first = mapP(m, toP(sp.anchors[0]));
@@ -67,8 +67,8 @@ function isStraight(p0, p1, p2, p3) {
   const u2 = along(p2);
   return off(p1) < tol && off(p2) < tol && u1 >= -1e-9 && u1 <= 1 + 1e-9 && u2 >= -1e-9 && u2 <= 1 + 1e-9;
 }
-function morphContourToSubpath(c, m = _chunkRCUX6CT2cjs.IDENTITY_MATRIX, closed = c.closed) {
-  const pts = _chunkRCUX6CT2cjs.isIdentityMatrix.call(void 0, m) ? c.pts : c.pts.map((p) => mapP(m, p));
+function morphContourToSubpath(c, m = _chunkHRI3ZMDMcjs.IDENTITY_MATRIX, closed = c.closed) {
+  const pts = _chunkHRI3ZMDMcjs.isIdentityMatrix.call(void 0, m) ? c.pts : c.pts.map((p) => mapP(m, p));
   const curves = curvesOf(c);
   const dropLast = closed && c.closed && curves > 0;
   const count = dropLast ? curves : curves + 1;
@@ -84,7 +84,7 @@ function morphContourToSubpath(c, m = _chunkRCUX6CT2cjs.IDENTITY_MATRIX, closed
     anchors[(k + 1) % count].in = { x: p2[0], y: p2[1] };
   }
   for (const a of anchors) {
-    const type = _chunkRCUX6CT2cjs.inferAnchorType.call(void 0, a);
+    const type = _chunkHRI3ZMDMcjs.inferAnchorType.call(void 0, a);
     if (type !== "corner") a.type = type;
   }
   const isClosed = closed && curves > 0;
@@ -267,7 +267,7 @@ function bestStart(fixed, free, useShapeContext) {
   return best;
 }
 function placeIn(c, from, to) {
-  const b = _chunkRCUX6CT2cjs.unionBounds.call(void 0, [boundsOfPoints(c.pts)]);
+  const b = _chunkHRI3ZMDMcjs.unionBounds.call(void 0, [boundsOfPoints(c.pts)]);
   const p = b ? [b.x + b.width / 2, b.y + b.height / 2] : c.pts[0];
   if (!from || !to) return p;
   const fx = from.width > 0 ? (p[0] - from.x) / from.width : 0.5;
@@ -456,7 +456,7 @@ function interpolateVectorColor(a, b, t) {
 }
 function resampleGradientStops(g, offsets) {
   return offsets.map((offset) => {
-    const s = _chunkRCUX6CT2cjs.sampleVectorGradient.call(void 0, g, offset);
+    const s = _chunkHRI3ZMDMcjs.sampleVectorGradient.call(void 0, g, offset);
     return s.opacity < 1 ? { offset, color: s.color, opacity: Math.round(s.opacity * 1e4) / 1e4 } : { offset, color: s.color };
   });
 }
@@ -467,11 +467,11 @@ function lerpAngle(a, b, t) {
 var lerpPoint = (a, b, t) => ({ x: lerpN(a.x, b.x, t), y: lerpN(a.y, b.y, t) });
 var sameColourModel = (a, b) => (_nullishCoalesce(a.interpolation, () => ( "srgb"))) === (_nullishCoalesce(b.interpolation, () => ( "srgb"))) && (_nullishCoalesce(a.smoothness, () => ( 0))) === (_nullishCoalesce(b.smoothness, () => ( 0)));
 function lerpStops(a, b, t) {
-  let stopsA = _chunkRCUX6CT2cjs.sortedVectorGradientStops.call(void 0, a);
-  let stopsB = _chunkRCUX6CT2cjs.sortedVectorGradientStops.call(void 0, b);
+  let stopsA = _chunkHRI3ZMDMcjs.sortedVectorGradientStops.call(void 0, a);
+  let stopsB = _chunkHRI3ZMDMcjs.sortedVectorGradientStops.call(void 0, b);
   const resampled = stopsA.length !== stopsB.length || !sameColourModel(a, b);
   if (resampled) {
-    const offs = [..._chunkRCUX6CT2cjs.expandVectorGradientStops.call(void 0, a), ..._chunkRCUX6CT2cjs.expandVectorGradientStops.call(void 0, b), ...stopsA, ...stopsB].map((s) => s.offset).filter(Number.isFinite).sort((x, y) => x - y);
+    const offs = [..._chunkHRI3ZMDMcjs.expandVectorGradientStops.call(void 0, a), ..._chunkHRI3ZMDMcjs.expandVectorGradientStops.call(void 0, b), ...stopsA, ...stopsB].map((s) => s.offset).filter(Number.isFinite).sort((x, y) => x - y);
     const common = offs.filter((o, i) => i === 0 || o - offs[i - 1] > 1e-4);
     stopsA = resampleGradientStops(a, common);
     stopsB = resampleGradientStops(b, common);
@@ -498,8 +498,8 @@ function lerpGradient(a, b, t) {
   }
   if (near.spread && near.spread !== "pad") out.spread = near.spread;
   if (near.strokeMode && near.strokeMode !== "within") out.strokeMode = near.strokeMode;
-  const ea = _chunkRCUX6CT2cjs.hasExplicitGradientGeometry.call(void 0, a);
-  const eb = _chunkRCUX6CT2cjs.hasExplicitGradientGeometry.call(void 0, b);
+  const ea = _chunkHRI3ZMDMcjs.hasExplicitGradientGeometry.call(void 0, a);
+  const eb = _chunkHRI3ZMDMcjs.hasExplicitGradientGeometry.call(void 0, b);
   if (!ea && !eb) {
     if (a.angle !== void 0 || b.angle !== void 0 || a.type === "linear" || a.type === "reflected") {
       const fallback = a.type === "linear" || a.type === "reflected" ? 180 : 90;
@@ -512,10 +512,10 @@ function lerpGradient(a, b, t) {
     }
     return out;
   }
-  const pa = _chunkRCUX6CT2cjs.vectorGradientPoints.call(void 0, a);
-  const pb = _chunkRCUX6CT2cjs.vectorGradientPoints.call(void 0, b);
+  const pa = _chunkHRI3ZMDMcjs.vectorGradientPoints.call(void 0, a);
+  const pb = _chunkHRI3ZMDMcjs.vectorGradientPoints.call(void 0, b);
   if (pa.units !== pb.units) {
-    const src = _chunkRCUX6CT2cjs.explicitVectorGradient.call(void 0, near);
+    const src = _chunkHRI3ZMDMcjs.explicitVectorGradient.call(void 0, near);
     return { ...src, stops: out.stops, ...out.interpolation ? { interpolation: out.interpolation } : {}, ...out.smoothness ? { smoothness: out.smoothness } : {} };
   }
   out.start = lerpPoint(pa.start, pb.start, t);
@@ -535,14 +535,14 @@ function solidLike(color, like) {
 function interpolateVectorPaint(a, b, t) {
   if (t <= 0) return a;
   if (t >= 1) return b;
-  const pa = _chunkRCUX6CT2cjs.hasPaint.call(void 0, a);
-  const pb = _chunkRCUX6CT2cjs.hasPaint.call(void 0, b);
+  const pa = _chunkHRI3ZMDMcjs.hasPaint.call(void 0, a);
+  const pb = _chunkHRI3ZMDMcjs.hasPaint.call(void 0, b);
   if (!pa && !pb) return t < 0.5 ? a : b;
   if (typeof a === "string" && pa && typeof b === "string" && pb) return interpolateVectorColor(a, b, t);
   if (!pa && typeof b === "string") return interpolateVectorColor("transparent", b, t);
   if (!pb && typeof a === "string") return interpolateVectorColor(a, "transparent", t);
-  const ga = pa && _chunkRCUX6CT2cjs.isVectorGradient.call(void 0, a) ? a : null;
-  const gb = pb && _chunkRCUX6CT2cjs.isVectorGradient.call(void 0, b) ? b : null;
+  const ga = pa && _chunkHRI3ZMDMcjs.isVectorGradient.call(void 0, a) ? a : null;
+  const gb = pb && _chunkHRI3ZMDMcjs.isVectorGradient.call(void 0, b) ? b : null;
   if (ga && gb) return _nullishCoalesce(lerpGradient(ga, gb, t), () => ( (t < 0.5 ? a : b)));
   if (gb) return _nullishCoalesce(lerpGradient(solidLike(pa ? a : null, gb), gb, t), () => ( b));
   if (ga) return _nullishCoalesce(lerpGradient(ga, solidLike(pb ? b : null, ga), t), () => ( a));
@@ -553,8 +553,8 @@ function interpolateWidthProfiles(a, b, t) {
   const at = [..._nullishCoalesce(a, () => ( [])), ..._nullishCoalesce(b, () => ( [])), { t: 0 }, { t: 1 }].map((p) => p.t).sort((x, y) => x - y);
   const ts = at.filter((v, i) => i === 0 || v - at[i - 1] > 1e-6);
   return ts.map((pos) => {
-    const x = _chunkRCUX6CT2cjs.widthProfileAt.call(void 0, a, pos);
-    const y = _chunkRCUX6CT2cjs.widthProfileAt.call(void 0, b, pos);
+    const x = _chunkHRI3ZMDMcjs.widthProfileAt.call(void 0, a, pos);
+    const y = _chunkHRI3ZMDMcjs.widthProfileAt.call(void 0, b, pos);
     return { t: pos, left: lerpN(x.left, y.left, t), right: lerpN(x.right, y.right, t) };
   });
 }
@@ -597,7 +597,7 @@ function reversedStyle(s) {
   out.endArrow = s.startArrow;
   out.startArrowScale = s.endArrowScale;
   out.endArrowScale = s.startArrowScale;
-  if (_optionalChain([s, 'access', _6 => _6.strokeWidthProfile, 'optionalAccess', _7 => _7.length])) out.strokeWidthProfile = _chunkRCUX6CT2cjs.reverseWidthProfile.call(void 0, s.strokeWidthProfile);
+  if (_optionalChain([s, 'access', _6 => _6.strokeWidthProfile, 'optionalAccess', _7 => _7.length])) out.strokeWidthProfile = _chunkHRI3ZMDMcjs.reverseWidthProfile.call(void 0, s.strokeWidthProfile);
   for (const k of ["startArrow", "endArrow", "startArrowScale", "endArrowScale"]) if (out[k] === void 0) delete out[k];
   return out;
 }
@@ -623,19 +623,19 @@ function styleOf(n) {
   return out;
 }
 function contoursOf(node, m) {
-  return _chunkRCUX6CT2cjs.expandVectorCorners.call(void 0, node.subpaths).map((sp) => subpathToMorphContour(sp, m)).filter((c) => !!c);
+  return _chunkHRI3ZMDMcjs.expandVectorCorners.call(void 0, node.subpaths).map((sp) => subpathToMorphContour(sp, m)).filter((c) => !!c);
 }
-function preparePathMorph(a, b, options, ma = _chunkRCUX6CT2cjs.nodeMatrix.call(void 0, a), mb = _chunkRCUX6CT2cjs.nodeMatrix.call(void 0, b)) {
+function preparePathMorph(a, b, options, ma = _chunkHRI3ZMDMcjs.nodeMatrix.call(void 0, a), mb = _chunkHRI3ZMDMcjs.nodeMatrix.call(void 0, b)) {
   const corr = correspondMorphContours(contoursOf(a, ma), contoursOf(b, mb), options);
   const sim = procrustes(corr.a, corr.b);
   const styleA = styleOf(a);
   const styleB = corr.reversed ? reversedStyle(styleOf(b)) : styleOf(b);
-  const rigid = !_chunkRCUX6CT2cjs.isIdentityMatrix.call(void 0, ma) || !_chunkRCUX6CT2cjs.isIdentityMatrix.call(void 0, mb);
+  const rigid = !_chunkHRI3ZMDMcjs.isIdentityMatrix.call(void 0, ma) || !_chunkHRI3ZMDMcjs.isIdentityMatrix.call(void 0, mb);
   const id = _nullishCoalesce(options.id, () => ( a.id));
   return (t) => {
     const contours = interpolateMorphContours(corr.a, corr.b, t, { linear: options.linear, rigidity: options.rigidity, similarity: sim });
-    const m = rigid ? interpolateRigidMatrix(ma, mb, t) : _chunkRCUX6CT2cjs.IDENTITY_MATRIX;
-    const back = rigid ? _chunkRCUX6CT2cjs.invertMatrix.call(void 0, m) : _chunkRCUX6CT2cjs.IDENTITY_MATRIX;
+    const m = rigid ? interpolateRigidMatrix(ma, mb, t) : _chunkHRI3ZMDMcjs.IDENTITY_MATRIX;
+    const back = rigid ? _chunkHRI3ZMDMcjs.invertMatrix.call(void 0, m) : _chunkHRI3ZMDMcjs.IDENTITY_MATRIX;
     const subpaths = contours.map((c, k) => {
       const closed = t <= 0 ? corr.a[k].closed : t >= 1 ? corr.b[k].closed : corr.a[k].closed && corr.b[k].closed;
       return morphContourToSubpath({ closed: corr.a[k].closed && corr.b[k].closed, pts: c.pts }, back, closed);
@@ -643,14 +643,14 @@ function preparePathMorph(a, b, options, ma = _chunkRCUX6CT2cjs.nodeMatrix.call(
     const node = { id, type: "path", subpaths, ...interpolateVectorStyle(styleA, styleB, t) };
     const opacity = lerpN(_nullishCoalesce(a.opacity, () => ( 1)), _nullishCoalesce(b.opacity, () => ( 1)), t);
     if (opacity < 1) node.opacity = opacity;
-    if (rigid && !_chunkRCUX6CT2cjs.isIdentityMatrix.call(void 0, m)) node.transform = m;
+    if (rigid && !_chunkHRI3ZMDMcjs.isIdentityMatrix.call(void 0, m)) node.transform = m;
     return node;
   };
 }
-function flattenPaths(node, parent = _chunkRCUX6CT2cjs.IDENTITY_MATRIX) {
-  const m = _chunkRCUX6CT2cjs.multiplyMatrices.call(void 0, _chunkRCUX6CT2cjs.nodeMatrix.call(void 0, node), parent);
+function flattenPaths(node, parent = _chunkHRI3ZMDMcjs.IDENTITY_MATRIX) {
+  const m = _chunkHRI3ZMDMcjs.multiplyMatrices.call(void 0, _chunkHRI3ZMDMcjs.nodeMatrix.call(void 0, node), parent);
   if (node.type === "path") return [{ path: node, m, opacity: 1 }];
-  if (node.type === "text" || node.type === "instance") return flattenPaths(_chunkRCUX6CT2cjs.expandVectorAppearance.call(void 0, node), parent);
+  if (node.type === "text" || node.type === "instance") return flattenPaths(_chunkHRI3ZMDMcjs.expandVectorAppearance.call(void 0, node), parent);
   const o = _nullishCoalesce(node.opacity, () => ( 1));
   return node.children.filter((c) => c.visible !== false).flatMap((c) => flattenPaths(c, m)).map((e) => ({ ...e, opacity: e.opacity * o }));
 }
@@ -672,8 +672,8 @@ function createVectorMorph(a, b, options = {}) {
   }
   const pa = flattenPaths(a);
   const pb = flattenPaths(b);
-  const ba = _chunkRCUX6CT2cjs.unionBounds.call(void 0, pa.map((e) => placedBounds(e.path, e.m)));
-  const bb = _chunkRCUX6CT2cjs.unionBounds.call(void 0, pb.map((e) => placedBounds(e.path, e.m)));
+  const ba = _chunkHRI3ZMDMcjs.unionBounds.call(void 0, pa.map((e) => placedBounds(e.path, e.m)));
+  const bb = _chunkHRI3ZMDMcjs.unionBounds.call(void 0, pb.map((e) => placedBounds(e.path, e.m)));
   const id = _nullishCoalesce(options.id, () => ( a.id));
   const parts = [];
   const opacities = [];
@@ -685,10 +685,10 @@ function createVectorMorph(a, b, options = {}) {
       parts.push(preparePathMorph(x.path, y.path, sub, x.m, y.m));
       opacities.push([x.opacity, y.opacity]);
     } else if (x) {
-      parts.push(preparePathMorph(x.path, collapsedPath(x.path, x.m, ba, bb), sub, x.m, _chunkRCUX6CT2cjs.IDENTITY_MATRIX));
+      parts.push(preparePathMorph(x.path, collapsedPath(x.path, x.m, ba, bb), sub, x.m, _chunkHRI3ZMDMcjs.IDENTITY_MATRIX));
       opacities.push([x.opacity, x.opacity]);
     } else if (y) {
-      parts.push(preparePathMorph(collapsedPath(y.path, y.m, bb, ba), y.path, sub, _chunkRCUX6CT2cjs.IDENTITY_MATRIX, y.m));
+      parts.push(preparePathMorph(collapsedPath(y.path, y.m, bb, ba), y.path, sub, _chunkHRI3ZMDMcjs.IDENTITY_MATRIX, y.m));
       opacities.push([y.opacity, y.opacity]);
     }
   }

package/dist/{chunk-RCUX6CT2.cjs → chunk-HRI3ZMDM.cjs}

@@ -8714,7 +8714,66 @@ function vectorDocumentToSvg(doc, options = {}) {
   return out.join(nl);
 }
 var BOOLEAN_OPERATIONS = ["union", "subtract", "intersect", "exclude"];
-var TEXT_CONTENT = /* @__PURE__ */ new Set(["text", "tspan", "textPath"]);
+var TEXT_CONTENT = /* @__PURE__ */ new Set(["text", "tspan", "textPath", "style"]);
+function parseCssRules(cssText) {
+  const rules = [];
+  const clean2 = cssText.replace(/\/\*[\s\S]*?\*\//g, "");
+  const re = /([^{]+)\{([^}]+)\}/g;
+  let m;
+  while (m = re.exec(clean2)) {
+    const selector = m[1].trim();
+    const body = m[2].trim();
+    const properties = {};
+    for (const decl of body.split(";")) {
+      const i = decl.indexOf(":");
+      if (i > 0) {
+        const prop = decl.slice(0, i).trim().toLowerCase();
+        const val = decl.slice(i + 1).replace(/!important/gi, "").trim();
+        if (prop && val) properties[prop] = val;
+      }
+    }
+    if (Object.keys(properties).length > 0) {
+      rules.push({ selector, properties });
+    }
+  }
+  return rules;
+}
+function collectStyleRules(el, rules) {
+  if (el.name === "style") {
+    const rawText = (_nullishCoalesce(el.content, () => ( []))).map((c) => typeof c === "string" ? c : "").join("");
+    rules.push(...parseCssRules(rawText));
+  }
+  for (const child of el.children) {
+    collectStyleRules(child, rules);
+  }
+}
+function matchesSelector(el, selector) {
+  const sel = selector.trim();
+  if (!sel) return false;
+  if (sel.includes(",")) {
+    return sel.split(",").some((s) => matchesSelector(el, s));
+  }
+  if (sel.startsWith(".")) {
+    const targetClass = sel.slice(1).trim();
+    const classes = (_nullishCoalesce(el.attrs.class, () => ( ""))).split(/\s+/);
+    return classes.includes(targetClass);
+  }
+  if (sel.startsWith("#")) {
+    const targetId = sel.slice(1).trim();
+    return el.attrs.id === targetId;
+  }
+  if (/^[a-zA-Z_][\w:.-]*$/.test(sel)) {
+    return el.name.toLowerCase() === sel.toLowerCase();
+  }
+  const match = /^([a-zA-Z_][\w:.-]*)\.([a-zA-Z0-9_-]+)$/.exec(sel);
+  if (match) {
+    const [, tag, cls] = match;
+    if (el.name.toLowerCase() !== tag.toLowerCase()) return false;
+    const classes = (_nullishCoalesce(el.attrs.class, () => ( ""))).split(/\s+/);
+    return classes.includes(cls);
+  }
+  return false;
+}
 function parseXml(source) {
   const text = source.replace(/<!--[\s\S]*?-->/g, "").replace(/<\?[\s\S]*?\?>/g, "").replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, "").replace(/<!DOCTYPE[^>[]*(\[[\s\S]*?\])?\s*>/gi, "");
   const root = { name: "#root", attrs: {}, children: [] };
@@ -8811,10 +8870,20 @@ var STYLE_KEYS = {
   "mix-blend-mode": "mixBlendMode",
   filter: "filter"
 };
-function readStyle(el, parent) {
+function readStyle(el, parent, cssRules) {
   const { mixBlendMode: _m, filter: _f, ...inherited } = parent;
   const out = { ...inherited };
   for (const [attr, key] of Object.entries(STYLE_KEYS)) if (el.attrs[attr] !== void 0) out[key] = el.attrs[attr].trim();
+  if (_optionalChain([cssRules, 'optionalAccess', _245 => _245.length])) {
+    for (const rule of cssRules) {
+      if (matchesSelector(el, rule.selector)) {
+        for (const [prop, val] of Object.entries(rule.properties)) {
+          const key = STYLE_KEYS[prop];
+          if (key) out[key] = val;
+        }
+      }
+    }
+  }
   for (const decl of (_nullishCoalesce(el.attrs.style, () => ( ""))).split(";")) {
     const i = decl.indexOf(":");
     if (i < 0) continue;
@@ -8861,7 +8930,7 @@ function attrOrStyle(el, name) {
   return el.attrs[name];
 }
 function urlId(value) {
-  return _nullishCoalesce(_optionalChain([/^url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/, 'access', _245 => _245.exec, 'call', _246 => _246((_nullishCoalesce(value, () => ( ""))).trim()), 'optionalAccess', _247 => _247[1]]), () => ( null));
+  return _nullishCoalesce(_optionalChain([/^url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/, 'access', _246 => _246.exec, 'call', _247 => _247((_nullishCoalesce(value, () => ( ""))).trim()), 'optionalAccess', _248 => _248[1]]), () => ( null));
 }
 function clipRulesAsFillRules(el) {
   const attrs = { ...el.attrs };
@@ -8926,9 +8995,9 @@ function resolveGradient(id, raw) {
   for (let el = first; el && !chain.includes(el) && chain.length < 32; ) {
     chain.push(el);
     const href = _nullishCoalesce(el.attrs.href, () => ( el.attrs["xlink:href"]));
-    el = _optionalChain([href, 'optionalAccess', _248 => _248.startsWith, 'call', _249 => _249("#")]) ? raw.get(href.slice(1)) : void 0;
+    el = _optionalChain([href, 'optionalAccess', _249 => _249.startsWith, 'call', _250 => _250("#")]) ? raw.get(href.slice(1)) : void 0;
   }
-  const attr = (name) => _optionalChain([chain, 'access', _250 => _250.find, 'call', _251 => _251((el) => el.attrs[name] !== void 0), 'optionalAccess', _252 => _252.attrs, 'access', _253 => _253[name]]);
+  const attr = (name) => _optionalChain([chain, 'access', _251 => _251.find, 'call', _252 => _252((el) => el.attrs[name] !== void 0), 'optionalAccess', _253 => _253.attrs, 'access', _254 => _254[name]]);
   const stops = _nullishCoalesce(chain.map(readStops).find((s) => s.length), () => ( []));
   if (!stops.length) return null;
   const user = attr("gradientUnits") === "userSpaceOnUse";
@@ -9003,6 +9072,8 @@ function parseVectorSvg(svg, options = {}) {
     usedIds.add(next);
     return next;
   };
+  const styleRules = [];
+  collectStyleRules(root, styleRules);
   const rawGradients = /* @__PURE__ */ new Map();
   collectGradients(root, rawGradients);
   const rawFilters = /* @__PURE__ */ new Map();
@@ -9098,7 +9169,7 @@ function parseVectorSvg(svg, options = {}) {
   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 (!_optionalChain([subpaths, 'optionalAccess', _254 => _254.length])) return null;
+    if (!_optionalChain([subpaths, 'optionalAccess', _255 => _255.length])) return null;
     const parse = (v2) => {
       try {
         return v2 ? JSON.parse(v2) : [];
@@ -9117,7 +9188,7 @@ function parseVectorSvg(svg, options = {}) {
     const key = (n) => JSON.stringify([n.subpaths, _nullishCoalesce(n.transform, () => ( null)), _nullishCoalesce(n.opacity, () => ( 1)), n.visible !== false, _nullishCoalesce(n.filters, () => ( null)), _nullishCoalesce(n.blendMode, () => ( "normal")), _nullishCoalesce(n.fillRule, () => ( "nonzero")), _nullishCoalesce(n.booleanOperation, () => ( null))]);
     for (const n of nodes2) {
       const prev = out[out.length - 1];
-      if (_optionalChain([prev, 'optionalAccess', _255 => _255.type]) === "path" && n.type === "path" && key(prev) === key(n)) {
+      if (_optionalChain([prev, 'optionalAccess', _256 => _256.type]) === "path" && n.type === "path" && key(prev) === key(n)) {
         const fills = vectorFills(n);
         const strokesBefore = vectorStrokes(prev);
         if (!(fills.length && strokesBefore.length)) {
@@ -9135,9 +9206,9 @@ function parseVectorSvg(svg, options = {}) {
     const part = (name) => g.children.find((c) => c.name === "path" && c.attrs["data-vector-part"] === name);
     const fillEl = part("fill");
     const subpaths = fillEl ? shapeOf(fillEl) : null;
-    if (!fillEl || !_optionalChain([subpaths, 'optionalAccess', _256 => _256.length])) return null;
+    if (!fillEl || !_optionalChain([subpaths, 'optionalAccess', _257 => _257.length])) return null;
     const a = g.attrs;
-    const fs = readStyle(fillEl, style);
+    const fs = readStyle(fillEl, style, styleRules);
     const strokeEl = part("stroke");
     const outlineEl = part("stroke-outline");
     const ss = strokeEl ? readStyle(strokeEl, style) : null;
@@ -9159,7 +9230,7 @@ function parseVectorSvg(svg, options = {}) {
       ...meta,
       subpaths,
       fill: paint(fs.fill),
-      stroke: ss ? paint(ss.stroke) : outlineEl ? paint(readStyle(outlineEl, style).fill) : null,
+      stroke: ss ? paint(ss.stroke) : outlineEl ? paint(readStyle(outlineEl, style, styleRules).fill) : null,
       ...ss ? strokeStyle(ss) : {},
       ...fs.fillRule === "evenodd" ? { fillRule: "evenodd" } : {},
       strokeWidth: width2,
@@ -9172,7 +9243,7 @@ function parseVectorSvg(svg, options = {}) {
       ...profile.length ? { strokeWidthProfile: profile } : {},
       ...keptCap ? { strokeLinecap: keptCap } : {},
       ...keptJoin ? { strokeLinejoin: keptJoin } : {},
-      ..._optionalChain([keptDash, 'optionalAccess', _257 => _257.length]) ? { strokeDasharray: keptDash } : {}
+      ..._optionalChain([keptDash, 'optionalAccess', _258 => _258.length]) ? { strokeDasharray: keptDash } : {}
     };
     return placed(node, m);
   };
@@ -9237,8 +9308,8 @@ function parseVectorSvg(svg, options = {}) {
     } else {
       const fill = json2(g.attrs["data-vector-fill"]);
       const stroke = json2(g.attrs["data-vector-stroke"]);
-      node.fill = fill == null ? null : _nullishCoalesce(_optionalChain([sanitizeVectorFills, 'call', _258 => _258([{ paint: fill }]), 'access', _259 => _259[0], 'optionalAccess', _260 => _260.paint]), () => ( null));
-      node.stroke = stroke == null ? null : _nullishCoalesce(_optionalChain([sanitizeVectorFills, 'call', _261 => _261([{ paint: stroke }]), 'access', _262 => _262[0], 'optionalAccess', _263 => _263.paint]), () => ( null));
+      node.fill = fill == null ? null : _nullishCoalesce(_optionalChain([sanitizeVectorFills, 'call', _259 => _259([{ paint: fill }]), 'access', _260 => _260[0], 'optionalAccess', _261 => _261.paint]), () => ( null));
+      node.stroke = stroke == null ? null : _nullishCoalesce(_optionalChain([sanitizeVectorFills, 'call', _262 => _262([{ paint: stroke }]), 'access', _263 => _263[0], 'optionalAccess', _264 => _264.paint]), () => ( null));
       const settings = json2(g.attrs["data-vector-stroke-settings"]);
       if (settings && typeof settings === "object") {
         const strokes = sanitizeVectorStrokes([{ paint: _nullishCoalesce(node.stroke, () => ( "#000")), ...settings }]);
@@ -9274,8 +9345,8 @@ function parseVectorSvg(svg, options = {}) {
     const anchor = attrOrStyle(el, "text-anchor");
     const first0 = (v2) => _nullishCoalesce(numberList(v2)[0], () => ( 0));
     const tspan = el.children.find((c) => c.name === "tspan");
-    const x = el.attrs.x !== void 0 ? first0(el.attrs.x) : first0(_optionalChain([tspan, 'optionalAccess', _264 => _264.attrs, 'access', _265 => _265.x]));
-    const y = el.attrs.y !== void 0 ? first0(el.attrs.y) : first0(_optionalChain([tspan, 'optionalAccess', _266 => _266.attrs, 'access', _267 => _267.y]));
+    const x = el.attrs.x !== void 0 ? first0(el.attrs.x) : first0(_optionalChain([tspan, 'optionalAccess', _265 => _265.attrs, 'access', _266 => _266.x]));
+    const y = el.attrs.y !== void 0 ? first0(el.attrs.y) : first0(_optionalChain([tspan, 'optionalAccess', _267 => _267.attrs, 'access', _268 => _268.y]));
     const fillValue = _nullishCoalesce(attrOrStyle(el, "fill"), () => ( style.fill));
     let node = {
       id: idFor(el),
@@ -9306,12 +9377,12 @@ function parseVectorSvg(svg, options = {}) {
     if (symbolOfElement.has(el)) return symbolOfElement.get(el);
     symbolOfElement.set(el, null);
     const own = json2(el.attrs["data-vector-symbol"]);
-    let id = typeof _optionalChain([own, 'optionalAccess', _268 => _268.id]) === "string" && own.id ? own.id : _nullishCoalesce(el.attrs.id, () => ( createId()));
+    let id = typeof _optionalChain([own, 'optionalAccess', _269 => _269.id]) === "string" && own.id ? own.id : _nullishCoalesce(el.attrs.id, () => ( createId()));
     while (usedSymbolIds.has(id)) id = `${id}-${usedSymbolIds.size}`;
     usedSymbolIds.add(id);
-    const style = readStyle(el, rootStyle);
+    const style = readStyle(el, rootStyle, styleRules);
     const nodes2 = el.name === "symbol" ? visit2(el, style, IDENTITY_MATRIX) : visitOne({ ...el, attrs: { ...el.attrs, transform: "" } }, rootStyle, parseSvgTransform(el.attrs.transform));
-    symbols.push({ id, name: typeof _optionalChain([own, 'optionalAccess', _269 => _269.name]) === "string" && own.name ? own.name : _nullishCoalesce(el.attrs.id, () => ( "Symbol")), nodes: nodes2 });
+    symbols.push({ id, name: typeof _optionalChain([own, 'optionalAccess', _270 => _270.name]) === "string" && own.name ? own.name : _nullishCoalesce(el.attrs.id, () => ( "Symbol")), nodes: nodes2 });
     symbolOfElement.set(el, id);
     return id;
   };
@@ -9323,13 +9394,13 @@ function parseVectorSvg(svg, options = {}) {
     if (!symbolId) return null;
     const own = json2(el.attrs["data-vector-instance"]);
     const place2 = multiplyMatrices(translateMatrix(length(el.attrs.x), length(el.attrs.y)), m);
-    const node = { id: idFor(el), type: "instance", ...meta, symbolId, ..._optionalChain([own, 'optionalAccess', _270 => _270.scaleStrokes]) === false ? { scaleStrokes: false } : {}, ..._optionalChain([own, 'optionalAccess', _271 => _271.overrides]) ? { overrides: own.overrides } : {} };
+    const node = { id: idFor(el), type: "instance", ...meta, symbolId, ..._optionalChain([own, 'optionalAccess', _271 => _271.scaleStrokes]) === false ? { scaleStrokes: false } : {}, ..._optionalChain([own, 'optionalAccess', _272 => _272.overrides]) ? { overrides: own.overrides } : {} };
     return isIdentityMatrix(place2) ? node : { ...node, transform: place2 };
   };
   const ownInstance = (g, m, meta) => {
     const raw = json2(g.attrs["data-vector-instance"]);
     if (!raw || typeof raw.symbolId !== "string") return null;
-    const sym2 = [...byId.values()].find((e) => e.name === "symbol" && _optionalChain([json2, 'call', _272 => _272(e.attrs["data-vector-symbol"]), 'optionalAccess', _273 => _273.id]) === raw.symbolId);
+    const sym2 = [...byId.values()].find((e) => e.name === "symbol" && _optionalChain([json2, 'call', _273 => _273(e.attrs["data-vector-symbol"]), 'optionalAccess', _274 => _274.id]) === raw.symbolId);
     const symbolId = sym2 ? symbolFor(sym2) : raw.symbolId;
     if (!symbolId) return null;
     const t = Array.isArray(raw.transform) && raw.transform.length === 6 && raw.transform.every(Number.isFinite) ? raw.transform : IDENTITY_MATRIX;
@@ -9337,7 +9408,7 @@ function parseVectorSvg(svg, options = {}) {
     const drawn = g.children.find((c) => c.name === "g");
     const effects = sanitizeVectorEffects(raw.effects);
     const node = {
-      id: _nullishCoalesce(_optionalChain([drawn, 'optionalAccess', _274 => _274.attrs, 'access', _275 => _275.id]), () => ( idFor(g))),
+      id: _nullishCoalesce(_optionalChain([drawn, 'optionalAccess', _275 => _275.attrs, 'access', _276 => _276.id]), () => ( idFor(g))),
       type: "instance",
       ...meta,
       symbolId,
@@ -9346,7 +9417,7 @@ function parseVectorSvg(svg, options = {}) {
       ...effects.length ? { effects } : {}
     };
     if (drawn) {
-      const ds = readStyle(drawn, rootStyle);
+      const ds = readStyle(drawn, rootStyle, styleRules);
       const op = drawn.attrs.opacity !== void 0 ? parseFloat(drawn.attrs.opacity) : void 0;
       if (op !== void 0 && Number.isFinite(op) && op < 1) node.opacity = op;
       const blend = vectorBlendModeFromCss(ds.mixBlendMode);
@@ -9384,7 +9455,7 @@ function parseVectorSvg(svg, options = {}) {
     resolving.add(id);
     const isClip = el.name === "clipPath";
     const content = isClip ? clipRulesAsFillRules(el) : el;
-    const inner = visit2(content, readStyle(content, rootStyle), multiplyMatrices(parseSvgTransform(el.attrs.transform), space));
+    const inner = visit2(content, readStyle(content, rootStyle, styleRules), multiplyMatrices(parseSvgTransform(el.attrs.transform), space));
     resolving.delete(id);
     const strip2 = (n) => n.type !== "group" ? withVectorStrokes(withVectorFills({ ...n, fill: null, stroke: null }, []), []) : { ...n, children: n.children.map(strip2) };
     const list = isClip ? inner.map(strip2) : inner;
@@ -9394,12 +9465,12 @@ function parseVectorSvg(svg, options = {}) {
   const masked = (el, nodes2, m) => {
     let out = nodes2;
     const clipEl = rawMasks.get(_nullishCoalesce(urlId(attrOrStyle(el, "clip-path")), () => ( "")));
-    if (_optionalChain([clipEl, 'optionalAccess', _276 => _276.name]) === "clipPath") {
+    if (_optionalChain([clipEl, 'optionalAccess', _277 => _277.name]) === "clipPath") {
       const source = maskNode(clipEl, m, out, clipEl.attrs.clipPathUnits);
       if (source) out = [{ id: idFor({ name: "g", attrs: {}, children: [] }), type: "group", name: "Clip Group", mask: { type: "clip" }, children: [source, ...out] }];
     }
     const maskEl = rawMasks.get(_nullishCoalesce(urlId(attrOrStyle(el, "mask")), () => ( "")));
-    if (_optionalChain([maskEl, 'optionalAccess', _277 => _277.name]) === "mask") {
+    if (_optionalChain([maskEl, 'optionalAccess', _278 => _278.name]) === "mask") {
       const source = maskNode(maskEl, m, out, maskEl.attrs.maskContentUnits);
       const type = attrOrStyle(maskEl, "mask-type") === "alpha" ? "alpha" : "luminance";
       if (source) out = [{ id: idFor({ name: "g", attrs: {}, children: [] }), type: "group", name: "Opacity Mask", mask: { type }, children: [source, ...out] }];
@@ -9421,19 +9492,19 @@ function parseVectorSvg(svg, options = {}) {
     let sourceEl = part("mask-source");
     if (!sourceEl) {
       const el = rawMasks.get(_nullishCoalesce(urlId(maskedEl.attrs.mask), () => ( "")));
-      const invert2 = _optionalChain([el, 'optionalAccess', _278 => _278.children, 'access', _279 => _279.find, 'call', _280 => _280((c) => c.name === "g" && c.attrs["data-vector-part"] === "mask-invert")]);
+      const invert2 = _optionalChain([el, 'optionalAccess', _279 => _279.children, 'access', _280 => _280.find, 'call', _281 => _281((c) => c.name === "g" && c.attrs["data-vector-part"] === "mask-invert")]);
       sourceEl = _nullishCoalesce(invert2, () => ( el));
     }
     const source = sourceEl ? visit2(sourceEl, style, m)[0] : void 0;
     let contents = visit2(maskedEl, style, m);
     let effects;
     const wrapper = contents.length === 1 && contents[0].type === "group" && contents[0].id === `${id}~content` ? contents[0] : null;
-    if (_optionalChain([wrapper, 'optionalAccess', _281 => _281.type]) === "group") {
+    if (_optionalChain([wrapper, 'optionalAccess', _282 => _282.type]) === "group") {
       effects = _nullishCoalesce(wrapper.effects, () => ( void 0));
       contents = wrapper.children;
     }
     if (!source) return contents.length ? { id, type: "group", ...meta, children: contents } : null;
-    return { id, type: "group", ...meta, mask, ..._optionalChain([effects, 'optionalAccess', _282 => _282.length]) ? { effects } : {}, children: [source, ...contents] };
+    return { id, type: "group", ...meta, mask, ..._optionalChain([effects, 'optionalAccess', _283 => _283.length]) ? { effects } : {}, children: [source, ...contents] };
   };
   const frameGroup = (g, style, m, meta) => {
     const raw = parseJson(g.attrs["data-vector-frame"]);
@@ -9445,7 +9516,7 @@ function parseVectorSvg(svg, options = {}) {
     const { rigid, residual } = decomposeRigid(m);
     const r = _chunkGF2RBSDMcjs.bezierPathBounds.call(void 0, _chunkGF2RBSDMcjs.transformBezierPath.call(void 0, subpathsToBezier(vectorFrameRectPath(frame)), residual));
     const back = invertMatrix(rigid);
-    const effects = sanitizeVectorEffects(_optionalChain([raw, 'optionalAccess', _283 => _283.effects]));
+    const effects = sanitizeVectorEffects(_optionalChain([raw, 'optionalAccess', _284 => _284.effects]));
     return {
       id,
       type: "group",
@@ -9460,7 +9531,7 @@ function parseVectorSvg(svg, options = {}) {
   const visitOne = (child, style, matrix) => {
     const out = [];
     const m = multiplyMatrices(parseSvgTransform(child.attrs.transform), matrix);
-    const s = readStyle(child, style);
+    const s = readStyle(child, style, styleRules);
     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);
@@ -9561,7 +9632,7 @@ function parseVectorSvg(svg, options = {}) {
     out.push(node);
     return out;
   };
-  rootStyle = readStyle(root, rootStyle);
+  rootStyle = readStyle(root, rootStyle, styleRules);
   const walkAll = (el) => {
     if (el.name === "symbol" && el.attrs["data-vector-symbol"] !== void 0) symbolFor(el);
     el.children.forEach(walkAll);
@@ -9917,13 +9988,13 @@ function hitTestVectorNode(node, p, tolerance = 0, parent = IDENTITY_MATRIX, opt
   }
   if (isVectorMaskGroup(node)) {
     const m = multiplyMatrices(nodeMatrix(node), parent);
-    const entered = !!_optionalChain([options, 'access', _284 => _284.entered, 'optionalAccess', _285 => _285.has, 'call', _286 => _286(node.id)]);
+    const entered = !!_optionalChain([options, 'access', _285 => _285.entered, 'optionalAccess', _286 => _286.has, 'call', _287 => _287(node.id)]);
     if (!entered && isVectorMaskActive(node) && !vectorMaskContains(node, applyMatrix(invertMatrix(m), p), tolerance)) return false;
     const shown = !entered && hasOwnVectorAppearance(node) ? expandVectorAppearance(node).children : node.children;
     for (let i = shown.length - 1; i >= 1; i--) if (hitTestVectorNode(shown[i], p, tolerance, m, options)) return true;
     return entered && hitTestVectorMaskSource(node, p, tolerance, m, options);
   }
-  if (!(node.type === "group" && (!hasOwnVectorAppearance(node) || _optionalChain([options, 'access', _287 => _287.entered, 'optionalAccess', _288 => _288.has, 'call', _289 => _289(node.id)])))) node = expandVectorAppearance(node);
+  if (!(node.type === "group" && (!hasOwnVectorAppearance(node) || _optionalChain([options, 'access', _288 => _288.entered, 'optionalAccess', _289 => _289.has, 'call', _290 => _290(node.id)])))) node = expandVectorAppearance(node);
   if (node.type === "group") {
     const m = multiplyMatrices(nodeMatrix(node), parent);
     return node.children.some((c) => hitTestVectorNode(c, p, tolerance, m, options));
@@ -9935,7 +10006,7 @@ function hitTestVectorNode(node, p, tolerance = 0, parent = IDENTITY_MATRIX, opt
 function hitTestVectorMaskSource(group, p, tolerance, m, options) {
   const source = group.children[0];
   if (source.visible === false) return false;
-  if (_optionalChain([group, 'access', _290 => _290.mask, 'optionalAccess', _291 => _291.type]) !== "clip") return hitTestVectorNode(source, p, tolerance, m, options);
+  if (_optionalChain([group, 'access', _291 => _291.mask, 'optionalAccess', _292 => _292.type]) !== "clip") return hitTestVectorNode(source, p, tolerance, m, options);
   const paths = collectPathNodes(source).filter((n) => n.visible !== false);
   const pt2 = [p.x, p.y];
   return paths.some((n) => {
@@ -9984,24 +10055,24 @@ function mapAnchor(a, m) {
 }
 function bakeIntoGeometry(node, m) {
   if (isIdentityMatrix(m)) return node;
-  if (_optionalChain([node, 'access', _292 => _292.effects, 'optionalAccess', _293 => _293.length])) node = { ...node, effects: transformVectorEffects(node.effects, m, node) };
+  if (_optionalChain([node, 'access', _293 => _293.effects, 'optionalAccess', _294 => _294.length])) node = { ...node, effects: transformVectorEffects(node.effects, m, node) };
   if (isVectorFrame(node)) return bakeFrame(node, m);
   if (node.type === "group") {
     const group = node;
     const children = group.children.map((c) => transformVectorNode(c, m));
     const sym2 = group.symmetry ? { symmetry: transformVectorSymmetry(group.symmetry, m) } : {};
-    const spine = _optionalChain([group, 'access', _294 => _294.blend, 'optionalAccess', _295 => _295.spine]);
+    const spine = _optionalChain([group, 'access', _295 => _295.blend, 'optionalAccess', _296 => _296.spine]);
     if (!spine) return { ...group, ...sym2, children };
     const moved = { closed: spine.closed, anchors: spine.anchors.map((a) => mapAnchor(a, m)) };
     return { ...group, children, blend: { ...group.blend, spine: moved } };
   }
   const path = node.type === "text" ? bakeVectorTextGeometry(node, m) : node;
   const flips = m[0] * m[3] - m[1] * m[2] < 0;
-  const mirrored = flips && _optionalChain([path, 'access', _296 => _296.strokeWidthProfile, 'optionalAccess', _297 => _297.length]);
+  const mirrored = flips && _optionalChain([path, 'access', _297 => _297.strokeWidthProfile, 'optionalAccess', _298 => _298.length]);
   const layer = (l) => ({
     ...l,
     ...isVectorGradient(l.paint) || isVectorShadedPaint(l.paint) ? { paint: transformVectorPaint(l.paint, m) } : {},
-    ...flips && _optionalChain([l, 'access', _298 => _298.strokeWidthProfile, 'optionalAccess', _299 => _299.length]) ? { strokeWidthProfile: mirrorWidthProfile(l.strokeWidthProfile) } : {}
+    ...flips && _optionalChain([l, 'access', _299 => _299.strokeWidthProfile, 'optionalAccess', _300 => _300.length]) ? { strokeWidthProfile: mirrorWidthProfile(l.strokeWidthProfile) } : {}
   });
   return {
     ...path,
@@ -10236,7 +10307,7 @@ function roundSubpaths(subpaths, precision = 3) {
 
 // src/vector/symmetry.ts
 function isVectorSymmetryGroup(node) {
-  return _optionalChain([node, 'optionalAccess', _300 => _300.type]) === "group" && !!node.symmetry && !node.blend && !node.liveBoolean && !node.mask && !node.frame;
+  return _optionalChain([node, 'optionalAccess', _301 => _301.type]) === "group" && !!node.symmetry && !node.blend && !node.liveBoolean && !node.mask && !node.frame;
 }
 var rad = (deg) => deg * Math.PI / 180;
 var exact = (v2) => Math.abs(v2) < 1e-12 ? 0 : v2;