@pixerate/editor 0.99.0 → 0.101.0

package/dist/vector/index.js

@@ -14,12 +14,19 @@ import {
 import {
   KAPPA,
   VECTOR_ARROWHEADS,
+  VECTOR_BLEND_MODES,
+  VECTOR_BLEND_MODE_LABELS,
   VECTOR_BLEND_SPACINGS,
   VECTOR_CORNER_KINDS,
   VECTOR_EFFECT_DEFAULTS,
   VECTOR_EFFECT_LABELS,
   VECTOR_EFFECT_PARAM_SPECS,
   VECTOR_EFFECT_TYPES,
+  VECTOR_FILTER_DEFAULTS,
+  VECTOR_FILTER_LABELS,
+  VECTOR_FILTER_MENU,
+  VECTOR_FILTER_PARAM_SPECS,
+  VECTOR_FILTER_TYPES,
   VECTOR_GRADIENT_INTERPOLATIONS,
   VECTOR_GRADIENT_MAX_PERIODS,
   VECTOR_GRADIENT_MIN_STOPS,
@@ -29,6 +36,7 @@ import {
   VECTOR_PATHFINDER_OPERATIONS,
   VECTOR_PRESSURE_NOMINAL,
   VECTOR_STROKE_GRADIENT_MODES,
+  VECTOR_STROKE_SETTING_KEYS,
   VECTOR_TOOLS,
   VECTOR_TRANSFORM_HANDLES,
   VECTOR_WIDTH_PRESETS,
@@ -37,6 +45,7 @@ import {
   VECTOR_WIDTH_PROFILE_MAX_SCALE,
   VECTOR_WIDTH_SAME_T,
   activeVectorEffects,
+  activeVectorFilters,
   applyVectorCornersAttribute,
   applyVectorEffects,
   applyVectorGradientPatch,
@@ -60,6 +69,7 @@ import {
   cornerSetback,
   correspondMorphContours,
   createVectorEffect,
+  createVectorFilter,
   createVectorMorph,
   dashIntervals,
   defaultVectorGradient,
@@ -86,8 +96,11 @@ import {
   hasStrokeExtras,
   hasVectorAppearance,
   hasVectorCorners,
+  hasVectorPaintStacks,
   hitTestVectorNode,
   hitTestVectorNodes,
+  hitTestVectorPaintLayer,
+  hitTestVectorPaintStack,
   hitTestVectorStroke,
   inferAnchorType,
   insertAnchor,
@@ -102,7 +115,11 @@ import {
   interpolateWidthProfiles,
   isCentredVectorGradient,
   isClosedBezierShape,
+  isDrawnVectorPaintLayer,
+  isPlainVectorPaintLayer,
   isUniformWidthProfile,
+  isVectorBlendMode,
+  isVectorFilterType,
   isVectorGradient,
   isVectorLiveBoolean,
   lineSubpath,
@@ -121,9 +138,13 @@ import {
   moveVectorGradientStop,
   nearestSegment,
   nearestStrokePosition,
+  needsVectorPaintLayers,
+  newVectorStrokeLayer,
   nextVectorCornerKind,
   nodeMatrix,
   normalizeVectorEffectParams,
+  normalizeVectorFilterParams,
+  normalizeVectorPaintStacks,
   offsetPaths,
   parseSvgTransform,
   parseVectorColor,
@@ -153,7 +174,11 @@ import {
   sampleVectorGradientAt,
   sampleVectorPaintDefAt,
   sanitizeVectorEffects,
+  sanitizeVectorFills,
+  sanitizeVectorFilters,
   sanitizeVectorGradient,
+  sanitizeVectorStrokeSettings,
+  sanitizeVectorStrokes,
   sanitizeWidthProfile,
   setAnchorCorner,
   setSubpathCorners,
@@ -185,6 +210,8 @@ import {
   vectorAppearanceNodes,
   vectorAppearanceOutline,
   vectorAppearanceShapes,
+  vectorBlendModeCss,
+  vectorBlendModeFromCss,
   vectorBoxMatrix,
   vectorCornerAt,
   vectorCorners,
@@ -196,6 +223,11 @@ import {
   vectorEnvelopeFrame,
   vectorEnvelopeMap,
   vectorEnvelopeMesh,
+  vectorFills,
+  vectorFilterMarkup,
+  vectorFilterParamKeys,
+  vectorFilterReach,
+  vectorFilterSvg,
   vectorGradientArea,
   vectorGradientAspect,
   vectorGradientFocalParam,
@@ -215,22 +247,30 @@ import {
   vectorMeshOutline,
   vectorNodeBounds,
   vectorNodeEnvelope,
+  vectorNodeFilterSvg,
+  vectorNodeLocalPaintBounds,
   vectorNodeRotation,
   vectorNodeToBezier,
   vectorOperandOperation,
+  vectorPaintLayerNodes,
   vectorPaintToSvg,
   vectorParentMatrix,
   vectorPathData,
   vectorPathLocalBounds,
   vectorPathWorldBezier,
   vectorRepeaterCopies,
+  vectorStacksHaveGradient,
   vectorStrokeGradientDefs,
   vectorStrokeLineArea,
   vectorStrokeOutline,
   vectorStrokeOutlinePath,
   vectorStrokeParts,
   vectorStrokeReach,
+  vectorStrokeSettings,
+  vectorStrokeStackReach,
   vectorStrokeSvgParts,
+  vectorStrokes,
+  vectorTargetPaint,
   vectorWorldMatrix,
   walkVectorNodes,
   widthProfileAt,
@@ -240,8 +280,11 @@ import {
   widthProfilePresetId,
   widthProfileToAttribute,
   wigglePaths,
+  withVectorFills,
+  withVectorStrokes,
+  withVectorTargetPaint,
   zigzagPaths
-} from "../chunk-YGZNGDIT.js";
+} from "../chunk-63EFQCT5.js";
 import {
   bezierPathBounds,
   bezierPathToSvg,
@@ -322,19 +365,19 @@ var HANDLE_HIT = 6;
 var BAR_HIT = 5;
 var fmt = (n) => Math.round(n * 100) / 100;
 var apply = (m, p) => ({ x: m[0] * p.x + m[2] * p.y + m[4], y: m[1] * p.x + m[3] * p.y + m[5] });
-function vectorGradientTargetPath(doc, selection, target) {
+function vectorGradientTargetPath(doc, selection, target, layer = null) {
   for (const id of selection) {
     const node = findVectorNode(doc.nodes, id);
     if (!node) continue;
-    const path = collectPathNodes(node).find((p) => isVectorGradient(p[target]));
+    const path = collectPathNodes(node).find((p) => isVectorGradient(vectorTargetPaint(p, target, layer)));
     if (path) return path;
   }
   return null;
 }
-function getVectorGradientAnnotator(doc, selection, viewport, target) {
-  const path = vectorGradientTargetPath(doc, selection, target);
+function getVectorGradientAnnotator(doc, selection, viewport, target, layer = null) {
+  const path = vectorGradientTargetPath(doc, selection, target, layer);
   if (!path) return null;
-  const gradient = path[target];
+  const gradient = vectorTargetPaint(path, target, layer);
   const world = vectorWorldMatrix(doc.nodes, path.id) ?? IDENTITY_MATRIX;
   const screen = multiplyMatrices(world, [viewport.zoom, 0, 0, viewport.zoom, viewport.x, viewport.y]);
   const bounds = vectorPathLocalBounds(path);
@@ -2655,7 +2698,9 @@ var VECTOR_STYLE_KEYS = [
   "arrowAlign",
   "startArrowScale",
   "endArrowScale",
-  "strokeWidthProfile"
+  "strokeWidthProfile",
+  "fills",
+  "strokes"
 ];
 var VECTOR_CLIPBOARD_TYPE = "pixerate/vector";
 var DEFAULT_DEFAULTS = {
@@ -2975,6 +3020,24 @@ var VECTOR_PATHFINDER_LABELS = {
   outline: "Outline",
   minusBack: "Minus Back"
 };
+function normalizeVectorTree(nodes, prefer) {
+  let changed = false;
+  const out = nodes.map((n) => {
+    let next = n.type === "path" ? normalizeVectorPaintStacks(n, prefer) : n;
+    if (next.type === "group") {
+      const children = normalizeVectorTree(next.children, prefer);
+      if (children !== next.children) next = { ...next, children };
+    }
+    if (next !== n) changed = true;
+    return next;
+  });
+  return changed ? out : nodes;
+}
+function loadedDocument(doc) {
+  const copy = cloneVectorDocument(doc);
+  const nodes = normalizeVectorTree(copy.nodes, "stack");
+  return nodes === copy.nodes ? copy : { ...copy, nodes };
+}
 function mapTree(nodes, fn) {
   let changed = false;
   const out = [];
@@ -3054,7 +3117,7 @@ var VectorEditorController = class {
   blendStart = null;
   /** Options new blends get (the toolbars edit them along with the selected blend's). */
   blendDefaults = {};
-  gradientEdit = { target: "fill", stop: null };
+  gradientEdit = { target: "fill", stop: null, layer: null };
   freeDistort = false;
   /** What the highlight shows, to skip notifying when the pointer stays over the same face. */
   builderHoverKey = null;
@@ -3069,7 +3132,7 @@ var VectorEditorController = class {
   state;
   constructor(options = {}) {
     this.history = options.history ?? new HistoryManager();
-    this.doc = options.document ? cloneVectorDocument(options.document) : { width: 800, height: 600, nodes: [] };
+    this.doc = options.document ? loadedDocument(options.document) : { width: 800, height: 600, nodes: [] };
     this.doc = this.refreshed(this.doc);
     this.tool = options.tool ?? "select";
     this.defaults = { ...DEFAULT_DEFAULTS, ...options.defaults ?? {} };
@@ -3161,7 +3224,7 @@ var VectorEditorController = class {
   }
   /** `doc` with its blends' steps brought up to date (the same object when they already are). */
   refreshed(doc) {
-    const nodes = refreshVectorBlends(doc.nodes);
+    const nodes = refreshVectorBlends(normalizeVectorTree(doc.nodes, "shorthand"));
     return nodes === doc.nodes ? doc : { ...doc, nodes };
   }
   notify(docChanged = false) {
@@ -3480,7 +3543,7 @@ var VectorEditorController = class {
   /** Replaces the document. Undoable unless `{ history: false }` (then history is cleared). */
   setDocument(doc, options = {}) {
     this.cancelDrag();
-    const next = cloneVectorDocument(doc);
+    const next = loadedDocument(doc);
     if (options.history === false) {
       this.doc = next;
       this.selection = [];
@@ -3594,7 +3657,7 @@ var VectorEditorController = class {
     for (const key of VECTOR_STYLE_KEYS) {
       if (input[key] !== void 0) own[key] = input[key];
     }
-    return { id: this.newId(), type: "path", name: input.name ?? names[input.kind], ...style, ...own, subpaths: [subpath] };
+    return withStyle({ id: this.newId(), type: "path", name: input.name ?? names[input.kind], ...style, subpaths: [subpath] }, own);
   }
   /** Adds a shape drawn with the current defaults. Returns its id. */
   addShape(input, options = {}) {
@@ -3604,7 +3667,8 @@ var VectorEditorController = class {
   /** Adds a path from SVG path data. Returns its id. */
   addPath(d, style = {}, options = {}) {
     const subpaths = bezierToSubpaths(d);
-    const node = { id: this.newId(), type: "path", name: style.name ?? "Path", ...this.styleFor(false), ...style, subpaths };
+    const { name, ...own } = style;
+    const node = withStyle({ id: this.newId(), type: "path", name: name ?? "Path", ...this.styleFor(false), subpaths }, own);
     return this.addNode(node, { label: "Add Path", ...options });
   }
   styleFor(open) {
@@ -3617,7 +3681,10 @@ var VectorEditorController = class {
     if (d.strokeAlign && d.strokeAlign !== "center") out.strokeAlign = d.strokeAlign;
     for (const key of ["startArrow", "endArrow", "arrowAlign", "startArrowScale", "endArrowScale"]) if (d[key]) out[key] = d[key];
     if (d.strokeWidthProfile?.length) out.strokeWidthProfile = d.strokeWidthProfile.map((p) => ({ ...p }));
-    return out;
+    let styled = out;
+    if (Array.isArray(d.fills)) styled = withVectorFills(styled, open ? [] : d.fills);
+    if (Array.isArray(d.strokes)) styled = withVectorStrokes(styled, d.strokes);
+    return styled;
   }
   /** Merges `patch` into a node (paths take style and geometry; groups name / visibility / opacity). */
   updateNode(id, patch, options = {}) {
@@ -3666,9 +3733,9 @@ var VectorEditorController = class {
   // Gradients
   // -------------------------------------------------------------------------
   /** Which paint (fill or stroke) the gradient tool and editor work on. */
-  setGradientTarget(target) {
-    if (target === this.gradientEdit.target) return;
-    this.gradientEdit = { target, stop: null };
+  setGradientTarget(target, layer = null) {
+    if (target === this.gradientEdit.target && layer === this.gradientEdit.layer) return;
+    this.gradientEdit = { target, stop: null, layer };
     this.notify();
   }
   /** Selects a stop of the gradient being edited (index into its sorted stops), or none. */
@@ -3679,7 +3746,7 @@ var VectorEditorController = class {
   }
   /** The gradient tool's annotator for the selection (screen pixels), or null when its paint is not a gradient. */
   getGradientAnnotator() {
-    return getVectorGradientAnnotator(this.doc, this.selection, this.viewport, this.gradientEdit.target);
+    return getVectorGradientAnnotator(this.doc, this.selection, this.viewport, this.gradientEdit.target, this.gradientEdit.layer);
   }
   /** Unlocked paths of `ids` (default: the selection). */
   gradientPaths(ids = this.selection) {
@@ -3699,32 +3766,35 @@ var VectorEditorController = class {
    */
   setGradient(patch, options = {}) {
     const target = options.target ?? this.gradientEdit.target;
+    const layer = options.layer !== void 0 ? options.layer : options.target === void 0 ? this.gradientEdit.layer : null;
     const paths = this.gradientPaths(options.ids ?? this.selection);
     if (!paths.length) return { ok: false, message: "Nothing is selected." };
     const next = /* @__PURE__ */ new Map();
+    let first = null;
     for (const path of paths) {
-      const paint = path[target];
+      const paint = vectorTargetPaint(path, target, layer);
       const base = isVectorGradient(paint) ? paint : defaultVectorGradient(patch.type ?? "linear", paint);
       const g = applyVectorGradientPatch(base, patch);
       if (!g) return { ok: false, message: "That is not a valid gradient: it needs at least one stop with an offset and a colour." };
-      next.set(path.id, { ...path, [target]: g });
+      first ??= g;
+      next.set(path.id, withVectorTargetPaint(path, target, layer, g));
     }
     this.change(options.label ?? "Gradient", () => this.setDoc(mapTree(this.doc.nodes, (n) => next.get(n.id) ?? n)), options.merge);
-    const stops = next.values().next().value?.[target]?.stops.length ?? 0;
+    const stops = first?.stops.length ?? 0;
     if (this.gradientEdit.stop !== null && this.gradientEdit.stop >= stops) this.gradientEdit = { ...this.gradientEdit, stop: null };
     return { ok: true };
   }
   /** Applies `fn` to every target gradient of the selection (paths whose paint is not a gradient are skipped). */
   editGradients(label, fn, merge) {
-    const target = this.gradientEdit.target;
-    const paths = this.gradientPaths().filter((p) => isVectorGradient(p[target]));
+    const { target, layer } = this.gradientEdit;
+    const paths = this.gradientPaths().filter((p) => isVectorGradient(vectorTargetPaint(p, target, layer)));
     if (!paths.length) return { ok: false, message: "The selection has no gradient." };
     const next = /* @__PURE__ */ new Map();
     for (const path of paths) {
-      const g = path[target];
+      const g = vectorTargetPaint(path, target, layer);
       const stops = fn(sortedVectorGradientStops(g));
       if (!stops) return { ok: false, message: "A gradient keeps at least two stops." };
-      next.set(path.id, { ...path, [target]: { ...g, stops } });
+      next.set(path.id, withVectorTargetPaint(path, target, layer, { ...g, stops }));
     }
     this.change(label, () => this.setDoc(mapTree(this.doc.nodes, (n) => next.get(n.id) ?? n)), merge);
     return { ok: true };
@@ -3763,10 +3833,10 @@ var VectorEditorController = class {
   /** Adds a stop at `offset` (painting what the gradient paints there) to the selection's gradients and selects it. */
   addGradientStop(offset) {
     let index = 0;
-    const target = this.gradientEdit.target;
+    const { target, layer } = this.gradientEdit;
     const result = this.editGradients("Add Gradient Stop", (stops) => {
-      const path = this.gradientPaths().find((p) => isVectorGradient(p[target]));
-      const r = insertVectorGradientStop({ ...path[target], stops }, offset);
+      const path = this.gradientPaths().find((p) => isVectorGradient(vectorTargetPaint(p, target, layer)));
+      const r = insertVectorGradientStop({ ...vectorTargetPaint(path, target, layer), stops }, offset);
       index = r.index;
       return r.stops;
     });
@@ -3785,7 +3855,8 @@ var VectorEditorController = class {
   }
   /** `doc` with path `id`'s `target` paint replaced. */
   withGradient(doc, id, target, g) {
-    return { ...doc, nodes: mapTree(doc.nodes, (n) => n.id === id ? { ...n, [target]: g } : n) };
+    const layer = this.gradientEdit.layer;
+    return { ...doc, nodes: mapTree(doc.nodes, (n) => n.id === id && n.type === "path" ? withVectorTargetPaint(n, target, layer, g) : n) };
   }
   downGradient(screen, p, input) {
     const before = this.snapshot();
@@ -3830,7 +3901,7 @@ var VectorEditorController = class {
       for (const id2 of drag.targets) {
         const node2 = findVectorNode(base.nodes, id2);
         if (!node2) continue;
-        const paint = node2[target];
+        const paint = vectorTargetPaint(node2, target, this.gradientEdit.layer);
         const g2 = isVectorGradient(paint) ? paint : defaultVectorGradient("linear", paint);
         doc = this.withGradient(doc, id2, target, setVectorGradientVector(g2, vectorPathLocalBounds(node2), this.toLocal(id2, drag.startDoc, base), this.toLocal(id2, end, base)));
       }
@@ -3840,7 +3911,7 @@ var VectorEditorController = class {
     }
     const id = drag.nodeId;
     const node = findVectorNode(base.nodes, id);
-    const g = node[target];
+    const g = vectorTargetPaint(node, target, this.gradientEdit.layer);
     const bounds = vectorPathLocalBounds(node);
     const local = (q) => this.toLocal(id, q, base);
     const part = drag.part;
@@ -4067,39 +4138,35 @@ var VectorEditorController = class {
    */
   outlineStroke(options = {}) {
     const roots = options.ids ?? this.selectedRoots();
+    const strokesOf = (p) => vectorPaintLayerNodes(p).filter((l) => l.kind === "stroke" && l.drawn && (l.node.strokeWidth ?? 1) > 0);
     const paths = [];
     for (const id of roots) {
       const node = this.getNode(id);
       if (node) {
-        for (const p of collectPathNodes(node)) if (!p.locked && hasPaint(p.stroke) && (p.strokeWidth ?? 1) > 0) paths.push(p);
+        for (const p of collectPathNodes(node)) if (!p.locked && strokesOf(p).length) paths.push(p);
       }
     }
     if (!paths.length) return [];
     const created = [];
     const replace = /* @__PURE__ */ new Map();
     for (const p of paths) {
-      const outline = bezierToSubpaths(vectorStrokeOutlinePath(vectorAppearanceOutline(p), p));
-      if (!outline.length) continue;
-      const {
-        stroke,
-        strokeWidth: _w,
-        strokeLinecap: _c,
-        strokeLinejoin: _j,
-        strokeDasharray: _d,
-        strokeAlign: _a,
-        startArrow: _s,
-        endArrow: _e,
-        arrowAlign: _al,
-        startArrowScale: _ss,
-        endArrowScale: _es,
-        strokeWidthProfile: _wp,
-        effects,
-        ...rest
-      } = cloneVectorNode(p);
-      const id = this.newId();
-      const strokeNode = { ...rest, id, name: `${p.name ?? "Path"} Stroke`, subpaths: outline, fill: stroke ?? null, stroke: null, fillRule: "nonzero" };
-      const list = hasPaint(p.fill) ? [{ ...rest, ...effects ? { effects } : {}, stroke: null }, strokeNode] : [strokeNode];
-      created.push(id);
+      const { effects, ...rest } = cloneVectorNode(p);
+      const unstroked = withVectorStrokes(rest, []);
+      for (const key of VECTOR_STROKE_SETTING_KEYS) delete unstroked[key];
+      const list = vectorFills(p).length ? [{ ...unstroked, ...effects ? { effects } : {} }] : [];
+      const layers = strokesOf(p);
+      for (const l of layers) {
+        const outline = bezierToSubpaths(vectorStrokeOutlinePath(vectorAppearanceOutline(p), l.node));
+        if (!outline.length) continue;
+        const id = this.newId();
+        const { strokes: _s, fills: _f, ...plain2 } = unstroked;
+        const name = layers.length > 1 ? `${p.name ?? "Path"} Stroke ${l.index + 1}` : `${p.name ?? "Path"} Stroke`;
+        const fill = { paint: l.layer.paint };
+        if (l.layer.opacity !== void 0) fill.opacity = l.layer.opacity;
+        if (l.layer.blendMode) fill.blendMode = l.layer.blendMode;
+        list.push(withVectorFills({ ...plain2, id, name, subpaths: outline, stroke: null, fillRule: "nonzero" }, [fill]));
+        created.push(id);
+      }
       replace.set(p.id, list);
     }
     if (!created.length) return [];
@@ -4114,6 +4181,229 @@ var VectorEditorController = class {
     return created;
   }
   // -------------------------------------------------------------------------
+  // Fill and stroke stacks, blend modes, filters
+  // -------------------------------------------------------------------------
+  /** Paths of the selected (or given) nodes whose stacks can be edited (groups give every path inside; blend steps are left out). */
+  stackTargets(ids) {
+    const list = ids ?? this.selection;
+    if (!list.length) return "Nothing is selected.";
+    const out = /* @__PURE__ */ new Map();
+    for (const id of list) {
+      const node = this.getNode(id);
+      if (!node) return `There is no node "${id}".`;
+      for (const p of collectPathNodes(node)) if (!p.blendStep) out.set(p.id, p);
+    }
+    if (!out.size) return "The selection has no paths (fills and strokes belong to paths).";
+    return [...out.values()];
+  }
+  /** Applies `fn` to the `kind` stack of every target path as one undo step (an error string from any path cancels it). */
+  editStacks(kind, ids, label, fn, merge) {
+    const targets = this.stackTargets(ids);
+    if (typeof targets === "string") return { ok: false, message: targets };
+    const next = /* @__PURE__ */ new Map();
+    for (const path of targets) {
+      const stack = kind === "fill" ? vectorFills(path) : vectorStrokes(path);
+      const result = fn(stack.map((l) => ({ ...l })), path);
+      if (typeof result === "string") return { ok: false, message: result };
+      next.set(path.id, kind === "fill" ? withVectorFills(path, result) : withVectorStrokes(path, result));
+    }
+    this.change(label, () => this.setDoc(mapTree(this.doc.nodes, (n) => next.get(n.id) ?? n)), merge);
+    return { ok: true };
+  }
+  /**
+   * Reads a layer patch from untrusted input: paint, opacity, blend mode, visibility and (strokes)
+   * the stroke settings, where `null` removes a setting. Returns an error string for invalid values.
+   */
+  layerPatch(kind, patch) {
+    const set = {};
+    const unset = [];
+    if ("paint" in patch) {
+      const paint = patch.paint;
+      if (paint === null || typeof paint === "string" && paint.trim()) set.paint = paint === null ? null : paint.trim();
+      else {
+        const g = sanitizeVectorGradient(paint);
+        if (!g) return "paint must be a CSS colour, a gradient { type, stops: [{ offset, color }] } or null.";
+        set.paint = g;
+      }
+    }
+    if (patch.opacity !== void 0) {
+      if (typeof patch.opacity !== "number" || !Number.isFinite(patch.opacity)) return "opacity must be a number from 0 to 1.";
+      const o = Math.min(1, Math.max(0, patch.opacity));
+      if (o < 1) set.opacity = o;
+      else unset.push("opacity");
+    }
+    if (patch.blendMode !== void 0) {
+      if (!isVectorBlendMode(patch.blendMode)) return `Unknown blend mode "${String(patch.blendMode)}". Use one of: ${VECTOR_BLEND_MODES.join(", ")}.`;
+      if (patch.blendMode !== "normal") set.blendMode = patch.blendMode;
+      else unset.push("blendMode");
+    }
+    if (patch.visible !== void 0) {
+      if (typeof patch.visible !== "boolean") return "visible must be true or false.";
+      if (patch.visible) unset.push("visible");
+      else set.visible = false;
+    }
+    if (kind === "stroke") {
+      const settings = sanitizeVectorStrokeSettings(patch);
+      for (const key of VECTOR_STROKE_SETTING_KEYS) {
+        if (!(key in patch) || patch[key] === void 0) continue;
+        if (patch[key] === null || key === "strokeDasharray" && Array.isArray(patch[key]) && !patch[key].length) unset.push(key);
+        else if (settings[key] === void 0) return `Invalid ${key}: ${JSON.stringify(patch[key])}.`;
+        else set[key] = settings[key];
+      }
+    }
+    return { set, unset };
+  }
+  /**
+   * Adds a fill or stroke layer to the selected (or given) paths (groups: every path inside), at
+   * the top of the stack or at `index` (0 is the bottom). A new stroke takes the settings of the
+   * stack's top stroke unless `layer` gives them. One undo step.
+   */
+  addPaintLayer(kind, layer = {}, options = {}) {
+    const patch = this.layerPatch(kind, layer);
+    if (typeof patch === "string") return { ok: false, message: patch };
+    return this.editStacks(kind, options.ids, kind === "fill" ? "Add Fill" : "Add Stroke", (stack, path) => {
+      const base = kind === "fill" ? { paint: "#808080" } : newVectorStrokeLayer(path, {});
+      const added = { ...base, ...patch.set };
+      for (const key of patch.unset) delete added[key];
+      const at = options.index === void 0 ? stack.length : Math.min(stack.length, Math.max(0, Math.round(options.index)));
+      return [...stack.slice(0, at), added, ...stack.slice(at)];
+    });
+  }
+  /**
+   * Changes layer `index` (0 is the bottom) of the fill or stroke stack of the selected (or given)
+   * paths: paint, opacity, blend mode, visibility and, for strokes, any stroke setting (`null`
+   * removes it). Fails, changing nothing, when a path has no layer `index`. With `merge` (true, or
+   * a key), consecutive edits of the layer fold into one undo step (a slider drag).
+   */
+  updatePaintLayer(kind, index, patch, options = {}) {
+    const parsed = this.layerPatch(kind, patch);
+    if (typeof parsed === "string") return { ok: false, message: parsed };
+    const merge = options.merge === true ? `paint-layer:${kind}:${index}` : options.merge || void 0;
+    return this.editStacks(
+      kind,
+      options.ids,
+      kind === "fill" ? "Edit Fill" : "Edit Stroke",
+      (stack, path) => {
+        if (!stack[index]) return `Path "${path.id}" has no ${kind} ${index} (it has ${stack.length}; 0 is the bottom).`;
+        const layer = { ...stack[index], ...parsed.set };
+        for (const key of parsed.unset) delete layer[key];
+        return stack.map((l, i) => i === index ? layer : l);
+      },
+      merge
+    );
+  }
+  /** Removes layer `index` of the fill or stroke stack of the selected (or given) paths. */
+  removePaintLayer(kind, index, options = {}) {
+    return this.editStacks(
+      kind,
+      options.ids,
+      kind === "fill" ? "Remove Fill" : "Remove Stroke",
+      (stack, path) => stack[index] ? stack.filter((_, i) => i !== index) : `Path "${path.id}" has no ${kind} ${index} (it has ${stack.length}; 0 is the bottom).`
+    );
+  }
+  /** Moves layer `from` of the fill or stroke stack to position `to` (0 is the bottom) on the selected (or given) paths. */
+  movePaintLayer(kind, from, to, options = {}) {
+    return this.editStacks(kind, options.ids, kind === "fill" ? "Reorder Fills" : "Reorder Strokes", (stack, path) => {
+      if (!stack[from]) return `Path "${path.id}" has no ${kind} ${from} (it has ${stack.length}; 0 is the bottom).`;
+      const out = stack.slice();
+      const [layer] = out.splice(from, 1);
+      out.splice(Math.min(out.length, Math.max(0, Math.round(to))), 0, layer);
+      return out;
+    });
+  }
+  /** Replaces the whole fill or stroke stack of the selected (or given) paths (malformed layers are dropped). */
+  setPaintLayers(kind, layers, options = {}) {
+    const clean = kind === "fill" ? sanitizeVectorFills(layers) : sanitizeVectorStrokes(layers);
+    return this.editStacks(kind, options.ids, kind === "fill" ? "Set Fills" : "Set Strokes", () => clean);
+  }
+  /** Sets the blend mode of the selected (or given) nodes (paths or groups); `normal` removes it. */
+  setBlendMode(mode, options = {}) {
+    if (!isVectorBlendMode(mode)) return { ok: false, message: `Unknown blend mode "${String(mode)}". Use one of: ${VECTOR_BLEND_MODES.join(", ")}.` };
+    const ids = options.ids ?? this.selectedRoots();
+    if (!ids.length) return { ok: false, message: "Nothing is selected." };
+    for (const id of ids) if (!this.getNode(id)) return { ok: false, message: `There is no node "${id}".` };
+    const set = new Set(ids);
+    this.change(
+      "Blend Mode",
+      () => this.setDoc(
+        mapTree(this.doc.nodes, (n) => {
+          if (!set.has(n.id) || (n.blendMode ?? "normal") === mode) return n;
+          const { blendMode: _b, ...rest } = n;
+          return mode === "normal" ? rest : { ...rest, blendMode: mode };
+        })
+      )
+    );
+    return { ok: true };
+  }
+  /**
+   * Adds a filter of `type` to the selected (or given) nodes, at the end of each stack (or at
+   * `index`), with default parameters merged with `params`. One undo step; returns the new filter
+   * ids (one per node, in order), empty for an unknown type or nothing selected.
+   */
+  addFilter(type, options = {}) {
+    if (!isVectorFilterType(type)) return [];
+    const targets = this.effectTargets(options.ids);
+    if (!targets.length) return [];
+    const created = [];
+    const next = /* @__PURE__ */ new Map();
+    for (const node of targets) {
+      const list = node.filters ?? [];
+      let k = list.length + 1;
+      while (list.some((f) => f.id === `filter${k}`)) k++;
+      const filter = createVectorFilter(type, `filter${k}`, options.params);
+      const at = options.index === void 0 ? list.length : Math.min(list.length, Math.max(0, Math.round(options.index)));
+      next.set(node.id, { ...node, filters: [...list.slice(0, at), filter, ...list.slice(at)] });
+      created.push(filter.id);
+    }
+    this.change(`Add ${VECTOR_FILTER_LABELS[type]}`, () => this.setDoc(mapTree(this.doc.nodes, (n) => next.get(n.id) ?? n)));
+    return created;
+  }
+  editFilters(nodeId, label, fn, merge) {
+    const node = this.getNode(nodeId);
+    if (!node) return { ok: false, message: `There is no node "${nodeId}".` };
+    const result = fn(node.filters ?? []);
+    if (typeof result === "string") return { ok: false, message: result };
+    this.change(label, () => this.replaceNode(nodeId, result.length ? { ...node, filters: result } : (({ filters: _f, ...rest }) => rest)(node)), merge);
+    return { ok: true };
+  }
+  /**
+   * Turns a filter on or off and changes its parameters (invalid values are ignored). With
+   * `merge`, consecutive updates of the same filter fold into one undo step.
+   */
+  updateFilter(nodeId, filterId, patch, options = {}) {
+    const merge = options.merge === true ? `filter:${nodeId}:${filterId}` : options.merge || void 0;
+    const current = this.getNode(nodeId)?.filters?.find((f) => f.id === filterId);
+    return this.editFilters(
+      nodeId,
+      `Edit ${current ? VECTOR_FILTER_LABELS[current.type] : "Filter"}`,
+      (list) => {
+        const i = list.findIndex((f2) => f2.id === filterId);
+        if (i < 0) return `Node "${nodeId}" has no filter "${filterId}".`;
+        const f = list[i];
+        const params = patch.params ? normalizeVectorFilterParams(f.type, patch.params, f.params) : f.params;
+        const next = { ...f, params, ...patch.enabled !== void 0 ? { enabled: patch.enabled } : {} };
+        if (next.enabled !== false) delete next.enabled;
+        return list.map((x, j) => j === i ? next : x);
+      },
+      merge
+    );
+  }
+  /** Removes a filter from a node's stack. */
+  removeFilter(nodeId, filterId) {
+    return this.editFilters(nodeId, "Remove Filter", (list) => list.some((f) => f.id === filterId) ? list.filter((f) => f.id !== filterId) : `Node "${nodeId}" has no filter "${filterId}".`);
+  }
+  /** Moves a filter to position `index` of its node's stack. */
+  moveFilter(nodeId, filterId, index) {
+    return this.editFilters(nodeId, "Reorder Filters", (list) => {
+      const i = list.findIndex((f2) => f2.id === filterId);
+      if (i < 0) return `Node "${nodeId}" has no filter "${filterId}".`;
+      const out = list.slice();
+      const [f] = out.splice(i, 1);
+      out.splice(Math.min(out.length, Math.max(0, Math.round(index))), 0, f);
+      return out;
+    });
+  }
+  // -------------------------------------------------------------------------
   // Path effects
   // -------------------------------------------------------------------------
   /** Selected (or given) nodes that can carry effects: the roots of the selection. */
@@ -7300,12 +7590,16 @@ function scaleFor(handle, b, p, mods = {}) {
   return { sx, sy, origin };
 }
 function withStyle(node, style) {
-  const next = { ...node, ...style };
+  const { fills, strokes, ...shorthand } = style;
+  let next = { ...node, ...shorthand };
   if ("strokeWidthProfile" in style) {
     const p = style.strokeWidthProfile ? sanitizeWidthProfile(style.strokeWidthProfile) : [];
     if (p.length) next.strokeWidthProfile = p;
     else delete next.strokeWidthProfile;
   }
+  next = normalizeVectorPaintStacks(next, "shorthand");
+  if (fills !== void 0) next = withVectorFills(next, sanitizeVectorFills(fills ?? []));
+  if (strokes !== void 0) next = withVectorStrokes(next, sanitizeVectorStrokes(strokes ?? []));
   return next;
 }
 function hiddenOrLocked(nodes, id) {
@@ -7329,37 +7623,99 @@ function pencilPressureProfile(points, pressures) {
 var fmt2 = (n) => Math.round(n * 100) / 100;
 var fmtMatrix = (m) => `matrix(${m.map((n) => Math.round(n * 1e6) / 1e6).join(" ")})`;
 var VECTOR_BUILDER_HATCH_GAP = 6;
-function renderNode(stored, defs, idPrefix) {
+function nodeFinish(node, filters, idPrefix) {
+  const out = {};
+  const blend = vectorBlendModeCss(node.blendMode);
+  if (blend) out.blendMode = blend;
+  const filter = vectorNodeFilterSvg(node, `${idPrefix}filter-${node.id}`);
+  if (filter) {
+    filters.push(filter);
+    out.filter = `url(#${filter.id})`;
+  }
+  return out;
+}
+function lineStyle(node) {
+  return {
+    strokeWidth: node.strokeWidth ?? 1,
+    ...node.strokeLinecap ? { strokeLinecap: node.strokeLinecap } : {},
+    ...node.strokeLinejoin ? { strokeLinejoin: node.strokeLinejoin } : {},
+    ...node.strokeDasharray?.length ? { strokeDasharray: node.strokeDasharray.join(" ") } : {}
+  };
+}
+function renderLayers(node, defs, idPrefix) {
+  const out = [];
+  for (const l of vectorPaintLayerNodes(node)) {
+    if (!l.drawn) continue;
+    const role = l.kind;
+    const paint = vectorPaintToSvg(l.layer.paint, `${idPrefix}${role}-${node.id}-${l.index}`, { node: l.node, ...role === "stroke" ? { role } : {} });
+    defs.push(...paint.defs);
+    const blend = vectorBlendModeCss(l.layer.blendMode);
+    const base = { kind: role, index: l.index, opacity: l.layer.opacity ?? 1, ...blend ? { blendMode: blend } : {} };
+    if (role === "fill") out.push({ ...base, fill: paint.value, stroke: "none", strokeWidth: 0 });
+    else {
+      const strokeParts = vectorStrokeSvgParts(l.node, `${idPrefix}clip-${node.id}-${l.index}`);
+      out.push({ ...base, fill: "none", stroke: paint.value, ...lineStyle(l.node), ...strokeParts ? { strokeParts } : {} });
+    }
+  }
+  return out;
+}
+function renderNode(stored, defs, filters, idPrefix) {
   if (stored.visible === false) return null;
   const node = expandVectorAppearance(stored);
   if (node.type === "group") {
-    const children = node.children.map((c) => renderNode(c, defs, idPrefix)).filter((c) => !!c);
-    return { kind: "group", id: node.id, ...node.transform ? { transform: fmtMatrix(node.transform) } : {}, opacity: node.opacity ?? 1, children };
+    const children = node.children.map((c) => renderNode(c, defs, filters, idPrefix)).filter((c) => !!c);
+    return {
+      kind: "group",
+      id: node.id,
+      ...node.transform ? { transform: fmtMatrix(node.transform) } : {},
+      opacity: node.opacity ?? 1,
+      ...nodeFinish(node, filters, idPrefix),
+      children
+    };
+  }
+  const finish = nodeFinish(node, filters, idPrefix);
+  const common = {
+    kind: "path",
+    id: node.id,
+    ...node.transform ? { transform: fmtMatrix(node.transform) } : {},
+    d: vectorPathData(node),
+    fillRule: node.fillRule ?? "nonzero",
+    opacity: node.opacity ?? 1,
+    ...finish
+  };
+  if (needsVectorPaintLayers(node)) {
+    const layers = renderLayers(node, defs, idPrefix);
+    const fill2 = layers.filter((l) => l.kind === "fill").at(-1);
+    const stroke2 = layers.filter((l) => l.kind === "stroke").at(-1);
+    return {
+      ...common,
+      fill: fill2?.fill ?? "none",
+      stroke: stroke2?.stroke ?? "none",
+      strokeWidth: stroke2?.strokeWidth ?? node.strokeWidth ?? 1,
+      ...stroke2?.strokeLinecap ? { strokeLinecap: stroke2.strokeLinecap } : {},
+      ...stroke2?.strokeLinejoin ? { strokeLinejoin: stroke2.strokeLinejoin } : {},
+      ...stroke2?.strokeDasharray ? { strokeDasharray: stroke2.strokeDasharray } : {},
+      ...stroke2?.strokeParts ? { strokeParts: stroke2.strokeParts } : {},
+      layers
+    };
   }
   const fill = vectorPaintToSvg(node.fill, `${idPrefix}fill-${node.id}`, { node });
   const stroke = vectorPaintToSvg(node.stroke, `${idPrefix}stroke-${node.id}`, { node, role: "stroke" });
   defs.push(...fill.defs, ...stroke.defs);
   const strokeParts = stroke.value !== "none" ? vectorStrokeSvgParts(node, `${idPrefix}clip-${node.id}`) : void 0;
   return {
-    kind: "path",
-    id: node.id,
-    ...node.transform ? { transform: fmtMatrix(node.transform) } : {},
+    ...common,
     ...strokeParts ? { strokeParts } : {},
-    d: vectorPathData(node),
     fill: fill.value,
     stroke: stroke.value,
-    strokeWidth: node.strokeWidth ?? 1,
-    ...node.strokeLinecap ? { strokeLinecap: node.strokeLinecap } : {},
-    ...node.strokeLinejoin ? { strokeLinejoin: node.strokeLinejoin } : {},
-    ...node.strokeDasharray?.length ? { strokeDasharray: node.strokeDasharray.join(" ") } : {},
-    fillRule: node.fillRule ?? "nonzero",
-    opacity: node.opacity ?? 1
+    ...lineStyle(node)
   };
 }
 function getVectorSceneRenderData(state, options = {}) {
   const defs = [];
+  const filters = [];
   const prefix = options.idPrefix ?? "ve-";
-  const nodes = state.document.nodes.map((n) => renderNode(n, defs, prefix)).filter((n) => !!n);
+  const nodes = state.document.nodes.map((n) => renderNode(n, defs, filters, prefix)).filter((n) => !!n);
   const v = state.viewport;
   return {
     transform: `translate(${fmt2(v.x)} ${fmt2(v.y)}) scale(${v.zoom})`,
@@ -7367,6 +7723,7 @@ function getVectorSceneRenderData(state, options = {}) {
     height: state.document.height,
     ...state.document.background ? { background: state.document.background } : {},
     defs,
+    filters,
     nodes
   };
 }
@@ -7593,7 +7950,7 @@ function getVectorEnvelopePanel(state) {
   };
 }
 function gradientOverlay(state) {
-  const a = getVectorGradientAnnotator(state.document, state.selection, state.viewport, state.gradientEdit.target);
+  const a = getVectorGradientAnnotator(state.document, state.selection, state.viewport, state.gradientEdit.target, state.gradientEdit.layer ?? null);
   if (!a) return null;
   const hover = state.interaction ? null : state.hover?.gradient;
   const handleHovered = (h) => hover?.kind === "handle" && hover.handle === h;
@@ -7831,8 +8188,8 @@ function getVectorGradientEditor(state) {
     if (node) paths.push(...collect(node));
   }
   if (!paths.length) return null;
-  const target = state.gradientEdit.target;
-  const paint = paths[0][target];
+  const { target, layer } = state.gradientEdit;
+  const paint = vectorTargetPaint(paths[0], target, layer ?? null);
   const gradient = isVectorGradient(paint) ? paint : null;
   const sorted = gradient ? sortedVectorGradientStops(gradient) : [];
   const stopIndex = state.gradientEdit.stop;
@@ -7846,6 +8203,7 @@ function getVectorGradientEditor(state) {
   }).join(", ")})` : null;
   return {
     target,
+    layer: layer ?? null,
     gradient,
     color: vectorPaintToHex(paint),
     stops,
@@ -7856,7 +8214,7 @@ function getVectorGradientEditor(state) {
     interpolation: gradient?.interpolation ?? "srgb",
     smoothness: gradient?.smoothness ?? 0,
     strokeMode: gradient?.strokeMode ?? "within",
-    mixed: paths.some((p) => JSON.stringify(p[target] ?? null) !== JSON.stringify(paint ?? null))
+    mixed: paths.some((p) => JSON.stringify(vectorTargetPaint(p, target, layer ?? null) ?? null) !== JSON.stringify(paint ?? null))
   };
 }
 var VECTOR_PATH_ACTIONS = [
@@ -7900,6 +8258,66 @@ function getVectorEffectsPanel(state) {
     expandable: nodes.some(hasVectorAppearance)
   };
 }
+function vectorPaintSwatch(paint) {
+  if (typeof paint === "string") return paint;
+  if (isVectorGradient(paint)) {
+    return `linear-gradient(to right, ${expandVectorGradientStops(paint).map((s) => {
+      const c = parseVectorColor(s.color);
+      const a = (c?.[3] ?? 1) * (s.opacity ?? 1);
+      const color = c ? `rgba(${Math.round(c[0] * 255)}, ${Math.round(c[1] * 255)}, ${Math.round(c[2] * 255)}, ${Math.round(a * 1e3) / 1e3})` : s.color;
+      return `${color} ${Math.round(s.offset * 1e4) / 100}%`;
+    }).join(", ")})`;
+  }
+  return "transparent";
+}
+function getVectorAppearancePanel(state) {
+  const nodes = state.selection.map((id) => findVectorNode(state.document.nodes, id)).filter((n) => !!n && !n.blendStep);
+  if (!nodes.length) return null;
+  const paths = [];
+  for (const n of nodes) for (const p of collect(n)) if (!p.blendStep && !paths.some((q) => q.id === p.id)) paths.push(p);
+  const first = paths[0];
+  const edit = state.gradientEdit;
+  const layer = (kind, l, index, count) => ({
+    kind,
+    index,
+    paint: l.paint,
+    color: vectorPaintToHex(l.paint),
+    swatch: vectorPaintSwatch(l.paint),
+    gradient: isVectorGradient(l.paint),
+    opacity: l.opacity ?? 1,
+    blendMode: l.blendMode ?? "normal",
+    visible: l.visible !== false,
+    ...kind === "stroke" ? { strokeWidth: l.strokeWidth ?? 1, strokeAlign: l.strokeAlign ?? "center" } : {},
+    ...(l.kind ?? "paint") !== "paint" ? { unknownKind: String(l.kind) } : {},
+    editing: edit.target === kind && (edit.layer === null ? index === count - 1 : edit.layer === index)
+  });
+  const fills = first ? vectorFills(first) : [];
+  const strokes = first ? vectorStrokes(first) : [];
+  const same = (get) => paths.every((p) => JSON.stringify(get(p)) === JSON.stringify(get(first)));
+  const one = nodes.length === 1 ? nodes[0] : null;
+  return {
+    nodeIds: nodes.map((n) => n.id),
+    pathIds: paths.map((p) => p.id),
+    fills: fills.map((l, i) => layer("fill", l, i, fills.length)),
+    strokes: strokes.map((l, i) => layer("stroke", l, i, strokes.length)),
+    blendMode: nodes[0].blendMode ?? "normal",
+    mixed: {
+      fills: !!first && !same(vectorFills),
+      strokes: !!first && !same(vectorStrokes),
+      blendMode: nodes.some((n) => (n.blendMode ?? "normal") !== (nodes[0].blendMode ?? "normal"))
+    },
+    filterNodeId: one?.id ?? null,
+    filters: (one?.filters ?? []).map((f) => ({
+      id: f.id,
+      type: f.type,
+      label: VECTOR_FILTER_LABELS[f.type] ?? f.type,
+      enabled: f.enabled !== false,
+      params: f.params,
+      specs: VECTOR_FILTER_PARAM_SPECS[f.type] ?? []
+    }))
+  };
+}
+var VECTOR_BLEND_MODE_MENU = VECTOR_BLEND_MODES.map((mode) => ({ mode, label: VECTOR_BLEND_MODE_LABELS[mode] }));
 
 // src/vector/commands.ts
 var EFFECT_PARAMS_DESCRIPTION = "Effect parameters (missing ones keep their value or default). trim: start, end (percent), offset (degrees), mode simultaneous|individual. roundCorners: radius. puckerBloat: amount (\u2212100\u2026100). twist: angle, center {x, y} (offset from the middle). zigzag: size, ridges, smooth. wiggle: size, detail, smooth, speed, correlation, phase, seed, time (seconds). offset: amount, join miter|round|bevel, miterLimit, copies, copyOffset. merge: mode merge|add|subtract|intersect|exclude. repeater: copies (fractions fade the last), offset, position {x, y}, anchor {x, y} (offset from the middle), rotation, scale {x, y} (percent), startOpacity, endOpacity (percent), composite below|above. envelope: style (a warp preset: arc|arcLower|arcUpper|arch|bulge|shellLower|shellUpper|flag|wave|fish|rise|fisheye|inflate|squeeze|twist, or mesh), bend, horizontal, vertical (percent, \u2212100\u2026100), orientation horizontal|vertical, rows, columns, mesh { us, vs, points } (node space; prefer vector.envelope).";
@@ -7983,15 +8401,23 @@ var PAINT = {
   description: 'A CSS colour, `null` for none, or a gradient object: `{ type: "linear" | "radial" | "conic" | "reflected" | "diamond", stops: [{ offset, color, opacity?, midpoint? }] }` plus the shorthand `angle` / `cx, cy, r` or explicit `start`, `end`, `width`, `focal`, `focalRadius`, `units`, and `spread`, `interpolation`, `smoothness`, `strokeMode` (see vector.setGradient).',
   anyOf: [{ type: "string" }, { type: "null" }, { type: "object", properties: GRADIENT_PROPS, required: ["type", "stops"] }]
 };
-var STYLE_PROPS = {
-  fill: PAINT,
-  stroke: PAINT,
-  strokeWidth: { type: "number", minimum: 0 },
-  strokeLinecap: { type: "string", enum: ["butt", "round", "square"] },
-  strokeLinejoin: { type: "string", enum: ["miter", "round", "bevel"] },
-  strokeDasharray: { type: "array", items: { type: "number" } },
-  fillRule: { type: "string", enum: ["nonzero", "evenodd"] },
-  strokeAlign: { type: "string", enum: ["center", "inside", "outside"], description: "Where the stroke sits on the outline (closed shapes only; open paths stroke centred)." },
+var BLEND_MODE = {
+  type: "string",
+  enum: VECTOR_BLEND_MODES,
+  description: "How it mixes with what is under it (CSS mix-blend-mode names; linear-dodge draws as plus-lighter). Default normal."
+};
+var FILL_LAYER_PROPS = {
+  paint: PAINT,
+  opacity: { type: "number", minimum: 0, maximum: 1, description: "Layer opacity 0 to 1 (default 1), multiplying the paint's own alpha." },
+  blendMode: BLEND_MODE,
+  visible: { type: "boolean", description: "false hides the layer (kept, not drawn or hit). Default true." }
+};
+var STROKE_SETTING_PROPS = {
+  strokeWidth: { type: "number", minimum: 0, description: "Stroke width in document units (default 1)." },
+  strokeLinecap: { type: "string", enum: ["butt", "round", "square"], description: "Line cap (default butt)." },
+  strokeLinejoin: { type: "string", enum: ["miter", "round", "bevel"], description: "Line join (default miter)." },
+  strokeDasharray: { type: ["array", "null"], items: { type: "number", minimum: 0 }, description: "Dash and gap lengths in document units; null or [] for a solid line." },
+  strokeAlign: { type: "string", enum: ["center", "inside", "outside"], description: "Where the stroke sits on the outline (closed shapes only; open paths stroke centred). Default center." },
   startArrow: { type: ["string", "null"], enum: [...VECTOR_ARROWHEADS, null], description: "Head at the start of an open path, or null for none." },
   endArrow: { type: ["string", "null"], enum: [...VECTOR_ARROWHEADS, null], description: "Head at the end of an open path, or null for none." },
   arrowAlign: { type: "string", enum: ["extend", "tip"], description: "`extend`: the tip sits past the end point; `tip`: on it, the stroke shortened under the head." },
@@ -7999,12 +8425,33 @@ var STYLE_PROPS = {
   endArrowScale: { type: "number", exclusiveMinimum: 0, description: "End head size as a multiple of the stroke width (default 1)." },
   strokeWidthProfile: WIDTH_POINTS
 };
+var FILL_LAYER = { type: "object", properties: FILL_LAYER_PROPS, required: ["paint"], additionalProperties: false };
+var STROKE_LAYER = { type: "object", properties: { ...FILL_LAYER_PROPS, ...STROKE_SETTING_PROPS }, required: ["paint"], additionalProperties: false };
+var STYLE_PROPS = {
+  fills: { type: "array", items: FILL_LAYER, description: "Replace the fill stack, bottom to top (fills draw under strokes). `fill` alone edits the top fill." },
+  strokes: { type: "array", items: STROKE_LAYER, description: "Replace the stroke stack, bottom to top, each stroke with its own settings. `stroke` and the stroke settings alone edit the top stroke." },
+  fill: PAINT,
+  stroke: PAINT,
+  ...STROKE_SETTING_PROPS,
+  fillRule: { type: "string", enum: ["nonzero", "evenodd"], description: "Which areas count as inside (default nonzero)." }
+};
+var checkPaint = (paint, where) => {
+  if (paint && typeof paint === "object") return sanitizeVectorGradient(paint) ?? fail(`${where} is not a valid gradient: give a type and at least one stop { offset, color }.`);
+  return paint;
+};
 var pickStyle = (params) => {
   const out = {};
   for (const key of Object.keys(STYLE_PROPS)) if (params[key] !== void 0) out[key] = params[key];
-  for (const key of ["fill", "stroke"]) {
-    const paint = out[key];
-    if (paint && typeof paint === "object") out[key] = sanitizeVectorGradient(paint) ?? fail(`${key} is not a valid gradient: give a type and at least one stop { offset, color }.`);
+  for (const key of ["fill", "stroke"]) if (out[key] !== void 0) out[key] = checkPaint(out[key], key);
+  for (const key of ["fills", "strokes"]) {
+    const stack = out[key];
+    if (!Array.isArray(stack)) continue;
+    stack.forEach((l, i) => {
+      if (!l || typeof l !== "object") fail(`${key}[${i}] must be a layer object { paint, \u2026 }.`);
+      const layer = l;
+      checkPaint(layer.paint, `${key}[${i}].paint`);
+      if (layer.blendMode !== void 0 && !isVectorBlendMode(layer.blendMode)) fail(`${key}[${i}].blendMode "${String(layer.blendMode)}" is not one of: ${VECTOR_BLEND_MODES.join(", ")}.`);
+    });
   }
   return out;
 };
@@ -8053,7 +8500,11 @@ function createVectorCommands(controller, options = {}) {
           ...n.blendStep ? { blendStep: true } : {},
           ...n.effects?.length ? { effects: n.effects } : {},
           ...n.type === "group" && n.liveBoolean ? { liveBoolean: n.liveBoolean } : {},
-          ...n.booleanOperation ? { booleanOperation: n.booleanOperation } : {}
+          ...n.booleanOperation ? { booleanOperation: n.booleanOperation } : {},
+          ...n.type === "path" && Array.isArray(n.fills) ? { fills: n.fills } : {},
+          ...n.type === "path" && Array.isArray(n.strokes) ? { strokes: n.strokes } : {},
+          ...n.blendMode && n.blendMode !== "normal" ? { blendMode: n.blendMode } : {},
+          ...n.filters?.length ? { filters: n.filters } : {}
         });
         if (n.type === "group") visit(n.children, depth + 1);
       }
@@ -8061,6 +8512,276 @@ function createVectorCommands(controller, options = {}) {
     visit(state.document.nodes, 0);
     return { width: state.document.width, height: state.document.height, nodes: out, selection: state.selection, tool: state.tool };
   };
+  const appearanceOf = (id) => {
+    const n = controller.getNode(id) ?? fail(`There is no node "${id}".`);
+    return {
+      id: n.id,
+      type: n.type,
+      ...n.type === "path" ? { fills: vectorFills(n), strokes: vectorStrokes(n), fillRule: n.fillRule ?? "nonzero" } : {},
+      blendMode: n.blendMode ?? "normal",
+      opacity: n.opacity ?? 1,
+      filters: n.filters ?? []
+    };
+  };
+  const pathOf = (id) => {
+    const n = controller.getNode(id) ?? fail(`There is no node "${id}". Call vector.list for ids.`);
+    if (n.type !== "path") fail(`"${id}" is a group; fills and strokes belong to paths (pass a path id, or use ids on vector.addFill / vector.addStroke for every path inside).`);
+    return n;
+  };
+  const layerIndex = (id, kind, index, key = "index") => {
+    const stack = kind === "fill" ? vectorFills(pathOf(id)) : vectorStrokes(pathOf(id));
+    if (!Number.isInteger(index) || !stack[index]) fail(`${key} ${index} is out of range: "${id}" has ${stack.length} ${kind}${stack.length === 1 ? "" : "s"} (0 is the bottom). Read them with vector.getAppearance.`);
+  };
+  const stackResult = (id, kind) => kind === "fill" ? { id, fills: vectorFills(pathOf(id)) } : { id, strokes: vectorStrokes(pathOf(id)) };
+  const layerPatchOf = (params, keys) => {
+    const out = {};
+    for (const key of keys) if (params[key] !== void 0) out[key] = key === "paint" ? checkPaint(params[key], "paint") : params[key];
+    return out;
+  };
+  const pathsUnder = (list2) => {
+    const out = [];
+    const walk = (n) => n.type === "path" ? out.push(n.id) : n.children.forEach(walk);
+    for (const id of list2) walk(controller.getNode(id));
+    return out;
+  };
+  const FILL_KEYS = Object.keys(FILL_LAYER_PROPS);
+  const STROKE_KEYS2 = [...FILL_KEYS, ...Object.keys(STROKE_SETTING_PROPS)];
+  const layerCommands = (kind) => {
+    const Kind = kind === "fill" ? "Fill" : "Stroke";
+    const props = kind === "fill" ? FILL_LAYER_PROPS : { ...FILL_LAYER_PROPS, ...STROKE_SETTING_PROPS };
+    const keys = kind === "fill" ? FILL_KEYS : STROKE_KEYS2;
+    const NODE = { type: "string", description: "Id of the path (from vector.list)." };
+    const INDEX = { type: "integer", minimum: 0, description: `Position of the ${kind} in the path's ${kind} stack, 0 at the bottom (from vector.getAppearance).` };
+    const listKey = `${kind}s`;
+    return [
+      {
+        ...base,
+        id: `${prefix}add${Kind}`,
+        label: `Add ${Kind}`,
+        keywords: ["appearance", "layer", kind, "stack", "multiple", "paint"],
+        description: kind === "fill" ? "Adds a fill layer to paths (groups: every path inside), on top of the fill stack or at `index`. Fills draw bottom to top, all under the strokes. Returns each path's new fill stack." : "Adds a stroke layer to paths (groups: every path inside), on top of the stroke stack or at `index`, with its own width, alignment, dashes, caps, joins, arrowheads and profile (unset settings come from the stack's current top stroke). Strokes draw bottom to top, over every fill. Returns each path's new stroke stack.",
+        params: {
+          type: "object",
+          properties: {
+            ids: { ...IDS, description: "Paths or groups to add it to (default: the selection; groups give every path inside)." },
+            ...props,
+            paint: { ...PAINT, description: `${PAINT.description} Default ${kind === "fill" ? "#808080" : "#000000"}.` },
+            index: { type: "integer", minimum: 0, description: `Where in the stack to put it, 0 at the bottom (default: on top).` }
+          },
+          additionalProperties: false
+        },
+        undoable: true,
+        enabled: enabledFor,
+        run: (_ctx, params) => {
+          const targets = ids(params);
+          check(controller.addPaintLayer(kind, layerPatchOf(params ?? {}, keys), { ids: targets, index: params?.index }));
+          return { nodes: pathsUnder(targets).map((id) => stackResult(id, kind)) };
+        }
+      },
+      {
+        ...base,
+        id: `${prefix}update${Kind}`,
+        label: `Edit ${Kind}`,
+        keywords: ["appearance", "layer", kind, "opacity", "blend", "hide", "show"],
+        description: `Changes ${kind} \`index\` of path \`nodeId\`: ${kind === "fill" ? "paint, opacity, blend mode, visibility" : "paint, opacity, blend mode, visibility and any stroke setting (null removes an arrowhead, dashes or a profile)"}. Missing fields keep their value. Returns the path's ${kind} stack.`,
+        params: { type: "object", properties: { nodeId: NODE, index: INDEX, ...props }, required: ["nodeId", "index"], additionalProperties: false },
+        undoable: true,
+        run: (_ctx, params) => {
+          layerIndex(params.nodeId, kind, params.index);
+          const patch = layerPatchOf(params, keys);
+          if (!Object.keys(patch).length) fail(`Pass at least one of: ${keys.join(", ")}.`);
+          check(controller.updatePaintLayer(kind, params.index, patch, { ids: [params.nodeId] }));
+          return stackResult(params.nodeId, kind);
+        }
+      },
+      {
+        ...base,
+        id: `${prefix}remove${Kind}`,
+        label: `Remove ${Kind}`,
+        keywords: ["appearance", "layer", kind, "delete"],
+        description: `Removes ${kind} \`index\` from path \`nodeId\`. Returns the path's remaining ${kind} stack.`,
+        params: { type: "object", properties: { nodeId: NODE, index: INDEX }, required: ["nodeId", "index"], additionalProperties: false },
+        undoable: true,
+        run: (_ctx, params) => {
+          layerIndex(params.nodeId, kind, params.index);
+          check(controller.removePaintLayer(kind, params.index, { ids: [params.nodeId] }));
+          return stackResult(params.nodeId, kind);
+        }
+      },
+      {
+        ...base,
+        id: `${prefix}move${Kind}`,
+        label: `Reorder ${Kind}s`,
+        keywords: ["appearance", "layer", kind, "order", "reorder", "stack"],
+        description: `Moves ${kind} \`index\` of path \`nodeId\` to position \`to\` in its ${kind} stack (0 is the bottom). Returns the reordered ${listKey}.`,
+        params: {
+          type: "object",
+          properties: { nodeId: NODE, index: INDEX, to: { type: "integer", minimum: 0, description: `New position, 0 at the bottom (clamped to the stack).` } },
+          required: ["nodeId", "index", "to"],
+          additionalProperties: false
+        },
+        undoable: true,
+        run: (_ctx, params) => {
+          layerIndex(params.nodeId, kind, params.index);
+          check(controller.movePaintLayer(kind, params.index, params.to, { ids: [params.nodeId] }));
+          return stackResult(params.nodeId, kind);
+        }
+      }
+    ];
+  };
+  const FILTER_PARAMS = {
+    type: "object",
+    description: "Filter parameters (missing ones keep their value or default; lengths in document units). dropShadow / innerShadow: color (CSS), opacity (0 to 1), offsetX, offsetY, blur (radius; reaches about 1.5 times it), spread (inner: choke). outerGlow / innerGlow: color, opacity, blur, spread. layerBlur: radius. feather: radius (edge fade width).",
+    properties: {
+      color: { type: "string", description: "Shadow or glow colour (CSS)." },
+      opacity: { type: "number", minimum: 0, maximum: 1, description: "Shadow or glow opacity, 0 to 1." },
+      offsetX: { type: "number", description: "Shadow offset to the right, document units." },
+      offsetY: { type: "number", description: "Shadow offset downwards, document units." },
+      blur: { type: "number", minimum: 0, description: "Shadow or glow blur radius, document units." },
+      spread: { type: "number", minimum: 0, description: "Grows the silhouette before blurring (inner shadow and glow: chokes inwards)." },
+      radius: { type: "number", minimum: 0, description: "Layer blur radius, or feather width, document units." }
+    },
+    additionalProperties: false
+  };
+  const checkFilterParams = (type, params) => {
+    const allowed = vectorFilterParamKeys(type);
+    for (const key of Object.keys(params ?? {})) if (!allowed.includes(key)) fail(`${type} has no parameter "${key}"; it takes ${allowed.join(", ")}.`);
+  };
+  const filtersResult = (id) => ({ id, filters: controller.getNode(id)?.filters ?? [] });
+  const filterOf = (nodeId, filterId) => {
+    const node = controller.getNode(nodeId) ?? fail(`There is no node "${nodeId}".`);
+    return node.filters?.find((f) => f.id === filterId) ?? fail(`Node "${nodeId}" has no filter "${filterId}"; it has ${(node.filters ?? []).map((f) => `"${f.id}" (${f.type})`).join(", ") || "none"}.`);
+  };
+  const appearanceCommands = () => [
+    {
+      ...base,
+      id: `${prefix}getAppearance`,
+      label: "Get Appearance",
+      readOnly: true,
+      keywords: ["appearance", "fills", "strokes", "blend mode", "filters", "shadow"],
+      description: "Reads a node's appearance: for paths the fill and stroke stacks (bottom to top, each with paint, opacity, blendMode, visible and, for strokes, their settings) and fill rule; for any node its blend mode, opacity and filters (with ids). Use the indexes and ids with the fill, stroke and filter commands.",
+      params: { type: "object", properties: { id: { type: "string", description: "Node id (from vector.list)." } }, required: ["id"], additionalProperties: false },
+      run: (_ctx, params) => appearanceOf(params.id)
+    },
+    ...layerCommands("fill"),
+    ...layerCommands("stroke"),
+    {
+      ...base,
+      id: `${prefix}setBlendMode`,
+      label: "Blend Mode\u2026",
+      keywords: ["blend", "multiply", "screen", "overlay", "mix-blend-mode", "composite"],
+      description: "Sets how whole nodes (paths or groups, with everything they draw) mix with what is under them. `normal` removes it. Returns each node's blend mode.",
+      params: {
+        type: "object",
+        properties: { ids: IDS, blendMode: { ...BLEND_MODE, description: "The blend mode (CSS mix-blend-mode names; linear-dodge draws as plus-lighter)." } },
+        required: ["blendMode"],
+        additionalProperties: false
+      },
+      undoable: true,
+      enabled: enabledFor,
+      run: (_ctx, params) => {
+        const targets = ids(params);
+        check(controller.setBlendMode(params.blendMode, { ids: targets }));
+        return { nodes: targets.map((id) => ({ id, blendMode: controller.getNode(id)?.blendMode ?? "normal" })) };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}addFilter`,
+      label: "Add Filter\u2026",
+      keywords: ["filter", "drop shadow", "inner shadow", "glow", "blur", "feather", "effect", "appearance"],
+      description: "Adds a visual filter `type` (dropShadow, innerShadow, outerGlow, innerGlow, layerBlur, feather) to nodes (paths or groups), at the end of each filter stack or at `index`. Filters never change geometry (bounds and hit-testing ignore them) and export as SVG filters. Returns each node's new filter id and its filter stack.",
+      params: {
+        type: "object",
+        properties: {
+          type: { type: "string", enum: VECTOR_FILTER_TYPES, description: "The filter type." },
+          params: FILTER_PARAMS,
+          index: { type: "integer", minimum: 0, description: "Position in the stack (default: last)." },
+          ids: IDS
+        },
+        required: ["type"],
+        additionalProperties: false
+      },
+      undoable: true,
+      enabled: enabledFor,
+      run: (_ctx, params) => {
+        if (!VECTOR_FILTER_TYPES.includes(params.type)) fail(`Unknown filter type "${params.type}"; use one of ${VECTOR_FILTER_TYPES.join(", ")}.`);
+        checkFilterParams(params.type, params.params);
+        const targets = ids(params);
+        const created = controller.addFilter(params.type, { ids: targets, params: params.params, index: params.index });
+        if (!created.length) fail("Nothing to add the filter to (blend steps take no filters).");
+        return { nodes: targets.map((id, i) => ({ filterId: created[i], ...filtersResult(id) })) };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}updateFilter`,
+      label: "Edit Filter\u2026",
+      keywords: ["filter", "shadow", "glow", "blur", "feather", "enable", "disable"],
+      description: "Changes filter `filterId` of node `nodeId`: its `params` (merged; only the keys its type takes) and whether it is `enabled`. Returns the node's filter stack.",
+      params: {
+        type: "object",
+        properties: {
+          nodeId: { type: "string", description: "Node id." },
+          filterId: { type: "string", description: "Filter id (from vector.addFilter or vector.getAppearance)." },
+          params: FILTER_PARAMS,
+          enabled: { type: "boolean", description: "false turns the filter off (kept in the stack)." }
+        },
+        required: ["nodeId", "filterId"],
+        additionalProperties: false
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        const filter = filterOf(params.nodeId, params.filterId);
+        checkFilterParams(filter.type, params.params);
+        if (params.params === void 0 && params.enabled === void 0) fail("Pass params or enabled.");
+        check(controller.updateFilter(params.nodeId, params.filterId, { params: params.params, enabled: params.enabled }));
+        return filtersResult(params.nodeId);
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}removeFilter`,
+      label: "Remove Filter",
+      keywords: ["filter", "delete", "shadow", "blur"],
+      description: "Removes filter `filterId` from node `nodeId`. Returns the node's remaining filters.",
+      params: {
+        type: "object",
+        properties: { nodeId: { type: "string", description: "Node id." }, filterId: { type: "string", description: "Filter id." } },
+        required: ["nodeId", "filterId"],
+        additionalProperties: false
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        filterOf(params.nodeId, params.filterId);
+        check(controller.removeFilter(params.nodeId, params.filterId));
+        return filtersResult(params.nodeId);
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}moveFilter`,
+      label: "Reorder Filters",
+      keywords: ["filter", "order", "reorder"],
+      description: "Moves filter `filterId` of node `nodeId` to position `index` of its stack. Order matters within a kind: later drop shadows draw over earlier ones, later inner effects over earlier ones. Returns the reordered filters.",
+      params: {
+        type: "object",
+        properties: {
+          nodeId: { type: "string", description: "Node id." },
+          filterId: { type: "string", description: "Filter id." },
+          index: { type: "integer", minimum: 0, description: "New position, 0 first (clamped to the stack)." }
+        },
+        required: ["nodeId", "filterId", "index"],
+        additionalProperties: false
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        filterOf(params.nodeId, params.filterId);
+        check(controller.moveFilter(params.nodeId, params.filterId, params.index));
+        return filtersResult(params.nodeId);
+      }
+    }
+  ];
   return [
     {
       ...base,
@@ -8166,6 +8887,7 @@ function createVectorCommands(controller, options = {}) {
         return { ok: true, ...path ? { gradient: path[target ?? "fill"] } : {} };
       }
     },
+    ...appearanceCommands(),
     {
       ...base,
       id: `${prefix}setCorners`,
@@ -8950,6 +9672,9 @@ export {
   VECTOR_ARROWHEAD_LABELS,
   VECTOR_BLEND_MAX_SMOOTH_STEPS,
   VECTOR_BLEND_MAX_STEPS,
+  VECTOR_BLEND_MODES,
+  VECTOR_BLEND_MODE_LABELS,
+  VECTOR_BLEND_MODE_MENU,
   VECTOR_BLEND_SPACINGS,
   VECTOR_BLEND_SPACING_LABELS,
   VECTOR_BUILDER_HATCH_GAP,
@@ -8967,6 +9692,11 @@ export {
   VECTOR_EFFECT_TYPES,
   VECTOR_ENVELOPE_STYLE_OPTIONS,
   VECTOR_FILL_GAP,
+  VECTOR_FILTER_DEFAULTS,
+  VECTOR_FILTER_LABELS,
+  VECTOR_FILTER_MENU,
+  VECTOR_FILTER_PARAM_SPECS,
+  VECTOR_FILTER_TYPES,
   VECTOR_GRADIENT_INTERPOLATIONS,
   VECTOR_GRADIENT_INTERPOLATION_LABELS,
   VECTOR_GRADIENT_MAX_PERIODS,
@@ -8991,6 +9721,7 @@ export {
   VECTOR_STROKE_ALIGN_LABELS,
   VECTOR_STROKE_GRADIENT_MODES,
   VECTOR_STROKE_GRADIENT_MODE_LABELS,
+  VECTOR_STROKE_SETTING_KEYS,
   VECTOR_STYLE_KEYS,
   VECTOR_TOOLS,
   VECTOR_TOOL_GLYPHS,
@@ -9006,6 +9737,7 @@ export {
   VectorEditorController,
   VectorSnapTargets,
   activeVectorEffects,
+  activeVectorFilters,
   addBuilderHit,
   applyMatrix,
   applyMatrixLinear,
@@ -9037,6 +9769,7 @@ export {
   correspondMorphContours,
   createVectorCommands,
   createVectorEffect,
+  createVectorFilter,
   createVectorMorph,
   curvatureMoveAnchor,
   cutSubpathAt,
@@ -9072,6 +9805,7 @@ export {
   getAnchorWorld,
   getEditablePathIds,
   getTransformHandlePositions,
+  getVectorAppearancePanel,
   getVectorBlendControls,
   getVectorCornerWidgets,
   getVectorEffectsPanel,
@@ -9095,8 +9829,11 @@ export {
   hasStrokeExtras,
   hasVectorAppearance,
   hasVectorCorners,
+  hasVectorPaintStacks,
   hitTestVectorNode,
   hitTestVectorNodes,
+  hitTestVectorPaintLayer,
+  hitTestVectorPaintStack,
   hitTestVectorStroke,
   hitVectorGradientAnnotator,
   inferAnchorType,
@@ -9113,10 +9850,14 @@ export {
   invertMatrix,
   isCentredVectorGradient,
   isClosedBezierShape,
+  isDrawnVectorPaintLayer,
   isIdentityMatrix,
+  isPlainVectorPaintLayer,
   isUniformWidthProfile,
   isValidWarpMesh as isValidVectorMesh,
   isVectorBlendGroup,
+  isVectorBlendMode,
+  isVectorFilterType,
   isVectorGradient,
   isVectorLiveBoolean,
   isVectorTextTarget,
@@ -9141,9 +9882,13 @@ export {
   multiplyMatrices,
   nearestSegment,
   nearestStrokePosition,
+  needsVectorPaintLayers,
+  newVectorStrokeLayer,
   nextVectorCornerKind,
   nodeMatrix,
   normalizeVectorEffectParams,
+  normalizeVectorFilterParams,
+  normalizeVectorPaintStacks,
   offsetPaths,
   orderQuad as orderVectorQuad,
   parseSvgTransform,
@@ -9189,7 +9934,11 @@ export {
   sampleVectorGradientAt,
   sampleVectorPaintDefAt,
   sanitizeVectorEffects,
+  sanitizeVectorFills,
+  sanitizeVectorFilters,
   sanitizeVectorGradient,
+  sanitizeVectorStrokeSettings,
+  sanitizeVectorStrokes,
   sanitizeWidthProfile,
   scaleFor,
   scaleMatrix,
@@ -9239,6 +9988,8 @@ export {
   vectorBlendColorDistance,
   vectorBlendKeyTargets,
   vectorBlendKeys,
+  vectorBlendModeCss,
+  vectorBlendModeFromCss,
   vectorBlendRail,
   vectorBlendRailAt,
   vectorBlendSpine,
@@ -9259,6 +10010,11 @@ export {
   vectorEnvelopeMap,
   vectorEnvelopeMesh,
   vectorFillMap,
+  vectorFills,
+  vectorFilterMarkup,
+  vectorFilterParamKeys,
+  vectorFilterReach,
+  vectorFilterSvg,
   vectorGradientArea,
   vectorGradientAspect,
   vectorGradientBarPosition,
@@ -9290,9 +10046,13 @@ export {
   warpMeshRows as vectorMeshRows,
   vectorNodeBounds,
   vectorNodeEnvelope,
+  vectorNodeFilterSvg,
+  vectorNodeLocalPaintBounds,
   vectorNodeRotation,
   vectorNodeToBezier,
   vectorOperandOperation,
+  vectorPaintLayerNodes,
+  vectorPaintSwatch,
   vectorPaintToHex,
   vectorPaintToSvg,
   vectorParentMatrix,
@@ -9308,14 +10068,19 @@ export {
   vectorShapeBuilderMap,
   vectorShearForSide,
   vectorSkewMatrix,
+  vectorStacksHaveGradient,
   vectorStrokeGradientDefs,
   vectorStrokeLineArea,
   vectorStrokeOutline,
   vectorStrokeOutlinePath,
   vectorStrokeParts,
   vectorStrokeReach,
+  vectorStrokeSettings,
+  vectorStrokeStackReach,
   vectorStrokeSvgParts,
   vectorStrokeWidthGeometry,
+  vectorStrokes,
+  vectorTargetPaint,
   vectorToolLabel,
   warpPresetGrid as vectorWarpPresetGrid,
   warpPresetMesh as vectorWarpPresetMesh,
@@ -9328,6 +10093,9 @@ export {
   widthProfilePresetId,
   widthProfileToAttribute,
   wigglePaths,
+  withVectorFills,
+  withVectorStrokes,
+  withVectorTargetPaint,
   zigzagPaths
 };
 //# sourceMappingURL=index.js.map