@pixerate/editor-react 0.76.0 → 0.78.0

package/dist/image-editor/index.cjs

@@ -38,13 +38,16 @@ __export(image_editor_exports, {
   FreeTransformOptionsBar: () => FreeTransformOptionsBar,
   Histogram: () => Histogram,
   ImageEditor: () => ImageEditor,
+  ImageProviderEffectsPanel: () => ImageProviderEffectsPanel,
   LayerEffectsPanel: () => LayerEffectsPanel,
   LayersPanel: () => LayersPanel,
+  PaintGradientEditor: () => PaintGradientEditor,
   RefineEdgePanel: () => RefineEdgePanel,
   SelectionOptionsBar: () => SelectionOptionsBar,
   ShapeOptionsBar: () => ShapeOptionsBar,
   TypeOptionsBar: () => TypeOptionsBar,
   useImageEditor: () => useImageEditor,
+  useImageEffectsTools: () => useImageEffectsTools,
   useImageHistogram: () => useImageHistogram
 });
 module.exports = __toCommonJS(image_editor_exports);
@@ -206,10 +209,17 @@ function useImageEditor(options = {}) {
     [controller, state, historyTicks, histogram]
   );
 }
+function useImageEffectsTools(registry, controller, options = {}) {
+  const { id, namespace, readOnly } = options;
+  (0, import_react.useEffect)(() => {
+    if (!registry) return;
+    return registry.register((0, import_image_editor.createImageEffectsToolProvider)(controller, { id, namespace, readOnly }));
+  }, [registry, controller, id, namespace, readOnly]);
+}
 
 // src/image-editor/ImageEditor.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_image_editor15 = require("@pixerate/editor/image-editor");
+var import_react21 = __toESM(require("react"), 1);
+var import_image_editor18 = require("@pixerate/editor/image-editor");
 
 // src/image-editor/ControlSlider.tsx
 var import_image_editor2 = require("@pixerate/editor/image-editor");
@@ -1258,17 +1268,840 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
   ] });
 };
 
-// src/image-editor/BrushOptionsBar.tsx
-var import_react7 = require("react");
+// src/image-editor/ImageProviderEffectsPanel.tsx
+var import_react12 = __toESM(require("react"), 1);
 var import_image_editor8 = require("@pixerate/editor/image-editor");
