@pixerate/editor-react 0.63.0 → 0.65.0

package/dist/index.cjs

@@ -46,6 +46,7 @@ __export(src_exports, {
   ExportDocxButton: () => ExportDocxButton,
   FindReplaceBar: () => FindReplaceBar,
   FormulaHints: () => FormulaHints,
+  FreeTransformOptionsBar: () => FreeTransformOptionsBar,
   GenerationHistory: () => GenerationHistory,
   GenerationSettings: () => GenerationSettings,
   Histogram: () => Histogram,
@@ -53,6 +54,7 @@ __export(src_exports, {
   ImageEditor: () => ImageEditor,
   InsertTableGrid: () => InsertTableGrid,
   JobProgress: () => JobProgress,
+  LayerEffectsPanel: () => LayerEffectsPanel,
   LayersPanel: () => LayersPanel,
   MergePreview: () => MergePreview,
   NameManager: () => NameManager,
@@ -2003,17 +2005,17 @@ var SpreadsheetValidationDialog = ({ prompt, onResolve }) => {
                 style === "warning" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-2", children: "Continue?" })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-4 flex justify-end gap-2", children: buttons.map((button2, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-4 flex justify-end gap-2", children: buttons.map((button3, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 ref: i === 0 ? firstButton : void 0,
                 type: "button",
-                "data-action": button2.action,
+                "data-action": button3.action,
                 className: `rounded border border-border px-3 py-1 ${i === 0 ? "bg-primary text-primary-foreground" : "hover:bg-muted"}`,
-                onClick: () => onResolve(button2.action),
-                children: button2.label
+                onClick: () => onResolve(button3.action),
+                children: button3.label
               },
-              button2.action
+              button3.action
             )) })
           ]
         }
@@ -3783,8 +3785,8 @@ function useImageEditor(options = {}) {
 }
 
 // src/image-editor/ImageEditor.tsx
-var import_react42 = __toESM(require("react"), 1);
-var import_image_editor10 = require("@pixerate/editor/image-editor");
+var import_react44 = __toESM(require("react"), 1);
+var import_image_editor12 = require("@pixerate/editor/image-editor");
 
 // src/image-editor/ControlSlider.tsx
 var import_image_editor2 = require("@pixerate/editor/image-editor");
@@ -4216,9 +4218,198 @@ var AdjustmentLayersPanel = ({ controller, layers: layersProp, histogram }) => {
 };
 
 // src/image-editor/LayersPanel.tsx
+var import_react39 = require("react");
+
+// src/image-editor/LayerEffectsPanel.tsx
 var import_react38 = require("react");
 var import_image_editor6 = require("@pixerate/editor/image-editor");
 var import_jsx_runtime21 = require("react/jsx-runtime");
+var button = "px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 hover:text-white disabled:opacity-40";
+var LayerEffectsPanel = ({ controller, layerId, className }) => {
+  const [, setTick] = (0, import_react38.useState)(0);
+  (0, import_react38.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const [open, setOpen] = (0, import_react38.useState)(null);
+  const [error, setError] = (0, import_react38.useState)(null);
+  const commitNext = (0, import_react38.useRef)(true);
+  const layer = layerId ? controller.getLayer(layerId) : controller.getActiveLayer();
+  const model = (0, import_image_editor6.layerEffectsPanel)(layer);
+  const id = layer?.id;
+  const attempt = (fn) => {
+    try {
+      setError(null);
+      fn();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+  const sliderEvents = {
+    onPointerDown: () => commitNext.current = true,
+    onPointerUp: () => commitNext.current = true,
+    onKeyDown: () => commitNext.current = true
+  };
+  if (!model.available || !id) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `text-xs text-slate-500 ${className ?? ""}`, "data-testid": "layer-effects", children: model.reason });
+  }
+  const effects = controller.getLayerEffects(id);
+  const patterns = controller.getDocumentPatterns();
+  const change = (effectId, control, value, drag = false) => attempt(() => {
+    const effect = controller.getLayerEffects(id).items.find((e) => e.id === effectId);
+    controller.updateLayerEffect(id, effectId, (0, import_image_editor6.effectControlChange)(effect, control.key, value, patterns), drag ? commitNext.current : true);
+    if (drag) commitNext.current = false;
+  });
+  const renderControl = (effectId, c) => {
+    const label = `${c.label}`;
+    switch (c.type) {
+      case "range": {
+        const k = c.percent ? 100 : 1;
+        const shown = Math.round(c.value * k * 100) / 100;
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-slate-400", children: [
+            label,
+            " ",
+            shown,
+            c.unit
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "input",
+            {
+              type: "range",
+              "aria-label": label,
+              min: c.min * k,
+              max: c.max * k,
+              step: c.step * k,
+              value: shown,
+              disabled: model.readOnly,
+              ...sliderEvents,
+              onChange: (e) => change(effectId, c, Number(e.target.value) / k, true),
+              className: "accent-indigo-500"
+            }
+          )
+        ] }, c.key);
+      }
+      case "color":
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center gap-1.5 text-slate-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "color", "aria-label": label, value: c.value, disabled: model.readOnly, onChange: (e) => change(effectId, c, e.target.value) }),
+          label
+        ] }, c.key);
+      case "checkbox":
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center gap-1.5 text-slate-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "checkbox", "aria-label": label, checked: c.value, disabled: model.readOnly, onChange: (e) => change(effectId, c, e.target.checked), className: "accent-indigo-500" }),
+          label
+        ] }, c.key);
+      case "select":
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-slate-400", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "select",
+            {
+              "aria-label": label,
+              value: c.value,
+              disabled: model.readOnly,
+              onChange: (e) => change(effectId, c, e.target.value),
+              className: "bg-slate-800 border border-slate-700 rounded px-1.5 py-1",
+              children: c.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: o.value, children: o.label }, o.value))
+            }
+          )
+        ] }, c.key);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `flex flex-col gap-1.5 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "layer-effects", "aria-label": "Layer effects", role: "group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-semibold text-slate-300", children: "fx Effects" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center gap-1 text-slate-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            "aria-label": "Effects on",
+            checked: model.enabled,
+            disabled: model.readOnly,
+            onChange: (e) => attempt(() => controller.setLayerEffectsEnabled(id, e.target.checked)),
+            className: "accent-indigo-500"
+          }
+        ),
+        "On"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center gap-1 text-slate-400", children: [
+        "Scale",
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "input",
+          {
+            type: "number",
+            "aria-label": "Scale effects",
+            min: 1,
+            max: 1e3,
+            step: 1,
+            value: Math.round(model.scale * 100),
+            disabled: model.readOnly,
+            onChange: (e) => {
+              const v = Number(e.target.value);
+              if (v >= 1 && v <= 1e3) attempt(() => controller.setLayerEffectsEnabled(id, model.enabled, v / 100));
+            },
+            className: "w-14 bg-slate-800 border border-slate-700 rounded px-1"
+          }
+        ),
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "select",
+        {
+          "aria-label": "Add effect",
+          value: "",
+          disabled: model.readOnly,
+          onChange: (e) => {
+            const kind = e.target.value;
+            if (!kind) return;
+            attempt(() => setOpen(controller.addLayerEffect(id, kind).effect.id));
+          },
+          className: "bg-slate-800 border border-slate-700 rounded px-1.5 py-1",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "", children: "Add effect\u2026" }),
+            import_image_editor6.LAYER_EFFECT_MENU.map((m) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: m.kind, children: m.label }, m.kind))
+          ]
+        }
+      )
+    ] }),
+    model.readOnly && model.reason && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-slate-500", children: model.reason }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "flex flex-col gap-1", "aria-label": "Effects", children: model.rows.map((row) => {
+      const effect = effects.items.find((e) => e.id === row.id);
+      const expanded = open === row.id;
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { "data-effect-id": row.id, className: "rounded bg-slate-900/60 ring-1 ring-slate-800", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1.5 px-1.5 py-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": `${row.label} on`,
+              checked: row.enabled,
+              disabled: model.readOnly,
+              onChange: (e) => attempt(() => controller.updateLayerEffect(id, row.id, { enabled: e.target.checked })),
+              className: "accent-indigo-500"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": expanded,
+              className: `flex-1 text-left ${row.enabled && model.enabled ? "" : "text-slate-500"}`,
+              onClick: () => setOpen(expanded ? null : row.id),
+              children: row.label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: button, "aria-label": `Remove ${row.label}`, disabled: model.readOnly, onClick: () => attempt(() => controller.removeLayerEffect(id, row.id)), children: "\u2715" })
+        ] }),
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1 px-1.5 pb-1.5", "data-testid": "effect-settings", children: (0, import_image_editor6.layerEffectControls)(effect, patterns).map((c) => renderControl(row.id, c)) })
+      ] }, row.id);
+    }) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
+  ] });
+};
+
+// src/image-editor/LayersPanel.tsx
+var import_image_editor7 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var iconButton = "px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 hover:text-white disabled:opacity-40";
 var rowClass = (active) => `flex items-center gap-1.5 px-1.5 py-1 rounded cursor-pointer select-none ${active ? "bg-indigo-600/30 ring-1 ring-indigo-500" : "hover:bg-slate-800"}`;
 var Thumbnail = ({
@@ -4229,8 +4420,8 @@ var Thumbnail = ({
   selected,
   testId
 }) => {
-  const ref = (0, import_react38.useRef)(null);
-  (0, import_react38.useEffect)(() => {
+  const ref = (0, import_react39.useRef)(null);
+  (0, import_react39.useEffect)(() => {
     const canvas = ref.current;
     const ctx = canvas?.getContext("2d");
     if (!canvas || !ctx || !pixels || typeof ctx.createImageData !== "function") return;
@@ -4240,7 +4431,7 @@ var Thumbnail = ({
     img.data.set(pixels.data);
     ctx.putImageData(img, 0, 0);
   }, [pixels]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "canvas",
     {
       ref,
@@ -4253,15 +4444,15 @@ var Thumbnail = ({
     }
   );
 };
-var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "image", className }) => {
-  const [, setTick] = (0, import_react38.useState)(0);
-  (0, import_react38.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
-  const [error, setError] = (0, import_react38.useState)(null);
-  const [renaming, setRenaming] = (0, import_react38.useState)(null);
-  const [menu, setMenu] = (0, import_react38.useState)(null);
-  const [drag, setDrag] = (0, import_react38.useState)(null);
-  const [psdNotes, setPsdNotes] = (0, import_react38.useState)([]);
-  const fileInput = (0, import_react38.useRef)(null);
+var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "image", effects = true, className }) => {
+  const [, setTick] = (0, import_react39.useState)(0);
+  (0, import_react39.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const [error, setError] = (0, import_react39.useState)(null);
+  const [renaming, setRenaming] = (0, import_react39.useState)(null);
+  const [menu, setMenu] = (0, import_react39.useState)(null);
+  const [drag, setDrag] = (0, import_react39.useState)(null);
+  const [psdNotes, setPsdNotes] = (0, import_react39.useState)([]);
+  const fileInput = (0, import_react39.useRef)(null);
   const psdTask = async (fn) => {
     try {
       setError(null);
@@ -4270,9 +4461,9 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
       setError(err instanceof Error ? err.message : String(err));
     }
   };
-  const commitNext = (0, import_react38.useRef)(true);
+  const commitNext = (0, import_react39.useRef)(true);
   const state = controller.getState();
-  const rows = (0, import_image_editor6.layerPanelRows)(state.layers, state.activeLayerId);
+  const rows = (0, import_image_editor7.layerPanelRows)(state.layers, state.activeLayerId);
   const active = controller.getActiveLayer();
   const attempt = (fn) => {
     try {
@@ -4284,7 +4475,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
   };
   const run = async (action) => {
     setMenu(null);
-    setError(await (0, import_image_editor6.runLayerMenuAction)(controller, action));
+    setError(await (0, import_image_editor7.runLayerMenuAction)(controller, action));
   };
   const prop = (key, value) => attempt(() => {
     controller.setLayerProperties(active.id, { [key]: value }, commitNext.current);
@@ -4302,20 +4493,20 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
     if (!id) return;
     const rect = e.currentTarget.getBoundingClientRect();
     const fraction = rect.height ? (e.clientY - rect.top) / rect.height : 0.5;
-    const placement = (0, import_image_editor6.dropPlacement)(state.layers, id, row.layer.id, (0, import_image_editor6.dropZone)(fraction, row.layer.type === "group"));
+    const placement = (0, import_image_editor7.dropPlacement)(state.layers, id, row.layer.id, (0, import_image_editor7.dropZone)(fraction, row.layer.type === "group"));
     if (placement) attempt(() => controller.moveLayer(id, placement));
   };
   const thumb = (layer) => layer.type === "pixel" ? controller.getLayerThumbnail(layer.id, { maxSide: 64 }) : null;
   const maskThumb = (layer) => layer.mask && !layer.mask.source ? controller.getLayerThumbnail(layer.id, { maxSide: 64, mask: true }) : null;
   const locked = (layer) => Boolean(layer.locks?.all || layer.locks?.pixels || layer.locks?.position || layer.locks?.transparency);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "layers-panel", onClick: () => menu && setMenu(null), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "toolbar", "aria-label": "Layer actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: iconButton, onClick: () => run("new-layer"), children: "New Layer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: iconButton, onClick: () => run("new-group"), children: "New Group" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("duplicate"), children: "Duplicate" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("add-mask"), children: "Add Mask" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("delete"), children: "Delete" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "layers-panel", onClick: () => menu && setMenu(null), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "toolbar", "aria-label": "Layer actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: iconButton, onClick: () => run("new-layer"), children: "New Layer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: iconButton, onClick: () => run("new-group"), children: "New Group" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("duplicate"), children: "Duplicate" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("add-mask"), children: "Add Mask" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("delete"), children: "Delete" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           type: "button",
@@ -4330,39 +4521,39 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
           children: "\u22EF"
         }
       ),
-      psd && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: iconButton, onClick: () => fileInput.current?.click(), children: "Open PSD\u2026" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: iconButton, onClick: () => psdTask(async () => (await (0, import_image_editor6.downloadPsd)(controller, psdFileName)).warnings), children: "Export PSD" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      psd && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: iconButton, onClick: () => fileInput.current?.click(), children: "Open PSD\u2026" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: iconButton, onClick: () => psdTask(async () => (await (0, import_image_editor7.downloadPsd)(controller, psdFileName)).warnings), children: "Export PSD" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "input",
           {
             ref: fileInput,
             type: "file",
-            accept: import_image_editor6.PSD_FILE_ACCEPT,
+            accept: import_image_editor7.PSD_FILE_ACCEPT,
             className: "hidden",
             "data-testid": "psd-file-input",
             "aria-label": "Open a PSD file",
             onChange: (e) => {
               const file = e.currentTarget.files?.[0];
               e.currentTarget.value = "";
-              if (file) psdTask(() => (0, import_image_editor6.openPsdFile)(controller, file));
+              if (file) psdTask(() => (0, import_image_editor7.openPsdFile)(controller, file));
             }
           }
         )
       ] })
     ] }),
-    psdNotes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("ul", { className: "rounded bg-amber-900/30 text-amber-200 px-2 py-1 space-y-0.5", "data-testid": "psd-warnings", "aria-label": "PSD warnings", children: [
-      psdNotes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { children: n }, n)),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "underline", onClick: () => setPsdNotes([]), children: "Dismiss" }) })
+    psdNotes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("ul", { className: "rounded bg-amber-900/30 text-amber-200 px-2 py-1 space-y-0.5", "data-testid": "psd-warnings", "aria-label": "PSD warnings", children: [
+      psdNotes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: n }, n)),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: "underline", onClick: () => setPsdNotes([]), children: "Dismiss" }) })
     ] }),
-    active && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1 items-center", "data-testid": "layer-properties", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-slate-400", children: [
+    active && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1 items-center", "data-testid": "layer-properties", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "text-slate-400", children: [
           "Opacity ",
           Math.round(active.opacity * 100),
           "%"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "input",
           {
             type: "range",
@@ -4376,13 +4567,13 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-slate-400", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "text-slate-400", children: [
           "Fill ",
           Math.round(((active.type === "pixel" ? active.fillOpacity : void 0) ?? 1) * 100),
           "%"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "input",
           {
             type: "range",
@@ -4397,7 +4588,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "select",
         {
           "aria-label": "Layer blend mode",
@@ -4405,13 +4596,13 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
           value: active.blend,
           onChange: (e) => attempt(() => controller.setLayerProperties(active.id, { blend: e.target.value })),
           children: [
-            active.type === "group" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "pass-through", children: "Pass Through" }),
-            import_image_editor6.BLEND_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: m.id, children: m.label }, m.id))
+            active.type === "group" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: "pass-through", children: "Pass Through" }),
+            import_image_editor7.BLEND_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: m.id, children: m.label }, m.id))
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center gap-1.5 text-slate-300", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1.5 text-slate-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "input",
           {
             type: "checkbox",
@@ -4423,8 +4614,8 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
         ),
         "Clip to below"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "col-span-2 flex flex-wrap gap-2 text-slate-400", role: "group", "aria-label": "Layer locks", children: ["pixels", "transparency", "position", "all"].map((k) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "col-span-2 flex flex-wrap gap-2 text-slate-400", role: "group", "aria-label": "Layer locks", children: ["pixels", "transparency", "position", "all"].map((k) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "input",
           {
             type: "checkbox",
@@ -4437,9 +4628,10 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
         k
       ] }, k)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "flex flex-col gap-0.5", role: "tree", "aria-label": "Layers", children: rows.map((row) => {
+    effects && active && active.type !== "adjustment" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LayerEffectsPanel, { controller, className: "border-t border-slate-800 pt-1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "flex flex-col gap-0.5", role: "tree", "aria-label": "Layers", children: rows.map((row) => {
       const { layer } = row;
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "li",
         {
           role: "treeitem",
@@ -4469,7 +4661,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
           className: rowClass(row.active),
           style: { paddingLeft: 6 + row.depth * 14 },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "button",
               {
                 type: "button",
@@ -4483,7 +4675,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 children: layer.visible ? "\u25CF" : "\u25CB"
               }
             ),
-            layer.type === "group" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            layer.type === "group" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "button",
               {
                 type: "button",
@@ -4496,8 +4688,8 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 children: layer.collapsed ? "\u25B8" : "\u25BE"
               }
             ),
-            row.clipped && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-slate-500", "aria-label": "Clipped", children: "\u21B3" }),
-            layer.type === "pixel" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            row.clipped && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-slate-500", "aria-label": "Clipped", children: "\u21B3" }),
+            layer.type === "pixel" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               Thumbnail,
               {
                 pixels: thumb(layer),
@@ -4505,15 +4697,31 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 label: `${row.label} pixels`,
                 selected: row.active && state.activeTarget === "pixels" && Boolean(layer.mask)
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "span",
               {
                 className: "shrink-0 grid place-items-center rounded bg-slate-800 text-[9px] text-slate-400 ring-1 ring-slate-700",
                 style: { width: thumbnailSize, height: thumbnailSize },
-                children: (0, import_image_editor6.layerBadge)(layer)
+                children: (0, import_image_editor7.layerBadge)(layer)
               }
             ),
-            layer.mask && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            layer.mask && !layer.mask.source && layer.type === "pixel" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `${layer.mask.linked === false ? "Link" : "Unlink"} ${row.label} mask`,
+                "aria-pressed": layer.mask.linked !== false,
+                title: layer.mask.linked === false ? "Mask unlinked: it stays put when the layer moves or transforms. Click to link." : "Mask linked: it moves with the layer. Click to unlink.",
+                "data-testid": "layer-mask-link",
+                className: `shrink-0 text-[10px] leading-none ${layer.mask.linked === false ? "text-slate-600" : "text-slate-300"}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  attempt(() => controller.setLayerMaskProps(layer.id, { linked: layer.mask.linked === false }));
+                },
+                children: layer.mask.linked === false ? "\u26D3\uFE0E\u0338" : "\u26D3\uFE0E"
+              }
+            ),
+            layer.mask && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               Thumbnail,
               {
                 pixels: maskThumb(layer),
@@ -4528,7 +4736,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 }
               }
             ),
-            renaming === layer.id ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            renaming === layer.id ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "input",
               {
                 autoFocus: true,
@@ -4545,7 +4753,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                   if (e.key === "Escape") setRenaming(null);
                 }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "span",
               {
                 className: `flex-1 min-w-0 truncate ${layer.visible ? "" : "text-slate-500"}`,
@@ -4556,15 +4764,30 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 children: row.label
               }
             ),
