@pixerate/editor 0.140.3 → 0.141.0

package/dist/chunk-6SFREX6H.cjs

@@ -0,0 +1,406 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class;
+
+
+var _chunkUJGAA6AKcjs = require('./chunk-UJGAA6AK.cjs');
+
+// src/tools/playback.ts
+var ARG_KINDS = {
+  nodeId: "node",
+  edgeId: "edge",
+  layerId: "layer",
+  clipId: "clip",
+  trackId: "track",
+  seriesId: "series",
+  parameterId: "parameter",
+  keyframeId: "keyframe",
+  shapeId: "shape"
+};
+function pushRef(out, kind, id) {
+  if (typeof id !== "string" || !id) return;
+  if (!out.some((r) => r.kind === kind && r.id === id)) out.push({ kind, id });
+}
+function playbackRefsFromArgs(args, defaultKind = "item") {
+  const out = [];
+  const visit = (value, depth) => {
+    if (!value || typeof value !== "object" || Array.isArray(value) || depth > 1) return;
+    const record = value;
+    pushRef(out, defaultKind, record.id);
+    if (Array.isArray(record.ids)) for (const id of record.ids) pushRef(out, defaultKind, id);
+    for (const [key, kind] of Object.entries(ARG_KINDS)) {
+      pushRef(out, kind, record[key]);
+      const many = record[`${key}s`];
+      if (Array.isArray(many)) for (const id of many) pushRef(out, kind, id);
+    }
+    pushRef(out, "cell", record.range);
+    pushRef(out, "cell", record.cell);
+    visit(record.params, depth + 1);
+  };
+  visit(args, 0);
+  return out;
+}
+function playbackRefsFromResult(value, defaultKind = "item") {
+  const out = [];
+  const visit = (v, depth) => {
+    if (!v || typeof v !== "object" || depth > 2) return;
+    if (Array.isArray(v)) {
+      for (const item of v) if (item && typeof item === "object") pushRef(out, defaultKind, item.id);
+      return;
+    }
+    const record = v;
+    if (Array.isArray(record.content) && record.structuredContent) return visit(record.structuredContent, depth);
+    pushRef(out, defaultKind, record.id);
+    if (Array.isArray(record.ids)) for (const id of record.ids) pushRef(out, defaultKind, id);
+    if (record.node && typeof record.node === "object") pushRef(out, "node", record.node.id);
+    pushRef(out, "layer", record.layerId);
+    if (record.layer && typeof record.layer === "object") pushRef(out, "layer", record.layer.id);
+    const created = record.created;
+    if (Array.isArray(created)) visit(created, depth + 1);
+    else if (created && typeof created === "object") {
+      const c = created;
+      for (const n of _nullishCoalesce(c.nodes, () => ( []))) pushRef(out, "node", _optionalChain([n, 'optionalAccess', _ => _.id]));
+      for (const e of _nullishCoalesce(c.edges, () => ( []))) pushRef(out, "edge", _optionalChain([e, 'optionalAccess', _2 => _2.id]));
+    }
+    if (record.result && typeof record.result === "object") visit(record.result, depth + 1);
+  };
+  visit(value, 0);
+  return out;
+}
+function derivePlaybackSteps(args, defaultKind) {
+  const refs = playbackRefsFromArgs(args, defaultKind).slice(0, 8);
+  if (!refs.length) return [{ type: "commit" }];
+  return [...refs.map((ref) => ({ type: "target", ref })), { type: "press" }, { type: "release" }, { type: "commit" }];
+}
+function readingTime(text) {
+  return Math.min(2200, Math.max(600, text.length * 65));
+}
+function unionRects(rects) {
+  const list = rects.filter((r) => !!r);
+  if (!list.length) return null;
+  const x = Math.min(...list.map((r) => r.x));
+  const y = Math.min(...list.map((r) => r.y));
+  return { x, y, width: Math.max(...list.map((r) => r.x + r.width)) - x, height: Math.max(...list.map((r) => r.y + r.height)) - y };
+}
+function normalizePlan(plan) {
+  if (!plan) return null;
+  if (Array.isArray(plan)) return plan.length ? { steps: plan } : null;
+  return _optionalChain([plan, 'access', _3 => _3.steps, 'optionalAccess', _4 => _4.length]) || plan.surface || plan.readOnly !== void 0 ? plan : null;
+}
+var isErrorResult = (value) => !!value && typeof value === "object" && value.isError === true;
+var center = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
+var GLANCE_STEPS = /* @__PURE__ */ new Set(["move", "target", "focus", "say", "wait", "commit"]);
+var AgentPlayback = (_class = class {
+  /** 1 = natural pace; `Infinity` plays nothing (calls run instantly). Takes effect on the next step. */
+  
+  
+  
+  
+  
+  __init() {this.surfaces = /* @__PURE__ */ new Map()}
+  __init2() {this.actors = /* @__PURE__ */ new Map()}
+  __init3() {this.recordings = /* @__PURE__ */ new Set()}
+  __init4() {this.installed = /* @__PURE__ */ new WeakSet()}
+  __init5() {this.listeners = /* @__PURE__ */ new Set()}
+  __init6() {this.generation = 0}
+  __init7() {this.running = 0}
+  __init8() {this.calls = 0}
+  constructor(options = {}) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);_class.prototype.__init7.call(this);_class.prototype.__init8.call(this);_class.prototype.__init9.call(this);
+    this.clock = _nullishCoalesce(options.clock, () => ( _chunkUJGAA6AKcjs.realPresenceClock));
+    this.speed = _nullishCoalesce(options.speed, () => ( 1));
+    this.reads = _nullishCoalesce(options.reads, () => ( "glance"));
+    this.linger = _nullishCoalesce(options.linger, () => ( 1500));
+    this.defaultActor = _nullishCoalesce(options.actor, () => ( { id: "agent", name: "Agent" }));
+  }
+  /** The registry middleware that plays each call. */
+  __init9() {this.middleware = (call, next) => this.perform(call, next)}
+  /** Adds the middleware to `registry` once (later calls with the same registry do nothing). */
+  install(registry) {
+    if (this.installed.has(registry)) return;
+    this.installed.add(registry);
+    registry.use(this.middleware);
+  }
+  /** Whether a performance is playing now (e.g. to make the editor read-only meanwhile). */
+  get active() {
+    return this.running > 0;
+  }
+  /** Called when `active` changes. Returns an unsubscribe function. */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  /** Attaches a surface under a provider id (or the id providers name as `playbackSurface`). */
+  attach(id, surface) {
+    this.surfaces.set(id, surface);
+    return () => {
+      if (this.surfaces.get(id) !== surface) return;
+      this.surfaces.delete(id);
+      for (const actor of this.actors.values()) if (actor.surface === id) actor.surface = void 0;
+    };
+  }
+  /** The surface attached under `id`. */
+  surface(id) {
+    return this.surfaces.get(id);
+  }
+  /** Shows `text` in the actor's bubble on the surface it last worked on (until its next step). */
+  say(text, options = {}) {
+    const actor = this.actorState(options.actor);
+    const surface = actor.surface ? this.surfaces.get(actor.surface) : void 0;
+    if (_optionalChain([surface, 'optionalAccess', _5 => _5.presence, 'access', _6 => _6.get, 'call', _7 => _7(actor.info.id)])) surface.presence.set({ id: actor.info.id, message: text });
+  }
+  /** Finishes every running performance at once (the calls still run and keep their results). */
+  stop() {
+    this.generation++;
+  }
+  /** Collects every step played from now on (for tests). */
+  record() {
+    const list = [];
+    this.recordings.add(list);
+    return list;
+  }
+  actorState(info) {
+    const base = _nullishCoalesce(info, () => ( this.defaultActor));
+    let actor = this.actors.get(base.id);
+    if (!actor) {
+      actor = { info: { ...base, color: _nullishCoalesce(base.color, () => ( _chunkUJGAA6AKcjs.PRESENCE_COLORS[this.actors.size % _chunkUJGAA6AKcjs.PRESENCE_COLORS.length])) }, queue: Promise.resolve(), version: 0 };
+      this.actors.set(base.id, actor);
+    } else if (_optionalChain([info, 'optionalAccess', _8 => _8.name]) && info.name !== actor.info.name) actor.info = { ...actor.info, name: info.name };
+    return actor;
+  }
+  enqueue(actor, run) {
+    const result = actor.queue.then(run);
+    actor.queue = result.catch(() => void 0);
+    return result;
+  }
+  surfaceFor(provider, hint) {
+    for (const id of [hint, provider.playbackSurface, provider.id, provider.namespace]) {
+      const surface = id ? this.surfaces.get(id) : void 0;
+      if (id && surface) return [id, surface];
+    }
+    return null;
+  }
+  async perform(call, next) {
+    const tool = call.tool;
+    if (tool.playback === false || !Number.isFinite(this.speed)) return next();
+    const actor = this.actorState(call.context.actor);
+    if (tool.playback === "self") return this.enqueue(actor, next);
+    const fallback = this.surfaceFor(call.provider);
+    let planned = null;
+    if (tool.plan) {
+      try {
+        const state = {
+          surfaceId: _nullishCoalesce(_optionalChain([fallback, 'optionalAccess', _9 => _9[0]]), () => ( null)),
+          locate: (ref) => _nullishCoalesce(_optionalChain([fallback, 'optionalAccess', _10 => _10[1], 'access', _11 => _11.locate, 'optionalCall', _12 => _12(ref)]), () => ( null))
+        };
+        planned = normalizePlan(tool.plan(call.args, state));
+      } catch (e2) {
+        planned = null;
+      }
+    }
+    const readOnly = _nullishCoalesce(_optionalChain([planned, 'optionalAccess', _13 => _13.readOnly]), () => ( _optionalChain([tool, 'access', _14 => _14.annotations, 'optionalAccess', _15 => _15.readOnlyHint]) === true));
+    if (readOnly && this.reads === "skip") return next();
+    const found = this.surfaceFor(call.provider, _optionalChain([planned, 'optionalAccess', _16 => _16.surface]));
+    if (!found) return next();
+    const [surfaceId, surface] = found;
+    const steps = _optionalChain([planned, 'optionalAccess', _17 => _17.steps, 'optionalAccess', _18 => _18.length]) ? planned.steps : derivePlaybackSteps(call.args, surface.defaultKind);
+    const glance = readOnly && this.reads === "glance";
+    const played = glance ? steps.filter((s) => GLANCE_STEPS.has(s.type)) : steps;
+    if (!played.some((s) => s.type !== "commit")) return next();
+    return this.enqueue(actor, async () => {
+      if (surface.visible && !surface.visible()) {
+        await _optionalChain([surface, 'access', _19 => _19.reveal, 'optionalCall', _20 => _20()]);
+        if (surface.visible && !surface.visible()) return next();
+      }
+      return this.play({ call, next, actor, surfaceId, surface, steps: played, readOnly, glance });
+    });
+  }
+  async play(run) {
+    const { call, next, actor, surfaceId, surface, readOnly } = run;
+    const id = actor.info.id;
+    const gen = this.generation;
+    const instant = () => gen !== this.generation || !Number.isFinite(this.speed);
+    const pace = () => Math.max(0.1, this.speed) * (run.glance ? 1.6 : 1);
+    const wait = (ms) => instant() || ms <= 0 ? Promise.resolve() : this.clock.wait(ms / pace());
+    const presence = surface.presence;
+    const locate = (ref) => _nullishCoalesce(_optionalChain([surface, 'access', _21 => _21.locate, 'optionalCall', _22 => _22(ref.kind === "item" ? { kind: _nullishCoalesce(surface.defaultKind, () => ( "item")), id: ref.id } : ref)]), () => ( null));
+    const record = (step) => {
+      for (const list of this.recordings) list.push({ actor: id, surface: surfaceId, tool: call.name, step });
+    };
+    this.running++;
+    if (this.running === 1) this.listeners.forEach((l) => l());
+    try {
+      if (actor.surface && actor.surface !== surfaceId) _optionalChain([this, 'access', _23 => _23.surfaces, 'access', _24 => _24.get, 'call', _25 => _25(actor.surface), 'optionalAccess', _26 => _26.presence, 'access', _27 => _27.remove, 'call', _28 => _28(id)]);
+      if (!presence.get(id)) {
+        const bounds = _nullishCoalesce(_optionalChain([surface, 'access', _29 => _29.bounds, 'optionalCall', _30 => _30()]), () => ( null));
+        let at = actor.viewport && surface.fromViewport ? surface.fromViewport(actor.viewport) : null;
+        if (at && bounds) at = { x: Math.min(bounds.x + bounds.width, Math.max(bounds.x, at.x)), y: Math.min(bounds.y + bounds.height, Math.max(bounds.y, at.y)) };
+        at ??= bounds ? { x: bounds.x + bounds.width - 48, y: bounds.y + 32 } : null;
+        if (!at) {
+          const first = run.steps.find((s) => s.type === "move" || s.type === "target" || s.type === "drag");
+          const rect = _optionalChain([first, 'optionalAccess', _31 => _31.type]) === "target" ? locate(first.ref) : null;
+          at = first && first.type !== "target" ? first.to : rect ? center(rect) : { x: 0, y: 0 };
+        }
+        presence.set({ id, name: _nullishCoalesce(actor.info.name, () => ( id)), color: actor.info.color, x: at.x, y: at.y, pressed: false });
+      } else presence.set({ id, name: _nullishCoalesce(actor.info.name, () => ( id)), color: actor.info.color });
+      actor.surface = surfaceId;
+      actor.version++;
+      const argRefs = playbackRefsFromArgs(call.args, surface.defaultKind);
+      if (!readOnly) _optionalChain([surface, 'access', _32 => _32.beginGesture, 'optionalCall', _33 => _33(`agent:${id}:${++this.calls}`)]);
+      let result;
+      let committed = false;
+      try {
+        for (const step of run.steps) {
+          record(step);
+          if (step.type === "commit") {
+            if (committed) continue;
+            committed = true;
+            result = await next();
+            continue;
+          }
+          if (step.type === "open") {
+            if (!surface.open) continue;
+            const rect = locate(step.ref);
+            if (rect) {
+              await this.glide(presence, id, { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }, step.ms, instant);
+              presence.set({ id, pressed: true });
+              await wait(90);
+            }
+            await surface.open(step.ref);
+            presence.set({ id, pressed: false });
+            await wait(220);
+            continue;
+          }
+          await this.step(presence, locate, id, step, wait, instant);
+        }
+        if (!committed) {
+          record({ type: "commit" });
+          result = await next();
+        }
+      } catch (error) {
+        presence.set({ id, pressed: false, message: `\u2717 ${error instanceof Error ? error.message : String(error)}`.slice(0, 140) });
+        await wait(900);
+        throw error;
+      } finally {
+        if (!readOnly) _optionalChain([surface, 'access', _34 => _34.endGesture, 'optionalCall', _35 => _35()]);
+        presence.set({ id, pressed: false });
+      }
+      if (isErrorResult(result)) {
+        const text = _nullishCoalesce(_optionalChain([result, 'access', _36 => _36.content, 'optionalAccess', _37 => _37.find, 'call', _38 => _38((c) => c.type === "text"), 'optionalAccess', _39 => _39.text]), () => ( "The tool failed."));
+        presence.set({ id, message: `\u2717 ${text}`.slice(0, 140) });
+        await wait(900);
+      } else if (!readOnly) {
+        const known = new Set(argRefs.map((r) => `${r.kind}:${r.id}`));
+        const fresh = playbackRefsFromResult(result, surface.defaultKind).filter((r) => !known.has(`${r.kind}:${r.id}`));
+        const rect = unionRects(fresh.slice(0, 16).map(locate));
+        if (rect) {
+          const step = { type: "focus", rect };
+          record(step);
+          presence.set({ id, focus: rect });
+          await wait(450);
+        }
+      }
+      presence.set({ id, message: void 0, focus: void 0 });
+      const here = presence.get(id);
+      if (here && surface.toViewport) actor.viewport = surface.toViewport({ x: here.x, y: here.y });
+      this.scheduleLinger(actor, surface);
+      return result;
+    } finally {
+      this.running--;
+      if (this.running === 0) this.listeners.forEach((l) => l());
+    }
+  }
+  scheduleLinger(actor, surface) {
+    if (this.linger <= 0) return;
+    const version = actor.version;
+    void this.clock.wait(this.linger).then(() => {
+      if (actor.version !== version) return;
+      surface.presence.remove(actor.info.id);
+      for (const [sid, s] of this.surfaces) if (s === surface && actor.surface === sid) actor.surface = void 0;
+    });
+  }
+  async step(presence, locate, id, step, wait, instant) {
+    switch (step.type) {
+      case "move":
+        return this.glide(presence, id, step.to, step.ms, instant);
+      case "drag":
+        presence.set({ id, pressed: true });
+        return this.glide(presence, id, step.to, step.ms, instant);
+      case "target": {
+        const rect = locate(step.ref);
+        if (!rect) return;
+        await this.glide(presence, id, center(rect), step.ms, instant);
+        presence.set({ id, focus: rect });
+        return;
+      }
+      case "focus":
+        presence.set({ id, focus: _nullishCoalesce(step.rect, () => ( void 0)) });
+        return;
+      case "say":
+        presence.set({ id, message: step.text });
+        return wait(_nullishCoalesce(step.ms, () => ( readingTime(step.text))));
+      case "press":
+        presence.set({ id, pressed: true });
+        return wait(90);
+      case "release":
+        presence.set({ id, pressed: false });
+        return wait(60);
+      case "type": {
+        const total = _nullishCoalesce(step.ms, () => ( Math.min(900, 40 * step.text.length + 150)));
+        if (instant() || total <= 0) {
+          presence.set({ id, message: step.text });
+          return;
+        }
+        const start = this.clock.now();
+        for (; ; ) {
+          const t = Math.min(1, (this.clock.now() - start) / (total / Math.max(0.1, this.speed)));
+          presence.set({ id, message: step.text.slice(0, Math.max(1, Math.round(step.text.length * t))) });
+          if (t >= 1 || instant()) break;
+          await this.clock.wait(16);
+        }
+        presence.set({ id, message: step.text });
+        return;
+      }
+      case "wait":
+        return wait(step.ms);
+    }
+  }
+  /** Glides along a slight arc with ease-out, by elapsed time (fewer frames in a throttled tab, never longer). */
+  async glide(presence, id, to, ms, instant) {
+    const a = presence.get(id);
+    const from = a ? { x: a.x, y: a.y } : to;
+    const dist = Math.hypot(to.x - from.x, to.y - from.y);
+    const duration = (_nullishCoalesce(ms, () => ( Math.min(900, 260 + dist * 0.5)))) / Math.max(0.1, this.speed);
+    if (instant() || dist < 1 || duration <= 0) {
+      presence.set({ id, x: to.x, y: to.y });
+      return;
+    }
+    const bend = Math.min(60, dist * 0.12);
+    const ctrl = { x: (from.x + to.x) / 2 - (to.y - from.y) / dist * bend, y: (from.y + to.y) / 2 + (to.x - from.x) / dist * bend };
+    const start = this.clock.now();
+    for (; ; ) {
+      const t = Math.min(1, (this.clock.now() - start) / duration);
+      const e = 1 - Math.pow(1 - t, 3);
+      const u = 1 - e;
+      presence.set({ id, x: u * u * from.x + 2 * u * e * ctrl.x + e * e * to.x, y: u * u * from.y + 2 * u * e * ctrl.y + e * e * to.y });
+      if (t >= 1) break;
+      if (instant()) {
+        presence.set({ id, x: to.x, y: to.y });
+        break;
+      }
+      await this.clock.wait(16);
+    }
+  }
+}, _class);
+function createAgentPlayback(options = {}) {
+  return new AgentPlayback(options);
+}
+
+
+
+
+
+
+
+
+
+exports.playbackRefsFromArgs = playbackRefsFromArgs; exports.playbackRefsFromResult = playbackRefsFromResult; exports.derivePlaybackSteps = derivePlaybackSteps; exports.readingTime = readingTime; exports.unionRects = unionRects; exports.AgentPlayback = AgentPlayback; exports.createAgentPlayback = createAgentPlayback;

package/dist/{chunk-XGOU44RJ.js → chunk-77SG47WT.js}

@@ -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 = (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 = (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 = (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 (cssRules?.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 (el.attrs.style ?? "").split(";")) {
     const i = decl.indexOf(":");
     if (i < 0) continue;
@@ -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();
@@ -9137,7 +9208,7 @@ function parseVectorSvg(svg, options = {}) {
     const subpaths = fillEl ? shapeOf(fillEl) : null;
     if (!fillEl || !subpaths?.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,
@@ -9309,7 +9380,7 @@ function parseVectorSvg(svg, options = {}) {
     let id = typeof own?.id === "string" && own.id ? own.id : 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 own?.name === "string" && own.name ? own.name : el.attrs.id ?? "Symbol", nodes: nodes2 });
     symbolOfElement.set(el, id);
@@ -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;
@@ -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);

package/dist/{chunk-2SHFIVC3.js → chunk-DAS7M4RY.js}

@@ -18,7 +18,7 @@ import {
   unionBounds,
   vectorGradientPoints,
   widthProfileAt
-} from "./chunk-XGOU44RJ.js";
+} from "./chunk-77SG47WT.js";
 import {
   segmentLength,
   segmentParamAtLength,