+
+// src/effects/useEffects.ts
+var import_react7 = require("react");
+function useEffects(host, provider) {
+  (0, import_react7.useEffect)(() => {
+    if (!host || !provider) return;
+    return host.useEffects(provider);
+  }, [host, provider]);
+}
+function useEffectDescription(provider, effect) {
+  const [state, setState] = (0, import_react7.useState)({ key: "", description: null, error: null });
+  const key = provider && effect ? `${provider.id}:${effect}` : "";
+  (0, import_react7.useEffect)(() => {
+    if (!provider || !effect) return;
+    let live = true;
+    Promise.resolve().then(() => provider.describe(effect)).then(
+      (description) => live && setState({ key, description, error: null }),
+      (e) => live && setState({ key, description: null, error: e instanceof Error ? e.message : String(e) })
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider, effect, key]);
+  return state.key === key ? { description: state.description, error: state.error } : { description: null, error: null };
+}
+
+// src/effects/EffectThumbnail.tsx
+var import_react8 = require("react");
+var import_effects = require("@pixerate/editor/effects");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function EffectThumbnail({ provider, effect, width = 96, height = 54, className = "" }) {
+  const ref = (0, import_react8.useRef)(null);
+  const [failed, setFailed] = (0, import_react8.useState)(effect.kind === "motion");
+  (0, import_react8.useEffect)(() => {
+    if (effect.kind === "motion") return;
+    let live = true;
+    (0, import_effects.renderEffectThumbnail)(provider, effect, { width, height }).then(
+      (pixels) => {
+        const ctx = live ? ref.current?.getContext("2d") : null;
+        if (!ctx || typeof ImageData === "undefined") return;
+        ctx.putImageData(new ImageData(new Uint8ClampedArray(pixels.data), pixels.width, pixels.height), 0, 0);
+      },
+      () => live && setFailed(true)
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider, effect, width, height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: `relative overflow-hidden rounded border border-border bg-[repeating-conic-gradient(#8884_0_25%,transparent_0_50%)] bg-[length:12px_12px] ${className}`,
+      style: { aspectRatio: `${width} / ${height}` },
+      "data-effect-thumbnail": effect.id,
+      children: failed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute inset-0 flex items-center justify-center text-[10px] text-muted-foreground", children: effect.kind === "motion" ? "Motion" : "No preview" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("canvas", { ref, width, height, className: "h-full w-full", "aria-hidden": "true" })
+    }
+  );
+}
+
+// src/effects/EffectsBrowser.tsx
+var import_react9 = require("react");
+var import_effects2 = require("@pixerate/editor/effects");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function EffectsBrowser({ provider, uses, onPick, thumbnails = true, title = "Effects", className = "" }) {
+  const [all, setAll] = (0, import_react9.useState)([]);
+  const [query, setQuery] = (0, import_react9.useState)("");
+  const [category, setCategory] = (0, import_react9.useState)("");
+  const [use, setUse] = (0, import_react9.useState)("");
+  const [error, setError] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!provider) return setAll([]);
+    let live = true;
+    Promise.resolve().then(() => provider.list()).then(
+      (list) => live && (setAll(list), setError(null)),
+      (e) => live && setError(e instanceof Error ? e.message : String(e))
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider]);
+  const [found, setFound] = (0, import_react9.useState)([]);
+  (0, import_react9.useEffect)(() => {
+    if (!provider) return setFound([]);
+    let live = true;
+    Promise.resolve().then(() => provider.search(query, { ...category ? { category } : {}, ...use ? { use } : {} })).then((list) => live && setFound(list), () => live && setFound([]));
+    return () => {
+      live = false;
+    };
+  }, [provider, query, category, use]);
+  const allowed = (e) => (uses ? e.kind !== "motion" || uses.includes("motion") : e.kind !== "motion") && (!uses || e.uses.some((u) => uses.includes(u)));
+  const categories = (0, import_react9.useMemo)(() => [...new Set(all.filter(allowed).map((e) => e.category))], [all, uses]);
+  const shown = found.filter(allowed);
+  if (!provider)
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground ${className}`, "data-effects-browser": "", "data-effects-unavailable": "", children: "No effects provider is registered, so effects cannot be added. Effects already in the document are kept." });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: `flex flex-col gap-2 ${className}`, "data-effects-browser": "", "aria-label": "Effects browser", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-xs font-semibold", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "input",
+        {
+          type: "search",
+          className: "min-w-0 flex-1 rounded border border-border bg-transparent px-1.5 py-0.5 text-xs",
+          placeholder: "Search effects",
+          "aria-label": "Search effects",
+          value: query,
+          onChange: (e) => setQuery(e.currentTarget.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Category", value: category, onChange: (e) => setCategory(e.currentTarget.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: "All categories" }),
+        categories.map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: c, children: c }, c))
+      ] }),
+      uses && uses.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Use", value: use, onChange: (e) => setUse(e.currentTarget.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: "Any use" }),
+        uses.map((u) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: u, children: import_effects2.EFFECT_USE_LABELS[u] }, u))
+      ] })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "grid grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] gap-1.5", role: "list", children: shown.map((e) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full flex-col gap-1 rounded border border-transparent p-1 text-left hover:border-border focus-visible:border-border",
+        title: e.description ?? e.name,
+        "data-effect-id": e.id,
+        onClick: () => onPick(e),
+        children: [
+          thumbnails && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EffectThumbnail, { provider, effect: e }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "truncate text-[11px] font-medium", children: e.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "truncate text-[10px] text-muted-foreground", children: e.uses.map((u) => import_effects2.EFFECT_USE_LABELS[u]).join(" \xB7 ") })
+        ]
+      }
+    ) }, e.id)) }),
+    !shown.length && !error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects match." })
+  ] });
+}
+
+// src/effects/EffectParameters.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_effects3 = require("@pixerate/editor/effects");
+var import_parameters2 = require("@pixerate/editor/parameters");
+
+// src/parameters/fields.tsx
+var import_react10 = require("react");
+var import_parameters = require("@pixerate/editor/parameters");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var parameterInputClass = "h-7 w-full min-w-0 rounded-md border border-input bg-background px-2 text-xs text-foreground tabular-nums focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50";
+var parameterButtonClass = "inline-flex h-7 items-center justify-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
+var rangeClass = "h-4 w-full min-w-0 flex-1 cursor-pointer accent-primary disabled:cursor-not-allowed disabled:opacity-50";
+function ParameterCommitInput({ value, onCommit, multiline, className, onKeyDown, ...rest }) {
+  const commit = (el) => {
+    if (el.value !== value) onCommit(el.value, el);
+  };
+  const keyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Enter" && (!multiline || e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      commit(e.currentTarget);
+    }
+    if (e.key === "Escape") e.currentTarget.value = value;
+  };
+  const props = {
+    defaultValue: value,
+    className: className ?? parameterInputClass,
+    onBlur: (e) => commit(e.currentTarget),
+    onKeyDown: keyDown,
+    ...rest
+  };
+  return multiline ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("textarea", { ...props, className: `${props.className} h-auto min-h-[3.5rem] py-1` }, value) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { type: "text", ...props }, value);
+}
+var plainNumber = (field, value) => (0, import_parameters.formatParameterNumber)({ ...field, unit: void 0 }, value);
+function ParameterNumberInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  id,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ParameterCommitInput,
+      {
+        id,
+        inputMode: "decimal",
+        "aria-label": ariaLabel ?? (0, import_parameters.parameterLabel)(field),
+        value: plainNumber(field, value),
+        disabled: disabled || field.readOnly,
+        className: `${parameterInputClass} ${field.unit ? "pr-6" : ""}`,
+        onCommit: (text, input) => {
+          const n = (0, import_parameters.parseParameterNumberInput)(field, text);
+          if (n === null || n === value) input.value = plainNumber(field, value);
+          else onChange(n);
+        },
+        onKeyDown: (e) => {
+          if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+          e.preventDefault();
+          const step = (0, import_parameters.parameterStep)(field) * (e.shiftKey ? 10 : 1);
+          onChange((0, import_parameters.clampParameterNumber)(field, value + (e.key === "ArrowUp" ? step : -step)));
+        }
+      }
+    ),
+    field.unit && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground", children: field.unit })
+  ] });
+}
+function ParameterSlider(props) {
+  const { field, value, onChange, onGestureStart, onGestureEnd, disabled } = props;
+  const dragging = (0, import_react10.useRef)(false);
+  const end = () => {
+    if (!dragging.current) return;
+    dragging.current = false;
+    onGestureEnd?.();
+  };
+  if (!(0, import_parameters.isSliderField)(field)) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ParameterNumberInput, { ...props });
+  const step = (0, import_parameters.parameterStep)(field);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "input",
+      {
+        type: "range",
+        "aria-label": (0, import_parameters.parameterLabel)(field),
+        "aria-valuetext": (0, import_parameters.formatParameterNumber)(field, value),
+        min: field.min,
+        max: field.max,
+        step,
+        value,
+        disabled: disabled || field.readOnly,
+        className: rangeClass,
+        onPointerDown: () => {
+          if (dragging.current) return;
+          dragging.current = true;
+          onGestureStart?.();
+        },
+        onPointerUp: end,
+        onPointerCancel: end,
+        onBlur: end,
+        onChange: (e) => onChange((0, import_parameters.clampParameterNumber)(field, Number(e.target.value)))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ParameterNumberInput, { ...props, id: props.id, "aria-label": `${(0, import_parameters.parameterLabel)(field)} value` }) })
+  ] });
+}
+function ParameterToggle({ field, value, onChange, disabled, id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      id,
+      "aria-checked": value,
+      "aria-label": (0, import_parameters.parameterLabel)(field),
+      disabled: disabled || field.readOnly,
+      onClick: () => onChange(!value),
+      className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:opacity-50 ${value ? "bg-primary" : "bg-muted"}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "span",
+        {
+          className: `pointer-events-none block h-4 w-4 rounded-full bg-background shadow transition-transform ${value ? "translate-x-4" : "translate-x-0.5"}`
+        }
+      )
+    }
+  );
+}
+function ParameterSelect({ field, value, onChange, disabled, id }) {
+  const options = (0, import_parameters.getChoiceOptions)(field);
+  const off = disabled || field.readOnly;
+  if (field.control === "segmented") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "radiogroup", "aria-label": (0, import_parameters.parameterLabel)(field), className: "inline-flex flex-wrap rounded-md border border-input bg-muted p-0.5", children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": o.value === value,
+        title: o.description,
+        disabled: off,
+        onClick: () => onChange(o.value),
+        className: `rounded px-2 py-0.5 text-xs disabled:opacity-50 ${o.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+        children: (0, import_parameters.choiceOptionLabel)(o)
+      },
+      String(o.value)
+    )) });
+  }
+  const index = options.findIndex((o) => o.value === value);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "select",
+    {
+      id,
+      "aria-label": (0, import_parameters.parameterLabel)(field),
+      value: String(index),
+      disabled: off,
+      onChange: (e) => {
+        const option = options[Number(e.target.value)];
+        if (option) onChange(option.value);
+      },
+      className: parameterInputClass,
+      children: options.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: String(i), title: o.description, children: (0, import_parameters.choiceOptionLabel)(o) }, String(o.value)))
+    }
+  );
+}
+function ParameterColor({ field, value, onChange, onGestureStart, onGestureEnd, disabled, id }) {
+  const picking = (0, import_react10.useRef)(false);
+  const alpha = !!field.alpha;
+  const hex = (0, import_parameters.normalizeHexColor)(value, true) ?? "#000000ff";
+  const rgb = hex.slice(0, 7);
+  const a = hex.slice(7);
+  const off = disabled || field.readOnly;
+  const start = () => {
+    if (picking.current) return;
+    picking.current = true;
+    onGestureStart?.();
+  };
+  const end = () => {
+    if (!picking.current) return;
+    picking.current = false;
+    onGestureEnd?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "relative h-7 w-9 shrink-0 overflow-hidden rounded-md border border-input bg-[repeating-conic-gradient(#d4d4d8_0_25%,#fff_0_50%)] bg-[length:8px_8px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "absolute inset-0", style: { background: alpha ? hex : rgb } }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "input",
+          {
+            type: "color",
+            "aria-label": (0, import_parameters.parameterLabel)(field),
+            value: rgb,
+            disabled: off,
+            className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+            onChange: (e) => {
+              start();
+              onChange(alpha ? `${e.target.value}${a}` : e.target.value);
+            },
+            onBlur: end
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ParameterCommitInput,
+        {
+          id,
+          "aria-label": `${(0, import_parameters.parameterLabel)(field)} hex`,
+          value: alpha ? hex : rgb,
+          disabled: off,
+          spellCheck: false,
+          className: `${parameterInputClass} font-mono`,
+          onCommit: (text) => {
+            const next = (0, import_parameters.normalizeHexColor)(text, alpha);
+            if (next) onChange(next);
+          }
+        }
+      )
+    ] }),
+    alpha && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "input",
+      {
+        type: "range",
+        "aria-label": `${(0, import_parameters.parameterLabel)(field)} opacity`,
+        min: 0,
+        max: 255,
+        step: 1,
+        value: parseInt(a, 16),
+        disabled: off,
+        className: rangeClass,
+        onPointerDown: start,
+        onPointerUp: end,
+        onPointerCancel: end,
+        onBlur: end,
+        onChange: (e) => onChange(`${rgb}${Number(e.target.value).toString(16).padStart(2, "0")}`)
+      }
+    ),
+    field.swatches && field.swatches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-1", children: field.swatches.map((s) => {
+      const swatch = (0, import_parameters.normalizeHexColor)(s, alpha);
+      if (!swatch) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          title: swatch,
+          "aria-label": `${(0, import_parameters.parameterLabel)(field)} ${swatch}`,
+          "aria-pressed": swatch === (alpha ? hex : rgb),
+          disabled: off,
+          onClick: () => onChange(swatch),
+          className: "h-5 w-5 rounded border border-input aria-pressed:ring-1 aria-pressed:ring-primary",
+          style: { background: swatch }
+        },
+        s
+      );
+    }) })
+  ] });
+}
+function ParameterVector({ field, value, onChange, disabled, id }) {
+  const size = (0, import_parameters.vectorSize)(field);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `repeat(${size}, minmax(0, 1fr))` }, children: Array.from({ length: size }, (_, i) => {
+    const component = (0, import_parameters.vectorComponentField)(field, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex min-w-0 items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-3 shrink-0 text-[10px] uppercase text-muted-foreground", children: component.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ParameterNumberInput,
+        {
+          field: component,
+          value: value[i] ?? 0,
+          id: i === 0 ? id : void 0,
+          "aria-label": `${(0, import_parameters.parameterLabel)(field)} ${component.label}`,
+          disabled: disabled || field.readOnly,
+          onChange: (n) => onChange(Array.from({ length: size }, (_2, j) => j === i ? n : value[j] ?? 0))
+        }
+      )
+    ] }, i);
+  }) });
+}
+function ParameterImage({ field, value, onChange, disabled, id, resolveFile }) {
+  const off = disabled || field.readOnly;
+  const name = (0, import_parameters.parameterLabel)(field);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input bg-muted", children: value ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: value, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "None" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          ParameterCommitInput,
+          {
+            id,
+            "aria-label": `${name} URL`,
+            placeholder: "Image URL",
+            value: value.startsWith("data:") ? "" : value,
+            disabled: off,
+            onCommit: (text) => onChange(text.trim())
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-1", children: [
+          resolveFile && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: `${parameterButtonClass} cursor-pointer ${off ? "pointer-events-none opacity-50" : ""}`, children: [
+            "Choose file\u2026",
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "input",
+              {
+                type: "file",
+                className: "sr-only",
+                accept: field.accept ?? "image/*",
+                disabled: off,
+                "aria-label": `${name} file`,
+                onChange: async (e) => {
+                  const file = e.target.files?.[0];
+                  e.target.value = "";
+                  if (file) onChange(await resolveFile(file));
+                }
+              }
+            )
+          ] }),
+          value && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: parameterButtonClass, disabled: off, onClick: () => onChange(""), "aria-label": `Clear ${name}`, children: "Clear" })
+        ] })
+      ] })
+    ] }),
+    field.options && field.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-1", children: field.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        type: "button",
+        title: o.label ?? o.url,
+        "aria-label": o.label ?? o.url,
+        "aria-pressed": o.url === value,
+        disabled: off,
+        onClick: () => onChange(o.url),
+        className: "h-9 w-12 overflow-hidden rounded border border-input aria-pressed:ring-2 aria-pressed:ring-primary",
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: o.url, alt: "", className: "h-full w-full object-cover" })
+      },
+      o.url
+    )) })
+  ] });
+}
+function ParameterText({ field, value, onChange, disabled, id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ParameterCommitInput,
+    {
+      id,
+      "aria-label": (0, import_parameters.parameterLabel)(field),
+      multiline: field.multiline,
+      placeholder: field.placeholder,
+      maxLength: field.maxLength,
+      value,
+      disabled: disabled || field.readOnly,
+      onCommit: onChange
+    }
+  );
+}
+function ParameterFieldControl({ field, value, onChange, resolveFile, ...rest }) {
+  const set = onChange;
+  switch (field.type) {
+    case "number":
+    case "int":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ParameterSlider, { field, value, onChange: set, ...rest });
+    case "boolean":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ParameterToggle, { field, value, onChange: set, ...rest });
+    case "choice":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ParameterSelect, { field, value, onChange: set, ...rest });
+    case "color":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ParameterColor, { field, value, onChange: set, ...rest });
+    case "vector":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ParameterVector, { field, value, onChange: set, ...rest });
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ParameterImage, { field, value, onChange: set, resolveFile, ...rest });
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ParameterText, { field, value, onChange: set, ...rest });
+  }
+}
+
+// src/effects/EffectParameters.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function EffectParameters({ description, values, onChange, onReset, keyframed, onPreset, disabled = false, className = "" }) {
+  const fields = (0, import_react11.useMemo)(() => (0, import_effects3.effectParameterFields)(description), [description]);
+  const idBase = (0, import_react11.useId)();
+  const gesture = import_react11.default.useRef(null);
+  const count = import_react11.default.useRef(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `space-y-2 ${className}`, "data-effect-parameters": description.id, children: [
+    onPreset && description.presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "select",
+      {
+        className: "w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs",
+        "aria-label": `${description.name} presets`,
+        value: "",
+        disabled,
+        onChange: (e) => {
+          const preset = description.presets.find((p) => p.name === e.currentTarget.value);
+          if (preset) onPreset({ ...description.defaults, ...preset.values });
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "Presets\u2026" }),
+          description.presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: p.name, children: p.name }, p.name))
+        ]
+      }
+    ),
+    fields.map((field) => {
+      const label = (0, import_parameters2.parameterLabel)(field);
+      const inputId = `${idBase}-${field.id}`;
+      const keyed = keyframed?.has(field.id) ?? false;
+      const value = (0, import_effects3.effectFieldValue)(field, values[field.id]);
+      const changed = !keyed && !(0, import_parameters2.parameterValuesEqual)(value, field.default);
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", "data-effect-control": field.id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: inputId, className: "min-w-0 flex-1 truncate text-xs font-medium", title: field.description, children: label }),
+          keyed && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "keyframed" }),
+          onReset && changed && !disabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "rounded px-1 text-[11px] text-muted-foreground hover:text-foreground", "aria-label": `Reset ${label}`, onClick: () => onReset(field.id), children: "\u21BA" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ParameterFieldControl,
+          {
+            field,
+            value,
+            id: inputId,
+            disabled: disabled || keyed,
+            onChange: (v) => onChange(field.id, v, gesture.current),
+            onGestureStart: () => gesture.current = `${idBase}:${field.id}:${++count.current}`,
+            onGestureEnd: () => gesture.current = null
+          }
+        )
+      ] }, field.id);
+    }),
+    !fields.length && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No controls." })
+  ] });
+}
+
+// src/image-editor/ImageProviderEffectsPanel.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var btn = "rounded border border-slate-700 px-1.5 py-0.5 text-[11px] text-slate-300 hover:text-white disabled:opacity-40";
+function Controls({
+  provider,
+  effect,
+  name,
+  values,
+  onChange,
+  onPreset
+}) {
+  const { description, error } = useEffectDescription(provider, effect);
+  if (!provider) return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-[11px] text-slate-400", children: [
+    'No effects provider: "',
+    name ?? effect,
+    '" is kept but not drawn.'
+  ] });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[11px] text-amber-400", children: error });
+  if (!description) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[11px] text-slate-400", children: "Loading\u2026" });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EffectParameters, { description, values, onChange, onReset: (k) => onChange(k, description.defaults[k], null), onPreset });
+}
+function ImageProviderEffectsPanel({ controller, className = "" }) {
+  const [, setTick] = (0, import_react12.useState)(0);
+  (0, import_react12.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const [browse, setBrowse] = (0, import_react12.useState)(null);
+  const [message, setMessage] = (0, import_react12.useState)(null);
+  const [open, setOpen] = (0, import_react12.useState)(null);
+  const provider = controller.effectsProvider;
+  const state = controller.getState();
+  const layer = state.activeLayerId ? (0, import_image_editor8.findLayer)(state.layers, state.activeLayerId)?.layer ?? null : null;
+  const run = (work) => {
+    setMessage(null);
+    Promise.resolve().then(work).catch((e) => setMessage(e instanceof Error ? e.message : String(e)));
+  };
+  const drags = import_react12.default.useRef(/* @__PURE__ */ new Set());
+  const commit = (gesture) => {
+    if (gesture) {
+      if (!drags.current.has(gesture)) {
+        drags.current.add(gesture);
+        return true;
+      }
+      return false;
+    }
+    return true;
+  };
+  const filters = layer?.type === "smart" ? (layer.smartFilters?.filters ?? []).filter((f) => f.kind === "effect") : [];
+  const generator = layer?.type === "pixel" ? layer.generator : void 0;
+  const canFilter = !!layer && layer.type !== "adjustment" && layer.type !== "annotation";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { className: `flex flex-col gap-2 text-xs ${className}`, "aria-label": "Provider effects", "data-image-provider-effects": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex-1 font-semibold uppercase tracking-wider text-[11px] text-slate-200", children: "Effects" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: btn, disabled: !provider || !canFilter, "aria-pressed": browse === "filter", onClick: () => setBrowse(browse === "filter" ? null : "filter"), children: "Apply effect\u2026" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: btn, disabled: !provider, "aria-pressed": browse === "layer", onClick: () => setBrowse(browse === "layer" ? null : "layer"), children: "Effect layer\u2026" })
+    ] }),
+    !provider && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[11px] text-slate-400", children: "No effects provider is registered. Effects in the document are kept." }),
+    browse === "filter" && layer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EffectsBrowser, { provider, uses: ["filter"], title: "Filters", onPick: (e) => (setBrowse(null), run(() => controller.applyEffectFilter(layer.id, e.id))) }),
+    browse === "layer" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EffectsBrowser, { provider, uses: ["generator", "overlay", "title"], title: "Generators and overlays", onPick: (e) => (setBrowse(null), run(() => controller.addEffectLayer(e.id))) }),
+    generator && layer && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-1", "data-effect-part": "generator", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex-1 font-medium text-slate-200", children: generator.name ?? generator.effect }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: btn, title: "Keep the pixels as a plain layer", onClick: () => run(() => controller.rasterizeEffectLayer(layer.id)), children: "Rasterize" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        Controls,
+        {
+          provider,
+          effect: generator.effect,
+          name: generator.name,
+          values: generator.values,
+          onChange: (k, v, gesture) => run(() => controller.updateEffectLayer(layer.id, { values: { [k]: v } }, commit(gesture))),
+          onPreset: (values) => run(() => controller.updateEffectLayer(layer.id, { values }))
+        }
+      )
+    ] }),
+    filters.length > 0 && layer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ol", { className: "space-y-1", "data-effect-part": "filters", children: filters.map((f) => {
+      const label = f.kind === "effect" ? f.name ?? f.effect : f.kind;
+      const all = layer.smartFilters.filters;
+      const index = all.indexOf(f);
+      if (f.kind !== "effect") return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "rounded border border-slate-700 p-1", "data-smart-effect": f.id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "checkbox", checked: f.enabled, "aria-label": `${label} on`, onChange: (e) => {
+            const enabled = e.currentTarget.checked;
+            run(() => controller.updateEffectFilter(layer.id, f.id, { enabled }));
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "min-w-0 flex-1 truncate text-left text-slate-200", "aria-expanded": open === f.id, onClick: () => setOpen(open === f.id ? null : f.id), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: btn, disabled: index === all.length - 1, "aria-label": "Move up", onClick: () => run(() => controller.updateEffectFilter(layer.id, f.id, { index: index + 1 })), children: "\u2191" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: btn, disabled: index === 0, "aria-label": "Move down", onClick: () => run(() => controller.updateEffectFilter(layer.id, f.id, { index: index - 1 })), children: "\u2193" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: btn, "aria-label": `Remove ${label}`, onClick: () => run(() => controller.removeSmartFilter(layer.id, f.id)), children: "\u2715" })
+        ] }),
+        open === f.id && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-1 space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-14 text-[11px] text-slate-300", children: "Opacity" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 1,
+                step: 0.01,
+                className: "flex-1",
+                value: f.opacity,
+                "aria-label": `${label} opacity`,
+                onChange: (e) => {
+                  const opacity = Number(e.currentTarget.value);
+                  run(() => controller.updateEffectFilter(layer.id, f.id, { opacity }));
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            Controls,
+            {
+              provider,
+              effect: f.effect,
+              name: f.name,
+              values: f.values,
+              onChange: (k, v, gesture) => run(() => controller.updateEffectFilter(layer.id, f.id, { values: { [k]: v } }, commit(gesture))),
+              onPreset: (values) => run(() => controller.updateEffectFilter(layer.id, f.id, { values }))
+            }
+          )
+        ] })
+      ] }, f.id);
+    }) }),
+    !layer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[11px] text-slate-400", children: "Select a layer to apply effects to it." }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { role: "alert", className: "text-[11px] text-rose-400", children: message })
+  ] });
+}
+
+// src/image-editor/BrushOptionsBar.tsx
+var import_react14 = require("react");
+var import_image_editor10 = require("@pixerate/editor/image-editor");
+var import_image_editor11 = require("@pixerate/editor/image-editor");
+
+// src/image-editor/PaintGradientEditor.tsx
+var import_image_editor9 = require("@pixerate/editor/image-editor");
+
+// src/paint-editor/PaintGradientEditorView.tsx
+var import_react13 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var button2 = "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40";
+var select = "rounded bg-slate-800 px-1 py-0.5 text-[11px]";
+var number = "w-16 rounded bg-slate-800 px-1 py-0.5 text-[11px]";
+var pct = (v) => Math.round(v * 1e3) / 10;
+var PaintGradientEditorView = ({ value, onChange, colors, className, kit }) => {
+  const {
+    PAINT_GRADIENT_MAPPINGS,
+    PAINT_GRADIENT_MAPPING_LABELS,
+    PAINT_GRADIENT_PRESETS,
+    PAINT_GRADIENT_REPEATS,
+    PAINT_GRADIENT_REPEAT_LABELS,
+    PAINT_GRADIENT_SPACES,
+    PAINT_GRADIENT_SPACE_LABELS,
+    addPaintGradientStop,
+    paintGradientMappingFor,
+    paintSourceCss,
+    removePaintGradientStop,
+    reversePaintGradient,
+    updatePaintGradientStop
+  } = kit;
+  const [selected, setSelected] = (0, import_react13.useState)(0);
+  const sel = Math.min(selected, value.stops.length - 1);
+  const stop = value.stops[sel];
+  const map = value.map;
+  const stopHex = (c) => c === "paint" ? colors.paint : c === "secondary" ? colors.secondary : c;
+  const patchStop = (patch) => {
+    const r = updatePaintGradientStop(value, sel, patch);
+    setSelected(r.index);
+    onChange(r.paint);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex flex-col gap-1.5 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "paint-gradient-editor", "aria-label": "Gradient paint", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("select", { "aria-label": "Gradient preset", className: select, value: "", onChange: (e) => e.target.value && (setSelected(0), onChange(PAINT_GRADIENT_PRESETS[Number(e.target.value)].paint)), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "", children: "Presets\u2026" }),
+        PAINT_GRADIENT_PRESETS.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: i, children: p.name }, p.name))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: button2, onClick: () => onChange(reversePaintGradient(value)), children: "Reverse" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": "Gradient ramp: click to add a stop",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": pct(stop.offset),
+        "data-testid": "paint-gradient-ramp",
+        className: "relative h-6 cursor-copy rounded ring-1 ring-slate-700",
+        style: { background: paintSourceCss(value, colors) },
+        onClick: (e) => {
+          const rect = e.currentTarget.getBoundingClientRect();
+          const r = addPaintGradientStop(value, rect.width ? (e.clientX - rect.left) / rect.width : 0.5, colors);
+          if (r.index >= 0) {
+            setSelected(r.index);
+            onChange(r.paint);
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative h-4", "aria-label": "Stops", children: value.stops.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Stop ${i + 1} at ${pct(s.offset)}%`,
+        "aria-pressed": i === sel,
+        className: `absolute top-0 h-4 w-3 -translate-x-1/2 rounded-sm ring-1 ${i === sel ? "ring-white" : "ring-slate-600"}`,
+        style: { left: `${s.offset * 100}%`, background: stopHex(s.color) },
+        onClick: () => setSelected(i)
+      },
+      i
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-testid": "paint-gradient-stop", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("select", { "aria-label": "Stop colour source", className: select, value: stop.color === "paint" || stop.color === "secondary" ? stop.color : "color", onChange: (e) => patchStop({ color: e.target.value === "color" ? stopHex(stop.color) : e.target.value }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "color", children: "Colour" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "paint", children: "Paint colour" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "secondary", children: "Second colour" })
+      ] }),
+      stop.color !== "paint" && stop.color !== "secondary" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "color", "aria-label": "Stop colour", value: stop.color, onChange: (e) => patchStop({ color: e.target.value }), className: "h-6 w-8 rounded bg-transparent" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
+        "At",
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", "aria-label": "Stop position", min: 0, max: 100, step: 1, value: pct(stop.offset), onChange: (e) => patchStop({ offset: Number(e.target.value) / 100 }), className: number }),
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
+        "Opacity",
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", "aria-label": "Stop opacity", min: 0, max: 100, step: 5, value: pct(stop.opacity ?? 1), onChange: (e) => patchStop({ opacity: Number(e.target.value) / 100 }), className: number }),
+        "%"
+      ] }),
+      sel < value.stops.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
+        "Midpoint",
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", "aria-label": "Stop midpoint", min: 5, max: 95, step: 1, value: pct(stop.midpoint ?? 0.5), onChange: (e) => patchStop({ midpoint: Number(e.target.value) / 100 }), className: number }),
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: button2, disabled: value.stops.length <= 2, onClick: () => (setSelected(Math.max(0, sel - 1)), onChange(removePaintGradientStop(value, sel))), children: "Remove stop" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-testid": "paint-gradient-mapping", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("select", { "aria-label": "Gradient follows", className: select, value: map.by, onChange: (e) => onChange({ ...value, map: paintGradientMappingFor(e.target.value, map) }), children: PAINT_GRADIENT_MAPPINGS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: m, children: PAINT_GRADIENT_MAPPING_LABELS[m] }, m)) }),
+      map.by === "distance" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", "aria-label": "Gradient length", min: 1, max: 1e5, value: map.length, onChange: (e) => onChange({ ...value, map: { ...map, length: Math.max(1, Number(e.target.value) || 1) } }), className: number }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("select", { "aria-label": "Gradient length unit", className: select, value: map.unit ?? "px", onChange: (e) => onChange({ ...value, map: { ...map, unit: e.target.value } }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "px", children: "px" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "dabs", children: "dabs" })
+        ] })
+      ] }),
+      map.by === "time" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", "aria-label": "Gradient duration", min: 1, max: 6e5, value: map.duration, onChange: (e) => onChange({ ...value, map: { ...map, duration: Math.max(1, Number(e.target.value) || 1) } }), className: number }),
+      map.by === "random" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", "aria-label": "Dabs per pick", min: 1, max: 500, value: map.every ?? 1, onChange: (e) => onChange({ ...value, map: { ...map, every: Math.max(1, Math.round(Number(e.target.value) || 1)) } }), className: number }),
+      (map.by === "distance" || map.by === "time") && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("select", { "aria-label": "Gradient repeat", className: select, value: map.repeat ?? "clamp", onChange: (e) => onChange({ ...value, map: { ...map, repeat: e.target.value } }), children: PAINT_GRADIENT_REPEATS.map((r) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: r, children: PAINT_GRADIENT_REPEAT_LABELS[r] }, r)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("select", { "aria-label": "Gradient mixing", className: select, value: value.space, onChange: (e) => onChange({ ...value, space: e.target.value }), children: PAINT_GRADIENT_SPACES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: s, children: PAINT_GRADIENT_SPACE_LABELS[s] }, s)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex flex-1 items-center gap-1", children: [
+        "Softness",
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "range", "aria-label": "Gradient softness", min: 0, max: 1, step: 0.05, value: value.softness ?? 1, onChange: (e) => onChange({ ...value, softness: Number(e.target.value) }), className: "flex-1 accent-indigo-500" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/image-editor/PaintGradientEditor.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var PaintGradientEditor = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PaintGradientEditorView, { ...props, kit: import_image_editor9.PAINT_GRADIENT_KIT });
+
+// src/image-editor/BrushOptionsBar.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var chip = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
 var BrushOptionsBar = ({ controller, className }) => {
-  const [, setTick] = (0, import_react7.useState)(0);
-  (0, import_react7.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
-  const [error, setError] = (0, import_react7.useState)(null);
+  const [, setTick] = (0, import_react14.useState)(0);
+  (0, import_react14.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const [error, setError] = (0, import_react14.useState)(null);
   const state = controller.getState();
-  const { brush, foreground, background, mixer, mixerLoad, retouch, cloneSource } = state.paint;
+  const { brush, foreground, background, mixer, mixerLoad, retouch, cloneSource, paint } = state.paint;
   const tool = state.activeTool;
   const attempt = (fn) => {
     try {
@@ -1278,8 +2111,8 @@ var BrushOptionsBar = ({ controller, className }) => {
       setError(err instanceof Error ? err.message : String(err));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "brush-options", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Paint tools", children: import_image_editor8.PAINT_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "brush-options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Paint tools", children: import_image_editor10.PAINT_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "button",
       {
         type: "button",
@@ -1291,9 +2124,9 @@ var BrushOptionsBar = ({ controller, className }) => {
       },
       t.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", role: "group", "aria-label": "Colours", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", role: "group", "aria-label": "Colours", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "input",
           {
             type: "color",
@@ -1303,10 +2136,10 @@ var BrushOptionsBar = ({ controller, className }) => {
             className: "h-6 w-8 rounded border border-slate-700 bg-transparent"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-slate-400", children: "FG" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-slate-400", children: "FG" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "input",
           {
             type: "color",
@@ -1316,12 +2149,24 @@ var BrushOptionsBar = ({ controller, className }) => {
             className: "h-6 w-8 rounded border border-slate-700 bg-transparent"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-slate-400", children: "BG" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-slate-400", children: "BG" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", title: "Swap colours (X)", className: chip(false), onClick: () => controller.swapPaintColors(), children: "Swap" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", title: "Default colours (D)", className: chip(false), onClick: () => controller.resetPaintColors(), children: "Default" })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", title: "Swap colours (X)", className: chip(false), onClick: () => controller.swapPaintColors(), children: "Swap" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", title: "Default colours (D)", className: chip(false), onClick: () => controller.resetPaintColors(), children: "Default" }),
+      state.activeTool === "brush" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": paint.type === "gradient",
+          title: "Gradient paint: the brush changes colour as the stroke goes",
+          className: chip(paint.type === "gradient"),
+          onClick: () => attempt(() => controller.setPaintOptions(paint.type === "gradient" ? { foreground } : { paint: import_image_editor11.DEFAULT_PAINT_GRADIENT })),
+          children: "Gradient"
+        }
+      )
     ] }),
-    import_image_editor8.BRUSH_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    state.activeTool === "brush" && paint.type === "gradient" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PaintGradientEditor, { value: paint, colors: { paint: foreground, secondary: background }, onChange: (g) => attempt(() => controller.setPaintOptions({ paint: g })) }),
+    import_image_editor10.BRUSH_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ControlSlider,
       {
         spec,
@@ -1330,21 +2175,21 @@ var BrushOptionsBar = ({ controller, className }) => {
       },
       spec.id
     )),