-            locked(layer) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-label": "Locked", className: "text-slate-400", children: "\u{1F512}" }),
-            layer.blend !== "normal" && layer.blend !== "pass-through" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[9px] text-slate-500", children: layer.blend })
+            (0, import_image_editor7.layerEffectsBadge)(layer) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-testid": "layer-fx-badge",
+                "aria-label": (0, import_image_editor7.layerEffectsBadge)(layer) === "on" ? `Turn effects off for ${row.label}` : `Turn effects on for ${row.label}`,
+                "aria-pressed": (0, import_image_editor7.layerEffectsBadge)(layer) === "on",
+                className: `text-[9px] italic font-semibold ${(0, import_image_editor7.layerEffectsBadge)(layer) === "on" ? "text-indigo-300" : "text-slate-600 line-through"}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  attempt(() => controller.setLayerEffectsEnabled(layer.id, (0, import_image_editor7.layerEffectsBadge)(layer) !== "on"));
+                },
+                children: "fx"
+              }
+            ),
+            locked(layer) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-label": "Locked", className: "text-slate-400", children: "\u{1F512}" }),
+            layer.blend !== "normal" && layer.blend !== "pass-through" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[9px] text-slate-500", children: layer.blend })
           ]
         },
         layer.id
       );
     }) }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "text-rose-400", children: error }),
-    menu && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { role: "alert", className: "text-rose-400", children: error }),
+    menu && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         role: "menu",
@@ -4573,7 +4796,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
         style: { left: menu.x, top: menu.y },
         onClick: (e) => e.stopPropagation(),
         onKeyDown: (e) => e.key === "Escape" && setMenu(null),
-        children: (0, import_image_editor6.layerMenu)(controller).map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: (0, import_image_editor7.layerMenu)(controller).map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "button",
           {
             type: "button",
@@ -4591,14 +4814,14 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
 };
 
 // src/image-editor/BrushOptionsBar.tsx
-var import_react39 = require("react");
-var import_image_editor7 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react40 = require("react");
+var import_image_editor8 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime23 = 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_react39.useState)(0);
-  (0, import_react39.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
-  const [error, setError] = (0, import_react39.useState)(null);
+  const [, setTick] = (0, import_react40.useState)(0);
+  (0, import_react40.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const [error, setError] = (0, import_react40.useState)(null);
   const state = controller.getState();
   const { brush, foreground, background, mixer, mixerLoad } = state.paint;
   const attempt = (fn) => {
@@ -4609,8 +4832,8 @@ var BrushOptionsBar = ({ controller, className }) => {
       setError(err instanceof Error ? err.message : String(err));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "brush-options", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Paint tools", children: import_image_editor7.PAINT_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "brush-options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Paint tools", children: import_image_editor8.PAINT_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "button",
       {
         type: "button",
@@ -4622,9 +4845,9 @@ var BrushOptionsBar = ({ controller, className }) => {
       },
       t.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", role: "group", "aria-label": "Colours", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", role: "group", "aria-label": "Colours", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             type: "color",
@@ -4634,10 +4857,10 @@ var BrushOptionsBar = ({ controller, className }) => {
             className: "h-6 w-8 rounded border border-slate-700 bg-transparent"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-slate-400", children: "FG" })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-slate-400", children: "FG" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             type: "color",
@@ -4647,12 +4870,12 @@ var BrushOptionsBar = ({ controller, className }) => {
             className: "h-6 w-8 rounded border border-slate-700 bg-transparent"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-slate-400", children: "BG" })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-slate-400", children: "BG" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", title: "Swap colours (X)", className: chip(false), onClick: () => controller.swapPaintColors(), children: "Swap" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", title: "Default colours (D)", className: chip(false), onClick: () => controller.resetPaintColors(), children: "Default" })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", title: "Swap colours (X)", className: chip(false), onClick: () => controller.swapPaintColors(), children: "Swap" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", title: "Default colours (D)", className: chip(false), onClick: () => controller.resetPaintColors(), children: "Default" })
     ] }),
-    import_image_editor7.BRUSH_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_image_editor8.BRUSH_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       ControlSlider,
       {
         spec,
@@ -4661,21 +4884,21 @@ var BrushOptionsBar = ({ controller, className }) => {
       },
       spec.id
     )),
-    state.activeTool === "mixer" && /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    state.activeTool === "mixer" && /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "span",
           {
             "aria-label": "Brush load",
-            title: mixerLoad.reservoir ? `Loaded ${(0, import_image_editor7.rgbUnitToHex)(mixerLoad.reservoir)}, ${Math.round(mixerLoad.amount * 100)}% left` : "Unloaded",
+            title: mixerLoad.reservoir ? `Loaded ${(0, import_image_editor8.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_editor7.rgbUnitToHex)(mixerLoad.reservoir) : "transparent" }
+            style: { background: mixerLoad.reservoir ? (0, import_image_editor8.rgbUnitToHex)(mixerLoad.reservoir) : "transparent" }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)("button", { type: "button", title: "Empty the picked-up colour", className: chip(false), onClick: () => controller.cleanMixerBrush(), children: "Clean brush" })
+        /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("button", { type: "button", title: "Empty the picked-up colour", className: chip(false), onClick: () => controller.cleanMixerBrush(), children: "Clean brush" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: import_image_editor7.MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: import_image_editor8.MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "button",
         {
           type: "button",
@@ -4687,10 +4910,10 @@ var BrushOptionsBar = ({ controller, className }) => {
         },
         m.id
       )) }),
-      import_image_editor7.MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ControlSlider, { spec, value: mixer[spec.id], onChange: (v) => controller.setPaintOptions({ mixer: { [spec.id]: v } }) }, spec.id)),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_image_editor8.MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ControlSlider, { spec, value: mixer[spec.id], onChange: (v) => controller.setPaintOptions({ mixer: { [spec.id]: v } }) }, spec.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
             {
               type: "checkbox",
@@ -4702,8 +4925,8 @@ var BrushOptionsBar = ({ controller, className }) => {
           ),
           "Load each stroke"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
             {
               type: "checkbox",
@@ -4717,9 +4940,9 @@ var BrushOptionsBar = ({ controller, className }) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             type: "checkbox",
@@ -4731,8 +4954,8 @@ var BrushOptionsBar = ({ controller, className }) => {
         ),
         "Pressure size"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             type: "checkbox",
@@ -4745,18 +4968,18 @@ var BrushOptionsBar = ({ controller, className }) => {
         "Pressure opacity"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.fillPixels()), children: "Fill" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.clearPixels()), children: "Clear" })
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.fillPixels()), children: "Fill" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.clearPixels()), children: "Clear" })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { role: "alert", className: "text-rose-400", children: error })
   ] });
 };
 
 // src/image-editor/SelectionOptionsBar.tsx
-var import_react40 = require("react");
-var import_image_editor8 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react41 = require("react");
+var import_image_editor9 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var MODIFY_OPS = [
   { op: "grow", label: "Grow" },
   { op: "shrink", label: "Shrink" },
@@ -4773,20 +4996,20 @@ var SelectionOptionsBar = ({
   quickMask,
   className = ""
 }) => {
-  const [radius, setRadius] = (0, import_react40.useState)(2);
+  const [radius, setRadius] = (0, import_react41.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_runtime23.jsxs)("div", { "data-testid": "selection-options-bar", className: `flex flex-col gap-3 text-xs ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { role: "group", "aria-label": "Selection tool", className: "flex flex-wrap gap-1", children: import_image_editor8.SELECTION_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("div", { role: "group", "aria-label": "Selection mode", className: "flex flex-wrap gap-1", children: import_image_editor8.SELECTION_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", "aria-pressed": options.mode === m, className: btn(options.mode === m), onClick: () => set({ mode: m }), children: import_image_editor8.SELECTION_MODE_LABELS[m] }, m)) }),
-    options.tool === "wand" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Tolerance" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-mono", children: options.tolerance })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "data-testid": "selection-options-bar", className: `flex flex-col gap-3 text-xs ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { role: "group", "aria-label": "Selection tool", className: "flex flex-wrap gap-1", children: import_image_editor9.SELECTION_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)("div", { role: "group", "aria-label": "Selection mode", className: "flex flex-wrap gap-1", children: import_image_editor9.SELECTION_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", "aria-pressed": options.mode === m, className: btn(options.mode === m), onClick: () => set({ mode: m }), children: import_image_editor9.SELECTION_MODE_LABELS[m] }, m)) }),
+    options.tool === "wand" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Tolerance" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-mono", children: options.tolerance })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "input",
           {
             type: "range",
@@ -4800,17 +5023,17 @@ var SelectionOptionsBar = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { type: "checkbox", checked: options.contiguous, onChange: (e) => set({ contiguous: e.target.checked }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { type: "checkbox", checked: options.contiguous, onChange: (e) => set({ contiguous: e.target.checked }) }),
         "Contiguous"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
         "Sample adjusted image"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
         "Sample",
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "select",
           {
             "aria-label": "Sample from",
@@ -4818,27 +5041,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_runtime23.jsx)("option", { value: "composite", children: "All layers" }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "active-layer", children: "Active layer" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "composite", children: "All layers" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "active-layer", children: "Active layer" })
             ]
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { type: "checkbox", checked: options.antiAlias, onChange: (e) => set({ antiAlias: e.target.checked }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { type: "checkbox", checked: options.antiAlias, onChange: (e) => set({ antiAlias: e.target.checked }) }),
       "Anti-alias"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: btn(false), onClick: () => controller.selectAll(), children: "Select All" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.deselect(), children: "Deselect" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: btn(false), onClick: () => controller.invertSelection(), children: "Inverse" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", "aria-pressed": qm, className: btn(qm), onClick: () => controller.setQuickMask(!qm), children: "Quick Mask" })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: btn(false), onClick: () => controller.selectAll(), children: "Select All" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.deselect(), children: "Deselect" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: btn(false), onClick: () => controller.invertSelection(), children: "Inverse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", "aria-pressed": qm, className: btn(qm), onClick: () => controller.setQuickMask(!qm), children: "Quick Mask" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-1 text-slate-400", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex items-center gap-1 text-slate-400", children: [
         "Radius",
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "input",
           {
             type: "number",
@@ -4852,24 +5075,24 @@ var SelectionOptionsBar = ({
           }
         )
       ] }),
-      MODIFY_OPS.map(({ op, label }) => /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime24.jsx)("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.modifySelection(op, radius), children: label }, op))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { "data-testid": "selection-status", className: "text-slate-400", children: (0, import_image_editor8.describeSelection)(sel) })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { "data-testid": "selection-status", className: "text-slate-400", children: (0, import_image_editor9.describeSelection)(sel) })
   ] });
 };
 
 // src/image-editor/RefineEdgePanel.tsx
-var import_react41 = require("react");
-var import_image_editor9 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react42 = require("react");
+var import_image_editor10 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DEFAULT_PARAMS = { radius: 8, smartRadius: false, smooth: 0, feather: 0, contrast: 0, shiftEdge: 0 };
-var button = "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 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 RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
-  const [params, setParams] = (0, import_react41.useState)(DEFAULT_PARAMS);
-  const [busy, setBusy] = (0, import_react41.useState)(false);
-  const [error, setError] = (0, import_react41.useState)(null);
-  const [layerId, setLayerId] = (0, import_react41.useState)("");
-  const [newKind, setNewKind] = (0, import_react41.useState)("hueSaturation");
+  const [params, setParams] = (0, import_react42.useState)(DEFAULT_PARAMS);
+  const [busy, setBusy] = (0, import_react42.useState)(false);
+  const [error, setError] = (0, import_react42.useState)(null);
+  const [layerId, setLayerId] = (0, import_react42.useState)("");
+  const [newKind, setNewKind] = (0, import_react42.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];
@@ -4884,17 +5107,17 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "data-testid": "refine-edge-panel", className: `flex flex-col gap-3 text-xs ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Refine Edge" }),
-    import_image_editor9.REFINE_EDGE_CONTROLS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: c.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "font-mono", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-testid": "refine-edge-panel", className: `flex flex-col gap-3 text-xs ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Refine Edge" }),
+    import_image_editor10.REFINE_EDGE_CONTROLS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: c.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "font-mono", children: [
           params[c.id],
           c.unit
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "input",
         {
           type: "range",
@@ -4908,67 +5131,67 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
         }
       )
     ] }, c.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { type: "checkbox", checked: params.smartRadius, onChange: (e) => setParams({ ...params, smartRadius: e.target.checked }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", { type: "checkbox", checked: params.smartRadius, onChange: (e) => setParams({ ...params, smartRadius: e.target.checked }) }),
       "Smart Radius"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: button, disabled: !sel || busy, onClick: refine, children: "Refine Edge" }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: button, onClick: () => setParams(DEFAULT_PARAMS), children: "Reset" })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: button2, disabled: !sel || busy, onClick: refine, children: "Refine Edge" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: button2, onClick: () => setParams(DEFAULT_PARAMS), children: "Reset" })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { role: "alert", className: "text-rose-400", children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2", children: "Layer Mask" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex gap-1 items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { role: "alert", className: "text-rose-400", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2", children: "Layer Mask" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-1 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.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_editor9.ADJUSTMENT_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: k.kind, children: k.label }, k.kind))
+          children: import_image_editor10.ADJUSTMENT_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: k.kind, children: k.label }, k.kind))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "button",
         {
           type: "button",
-          className: button,
+          className: button2,
           disabled: !sel,
-          onClick: () => sel && setLayerId(controller.addAdjustmentLayer({ kind: newKind, mask: (0, import_image_editor9.layerMaskFromSelection)(sel) })),
+          onClick: () => sel && setLayerId(controller.addAdjustmentLayer({ kind: newKind, mask: (0, import_image_editor10.layerMaskFromSelection)(sel) })),
           children: "New Masked Layer"
         }
       )
     ] }),
-    list.length > 0 && target && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    list.length > 0 && target && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime24.jsxs)("option", { value: l.id, children: [
-            l.name || (0, import_image_editor9.adjustmentKindLabel)(l.kind),
+          children: list.map((l) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("option", { value: l.id, children: [
+            l.name || (0, import_image_editor10.adjustmentKindLabel)(l.kind),
             l.mask ? " (masked)" : ""
           ] }, l.id))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: button, disabled: !sel, onClick: () => controller.applySelectionAsLayerMask(target.id), children: "Mask with Selection" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: button, disabled: !target.mask, onClick: () => controller.selectionFromLayerMask(target.id), children: "Load as Selection" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: button, disabled: !target.mask, onClick: () => controller.setAdjustmentLayerMask(target.id, null), children: "Remove Mask" })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: button2, disabled: !sel, onClick: () => controller.applySelectionAsLayerMask(target.id), children: "Mask with Selection" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: button2, disabled: !target.mask, onClick: () => controller.selectionFromLayerMask(target.id), children: "Load as Selection" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: button2, disabled: !target.mask, onClick: () => controller.setAdjustmentLayerMask(target.id, null), children: "Remove Mask" })
       ] }),
-      target.mask && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Density" }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "font-mono", children: [
+      target.mask && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Density" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "font-mono", children: [
               Math.round((target.mask.density ?? 1) * 100),
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "input",
             {
               type: "range",
@@ -4982,15 +5205,15 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Mask Feather" }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "font-mono", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Mask Feather" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "font-mono", children: [
               target.mask.feather ?? 0,
               "px"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "input",
             {
               type: "range",
@@ -5009,8 +5232,83 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
   ] });
 };
 
+// src/image-editor/FreeTransformOptionsBar.tsx
+var import_react43 = require("react");
+var import_image_editor11 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var chip2 = (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_react43.useState)(0);
+  (0, import_react43.useEffect)(() => tool.subscribe(() => setTick((n) => n + 1)), [tool]);
+  const bar = tool.bar();
+  if (!tool.active || !bar) return null;
+  const apply = (field, raw) => {
+    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_runtime26.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_runtime26.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Transform mode", children: import_image_editor11.FREE_TRANSFORM_MODE_OPTIONS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", title: m.title, "aria-pressed": tool.mode === m.id, className: chip2(tool.mode === m.id), onClick: () => tool.setMode(m.id), children: m.label }, m.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "grid grid-cols-3 gap-px", role: "group", "aria-label": "Reference point", children: import_image_editor11.TRANSFORM_ANCHORS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime26.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)) }),
+    import_image_editor11.FREE_TRANSFORM_FIELDS.map((f) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center gap-1", title: f.title, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-slate-400", children: f.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "input",
+        {
+          type: "number",
+          "aria-label": f.title,
+          defaultValue: round(bar[f.id], f.unit),
+          disabled: !bar.affine,
+          step: f.unit === "px" ? 1 : 0.1,
+          className: "w-16 rounded border border-slate-700 bg-slate-900 px-1 py-0.5 text-right disabled:opacity-40",
+          onBlur: (e) => apply(f.id, e.currentTarget.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              e.stopPropagation();
+              apply(f.id, e.currentTarget.value);
+            }
+          }
+        },
+        `${f.id}:${round(bar[f.id], f.unit)}`
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-slate-500", children: f.unit }),
+      f.id === "scaleX" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Keep width and height proportional",
+          "aria-pressed": tool.proportional,
+          className: chip2(tool.proportional),
+          onClick: () => {
+            tool.proportional = !tool.proportional;
+            setTick((n) => n + 1);
+          },
+          children: "\u26D3\uFE0E"
+        }
+      )
+    ] }, f.id)),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-slate-400", children: "Interpolation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.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_editor11.INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: i, children: i[0].toUpperCase() + i.slice(1) }, i))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.jsx)("button", { type: "button", title: "Cancel (Esc)", className: chip2(false), onClick: () => tool.cancel(), children: "Cancel" }),
+    tool.error && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { role: "alert", className: "text-rose-400", children: tool.error })
+  ] });
+};
+
 // src/image-editor/ImageEditor.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -5025,35 +5323,47 @@ var ImageEditor = ({
   const internalEditor = useImageEditor({ image: src });
   const editor = externalEditor || internalEditor;
   const { state, controller } = editor;
-  const legacyProcess = (0, import_image_editor10.normalizeProcessVersion)(state.adjustments.process) < import_image_editor10.LATEST_PROCESS_VERSION;
-  const canvasRef = (0, import_react42.useRef)(null);
-  const containerRef = (0, import_react42.useRef)(null);
-  const [activeTab, setActiveTab] = (0, import_react42.useState)("crop");
-  const [activeCropRatio, setActiveCropRatio] = (0, import_react42.useState)(null);
-  const [selectionOptions, setSelectionOptions] = (0, import_react42.useState)(import_image_editor10.DEFAULT_SELECTION_TOOL_OPTIONS);
-  const selectionOptionsRef = (0, import_react42.useRef)(selectionOptions);
+  const legacyProcess = (0, import_image_editor12.normalizeProcessVersion)(state.adjustments.process) < import_image_editor12.LATEST_PROCESS_VERSION;
+  const canvasRef = (0, import_react44.useRef)(null);
+  const containerRef = (0, import_react44.useRef)(null);
+  const [activeTab, setActiveTab] = (0, import_react44.useState)("crop");
+  const [activeCropRatio, setActiveCropRatio] = (0, import_react44.useState)(null);
+  const [selectionOptions, setSelectionOptions] = (0, import_react44.useState)(import_image_editor12.DEFAULT_SELECTION_TOOL_OPTIONS);
+  const selectionOptionsRef = (0, import_react44.useRef)(selectionOptions);
   selectionOptionsRef.current = selectionOptions;
-  const selectionGestureRef = (0, import_react42.useRef)(null);
+  const selectionGestureRef = (0, import_react44.useRef)(null);
   if (!selectionGestureRef.current || selectionGestureRef.current.controller !== controller) {
-    selectionGestureRef.current = new import_image_editor10.SelectionGesture(controller, () => selectionOptionsRef.current);
+    selectionGestureRef.current = new import_image_editor12.SelectionGesture(controller, () => selectionOptionsRef.current);
   }
-  const selectionDraftRef = (0, import_react42.useRef)(null);
-  const [selectionError, setSelectionError] = (0, import_react42.useState)(null);
-  const paintGestureRef = (0, import_react42.useRef)(null);
-  const paintControllerRef = (0, import_react42.useRef)(controller);
+  const selectionDraftRef = (0, import_react44.useRef)(null);
+  const [selectionError, setSelectionError] = (0, import_react44.useState)(null);
+  const paintGestureRef = (0, import_react44.useRef)(null);
+  const paintControllerRef = (0, import_react44.useRef)(controller);
   if (!paintGestureRef.current || paintControllerRef.current !== controller) {
-    paintGestureRef.current = new import_image_editor10.PaintGesture(controller);
+    paintGestureRef.current = new import_image_editor12.PaintGesture(controller);
     paintControllerRef.current = controller;
   }
