@pixerate/editor-react 0.68.1 → 0.69.0

package/dist/vector/index.js

@@ -187,7 +187,8 @@ function VectorGradientAnnotator({ annotator: g, accentColor = THEME2.accent })
 }
 function VectorFilterDefs({ filters }) {
   if (!filters.length) return null;
-  const primitive = (p, key) => React2.createElement(p.tag, { key, ...p.attrs }, p.children?.map(primitive));
+  const props = (attrs) => Object.fromEntries(Object.entries(attrs).map(([k, v]) => [k.replace(/-([a-z])/g, (_, c) => c.toUpperCase()), v]));
+  const primitive = (p, key) => React2.createElement(p.tag, { key, ...props(p.attrs) }, p.children?.map(primitive));
   return /* @__PURE__ */ jsx2("defs", { children: filters.map((f) => /* @__PURE__ */ jsx2("filter", { id: f.id, filterUnits: "userSpaceOnUse", x: f.x, y: f.y, width: f.width, height: f.height, colorInterpolationFilters: "sRGB", children: f.primitives.map(primitive) }, f.id)) });
 }
 var blendStyle = (blendMode) => blendMode ? { mixBlendMode: blendMode } : void 0;
@@ -197,11 +198,12 @@ function VectorSceneNodes({ nodes }) {
       "g",
       {
         "data-vector-id": node.id,
+        "data-vector-mask": node.mask?.type,
         transform: node.transform,
         opacity: node.opacity < 1 ? node.opacity : void 0,
         filter: node.filter,
         style: blendStyle(node.blendMode),
-        children: /* @__PURE__ */ jsx2(VectorSceneNodes, { nodes: node.children })
+        children: node.mask ? /* @__PURE__ */ jsx2(VectorMaskedNodes, { mask: node.mask, nodes: node.children }) : /* @__PURE__ */ jsx2(VectorSceneNodes, { nodes: node.children })
       },
       node.id
     ) : node.layers ? (
@@ -233,6 +235,13 @@ function VectorSceneNodes({ nodes }) {
     )
   ) });
 }
+function VectorMaskedNodes({ mask, nodes }) {
+  const b = mask.bounds;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("defs", { children: mask.clip ? /* @__PURE__ */ jsx2("clipPath", { id: mask.id, children: mask.clip.map((c, i) => /* @__PURE__ */ jsx2("path", { d: c.d, clipRule: c.clipRule }, i)) }) : b && /* @__PURE__ */ jsx2("mask", { id: mask.id, maskUnits: "userSpaceOnUse", x: b.x, y: b.y, width: b.width, height: b.height, style: mask.type === "alpha" ? { maskType: "alpha" } : void 0, children: mask.filter ? /* @__PURE__ */ jsx2("g", { filter: mask.filter, children: /* @__PURE__ */ jsx2(VectorSceneNodes, { nodes: mask.nodes ?? [] }) }) : /* @__PURE__ */ jsx2(VectorSceneNodes, { nodes: mask.nodes ?? [] }) }) }),
+    /* @__PURE__ */ jsx2("g", { "data-vector-masked": "", clipPath: mask.clip ? `url(#${mask.id})` : void 0, mask: mask.clip ? void 0 : `url(#${mask.id})`, children: /* @__PURE__ */ jsx2(VectorSceneNodes, { nodes }) })
+  ] });
+}
 function VectorPaintPath({
   paint,
   d,
@@ -460,6 +469,21 @@ function VectorCanvas({
             /* @__PURE__ */ jsx2("circle", { cx: w.x, cy: w.y, r: THEME2.cornerWidgetRadius + (w.hovered ? 1 : 0), fill: THEME2.handleFill, stroke: accentColor }),
             /* @__PURE__ */ jsx2("circle", { cx: w.x, cy: w.y, r: 1.5, fill: accentColor })
           ] }, `corner:${w.ref.nodeId}:${w.ref.subpath}:${w.ref.index}`)),