-    state.activeTool === "mixer" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2 border-t border-slate-800 pt-2", role: "group", "aria-label": "Mixer Brush", "data-testid": "mixer-options", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    state.activeTool === "mixer" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2 border-t border-slate-800 pt-2", role: "group", "aria-label": "Mixer Brush", "data-testid": "mixer-options", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "span",
           {
             "aria-label": "Brush load",
-            title: mixerLoad.reservoir ? `Loaded ${(0, import_image_editor8.rgbUnitToHex)(mixerLoad.reservoir)}, ${Math.round(mixerLoad.amount * 100)}% left` : "Unloaded",
+            title: mixerLoad.reservoir ? `Loaded ${(0, import_image_editor10.rgbUnitToHex)(mixerLoad.reservoir)}, ${Math.round(mixerLoad.amount * 100)}% left` : "Unloaded",
             className: "h-6 w-6 rounded border border-slate-700",
-            style: { background: mixerLoad.reservoir ? (0, import_image_editor8.rgbUnitToHex)(mixerLoad.reservoir) : "transparent" }
+            style: { background: mixerLoad.reservoir ? (0, import_image_editor10.rgbUnitToHex)(mixerLoad.reservoir) : "transparent" }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", title: "Fill the reservoir with the foreground colour", className: chip(false), onClick: () => controller.loadMixerBrush(), children: "Load brush" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", title: "Empty the picked-up colour", className: chip(false), onClick: () => controller.cleanMixerBrush(), children: "Clean brush" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", title: "Fill the reservoir with the foreground colour", className: chip(false), onClick: () => controller.loadMixerBrush(), children: "Load brush" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", title: "Empty the picked-up colour", className: chip(false), onClick: () => controller.cleanMixerBrush(), children: "Clean brush" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: import_image_editor8.MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: import_image_editor10.MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           type: "button",
@@ -1356,10 +2201,10 @@ var BrushOptionsBar = ({ controller, className }) => {
         },
         m.id
       )) }),
-      import_image_editor8.MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ControlSlider, { spec, value: mixer[spec.id], onChange: (v) => controller.setPaintOptions({ mixer: { [spec.id]: v } }) }, spec.id)),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_image_editor10.MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ControlSlider, { spec, value: mixer[spec.id], onChange: (v) => controller.setPaintOptions({ mixer: { [spec.id]: v } }) }, spec.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
               type: "checkbox",
@@ -1371,8 +2216,8 @@ var BrushOptionsBar = ({ controller, className }) => {
           ),
           "Load each stroke"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
               type: "checkbox",
@@ -1386,29 +2231,29 @@ var BrushOptionsBar = ({ controller, className }) => {
         ] })
       ] })
     ] }),