-  const brushCursorRef = (0, import_react42.useRef)(null);
-  const [paintError, setPaintError] = (0, import_react42.useState)(null);
-  const [inpaintPrompt, setInpaintPrompt] = (0, import_react42.useState)("");
-  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react42.useState)("annotations");
-  const [isRemovingBg, setIsRemovingBg] = (0, import_react42.useState)(false);
-  const [isInpainting, setIsInpainting] = (0, import_react42.useState)(false);
-  const [aiError, setAiError] = (0, import_react42.useState)(null);
-  const [aiSuccess, setAiSuccess] = (0, import_react42.useState)(null);
-  const [aiTarget, setAiTarget] = (0, import_react42.useState)("auto");
+  const brushCursorRef = (0, import_react44.useRef)(null);
+  const [paintError, setPaintError] = (0, import_react44.useState)(null);
+  const transformToolRef = (0, import_react44.useRef)(null);
+  const transformControllerRef = (0, import_react44.useRef)(controller);
+  if (!transformToolRef.current || transformControllerRef.current !== controller) {
+    transformToolRef.current?.cancel();
+    transformToolRef.current = new import_image_editor12.FreeTransformTool(controller, {
+      schedule: (run) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(run) : run()
+    });
+    transformControllerRef.current = controller;
+  }
+  const transformTool = transformToolRef.current;
+  const [, setTransformTick] = (0, import_react44.useState)(0);
+  const [transformCursor, setTransformCursor] = (0, import_react44.useState)("default");
+  const [inpaintPrompt, setInpaintPrompt] = (0, import_react44.useState)("");
+  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react44.useState)("annotations");
+  const [isRemovingBg, setIsRemovingBg] = (0, import_react44.useState)(false);
+  const [isInpainting, setIsInpainting] = (0, import_react44.useState)(false);
+  const [aiError, setAiError] = (0, import_react44.useState)(null);
+  const [aiSuccess, setAiSuccess] = (0, import_react44.useState)(null);
+  const [aiTarget, setAiTarget] = (0, import_react44.useState)("auto");
   const aiOptions = aiTarget === "auto" ? {} : { target: aiTarget };
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
@@ -5116,18 +5426,18 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  const [activeColor, setActiveColor] = (0, import_react42.useState)("#ef4444");
-  const [strokeWidth, setStrokeWidth] = (0, import_react42.useState)(3);
-  const [fontSize, setFontSize] = (0, import_react42.useState)(24);
-  const [textInput, setTextInput] = (0, import_react42.useState)("");
-  const draftAnnotationRef = (0, import_react42.useRef)(null);
-  const draftCropRef = (0, import_react42.useRef)(null);
-  const cropDragInfoRef = (0, import_react42.useRef)(null);
-  const annotationDragInfoRef = (0, import_react42.useRef)(null);
-  const isDrawingRef = (0, import_react42.useRef)(false);
-  const currentPathRef = (0, import_react42.useRef)([]);
-  const dragStartPointRef = (0, import_react42.useRef)(null);
-  const renderCanvas = (0, import_react42.useCallback)(
+  const [activeColor, setActiveColor] = (0, import_react44.useState)("#ef4444");
+  const [strokeWidth, setStrokeWidth] = (0, import_react44.useState)(3);
+  const [fontSize, setFontSize] = (0, import_react44.useState)(24);
+  const [textInput, setTextInput] = (0, import_react44.useState)("");
+  const draftAnnotationRef = (0, import_react44.useRef)(null);
+  const draftCropRef = (0, import_react44.useRef)(null);
+  const cropDragInfoRef = (0, import_react44.useRef)(null);
+  const annotationDragInfoRef = (0, import_react44.useRef)(null);
+  const isDrawingRef = (0, import_react44.useRef)(false);
+  const currentPathRef = (0, import_react44.useRef)([]);
+  const dragStartPointRef = (0, import_react44.useRef)(null);
+  const renderCanvas = (0, import_react44.useCallback)(
     async (draftAnnotation, draftCrop) => {
       const canvas = canvasRef.current;
       const container = containerRef.current;
@@ -5143,12 +5453,64 @@ var ImageEditor = ({
         draftAnnotation: draftAnnotation !== void 0 ? draftAnnotation : draftAnnotationRef.current,
         draftCrop: draftCrop !== void 0 ? draftCrop : draftCropRef.current,
         draftSelectionPath: selectionDraftRef.current,
-        brushCursor: activeTab === "paint" && brushCursorRef.current && controller.getState().activeTool !== "move" ? { ...brushCursorRef.current, diameter: controller.getState().paint.brush.size } : null
+        brushCursor: activeTab === "paint" && brushCursorRef.current && controller.getState().activeTool !== "move" && !transformTool.active ? { ...brushCursorRef.current, diameter: controller.getState().paint.brush.size } : null,
+        freeTransform: transformTool.overlay()
       });
     },
-    [controller, activeTab]
+    [controller, activeTab, transformTool]
   );
-  (0, import_react42.useEffect)(() => {
+  (0, import_react44.useEffect)(() => transformTool.subscribe(() => {
+    setTransformTick((n) => n + 1);
+    void renderCanvas();
+  }), [transformTool, renderCanvas]);
+  const transformPoint = (e) => {
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const sx = rect.width > 0 ? canvas.width / rect.width : 1;
+    const sy = rect.height > 0 ? canvas.height / rect.height : 1;
+    const s = controller.getState();
+    const cropping = activeTab === "crop";
+    const projection = (0, import_image_editor12.getViewportProjection)(s, canvas.width, canvas.height, cropping);
+    const pt = (0, import_image_editor12.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) };
+  };
+  const handleTransformPointerDown = (e) => {
+    if (!transformTool.active) return false;
+    if (e.button !== 0) return true;
+    e.preventDefault();
+    try {
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+    const { pt, tolerance } = transformPoint(e);
+    transformTool.down(pt, tolerance);
+    return true;
+  };
+  const handleTransformPointerMove = (e) => {
+    if (!transformTool.active) return false;
+    const { pt, tolerance } = transformPoint(e);
+    if (e.buttons & 1) transformTool.move(pt, e);
+    else {
+      const over = transformTool.hit(pt, tolerance);
+      setTransformCursor(transformTool.cursor(over));
+    }
+    return true;
+  };
+  const handleTransformPointerUp = () => {
+    if (!transformTool.active) return false;
+    transformTool.up();
+    return true;
+  };
+  (0, import_react44.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const onKey = (e) => {
+      if (transformTool.key(e)) e.preventDefault();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [transformTool]);
+  (0, import_react44.useEffect)(() => {
     const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
     const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
     const animId = raf(() => {
@@ -5156,12 +5518,12 @@ var ImageEditor = ({
     });
     return () => caf(animId);
   }, [renderCanvas, state]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (activeTab === "crop" && editor.state.activeTool !== "crop") {
       editor.setTool("crop");
     }
   }, [activeTab, editor]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     if (typeof ResizeObserver !== "undefined") {
@@ -5197,11 +5559,12 @@ var ImageEditor = ({
     const sy = rect.height > 0 ? canvas.height / rect.height : 1;
     const s = controller.getState();
     return list.map((ev) => ({
-      ...(0, import_image_editor10.canvasToImagePoint)({ x: (ev.clientX - rect.left) * sx, y: (ev.clientY - rect.top) * sy }, s, canvas.width, canvas.height, false),
-      pressure: (0, import_image_editor10.pointerPressure)(ev)
+      ...(0, import_image_editor12.canvasToImagePoint)({ x: (ev.clientX - rect.left) * sx, y: (ev.clientY - rect.top) * sy }, s, canvas.width, canvas.height, false),
+      pressure: (0, import_image_editor12.pointerPressure)(ev)
     }));
   };
   const handlePaintPointerDown = (e) => {
+    if (handleTransformPointerDown(e)) return;
     if (activeTab !== "paint" || e.button !== 0) return;
     e.preventDefault();
     try {
@@ -5212,6 +5575,7 @@ var ImageEditor = ({
     setPaintError(paintGestureRef.current.down(first));
   };
   const handlePaintPointerMove = (e) => {
+    if (handleTransformPointerMove(e)) return;
     if (activeTab !== "paint") return;
     const samples = paintSamples(e);
     brushCursorRef.current = samples[samples.length - 1] ?? null;
@@ -5219,6 +5583,7 @@ var ImageEditor = ({
     else void renderCanvas();
   };
   const handlePaintPointerUp = () => {
+    if (handleTransformPointerUp()) return;
     if (activeTab !== "paint") return;
     const g = paintGestureRef.current;
     if (g.active) {
@@ -5226,21 +5591,21 @@ var ImageEditor = ({
       if (g.error) setPaintError(g.error);
     }
   };
-  (0, import_react42.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (activeTab !== "paint" || typeof window === "undefined") return;
     const onKey = (e) => {
-      if ((0, import_image_editor10.handlePaintShortcut)(controller, e)) e.preventDefault();
+      if ((0, import_image_editor12.handlePaintShortcut)(controller, e)) e.preventDefault();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [activeTab, controller]);
   const handleMouseDown = (e) => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas || transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
     if (activeTab === "select") {
       const gesture = selectionGestureRef.current;
-      const imgPt = (0, import_image_editor10.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const imgPt = (0, import_image_editor12.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
       void gesture.begin(imgPt, e).then(() => setSelectionError(gesture.error));
       return;
     }
@@ -5251,8 +5616,8 @@ var ImageEditor = ({
         width: state.imageDimensions.width,
         height: state.imageDimensions.height
       };
-      const handle = (0, import_image_editor10.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
-      const startImgPt = (0, import_image_editor10.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
+      const handle = (0, import_image_editor12.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
+      const startImgPt = (0, import_image_editor12.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
       if (handle) {
         cropDragInfoRef.current = {
           handle,
@@ -5271,12 +5636,12 @@ var ImageEditor = ({
       return;
     }
     if (activeTab === "annotate") {
-      const imgPt = (0, import_image_editor10.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const imgPt = (0, import_image_editor12.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_editor10.hitTestAnnotation)(imgPt, ann)) {
+          if ((0, import_image_editor12.hitTestAnnotation)(imgPt, ann)) {
             editor.selectAnnotation(ann.id);
             annotationDragInfoRef.current = {
               annId: ann.id,
@@ -5308,11 +5673,11 @@ var ImageEditor = ({
   };
   const handleMouseMove = (e) => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas || transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
     if (activeTab === "select") {
       const gesture = selectionGestureRef.current;
-      if (gesture.active && gesture.move((0, import_image_editor10.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false))) {
+      if (gesture.active && gesture.move((0, import_image_editor12.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false))) {
         selectionDraftRef.current = gesture.draftPath;
         renderCanvas();
       }
@@ -5321,7 +5686,7 @@ var ImageEditor = ({
     if (activeTab === "crop") {
       const drag = cropDragInfoRef.current;
       if (drag) {
-        const currentImgPt = (0, import_image_editor10.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
+        const currentImgPt = (0, import_image_editor12.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));
@@ -5335,7 +5700,7 @@ var ImageEditor = ({
             height: Math.round(Math.max(20, maxY - minY))
           };
         } else {
-          newCrop = (0, import_image_editor10.calculateCropDrag)(
+          newCrop = (0, import_image_editor12.calculateCropDrag)(
             drag.startCrop,
             drag.handle,
             drag.startImgPt,
@@ -5355,15 +5720,15 @@ var ImageEditor = ({
           width: state.imageDimensions.width,
           height: state.imageDimensions.height
         };
-        const handle = (0, import_image_editor10.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
-        canvas.style.cursor = (0, import_image_editor10.getCropCursor)(handle, state.transform);
+        const handle = (0, import_image_editor12.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
+        canvas.style.cursor = (0, import_image_editor12.getCropCursor)(handle, state.transform);
       }
       return;
     }
     if (activeTab === "annotate") {
       if (annotationDragInfoRef.current) {
         const drag = annotationDragInfoRef.current;
-        const currentImgPt2 = (0, import_image_editor10.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+        const currentImgPt2 = (0, import_image_editor12.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, {
@@ -5375,10 +5740,10 @@ var ImageEditor = ({
       const startPt = dragStartPointRef.current;
       if (!startPt) {
         if (state.activeTool === "select") {
-          const imgPt = (0, import_image_editor10.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+          const imgPt = (0, import_image_editor12.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_editor10.hitTestAnnotation)(imgPt, state.annotations[i])) {
+            if ((0, import_image_editor12.hitTestAnnotation)(imgPt, state.annotations[i])) {
               hovered = true;
               break;
             }
@@ -5389,7 +5754,7 @@ var ImageEditor = ({
         }
         return;
       }
-      const currentImgPt = (0, import_image_editor10.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const currentImgPt = (0, import_image_editor12.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
       if (state.activeTool === "pen" && isDrawingRef.current) {
         currentPathRef.current.push(currentImgPt);
         const draft = {
@@ -5464,12 +5829,12 @@ var ImageEditor = ({
   };
   const handleMouseUp = (e) => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas || transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
     if (activeTab === "select") {
       const gesture = selectionGestureRef.current;
       if (gesture.active) {
-        gesture.end((0, import_image_editor10.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false), e);
+        gesture.end((0, import_image_editor12.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false), e);
         selectionDraftRef.current = null;
         renderCanvas();
       }
@@ -5493,7 +5858,7 @@ var ImageEditor = ({
       }
       const startPt = dragStartPointRef.current;
       if (startPt) {
-        const currentImgPt = (0, import_image_editor10.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+        const currentImgPt = (0, import_image_editor12.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
         if (state.activeTool === "pen" && isDrawingRef.current) {
           if (currentPathRef.current.length > 1) {
             editor.addAnnotation({
@@ -5589,15 +5954,15 @@ var ImageEditor = ({
       link.click();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime25.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_runtime25.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_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5609,7 +5974,7 @@ var ImageEditor = ({
                 children: "Transform & Crop"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5621,7 +5986,7 @@ var ImageEditor = ({
                 children: "Adjustments"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5633,7 +5998,7 @@ var ImageEditor = ({
                 children: "Layers"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5645,7 +6010,7 @@ var ImageEditor = ({
                 children: "Paint"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5657,7 +6022,7 @@ var ImageEditor = ({
                 children: "Select & Mask"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5669,7 +6034,7 @@ var ImageEditor = ({
                 children: "Annotations"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5681,7 +6046,7 @@ var ImageEditor = ({
                 children: "Depth Mask"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
               "button",
               {
                 type: "button",
@@ -5691,14 +6056,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_runtime25.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_runtime25.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_runtime27.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_runtime27.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_runtime25.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5709,7 +6074,7 @@ var ImageEditor = ({
                 children: "\u21A9"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5720,7 +6085,7 @@ var ImageEditor = ({
                 children: "\u21AA"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5729,8 +6094,8 @@ var ImageEditor = ({
                 children: "Reset"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5740,11 +6105,11 @@ var ImageEditor = ({
                 children: "-"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
               Math.round(state.zoom * 100),
               "%"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5754,8 +6119,8 @@ var ImageEditor = ({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5766,7 +6131,7 @@ var ImageEditor = ({
                 children: "Hold Compare"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -5777,13 +6142,15 @@ var ImageEditor = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        transformTool.active && /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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_runtime27.jsxs)("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "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_runtime25.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "canvas",
                 {
                   ref: canvasRef,
@@ -5796,16 +6163,17 @@ var ImageEditor = ({
                   onPointerUp: handlePaintPointerUp,
                   onPointerCancel: () => paintGestureRef.current?.cancel(),
                   "data-testid": "image-editor-canvas",
-                  className: `absolute inset-0 w-full h-full block ${activeTab === "paint" ? "touch-none cursor-crosshair" : ""}`
+                  style: transformTool.active ? { cursor: transformCursor } : void 0,
+                  className: `absolute inset-0 w-full h-full block ${transformTool.active ? "touch-none" : activeTab === "paint" ? "touch-none cursor-crosshair" : ""}`
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5817,7 +6185,7 @@ var ImageEditor = ({
                     children: "Freeform"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5829,7 +6197,7 @@ var ImageEditor = ({
                     children: "1:1 Square"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5841,7 +6209,7 @@ var ImageEditor = ({
                     children: "4:3 Standard"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5853,7 +6221,7 @@ var ImageEditor = ({
                     children: "16:9 Wide"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5865,7 +6233,7 @@ var ImageEditor = ({
                     children: "3:2 Photo"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5878,10 +6246,10 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5890,7 +6258,7 @@ var ImageEditor = ({
                     children: "Rotate -90\xB0"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5899,7 +6267,7 @@ var ImageEditor = ({
                     children: "Rotate +90\xB0"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5908,7 +6276,7 @@ var ImageEditor = ({
                     children: "Flip Horizontal"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5919,10 +6287,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "adjust" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            activeTab === "adjust" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5932,25 +6300,25 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Histogram, { histogram: editor.histogram }),
-              import_image_editor10.IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react42.default.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Histogram, { histogram: editor.histogram }),
+              import_image_editor12.IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react44.default.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   ControlSlider,
                   {
                     spec,
-                    value: (0, import_image_editor10.readAdjustmentControls)(state.adjustments)[spec.id],
+                    value: (0, import_image_editor12.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_runtime25.jsxs)(
+                spec.id === "tint" && legacyProcess && /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime25.jsx)("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
-                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                         "button",
                         {
                           type: "button",
@@ -5963,7 +6331,7 @@ var ImageEditor = ({
                   }
                 )
               ] }, spec.id)),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 AdjustmentLayersPanel,
                 {
                   controller,
@@ -5972,19 +6340,41 @@ var ImageEditor = ({
                 }
               ) })
             ] }),
-            activeTab === "layers" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LayersPanel, { controller })
+            activeTab === "layers" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                "button",
+                {
+                  type: "button",
+                  title: "Edit \u203A Free Transform (Ctrl/Cmd+T): the selected pixels, or the whole active layer",
+                  className: "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40",
+                  disabled: transformTool.active,
+                  onClick: () => transformTool.begin(),
+                  children: "Free Transform"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LayersPanel, { controller })
             ] }),
-            activeTab === "paint" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BrushOptionsBar, { controller }),
-              paintError && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LayersPanel, { controller }) })
+            activeTab === "paint" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BrushOptionsBar, { controller }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                "button",
+                {
+                  type: "button",
+                  title: "Edit \u203A Free Transform (Ctrl/Cmd+T): the selected pixels, or the whole active layer",
+                  className: "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start",
+                  disabled: transformTool.active,
+                  onClick: () => transformTool.begin(),
+                  children: "Free Transform"
+                }
+              ),
+              paintError && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LayersPanel, { controller }) })
             ] }),
-            activeTab === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            activeTab === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5994,9 +6384,9 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { className: "text-slate-400", children: "Color:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("label", { className: "text-slate-400", children: "Color:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "input",
                   {
                     type: "color",
@@ -6005,15 +6395,15 @@ var ImageEditor = ({
                     className: "w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex-1 ml-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Width:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "font-mono", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 ml-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Width:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "font-mono", children: [
                       strokeWidth,
                       "px"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "input",
                     {
                       type: "range",
@@ -6026,10 +6416,10 @@ var ImageEditor = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "input",
                   {
                     type: "text",
@@ -6040,7 +6430,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_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -6050,14 +6440,14 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-between text-slate-400", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Font Size:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "font-mono", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between text-slate-400", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Font Size:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "font-mono", children: [
                   fontSize,
                   "px"
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "input",
                 {
                   type: "range",
@@ -6068,14 +6458,14 @@ var ImageEditor = ({
                   className: "w-full accent-indigo-500"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "text-slate-400", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "text-slate-400", children: [
                   "Layers (",
                   state.annotations.length,
                   ")"
                 ] }),
-                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -6084,7 +6474,7 @@ var ImageEditor = ({
                     children: "Delete Selected"
                   }
                 ),
-                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -6095,10 +6485,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "depth" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            activeTab === "depth" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -6108,8 +6498,8 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -6118,12 +6508,12 @@ var ImageEditor = ({
                     className: "rounded accent-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Enable Depth / Alpha Mask" })
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
-              state.depthMask.enabled && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              state.depthMask.enabled && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "input",
                     {
                       type: "text",
@@ -6134,8 +6524,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "button",
                     {
                       type: "button",
@@ -6144,7 +6534,7 @@ var ImageEditor = ({
                       children: "Threshold Mode"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "button",
                     {
                       type: "button",
@@ -6154,12 +6544,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Depth Start (Lower):" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Depth Start (Lower):" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "input",
                     {
                       type: "range",
@@ -6173,12 +6563,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Depth Stop (Upper):" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Depth Stop (Upper):" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "input",
                     {
                       type: "range",
@@ -6192,12 +6582,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Softness:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-mono", children: state.depthMask.softness })
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Softness:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-mono", children: state.depthMask.softness })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "input",
                     {
                       type: "range",
@@ -6209,8 +6599,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -6219,12 +6609,12 @@ var ImageEditor = ({
                       className: "rounded accent-indigo-500"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Invert Mask" })
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Invert Mask" })
                 ] })
               ] })
             ] }),
-            activeTab === "select" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            activeTab === "select" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 SelectionOptionsBar,
                 {
                   controller,
@@ -6234,13 +6624,37 @@ var ImageEditor = ({
                   quickMask: Boolean(state.quickMask)
                 }
               ),
-              selectionError && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { role: "alert", className: "text-rose-400", children: selectionError }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
+              selectionError && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { role: "alert", className: "text-rose-400", children: selectionError }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    title: "Select \u203A Transform Selection: the outline only",
+                    className: "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40",
+                    disabled: transformTool.active,
+                    onClick: () => transformTool.begin({ content: "selection-outline" }),
+                    children: "Transform Selection"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    title: "Edit \u203A Free Transform: the selected pixels of the active layer",
+                    className: "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40",
+                    disabled: transformTool.active,
+                    onClick: () => transformTool.begin({ content: "selection" }),
+                    children: "Free Transform Pixels"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
             ] }),
-            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Results go to" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Results go to" }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                   "select",
                   {
                     "aria-label": "AI result target",
@@ -6248,54 +6662,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_runtime25.jsx)("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "new-layer", children: "New layer / mask" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "replace", children: "Replace image" })
+                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: "new-layer", children: "New layer / mask" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: "replace", children: "Replace image" })
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.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_runtime27.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_runtime27.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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_runtime25.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_runtime27.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_runtime25.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.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_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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_runtime25.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_runtime25.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.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_runtime25.jsx)("path", { d: "m14 7 3 3" })
+              /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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_runtime27.jsx)("path", { d: "m14 7 3 3" })
                     ] }),
                     "Generative Inpainting"
                   ] }),
-                  isInpainting && /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime27.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_runtime25.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_runtime25.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "textarea",
                     {
                       id: "ai-inpaint-prompt-react",
@@ -6307,10 +6721,10 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -6323,7 +6737,7 @@ var ImageEditor = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -6338,25 +6752,25 @@ var ImageEditor = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.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_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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_runtime25.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_runtime25.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_runtime27.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_runtime27.jsx)("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
             ] })
           ] })
         ] })
@@ -6366,7 +6780,7 @@ var ImageEditor = ({
 };
 
 // src/review/useReview.ts
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_editor12 = require("@pixerate/editor");
 var EMPTY_COMMENTS = Object.freeze({
   threads: [],
@@ -6385,23 +6799,23 @@ function isCommentStore(value) {
 }
 function useComments(source) {
   const store = isCommentStore(source) ? source : (0, import_editor12.getCommentStore)(source);
-  const subscribe = (0, import_react43.useCallback)(
+  const subscribe = (0, import_react45.useCallback)(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
-  const snapshot = (0, import_react43.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  return (0, import_react43.useMemo)(() => ({ ...snapshot, store }), [snapshot, store]);
+  const snapshot = (0, import_react45.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react45.useMemo)(() => ({ ...snapshot, store }), [snapshot, store]);
 }
 function useTrackChanges(editor) {
   const store = (0, import_editor12.getTrackChangesStore)(editor ?? null);
-  const subscribe = (0, import_react43.useCallback)(
+  const subscribe = (0, import_react45.useCallback)(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
-  const snapshot = (0, import_react43.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  return (0, import_react43.useMemo)(() => {
+  const snapshot = (0, import_react45.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react45.useMemo)(() => {
     const run = (fn) => () => {
       if (editor && !editor.isDestroyed) fn(editor);
     };
@@ -6424,9 +6838,9 @@ function useTrackChanges(editor) {
 }
 
 // src/review/CommentsPanel.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_editor13 = require("@pixerate/editor");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var buttonClass2 = "rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50";
 var primaryButtonClass = "rounded px-2 py-1 text-xs bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50";
 var textareaClass = "w-full resize-y rounded-md border border-input bg-background p-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary";
@@ -6440,18 +6854,18 @@ var CommentsPanel = ({
   emptyMessage = "No comments yet. Select text and add a comment."
 }) => {
   const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
-  const [showResolved, setShowResolved] = (0, import_react44.useState)(showResolvedInitial);
+  const [showResolved, setShowResolved] = (0, import_react46.useState)(showResolvedInitial);
   const author = authorProp ?? (0, import_editor13.getCommentAuthor)(editor) ?? { id: "anonymous", name: "Anonymous" };
   const visible = threads.filter((t) => showResolved || !t.resolved);
   const resolvedCount = threads.filter((t) => t.resolved).length;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("aside", { className, "aria-label": "Comments", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "text-xs font-medium text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("aside", { className, "aria-label": "Comments", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "text-xs font-medium text-muted-foreground", children: [
         threads.length - resolvedCount,
         " open",
         resolvedCount > 0 ? ` \xB7 ${resolvedCount} resolved` : ""
       ] }),
-      resolvedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      resolvedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           type: "button",
@@ -6462,7 +6876,7 @@ var CommentsPanel = ({
         }
       )
     ] }),
-    visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       CommentThreadCard,
       {
         thread,
@@ -6484,7 +6898,7 @@ var CommentThreadCard = ({
   author,
   formatTime
 }) => {
-  const [draft, setDraft] = (0, import_react44.useState)("");
+  const [draft, setDraft] = (0, import_react46.useState)("");
   const isDraft = thread.body === "";
   const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
   const live = editor && !editor.isDestroyed ? editor : null;
@@ -6510,7 +6924,7 @@ var CommentThreadCard = ({
     setDraft("");
   };
   const stop = (e) => e.stopPropagation();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "li",
     {
       className: `flex flex-col gap-2 rounded-md border bg-background p-3 cursor-pointer ${active ? "border-primary ring-1 ring-primary" : "border-border"} ${thread.resolved ? "opacity-70" : ""}`,
@@ -6526,24 +6940,24 @@ var CommentThreadCard = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-medium", children: thread.author.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-medium", children: thread.author.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
         ] }),
-        quote && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
-        thread.orphaned && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
-        thread.resolved && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
-        !isDraft && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
-        thread.replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-medium", children: reply.author.name }),
+        quote && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
+        thread.orphaned && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
+        thread.resolved && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
+        !isDraft && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
+        thread.replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-medium", children: reply.author.name }),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
         ] }, reply.id)) }),
-        (active || isDraft) && !thread.resolved && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-1", onClick: stop, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        (active || isDraft) && !thread.resolved && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-1", onClick: stop, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "textarea",
             {
               className: textareaClass,
@@ -6561,9 +6975,9 @@ var CommentThreadCard = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-end gap-1", children: [
-            isDraft && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", className: buttonClass2, onClick: remove, children: "Cancel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex justify-end gap-1", children: [
+            isDraft && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", className: buttonClass2, onClick: remove, children: "Cancel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
                 type: "button",
@@ -6575,9 +6989,9 @@ var CommentThreadCard = ({
             )
           ] })
         ] }),
-        !isDraft && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-end gap-1", onClick: stop, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", className: buttonClass2, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        !isDraft && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex justify-end gap-1", onClick: stop, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", className: buttonClass2, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "button",
             {
               type: "button",
@@ -6593,7 +7007,7 @@ var CommentThreadCard = ({
 };
 
 // src/review/ReviewToolbar.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var defaultDescriptionClass = "max-w-[16rem] truncate px-1 text-xs text-muted-foreground";
 var buttonClass3 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
 var ReviewToolbar = ({
@@ -6606,8 +7020,8 @@ var ReviewToolbar = ({
   const count = review.changes.length;
   const current = review.currentChange;
   const index = current ? review.changes.findIndex((c) => c.id === current.id) + 1 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className, role: "toolbar", "aria-label": "Review", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className, role: "toolbar", "aria-label": "Review", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "button",
       {
         type: "button",
@@ -6618,8 +7032,8 @@ var ReviewToolbar = ({
         children: review.enabled ? "Tracking on" : "Track changes"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "button",
       {
         type: "button",
@@ -6630,8 +7044,8 @@ var ReviewToolbar = ({
         children: "\u2039"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "min-w-[4rem] text-center text-xs text-muted-foreground", "aria-live": "polite", children: count === 0 ? "No changes" : current ? `${index} of ${count}` : `${count} changes` }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "min-w-[4rem] text-center text-xs text-muted-foreground", "aria-live": "polite", children: count === 0 ? "No changes" : current ? `${index} of ${count}` : `${count} changes` }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "button",
       {
         type: "button",
@@ -6642,7 +7056,7 @@ var ReviewToolbar = ({
         children: "\u203A"
       }
     ),
-    showDescription && current && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    showDescription && current && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "span",
       {
         className: descriptionClassName,
@@ -6654,8 +7068,8 @@ var ReviewToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "button",
       {
         type: "button",
@@ -6665,7 +7079,7 @@ var ReviewToolbar = ({
         children: "Accept"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "button",
       {
         type: "button",
@@ -6675,18 +7089,18 @@ var ReviewToolbar = ({
         children: "Reject"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { type: "button", className: buttonClass3, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { type: "button", className: buttonClass3, disabled: count === 0, onClick: review.rejectAll, children: "Reject all" })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: buttonClass3, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: buttonClass3, disabled: count === 0, onClick: review.rejectAll, children: "Reject all" })
   ] });
 };
 
 // src/review/CommentButton.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var CommentButton = ({
   editor,
   className = "rounded px-2 py-1 text-xs text-popover-foreground hover:bg-muted",
   children = "Comment"
-}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   "button",
   {
     type: "button",
@@ -6698,13 +7112,13 @@ var CommentButton = ({
 );
 
 // src/review/useDocumentCompare.ts
-var import_react45 = require("react");
+var import_react47 = require("react");
 var import_editor14 = require("@pixerate/editor");
 function useDocumentCompare(editor, options) {
-  const [summary, setSummary] = (0, import_react45.useState)(null);
-  const defaults = (0, import_react45.useRef)(options);
+  const [summary, setSummary] = (0, import_react47.useState)(null);
+  const defaults = (0, import_react47.useRef)(options);
   defaults.current = options;
-  const compare = (0, import_react45.useCallback)(
+  const compare = (0, import_react47.useCallback)(
     (original, revised, overrides) => {
       if (!editor || editor.isDestroyed) return null;
       const result = (0, import_editor14.applyDocumentComparison)(editor, original, revised, {
@@ -6716,13 +7130,13 @@ function useDocumentCompare(editor, options) {
     },
     [editor]
   );
-  const clear = (0, import_react45.useCallback)(() => setSummary(null), []);
-  return (0, import_react45.useMemo)(() => ({ summary, compare, clear }), [summary, compare, clear]);
+  const clear = (0, import_react47.useCallback)(() => setSummary(null), []);
+  return (0, import_react47.useMemo)(() => ({ summary, compare, clear }), [summary, compare, clear]);
 }
 
 // src/review/TrackedChangesList.tsx
 var import_editor15 = require("@pixerate/editor");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var buttonClass4 = "rounded px-1.5 py-0.5 text-xs text-foreground hover:bg-muted disabled:opacity-40";
 var TrackedChangesList = ({
   editor,
@@ -6733,18 +7147,18 @@ var TrackedChangesList = ({
 }) => {
   const review = useTrackChanges(editor);
   if (review.changes.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className, "data-tracked-changes-list": "", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "pixerate-changes-empty text-xs text-muted-foreground", children: emptyState }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className, "data-tracked-changes-list": "", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pixerate-changes-empty text-xs text-muted-foreground", children: emptyState }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className, role: "list", "aria-label": "Tracked changes", "data-tracked-changes-list": "", children: review.changes.map((change) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className, role: "list", "aria-label": "Tracked changes", "data-tracked-changes-list": "", children: review.changes.map((change) => {
     const active = change.id === review.currentChangeId;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "li",
       {
         className: active ? `${itemClassName} ${activeItemClassName}` : itemClassName,
         "data-change-type": change.type,
         "data-change-id": change.id,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             "button",
             {
               type: "button",
@@ -6752,14 +7166,14 @@ var TrackedChangesList = ({
               title: `${change.author.name}: ${change.description}`,
               onClick: () => review.select(change.id),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "font-medium", children: (0, import_editor15.trackedChangeLabel)(change) }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "font-medium", children: (0, import_editor15.trackedChangeLabel)(change) }),
                 change.author.name ? ` \xB7 ${change.author.name}` : "",
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block truncate text-muted-foreground", children: change.description })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "block truncate text-muted-foreground", children: change.description })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: buttonClass4, onClick: () => review.accept(change.id), children: "Accept" }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: buttonClass4, onClick: () => review.reject(change.id), children: "Reject" })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", className: buttonClass4, onClick: () => review.accept(change.id), children: "Accept" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", className: buttonClass4, onClick: () => review.reject(change.id), children: "Reject" })
         ]
       },
       `${change.type}:${change.id}`
@@ -6768,12 +7182,12 @@ var TrackedChangesList = ({
 };
 
 // src/commands/useCommandPalette.ts
-var import_react46 = require("react");
+var import_react48 = require("react");
 var import_commands2 = require("@pixerate/editor/commands");
 function useCommandPalette(registry, options = {}) {
-  const optionsRef = (0, import_react46.useRef)(options);
+  const optionsRef = (0, import_react48.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react46.useMemo)(
+  const controller = (0, import_react48.useMemo)(
     () => (0, import_commands2.createCommandPaletteController)(registry, {
       context: () => {
         const c = optionsRef.current.context;
@@ -6794,9 +7208,9 @@ function useCommandPalette(registry, options = {}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [registry]
   );
-  const state = (0, import_react46.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  const state = (0, import_react48.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
   const { hotkey, hotkeyTarget } = options;
-  (0, import_react46.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!hotkey) return;
     const target = hotkeyTarget ?? (typeof window !== "undefined" ? window : null);
     if (!target) return;
@@ -6824,13 +7238,13 @@ function useCommandPalette(registry, options = {}) {
 }
 
 // src/commands/CommandPalette.tsx
-var import_react47 = __toESM(require("react"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react49 = __toESM(require("react"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function HighlightedLabel({ item }) {
-  if (item.labelIndices.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: item.label });
+  if (item.labelIndices.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: item.label });
   const marked = new Set(item.labelIndices);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: Array.from(item.label).map(
-    (ch, i) => marked.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "font-semibold text-foreground", "data-match": "", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react47.default.Fragment, { children: ch }, i)
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: Array.from(item.label).map(
+    (ch, i) => marked.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-semibold text-foreground", "data-match": "", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react49.default.Fragment, { children: ch }, i)
   ) });
 }
 var CommandPalette = ({
@@ -6839,22 +7253,22 @@ var CommandPalette = ({
   emptyMessage = "No matching commands",
   className = ""
 }) => {
-  const inputRef = (0, import_react47.useRef)(null);
-  const listRef = (0, import_react47.useRef)(null);
-  const baseId = (0, import_react47.useId)();
+  const inputRef = (0, import_react49.useRef)(null);
+  const listRef = (0, import_react49.useRef)(null);
+  const baseId = (0, import_react49.useId)();
   const listId = `${baseId}-list`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const { open, query, items, activeIndex } = palette;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (open) inputRef.current?.focus();
   }, [open]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!open) return;
     const active = listRef.current?.querySelector('[aria-selected="true"]');
     active?.scrollIntoView?.({ block: "nearest" });
   }, [open, activeIndex]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-start justify-center bg-black/30 px-4 pt-[15vh]",
@@ -6862,7 +7276,7 @@ var CommandPalette = ({
       onMouseDown: (e) => {
         if (e.target === e.currentTarget) palette.setOpen(false);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "div",
         {
           role: "dialog",
@@ -6871,7 +7285,7 @@ var CommandPalette = ({
           className: `w-full max-w-lg overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-xl ${className}`,
           style: { background: "var(--popover, var(--background, #fff))" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "input",
               {
                 ref: inputRef,
@@ -6891,7 +7305,7 @@ var CommandPalette = ({
                 className: "w-full border-b border-border bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
               }
             ),
-            items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "max-h-80 overflow-y-auto py-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "max-h-80 overflow-y-auto py-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
               "li",
               {
                 id: optionId(index),
@@ -6906,12 +7320,12 @@ var CommandPalette = ({
                 onClick: () => palette.run(item.id),
                 className: `flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm ${index === activeIndex ? "bg-muted" : ""} ${item.enabled ? "" : "cursor-default opacity-50"}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(HighlightedLabel, { item }),
-                    item.disabledReason && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ml-2 text-xs text-muted-foreground", "data-disabled-reason": "", children: item.disabledReason })
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HighlightedLabel, { item }),
+                    item.disabledReason && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ml-2 text-xs text-muted-foreground", "data-disabled-reason": "", children: item.disabledReason })
                   ] }),
-                  item.group && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.group }),
-                  item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("kbd", { className: "shrink-0 rounded border border-border px-1.5 font-mono text-[10px] text-muted-foreground", children: item.shortcut })
+                  item.group && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.group }),
+                  item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("kbd", { className: "shrink-0 rounded border border-border px-1.5 font-mono text-[10px] text-muted-foreground", children: item.shortcut })
                 ]
               },
               item.id
@@ -6924,12 +7338,12 @@ var CommandPalette = ({
 };
 
 // src/commands/useCommandShortcuts.ts
-var import_react48 = require("react");
+var import_react50 = require("react");
 function useCommandShortcuts(registry, options = {}) {
-  const optionsRef = (0, import_react48.useRef)(options);
+  const optionsRef = (0, import_react50.useRef)(options);
   optionsRef.current = options;
   const { enabled = true, target } = options;
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!registry || !enabled) return;
     const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
     if (!eventTarget) return;
@@ -6947,14 +7361,14 @@ function useCommandShortcuts(registry, options = {}) {
   }, [registry, enabled, target]);
 }
 function useRegisterCommands(registry, specs) {
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!registry || !specs || specs.length === 0) return;
     return registry.register(specs);
   }, [registry, specs]);
 }
 
 // src/persistence/useAutosave.ts
-var import_react49 = require("react");
+var import_react51 = require("react");
 var import_persistence = require("@pixerate/editor/persistence");
 var IDLE = {
   status: "idle",
@@ -6965,18 +7379,18 @@ var IDLE = {
   ready: false
 };
 function useAutosave(options) {
-  const optionsRef = (0, import_react49.useRef)(options);
+  const optionsRef = (0, import_react51.useRef)(options);
   optionsRef.current = options;
   const { storage, key, history, dirty } = options;
   const recover = options.recover !== false;
   const flushOnHide = options.flushOnHide !== false;
   const ready = options.ready !== false;
-  const [controller, setController] = (0, import_react49.useState)(null);
-  const [status, setStatus] = (0, import_react49.useState)(IDLE);
-  const [recovery, setRecovery] = (0, import_react49.useState)(null);
-  const [pendingRecovery, setPendingRecovery] = (0, import_react49.useState)(recover);
-  const revisionsRef = (0, import_react49.useRef)(null);
-  (0, import_react49.useEffect)(() => {
+  const [controller, setController] = (0, import_react51.useState)(null);
+  const [status, setStatus] = (0, import_react51.useState)(IDLE);
+  const [recovery, setRecovery] = (0, import_react51.useState)(null);
+  const [pendingRecovery, setPendingRecovery] = (0, import_react51.useState)(recover);
+  const revisionsRef = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => {
     const revisions = (0, import_persistence.createRevisionTracker)({ history, dirty });
     const o = optionsRef.current;
     const instance = (0, import_persistence.createAutosaveController)({
@@ -7019,10 +7433,10 @@ function useAutosave(options) {
       if (revisionsRef.current === revisions) revisionsRef.current = null;
     };
   }, [storage, key, history, dirty, recover]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (controller && ready && !pendingRecovery) controller.ready();
   }, [controller, ready, pendingRecovery]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!controller || !flushOnHide || typeof window === "undefined") return;
     const flush = () => void controller.flushNow();
     const onVisibility = () => {
@@ -7035,31 +7449,31 @@ function useAutosave(options) {
       document.removeEventListener("visibilitychange", onVisibility);
     };
   }, [controller, flushOnHide]);
-  const restore = (0, import_react49.useCallback)(() => {
+  const restore = (0, import_react51.useCallback)(() => {
     const snapshot = recovery?.snapshot;
     setRecovery(null);
     setPendingRecovery(false);
     return snapshot;
   }, [recovery]);
-  const discard = (0, import_react49.useCallback)(async () => {
+  const discard = (0, import_react51.useCallback)(async () => {
     if (controller) await controller.discardRecovery();
     setRecovery(null);
     setPendingRecovery(false);
   }, [controller]);
-  const flushNow = (0, import_react49.useCallback)(async () => {
+  const flushNow = (0, import_react51.useCallback)(async () => {
     await controller?.flushNow();
   }, [controller]);
-  const markClean = (0, import_react49.useCallback)(async () => {
+  const markClean = (0, import_react51.useCallback)(async () => {
     revisionsRef.current?.markSaved();
     await controller?.markClean();
   }, [controller]);
-  const notifyChange = (0, import_react49.useCallback)(() => revisionsRef.current?.bump(), []);
+  const notifyChange = (0, import_react51.useCallback)(() => revisionsRef.current?.bump(), []);
   return { status, recovery, pendingRecovery, restore, discard, flushNow, markClean, notifyChange, controller };
 }
 
 // src/persistence/RecoveryPrompt.tsx
 var import_persistence2 = require("@pixerate/editor/persistence");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var RecoveryPrompt = ({
   recovery,
   onRestore,
@@ -7071,7 +7485,7 @@ var RecoveryPrompt = ({
 }) => {
   if (!recovery) return null;
   const { name } = recovery.meta;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       role: "alertdialog",
@@ -7079,15 +7493,15 @@ var RecoveryPrompt = ({
       "data-recovery-prompt": "",
       className: `flex flex-wrap items-center gap-3 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm ${className}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "min-w-0 flex-1", children: [
           (0, import_persistence2.formatRecoveryMessage)(recovery.meta, formatTime),
-          name ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "ml-1 text-xs text-muted-foreground", children: [
+          name ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "ml-1 text-xs text-muted-foreground", children: [
             "(",
             name,
             ")"
           ] }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "button",
           {
             type: "button",
@@ -7097,7 +7511,7 @@ var RecoveryPrompt = ({
             children: restoreLabel
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "button",
           {
             type: "button",
@@ -7113,17 +7527,17 @@ var RecoveryPrompt = ({
 };
 
 // src/generation/useGenerationPlan.ts
-var import_react50 = require("react");
+var import_react52 = require("react");
 var import_generation = require("@pixerate/editor/generation");
 function useGenerationPlan(request, capabilities, options = {}) {
   const key = JSON.stringify([request, capabilities, options]);
-  return (0, import_react50.useMemo)(() => (0, import_generation.planGenerationRequest)(request, capabilities, options), [key]);
+  return (0, import_react52.useMemo)(() => (0, import_generation.planGenerationRequest)(request, capabilities, options), [key]);
 }
 function useJobProgress(options) {
   const { startedAt, expectedMs, done, now, intervalMs = 1e3 } = options;
-  const [tick, setTick] = (0, import_react50.useState)(() => Date.now());
+  const [tick, setTick] = (0, import_react52.useState)(() => Date.now());
   const ticking = !done && now === void 0;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!ticking) return;
     setTick(Date.now());
     const id = setInterval(() => setTick(Date.now()), Math.max(16, intervalMs));
@@ -7133,9 +7547,9 @@ function useJobProgress(options) {
 }
 
 // src/generation/GenerationSettings.tsx
-var import_react51 = require("react");
+var import_react53 = require("react");
 var import_generation2 = require("@pixerate/editor/generation");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var inputClass2 = "w-full rounded-md border border-border bg-background px-2 py-1 text-sm outline-none focus:ring-1 focus:ring-ring";
 function Control({
   control,
@@ -7145,7 +7559,7 @@ function Control({
 }) {
   const shown = value ?? control.defaultValue;
   if (control.kind === "checkbox") {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "input",
       {
         id,
@@ -7157,7 +7571,7 @@ function Control({
     );
   }
   if (control.kind === "select") {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "select",
       {
         id,
@@ -7166,14 +7580,14 @@ function Control({
         value: shown === void 0 ? "" : String(shown),
         onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value)),
         children: [
-          shown === void 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: "", children: "Default" }),
-          control.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: String(option.value), children: option.label }, String(option.value)))
+          shown === void 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("option", { value: "", children: "Default" }),
+          control.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("option", { value: String(option.value), children: option.label }, String(option.value)))
         ]
       }
     );
   }
   if (control.kind === "textarea") {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "textarea",
       {
         id,
@@ -7187,8 +7601,8 @@ function Control({
     );
   }
   const numeric = typeof shown === "number" ? shown : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "input",
       {
         id,
@@ -7202,7 +7616,7 @@ function Control({
         onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value))
       }
     ),
-    control.kind === "range" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "w-10 text-right tabular-nums text-muted-foreground", "data-field-value": "", children: numeric ?? "\u2013" })
+    control.kind === "range" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "w-10 text-right tabular-nums text-muted-foreground", "data-field-value": "", children: numeric ?? "\u2013" })
   ] });
 }
 var GenerationSettings = ({
@@ -7216,17 +7630,17 @@ var GenerationSettings = ({
   renderReference,
   className = ""
 }) => {
-  const baseId = (0, import_react51.useId)();
-  const controls = (0, import_react51.useMemo)(() => (0, import_generation2.getGenerationControls)(capabilities), [capabilities]);
+  const baseId = (0, import_react53.useId)();
+  const controls = (0, import_react53.useMemo)(() => (0, import_generation2.getGenerationControls)(capabilities), [capabilities]);
   const computed = useGenerationPlan(value, capabilities, { strategy });
   const plan = planProp ?? computed;
   const slots = (0, import_generation2.getReferenceSlots)(capabilities, value);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `flex flex-col gap-3 text-sm ${className}`, "data-generation-settings": "", "data-model": capabilities.id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: `flex flex-col gap-3 text-sm ${className}`, "data-generation-settings": "", "data-model": capabilities.id, children: [
     controls.map((control) => {
       const id = `${baseId}-${control.key}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", "data-control": control.key, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { htmlFor: id, className: "text-xs font-medium text-muted-foreground", title: control.description, children: control.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-1", "data-control": control.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { htmlFor: id, className: "text-xs font-medium text-muted-foreground", title: control.description, children: control.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Control,
           {
             control,
@@ -7237,23 +7651,23 @@ var GenerationSettings = ({
         )
       ] }, control.key);
     }),
-    slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("fieldset", { className: "flex flex-col gap-1", "data-reference-role": slot.role, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("legend", { className: "text-xs font-medium text-muted-foreground", title: slot.description, children: [
+    slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("fieldset", { className: "flex flex-col gap-1", "data-reference-role": slot.role, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("legend", { className: "text-xs font-medium text-muted-foreground", title: slot.description, children: [
         slot.label,
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "tabular-nums", "data-reference-count": "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "tabular-nums", "data-reference-count": "", children: [
           "(",
           slot.references.length,
           "/",
           slot.max,
           ")"
         ] }),
-        slot.min > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-destructive", children: " *" })
+        slot.min > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-destructive", children: " *" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("ul", { className: "flex flex-wrap gap-1", children: [
-        slot.references.map((ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { className: "flex items-center gap-1 rounded border border-border px-1.5 py-0.5", "data-reference-id": ref.id, children: [
-          renderReference ? renderReference(ref) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "max-w-[10rem] truncate", children: ref.id }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("ul", { className: "flex flex-wrap gap-1", children: [
+        slot.references.map((ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { className: "flex items-center gap-1 rounded border border-border px-1.5 py-0.5", "data-reference-id": ref.id, children: [
+          renderReference ? renderReference(ref) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "max-w-[10rem] truncate", children: ref.id }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "button",
             {
               type: "button",
@@ -7264,7 +7678,7 @@ var GenerationSettings = ({
             }
           )
         ] }, ref.id)),
-        onAddReference && slot.canAdd && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        onAddReference && slot.canAdd && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "button",
           {
             type: "button",
@@ -7275,21 +7689,21 @@ var GenerationSettings = ({
         ) })
       ] })
     ] }, slot.role)),
-    showAdjustments && plan.adjustments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { role: "status", className: "flex flex-col gap-0.5 text-xs text-muted-foreground", "data-generation-adjustments": "", children: plan.adjustments.map((adjustment, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { "data-adjustment-field": adjustment.field, "data-adjustment-kind": adjustment.kind, children: adjustment.reason }, index)) }),
-    showAdjustments && plan.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { role: "alert", className: "flex flex-col gap-0.5 text-xs text-destructive", "data-generation-errors": "", children: plan.errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { "data-error-field": error.field, children: error.message }, index)) })
+    showAdjustments && plan.adjustments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { role: "status", className: "flex flex-col gap-0.5 text-xs text-muted-foreground", "data-generation-adjustments": "", children: plan.adjustments.map((adjustment, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { "data-adjustment-field": adjustment.field, "data-adjustment-kind": adjustment.kind, children: adjustment.reason }, index)) }),
+    showAdjustments && plan.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { role: "alert", className: "flex flex-col gap-0.5 text-xs text-destructive", "data-generation-errors": "", children: plan.errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { "data-error-field": error.field, children: error.message }, index)) })
   ] });
 };
 
 // src/generation/JobProgress.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var JobProgress = ({ title, className = "", ...options }) => {
   const progress = useJobProgress(options);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `flex flex-col gap-1 text-sm ${className}`, "data-job-progress": "", "data-done": options.done ? "" : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between gap-2 text-muted-foreground", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate text-foreground", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { "data-job-progress-label": "", "aria-live": "polite", children: progress.label })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `flex flex-col gap-1 text-sm ${className}`, "data-job-progress": "", "data-done": options.done ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between gap-2 text-muted-foreground", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "truncate text-foreground", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "data-job-progress-label": "", "aria-live": "polite", children: progress.label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         role: "progressbar",
@@ -7299,7 +7713,7 @@ var JobProgress = ({ title, className = "", ...options }) => {
         "aria-valuenow": progress.percent,
         "aria-valuetext": `${progress.percent}%, ${progress.label}`,
         className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "div",
           {
             className: "h-full rounded-full bg-primary transition-[width] duration-500",
@@ -7312,9 +7726,9 @@ var JobProgress = ({ title, className = "", ...options }) => {
 };
 
 // src/generation/AssetMentionChips.tsx
-var import_react52 = require("react");
+var import_react54 = require("react");
 var import_generation3 = require("@pixerate/editor/generation");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var AssetMentionChips = ({
   content,
   onChange,
@@ -7324,14 +7738,14 @@ var AssetMentionChips = ({
   renderAsset,
   className = ""
 }) => {
-  const [open, setOpen] = (0, import_react52.useState)(null);
-  const rootRef = (0, import_react52.useRef)(null);
-  const chips = (0, import_react52.useMemo)(
+  const [open, setOpen] = (0, import_react54.useState)(null);
+  const rootRef = (0, import_react54.useRef)(null);
+  const chips = (0, import_react54.useMemo)(
     () => (0, import_generation3.describeAssetMentions)((0, import_generation3.findTextMentions)(content), assets, capabilities),
     [content, assets, capabilities]
   );
   const options = roles ?? (capabilities ? (0, import_generation3.getAssetRoleOptions)(capabilities) : (0, import_generation3.defaultAssetRoleOptions)());
-  (0, import_react52.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (open === null) return;
     const onPointer = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(null);
@@ -7339,19 +7753,19 @@ var AssetMentionChips = ({
     document.addEventListener("mousedown", onPointer);
     return () => document.removeEventListener("mousedown", onPointer);
   }, [open]);
-  const pick = (chip2, role) => {
+  const pick = (chip3, role) => {
     setOpen(null);
-    if (chip2.start === void 0) return;
-    onChange((0, import_generation3.setMentionRoleInText)(content, chip2.start, role));
+    if (chip3.start === void 0) return;
+    onChange((0, import_generation3.setMentionRoleInText)(content, chip3.start, role));
   };
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref: rootRef, className: `flex flex-wrap gap-1.5 ${className}`, "data-asset-mention-chips": "", children: chips.map((chip2) => {
-    const error = chip2.issues.find((issue) => issue.severity === "error");
-    const warning = chip2.issues.find((issue) => issue.severity === "warning");
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref: rootRef, className: `flex flex-wrap gap-1.5 ${className}`, "data-asset-mention-chips": "", children: chips.map((chip3) => {
+    const error = chip3.issues.find((issue) => issue.severity === "error");
+    const warning = chip3.issues.find((issue) => issue.severity === "warning");
     const problem = error ?? warning;
-    const isOpen = open === chip2.index;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "relative inline-flex", "data-asset-chip": chip2.asset.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    const isOpen = open === chip3.index;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "relative inline-flex", "data-asset-chip": chip3.asset.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "button",
         {
           type: "button",
@@ -7359,82 +7773,82 @@ var AssetMentionChips = ({
           "aria-expanded": isOpen,
           title: problem?.message,
           "data-issue": problem?.code,
-          onClick: () => setOpen(isOpen ? null : chip2.index),
+          onClick: () => setOpen(isOpen ? null : chip3.index),
           onKeyDown: (e) => {
             if (e.key === "Escape") setOpen(null);
           },
           className: `inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs ${error ? "border-red-500/60" : warning ? "border-amber-500/60" : "border-border"} bg-muted/40 hover:bg-muted`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: renderAsset ? renderAsset(chip2) : `@${chip2.asset.label ?? chip2.handle}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: renderAsset ? renderAsset(chip3) : `@${chip3.asset.label ?? chip3.handle}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "span",
               {
-                className: `rounded px-1 text-[10px] uppercase tracking-wide ${chip2.role ? "bg-primary/15" : "opacity-60"}`,
-                "data-role-badge": chip2.role ?? "",
-                children: chip2.roleLabel ?? "No role"
+                className: `rounded px-1 text-[10px] uppercase tracking-wide ${chip3.role ? "bg-primary/15" : "opacity-60"}`,
+                "data-role-badge": chip3.role ?? "",
+                children: chip3.roleLabel ?? "No role"
               }
             )
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "div",
         {
           role: "listbox",
-          "aria-label": `Role for ${chip2.asset.label ?? chip2.handle}`,
+          "aria-label": `Role for ${chip3.asset.label ?? chip3.handle}`,
           className: "absolute left-0 top-full z-50 mt-1 flex min-w-[12rem] flex-col rounded-md border border-border bg-background p-1 text-xs shadow-lg",
           "data-role-picker": "",
           onKeyDown: (e) => {
             if (e.key === "Escape") setOpen(null);
           },
           children: [
-            options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
               "button",
               {
                 type: "button",
                 role: "option",
-                "aria-selected": chip2.role === option.role,
+                "aria-selected": chip3.role === option.role,
                 "data-role-option": option.role,
                 title: option.description,
-                onClick: () => pick(chip2, option.role),
+                onClick: () => pick(chip3, option.role),
                 className: "flex items-center justify-between gap-2 rounded px-2 py-1 text-left hover:bg-muted",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: option.label }),
-                  option.accepts?.length ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-[10px] opacity-60", children: option.accepts.join(", ") }) : null
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: option.label }),
+                  option.accepts?.length ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[10px] opacity-60", children: option.accepts.join(", ") }) : null
                 ]
               },
               option.role
             )),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "button",
               {
                 type: "button",
                 role: "option",
-                "aria-selected": !chip2.role,
+                "aria-selected": !chip3.role,
                 "data-role-option": "",
-                onClick: () => pick(chip2, null),
+                onClick: () => pick(chip3, null),
                 className: "rounded px-2 py-1 text-left opacity-70 hover:bg-muted",
                 children: "No role"
               }
             ),
-            chip2.issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: "mt-1 border-t border-border px-2 pt-1 text-[10px]", "data-chip-issues": "", children: chip2.issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { className: issue.severity === "error" ? "text-red-500" : "text-amber-500", children: issue.message }, i)) })
+            chip3.issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "mt-1 border-t border-border px-2 pt-1 text-[10px]", "data-chip-issues": "", children: chip3.issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { className: issue.severity === "error" ? "text-red-500" : "text-amber-500", children: issue.message }, i)) })
           ]
         }
       )
-    ] }, `${chip2.start}-${chip2.index}`);
+    ] }, `${chip3.start}-${chip3.index}`);
   }) });
 };
 
 // src/generation/GenerationHistory.tsx
-var import_react53 = require("react");
+var import_react55 = require("react");
 var import_generation4 = require("@pixerate/editor/generation");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function useGenerationRecords(store, filter) {
-  const [records, setRecords] = (0, import_react53.useState)([]);
-  const [loading, setLoading] = (0, import_react53.useState)(!!store);
-  const [error, setError] = (0, import_react53.useState)(null);
+  const [records, setRecords] = (0, import_react55.useState)([]);
+  const [loading, setLoading] = (0, import_react55.useState)(!!store);
+  const [error, setError] = (0, import_react55.useState)(null);
   const filterKey = (0, import_generation4.stableStringify)(filter ?? {});
-  const refresh = (0, import_react53.useCallback)(async () => {
+  const refresh = (0, import_react55.useCallback)(async () => {
     if (!store) {
       setRecords([]);
       setLoading(false);
@@ -7451,7 +7865,7 @@ function useGenerationRecords(store, filter) {
       setLoading(false);
     }
   }, [store, filterKey]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     void refresh();
     if (!store) return;
     return store.subscribe(() => void refresh());
@@ -7477,21 +7891,21 @@ var GenerationHistory = ({
   emptyText = "No generations yet.",
   className = ""
 }) => {
-  const [innerMode, setInnerMode] = (0, import_react53.useState)("exact");
+  const [innerMode, setInnerMode] = (0, import_react55.useState)("exact");
   const mode = modeProp ?? innerMode;
   const setMode = (next) => {
     if (modeProp === void 0) setInnerMode(next);
     onModeChange?.(next);
   };
-  const options = (0, import_react53.useMemo)(() => ({ templates, capabilities, assets, mode }), [templates, capabilities, assets, mode]);
-  const results = (0, import_react53.useMemo)(() => records.map((record) => (0, import_generation4.recreateRequest)(record, options)), [records, options]);
-  const models = (0, import_react53.useMemo)(
+  const options = (0, import_react55.useMemo)(() => ({ templates, capabilities, assets, mode }), [templates, capabilities, assets, mode]);
+  const results = (0, import_react55.useMemo)(() => records.map((record) => (0, import_generation4.recreateRequest)(record, options)), [records, options]);
+  const models = (0, import_react55.useMemo)(
     () => capabilities ? Array.isArray(capabilities) ? capabilities : [capabilities] : [],
     [capabilities]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `flex flex-col gap-2 text-sm ${className}`, "data-generation-history": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center gap-2 text-xs", role: "radiogroup", "aria-label": "Recreate mode", children: ["exact", "latest"].map((value) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "inline-flex items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `flex flex-col gap-2 text-sm ${className}`, "data-generation-history": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center gap-2 text-xs", role: "radiogroup", "aria-label": "Recreate mode", children: ["exact", "latest"].map((value) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: "inline-flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "input",
         {
           type: "radio",
@@ -7504,34 +7918,34 @@ var GenerationHistory = ({
       ),
       value === "exact" ? "Exact (recorded versions)" : "Latest templates & settings"
     ] }, value)) }),
-    records.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyText }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "flex flex-col gap-2", children: records.map((record, i) => {
+    records.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyText }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className: "flex flex-col gap-2", children: records.map((record, i) => {
       const result = results[i];
       const model = models.find((m) => m.id === record.provenance.modelId);
       const blocked = !result.ok;
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
         "li",
         {
           className: "rounded-md border border-border p-2",
           "data-record": record.id,
           "data-drift": result.drift.length,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-medium", children: model?.name ?? record.provenance.modelId }),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "text-muted-foreground", children: [
-                record.kind !== "generate" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { "data-kind": "", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-medium", children: model?.name ?? record.provenance.modelId }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-muted-foreground", children: [
+                record.kind !== "generate" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { "data-kind": "", children: [
                   record.kind,
                   " \xB7 "
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("time", { dateTime: record.createdAt, children: record.createdAt.replace("T", " ").slice(0, 16) }),
-                record.seed !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("time", { dateTime: record.createdAt, children: record.createdAt.replace("T", " ").slice(0, 16) }),
+                record.seed !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
                   " \xB7 seed ",
                   record.seed
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-1 line-clamp-3 break-words text-xs", "data-record-prompt": "", children: record.provenance.resolvedPrompt }),
-            record.assets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mt-1 flex flex-wrap gap-1", children: record.assets.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mt-1 line-clamp-3 break-words text-xs", "data-record-prompt": "", children: record.provenance.resolvedPrompt }),
+            record.assets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mt-1 flex flex-wrap gap-1", children: record.assets.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
               "span",
               {
                 className: "rounded-full bg-muted px-2 py-0.5 text-[10px]",
@@ -7545,16 +7959,16 @@ var GenerationHistory = ({
               `${asset.role}:${asset.id}`
             )) }),
             renderPreview?.(record),
-            result.drift.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "mt-1 flex flex-col gap-0.5 text-[11px]", "data-drift-report": "", children: result.drift.map((item, j) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: severityClass[item.severity], "data-drift-type": item.type, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("strong", { children: [
+            result.drift.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className: "mt-1 flex flex-col gap-0.5 text-[11px]", "data-drift-report": "", children: result.drift.map((item, j) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { className: severityClass[item.severity], "data-drift-type": item.type, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("strong", { children: [
                 import_generation4.DRIFT_TYPE_LABELS[item.type],
                 ":"
               ] }),
               " ",
               item.message
             ] }, j)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mt-2 flex gap-2", children: [
-              onRecreate && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mt-2 flex gap-2", children: [
+              onRecreate && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 "button",
                 {
                   type: "button",
@@ -7566,7 +7980,7 @@ var GenerationHistory = ({
                   children: "Recreate"
                 }
               ),
-              onVariation && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              onVariation && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 "button",
                 {
                   type: "button",
@@ -7576,7 +7990,7 @@ var GenerationHistory = ({
                   children: "Variation"
                 }
               ),
-              onRemove && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              onRemove && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 "button",
                 {
                   type: "button",
@@ -7596,19 +8010,19 @@ var GenerationHistory = ({
 };
 
 // src/find-replace/useFindReplace.ts
-var import_react54 = require("react");
+var import_react56 = require("react");
 var import_editor16 = require("@pixerate/editor");
 var noopUnsubscribe2 = () => {
 };
 function useFindReplace(editor) {
   const store = (0, import_editor16.getFindReplaceStore)(editor ?? null);
-  const subscribe = (0, import_react54.useCallback)(
+  const subscribe = (0, import_react56.useCallback)(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe2,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? import_editor16.EMPTY_FIND_REPLACE_SNAPSHOT;
-  const snapshot = (0, import_react54.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  return (0, import_react54.useMemo)(() => {
+  const snapshot = (0, import_react56.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react56.useMemo)(() => {
     const run = (fn) => {
       if (editor && !editor.isDestroyed && store) fn(editor);
     };
@@ -7632,9 +8046,9 @@ function useFindReplace(editor) {
 }
 
 // src/find-replace/FindReplaceBar.tsx
-var import_react55 = require("react");
+var import_react57 = require("react");
 var import_editor17 = require("@pixerate/editor");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var inputClass3 = "min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring";
 var buttonClass5 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
 var toggleClass = (on) => `${buttonClass5} font-mono ${on ? "bg-primary/10 text-primary" : "text-muted-foreground"}`;
@@ -7647,10 +8061,10 @@ var FindReplaceBar = ({
   onClose
 }) => {
   const find = useFindReplace(editor);
-  const findInput = (0, import_react55.useRef)(null);
-  const [moreOpen, setMoreOpen] = (0, import_react55.useState)(false);
+  const findInput = (0, import_react57.useRef)(null);
+  const [moreOpen, setMoreOpen] = (0, import_react57.useState)(false);
   const visible = find.available && (alwaysOpen || find.open);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!visible || find.focusRequest === 0) return;
     findInput.current?.focus();
     findInput.current?.select();
@@ -7688,9 +8102,9 @@ var FindReplaceBar = ({
     if (isMod(e)) find.replaceAll();
     else find.replace();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className, role: "search", "aria-label": "Find and replace", onKeyDown: onBarKeyDown, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className, role: "search", "aria-label": "Find and replace", onKeyDown: onBarKeyDown, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "button",
         {
           type: "button",
@@ -7701,7 +8115,7 @@ var FindReplaceBar = ({
           children: showReplace ? "\u25BE" : "\u25B8"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "input",
         {
           ref: findInput,
@@ -7715,7 +8129,7 @@ var FindReplaceBar = ({
           onKeyDown: onFindKeyDown
         }
       ),
-      import_editor17.FIND_OPTION_TOGGLES.filter((t) => !t.advanced).map((t) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_editor17.FIND_OPTION_TOGGLES.filter((t) => !t.advanced).map((t) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "button",
         {
           type: "button",
@@ -7728,7 +8142,7 @@ var FindReplaceBar = ({
         },
         t.key
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "span",
         {
           className: `min-w-[5rem] px-1 text-center text-xs ${find.error ? "text-destructive" : "text-muted-foreground"}`,
@@ -7738,9 +8152,9 @@ var FindReplaceBar = ({
           children: status
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Previous match", disabled: !hasMatches, onClick: find.previous, children: "\u2191" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Next match", disabled: !hasMatches, onClick: find.next, children: "\u2193" }),
-      showMoreOptions && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Previous match", disabled: !hasMatches, onClick: find.previous, children: "\u2191" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Next match", disabled: !hasMatches, onClick: find.next, children: "\u2193" }),
+      showMoreOptions && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "button",
         {
           type: "button",
@@ -7751,10 +8165,10 @@ var FindReplaceBar = ({
           children: "\u2026"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Close find", onClick: close, children: "\xD7" })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Close find", onClick: close, children: "\xD7" })
     ] }),
-    showReplace && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1 pl-7", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    showReplace && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-1 pl-7", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "input",
         {
           type: "text",
@@ -7766,7 +8180,7 @@ var FindReplaceBar = ({
           onKeyDown: onReplaceKeyDown
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "button",
         {
           type: "button",
@@ -7776,11 +8190,11 @@ var FindReplaceBar = ({
           children: "Replace"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: buttonClass5, disabled: !hasMatches, onClick: find.replaceAll, children: "Replace all" }),
-      find.lastReplaceCount !== null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "px-1 text-xs text-muted-foreground", "aria-live": "polite", children: find.lastReplaceCount === 1 ? "1 replaced" : `${find.lastReplaceCount} replaced` })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", className: buttonClass5, disabled: !hasMatches, onClick: find.replaceAll, children: "Replace all" }),
+      find.lastReplaceCount !== null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "px-1 text-xs text-muted-foreground", "aria-live": "polite", children: find.lastReplaceCount === 1 ? "1 replaced" : `${find.lastReplaceCount} replaced` })
     ] }),
-    showMoreOptions && moreOpen && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 pl-7 text-xs text-muted-foreground", children: import_editor17.FIND_OPTION_TOGGLES.filter((t) => t.advanced).map((t) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    showMoreOptions && moreOpen && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 pl-7 text-xs text-muted-foreground", children: import_editor17.FIND_OPTION_TOGGLES.filter((t) => t.advanced).map((t) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "input",
         {
           type: "checkbox",
@@ -7794,12 +8208,12 @@ var FindReplaceBar = ({
 };
 
 // src/tables/useTableMenu.ts
-var import_react56 = require("react");
+var import_react58 = require("react");
 var import_editor18 = require("@pixerate/editor");
 function useTableMenu(editor) {
-  const store = (0, import_react56.useMemo)(() => (0, import_editor18.createTableStore)(editor), [editor]);
-  const snapshot = (0, import_react56.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
-  return (0, import_react56.useMemo)(
+  const store = (0, import_react58.useMemo)(() => (0, import_editor18.createTableStore)(editor), [editor]);
+  const snapshot = (0, import_react58.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return (0, import_react58.useMemo)(
     () => ({
       ...snapshot,
       run: (action, params) => (0, import_editor18.runTableAction)(editor, action, params, { focus: true }),
@@ -7810,9 +8224,9 @@ function useTableMenu(editor) {
 }
 
 // src/tables/TableToolbar.tsx
-var import_react57 = __toESM(require("react"), 1);
+var import_react59 = __toESM(require("react"), 1);
 var import_editor19 = require("@pixerate/editor");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var keepSelection2 = (event) => event.preventDefault();
 var TableToolbar = ({
   editor,
@@ -7826,14 +8240,14 @@ var TableToolbar = ({
 }) => {
   const table = useTableMenu(editor);
   if (!editor || !table.inTable && !showWhenOutside) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className, role: "toolbar", "aria-label": "Table", "data-table-toolbar": "", children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className, role: "toolbar", "aria-label": "Table", "data-table-toolbar": "", children: items.map((item, index) => {
     const status = table.check(item.action, item.params);
     const enabled = status === true;
     const active = item.active?.(table);
     const separator = index > 0 && items[index - 1].group !== item.group;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react57.default.Fragment, { children: [
-      separator && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: separatorClassName, "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react59.default.Fragment, { children: [
+      separator && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: separatorClassName, "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
@@ -7855,8 +8269,8 @@ var TableToolbar = ({
 };
 
 // src/tables/InsertTableGrid.tsx
-var import_react58 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react60 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var keepSelection3 = (event) => event.preventDefault();
 var InsertTableGrid = ({
   editor,
@@ -7869,14 +8283,14 @@ var InsertTableGrid = ({
   onInsert
 }) => {
   const table = useTableMenu(editor);
-  const [hover, setHover] = (0, import_react58.useState)(null);
+  const [hover, setHover] = (0, import_react60.useState)(null);
   const status = table.actions.insertTable;
   const disabled = !editor || !status.enabled;
   const insert = (size) => {
     if (table.run("insertTable", { ...size, withHeaderRow })) onInsert?.(size);
     setHover(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       className,
@@ -7886,7 +8300,7 @@ var InsertTableGrid = ({
       "data-insert-table-grid": "",
       onMouseLeave: () => setHover(null),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "div",
           {
             role: "grid",
@@ -7895,7 +8309,7 @@ var InsertTableGrid = ({
             children: Array.from({ length: rows * cols }, (_, i) => {
               const size = { rows: Math.floor(i / cols) + 1, cols: i % cols + 1 };
               const active = !!hover && size.rows <= hover.rows && size.cols <= hover.cols;
-              return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "button",
                 {
                   type: "button",
@@ -7915,7 +8329,7 @@ var InsertTableGrid = ({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { "aria-live": "polite", "data-testid": "insert-table-size", children: disabled ? status.reason : hover ? `${hover.rows} \xD7 ${hover.cols}` : "Insert table" })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { "aria-live": "polite", "data-testid": "insert-table-size", children: disabled ? status.reason : hover ? `${hover.rows} \xD7 ${hover.cols}` : "Insert table" })
       ]
     }
   );
@@ -7923,31 +8337,31 @@ var InsertTableGrid = ({
 
 // src/tables/TableBubbleMenu.tsx
 var import_editor20 = require("@pixerate/editor");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var TableBubbleMenu = ({
   editor,
   children,
   toolbarProps,
   pluginKey = "tableBubbleMenu",
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BubbleMenu, { editor, pluginKey, shouldShow: import_editor20.shouldShowTableBubbleMenu, ...rest, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableToolbar, { editor, ...toolbarProps }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(BubbleMenu, { editor, pluginKey, shouldShow: import_editor20.shouldShowTableBubbleMenu, ...rest, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TableToolbar, { editor, ...toolbarProps }) });
 
 // src/chart-node/ChartNodeView.tsx
 var import_client = require("react-dom/client");
 
 // src/chart/ChartCanvas.tsx
-var import_react60 = require("react");
+var import_react62 = require("react");
 var import_chart2 = require("@pixerate/editor/chart");
 
 // src/chart/useChartEditor.ts
-var import_react59 = require("react");
+var import_react61 = require("react");
 var import_chart = require("@pixerate/editor/chart");
 function useChartState(controller) {
-  return (0, import_react59.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  return (0, import_react61.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
 }
 
 // src/chart/ChartCanvas.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function renderChartMark(mark, fontFamily, interactive) {
   const common = {
     "data-role": mark.role,
@@ -7959,9 +8373,9 @@ function renderChartMark(mark, fontFamily, interactive) {
   };
   switch (mark.kind) {
     case "rect":
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("rect", { ...common, x: mark.x, y: mark.y, width: mark.width, height: mark.height, rx: mark.radius, style: { fill: mark.fill, stroke: mark.stroke, strokeWidth: mark.strokeWidth } }, mark.key);
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { ...common, x: mark.x, y: mark.y, width: mark.width, height: mark.height, rx: mark.radius, style: { fill: mark.fill, stroke: mark.stroke, strokeWidth: mark.strokeWidth } }, mark.key);
     case "path":
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "path",
         {
           ...common,
@@ -7974,11 +8388,11 @@ function renderChartMark(mark, fontFamily, interactive) {
         mark.key
       );
     case "circle":
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, stroke: mark.stroke, strokeWidth: mark.strokeWidth } }, mark.key);
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, stroke: mark.stroke, strokeWidth: mark.strokeWidth } }, mark.key);
     case "line":
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("line", { ...common, x1: mark.x1, y1: mark.y1, x2: mark.x2, y2: mark.y2, strokeDasharray: mark.dash, style: { stroke: mark.stroke, strokeWidth: mark.strokeWidth } }, mark.key);
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("line", { ...common, x1: mark.x1, y1: mark.y1, x2: mark.x2, y2: mark.y2, strokeDasharray: mark.dash, style: { stroke: mark.stroke, strokeWidth: mark.strokeWidth } }, mark.key);
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "text",
         {
           ...common,
@@ -7995,23 +8409,23 @@ function renderChartMark(mark, fontFamily, interactive) {
   }
 }
 function ChartPresenceLayer({ presence }) {
-  const { actors } = (0, import_react60.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("g", { "data-chart-presence": "", pointerEvents: "none", children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("g", { transform: `translate(${a.x} ${a.y})`, "data-actor": a.id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 }, transform: a.pressed ? "scale(0.9)" : void 0 }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("g", { transform: "translate(13 16)", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("rect", { x: 0, y: 0, rx: 4, height: 18, width: Math.max(28, (a.message ?? a.name).length * 6.4 + 12), style: { fill: a.color } }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("text", { x: 6, y: 9, dominantBaseline: "central", style: { fill: "#ffffff", fontSize: 11, fontWeight: 600, fontFamily: "inherit" }, children: a.message ?? a.name })
+  const { actors } = (0, import_react62.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("g", { "data-chart-presence": "", pointerEvents: "none", children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("g", { transform: `translate(${a.x} ${a.y})`, "data-actor": a.id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 }, transform: a.pressed ? "scale(0.9)" : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("g", { transform: "translate(13 16)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { x: 0, y: 0, rx: 4, height: 18, width: Math.max(28, (a.message ?? a.name).length * 6.4 + 12), style: { fill: a.color } }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("text", { x: 6, y: 9, dominantBaseline: "central", style: { fill: "#ffffff", fontSize: 11, fontWeight: 600, fontFamily: "inherit" }, children: a.message ?? a.name })
     ] })
   ] }, a.id)) });
 }
 function ChartCanvas({ controller, width = 640, height = 400, responsive = true, theme, editable = true, measureText, emptyMessage, className, presence, sceneRef }) {
   const state = useChartState(controller);
-  const wrapper = (0, import_react60.useRef)(null);
-  const svg = (0, import_react60.useRef)(null);
-  const drag = (0, import_react60.useRef)(null);
-  const [measured, setMeasured] = (0, import_react60.useState)(null);
-  const [frozen, setFrozen] = (0, import_react60.useState)(null);
-  (0, import_react60.useEffect)(() => {
+  const wrapper = (0, import_react62.useRef)(null);
+  const svg = (0, import_react62.useRef)(null);
+  const drag = (0, import_react62.useRef)(null);
+  const [measured, setMeasured] = (0, import_react62.useState)(null);
+  const [frozen, setFrozen] = (0, import_react62.useState)(null);
+  (0, import_react62.useEffect)(() => {
     const el = wrapper.current;
     if (!responsive || !el || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(([entry]) => {
@@ -8022,8 +8436,8 @@ function ChartCanvas({ controller, width = 640, height = 400, responsive = true,
     return () => observer.disconnect();
   }, [responsive]);
   const sceneWidth = responsive && measured || width;
-  const fullTheme = (0, import_react60.useMemo)(() => ({ ...import_chart2.CSS_VARIABLE_CHART_THEME, ...theme }), [theme]);
-  const scene = (0, import_react60.useMemo)(
+  const fullTheme = (0, import_react62.useMemo)(() => ({ ...import_chart2.CSS_VARIABLE_CHART_THEME, ...theme }), [theme]);
+  const scene = (0, import_react62.useMemo)(
     () => (0, import_chart2.layoutChart)(state.spec, {
       width: sceneWidth,
       height,
@@ -8039,8 +8453,8 @@ function ChartCanvas({ controller, width = 640, height = 400, responsive = true,
     [state.spec, state.selection, sceneWidth, height, fullTheme, editable, measureText, emptyMessage, frozen]
   );
   if (sceneRef) sceneRef.current = scene;
-  const byKey = (0, import_react60.useMemo)(() => new Map(scene.marks.map((m) => [m.key, m])), [scene]);
-  (0, import_react60.useEffect)(() => () => drag.current?.end(), []);
+  const byKey = (0, import_react62.useMemo)(() => new Map(scene.marks.map((m) => [m.key, m])), [scene]);
+  (0, import_react62.useEffect)(() => () => drag.current?.end(), []);
   const scenePoint = (e) => (0, import_chart2.chartClientToScene)(scene, svg.current.getBoundingClientRect(), e.clientX, e.clientY);
   const onPointerDown = (e) => {
     if (!editable || e.button !== 0) return;
@@ -8073,7 +8487,7 @@ function ChartCanvas({ controller, width = 640, height = 400, responsive = true,
     if (editable && (0, import_chart2.handleChartKey)(controller, scene, e)) e.preventDefault();
   };
   const label = state.spec.title || "Chart";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref: wrapper, className: `w-full ${className ?? ""}`, "data-chart-canvas": "", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref: wrapper, className: `w-full ${className ?? ""}`, "data-chart-canvas": "", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "svg",
     {
       ref: svg,
@@ -8091,14 +8505,14 @@ function ChartCanvas({ controller, width = 640, height = 400, responsive = true,
       onKeyDown,
       children: [
         scene.marks.map((m) => renderChartMark(m, scene.theme.fontFamily, editable)),
-        presence && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChartPresenceLayer, { presence })
+        presence && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartPresenceLayer, { presence })
       ]
     }
   ) });
 }
 
 // src/chart/ChartDataGrid.tsx
-var import_react61 = require("react");
+var import_react63 = require("react");
 var import_chart3 = require("@pixerate/editor/chart");
 
 // src/chart/styles.ts
@@ -8111,11 +8525,11 @@ var chartSectionClass = "space-y-2 border-b border-border pb-3 last:border-b-0";
 var chartCellClass = "h-7 w-full min-w-[4.5rem] bg-transparent px-2 text-right text-xs tabular-nums text-foreground focus-visible:bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary";
 
 // src/chart/ChartDataGrid.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function ChartCommitInput({ value, onCommit, onKeyDown, onBlur, ...rest }) {
-  const [draft, setDraft] = (0, import_react61.useState)(value);
-  const typing = (0, import_react61.useRef)(false);
-  (0, import_react61.useEffect)(() => {
+  const [draft, setDraft] = (0, import_react63.useState)(value);
+  const typing = (0, import_react63.useRef)(false);
+  (0, import_react63.useEffect)(() => {
     if (!typing.current) setDraft(value);
   }, [value]);
   const commit = () => {
@@ -8124,7 +8538,7 @@ function ChartCommitInput({ value, onCommit, onKeyDown, onBlur, ...rest }) {
     if (draft === value) return;
     if (onCommit(draft) === false) setDraft(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "input",
     {
       ...rest,
@@ -8159,15 +8573,15 @@ function ChartDataGrid({ controller, categoryHeader = "Category", readOnly = fal
     e.preventDefault();
     controller.pasteCells(row, column, text);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: `overflow-auto rounded-md border border-border ${className ?? ""}`, "data-chart-grid": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("table", { className: "w-full border-collapse text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("thead", { className: "bg-muted/50", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("th", { className: "border-b border-r border-border px-2 py-1 text-left font-medium text-muted-foreground", children: categoryHeader }),
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: `overflow-auto rounded-md border border-border ${className ?? ""}`, "data-chart-grid": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("table", { className: "w-full border-collapse text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("thead", { className: "bg-muted/50", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { className: "border-b border-r border-border px-2 py-1 text-left font-medium text-muted-foreground", children: categoryHeader }),
         spec.series.map((s, si) => {
           const color = (0, import_chart3.chartSeriesColor)(spec, si);
           const selected = selection?.kind === "series" && selection.seriesId === s.id;
-          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("th", { "data-series-id": s.id, className: `border-b border-r border-border px-1 py-1 font-medium ${selected ? "bg-primary/10" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { "data-series-id": s.id, className: `border-b border-r border-border px-1 py-1 font-medium ${selected ? "bg-primary/10" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               "input",
               {
                 type: "color",
@@ -8180,7 +8594,7 @@ function ChartDataGrid({ controller, categoryHeader = "Category", readOnly = fal
                 className: "h-5 w-5 shrink-0 cursor-pointer rounded border-0 bg-transparent p-0"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               ChartCommitInput,
               {
                 value: s.name,
@@ -8190,8 +8604,8 @@ function ChartDataGrid({ controller, categoryHeader = "Category", readOnly = fal
                 className: `${chartInputClass} h-6 min-w-[5rem] border-transparent bg-transparent font-medium ${s.hidden ? "text-muted-foreground line-through" : ""}`
               }
             ),
-            !readOnly && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            !readOnly && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 "button",
                 {
                   type: "button",
@@ -8204,16 +8618,16 @@ function ChartDataGrid({ controller, categoryHeader = "Category", readOnly = fal
                   children: s.hidden ? "\u25CB" : "\u25CF"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", className: chartIconButtonClass, title: "Delete series", "aria-label": `Delete ${s.name}`, "data-action": "remove-series", onClick: () => controller.removeSeries(s.id), children: "\xD7" })
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", className: chartIconButtonClass, title: "Delete series", "aria-label": `Delete ${s.name}`, "data-action": "remove-series", onClick: () => controller.removeSeries(s.id), children: "\xD7" })
             ] })
           ] }) }, s.id);
         }),
-        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("th", { className: "w-8 border-b border-border px-1", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", className: chartIconButtonClass, title: "Add series", "aria-label": "Add series", "data-action": "add-series", onClick: () => controller.addSeries(), children: "+" }) })
+        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { className: "w-8 border-b border-border px-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", className: chartIconButtonClass, title: "Add series", "aria-label": "Add series", "data-action": "add-series", onClick: () => controller.addSeries(), children: "+" }) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tbody", { children: spec.categories.map((category, i) => {
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tbody", { children: spec.categories.map((category, i) => {
         const rowSelected = selection?.kind === "category" && selection.index === i;
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { "data-category-index": i, className: rowSelected ? "bg-primary/10" : void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("th", { className: "border-b border-r border-border p-0 text-left font-normal", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("tr", { "data-category-index": i, className: rowSelected ? "bg-primary/10" : void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { className: "border-b border-r border-border p-0 text-left font-normal", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             ChartCommitInput,
             {
               value: category,
@@ -8227,7 +8641,7 @@ function ChartDataGrid({ controller, categoryHeader = "Category", readOnly = fal
           spec.series.map((s) => {
             const value = s.values[i];
             const selected = selection?.kind === "point" && selection.seriesId === s.id && selection.index === i;
-            return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: `border-b border-r border-border p-0 ${selected ? "bg-primary/10" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: `border-b border-r border-border p-0 ${selected ? "bg-primary/10" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               ChartCommitInput,
               {
                 value: value === null || value === void 0 ? "" : String(value),
@@ -8242,38 +8656,38 @@ function ChartDataGrid({ controller, categoryHeader = "Category", readOnly = fal
               }
             ) }, s.id);
           }),
-          !readOnly && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "border-b border-border px-1", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", className: chartIconButtonClass, title: "Delete category", "aria-label": `Delete ${category}`, "data-action": "remove-category", onClick: () => controller.removeCategory(i), children: "\xD7" }) })
+          !readOnly && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: "border-b border-border px-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", className: chartIconButtonClass, title: "Delete category", "aria-label": `Delete ${category}`, "data-action": "remove-category", onClick: () => controller.removeCategory(i), children: "\xD7" }) })
         ] }, i);
       }) })
     ] }),
-    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", className: `${chartButtonClass} h-6 border-dashed`, "data-action": "add-category", onClick: () => controller.addCategory(), children: "+ Add category" }) })
+    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", className: `${chartButtonClass} h-6 border-dashed`, "data-action": "add-category", onClick: () => controller.addCategory(), children: "+ Add category" }) })
   ] });
 }
 
 // src/chart/ChartInspector.tsx
-var import_react62 = require("react");
+var import_react64 = require("react");
 var import_chart4 = require("@pixerate/editor/chart");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 function Field({ label, htmlFor, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { htmlFor, className: `${chartLabelClass} w-20 shrink-0`, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "min-w-0 flex-1", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { htmlFor, className: `${chartLabelClass} w-20 shrink-0`, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "min-w-0 flex-1", children })
   ] });
 }
 function Toggle({ label, checked, onChange, name }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { className: "flex cursor-pointer items-center gap-2 text-xs text-foreground", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("input", { type: "checkbox", className: "h-3.5 w-3.5 accent-primary", checked, "data-option": name, onChange: (e) => onChange(e.currentTarget.checked) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("label", { className: "flex cursor-pointer items-center gap-2 text-xs text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("input", { type: "checkbox", className: "h-3.5 w-3.5 accent-primary", checked, "data-option": name, onChange: (e) => onChange(e.currentTarget.checked) }),
     label
   ] });
 }
 function Select({ id, value, options, onChange, name, labels }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("select", { id, className: chartInputClass, value, "data-option": name, onChange: (e) => onChange(e.currentTarget.value), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: o, children: labels?.[o] ?? cap(o) }, o)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("select", { id, className: chartInputClass, value, "data-option": name, onChange: (e) => onChange(e.currentTarget.value), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: o, children: labels?.[o] ?? cap(o) }, o)) });
 }
 function AxisSection({ controller, axis, value, idBase, horizontal, numeric = false, scales = false }) {
   const set = (patch) => controller.setAxis(axis, patch);
   const setFormat = (patch) => set({ format: { ...value.format, ...patch } });
-  const bound = (key2) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  const bound = (key2) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     ChartCommitInput,
     {
       id: `${idBase}-${axis}-${key2}`,
@@ -8288,26 +8702,26 @@ function AxisSection({ controller, axis, value, idBase, horizontal, numeric = fa
   const name = axis === "x" ? numeric ? "X axis" : "Category axis" : axis === "y" ? "Value axis" : "Secondary axis";
   const valueAxis = axis !== "x" || numeric;
   const key = axis === "y2" ? "yAxis2" : `${axis}Axis`;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: chartSectionClass, "data-section": `axis-${axis}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("h4", { className: "text-xs font-semibold text-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: chartSectionClass, "data-section": `axis-${axis}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("h4", { className: "text-xs font-semibold text-foreground", children: [
         name,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "ml-1 font-normal text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "ml-1 font-normal text-muted-foreground", children: [
           "(",
           axis === "x" ? horizontal ? "left" : "bottom" : axis === "y2" ? horizontal ? "top" : "right" : horizontal ? "bottom" : "left",
           ")"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Show", name: `${axis}Axis.show`, checked: value.show, onChange: (show) => set({ show }) })
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Show", name: `${axis}Axis.show`, checked: value.show, onChange: (show) => set({ show }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Title", htmlFor: `${idBase}-${axis}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartCommitInput, { id: `${idBase}-${axis}-title`, value: value.title, "data-option": `${axis}Axis.title`, className: chartInputClass, onCommit: (title) => void set({ title }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Grid lines", name: `${key}.gridlines`, checked: value.gridlines, onChange: (gridlines) => set({ gridlines }) }),
-      axis === "x" && !numeric && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Dates", name: "xAxis.kind", checked: value.kind === "date", onChange: (dates) => set({ kind: dates ? "date" : void 0 }) }),
-      scales && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Reverse", name: `${key}.reverse`, checked: !!value.reverse, onChange: (reverse) => set({ reverse }) }),
-      scales && valueAxis && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Log scale", name: `${key}.scale`, checked: value.scale === "log", onChange: (log) => set({ scale: log ? "log" : "linear" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Title", htmlFor: `${idBase}-${axis}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartCommitInput, { id: `${idBase}-${axis}-title`, value: value.title, "data-option": `${axis}Axis.title`, className: chartInputClass, onCommit: (title) => void set({ title }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Grid lines", name: `${key}.gridlines`, checked: value.gridlines, onChange: (gridlines) => set({ gridlines }) }),
+      axis === "x" && !numeric && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Dates", name: "xAxis.kind", checked: value.kind === "date", onChange: (dates) => set({ kind: dates ? "date" : void 0 }) }),
+      scales && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Reverse", name: `${key}.reverse`, checked: !!value.reverse, onChange: (reverse) => set({ reverse }) }),
+      scales && valueAxis && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Log scale", name: `${key}.scale`, checked: value.scale === "log", onChange: (log) => set({ scale: log ? "log" : "linear" }) })
     ] }),
-    scales && valueAxis && value.scale === "log" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Log base", htmlFor: `${idBase}-${axis}-log-base`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    scales && valueAxis && value.scale === "log" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Log base", htmlFor: `${idBase}-${axis}-log-base`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       ChartCommitInput,
       {
         id: `${idBase}-${axis}-log-base`,
@@ -8318,7 +8732,7 @@ function AxisSection({ controller, axis, value, idBase, horizontal, numeric = fa
         onCommit: (text) => set({ logBase: text.trim() === "" ? void 0 : Number(text) }).ok
       }
     ) }),
-    valueAxis && value.scale !== "log" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Step", htmlFor: `${idBase}-${axis}-step`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    valueAxis && value.scale !== "log" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Step", htmlFor: `${idBase}-${axis}-step`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       ChartCommitInput,
       {
         id: `${idBase}-${axis}-step`,
@@ -8330,14 +8744,14 @@ function AxisSection({ controller, axis, value, idBase, horizontal, numeric = fa
         onCommit: (text) => set({ step: text.trim() === "" ? null : Number(text) }).ok
       }
     ) }),
-    valueAxis && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Min / max", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex gap-1", children: [
+    valueAxis && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Min / max", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-1", children: [
         bound("min"),
         bound("max")
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Format", htmlFor: `${idBase}-${axis}-format`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Select, { id: `${idBase}-${axis}-format`, name: `${key}.format.style`, value: value.format.style ?? "number", options: import_chart4.CHART_NUMBER_STYLES, onChange: (style) => setFormat({ style }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Format", htmlFor: `${idBase}-${axis}-format`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Select, { id: `${idBase}-${axis}-format`, name: `${key}.format.style`, value: value.format.style ?? "number", options: import_chart4.CHART_NUMBER_STYLES, onChange: (style) => setFormat({ style }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           ChartCommitInput,
           {
             value: value.format.decimals === void 0 ? "" : String(value.format.decimals),
@@ -8356,8 +8770,8 @@ function AxisSection({ controller, axis, value, idBase, horizontal, numeric = fa
           }
         )
       ] }) }),
-      value.format.style === "currency" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Currency", htmlFor: `${idBase}-${axis}-currency`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartCommitInput, { id: `${idBase}-${axis}-currency`, value: value.format.currency ?? "USD", "data-option": `${key}.format.currency`, className: chartInputClass, onCommit: (currency) => void setFormat({ currency: currency.toUpperCase() }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Code", htmlFor: `${idBase}-${axis}-code`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      value.format.style === "currency" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Currency", htmlFor: `${idBase}-${axis}-currency`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartCommitInput, { id: `${idBase}-${axis}-currency`, value: value.format.currency ?? "USD", "data-option": `${key}.format.currency`, className: chartInputClass, onCommit: (currency) => void setFormat({ currency: currency.toUpperCase() }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Code", htmlFor: `${idBase}-${axis}-code`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         ChartCommitInput,
         {
           id: `${idBase}-${axis}-code`,
@@ -8383,15 +8797,15 @@ function ErrorBarFields({ controller, series, which, idBase }) {
   const values = which === "xErrorBars" ? series.x ?? [] : series.values;
   const set = (next) => controller.updateSeries(series.id, { [which]: next });
   const patch = (p) => bars && set({ ...bars, ...p });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-1.5", "data-section": which === "errorBars" ? "error-bars" : "x-error-bars", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: which === "errorBars" ? "Error bars" : "X error bars", htmlFor: `${id}-type`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("select", { id: `${id}-type`, className: chartInputClass, value: bars?.type ?? "", "data-option": `${key}.type`, onChange: (e) => set((0, import_chart4.chartErrorBarsOfType)(e.currentTarget.value, bars, values)), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: "None" }),
-      import_chart4.CHART_ERROR_BAR_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: t, children: import_chart4.CHART_ERROR_BAR_LABELS[t] }, t))
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-1.5", "data-section": which === "errorBars" ? "error-bars" : "x-error-bars", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: which === "errorBars" ? "Error bars" : "X error bars", htmlFor: `${id}-type`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("select", { id: `${id}-type`, className: chartInputClass, value: bars?.type ?? "", "data-option": `${key}.type`, onChange: (e) => set((0, import_chart4.chartErrorBarsOfType)(e.currentTarget.value, bars, values)), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: "", children: "None" }),
+      import_chart4.CHART_ERROR_BAR_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: t, children: import_chart4.CHART_ERROR_BAR_LABELS[t] }, t))
     ] }) }),
-    bars && (bars.type === "fixed" || bars.type === "percent" || bars.type === "stddev") && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: bars.type === "percent" ? "Percent" : bars.type === "stddev" ? "Deviations" : "Amount", htmlFor: `${id}-value`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartCommitInput, { id: `${id}-value`, value: String(bars.value ?? (0, import_chart4.defaultChartErrorBarValue)(bars.type)), inputMode: "decimal", "data-option": `${key}.value`, className: chartInputClass, onCommit: (text) => !!patch({ value: text.trim() === "" ? void 0 : Number(text) })?.ok }) }),
-    bars?.type === "custom" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Plus", htmlFor: `${id}-plus`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartCommitInput, { id: `${id}-plus`, value: (0, import_chart4.formatChartAmountList)(bars.plus), placeholder: "1, 2, -, 0.5", "data-option": `${key}.plus`, className: chartInputClass, onCommit: (text) => !!patch({ plus: (0, import_chart4.parseChartAmountList)(text) })?.ok }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Minus", htmlFor: `${id}-minus`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    bars && (bars.type === "fixed" || bars.type === "percent" || bars.type === "stddev") && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: bars.type === "percent" ? "Percent" : bars.type === "stddev" ? "Deviations" : "Amount", htmlFor: `${id}-value`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartCommitInput, { id: `${id}-value`, value: String(bars.value ?? (0, import_chart4.defaultChartErrorBarValue)(bars.type)), inputMode: "decimal", "data-option": `${key}.value`, className: chartInputClass, onCommit: (text) => !!patch({ value: text.trim() === "" ? void 0 : Number(text) })?.ok }) }),
+    bars?.type === "custom" && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Plus", htmlFor: `${id}-plus`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartCommitInput, { id: `${id}-plus`, value: (0, import_chart4.formatChartAmountList)(bars.plus), placeholder: "1, 2, -, 0.5", "data-option": `${key}.plus`, className: chartInputClass, onCommit: (text) => !!patch({ plus: (0, import_chart4.parseChartAmountList)(text) })?.ok }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Minus", htmlFor: `${id}-minus`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         ChartCommitInput,
         {
           id: `${id}-minus`,
@@ -8408,15 +8822,15 @@ function ErrorBarFields({ controller, series, which, idBase }) {
         }
       ) })
     ] }),
-    bars && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("select", { className: `${chartInputClass} flex-1`, "aria-label": "Error bar direction", value: bars.direction ?? "both", "data-option": `${key}.direction`, onChange: (e) => patch({ direction: e.currentTarget.value }), children: import_chart4.CHART_ERROR_BAR_DIRECTIONS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: d, children: d === "both" ? "Both ways" : d === "plus" ? "Plus only" : "Minus only" }, d)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Caps", name: `${key}.cap`, checked: bars.cap !== false, onChange: (cap2) => patch({ cap: cap2 }) })
+    bars && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("select", { className: `${chartInputClass} flex-1`, "aria-label": "Error bar direction", value: bars.direction ?? "both", "data-option": `${key}.direction`, onChange: (e) => patch({ direction: e.currentTarget.value }), children: import_chart4.CHART_ERROR_BAR_DIRECTIONS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: d, children: d === "both" ? "Both ways" : d === "plus" ? "Plus only" : "Minus only" }, d)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Caps", name: `${key}.cap`, checked: bars.cap !== false, onChange: (cap2) => patch({ cap: cap2 }) })
     ] })
   ] });
 }
 function ChartInspector({ controller, sections, className }) {
   const { spec, selectedSeries } = useChartState(controller);
-  const idBase = (0, import_react62.useId)();
+  const idBase = (0, import_react64.useId)();
   const show = (section) => !sections || sections.includes(section);
   const cartesian = (0, import_chart4.isCartesianChart)(spec.type);
   const family = (0, import_chart4.chartFamily)(spec);
@@ -8428,29 +8842,29 @@ function ChartInspector({ controller, sections, className }) {
   const hasLines = cartesian && types.some((t) => t === "line" || t === "area");
   const seriesIndex = selectedSeries ? spec.series.findIndex((s) => s.id === selectedSeries.id) : -1;
   const scales = family === "cartesian" || family === "xy";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: `space-y-3 text-xs ${className ?? ""}`, "data-chart-inspector": "", children: [
-    show("type") && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: chartSectionClass, "data-section": "type", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "grid grid-cols-3 gap-0.5 rounded-md bg-muted p-0.5", role: "radiogroup", "aria-label": "Chart type", children: import_chart4.CHART_TYPES.map((type) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", role: "radio", "aria-checked": spec.type === type, "data-chart-type": type, className: chartSegmentClass(spec.type === type), onClick: () => controller.setType(type), children: import_chart4.CHART_TYPE_LABELS[type] }, type)) }) }),
-    show("style") && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: chartSectionClass, "data-section": "style", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Layout", htmlFor: `${idBase}-layout`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("select", { id: `${idBase}-layout`, className: chartInputClass, value: "", "data-option": "preset.layout", onChange: (e) => e.currentTarget.value && controller.applyPreset({ layout: e.currentTarget.value }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: "Quick layout\u2026" }),
-        import_chart4.CHART_LAYOUT_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: p.id, title: p.description, children: p.label }, p.id))
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `space-y-3 text-xs ${className ?? ""}`, "data-chart-inspector": "", children: [
+    show("type") && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: chartSectionClass, "data-section": "type", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "grid grid-cols-3 gap-0.5 rounded-md bg-muted p-0.5", role: "radiogroup", "aria-label": "Chart type", children: import_chart4.CHART_TYPES.map((type) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", role: "radio", "aria-checked": spec.type === type, "data-chart-type": type, className: chartSegmentClass(spec.type === type), onClick: () => controller.setType(type), children: import_chart4.CHART_TYPE_LABELS[type] }, type)) }) }),
+    show("style") && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: chartSectionClass, "data-section": "style", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Layout", htmlFor: `${idBase}-layout`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("select", { id: `${idBase}-layout`, className: chartInputClass, value: "", "data-option": "preset.layout", onChange: (e) => e.currentTarget.value && controller.applyPreset({ layout: e.currentTarget.value }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: "", children: "Quick layout\u2026" }),
+        import_chart4.CHART_LAYOUT_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: p.id, title: p.description, children: p.label }, p.id))
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Colours", htmlFor: `${idBase}-colors`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("select", { id: `${idBase}-colors`, className: chartInputClass, value: import_chart4.CHART_COLOR_SCHEMES.find((c) => c.palette.join() === spec.palette.join())?.id ?? "", "data-option": "preset.colors", onChange: (e) => e.currentTarget.value && controller.applyPreset({ colors: e.currentTarget.value }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: "Custom" }),
-        import_chart4.CHART_COLOR_SCHEMES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: c.id, title: c.description, children: c.label }, c.id))
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Colours", htmlFor: `${idBase}-colors`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("select", { id: `${idBase}-colors`, className: chartInputClass, value: import_chart4.CHART_COLOR_SCHEMES.find((c) => c.palette.join() === spec.palette.join())?.id ?? "", "data-option": "preset.colors", onChange: (e) => e.currentTarget.value && controller.applyPreset({ colors: e.currentTarget.value }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: "", children: "Custom" }),
+        import_chart4.CHART_COLOR_SCHEMES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: c.id, title: c.description, children: c.label }, c.id))
       ] }) }),
-      !colorCheck.ok && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-[11px] leading-snug text-amber-600 dark:text-amber-400", "data-chart-color-warning": "", children: colorCheck.issues[0] }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", className: chartButtonClass, "data-action": "transpose", onClick: () => controller.transpose(), children: "Switch rows and columns" })
+      !colorCheck.ok && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-[11px] leading-snug text-amber-600 dark:text-amber-400", "data-chart-color-warning": "", children: colorCheck.issues[0] }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: chartButtonClass, "data-action": "transpose", onClick: () => controller.transpose(), children: "Switch rows and columns" })
     ] }),
-    show("titles") && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: chartSectionClass, "data-section": "titles", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Title", htmlFor: `${idBase}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartCommitInput, { id: `${idBase}-title`, value: spec.title, "data-option": "title", className: chartInputClass, onCommit: (title) => void controller.setTitle(title) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Subtitle", htmlFor: `${idBase}-subtitle`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartCommitInput, { id: `${idBase}-subtitle`, value: spec.subtitle, "data-option": "subtitle", className: chartInputClass, onCommit: (subtitle) => void controller.setSubtitle(subtitle) }) })
+    show("titles") && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: chartSectionClass, "data-section": "titles", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Title", htmlFor: `${idBase}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartCommitInput, { id: `${idBase}-title`, value: spec.title, "data-option": "title", className: chartInputClass, onCommit: (title) => void controller.setTitle(title) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Subtitle", htmlFor: `${idBase}-subtitle`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartCommitInput, { id: `${idBase}-subtitle`, value: spec.subtitle, "data-option": "subtitle", className: chartInputClass, onCommit: (subtitle) => void controller.setSubtitle(subtitle) }) })
     ] }),
-    show("options") && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: chartSectionClass, "data-section": "options", children: [
-      cartesian && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Stacking", htmlFor: `${idBase}-stacking`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Select, { id: `${idBase}-stacking`, name: "stacking", value: spec.stacking, options: import_chart4.CHART_STACKINGS, labels: { none: "None", stacked: "Stacked", percent: "100%" }, onChange: (stacking) => controller.update({ stacking }) }) }),
-      hasBars && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Bars", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex gap-0.5 rounded-md bg-muted p-0.5", children: ["vertical", "horizontal"].map((o) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", "aria-pressed": spec.orientation === o, "data-option": `orientation.${o}`, className: chartSegmentClass(spec.orientation === o), onClick: () => controller.update({ orientation: o }), children: cap(o) }, o)) }) }),
-      hasLines && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Lines", htmlFor: `${idBase}-curve`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Select, { id: `${idBase}-curve`, name: "curve", value: spec.curve, options: import_chart4.CHART_CURVES, onChange: (curve) => controller.update({ curve }) }) }),
-      spec.type === "donut" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Hole", htmlFor: `${idBase}-hole`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    show("options") && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: chartSectionClass, "data-section": "options", children: [
+      cartesian && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Stacking", htmlFor: `${idBase}-stacking`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Select, { id: `${idBase}-stacking`, name: "stacking", value: spec.stacking, options: import_chart4.CHART_STACKINGS, labels: { none: "None", stacked: "Stacked", percent: "100%" }, onChange: (stacking) => controller.update({ stacking }) }) }),
+      hasBars && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Bars", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex gap-0.5 rounded-md bg-muted p-0.5", children: ["vertical", "horizontal"].map((o) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", "aria-pressed": spec.orientation === o, "data-option": `orientation.${o}`, className: chartSegmentClass(spec.orientation === o), onClick: () => controller.update({ orientation: o }), children: cap(o) }, o)) }) }),
+      hasLines && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Lines", htmlFor: `${idBase}-curve`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Select, { id: `${idBase}-curve`, name: "curve", value: spec.curve, options: import_chart4.CHART_CURVES, onChange: (curve) => controller.update({ curve }) }) }),
+      spec.type === "donut" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Hole", htmlFor: `${idBase}-hole`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "input",
         {
           id: `${idBase}-hole`,
@@ -8466,7 +8880,7 @@ function ChartInspector({ controller, sections, className }) {
           onChange: (e) => controller.update({ innerRadius: Number(e.currentTarget.value) })
         }
       ) }),
-      hasBars && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Spacing", htmlFor: `${idBase}-gap`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      hasBars && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Spacing", htmlFor: `${idBase}-gap`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "input",
         {
           id: `${idBase}-gap`,
@@ -8482,31 +8896,31 @@ function ChartInspector({ controller, sections, className }) {
           onChange: (e) => controller.update({ gapWidth: Number(e.currentTarget.value) })
         }
       ) }),
-      spec.dataLabels && hasBars && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Labels", htmlFor: `${idBase}-label-position`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Select, { id: `${idBase}-label-position`, name: "labelPosition", value: spec.labelPosition, options: import_chart4.CHART_LABEL_POSITIONS, onChange: (labelPosition) => controller.update({ labelPosition }) }) }),
-      spec.type === "histogram" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Bins", htmlFor: `${idBase}-bins`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartCommitInput, { id: `${idBase}-bins`, value: spec.bins === null ? "" : String(spec.bins), placeholder: "Auto", inputMode: "numeric", "data-option": "bins", className: chartInputClass, onCommit: (text) => controller.update({ bins: text.trim() === "" ? null : Number(text) }).ok }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [
-        spec.type === "waterfall" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Total bar", name: "showTotal", checked: spec.showTotal, onChange: (showTotal) => controller.update({ showTotal }) }),
-        hasLines && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Points", name: "points", checked: spec.points, onChange: (points) => controller.update({ points }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Data labels", name: "dataLabels", checked: spec.dataLabels, onChange: (dataLabels) => controller.update({ dataLabels }) })
+      spec.dataLabels && hasBars && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Labels", htmlFor: `${idBase}-label-position`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Select, { id: `${idBase}-label-position`, name: "labelPosition", value: spec.labelPosition, options: import_chart4.CHART_LABEL_POSITIONS, onChange: (labelPosition) => controller.update({ labelPosition }) }) }),
+      spec.type === "histogram" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Bins", htmlFor: `${idBase}-bins`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartCommitInput, { id: `${idBase}-bins`, value: spec.bins === null ? "" : String(spec.bins), placeholder: "Auto", inputMode: "numeric", "data-option": "bins", className: chartInputClass, onCommit: (text) => controller.update({ bins: text.trim() === "" ? null : Number(text) }).ok }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [
+        spec.type === "waterfall" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Total bar", name: "showTotal", checked: spec.showTotal, onChange: (showTotal) => controller.update({ showTotal }) }),
+        hasLines && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Points", name: "points", checked: spec.points, onChange: (points) => controller.update({ points }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Data labels", name: "dataLabels", checked: spec.dataLabels, onChange: (dataLabels) => controller.update({ dataLabels }) })
       ] })
     ] }),
-    show("legend") && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: chartSectionClass, "data-section": "legend", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "text-xs font-semibold text-foreground", children: "Legend" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Show", name: "legend.show", checked: spec.legend.show, onChange: (v) => controller.setLegend({ show: v }) })
+    show("legend") && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: chartSectionClass, "data-section": "legend", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h4", { className: "text-xs font-semibold text-foreground", children: "Legend" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Show", name: "legend.show", checked: spec.legend.show, onChange: (v) => controller.setLegend({ show: v }) })
       ] }),
-      spec.legend.show && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex gap-0.5 rounded-md bg-muted p-0.5", children: import_chart4.CHART_LEGEND_POSITIONS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", "aria-pressed": spec.legend.position === p, "data-option": `legend.${p}`, className: chartSegmentClass(spec.legend.position === p), onClick: () => controller.setLegend({ position: p }), children: cap(p) }, p)) })
+      spec.legend.show && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex gap-0.5 rounded-md bg-muted p-0.5", children: import_chart4.CHART_LEGEND_POSITIONS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", "aria-pressed": spec.legend.position === p, "data-option": `legend.${p}`, className: chartSegmentClass(spec.legend.position === p), onClick: () => controller.setLegend({ position: p }), children: cap(p) }, p)) })
     ] }),
-    show("axes") && hasAxes && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      family !== "box" && family !== "histogram" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AxisSection, { controller, axis: "x", value: spec.xAxis, idBase, horizontal: spec.orientation === "horizontal", numeric: family === "xy", scales }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AxisSection, { controller, axis: "y", value: spec.yAxis, idBase, horizontal: spec.orientation === "horizontal", scales }),
-      usesSecondary && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AxisSection, { controller, axis: "y2", value: spec.yAxis2, idBase, horizontal: spec.orientation === "horizontal", scales })
+    show("axes") && hasAxes && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      family !== "box" && family !== "histogram" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AxisSection, { controller, axis: "x", value: spec.xAxis, idBase, horizontal: spec.orientation === "horizontal", numeric: family === "xy", scales }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AxisSection, { controller, axis: "y", value: spec.yAxis, idBase, horizontal: spec.orientation === "horizontal", scales }),
+      usesSecondary && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AxisSection, { controller, axis: "y2", value: spec.yAxis2, idBase, horizontal: spec.orientation === "horizontal", scales })
     ] }),
-    show("series") && selectedSeries && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: chartSectionClass, "data-section": "series", "data-series-id": selectedSeries.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "text-xs font-semibold text-foreground", children: "Series" }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Name", htmlFor: `${idBase}-series-name`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartCommitInput, { id: `${idBase}-series-name`, value: selectedSeries.name, "data-option": "series.name", className: chartInputClass, onCommit: (name) => void controller.updateSeries(selectedSeries.id, { name }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Colour", htmlFor: `${idBase}-series-color`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    show("series") && selectedSeries && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: chartSectionClass, "data-section": "series", "data-series-id": selectedSeries.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h4", { className: "text-xs font-semibold text-foreground", children: "Series" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Name", htmlFor: `${idBase}-series-name`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartCommitInput, { id: `${idBase}-series-name`, value: selectedSeries.name, "data-option": "series.name", className: chartInputClass, onCommit: (name) => void controller.updateSeries(selectedSeries.id, { name }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Colour", htmlFor: `${idBase}-series-color`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "input",
           {
             id: `${idBase}-series-color`,
@@ -8519,9 +8933,9 @@ function ChartInspector({ controller, sections, className }) {
             onChange: (e) => controller.updateSeries(selectedSeries.id, { color: e.currentTarget.value })
           }
         ),
-        selectedSeries.color && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", className: chartButtonClass, "data-action": "reset-color", onClick: () => controller.updateSeries(selectedSeries.id, { color: null }), children: "Palette" })
+        selectedSeries.color && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: chartButtonClass, "data-action": "reset-color", onClick: () => controller.updateSeries(selectedSeries.id, { color: null }), children: "Palette" })
       ] }) }),
-      cartesian && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Draw as", htmlFor: `${idBase}-series-type`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      cartesian && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Draw as", htmlFor: `${idBase}-series-type`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "select",
         {
           id: `${idBase}-series-type`,
@@ -8530,12 +8944,12 @@ function ChartInspector({ controller, sections, className }) {
           "data-option": "series.type",
           onChange: (e) => controller.updateSeries(selectedSeries.id, { type: e.currentTarget.value || null }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: "Chart type" }),
-            import_chart4.CHART_SERIES_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: t, children: import_chart4.CHART_TYPE_LABELS[t] }, t))
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: "", children: "Chart type" }),
+            import_chart4.CHART_SERIES_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: t, children: import_chart4.CHART_TYPE_LABELS[t] }, t))
           ]
         }
       ) }),
-      (cartesian || family === "xy") && ["line", "area", "scatter"].includes((0, import_chart4.chartSeriesType)(spec, selectedSeries)) && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field, { label: "Marker", htmlFor: `${idBase}-series-marker`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      (cartesian || family === "xy") && ["line", "area", "scatter"].includes((0, import_chart4.chartSeriesType)(spec, selectedSeries)) && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field, { label: "Marker", htmlFor: `${idBase}-series-marker`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "select",
         {
           id: `${idBase}-series-marker`,
@@ -8544,20 +8958,20 @@ function ChartInspector({ controller, sections, className }) {
           "data-option": "series.marker",
           onChange: (e) => controller.updateSeries(selectedSeries.id, { marker: e.currentTarget.value || null }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: "Default" }),
-            import_chart4.CHART_MARKERS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: m, children: cap(m) }, m))
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: "", children: "Default" }),
+            import_chart4.CHART_MARKERS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: m, children: cap(m) }, m))
           ]
         }
       ) }),
-      scales && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ErrorBarFields, { controller, series: selectedSeries, which: "errorBars", idBase }),
-      family === "xy" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ErrorBarFields, { controller, series: selectedSeries, which: "xErrorBars", idBase }),
-      (0, import_chart4.chartSupportsTrendlines)(spec.type, spec.stacking) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-1", "data-section": "trendlines", children: [
-        (selectedSeries.trendlines ?? []).map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-1", "data-trendline": i, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "flex-1 truncate text-muted-foreground", children: (0, import_chart4.chartTrendlineName)(t, selectedSeries.name) }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "R\xB2", name: `trendline.${i}.showR2`, checked: !!t.showR2, onChange: (showR2) => controller.updateTrendline(selectedSeries.id, i, { showR2 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", className: chartButtonClass, "aria-label": "Delete trendline", "data-action": "trendline-delete", onClick: () => controller.removeTrendline(selectedSeries.id, i), children: "\xD7" })
+      scales && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ErrorBarFields, { controller, series: selectedSeries, which: "errorBars", idBase }),
+      family === "xy" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ErrorBarFields, { controller, series: selectedSeries, which: "xErrorBars", idBase }),
+      (0, import_chart4.chartSupportsTrendlines)(spec.type, spec.stacking) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-1", "data-section": "trendlines", children: [
+        (selectedSeries.trendlines ?? []).map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-1", "data-trendline": i, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex-1 truncate text-muted-foreground", children: (0, import_chart4.chartTrendlineName)(t, selectedSeries.name) }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "R\xB2", name: `trendline.${i}.showR2`, checked: !!t.showR2, onChange: (showR2) => controller.updateTrendline(selectedSeries.id, i, { showR2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: chartButtonClass, "aria-label": "Delete trendline", "data-action": "trendline-delete", onClick: () => controller.removeTrendline(selectedSeries.id, i), children: "\xD7" })
         ] }, i)),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           "select",
           {
             className: chartInputClass,
@@ -8566,32 +8980,32 @@ function ChartInspector({ controller, sections, className }) {
             "data-option": "trendline.add",
             onChange: (e) => e.currentTarget.value && controller.addTrendline(selectedSeries.id, { type: e.currentTarget.value }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: "Add trendline\u2026" }),
-              import_chart4.CHART_TRENDLINE_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: t, children: cap(t.replace("-", " ")) }, t))
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: "", children: "Add trendline\u2026" }),
+              import_chart4.CHART_TRENDLINE_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: t, children: cap(t.replace("-", " ")) }, t))
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Hidden", name: "series.hidden", checked: !!selectedSeries.hidden, onChange: (hidden) => controller.updateSeries(selectedSeries.id, { hidden }) }),
-        family === "cartesian" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toggle, { label: "Secondary axis", name: "series.axis", checked: selectedSeries.axis === "secondary", onChange: (secondary) => controller.updateSeries(selectedSeries.id, { axis: secondary ? "secondary" : null }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "flex-1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", className: chartButtonClass, disabled: seriesIndex <= 0, "aria-label": "Move series earlier", "data-action": "series-up", onClick: () => controller.moveSeries(selectedSeries.id, seriesIndex - 1), children: "\u2191" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", className: chartButtonClass, disabled: seriesIndex >= spec.series.length - 1, "aria-label": "Move series later", "data-action": "series-down", onClick: () => controller.moveSeries(selectedSeries.id, seriesIndex + 1), children: "\u2193" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", className: `${chartButtonClass} text-destructive`, "data-action": "series-delete", onClick: () => controller.removeSeries(selectedSeries.id), children: "Delete" })
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Hidden", name: "series.hidden", checked: !!selectedSeries.hidden, onChange: (hidden) => controller.updateSeries(selectedSeries.id, { hidden }) }),
+        family === "cartesian" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Toggle, { label: "Secondary axis", name: "series.axis", checked: selectedSeries.axis === "secondary", onChange: (secondary) => controller.updateSeries(selectedSeries.id, { axis: secondary ? "secondary" : null }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex-1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: chartButtonClass, disabled: seriesIndex <= 0, "aria-label": "Move series earlier", "data-action": "series-up", onClick: () => controller.moveSeries(selectedSeries.id, seriesIndex - 1), children: "\u2191" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: chartButtonClass, disabled: seriesIndex >= spec.series.length - 1, "aria-label": "Move series later", "data-action": "series-down", onClick: () => controller.moveSeries(selectedSeries.id, seriesIndex + 1), children: "\u2193" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: `${chartButtonClass} text-destructive`, "data-action": "series-delete", onClick: () => controller.removeSeries(selectedSeries.id), children: "Delete" })
       ] })
     ] })
   ] });
 }
 
 // src/chart-node/ChartNodeView.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function ChartNodeView({ state, theme, showDataGrid = true }) {
   const { controller, editing, editable, selected, width, height, setEditing } = state;
   const open = () => {
     if (editable && !editing) setEditing(true);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       className: `not-prose my-2 rounded-md border bg-background p-1 ${selected ? "border-primary ring-1 ring-primary" : "border-border"}`,
@@ -8604,24 +9018,24 @@ function ChartNodeView({ state, theme, showDataGrid = true }) {
         }
       },
       children: [
-        editing && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mb-1 flex items-center justify-between gap-2 px-1", "data-chart-node-toolbar": "", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-xs text-muted-foreground", children: "Editing chart" }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", className: chartButtonClass, "data-action": "done", onClick: () => setEditing(false), children: "Done" })
+        editing && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "mb-1 flex items-center justify-between gap-2 px-1", "data-chart-node-toolbar": "", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xs text-muted-foreground", children: "Editing chart" }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { type: "button", className: chartButtonClass, "data-action": "done", onClick: () => setEditing(false), children: "Done" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "div",
           {
             className: editable && !editing ? "cursor-pointer" : void 0,
             onClick: open,
             title: editable && !editing ? "Click to edit the chart" : void 0,
             "data-chart-node-canvas": "",
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChartCanvas, { controller, width: width ?? 640, height, responsive: width === null, editable: editing, theme })
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ChartCanvas, { controller, width: width ?? 640, height, responsive: width === null, editable: editing, theme })
           }
         ),
         editing && // Wraps by the document's width, not the viewport's: side by side when there is room.
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mt-2 flex flex-wrap items-start gap-2", "data-chart-node-panel": "", children: [
-          showDataGrid && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "min-w-0 flex-[1_1_20rem] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChartDataGrid, { controller }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChartInspector, { controller, className: "max-h-96 min-w-0 flex-[1_1_16rem] overflow-y-auto rounded-md border border-border p-3" })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "mt-2 flex flex-wrap items-start gap-2", "data-chart-node-panel": "", children: [
+          showDataGrid && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "min-w-0 flex-[1_1_20rem] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ChartDataGrid, { controller }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ChartInspector, { controller, className: "max-h-96 min-w-0 flex-[1_1_16rem] overflow-y-auto rounded-md border border-border p-3" })
         ] })
       ]
     }
@@ -8639,7 +9053,7 @@ function createReactChartNodeView(options = {}) {
       scheduled = true;
       queueMicrotask(() => {
         scheduled = false;
-        if (!destroyed) root.render(/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Component, { ...props, state: latest }));
+        if (!destroyed) root.render(/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Component, { ...props, state: latest }));
       });
     };
     schedule();
@@ -8673,6 +9087,7 @@ function createReactChartNodeView(options = {}) {
   ExportDocxButton,
   FindReplaceBar,
   FormulaHints,
+  FreeTransformOptionsBar,
   GenerationHistory,
   GenerationSettings,
   Histogram,
@@ -8680,6 +9095,7 @@ function createReactChartNodeView(options = {}) {
   ImageEditor,
   InsertTableGrid,
   JobProgress,
+  LayerEffectsPanel,
   LayersPanel,
   MergePreview,
   NameManager,