+          overlay.masks.map((m) => /* @__PURE__ */ jsx2(
+            "path",
+            {
+              "data-vector-mask-indicator": m.id,
+              "data-mask-type": m.type,
+              "data-inverted": m.invert || void 0,
+              d: m.d,
+              fill: "none",
+              stroke: THEME2.mask,
+              strokeWidth: m.editing ? 1.5 : 1,
+              strokeDasharray: m.editing ? void 0 : THEME2.maskDash,
+              opacity: m.enabled ? 1 : 0.5
+            },
+            `mask:${m.id}`
+          )),
           overlay.blend.spines.map((sp) => /* @__PURE__ */ jsxs2("g", { "data-vector-blend-spine": sp.id, "data-replaced": sp.replaced || void 0, children: [
             /* @__PURE__ */ jsx2("path", { d: sp.d, fill: "none", stroke: accentColor, strokeDasharray: "4 3" }),
             sp.keys.map((k, i) => /* @__PURE__ */ jsx2("circle", { cx: k.x, cy: k.y, r: THEME2.handleRadius, fill: THEME2.handleFill, stroke: accentColor }, i))
@@ -607,6 +631,7 @@ import {
   applyVectorBlendOptions,
   getVectorBlendControls,
   getVectorSelectionStyle,
+  isVectorMaskGroup,
   widthProfilePreset,
   widthProfilePresetId,
   vectorPaintToHex as vectorPaintToHex2,
@@ -1080,6 +1105,124 @@ function VectorEnvelopePanel({ controller, className }) {
   ] });
 }
 
+// src/vector/VectorMaskPanel.tsx
+import { VECTOR_MASK_TYPE_OPTIONS, getVectorMaskPanel } from "@pixerate/editor/vector";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var buttonClass4 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+var selectClass4 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+function VectorMaskPanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const panel = getVectorMaskPanel(state);
+  if (!panel) return null;
+  const g = panel.group;
+  const ids = g ? [g.id] : void 0;
+  return /* @__PURE__ */ jsxs6("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-mask-panel": "", "aria-label": "Mask", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx6("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Mask" }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          "data-vector-mask-action": "clip",
+          className: buttonClass4,
+          title: panel.makeHint ?? "Make Clipping Mask: the topmost object clips the others",
+          "aria-label": "Make Clipping Mask",
+          disabled: !panel.canMake,
+          onClick: () => controller.makeMask("clip"),
+          children: "Clip"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          "data-vector-mask-action": "opacity",
+          className: buttonClass4,
+          title: panel.makeHint ?? "Make Opacity Mask: the topmost object fades the others by its brightness",
+          "aria-label": "Make Opacity Mask",
+          disabled: !panel.canMake,
+          onClick: () => controller.makeMask("luminance"),
+          children: "Opacity"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          "data-vector-mask-action": "release",
+          className: buttonClass4,
+          title: "Release: the mask goes back on top and draws as itself",
+          "aria-label": "Release Mask",
+          disabled: !g,
+          onClick: () => controller.releaseMask({ ids }),
+          children: "Release"
+        }
+      )
+    ] }),
+    g && /* @__PURE__ */ jsxs6("div", { className: "space-y-2", "data-vector-mask-group": g.id, "data-mask-type": g.type, children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx6(
+          "select",
+          {
+            "aria-label": "Mask type",
+            className: selectClass4,
+            value: g.type,
+            title: VECTOR_MASK_TYPE_OPTIONS.find((o) => o.value === g.type)?.title,
+            onChange: (e) => controller.setMaskOptions({ type: e.target.value }, { ids }),
+            children: VECTOR_MASK_TYPE_OPTIONS.map((o) => /* @__PURE__ */ jsx6("option", { value: o.value, title: o.title, children: o.label }, o.value))
+          }
+        ),
+        /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1 text-xs text-foreground", title: "Show the contents where the mask hides them", children: [
+          /* @__PURE__ */ jsx6("input", { type: "checkbox", "aria-label": "Invert mask", checked: g.invert, onChange: (e) => controller.setMaskOptions({ invert: e.target.checked }, { ids }) }),
+          "Invert"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            "data-vector-mask-action": "edit-mask",
+            className: buttonClass4,
+            "aria-pressed": g.editing === "mask",
+            title: "Edit Mask: select the mask (a path opens for anchor editing)",
+            "aria-label": "Edit Mask",
+            onClick: () => controller.editMask({ id: g.id }),
+            children: "Edit mask"
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            "data-vector-mask-action": "edit-contents",
+            className: buttonClass4,
+            "aria-pressed": g.editing === "contents",
+            title: "Edit Contents: select what the mask masks",
+            "aria-label": "Edit Contents",
+            disabled: !g.contents.length,
+            onClick: () => controller.editMaskContents({ id: g.id }),
+            children: "Contents"
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            "data-vector-mask-action": "toggle",
+            className: buttonClass4,
+            "aria-pressed": g.enabled,
+            title: g.enabled ? "Turn the mask off (hide it): the contents draw whole" : "Turn the mask on",
+            "aria-label": "Mask on",
+            onClick: () => controller.setMaskOptions({ enabled: !g.enabled }, { ids }),
+            children: g.enabled ? "On" : "Off"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
 // src/vector/VectorGradientEditor.tsx
 import {
   VECTOR_GRADIENT_TYPES,
@@ -1093,10 +1236,10 @@ import {
   getVectorGradientEditor,
   vectorPaintToHex
 } from "@pixerate/editor/vector";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var selectClass4 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var selectClass5 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
 var numberClass4 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
-var buttonClass4 = "inline-flex h-7 min-w-7 items-center justify-center rounded border border-border bg-background px-1.5 text-xs text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+var buttonClass5 = "inline-flex h-7 min-w-7 items-center justify-center rounded border border-border bg-background px-1.5 text-xs text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
 var percent = (v) => Math.round(v * 1e3) / 10;
 function VectorGradientEditor({ controller, className }) {
   const state = useVectorEditorState(controller);
@@ -1111,23 +1254,23 @@ function VectorGradientEditor({ controller, className }) {
       controller.setStyle({ [ed.target]: vectorPaintToHex(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
     } else controller.setGradient({ type: value });
   };
-  return /* @__PURE__ */ jsxs6("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx6("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
-      ["fill", "stroke"].map((t) => /* @__PURE__ */ jsx6("button", { type: "button", className: buttonClass4, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
-      ed.mixed && /* @__PURE__ */ jsx6("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+  return /* @__PURE__ */ jsxs7("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx7("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
+      ["fill", "stroke"].map((t) => /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass5, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
+      ed.mixed && /* @__PURE__ */ jsx7("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx6("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
-      /* @__PURE__ */ jsxs6("select", { "aria-label": "Gradient type", className: selectClass4, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
-        /* @__PURE__ */ jsx6("option", { value: "solid", children: "Solid" }),
-        VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ jsx6("option", { value: t, children: VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx7("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
+      /* @__PURE__ */ jsxs7("select", { "aria-label": "Gradient type", className: selectClass5, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
+        /* @__PURE__ */ jsx7("option", { value: "solid", children: "Solid" }),
+        VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ jsx7("option", { value: t, children: VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
       ] }),
-      /* @__PURE__ */ jsx6("button", { type: "button", className: buttonClass4, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
+      /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass5, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
     ] }),
-    g && /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      /* @__PURE__ */ jsxs6("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
-        /* @__PURE__ */ jsx6(
+    g && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsxs7("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
+        /* @__PURE__ */ jsx7(
           "div",
           {
             role: "button",
@@ -1141,7 +1284,7 @@ function VectorGradientEditor({ controller, className }) {
             }
           }
         ),
-        ed.stops.map((s) => /* @__PURE__ */ jsx6(
+        ed.stops.map((s) => /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -1155,8 +1298,8 @@ function VectorGradientEditor({ controller, className }) {
           s.index
         ))
       ] }),
-      sel && /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
-        /* @__PURE__ */ jsx6(
+      sel && /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
+        /* @__PURE__ */ jsx7(
           "input",
           {
             type: "color",
@@ -1167,9 +1310,9 @@ function VectorGradientEditor({ controller, className }) {
             onBlur: end
           }
         ),
-        /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Opacity",
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               type: "number",
@@ -1186,9 +1329,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "At",
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               type: "number",
@@ -1205,9 +1348,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        !sel.last && /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        !sel.last && /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Midpoint",
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               type: "number",
@@ -1224,15 +1367,15 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx6("button", { type: "button", className: buttonClass4, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
+        /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass5, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
       ] }),
-      /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx6("span", { className: "w-16", children: "Colours" }),
-        /* @__PURE__ */ jsx6("select", { "aria-label": "Gradient interpolation", className: selectClass4, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ jsx6("option", { value: i, children: VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
+      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx7("span", { className: "w-16", children: "Colours" }),
+        /* @__PURE__ */ jsx7("select", { "aria-label": "Gradient interpolation", className: selectClass5, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ jsx7("option", { value: i, children: VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
       ] }),
-      /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx6("span", { className: "w-16", children: "Smooth" }),
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx7("span", { className: "w-16", children: "Smooth" }),
+        /* @__PURE__ */ jsx7(
           "input",
           {
             type: "range",
@@ -1248,23 +1391,23 @@ function VectorGradientEditor({ controller, className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx6("span", { className: "w-16", children: "Spread" }),
-        /* @__PURE__ */ jsx6("select", { "aria-label": "Gradient spread", className: selectClass4, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ jsx6("option", { value: sp, children: VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
+      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx7("span", { className: "w-16", children: "Spread" }),
+        /* @__PURE__ */ jsx7("select", { "aria-label": "Gradient spread", className: selectClass5, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ jsx7("option", { value: sp, children: VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
       ] }),
-      ed.target === "stroke" && /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx6("span", { className: "w-16", children: "On stroke" }),
-        /* @__PURE__ */ jsx6("select", { "aria-label": "Gradient on stroke", className: selectClass4, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ jsx6("option", { value: m, children: VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
+      ed.target === "stroke" && /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx7("span", { className: "w-16", children: "On stroke" }),
+        /* @__PURE__ */ jsx7("select", { "aria-label": "Gradient on stroke", className: selectClass5, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ jsx7("option", { value: m, children: VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
       ] })
     ] })
   ] });
 }
 
 // src/vector/VectorToolbar.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var VECTOR_SNAP_TITLE = "Snap to objects";
 var modKeyLabel = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "") ? "\u2318" : "Ctrl";
-var buttonClass5 = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+var buttonClass6 = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
 function VectorToolbar({
   controller,
   tools = VECTOR_TOOLS,
@@ -1281,16 +1424,17 @@ function VectorToolbar({
   const points = state.tool === "direct" ? state.selectedAnchors.length : 0;
   const editing = state.editing;
   const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === "group");
+  const maskSelected = state.selection.some((id) => isVectorMaskGroup(controller.getNode(id)));
   const [live, setLive] = React4.useState(false);
   const booleanDisabled = live ? count < 1 : count < 2;
-  const act = (label, title, run, disabled = false) => /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass5, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
-  return /* @__PURE__ */ jsxs7("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ jsx7(
+  const act = (label, title, run, disabled = false) => /* @__PURE__ */ jsx8("button", { type: "button", className: buttonClass6, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
+  return /* @__PURE__ */ jsxs8("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
         "data-vector-tool": tool,
-        className: buttonClass5,
+        className: buttonClass6,
         "aria-pressed": state.tool === tool,
         title: `${vectorToolLabel(tool)} (${VECTOR_TOOL_SHORTCUTS[tool]})`,
         "aria-label": vectorToolLabel(tool),
@@ -1299,16 +1443,16 @@ function VectorToolbar({
       },
       tool
     )) }),
-    showHistory && /* @__PURE__ */ jsxs7("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
+    showHistory && /* @__PURE__ */ jsxs8("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
       act("\u21B6", state.canUndo ? `Undo ${state.undoLabel}` : "Undo", () => controller.undo(), !state.canUndo),
       act("\u21B7", state.canRedo ? `Redo ${state.redoLabel}` : "Redo", () => controller.redo(), !state.canRedo)
     ] }),
-    showSnap && /* @__PURE__ */ jsx7("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: /* @__PURE__ */ jsx7(
+    showSnap && /* @__PURE__ */ jsx8("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
         "data-vector-snap": "",
-        className: buttonClass5,
+        className: buttonClass6,
         "aria-pressed": state.snap.objects,
         title: `${VECTOR_SNAP_TITLE} (hold ${modKeyLabel()} to bypass)`,
         "aria-label": VECTOR_SNAP_TITLE,
@@ -1316,13 +1460,13 @@ function VectorToolbar({
         children: "Snap"
       }
     ) }),
-    showPathEdit && /* @__PURE__ */ jsxs7("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
-      VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ jsx7(
+    showPathEdit && /* @__PURE__ */ jsxs8("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
+      VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
           "data-vector-path-action": a.id,
-          className: buttonClass5,
+          className: buttonClass6,
           title: a.shortcut ? `${a.title} (${modKeyLabel()}+${a.shortcut})` : a.title,
           "aria-label": a.title,
           disabled: !a.enabled(count, points),
@@ -1331,12 +1475,12 @@ function VectorToolbar({
         },
         a.id
       )),
-      VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ jsx7(
+      VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
           "data-vector-edit": t.key,
-          className: buttonClass5,
+          className: buttonClass6,
           "aria-pressed": editing[t.key],
           title: t.title,
           "aria-label": t.title,
@@ -1345,9 +1489,9 @@ function VectorToolbar({
         },
         t.key
       )),
-      state.tool === "pencil" && /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "pencil" && /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Smoothing",
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "range",
@@ -1361,9 +1505,9 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "eraser" && /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "eraser" && /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Size",
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "number",
@@ -1379,12 +1523,12 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "paintBucket" && /* @__PURE__ */ jsx7(
+      state.tool === "paintBucket" && /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
           "data-vector-fill-gap": "",
-          className: buttonClass5,
+          className: buttonClass6,
           "aria-pressed": editing.fillGap > 0,
           title: "Close small gaps between path ends when filling",
           "aria-label": "Close gaps",
@@ -1393,12 +1537,12 @@ function VectorToolbar({
         }
       )
     ] }),
-    showDistort && /* @__PURE__ */ jsx7("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ jsx7(
+    showDistort && /* @__PURE__ */ jsx8("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
         "data-vector-free-distort": "",
-        className: buttonClass5,
+        className: buttonClass6,
         "aria-pressed": state.freeDistort,
         title: `Free Distort: drag a corner of the selection box to distort in perspective (Shift+Alt+${modKeyLabel()}: symmetric perspective; ${modKeyLabel()}-drag a side to skew)`,
         "aria-label": "Free Distort",
@@ -1406,15 +1550,15 @@ function VectorToolbar({
         children: "Distort"
       }
     ) }),
-    showBlend && /* @__PURE__ */ jsx7(VectorBlendControls, { controller }),
-    showArrange && /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      /* @__PURE__ */ jsxs7("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
-        /* @__PURE__ */ jsx7(
+    showBlend && /* @__PURE__ */ jsx8(VectorBlendControls, { controller }),
+    showArrange && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsxs8("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
+        /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
             "data-vector-live-boolean": "",
-            className: buttonClass5,
+            className: buttonClass6,
             "aria-pressed": live,
             title: "Live booleans: keep the shapes editable",
             "aria-label": "Live booleans",
@@ -1427,14 +1571,16 @@ function VectorToolbar({
         act("\u2229", "Intersect", () => controller.booleanOp("intersect", { live }), booleanDisabled),
         act("\u22BB", "Exclude", () => controller.booleanOp("exclude", { live }), booleanDisabled),
         act("G", "Group", () => controller.group(), count < 1),
-        act("U", "Ungroup", () => controller.ungroup(), !groupSelected)
+        act("U", "Ungroup", () => controller.ungroup(), !groupSelected),
+        act("\u25D0", `Make Clipping Mask (${modKeyLabel()}+7)`, () => controller.makeMask("clip"), count < 2),
+        act("\u25D1", `Release Mask (${modKeyLabel()}+Alt+7)`, () => controller.releaseMask(), !maskSelected)
       ] }),
-      /* @__PURE__ */ jsx7("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
           "data-vector-pathfinder": a.id,
-          className: buttonClass5,
+          className: buttonClass6,
           title: a.title,
           "aria-label": a.title,
           disabled: count < a.min,
@@ -1443,7 +1589,7 @@ function VectorToolbar({
         },
         a.id
       )) }),
-      /* @__PURE__ */ jsxs7("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
         act("\u21C8", "Bring to Front", () => controller.arrange("front"), count < 1),
         act("\u21CA", "Send to Back", () => controller.arrange("back"), count < 1),
         act("\u21E4", "Align Left", () => controller.align("left"), count < 1),
@@ -1461,19 +1607,19 @@ function VectorBlendControls({ controller }) {
   const blend = getVectorBlendControls(state);
   const o = blend.options;
   const selected = blend.ids.length > 0;
-  return /* @__PURE__ */ jsxs7("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
-    /* @__PURE__ */ jsx7("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass5, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs8("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
+    /* @__PURE__ */ jsx8("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass6, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
+    /* @__PURE__ */ jsx8(
       "select",
       {
         "aria-label": "Blend spacing",
         className: "h-7 rounded border border-border bg-background px-1 text-xs",
         value: o.spacing,
         onChange: (e) => applyVectorBlendOptions(controller, { spacing: e.target.value }),
-        children: VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ jsx7("option", { value: sp, children: VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
+        children: VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ jsx8("option", { value: sp, children: VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
       }
     ),
-    o.spacing !== "smoothColor" && /* @__PURE__ */ jsx7(
+    o.spacing !== "smoothColor" && /* @__PURE__ */ jsx8(
       "input",
       {
         type: "number",
@@ -1489,12 +1635,12 @@ function VectorBlendControls({ controller }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "orient",
-        className: buttonClass5,
+        className: buttonClass6,
         "aria-pressed": o.orientToSpine,
         title: "Orient steps to the spine",
         "aria-label": "Orient to spine",
@@ -1502,12 +1648,12 @@ function VectorBlendControls({ controller }) {
         children: "\u293F"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "spine",
-        className: buttonClass5,
+        className: buttonClass6,
         title: "Replace Spine (select a blend and a path)",
         "aria-label": "Replace Spine",
         disabled: !blend.canReplaceSpine,
@@ -1515,11 +1661,11 @@ function VectorBlendControls({ controller }) {
         children: "\u2307"
       }
     ),
-    /* @__PURE__ */ jsx7("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass5, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
-    /* @__PURE__ */ jsx7("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass5, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
+    /* @__PURE__ */ jsx8("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass6, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
+    /* @__PURE__ */ jsx8("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass6, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
   ] });
 }
-var selectClass5 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var selectClass6 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
 var numberClass5 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
 function VectorStylePanel({ controller, className }) {
   const state = useVectorEditorState(controller);
@@ -1551,17 +1697,17 @@ function VectorStylePanel({ controller, className }) {
     if (style) controller.setWidthProfile(id);
     else controller.setDefaults({ strokeWidthProfile: widthProfilePreset(id)?.length ? widthProfilePreset(id) : null });
   };
-  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ jsx7("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
+  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ jsx8("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
   const arrowRow = (end, label) => {
     const key = end === "start" ? "startArrow" : "endArrow";
     const scaleKey = end === "start" ? "startArrowScale" : "endArrowScale";
-    return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ jsx7("span", { className: "w-16 text-xs text-foreground", children: label }),
-      /* @__PURE__ */ jsxs7("select", { "aria-label": `${label} arrowhead`, className: selectClass5, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
-        /* @__PURE__ */ jsx7("option", { value: "", children: "None" }),
-        VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ jsx7("option", { value: h, children: VECTOR_ARROWHEAD_LABELS[h] }, h))
+    return /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ jsx8("span", { className: "w-16 text-xs text-foreground", children: label }),
+      /* @__PURE__ */ jsxs8("select", { "aria-label": `${label} arrowhead`, className: selectClass6, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
+        /* @__PURE__ */ jsx8("option", { value: "", children: "None" }),
+        VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ jsx8("option", { value: h, children: VECTOR_ARROWHEAD_LABELS[h] }, h))
       ] }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "input",
         {
           type: "number",
@@ -1587,12 +1733,12 @@ function VectorStylePanel({ controller, className }) {
     const paint = source[key];
     const hex = vectorPaintToHex2(paint);
     const on = paint !== null && paint !== "none";
-    return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ jsxs7("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx7("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
+    return /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ jsxs8("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
         label
       ] }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "input",
         {
           type: "color",
@@ -1603,18 +1749,18 @@ function VectorStylePanel({ controller, className }) {
           onChange: (e) => apply({ [key]: e.target.value })
         }
       ),
-      on && !hex && /* @__PURE__ */ jsx7("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
-      style?.mixed[key] && /* @__PURE__ */ jsx7("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+      on && !hex && /* @__PURE__ */ jsx8("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
+      style?.mixed[key] && /* @__PURE__ */ jsx8("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] });
   };
-  return /* @__PURE__ */ jsxs7("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
-    /* @__PURE__ */ jsx7("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
+  return /* @__PURE__ */ jsxs8("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
+    /* @__PURE__ */ jsx8("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
     paintRow("fill", "Fill"),
     paintRow("stroke", "Stroke"),
-    style && /* @__PURE__ */ jsx7(VectorGradientEditor, { controller }),
-    /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ jsx7("span", { className: "w-16", children: "Width" }),
-      /* @__PURE__ */ jsx7(
+    style && /* @__PURE__ */ jsx8(VectorGradientEditor, { controller }),
+    /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx8("span", { className: "w-16", children: "Width" }),
+      /* @__PURE__ */ jsx8(
         "input",
         {
           type: "number",
@@ -1630,33 +1776,33 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
-      /* @__PURE__ */ jsx7("span", { className: "w-16", children: "Align" }),
-      /* @__PURE__ */ jsx7("select", { "aria-label": "Stroke alignment", className: selectClass5, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(VECTOR_STROKE_ALIGN_LABELS2).map((a) => /* @__PURE__ */ jsx7("option", { value: a, children: VECTOR_STROKE_ALIGN_LABELS2[a] }, a)) }),
+    /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
+      /* @__PURE__ */ jsx8("span", { className: "w-16", children: "Align" }),
+      /* @__PURE__ */ jsx8("select", { "aria-label": "Stroke alignment", className: selectClass6, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(VECTOR_STROKE_ALIGN_LABELS2).map((a) => /* @__PURE__ */ jsx8("option", { value: a, children: VECTOR_STROKE_ALIGN_LABELS2[a] }, a)) }),
       mixed("strokeAlign")
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
-      /* @__PURE__ */ jsx7("span", { className: "w-16", children: "Profile" }),
-      /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
+      /* @__PURE__ */ jsx8("span", { className: "w-16", children: "Profile" }),
+      /* @__PURE__ */ jsxs8(
         "select",
         {
           "aria-label": "Width profile",
-          className: selectClass5,
+          className: selectClass6,
           value: source.widthProfile,
           onChange: (e) => {
             if (e.target.value !== "custom") setProfile(e.target.value);
           },
           children: [
-            VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ jsx7("option", { value: p.id, children: p.label }, p.id)),
-            source.widthProfile === "custom" && /* @__PURE__ */ jsx7("option", { value: "custom", disabled: true, children: "Custom" })
+            VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ jsx8("option", { value: p.id, children: p.label }, p.id)),
+            source.widthProfile === "custom" && /* @__PURE__ */ jsx8("option", { value: "custom", disabled: true, children: "Custom" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
-          className: buttonClass5,
+          className: buttonClass6,
           title: "Reset to uniform width",
           "aria-label": "Reset to uniform width",
           disabled: source.widthProfile === "uniform" && !style?.mixed.widthProfile,
@@ -1666,20 +1812,20 @@ function VectorStylePanel({ controller, className }) {
       ),
       mixed("widthProfile")
     ] }),
-    source.hasOpenPath && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    source.hasOpenPath && /* @__PURE__ */ jsxs8(Fragment3, { children: [
       arrowRow("start", "Start"),
       arrowRow("end", "End"),
-      (source.startArrow || source.endArrow) && /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
-        /* @__PURE__ */ jsx7("span", { className: "w-16", children: "Heads" }),
-        /* @__PURE__ */ jsxs7("select", { "aria-label": "Arrowhead alignment", className: selectClass5, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
-          /* @__PURE__ */ jsx7("option", { value: "extend", children: "Tip past end" }),
-          /* @__PURE__ */ jsx7("option", { value: "tip", children: "Tip at end" })
+      (source.startArrow || source.endArrow) && /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
+        /* @__PURE__ */ jsx8("span", { className: "w-16", children: "Heads" }),
+        /* @__PURE__ */ jsxs8("select", { "aria-label": "Arrowhead alignment", className: selectClass6, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
+          /* @__PURE__ */ jsx8("option", { value: "extend", children: "Tip past end" }),
+          /* @__PURE__ */ jsx8("option", { value: "tip", children: "Tip at end" })
         ] })
       ] })
     ] }),
-    source.corners > 0 && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
-      /* @__PURE__ */ jsx7("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
-      /* @__PURE__ */ jsx7(
+    source.corners > 0 && /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
+      /* @__PURE__ */ jsx8("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
+      /* @__PURE__ */ jsx8(
         "input",
         {
           type: "number",
@@ -1694,12 +1840,12 @@ function VectorStylePanel({ controller, className }) {
           }
         }
       ),
-      /* @__PURE__ */ jsx7("select", { "aria-label": "Corner kind", className: selectClass5, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ jsx7("option", { value: k, children: VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
+      /* @__PURE__ */ jsx8("select", { "aria-label": "Corner kind", className: selectClass6, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ jsx8("option", { value: k, children: VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
       mixed("cornerRadius")
     ] }),
-    style && /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ jsx7("span", { className: "w-16", children: "Opacity" }),
-      /* @__PURE__ */ jsx7(
+    style && /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx8("span", { className: "w-16", children: "Opacity" }),
+      /* @__PURE__ */ jsx8(
         "input",
         {
           type: "range",
@@ -1713,20 +1859,21 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    style && /* @__PURE__ */ jsx7(VectorAppearancePanel, { controller }),
-    style && /* @__PURE__ */ jsx7(VectorEffectsPanel, { controller }),
-    style && /* @__PURE__ */ jsx7(VectorEnvelopePanel, { controller })
+    style && /* @__PURE__ */ jsx8(VectorAppearancePanel, { controller }),
+    style && /* @__PURE__ */ jsx8(VectorEffectsPanel, { controller }),
+    style && /* @__PURE__ */ jsx8(VectorEnvelopePanel, { controller }),
+    style && /* @__PURE__ */ jsx8(VectorMaskPanel, { controller })
   ] });
 }
 
 // src/vector/VectorEditor.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }) {
-  return /* @__PURE__ */ jsxs8("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
-    /* @__PURE__ */ jsx8(VectorToolbar, { controller, tools }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ jsx8("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ jsx8(VectorCanvas, { controller, ...canvasProps }) }),
-      showStylePanel && /* @__PURE__ */ jsx8(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
+  return /* @__PURE__ */ jsxs9("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ jsx9(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ jsx9("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ jsx9(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ jsx9(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
     ] })
   ] });
 }
@@ -1740,6 +1887,8 @@ export {
   VectorGradientAnnotator,
   VectorGradientDefs,
   VectorGradientEditor,
+  VectorMaskPanel,
+  VectorMaskedNodes,
   VectorSceneNodes,
   VectorStylePanel,
   VectorToolbar,