-    (0, import_image_editor8.isRetouchPaintTool)(tool) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2 border-t border-slate-800 pt-2", role: "group", "aria-label": "Retouch options", "data-testid": "retouch-options", children: [
-      (tool === "clone" || tool === "heal") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-slate-400", "data-testid": "clone-source", children: (0, import_image_editor8.cloneSourceLabel)(controller) }),
-        cloneSource && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", title: "Forget the source point", className: chip(false), onClick: () => controller.setCloneSource(null), children: "Clear source" })
+    (0, import_image_editor10.isRetouchPaintTool)(tool) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2 border-t border-slate-800 pt-2", role: "group", "aria-label": "Retouch options", "data-testid": "retouch-options", children: [
+      (tool === "clone" || tool === "heal") && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-slate-400", "data-testid": "clone-source", children: (0, import_image_editor10.cloneSourceLabel)(controller) }),
+        cloneSource && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", title: "Forget the source point", className: chip(false), onClick: () => controller.setCloneSource(null), children: "Clear source" })
       ] }),
-      import_image_editor8.RETOUCH_CHOICES.filter((c) => c.tools.includes(tool)).map((choice) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": choice.label, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-slate-400", children: choice.label }),
-        choice.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_image_editor10.RETOUCH_CHOICES.filter((c) => c.tools.includes(tool)).map((choice) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": choice.label, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-slate-400", children: choice.label }),
+        choice.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "button",
           {
             type: "button",
             "aria-pressed": retouch[choice.id] === o.id,
             title: o.title,
             className: chip(retouch[choice.id] === o.id),
-            onClick: () => (0, import_image_editor8.setRetouchChoice)(controller, choice.id, o.id),
+            onClick: () => (0, import_image_editor10.setRetouchChoice)(controller, choice.id, o.id),
             children: o.label
           },
           o.id
         ))
       ] }, choice.id)),
-      import_image_editor8.RETOUCH_OPTION_CONTROLS.filter((c) => c.tools.includes(tool)).map((spec) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ControlSlider, { spec, value: retouch[spec.id], onChange: (v) => controller.setPaintOptions({ retouch: { [spec.id]: v } }) }, spec.id)),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-3 text-slate-300", children: import_image_editor8.RETOUCH_TOGGLES.filter((t) => t.tools.includes(tool)).map((t) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_image_editor10.RETOUCH_OPTION_CONTROLS.filter((c) => c.tools.includes(tool)).map((spec) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ControlSlider, { spec, value: retouch[spec.id], onChange: (v) => controller.setPaintOptions({ retouch: { [spec.id]: v } }) }, spec.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-wrap gap-3 text-slate-300", children: import_image_editor10.RETOUCH_TOGGLES.filter((t) => t.tools.includes(tool)).map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "input",
           {
             type: "checkbox",
@@ -1421,9 +2266,9 @@ var BrushOptionsBar = ({ controller, className }) => {
         t.label
       ] }, t.id)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "input",
           {
             type: "checkbox",
@@ -1435,8 +2280,8 @@ var BrushOptionsBar = ({ controller, className }) => {
         ),
         "Pressure size"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "input",
           {
             type: "checkbox",
@@ -1449,28 +2294,28 @@ var BrushOptionsBar = ({ controller, className }) => {
         "Pressure opacity"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.fillPixels()), children: "Fill" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.clearPixels()), children: "Clear" })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.fillPixels()), children: "Fill" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.clearPixels()), children: "Clear" })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
   ] });
 };
 
 // src/image-editor/ColorProfilePanel.tsx
-var import_react8 = require("react");
-var import_image_editor9 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_image_editor12 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var chip2 = "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white";
-var select = "rounded bg-slate-800 px-1 py-0.5 text-[11px] text-slate-200";
+var select2 = "rounded bg-slate-800 px-1 py-0.5 text-[11px] text-slate-200";
 var ColorProfilePanel = ({ controller, className }) => {
-  const [, setTick] = (0, import_react8.useState)(0);
-  (0, import_react8.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
-  const [target, setTarget] = (0, import_react8.useState)("display-p3");
-  const [intent, setIntent] = (0, import_react8.useState)("relative");
-  const [bpc, setBpc] = (0, import_react8.useState)(true);
-  const [error, setError] = (0, import_react8.useState)(null);
-  const view = (0, import_image_editor9.colorPanelView)(controller);
+  const [, setTick] = (0, import_react15.useState)(0);
+  (0, import_react15.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const [target, setTarget] = (0, import_react15.useState)("display-p3");
+  const [intent, setIntent] = (0, import_react15.useState)("relative");
+  const [bpc, setBpc] = (0, import_react15.useState)(true);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const view = (0, import_image_editor12.colorPanelView)(controller);
   const attempt = (fn) => {
     try {
       setError(null);
@@ -1491,61 +2336,61 @@ var ColorProfilePanel = ({ controller, className }) => {
       })
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "color-profile-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-slate-400", children: "Profile" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-testid": "color-profile-name", children: view.profileName })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "color-profile-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-slate-400", children: "Profile" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "data-testid": "color-profile-name", children: view.profileName })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": "Colour mode", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-slate-400", children: "Mode" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("select", { "aria-label": "Colour mode", className: select, value: view.mode, onChange: (e) => attempt(() => controller.setColorMode(e.target.value)), children: import_image_editor9.COLOR_MODE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: o.id, title: o.title, children: o.label }, o.id)) }),
-      view.cmykProfileName && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-slate-400", children: view.cmykProfileName })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": "Colour mode", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-slate-400", children: "Mode" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Colour mode", className: select2, value: view.mode, onChange: (e) => attempt(() => controller.setColorMode(e.target.value)), children: import_image_editor12.COLOR_MODE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: o.id, title: o.title, children: o.label }, o.id)) }),
+      view.cmykProfileName && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-slate-400", children: view.cmykProfileName })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": "Assign or convert", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("select", { "aria-label": "Target profile", className: select, value: target, onChange: (e) => setTarget(e.target.value), children: import_image_editor9.WORKING_SPACE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: o.id, children: o.label }, o.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("select", { "aria-label": "Rendering intent", className: select, value: intent, onChange: (e) => setIntent(e.target.value), children: import_image_editor9.INTENT_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: o.id, title: o.title, children: o.label }, o.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", "aria-label": "Black point compensation", checked: bpc, onChange: (e) => setBpc(e.target.checked), className: "accent-indigo-500" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": "Assign or convert", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Target profile", className: select2, value: target, onChange: (e) => setTarget(e.target.value), children: import_image_editor12.WORKING_SPACE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: o.id, children: o.label }, o.id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Rendering intent", className: select2, value: intent, onChange: (e) => setIntent(e.target.value), children: import_image_editor12.INTENT_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: o.id, title: o.title, children: o.label }, o.id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "checkbox", "aria-label": "Black point compensation", checked: bpc, onChange: (e) => setBpc(e.target.checked), className: "accent-indigo-500" }),
         "BPC"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: chip2, title: "Edit \u203A Assign Profile: keep the numbers", onClick: () => attempt(() => controller.assignProfile(target)), children: "Assign" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: chip2, title: "Edit \u203A Convert to Profile: keep the look", onClick: () => attempt(() => controller.convertToProfile(target, { intent, bpc })), children: "Convert" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: chip2, title: "Edit \u203A Assign Profile: keep the numbers", onClick: () => attempt(() => controller.assignProfile(target)), children: "Assign" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: chip2, title: "Edit \u203A Convert to Profile: keep the look", onClick: () => attempt(() => controller.convertToProfile(target, { intent, bpc })), children: "Convert" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": "Proof setup", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-slate-400", children: "Proof" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": "Proof setup", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-slate-400", children: "Proof" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "select",
         {
           "aria-label": "Proof profile",
-          className: select,
+          className: select2,
           value: view.proof?.id ?? "",
           onChange: (e) => e.target.value ? proofWith({ id: e.target.value }) : attempt(() => controller.setProofSetup(null)),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: "Off" }),
-            import_image_editor9.PROOF_PROFILE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: o.id, children: o.label }, o.id))
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "", children: "Off" }),
+            import_image_editor12.PROOF_PROFILE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: o.id, children: o.label }, o.id))
           ]
         }
       ),
-      view.proof && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("select", { "aria-label": "Proof intent", className: select, value: view.proof.intent, onChange: (e) => proofWith({ intent: e.target.value }), children: import_image_editor9.INTENT_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: o.id, children: o.label }, o.id)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", "aria-label": "Simulate paper colour", checked: view.proof.simulatePaper, onChange: (e) => proofWith({ simulatePaper: e.target.checked }), className: "accent-indigo-500" }),
+      view.proof && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Proof intent", className: select2, value: view.proof.intent, onChange: (e) => proofWith({ intent: e.target.value }), children: import_image_editor12.INTENT_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: o.id, children: o.label }, o.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "checkbox", "aria-label": "Simulate paper colour", checked: view.proof.simulatePaper, onChange: (e) => proofWith({ simulatePaper: e.target.checked }), className: "accent-indigo-500" }),
           "Paper"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", "aria-label": "Gamut warning", checked: view.proof.gamutWarning, onChange: (e) => proofWith({ gamutWarning: e.target.checked }), className: "accent-indigo-500" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "checkbox", "aria-label": "Gamut warning", checked: view.proof.gamutWarning, onChange: (e) => proofWith({ gamutWarning: e.target.checked }), className: "accent-indigo-500" }),
           "Gamut warning"
         ] })
       ] })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
   ] });
 };
 
 // src/image-editor/SelectionOptionsBar.tsx
-var import_react9 = require("react");
-var import_image_editor10 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_image_editor13 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var MODIFY_OPS = [
   { op: "grow", label: "Grow" },
   { op: "shrink", label: "Shrink" },
@@ -1553,7 +2398,7 @@ var MODIFY_OPS = [
   { op: "border", label: "Border" },
   { op: "smooth", label: "Smooth" }
 ];
-var btn = (on) => `px-2 py-1 rounded-md border text-[11px] transition-colors ${on ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-950 border-slate-800 text-slate-300 hover:text-white"}`;
+var btn2 = (on) => `px-2 py-1 rounded-md border text-[11px] transition-colors ${on ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-950 border-slate-800 text-slate-300 hover:text-white"}`;
 var SelectionOptionsBar = ({
   controller,
   options,
@@ -1562,20 +2407,20 @@ var SelectionOptionsBar = ({
   quickMask,
   className = ""
 }) => {
-  const [radius, setRadius] = (0, import_react9.useState)(2);
+  const [radius, setRadius] = (0, import_react16.useState)(2);
   const set = (patch) => onOptionsChange({ ...options, ...patch });
   const sel = selection === void 0 ? controller.getSelection() : selection;
   const qm = quickMask ?? Boolean(controller.getState().quickMask);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "data-testid": "selection-options-bar", className: `flex flex-col gap-3 text-xs ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "group", "aria-label": "Selection tool", className: "flex flex-wrap gap-1", children: import_image_editor10.SELECTION_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "aria-pressed": options.tool === t.id, className: btn(options.tool === t.id), onClick: () => set({ tool: t.id }), children: t.label }, t.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "group", "aria-label": "Selection mode", className: "flex flex-wrap gap-1", children: import_image_editor10.SELECTION_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "aria-pressed": options.mode === m, className: btn(options.mode === m), onClick: () => set({ mode: m }), children: import_image_editor10.SELECTION_MODE_LABELS[m] }, m)) }),
-    options.tool === "wand" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Tolerance" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-mono", children: options.tolerance })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { "data-testid": "selection-options-bar", className: `flex flex-col gap-3 text-xs ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "group", "aria-label": "Selection tool", className: "flex flex-wrap gap-1", children: import_image_editor13.SELECTION_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", "aria-pressed": options.tool === t.id, className: btn2(options.tool === t.id), onClick: () => set({ tool: t.id }), children: t.label }, t.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "group", "aria-label": "Selection mode", className: "flex flex-wrap gap-1", children: import_image_editor13.SELECTION_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", "aria-pressed": options.mode === m, className: btn2(options.mode === m), onClick: () => set({ mode: m }), children: import_image_editor13.SELECTION_MODE_LABELS[m] }, m)) }),
+    options.tool === "wand" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Tolerance" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-mono", children: options.tolerance })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "input",
           {
             type: "range",
@@ -1589,17 +2434,17 @@ var SelectionOptionsBar = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { type: "checkbox", checked: options.contiguous, onChange: (e) => set({ contiguous: e.target.checked }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "checkbox", checked: options.contiguous, onChange: (e) => set({ contiguous: e.target.checked }) }),
         "Contiguous"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
         "Sample adjusted image"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
         "Sample",
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "select",
           {
             "aria-label": "Sample from",
@@ -1607,27 +2452,27 @@ var SelectionOptionsBar = ({
             onChange: (e) => set({ sample: e.target.value }),
             className: "bg-slate-800 border border-slate-700 rounded px-1 py-0.5",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "composite", children: "All layers" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "active-layer", children: "Active layer" })
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "composite", children: "All layers" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "active-layer", children: "Active layer" })
             ]
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { type: "checkbox", checked: options.antiAlias, onChange: (e) => set({ antiAlias: e.target.checked }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "checkbox", checked: options.antiAlias, onChange: (e) => set({ antiAlias: e.target.checked }) }),
       "Anti-alias"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: btn(false), onClick: () => controller.selectAll(), children: "Select All" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.deselect(), children: "Deselect" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: btn(false), onClick: () => controller.invertSelection(), children: "Inverse" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "aria-pressed": qm, className: btn(qm), onClick: () => controller.setQuickMask(!qm), children: "Quick Mask" })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: btn2(false), onClick: () => controller.selectAll(), children: "Select All" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: btn2(false), disabled: !sel, onClick: () => controller.deselect(), children: "Deselect" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: btn2(false), onClick: () => controller.invertSelection(), children: "Inverse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", "aria-pressed": qm, className: btn2(qm), onClick: () => controller.setQuickMask(!qm), children: "Quick Mask" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-1 text-slate-400", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-1 text-slate-400", children: [
         "Radius",
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "input",
           {
             type: "number",
@@ -1641,24 +2486,24 @@ var SelectionOptionsBar = ({
           }
         )
       ] }),
-      MODIFY_OPS.map(({ op, label }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.modifySelection(op, radius), children: label }, op))
+      MODIFY_OPS.map(({ op, label }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: btn2(false), disabled: !sel, onClick: () => controller.modifySelection(op, radius), children: label }, op))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { "data-testid": "selection-status", className: "text-slate-400", children: (0, import_image_editor10.describeSelection)(sel) })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { "data-testid": "selection-status", className: "text-slate-400", children: (0, import_image_editor13.describeSelection)(sel) })
   ] });
 };
 
 // src/image-editor/RefineEdgePanel.tsx
-var import_react10 = require("react");
-var import_image_editor11 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_image_editor14 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var DEFAULT_PARAMS = { radius: 8, smartRadius: false, smooth: 0, feather: 0, contrast: 0, shiftEdge: 0 };
-var button2 = "px-2 py-1 rounded-md border border-slate-800 bg-slate-950 text-[11px] text-slate-200 hover:text-white disabled:opacity-40";
+var button3 = "px-2 py-1 rounded-md border border-slate-800 bg-slate-950 text-[11px] text-slate-200 hover:text-white disabled:opacity-40";
 var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
-  const [params, setParams] = (0, import_react10.useState)(DEFAULT_PARAMS);
-  const [busy, setBusy] = (0, import_react10.useState)(false);
-  const [error, setError] = (0, import_react10.useState)(null);
-  const [layerId, setLayerId] = (0, import_react10.useState)("");
-  const [newKind, setNewKind] = (0, import_react10.useState)("hueSaturation");
+  const [params, setParams] = (0, import_react17.useState)(DEFAULT_PARAMS);
+  const [busy, setBusy] = (0, import_react17.useState)(false);
+  const [error, setError] = (0, import_react17.useState)(null);
+  const [layerId, setLayerId] = (0, import_react17.useState)("");
+  const [newKind, setNewKind] = (0, import_react17.useState)("hueSaturation");
   const sel = selection === void 0 ? controller.getSelection() : selection;
   const list = layers ?? controller.getAdjustmentLayers();
   const target = list.find((l) => l.id === layerId) ?? list[list.length - 1];
@@ -1673,17 +2518,17 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-testid": "refine-edge-panel", className: `flex flex-col gap-3 text-xs ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Refine Edge" }),
-    import_image_editor11.REFINE_EDGE_CONTROLS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: c.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-mono", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { "data-testid": "refine-edge-panel", className: `flex flex-col gap-3 text-xs ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Refine Edge" }),
+    import_image_editor14.REFINE_EDGE_CONTROLS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: c.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "font-mono", children: [
           params[c.id],
           c.unit
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "input",
         {
           type: "range",
@@ -1697,67 +2542,67 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
         }
       )
     ] }, c.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: "checkbox", checked: params.smartRadius, onChange: (e) => setParams({ ...params, smartRadius: e.target.checked }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", { type: "checkbox", checked: params.smartRadius, onChange: (e) => setParams({ ...params, smartRadius: e.target.checked }) }),
       "Smart Radius"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: button2, disabled: !sel || busy, onClick: refine, children: "Refine Edge" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: button2, onClick: () => setParams(DEFAULT_PARAMS), children: "Reset" })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: button3, disabled: !sel || busy, onClick: refine, children: "Refine Edge" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: button3, onClick: () => setParams(DEFAULT_PARAMS), children: "Reset" })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { role: "alert", className: "text-rose-400", children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2", children: "Layer Mask" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-1 items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { role: "alert", className: "text-rose-400", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2", children: "Layer Mask" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex gap-1 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "select",
         {
           "aria-label": "New masked layer kind",
           value: newKind,
           onChange: (e) => setNewKind(e.target.value),
           className: "flex-1 bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200",
-          children: import_image_editor11.ADJUSTMENT_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: k.kind, children: k.label }, k.kind))
+          children: import_image_editor14.ADJUSTMENT_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: k.kind, children: k.label }, k.kind))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "button",
         {
           type: "button",
-          className: button2,
+          className: button3,
           disabled: !sel,
-          onClick: () => sel && setLayerId(controller.addAdjustmentLayer({ kind: newKind, mask: (0, import_image_editor11.layerMaskFromSelection)(sel) })),
+          onClick: () => sel && setLayerId(controller.addAdjustmentLayer({ kind: newKind, mask: (0, import_image_editor14.layerMaskFromSelection)(sel) })),
           children: "New Masked Layer"
         }
       )
     ] }),
-    list.length > 0 && target && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    list.length > 0 && target && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "select",
         {
           "aria-label": "Mask layer",
           value: target.id,
           onChange: (e) => setLayerId(e.target.value),
           className: "bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200",
-          children: list.map((l) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("option", { value: l.id, children: [
-            l.name || (0, import_image_editor11.adjustmentKindLabel)(l.kind),
+          children: list.map((l) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("option", { value: l.id, children: [
+            l.name || (0, import_image_editor14.adjustmentKindLabel)(l.kind),
             l.mask ? " (masked)" : ""
           ] }, l.id))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: button2, disabled: !sel, onClick: () => controller.applySelectionAsLayerMask(target.id), children: "Mask with Selection" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: button2, disabled: !target.mask, onClick: () => controller.selectionFromLayerMask(target.id), children: "Load as Selection" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: button2, disabled: !target.mask, onClick: () => controller.setAdjustmentLayerMask(target.id, null), children: "Remove Mask" })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: button3, disabled: !sel, onClick: () => controller.applySelectionAsLayerMask(target.id), children: "Mask with Selection" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: button3, disabled: !target.mask, onClick: () => controller.selectionFromLayerMask(target.id), children: "Load as Selection" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: button3, disabled: !target.mask, onClick: () => controller.setAdjustmentLayerMask(target.id, null), children: "Remove Mask" })
       ] }),
-      target.mask && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Density" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-mono", children: [
+      target.mask && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Density" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "font-mono", children: [
               Math.round((target.mask.density ?? 1) * 100),
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "input",
             {
               type: "range",
@@ -1771,15 +2616,15 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Mask Feather" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-mono", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Mask Feather" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "font-mono", children: [
               target.mask.feather ?? 0,
               "px"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "input",
             {
               type: "range",
@@ -1799,14 +2644,14 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
 };
 
 // src/image-editor/FreeTransformOptionsBar.tsx
-var import_react11 = require("react");
-var import_image_editor12 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_image_editor15 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var chip3 = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
 var round = (v, unit) => unit === "px" ? Math.round(v * 10) / 10 : Math.round(v * 100) / 100;
 var FreeTransformOptionsBar = ({ tool, className }) => {
-  const [, setTick] = (0, import_react11.useState)(0);
-  (0, import_react11.useEffect)(() => tool.subscribe(() => setTick((n) => n + 1)), [tool]);
+  const [, setTick] = (0, import_react18.useState)(0);
+  (0, import_react18.useEffect)(() => tool.subscribe(() => setTick((n) => n + 1)), [tool]);
   const bar = tool.bar();
   if (!tool.active || !bar) return null;
   const warp = tool.warpBar();
@@ -1818,17 +2663,17 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
     const v = Number(raw);
     if (raw.trim() !== "" && Number.isFinite(v) && Math.abs(v - bar[field]) > 1e-9) tool.setField(field, v);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `flex flex-wrap items-center gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "free-transform-options", role: "toolbar", "aria-label": "Free Transform options", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Transform mode", children: import_image_editor12.FREE_TRANSFORM_MODE_OPTIONS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", title: m.title, "aria-pressed": tool.mode === m.id, className: chip3(tool.mode === m.id), onClick: () => tool.setMode(m.id), children: m.label }, m.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "grid grid-cols-3 gap-px", role: "group", "aria-label": "Reference point", children: import_image_editor12.TRANSFORM_ANCHORS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", "aria-label": `Reference point ${a}`, title: `Reference point: ${a}`, className: "h-2.5 w-2.5 rounded-sm bg-slate-700 hover:bg-indigo-500", onClick: () => tool.setReference(a) }, a)) }),
-    tool.mode === "warp" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": "Warp options", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-slate-400", children: "Warp" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("select", { "aria-label": "Warp style", value: warp.style, onChange: (e) => tool.setWarp({ style: e.target.value }), className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5", children: import_image_editor12.WARP_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: o.id, children: o.label }, o.id)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `flex flex-wrap items-center gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "free-transform-options", role: "toolbar", "aria-label": "Free Transform options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Transform mode", children: import_image_editor15.FREE_TRANSFORM_MODE_OPTIONS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", title: m.title, "aria-pressed": tool.mode === m.id, className: chip3(tool.mode === m.id), onClick: () => tool.setMode(m.id), children: m.label }, m.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "grid grid-cols-3 gap-px", role: "group", "aria-label": "Reference point", children: import_image_editor15.TRANSFORM_ANCHORS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", "aria-label": `Reference point ${a}`, title: `Reference point: ${a}`, className: "h-2.5 w-2.5 rounded-sm bg-slate-700 hover:bg-indigo-500", onClick: () => tool.setReference(a) }, a)) }),
+    tool.mode === "warp" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": "Warp options", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-slate-400", children: "Warp" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("select", { "aria-label": "Warp style", value: warp.style, onChange: (e) => tool.setWarp({ style: e.target.value }), className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5", children: import_image_editor15.WARP_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: o.id, children: o.label }, o.id)) })
       ] }),
-      ["bend", "horizontal", "vertical"].map((k) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-slate-400", children: k === "bend" ? "Bend" : k === "horizontal" ? "H" : "V" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ["bend", "horizontal", "vertical"].map((k) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-slate-400", children: k === "bend" ? "Bend" : k === "horizontal" ? "H" : "V" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
           {
             type: "number",
@@ -1849,9 +2694,9 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
           },
           `${k}:${warp[k]}`
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-slate-500", children: "%" })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-slate-500", children: "%" })
       ] }, k)),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
@@ -1863,26 +2708,26 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
           children: "Vertical"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-slate-400", children: "Grid" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-slate-400", children: "Grid" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "select",
           {
             "aria-label": "Warp grid",
-            value: import_image_editor12.WARP_GRID_OPTIONS.find((g) => g.columns === warp.columns && g.rows === warp.rows)?.id ?? "1x1",
+            value: import_image_editor15.WARP_GRID_OPTIONS.find((g) => g.columns === warp.columns && g.rows === warp.rows)?.id ?? "1x1",
             onChange: (e) => {
-              const g = import_image_editor12.WARP_GRID_OPTIONS.find((o) => o.id === e.target.value);
+              const g = import_image_editor15.WARP_GRID_OPTIONS.find((o) => o.id === e.target.value);
               tool.setWarp({ columns: g.columns, rows: g.rows });
             },
             className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5",
-            children: import_image_editor12.WARP_GRID_OPTIONS.map((g) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: g.id, children: g.label }, g.id))
+            children: import_image_editor15.WARP_GRID_OPTIONS.map((g) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: g.id, children: g.label }, g.id))
           }
         )
       ] })
     ] }),
-    tool.mode !== "warp" && import_image_editor12.FREE_TRANSFORM_FIELDS.map((f) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-1", title: f.title, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-slate-400", children: f.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    tool.mode !== "warp" && import_image_editor15.FREE_TRANSFORM_FIELDS.map((f) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1", title: f.title, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-slate-400", children: f.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         {
           type: "number",
@@ -1902,8 +2747,8 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
         },
         `${f.id}:${round(bar[f.id], f.unit)}`
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-slate-500", children: f.unit }),
-      f.id === "scaleX" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-slate-500", children: f.unit }),
+      f.id === "scaleX" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
@@ -1918,34 +2763,34 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
         }
       )
     ] }, f.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-slate-400", children: "Interpolation" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-slate-400", children: "Interpolation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "select",
         {
           "aria-label": "Interpolation",
           value: tool.interpolation,
           onChange: (e) => tool.setInterpolation(e.target.value),
           className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5",
-          children: import_image_editor12.INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: i, children: i[0].toUpperCase() + i.slice(1) }, i))
+          children: import_image_editor15.INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: i, children: i[0].toUpperCase() + i.slice(1) }, i))
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", title: "Commit (Enter)", className: "px-2 py-1 rounded bg-emerald-600 text-white hover:bg-emerald-500", onClick: () => tool.commit(), children: "Commit" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", title: "Cancel (Esc)", className: chip3(false), onClick: () => tool.cancel(), children: "Cancel" }),
-    tool.error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { role: "alert", className: "text-rose-400", children: tool.error })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", title: "Commit (Enter)", className: "px-2 py-1 rounded bg-emerald-600 text-white hover:bg-emerald-500", onClick: () => tool.commit(), children: "Commit" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", title: "Cancel (Esc)", className: chip3(false), onClick: () => tool.cancel(), children: "Cancel" }),
+    tool.error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { role: "alert", className: "text-rose-400", children: tool.error })
   ] });
 };
 
 // src/image-editor/ShapeOptionsBar.tsx
-var import_react12 = require("react");
-var import_image_editor13 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_image_editor16 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var chip4 = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
 var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
-  const [, setTick] = (0, import_react12.useState)(0);
-  (0, import_react12.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
-  const [error, setError] = (0, import_react12.useState)(null);
+  const [, setTick] = (0, import_react19.useState)(0);
+  (0, import_react19.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const [error, setError] = (0, import_react19.useState)(null);
   const active = controller.getActiveLayer();
   const shapeId = active?.type === "shape" ? active.id : null;
   const set = (change) => {
@@ -1953,19 +2798,19 @@ var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
     if (!shapeId) return;
     try {
       setError(null);
-      (0, import_image_editor13.applyShapeOptions)(controller, shapeId, change);
+      (0, import_image_editor16.applyShapeOptions)(controller, shapeId, change);
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
     }
   };
   const num = (v, min, max) => Math.max(min, Math.min(max, Number(v) || min));
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "shape-options", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Shape kind", children: import_image_editor13.LIVE_SHAPE_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", "aria-pressed": options.kind === k, className: chip4(options.kind === k), onClick: () => onChange({ ...options, kind: k }), children: import_image_editor13.SHAPE_KIND_LABELS[k] }, k)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "checkbox", "aria-label": "Fill", checked: options.fill !== null, onChange: (e) => set({ fill: e.target.checked ? "#4f46e5" : null }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "shape-options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Shape kind", children: import_image_editor16.LIVE_SHAPE_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", "aria-pressed": options.kind === k, className: chip4(options.kind === k), onClick: () => onChange({ ...options, kind: k }), children: import_image_editor16.SHAPE_KIND_LABELS[k] }, k)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "checkbox", "aria-label": "Fill", checked: options.fill !== null, onChange: (e) => set({ fill: e.target.checked ? "#4f46e5" : null }) }),
         "Fill",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             type: "color",
@@ -1977,10 +2822,10 @@ var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "checkbox", "aria-label": "Stroke", checked: options.stroke !== null, onChange: (e) => set({ stroke: e.target.checked ? "#000000" : null }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "checkbox", "aria-label": "Stroke", checked: options.stroke !== null, onChange: (e) => set({ stroke: e.target.checked ? "#000000" : null }) }),
         "Stroke",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             type: "color",
@@ -1992,9 +2837,9 @@ var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1", children: [
         "Width",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             type: "number",
@@ -2008,23 +2853,23 @@ var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
-      options.kind === "rect" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
+      options.kind === "rect" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1", children: [
         "Radius",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", "aria-label": "Corner radius", min: 0, max: 1e3, value: options.radius, onChange: (e) => set({ radius: num(e.target.value, 0, 1e3) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "number", "aria-label": "Corner radius", min: 0, max: 1e3, value: options.radius, onChange: (e) => set({ radius: num(e.target.value, 0, 1e3) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
       ] }),
-      options.kind === "polygon" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
+      options.kind === "polygon" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1", children: [
         "Sides",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", "aria-label": "Sides", min: 3, max: 100, value: options.sides, onChange: (e) => set({ sides: num(e.target.value, 3, 100) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "number", "aria-label": "Sides", min: 3, max: 100, value: options.sides, onChange: (e) => set({ sides: num(e.target.value, 3, 100) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
       ] }),
-      options.kind === "star" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
+      options.kind === "star" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1", children: [
           "Points",
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", "aria-label": "Points", min: 3, max: 100, value: options.points, onChange: (e) => set({ points: num(e.target.value, 3, 100) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "number", "aria-label": "Points", min: 3, max: 100, value: options.points, onChange: (e) => set({ points: num(e.target.value, 3, 100) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1", children: [
           "Inner",
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "input",
             {
               type: "range",
@@ -2039,33 +2884,33 @@ var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
           )
         ] })
       ] }),
-      options.kind === "line" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
+      options.kind === "line" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1", children: [
           "Weight",
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", "aria-label": "Line weight", min: 1, max: 200, value: options.weight, onChange: (e) => set({ weight: num(e.target.value, 1, 200) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "number", "aria-label": "Line weight", min: 1, max: 200, value: options.weight, onChange: (e) => set({ weight: num(e.target.value, 1, 200) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "checkbox", "aria-label": "Arrowhead", checked: options.arrow, onChange: (e) => set({ arrow: e.target.checked }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "checkbox", "aria-label": "Arrowhead", checked: options.arrow, onChange: (e) => set({ arrow: e.target.checked }) }),
           "Arrowhead"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[10px] text-slate-500", children: "Drag on the image to draw. Shift: square, circle or 45\xB0 line. Alt: from the centre." }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[10px] text-slate-500", children: "Drag on the image to draw. Shift: square, circle or 45\xB0 line. Alt: from the centre." }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
   ] });
 };
 
 // src/image-editor/TypeOptionsBar.tsx
-var import_react13 = require("react");
-var import_image_editor14 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_image_editor17 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var chip5 = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
 var ALIGN_LABELS = { left: "Left", center: "Centre", right: "Right", justify: "Justify" };
 var TypeOptionsBar = ({ controller, options, onChange, session, className }) => {
-  const [, setTick] = (0, import_react13.useState)(0);
-  (0, import_react13.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
-  (0, import_react13.useEffect)(() => session?.subscribe(() => setTick((n) => n + 1)), [session]);
-  const [error, setError] = (0, import_react13.useState)(null);
+  const [, setTick] = (0, import_react20.useState)(0);
+  (0, import_react20.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  (0, import_react20.useEffect)(() => session?.subscribe(() => setTick((n) => n + 1)), [session]);
+  const [error, setError] = (0, import_react20.useState)(null);
   const active = controller.getActiveLayer();
   const typeId = !session && active?.type === "type" ? active.id : null;
   const here = session?.alive ? session.styleHere() : {};
@@ -2097,11 +2942,11 @@ var TypeOptionsBar = ({ controller, options, onChange, session, className }) =>
       setError(e instanceof Error ? e.message : String(e));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "type-options", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "type-options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "flex items-center gap-1", children: [
         "Font",
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "input",
           {
             list: "pixerate-type-fonts",
@@ -2111,11 +2956,11 @@ var TypeOptionsBar = ({ controller, options, onChange, session, className }) =>
             className: "w-32 rounded border border-slate-700 bg-slate-950 px-1 py-0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("datalist", { id: "pixerate-type-fonts", children: fonts.map((f) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: f }, f)) })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("datalist", { id: "pixerate-type-fonts", children: fonts.map((f) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: f }, f)) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "flex items-center gap-1", children: [
         "Size",
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "input",
           {
             type: "number",
@@ -2128,24 +2973,24 @@ var TypeOptionsBar = ({ controller, options, onChange, session, className }) =>
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "aria-pressed": shown.fontWeight >= 600, className: `${chip5(shown.fontWeight >= 600)} font-bold`, onClick: () => style({ fontWeight: shown.fontWeight >= 600 ? 400 : 700 }), children: "B" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "aria-pressed": shown.italic, className: `${chip5(shown.italic)} italic`, onClick: () => style({ italic: !shown.italic }), children: "I" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "color", "aria-label": "Text colour", value: shown.color, onChange: (e) => style({ color: e.target.value }), className: "h-6 w-8 rounded border border-slate-700 bg-transparent" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", "aria-pressed": shown.fontWeight >= 600, className: `${chip5(shown.fontWeight >= 600)} font-bold`, onClick: () => style({ fontWeight: shown.fontWeight >= 600 ? 400 : 700 }), children: "B" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", "aria-pressed": shown.italic, className: `${chip5(shown.italic)} italic`, onClick: () => style({ italic: !shown.italic }), children: "I" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { type: "color", "aria-label": "Text colour", value: shown.color, onChange: (e) => style({ color: e.target.value }), className: "h-6 w-8 rounded border border-slate-700 bg-transparent" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Alignment", children: import_image_editor14.TEXT_ALIGNS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "aria-pressed": options.align === a, className: chip5(options.align === a), onClick: () => style({ align: a }), children: ALIGN_LABELS[a] }, a)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-[10px] text-slate-500", children: "Click to type point text, drag for a paragraph box, click text to edit it. Esc finishes." }),
-    missing.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { role: "status", className: "text-amber-400", "data-testid": "type-missing-fonts", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Alignment", children: import_image_editor17.TEXT_ALIGNS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", "aria-pressed": options.align === a, className: chip5(options.align === a), onClick: () => style({ align: a }), children: ALIGN_LABELS[a] }, a)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[10px] text-slate-500", children: "Click to type point text, drag for a paragraph box, click text to edit it. Esc finishes." }),
+    missing.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { role: "status", className: "text-amber-400", "data-testid": "type-missing-fonts", children: [
       "Missing ",
       missing.length === 1 ? "font" : "fonts",
       ": ",
       missing.join(", ")
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
   ] });
 };
 
 // src/image-editor/ImageEditor.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -2155,70 +3000,75 @@ var ImageEditor = ({
   exportOptions,
   onInpaint,
   onRemoveBackground,
-  aiHooks
+  aiHooks,
+  effects
 }) => {
   const internalEditor = useImageEditor({ image: src });
   const editor = externalEditor || internalEditor;
   const { state, controller } = editor;
-  const legacyProcess = (0, import_image_editor15.normalizeProcessVersion)(state.adjustments.process) < import_image_editor15.LATEST_PROCESS_VERSION;
-  const canvasRef = (0, import_react14.useRef)(null);
-  const containerRef = (0, import_react14.useRef)(null);
-  const [activeTab, setActiveTab] = (0, import_react14.useState)("crop");
-  const [activeCropRatio, setActiveCropRatio] = (0, import_react14.useState)(null);
-  const [selectionOptions, setSelectionOptions] = (0, import_react14.useState)(import_image_editor15.DEFAULT_SELECTION_TOOL_OPTIONS);
-  const selectionOptionsRef = (0, import_react14.useRef)(selectionOptions);
+  useEffects(controller, effects);
+  const effectsShown = !!controller.effectsProvider || state.layers.some(function has(l) {
+    return l.type === "pixel" && !!l.generator || l.type === "smart" && !!l.smartFilters?.filters.some((f) => f.kind === "effect") || l.type === "group" && l.children.some(has);
+  });
+  const legacyProcess = (0, import_image_editor18.normalizeProcessVersion)(state.adjustments.process) < import_image_editor18.LATEST_PROCESS_VERSION;
+  const canvasRef = (0, import_react21.useRef)(null);
+  const containerRef = (0, import_react21.useRef)(null);
+  const [activeTab, setActiveTab] = (0, import_react21.useState)("crop");
+  const [activeCropRatio, setActiveCropRatio] = (0, import_react21.useState)(null);
+  const [selectionOptions, setSelectionOptions] = (0, import_react21.useState)(import_image_editor18.DEFAULT_SELECTION_TOOL_OPTIONS);
+  const selectionOptionsRef = (0, import_react21.useRef)(selectionOptions);
   selectionOptionsRef.current = selectionOptions;
-  const selectionGestureRef = (0, import_react14.useRef)(null);
+  const selectionGestureRef = (0, import_react21.useRef)(null);
   if (!selectionGestureRef.current || selectionGestureRef.current.controller !== controller) {
-    selectionGestureRef.current = new import_image_editor15.SelectionGesture(controller, () => selectionOptionsRef.current);
+    selectionGestureRef.current = new import_image_editor18.SelectionGesture(controller, () => selectionOptionsRef.current);
   }
-  const selectionDraftRef = (0, import_react14.useRef)(null);
-  const [selectionError, setSelectionError] = (0, import_react14.useState)(null);
-  const paintGestureRef = (0, import_react14.useRef)(null);
-  const paintControllerRef = (0, import_react14.useRef)(controller);
+  const selectionDraftRef = (0, import_react21.useRef)(null);
+  const [selectionError, setSelectionError] = (0, import_react21.useState)(null);
+  const paintGestureRef = (0, import_react21.useRef)(null);
+  const paintControllerRef = (0, import_react21.useRef)(controller);
   if (!paintGestureRef.current || paintControllerRef.current !== controller) {
-    paintGestureRef.current = new import_image_editor15.PaintGesture(controller);
+    paintGestureRef.current = new import_image_editor18.PaintGesture(controller);
     paintControllerRef.current = controller;
   }
-  const brushCursorRef = (0, import_react14.useRef)(null);
-  const [paintError, setPaintError] = (0, import_react14.useState)(null);
-  const transformToolRef = (0, import_react14.useRef)(null);
-  const transformControllerRef = (0, import_react14.useRef)(controller);
+  const brushCursorRef = (0, import_react21.useRef)(null);
+  const [paintError, setPaintError] = (0, import_react21.useState)(null);
+  const transformToolRef = (0, import_react21.useRef)(null);
+  const transformControllerRef = (0, import_react21.useRef)(controller);
   if (!transformToolRef.current || transformControllerRef.current !== controller) {
     transformToolRef.current?.cancel();
-    transformToolRef.current = new import_image_editor15.FreeTransformTool(controller, {
+    transformToolRef.current = new import_image_editor18.FreeTransformTool(controller, {
       schedule: (run) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(run) : run()
     });
     transformControllerRef.current = controller;
   }
   const transformTool = transformToolRef.current;
-  const [, setTransformTick] = (0, import_react14.useState)(0);
-  const [transformCursor, setTransformCursor] = (0, import_react14.useState)("default");
-  const [shapeOptions, setShapeOptions] = (0, import_react14.useState)(import_image_editor15.DEFAULT_SHAPE_TOOL_OPTIONS);
-  const shapeOptionsRef = (0, import_react14.useRef)(shapeOptions);
+  const [, setTransformTick] = (0, import_react21.useState)(0);
+  const [transformCursor, setTransformCursor] = (0, import_react21.useState)("default");
+  const [shapeOptions, setShapeOptions] = (0, import_react21.useState)(import_image_editor18.DEFAULT_SHAPE_TOOL_OPTIONS);
+  const shapeOptionsRef = (0, import_react21.useRef)(shapeOptions);
   shapeOptionsRef.current = shapeOptions;
-  const [typeOptions, setTypeOptions] = (0, import_react14.useState)(import_image_editor15.DEFAULT_TYPE_TOOL_OPTIONS);
-  const typeOptionsRef = (0, import_react14.useRef)(typeOptions);
+  const [typeOptions, setTypeOptions] = (0, import_react21.useState)(import_image_editor18.DEFAULT_TYPE_TOOL_OPTIONS);
+  const typeOptionsRef = (0, import_react21.useRef)(typeOptions);
   typeOptionsRef.current = typeOptions;
-  const shapeGestureRef = (0, import_react14.useRef)(null);
-  const typeToolRef = (0, import_react14.useRef)(null);
-  const shapeTypeControllerRef = (0, import_react14.useRef)(controller);
+  const shapeGestureRef = (0, import_react21.useRef)(null);
+  const typeToolRef = (0, import_react21.useRef)(null);
+  const shapeTypeControllerRef = (0, import_react21.useRef)(controller);
   if (!shapeGestureRef.current || !typeToolRef.current || shapeTypeControllerRef.current !== controller) {
     typeToolRef.current?.finish();
-    shapeGestureRef.current = new import_image_editor15.ShapeDrawGesture(controller, () => shapeOptionsRef.current);
-    typeToolRef.current = new import_image_editor15.TypeToolGesture(controller, () => typeOptionsRef.current);
+    shapeGestureRef.current = new import_image_editor18.ShapeDrawGesture(controller, () => shapeOptionsRef.current);
+    typeToolRef.current = new import_image_editor18.TypeToolGesture(controller, () => typeOptionsRef.current);
     shapeTypeControllerRef.current = controller;
   }
-  const typeInputRef = (0, import_react14.useRef)(null);
-  const [typeSession, setTypeSession] = (0, import_react14.useState)(typeToolRef.current.session);
-  const [shapeTypeError, setShapeTypeError] = (0, import_react14.useState)(null);
-  const [inpaintPrompt, setInpaintPrompt] = (0, import_react14.useState)("");
-  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react14.useState)("annotations");
-  const [isRemovingBg, setIsRemovingBg] = (0, import_react14.useState)(false);
-  const [isInpainting, setIsInpainting] = (0, import_react14.useState)(false);
-  const [aiError, setAiError] = (0, import_react14.useState)(null);
-  const [aiSuccess, setAiSuccess] = (0, import_react14.useState)(null);
-  const [aiTarget, setAiTarget] = (0, import_react14.useState)("auto");
+  const typeInputRef = (0, import_react21.useRef)(null);
+  const [typeSession, setTypeSession] = (0, import_react21.useState)(typeToolRef.current.session);
+  const [shapeTypeError, setShapeTypeError] = (0, import_react21.useState)(null);
+  const [inpaintPrompt, setInpaintPrompt] = (0, import_react21.useState)("");
+  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react21.useState)("annotations");
+  const [isRemovingBg, setIsRemovingBg] = (0, import_react21.useState)(false);
+  const [isInpainting, setIsInpainting] = (0, import_react21.useState)(false);
+  const [aiError, setAiError] = (0, import_react21.useState)(null);
+  const [aiSuccess, setAiSuccess] = (0, import_react21.useState)(null);
+  const [aiTarget, setAiTarget] = (0, import_react21.useState)("auto");
   const aiOptions = aiTarget === "auto" ? {} : { target: aiTarget };
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
@@ -2281,18 +3131,18 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  const [activeColor, setActiveColor] = (0, import_react14.useState)("#ef4444");
-  const [strokeWidth, setStrokeWidth] = (0, import_react14.useState)(3);
-  const [fontSize, setFontSize] = (0, import_react14.useState)(24);
-  const [textInput, setTextInput] = (0, import_react14.useState)("");
-  const draftAnnotationRef = (0, import_react14.useRef)(null);
-  const draftCropRef = (0, import_react14.useRef)(null);
-  const cropDragInfoRef = (0, import_react14.useRef)(null);
-  const annotationDragInfoRef = (0, import_react14.useRef)(null);
-  const isDrawingRef = (0, import_react14.useRef)(false);
-  const currentPathRef = (0, import_react14.useRef)([]);
-  const dragStartPointRef = (0, import_react14.useRef)(null);
-  const renderCanvas = (0, import_react14.useCallback)(
+  const [activeColor, setActiveColor] = (0, import_react21.useState)("#ef4444");
+  const [strokeWidth, setStrokeWidth] = (0, import_react21.useState)(3);
+  const [fontSize, setFontSize] = (0, import_react21.useState)(24);
+  const [textInput, setTextInput] = (0, import_react21.useState)("");
+  const draftAnnotationRef = (0, import_react21.useRef)(null);
+  const draftCropRef = (0, import_react21.useRef)(null);
+  const cropDragInfoRef = (0, import_react21.useRef)(null);
+  const annotationDragInfoRef = (0, import_react21.useRef)(null);
+  const isDrawingRef = (0, import_react21.useRef)(false);
+  const currentPathRef = (0, import_react21.useRef)([]);
+  const dragStartPointRef = (0, import_react21.useRef)(null);
+  const renderCanvas = (0, import_react21.useCallback)(
     async (draftAnnotation, draftCrop) => {
       const canvas = canvasRef.current;
       const container = containerRef.current;
@@ -2315,8 +3165,8 @@ var ImageEditor = ({
     },
     [controller, activeTab, transformTool]
   );
-  (0, import_react14.useEffect)(() => typeSession?.subscribe(() => void renderCanvas()), [typeSession, renderCanvas]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => typeSession?.subscribe(() => void renderCanvas()), [typeSession, renderCanvas]);
+  (0, import_react21.useEffect)(() => {
     if (activeTab === "annotate" && state.activeTool === "type") return;
     if (typeToolRef.current?.session) {
       typeToolRef.current.finish();
@@ -2351,7 +3201,7 @@ var ImageEditor = ({
       el.value = "";
     }
   };
-  (0, import_react14.useEffect)(() => transformTool.subscribe(() => {
+  (0, import_react21.useEffect)(() => transformTool.subscribe(() => {
     setTransformTick((n) => n + 1);
     void renderCanvas();
   }), [transformTool, renderCanvas]);
@@ -2362,8 +3212,8 @@ var ImageEditor = ({
     const sy = rect.height > 0 ? canvas.height / rect.height : 1;
     const s = controller.getState();
     const cropping = activeTab === "crop";
-    const projection = (0, import_image_editor15.getViewportProjection)(s, canvas.width, canvas.height, cropping);
-    const pt = (0, import_image_editor15.canvasToImagePoint)({ x: (e.clientX - rect.left) * sx, y: (e.clientY - rect.top) * sy }, s, canvas.width, canvas.height, cropping);
+    const projection = (0, import_image_editor18.getViewportProjection)(s, canvas.width, canvas.height, cropping);
+    const pt = (0, import_image_editor18.canvasToImagePoint)({ x: (e.clientX - rect.left) * sx, y: (e.clientY - rect.top) * sy }, s, canvas.width, canvas.height, cropping);
     transformTool.setView(projection.scale);
     return { pt, tolerance: 6 / (projection.scale || 1) };
   };
@@ -2394,7 +3244,7 @@ var ImageEditor = ({
     transformTool.up();
     return true;
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onKey = (e) => {
       if (transformTool.key(e)) e.preventDefault();
@@ -2402,7 +3252,7 @@ var ImageEditor = ({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [transformTool]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
     const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
     const animId = raf(() => {
@@ -2410,12 +3260,12 @@ var ImageEditor = ({
     });
     return () => caf(animId);
   }, [renderCanvas, state]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (activeTab === "crop" && editor.state.activeTool !== "crop") {
       editor.setTool("crop");
     }
   }, [activeTab, editor]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     if (typeof ResizeObserver !== "undefined") {
@@ -2451,8 +3301,8 @@ var ImageEditor = ({
     const sy = rect.height > 0 ? canvas.height / rect.height : 1;
     const s = controller.getState();
     return list.map((ev) => ({
-      ...(0, import_image_editor15.canvasToImagePoint)({ x: (ev.clientX - rect.left) * sx, y: (ev.clientY - rect.top) * sy }, s, canvas.width, canvas.height, false),
-      pressure: (0, import_image_editor15.pointerPressure)(ev)
+      ...(0, import_image_editor18.canvasToImagePoint)({ x: (ev.clientX - rect.left) * sx, y: (ev.clientY - rect.top) * sy }, s, canvas.width, canvas.height, false),
+      pressure: (0, import_image_editor18.pointerPressure)(ev)
     }));
   };
   const handlePaintPointerDown = (e) => {
@@ -2483,10 +3333,10 @@ var ImageEditor = ({
       if (g.error) setPaintError(g.error);
     }
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (activeTab !== "paint" || typeof window === "undefined") return;
     const onKey = (e) => {
-      if ((0, import_image_editor15.handlePaintShortcut)(controller, e)) e.preventDefault();
+      if ((0, import_image_editor18.handlePaintShortcut)(controller, e)) e.preventDefault();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
@@ -2497,7 +3347,7 @@ var ImageEditor = ({
     const canvasPt = getCanvasEventPoint(e);
     if (activeTab === "select") {
       const gesture = selectionGestureRef.current;
-      const imgPt = (0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const imgPt = (0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
       void gesture.begin(imgPt, e).then(() => setSelectionError(gesture.error));
       return;
     }
@@ -2508,8 +3358,8 @@ var ImageEditor = ({
         width: state.imageDimensions.width,
         height: state.imageDimensions.height
       };
-      const handle = (0, import_image_editor15.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
-      const startImgPt = (0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
+      const handle = (0, import_image_editor18.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
+      const startImgPt = (0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
       if (handle) {
         cropDragInfoRef.current = {
           handle,
@@ -2528,7 +3378,7 @@ var ImageEditor = ({
       return;
     }
     if (activeTab === "annotate" && (state.activeTool === "shape" || state.activeTool === "type")) {
-      const imgPt = (0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const imgPt = (0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
       setShapeTypeError(null);
       if (state.activeTool === "shape") shapeGestureRef.current.down(imgPt);
       else {
@@ -2539,12 +3389,12 @@ var ImageEditor = ({
       return;
     }
     if (activeTab === "annotate") {
-      const imgPt = (0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const imgPt = (0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
       dragStartPointRef.current = imgPt;
       if (state.activeTool === "select") {
         for (let i = state.annotations.length - 1; i >= 0; i--) {
           const ann = state.annotations[i];
-          if ((0, import_image_editor15.hitTestAnnotation)(imgPt, ann)) {
+          if ((0, import_image_editor18.hitTestAnnotation)(imgPt, ann)) {
             editor.selectAnnotation(ann.id);
             annotationDragInfoRef.current = {
               annId: ann.id,
@@ -2580,7 +3430,7 @@ var ImageEditor = ({
     const canvasPt = getCanvasEventPoint(e);
     if (activeTab === "select") {
       const gesture = selectionGestureRef.current;
-      if (gesture.active && gesture.move((0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false))) {
+      if (gesture.active && gesture.move((0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false))) {
         selectionDraftRef.current = gesture.draftPath;
         renderCanvas();
       }
@@ -2589,7 +3439,7 @@ var ImageEditor = ({
     if (activeTab === "crop") {
       const drag = cropDragInfoRef.current;
       if (drag) {
-        const currentImgPt = (0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
+        const currentImgPt = (0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
         let newCrop;
         if (drag.handle === "new") {
           const minX = Math.max(0, Math.min(drag.startImgPt.x, currentImgPt.x));
@@ -2603,7 +3453,7 @@ var ImageEditor = ({
             height: Math.round(Math.max(20, maxY - minY))
           };
         } else {
-          newCrop = (0, import_image_editor15.calculateCropDrag)(
+          newCrop = (0, import_image_editor18.calculateCropDrag)(
             drag.startCrop,
             drag.handle,
             drag.startImgPt,
@@ -2623,15 +3473,15 @@ var ImageEditor = ({
           width: state.imageDimensions.width,
           height: state.imageDimensions.height
         };
-        const handle = (0, import_image_editor15.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
-        canvas.style.cursor = (0, import_image_editor15.getCropCursor)(handle, state.transform);
+        const handle = (0, import_image_editor18.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
+        canvas.style.cursor = (0, import_image_editor18.getCropCursor)(handle, state.transform);
       }
       return;
     }
     if (activeTab === "annotate" && state.activeTool === "shape") {
       const g = shapeGestureRef.current;
       if (g.active) {
-        g.move((0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false), { shift: e.shiftKey, alt: e.altKey });
+        g.move((0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false), { shift: e.shiftKey, alt: e.altKey });
         if (g.error) setShapeTypeError(g.error);
       }
       return;
@@ -2639,7 +3489,7 @@ var ImageEditor = ({
     if (activeTab === "annotate") {
       if (annotationDragInfoRef.current) {
         const drag = annotationDragInfoRef.current;
-        const currentImgPt2 = (0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+        const currentImgPt2 = (0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
         const dx = currentImgPt2.x - drag.startImgPt.x;
         const dy = currentImgPt2.y - drag.startImgPt.y;
         editor.updateAnnotation(drag.annId, {
@@ -2651,10 +3501,10 @@ var ImageEditor = ({
       const startPt = dragStartPointRef.current;
       if (!startPt) {
         if (state.activeTool === "select") {
-          const imgPt = (0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+          const imgPt = (0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
           let hovered = false;
           for (let i = state.annotations.length - 1; i >= 0; i--) {
-            if ((0, import_image_editor15.hitTestAnnotation)(imgPt, state.annotations[i])) {
+            if ((0, import_image_editor18.hitTestAnnotation)(imgPt, state.annotations[i])) {
               hovered = true;
               break;
             }
@@ -2665,7 +3515,7 @@ var ImageEditor = ({
         }
         return;
       }
-      const currentImgPt = (0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const currentImgPt = (0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
       if (state.activeTool === "pen" && isDrawingRef.current) {
         currentPathRef.current.push(currentImgPt);
         const draft = {
@@ -2745,7 +3595,7 @@ var ImageEditor = ({
     if (activeTab === "select") {
       const gesture = selectionGestureRef.current;
       if (gesture.active) {
-        gesture.end((0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false), e);
+        gesture.end((0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false), e);
         selectionDraftRef.current = null;
         renderCanvas();
       }
@@ -2768,7 +3618,7 @@ var ImageEditor = ({
     }
     if (activeTab === "annotate" && state.activeTool === "type") {
       const tool = typeToolRef.current;
-      tool.up((0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false));
+      tool.up((0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false));
       setTypeSession(tool.session);
       if (tool.error) setShapeTypeError(tool.error);
       void renderCanvas();
@@ -2782,7 +3632,7 @@ var ImageEditor = ({
       }
       const startPt = dragStartPointRef.current;
       if (startPt) {
-        const currentImgPt = (0, import_image_editor15.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+        const currentImgPt = (0, import_image_editor18.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
         if (state.activeTool === "pen" && isDrawingRef.current) {
           if (currentPathRef.current.length > 1) {
             editor.addAnnotation({
@@ -2878,15 +3728,15 @@ var ImageEditor = ({
       link.click();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       className: `flex flex-col bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-2xl text-slate-100 ${className}`,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -2898,7 +3748,7 @@ var ImageEditor = ({
                 children: "Transform & Crop"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -2910,7 +3760,7 @@ var ImageEditor = ({
                 children: "Adjustments"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -2922,7 +3772,7 @@ var ImageEditor = ({
                 children: "Layers"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -2934,7 +3784,7 @@ var ImageEditor = ({
                 children: "Paint"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -2946,7 +3796,7 @@ var ImageEditor = ({
                 children: "Select & Mask"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -2958,7 +3808,7 @@ var ImageEditor = ({
                 children: "Annotations"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -2970,7 +3820,7 @@ var ImageEditor = ({
                 children: "Depth Mask"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               "button",
               {
                 type: "button",
@@ -2980,14 +3830,14 @@ var ImageEditor = ({
                 },
                 className: `px-3 py-1.5 rounded-md font-medium transition-colors flex items-center gap-1.5 ${activeTab === "ai" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                   "AI Tools"
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -2998,7 +3848,7 @@ var ImageEditor = ({
                 children: "\u21A9"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -3009,7 +3859,7 @@ var ImageEditor = ({
                 children: "\u21AA"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -3018,8 +3868,8 @@ var ImageEditor = ({
                 children: "Reset"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -3029,11 +3879,11 @@ var ImageEditor = ({
                 children: "-"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
               Math.round(state.zoom * 100),
               "%"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -3043,8 +3893,8 @@ var ImageEditor = ({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -3055,7 +3905,7 @@ var ImageEditor = ({
                 children: "Hold Compare"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -3066,16 +3916,16 @@ var ImageEditor = ({
             )
           ] })
         ] }),
-        transformTool.active && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FreeTransformOptionsBar, { tool: transformTool, className: "border-b border-slate-800 bg-slate-900/95 px-4 py-2" }),
-        !transformTool.active && transformTool.error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "alert", className: "border-b border-rose-900 bg-rose-950/80 px-4 py-1.5 text-xs text-rose-200", children: transformTool.error }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        transformTool.active && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FreeTransformOptionsBar, { tool: transformTool, className: "border-b border-slate-800 bg-slate-900/95 px-4 py-2" }),
+        !transformTool.active && transformTool.error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { role: "alert", className: "border-b border-rose-900 bg-rose-950/80 px-4 py-1.5 text-xs text-rose-200", children: transformTool.error }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "div",
             {
               ref: containerRef,
               className: "relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "canvas",
                   {
                     ref: canvasRef,
@@ -3092,7 +3942,7 @@ var ImageEditor = ({
                     className: `absolute inset-0 w-full h-full block ${transformTool.active ? "touch-none" : activeTab === "paint" ? "touch-none cursor-crosshair" : activeTab === "annotate" && state.activeTool === "type" ? "cursor-text" : activeTab === "annotate" && state.activeTool === "shape" ? "cursor-crosshair" : ""}`
                   }
                 ),
-                typeSession && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                typeSession && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "textarea",
                   {
                     ref: typeInputRef,
@@ -3114,11 +3964,11 @@ var ImageEditor = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "w-full md:w-80 bg-slate-900/90 border-t md:border-t-0 md:border-l border-slate-800 p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]", children: [
-            activeTab === "crop" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "w-full md:w-80 bg-slate-900/90 border-t md:border-t-0 md:border-l border-slate-800 p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]", children: [
+            activeTab === "crop" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3130,7 +3980,7 @@ var ImageEditor = ({
                     children: "Freeform"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3142,7 +3992,7 @@ var ImageEditor = ({
                     children: "1:1 Square"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3154,7 +4004,7 @@ var ImageEditor = ({
                     children: "4:3 Standard"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3166,7 +4016,7 @@ var ImageEditor = ({
                     children: "16:9 Wide"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3178,7 +4028,7 @@ var ImageEditor = ({
                     children: "3:2 Photo"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3191,10 +4041,10 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3203,7 +4053,7 @@ var ImageEditor = ({
                     children: "Rotate -90\xB0"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3212,7 +4062,7 @@ var ImageEditor = ({
                     children: "Rotate +90\xB0"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3221,7 +4071,7 @@ var ImageEditor = ({
                     children: "Flip Horizontal"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3232,10 +4082,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "adjust" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            activeTab === "adjust" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3245,25 +4095,25 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Histogram, { histogram: editor.histogram }),
-              import_image_editor15.IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react14.default.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Histogram, { histogram: editor.histogram }),
+              import_image_editor18.IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react21.default.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   ControlSlider,
                   {
                     spec,
-                    value: (0, import_image_editor15.readAdjustmentControls)(state.adjustments)[spec.id],
+                    value: (0, import_image_editor18.readAdjustmentControls)(state.adjustments)[spec.id],
                     disabled: spec.requiresProcess !== void 0 && legacyProcess,
                     onChange: (v) => editor.setAdjustments({ [spec.id]: v })
                   }
                 ),
-                spec.id === "tint" && legacyProcess && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                spec.id === "tint" && legacyProcess && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                   "div",
                   {
                     className: "flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200",
                     "data-testid": "image-editor-process-notice",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         "button",
                         {
                           type: "button",
@@ -3276,7 +4126,7 @@ var ImageEditor = ({
                   }
                 )
               ] }, spec.id)),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 AdjustmentLayersPanel,
                 {
                   controller,
@@ -3285,9 +4135,9 @@ var ImageEditor = ({
                 }
               ) })
             ] }),
-            activeTab === "layers" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            activeTab === "layers" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "button",
                 {
                   type: "button",
@@ -3298,14 +4148,15 @@ var ImageEditor = ({
                   children: "Free Transform"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LayersPanel, { controller }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Colour" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ColorProfilePanel, { controller })
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LayersPanel, { controller }),
+              effectsShown && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ImageProviderEffectsPanel, { controller, className: "border-t border-slate-700/60 pt-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Colour" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ColorProfilePanel, { controller })
             ] }),
-            activeTab === "paint" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BrushOptionsBar, { controller }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            activeTab === "paint" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BrushOptionsBar, { controller }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "button",
                 {
                   type: "button",
@@ -3316,12 +4167,12 @@ var ImageEditor = ({
                   children: "Free Transform"
                 }
               ),
-              paintError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LayersPanel, { controller }) })
+              paintError && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LayersPanel, { controller }) })
             ] }),
-            activeTab === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Shape & Type Layers" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid grid-cols-2 gap-1.5", children: ["shape", "type"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            activeTab === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Shape & Type Layers" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-2 gap-1.5", children: ["shape", "type"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "button",
                 {
                   type: "button",
@@ -3332,13 +4183,13 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              state.activeTool === "shape" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ShapeOptionsBar, { controller, options: shapeOptions, onChange: setShapeOptions }),
-              state.activeTool === "type" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TypeOptionsBar, { controller, options: typeOptions, onChange: setTypeOptions, session: typeSession }),
-              state.activeTool === "type" && typeSession && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", onClick: finishTyping, className: "self-start rounded bg-slate-800 px-2 py-1 text-[11px] text-slate-200 hover:bg-slate-700", children: "Done editing text" }),
-              shapeTypeError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { role: "alert", className: "text-rose-400", "data-testid": "shape-type-error", children: shapeTypeError }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              state.activeTool === "shape" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ShapeOptionsBar, { controller, options: shapeOptions, onChange: setShapeOptions }),
+              state.activeTool === "type" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TypeOptionsBar, { controller, options: typeOptions, onChange: setTypeOptions, session: typeSession }),
+              state.activeTool === "type" && typeSession && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", onClick: finishTyping, className: "self-start rounded bg-slate-800 px-2 py-1 text-[11px] text-slate-200 hover:bg-slate-700", children: "Done editing text" }),
+              shapeTypeError && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "text-rose-400", "data-testid": "shape-type-error", children: shapeTypeError }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "button",
                 {
                   type: "button",
@@ -3348,9 +4199,9 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: "text-slate-400", children: "Color:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "text-slate-400", children: "Color:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "input",
                   {
                     type: "color",
@@ -3359,15 +4210,15 @@ var ImageEditor = ({
                     className: "w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-1 ml-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Width:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "font-mono", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 ml-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Width:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "font-mono", children: [
                       strokeWidth,
                       "px"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "input",
                     {
                       type: "range",
@@ -3380,10 +4231,10 @@ var ImageEditor = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "input",
                   {
                     type: "text",
@@ -3394,7 +4245,7 @@ var ImageEditor = ({
                     className: "flex-1 bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3404,14 +4255,14 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between text-slate-400", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Font Size:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "font-mono", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between text-slate-400", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Font Size:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "font-mono", children: [
                   fontSize,
                   "px"
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "input",
                 {
                   type: "range",
@@ -3422,14 +4273,14 @@ var ImageEditor = ({
                   className: "w-full accent-indigo-500"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-slate-400", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-slate-400", children: [
                   "Layers (",
                   state.annotations.length,
                   ")"
                 ] }),
-                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3438,7 +4289,7 @@ var ImageEditor = ({
                     children: "Delete Selected"
                   }
                 ),
-                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3449,10 +4300,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "depth" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            activeTab === "depth" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3462,8 +4313,8 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -3472,12 +4323,12 @@ var ImageEditor = ({
                     className: "rounded accent-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Enable Depth / Alpha Mask" })
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
-              state.depthMask.enabled && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              state.depthMask.enabled && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "input",
                     {
                       type: "text",
@@ -3488,8 +4339,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3498,7 +4349,7 @@ var ImageEditor = ({
                       children: "Threshold Mode"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3508,12 +4359,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Depth Start (Lower):" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Depth Start (Lower):" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "input",
                     {
                       type: "range",
@@ -3527,12 +4378,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Depth Stop (Upper):" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Depth Stop (Upper):" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "input",
                     {
                       type: "range",
@@ -3546,12 +4397,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Softness:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-mono", children: state.depthMask.softness })
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Softness:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-mono", children: state.depthMask.softness })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "input",
                     {
                       type: "range",
@@ -3563,8 +4414,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -3573,12 +4424,12 @@ var ImageEditor = ({
                       className: "rounded accent-indigo-500"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Invert Mask" })
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Invert Mask" })
                 ] })
               ] })
             ] }),
-            activeTab === "select" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            activeTab === "select" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 SelectionOptionsBar,
                 {
                   controller,
@@ -3588,9 +4439,9 @@ var ImageEditor = ({
                   quickMask: Boolean(state.quickMask)
                 }
               ),
-              selectionError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { role: "alert", className: "text-rose-400", children: selectionError }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              selectionError && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "text-rose-400", children: selectionError }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3601,7 +4452,7 @@ var ImageEditor = ({
                     children: "Transform Selection"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3613,12 +4464,12 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
             ] }),
-            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Results go to" }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Results go to" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                   "select",
                   {
                     "aria-label": "AI result target",
@@ -3626,54 +4477,54 @@ var ImageEditor = ({
                     onChange: (e) => setAiTarget(e.target.value),
                     className: "bg-slate-800 border border-slate-700 rounded px-1.5 py-1",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "new-layer", children: "New layer / mask" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "replace", children: "Replace image" })
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "new-layer", children: "New layer / mask" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "replace", children: "Replace image" })
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" }) }),
                     "Background Removal"
                   ] }),
-                  isRemovingBg && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-900/60 text-indigo-300 animate-pulse", children: "Removing..." })
+                  isRemovingBg && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-900/60 text-indigo-300 animate-pulse", children: "Removing..." })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: handleRemoveBackground,
                     disabled: isRemovingBg || isInpainting,
                     className: "mt-1 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
-                    children: isRemovingBg ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isRemovingBg ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Removing Background..."
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                       "Remove Background"
                     ] })
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.7 0l-9.72 9.72-1.94 4.86 4.86-1.94 9.72-9.72a1.2 1.2 0 0 0 .06-1.64z" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "m14 7 3 3" })
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.7 0l-9.72 9.72-1.94 4.86 4.86-1.94 9.72-9.72a1.2 1.2 0 0 0 .06-1.64z" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m14 7 3 3" })
                     ] }),
                     "Generative Inpainting"
                   ] }),
-                  isInpainting && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-900/60 text-purple-300 animate-pulse", children: "Inpainting..." })
+                  isInpainting && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-900/60 text-purple-300 animate-pulse", children: "Inpainting..." })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "textarea",
                     {
                       id: "ai-inpaint-prompt-react",
@@ -3685,10 +4536,10 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -3701,7 +4552,7 @@ var ImageEditor = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -3716,25 +4567,25 @@ var ImageEditor = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: handleInpaint,
                     disabled: isInpainting || isRemovingBg || !inpaintPrompt.trim(),
                     className: "mt-1 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
-                    children: isInpainting ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isInpainting ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Generating Inpaint..."
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                       "Apply Inpainting"
                     ] })
                   }
                 )
               ] }),
-              aiError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
-              aiSuccess && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
+              aiError && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
+              aiSuccess && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
             ] })
           ] })
         ] })
@@ -3752,13 +4603,16 @@ var ImageEditor = ({
   FreeTransformOptionsBar,
   Histogram,
   ImageEditor,
+  ImageProviderEffectsPanel,
   LayerEffectsPanel,
   LayersPanel,
+  PaintGradientEditor,
   RefineEdgePanel,
   SelectionOptionsBar,
   ShapeOptionsBar,
   TypeOptionsBar,
   useImageEditor,
+  useImageEffectsTools,
   useImageHistogram
 });
 //# sourceMappingURL=index.cjs.map