@pixerate/editor-react 0.69.0 → 0.71.0

package/dist/{chunk-LCTQWNTL.js → chunk-63FQB5BT.js}

@@ -159,7 +159,7 @@ function useImageEditor(options = {}) {
 }
 
 // src/image-editor/ImageEditor.tsx
-import React10, { useRef as useRef5, useEffect as useEffect8, useState as useState11, useCallback as useCallback2 } from "react";
+import React12, { useRef as useRef5, useEffect as useEffect10, useState as useState13, useCallback as useCallback2 } from "react";
 import {
   canvasToImagePoint,
   hitTestCrop,
@@ -176,7 +176,11 @@ import {
   handlePaintShortcut,
   pointerPressure,
   FreeTransformTool,
-  getViewportProjection
+  getViewportProjection,
+  ShapeDrawGesture,
+  TypeToolGesture,
+  DEFAULT_SHAPE_TOOL_OPTIONS,
+  DEFAULT_TYPE_TOOL_OPTIONS
 } from "@pixerate/editor/image-editor";
 
 // src/image-editor/ControlSlider.tsx
@@ -826,6 +830,8 @@ import {
   dropZone,
   openPsdFile,
   layerBadge,
+  layerHasThumbnail,
+  layerWarning,
   layerEffectsBadge,
   layerMenu,
   layerPanelRows,
@@ -918,7 +924,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
     const placement = dropPlacement(state.layers, id, row.layer.id, 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 thumb = (layer) => layerHasThumbnail(layer) ? 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__ */ jsxs6("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "layers-panel", onClick: () => menu && setMenu(null), children: [
@@ -1111,15 +1117,25 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
               }
             ),
             row.clipped && /* @__PURE__ */ jsx6("span", { className: "text-slate-500", "aria-label": "Clipped", children: "\u21B3" }),
-            layer.type === "pixel" ? /* @__PURE__ */ jsx6(
-              Thumbnail,
-              {
-                pixels: thumb(layer),
-                size: thumbnailSize,
-                label: `${row.label} pixels`,
-                selected: row.active && state.activeTarget === "pixels" && Boolean(layer.mask)
-              }
-            ) : /* @__PURE__ */ jsx6(
+            layerHasThumbnail(layer) ? /* @__PURE__ */ jsxs6("span", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ jsx6(
+                Thumbnail,
+                {
+                  pixels: thumb(layer),
+                  size: thumbnailSize,
+                  label: `${row.label} pixels`,
+                  selected: row.active && state.activeTarget === "pixels" && Boolean(layer.mask)
+                }
+              ),
+              layer.type !== "pixel" && /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  "data-testid": "layer-kind-badge",
+                  className: "absolute -bottom-1 -right-1 rounded bg-slate-700 px-0.5 text-[8px] font-bold leading-tight text-slate-100 ring-1 ring-slate-900",
+                  children: layerBadge(layer)
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx6(
               "span",
               {
                 className: "shrink-0 grid place-items-center rounded bg-slate-800 text-[9px] text-slate-400 ring-1 ring-slate-700",
@@ -1186,6 +1202,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 children: row.label
               }
             ),
+            layerWarning(layer) && /* @__PURE__ */ jsx6("span", { role: "img", "data-testid": "layer-warning", "aria-label": layerWarning(layer), title: layerWarning(layer), className: "text-[10px] text-amber-400", children: "\u26A0" }),
             layerEffectsBadge(layer) && /* @__PURE__ */ jsx6(
               "button",
               {
@@ -1803,8 +1820,215 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
   ] });
 };
 
-// src/image-editor/ImageEditor.tsx
+// src/image-editor/ShapeOptionsBar.tsx
+import { useEffect as useEffect8, useState as useState11 } from "react";
+import { LIVE_SHAPE_KINDS, SHAPE_KIND_LABELS, applyShapeOptions } from "@pixerate/editor/image-editor";
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var chip3 = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
+var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
+  const [, setTick] = useState11(0);
+  useEffect8(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const [error, setError] = useState11(null);
+  const active = controller.getActiveLayer();
+  const shapeId = active?.type === "shape" ? active.id : null;
+  const set = (change) => {
+    onChange({ ...options, ...change });
+    if (!shapeId) return;
+    try {
+      setError(null);
+      applyShapeOptions(controller, shapeId, change);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+  const num = (v, min, max) => Math.max(min, Math.min(max, Number(v) || min));
+  return /* @__PURE__ */ jsxs11("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "shape-options", children: [
+    /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Shape kind", children: LIVE_SHAPE_KINDS.map((k) => /* @__PURE__ */ jsx11("button", { type: "button", "aria-pressed": options.kind === k, className: chip3(options.kind === k), onClick: () => onChange({ ...options, kind: k }), children: SHAPE_KIND_LABELS[k] }, k)) }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx11("input", { type: "checkbox", "aria-label": "Fill", checked: options.fill !== null, onChange: (e) => set({ fill: e.target.checked ? "#4f46e5" : null }) }),
+        "Fill",
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            type: "color",
+            "aria-label": "Fill colour",
+            disabled: options.fill === null,
+            value: options.fill ?? "#4f46e5",
+            onChange: (e) => set({ fill: e.target.value }),
+            className: "h-6 w-8 rounded border border-slate-700 bg-transparent"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx11("input", { type: "checkbox", "aria-label": "Stroke", checked: options.stroke !== null, onChange: (e) => set({ stroke: e.target.checked ? "#000000" : null }) }),
+        "Stroke",
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            type: "color",
+            "aria-label": "Stroke colour",
+            disabled: options.stroke === null,
+            value: options.stroke ?? "#000000",
+            onChange: (e) => set({ stroke: e.target.value }),
+            className: "h-6 w-8 rounded border border-slate-700 bg-transparent"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
+        "Width",
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            type: "number",
+            "aria-label": "Stroke width",
+            min: 0,
+            max: 200,
+            value: options.strokeWidth,
+            onChange: (e) => set({ strokeWidth: num(e.target.value, 0, 200) }),
+            className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-3", children: [
+      options.kind === "rect" && /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
+        "Radius",
+        /* @__PURE__ */ jsx11("input", { type: "number", "aria-label": "Corner radius", min: 0, max: 1e3, value: options.radius, onChange: (e) => set({ radius: num(e.target.value, 0, 1e3) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+      ] }),
+      options.kind === "polygon" && /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
+        "Sides",
+        /* @__PURE__ */ jsx11("input", { type: "number", "aria-label": "Sides", min: 3, max: 100, value: options.sides, onChange: (e) => set({ sides: num(e.target.value, 3, 100) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+      ] }),
+      options.kind === "star" && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+        /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
+          "Points",
+          /* @__PURE__ */ jsx11("input", { type: "number", "aria-label": "Points", min: 3, max: 100, value: options.points, onChange: (e) => set({ points: num(e.target.value, 3, 100) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+        ] }),
+        /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
+          "Inner",
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              type: "range",
+              "aria-label": "Inner radius",
+              min: 0.05,
+              max: 1,
+              step: 0.05,
+              value: options.innerRatio,
+              onChange: (e) => set({ innerRatio: Number(e.target.value) }),
+              className: "accent-indigo-500"
+            }
+          )
+        ] })
+      ] }),
+      options.kind === "line" && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+        /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
+          "Weight",
+          /* @__PURE__ */ jsx11("input", { type: "number", "aria-label": "Line weight", min: 1, max: 200, value: options.weight, onChange: (e) => set({ weight: num(e.target.value, 1, 200) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+        ] }),
+        /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx11("input", { type: "checkbox", "aria-label": "Arrowhead", checked: options.arrow, onChange: (e) => set({ arrow: e.target.checked }) }),
+          "Arrowhead"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx11("p", { className: "text-[10px] text-slate-500", children: "Drag on the image to draw. Shift: square, circle or 45\xB0 line. Alt: from the centre." }),
+    error && /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-rose-400", children: error })
+  ] });
+};
+
+// src/image-editor/TypeOptionsBar.tsx
+import { useEffect as useEffect9, useState as useState12 } from "react";
+import { TEXT_ALIGNS } from "@pixerate/editor/image-editor";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var chip4 = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
+var ALIGN_LABELS = { left: "Left", center: "Centre", right: "Right", justify: "Justify" };
+var TypeOptionsBar = ({ controller, options, onChange, session, className }) => {
+  const [, setTick] = useState12(0);
+  useEffect9(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  useEffect9(() => session?.subscribe(() => setTick((n) => n + 1)), [session]);
+  const [error, setError] = useState12(null);
+  const active = controller.getActiveLayer();
+  const typeId = !session && active?.type === "type" ? active.id : null;
+  const here = session?.alive ? session.styleHere() : {};
+  const shown = {
+    ...options,
+    ...here.fontFamily ? { fontFamily: here.fontFamily } : {},
+    ...here.fontSize ? { fontSize: here.fontSize } : {},
+    ...here.fontWeight ? { fontWeight: here.fontWeight } : {},
+    ...session?.alive ? { italic: Boolean(here.italic), color: here.color ?? options.color } : {}
+  };
+  const fonts = controller.listFonts();
+  const missing = active?.type === "type" ? active.missingFonts ?? [] : [];
+  const style = (change) => {
+    onChange({ ...options, ...change });
+    const s = {};
+    for (const k of ["fontFamily", "fontSize", "fontWeight", "italic", "color"]) if (k in change) s[k] = change[k];
+    const p = change.align ? { align: change.align } : null;
+    try {
+      setError(null);
+      if (session?.alive) {
+        if (Object.keys(s).length) session.setStyle(s);
+        if (p) session.setParagraph(p);
+        if (session.error) setError(session.error);
+      } else if (typeId) {
+        if (Object.keys(s).length) controller.setTextStyle(typeId, s);
+        if (p) controller.setParagraphStyle(typeId, p);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+  return /* @__PURE__ */ jsxs12("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "type-options", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
+        "Font",
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            list: "pixerate-type-fonts",
+            "aria-label": "Font family",
+            value: shown.fontFamily,
+            onChange: (e) => e.target.value.trim() && style({ fontFamily: e.target.value }),
+            className: "w-32 rounded border border-slate-700 bg-slate-950 px-1 py-0.5"
+          }
+        ),
+        /* @__PURE__ */ jsx12("datalist", { id: "pixerate-type-fonts", children: fonts.map((f) => /* @__PURE__ */ jsx12("option", { value: f }, f)) })
+      ] }),
+      /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
+        "Size",
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            type: "number",
+            "aria-label": "Font size",
+            min: 1,
+            max: 2e3,
+            value: Math.round(shown.fontSize * 10) / 10,
+            onChange: (e) => Number(e.target.value) > 0 && style({ fontSize: Number(e.target.value) }),
+            className: "w-16 rounded border border-slate-700 bg-slate-950 px-1 py-0.5"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx12("button", { type: "button", "aria-pressed": shown.fontWeight >= 600, className: `${chip4(shown.fontWeight >= 600)} font-bold`, onClick: () => style({ fontWeight: shown.fontWeight >= 600 ? 400 : 700 }), children: "B" }),
+      /* @__PURE__ */ jsx12("button", { type: "button", "aria-pressed": shown.italic, className: `${chip4(shown.italic)} italic`, onClick: () => style({ italic: !shown.italic }), children: "I" }),
+      /* @__PURE__ */ jsx12("input", { type: "color", "aria-label": "Text colour", value: shown.color, onChange: (e) => style({ color: e.target.value }), className: "h-6 w-8 rounded border border-slate-700 bg-transparent" })
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Alignment", children: TEXT_ALIGNS.map((a) => /* @__PURE__ */ jsx12("button", { type: "button", "aria-pressed": options.align === a, className: chip4(options.align === a), onClick: () => style({ align: a }), children: ALIGN_LABELS[a] }, a)) }),
+    /* @__PURE__ */ jsx12("p", { className: "text-[10px] text-slate-500", children: "Click to type point text, drag for a paragraph box, click text to edit it. Esc finishes." }),
+    missing.length > 0 && /* @__PURE__ */ jsxs12("p", { role: "status", className: "text-amber-400", "data-testid": "type-missing-fonts", children: [
+      "Missing ",
+      missing.length === 1 ? "font" : "fonts",
+      ": ",
+      missing.join(", ")
+    ] }),
+    error && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-rose-400", children: error })
+  ] });
+};
+
+// src/image-editor/ImageEditor.tsx
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -1822,9 +2046,9 @@ var ImageEditor = ({
   const legacyProcess = normalizeProcessVersion(state.adjustments.process) < LATEST_PROCESS_VERSION;
   const canvasRef = useRef5(null);
   const containerRef = useRef5(null);
-  const [activeTab, setActiveTab] = useState11("crop");
-  const [activeCropRatio, setActiveCropRatio] = useState11(null);
-  const [selectionOptions, setSelectionOptions] = useState11(DEFAULT_SELECTION_TOOL_OPTIONS);
+  const [activeTab, setActiveTab] = useState13("crop");
+  const [activeCropRatio, setActiveCropRatio] = useState13(null);
+  const [selectionOptions, setSelectionOptions] = useState13(DEFAULT_SELECTION_TOOL_OPTIONS);
   const selectionOptionsRef = useRef5(selectionOptions);
   selectionOptionsRef.current = selectionOptions;
   const selectionGestureRef = useRef5(null);
@@ -1832,7 +2056,7 @@ var ImageEditor = ({
     selectionGestureRef.current = new SelectionGesture(controller, () => selectionOptionsRef.current);
   }
   const selectionDraftRef = useRef5(null);
-  const [selectionError, setSelectionError] = useState11(null);
+  const [selectionError, setSelectionError] = useState13(null);
   const paintGestureRef = useRef5(null);
   const paintControllerRef = useRef5(controller);
   if (!paintGestureRef.current || paintControllerRef.current !== controller) {
@@ -1840,7 +2064,7 @@ var ImageEditor = ({
     paintControllerRef.current = controller;
   }
   const brushCursorRef = useRef5(null);
-  const [paintError, setPaintError] = useState11(null);
+  const [paintError, setPaintError] = useState13(null);
   const transformToolRef = useRef5(null);
   const transformControllerRef = useRef5(controller);
   if (!transformToolRef.current || transformControllerRef.current !== controller) {
@@ -1851,15 +2075,33 @@ var ImageEditor = ({
     transformControllerRef.current = controller;
   }
   const transformTool = transformToolRef.current;
-  const [, setTransformTick] = useState11(0);
-  const [transformCursor, setTransformCursor] = useState11("default");
-  const [inpaintPrompt, setInpaintPrompt] = useState11("");
-  const [inpaintMaskMode, setInpaintMaskMode] = useState11("annotations");
-  const [isRemovingBg, setIsRemovingBg] = useState11(false);
-  const [isInpainting, setIsInpainting] = useState11(false);
-  const [aiError, setAiError] = useState11(null);
-  const [aiSuccess, setAiSuccess] = useState11(null);
-  const [aiTarget, setAiTarget] = useState11("auto");
+  const [, setTransformTick] = useState13(0);
+  const [transformCursor, setTransformCursor] = useState13("default");
+  const [shapeOptions, setShapeOptions] = useState13(DEFAULT_SHAPE_TOOL_OPTIONS);
+  const shapeOptionsRef = useRef5(shapeOptions);
+  shapeOptionsRef.current = shapeOptions;
+  const [typeOptions, setTypeOptions] = useState13(DEFAULT_TYPE_TOOL_OPTIONS);
+  const typeOptionsRef = useRef5(typeOptions);
+  typeOptionsRef.current = typeOptions;
+  const shapeGestureRef = useRef5(null);
+  const typeToolRef = useRef5(null);
+  const shapeTypeControllerRef = useRef5(controller);
+  if (!shapeGestureRef.current || !typeToolRef.current || shapeTypeControllerRef.current !== controller) {
+    typeToolRef.current?.finish();
+    shapeGestureRef.current = new ShapeDrawGesture(controller, () => shapeOptionsRef.current);
+    typeToolRef.current = new TypeToolGesture(controller, () => typeOptionsRef.current);
+    shapeTypeControllerRef.current = controller;
+  }
+  const typeInputRef = useRef5(null);
+  const [typeSession, setTypeSession] = useState13(typeToolRef.current.session);
+  const [shapeTypeError, setShapeTypeError] = useState13(null);
+  const [inpaintPrompt, setInpaintPrompt] = useState13("");
+  const [inpaintMaskMode, setInpaintMaskMode] = useState13("annotations");
+  const [isRemovingBg, setIsRemovingBg] = useState13(false);
+  const [isInpainting, setIsInpainting] = useState13(false);
+  const [aiError, setAiError] = useState13(null);
+  const [aiSuccess, setAiSuccess] = useState13(null);
+  const [aiTarget, setAiTarget] = useState13("auto");
   const aiOptions = aiTarget === "auto" ? {} : { target: aiTarget };
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
@@ -1922,10 +2164,10 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  const [activeColor, setActiveColor] = useState11("#ef4444");
-  const [strokeWidth, setStrokeWidth] = useState11(3);
-  const [fontSize, setFontSize] = useState11(24);
-  const [textInput, setTextInput] = useState11("");
+  const [activeColor, setActiveColor] = useState13("#ef4444");
+  const [strokeWidth, setStrokeWidth] = useState13(3);
+  const [fontSize, setFontSize] = useState13(24);
+  const [textInput, setTextInput] = useState13("");
   const draftAnnotationRef = useRef5(null);
   const draftCropRef = useRef5(null);
   const cropDragInfoRef = useRef5(null);
@@ -1950,12 +2192,49 @@ var ImageEditor = ({
         draftCrop: draftCrop !== void 0 ? draftCrop : draftCropRef.current,
         draftSelectionPath: selectionDraftRef.current,
         brushCursor: activeTab === "paint" && brushCursorRef.current && controller.getState().activeTool !== "move" && !transformTool.active ? { ...brushCursorRef.current, diameter: controller.getState().paint.brush.size } : null,
-        freeTransform: transformTool.overlay()
+        freeTransform: transformTool.overlay(),
+        textEdit: typeToolRef.current?.session?.alive ? typeToolRef.current.session.overlay() : null
       });
     },
     [controller, activeTab, transformTool]
   );
-  useEffect8(() => transformTool.subscribe(() => {
+  useEffect10(() => typeSession?.subscribe(() => void renderCanvas()), [typeSession, renderCanvas]);
+  useEffect10(() => {
+    if (activeTab === "annotate" && state.activeTool === "type") return;
+    if (typeToolRef.current?.session) {
+      typeToolRef.current.finish();
+      setTypeSession(null);
+      void renderCanvas();
+    }
+  }, [activeTab, state.activeTool, renderCanvas]);
+  const finishTyping = () => {
+    typeToolRef.current?.finish();
+    setTypeSession(null);
+    void renderCanvas();
+  };
+  const handleTypeKeyDown = (e) => {
+    const session = typeToolRef.current?.session;
+    if (!session || e.nativeEvent.isComposing) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      finishTyping();
+      return;
+    }
+    if ((e.metaKey || e.ctrlKey) && ["z", "y", "c", "x", "v"].includes(e.key.toLowerCase())) return;
+    if (session.handleKey(e)) {
+      e.preventDefault();
+      setShapeTypeError(session.error);
+    }
+  };
+  const handleTypeInput = (e) => {
+    const el = e.currentTarget;
+    const session = typeToolRef.current?.session;
+    if (session && el.value && !e.nativeEvent.isComposing) {
+      session.insert(el.value);
+      el.value = "";
+    }
+  };
+  useEffect10(() => transformTool.subscribe(() => {
     setTransformTick((n) => n + 1);
     void renderCanvas();
   }), [transformTool, renderCanvas]);
@@ -1998,7 +2277,7 @@ var ImageEditor = ({
     transformTool.up();
     return true;
   };
-  useEffect8(() => {
+  useEffect10(() => {
     if (typeof window === "undefined") return;
     const onKey = (e) => {
       if (transformTool.key(e)) e.preventDefault();
@@ -2006,7 +2285,7 @@ var ImageEditor = ({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [transformTool]);
-  useEffect8(() => {
+  useEffect10(() => {
     const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
     const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
     const animId = raf(() => {
@@ -2014,12 +2293,12 @@ var ImageEditor = ({
     });
     return () => caf(animId);
   }, [renderCanvas, state]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (activeTab === "crop" && editor.state.activeTool !== "crop") {
       editor.setTool("crop");
     }
   }, [activeTab, editor]);
-  useEffect8(() => {
+  useEffect10(() => {
     const container = containerRef.current;
     if (!container) return;
     if (typeof ResizeObserver !== "undefined") {
@@ -2087,7 +2366,7 @@ var ImageEditor = ({
       if (g.error) setPaintError(g.error);
     }
   };
-  useEffect8(() => {
+  useEffect10(() => {
     if (activeTab !== "paint" || typeof window === "undefined") return;
     const onKey = (e) => {
       if (handlePaintShortcut(controller, e)) e.preventDefault();
@@ -2131,6 +2410,17 @@ var ImageEditor = ({
       }
       return;
     }
+    if (activeTab === "annotate" && (state.activeTool === "shape" || state.activeTool === "type")) {
+      const imgPt = canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false);
+      setShapeTypeError(null);
+      if (state.activeTool === "shape") shapeGestureRef.current.down(imgPt);
+      else {
+        typeToolRef.current.down(imgPt, { shift: e.shiftKey });
+        setTypeSession(typeToolRef.current.session);
+        void renderCanvas();
+      }
+      return;
+    }
     if (activeTab === "annotate") {
       const imgPt = canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false);
       dragStartPointRef.current = imgPt;
@@ -2221,6 +2511,14 @@ var ImageEditor = ({
       }
       return;
     }
+    if (activeTab === "annotate" && state.activeTool === "shape") {
+      const g = shapeGestureRef.current;
+      if (g.active) {
+        g.move(canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false), { shift: e.shiftKey, alt: e.altKey });
+        if (g.error) setShapeTypeError(g.error);
+      }
+      return;
+    }
     if (activeTab === "annotate") {
       if (annotationDragInfoRef.current) {
         const drag = annotationDragInfoRef.current;
@@ -2347,6 +2645,19 @@ var ImageEditor = ({
       }
       return;
     }
+    if (activeTab === "annotate" && state.activeTool === "shape") {
+      shapeGestureRef.current.up();
+      return;
+    }
+    if (activeTab === "annotate" && state.activeTool === "type") {
+      const tool = typeToolRef.current;
+      tool.up(canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false));
+      setTypeSession(tool.session);
+      if (tool.error) setShapeTypeError(tool.error);
+      void renderCanvas();
+      if (tool.session) setTimeout(() => typeInputRef.current?.focus(), 0);
+      return;
+    }
     if (activeTab === "annotate") {
       if (annotationDragInfoRef.current) {
         annotationDragInfoRef.current = null;
@@ -2450,15 +2761,15 @@ var ImageEditor = ({
       link.click();
     }
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "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__ */ jsxs11("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__ */ jsxs11("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
-            /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsxs13("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__ */ jsxs13("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2470,7 +2781,7 @@ var ImageEditor = ({
                 children: "Transform & Crop"
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2482,7 +2793,7 @@ var ImageEditor = ({
                 children: "Adjustments"
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2494,7 +2805,7 @@ var ImageEditor = ({
                 children: "Layers"
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2506,7 +2817,7 @@ var ImageEditor = ({
                 children: "Paint"
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2518,7 +2829,7 @@ var ImageEditor = ({
                 children: "Select & Mask"
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2530,7 +2841,7 @@ var ImageEditor = ({
                 children: "Annotations"
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2542,7 +2853,7 @@ var ImageEditor = ({
                 children: "Depth Mask"
               }
             ),
-            /* @__PURE__ */ jsxs11(
+            /* @__PURE__ */ jsxs13(
               "button",
               {
                 type: "button",
@@ -2552,14 +2863,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__ */ jsx11("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("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__ */ jsx13("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx13("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__ */ jsxs11("div", { className: "flex items-center gap-2 text-xs", children: [
-            /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2570,7 +2881,7 @@ var ImageEditor = ({
                 children: "\u21A9"
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2581,7 +2892,7 @@ var ImageEditor = ({
                 children: "\u21AA"
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2590,8 +2901,8 @@ var ImageEditor = ({
                 children: "Reset"
               }
             ),
-            /* @__PURE__ */ jsx11("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2601,11 +2912,11 @@ var ImageEditor = ({
                 children: "-"
               }
             ),
-            /* @__PURE__ */ jsxs11("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
+            /* @__PURE__ */ jsxs13("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
               Math.round(state.zoom * 100),
               "%"
             ] }),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2615,8 +2926,8 @@ var ImageEditor = ({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ jsx11("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2627,7 +2938,7 @@ var ImageEditor = ({
                 children: "Hold Compare"
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -2638,38 +2949,59 @@ var ImageEditor = ({
             )
           ] })
         ] }),
-        transformTool.active && /* @__PURE__ */ jsx11(FreeTransformOptionsBar, { tool: transformTool, className: "border-b border-slate-800 bg-slate-900/95 px-4 py-2" }),
-        !transformTool.active && transformTool.error && /* @__PURE__ */ jsx11("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__ */ jsxs11("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
-          /* @__PURE__ */ jsx11(
+        transformTool.active && /* @__PURE__ */ jsx13(FreeTransformOptionsBar, { tool: transformTool, className: "border-b border-slate-800 bg-slate-900/95 px-4 py-2" }),
+        !transformTool.active && transformTool.error && /* @__PURE__ */ jsx13("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__ */ jsxs13("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
+          /* @__PURE__ */ jsxs13(
             "div",
             {
               ref: containerRef,
               className: "relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none",
-              children: /* @__PURE__ */ jsx11(
-                "canvas",
-                {
-                  ref: canvasRef,
-                  onMouseDown: handleMouseDown,
-                  onMouseMove: handleMouseMove,
-                  onMouseUp: handleMouseUp,
-                  onMouseLeave: handleMouseUp,
-                  onPointerDown: handlePaintPointerDown,
-                  onPointerMove: handlePaintPointerMove,
-                  onPointerUp: handlePaintPointerUp,
-                  onPointerCancel: () => paintGestureRef.current?.cancel(),
-                  "data-testid": "image-editor-canvas",
-                  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" : ""}`
-                }
-              )
+              children: [
+                /* @__PURE__ */ jsx13(
+                  "canvas",
+                  {
+                    ref: canvasRef,
+                    onMouseDown: handleMouseDown,
+                    onMouseMove: handleMouseMove,
+                    onMouseUp: handleMouseUp,
+                    onMouseLeave: handleMouseUp,
+                    onPointerDown: handlePaintPointerDown,
+                    onPointerMove: handlePaintPointerMove,
+                    onPointerUp: handlePaintPointerUp,
+                    onPointerCancel: () => paintGestureRef.current?.cancel(),
+                    "data-testid": "image-editor-canvas",
+                    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" : activeTab === "annotate" && state.activeTool === "type" ? "cursor-text" : activeTab === "annotate" && state.activeTool === "shape" ? "cursor-crosshair" : ""}`
+                  }
+                ),
+                typeSession && /* @__PURE__ */ jsx13(
+                  "textarea",
+                  {
+                    ref: typeInputRef,
+                    "aria-label": "Edit text",
+                    "data-testid": "type-input",
+                    autoCapitalize: "off",
+                    autoCorrect: "off",
+                    spellCheck: false,
+                    onKeyDown: handleTypeKeyDown,
+                    onInput: handleTypeInput,
+                    onCompositionEnd: (e) => {
+                      const session = typeToolRef.current?.session;
+                      if (session && e.data) session.insert(e.data);
+                      e.currentTarget.value = "";
+                    },
+                    className: "absolute left-0 top-0 h-px w-px opacity-0"
+                  }
+                )
+              ]
             }
           ),
-          /* @__PURE__ */ jsxs11("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__ */ jsxs11("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
-              /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsxs13("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__ */ jsxs13("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsx13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
+              /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2681,7 +3013,7 @@ var ImageEditor = ({
                     children: "Freeform"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2693,7 +3025,7 @@ var ImageEditor = ({
                     children: "1:1 Square"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2705,7 +3037,7 @@ var ImageEditor = ({
                     children: "4:3 Standard"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2717,7 +3049,7 @@ var ImageEditor = ({
                     children: "16:9 Wide"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2729,7 +3061,7 @@ var ImageEditor = ({
                     children: "3:2 Photo"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2742,10 +3074,10 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx11("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
-              /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx13("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
+              /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2754,7 +3086,7 @@ var ImageEditor = ({
                     children: "Rotate -90\xB0"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2763,7 +3095,7 @@ var ImageEditor = ({
                     children: "Rotate +90\xB0"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2772,7 +3104,7 @@ var ImageEditor = ({
                     children: "Flip Horizontal"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2783,10 +3115,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "adjust" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
-                /* @__PURE__ */ jsx11(
+            activeTab === "adjust" && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2796,9 +3128,9 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx11(Histogram, { histogram: editor.histogram }),
-              IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ jsxs11(React10.Fragment, { children: [
-                /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx13(Histogram, { histogram: editor.histogram }),
+              IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ jsxs13(React12.Fragment, { children: [
+                /* @__PURE__ */ jsx13(
                   ControlSlider,
                   {
                     spec,
@@ -2807,14 +3139,14 @@ var ImageEditor = ({
                     onChange: (v) => editor.setAdjustments({ [spec.id]: v })
                   }
                 ),
-                spec.id === "tint" && legacyProcess && /* @__PURE__ */ jsxs11(
+                spec.id === "tint" && legacyProcess && /* @__PURE__ */ jsxs13(
                   "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__ */ jsx11("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
-                      /* @__PURE__ */ jsx11(
+                      /* @__PURE__ */ jsx13("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                      /* @__PURE__ */ jsx13(
                         "button",
                         {
                           type: "button",
@@ -2827,7 +3159,7 @@ var ImageEditor = ({
                   }
                 )
               ] }, spec.id)),
-              /* @__PURE__ */ jsx11("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx13("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx13(
                 AdjustmentLayersPanel,
                 {
                   controller,
@@ -2836,9 +3168,9 @@ var ImageEditor = ({
                 }
               ) })
             ] }),
-            activeTab === "layers" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
-              /* @__PURE__ */ jsx11(
+            activeTab === "layers" && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsx13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
+              /* @__PURE__ */ jsx13(
                 "button",
                 {
                   type: "button",
@@ -2849,12 +3181,12 @@ var ImageEditor = ({
                   children: "Free Transform"
                 }
               ),
-              /* @__PURE__ */ jsx11(LayersPanel, { controller })
+              /* @__PURE__ */ jsx13(LayersPanel, { controller })
             ] }),
-            activeTab === "paint" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
-              /* @__PURE__ */ jsx11(BrushOptionsBar, { controller }),
-              /* @__PURE__ */ jsx11(
+            activeTab === "paint" && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsx13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
+              /* @__PURE__ */ jsx13(BrushOptionsBar, { controller }),
+              /* @__PURE__ */ jsx13(
                 "button",
                 {
                   type: "button",
@@ -2865,12 +3197,29 @@ var ImageEditor = ({
                   children: "Free Transform"
                 }
               ),
-              paintError && /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
-              /* @__PURE__ */ jsx11("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx11(LayersPanel, { controller }) })
+              paintError && /* @__PURE__ */ jsx13("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
+              /* @__PURE__ */ jsx13("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx13(LayersPanel, { controller }) })
             ] }),
-            activeTab === "annotate" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
-              /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ jsx11(
+            activeTab === "annotate" && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsx13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Shape & Type Layers" }),
+              /* @__PURE__ */ jsx13("div", { className: "grid grid-cols-2 gap-1.5", children: ["shape", "type"].map((t) => /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": state.activeTool === t,
+                  onClick: () => editor.setTool(t),
+                  className: `py-1.5 px-2 rounded-lg font-medium border transition-colors ${state.activeTool === t ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700"}`,
+                  children: t === "shape" ? "Shape" : "Type"
+                },
+                t
+              )) }),
+              state.activeTool === "shape" && /* @__PURE__ */ jsx13(ShapeOptionsBar, { controller, options: shapeOptions, onChange: setShapeOptions }),
+              state.activeTool === "type" && /* @__PURE__ */ jsx13(TypeOptionsBar, { controller, options: typeOptions, onChange: setTypeOptions, session: typeSession }),
+              state.activeTool === "type" && typeSession && /* @__PURE__ */ jsx13("button", { type: "button", onClick: finishTyping, className: "self-start rounded bg-slate-800 px-2 py-1 text-[11px] text-slate-200 hover:bg-slate-700", children: "Done editing text" }),
+              shapeTypeError && /* @__PURE__ */ jsx13("p", { role: "alert", className: "text-rose-400", "data-testid": "shape-type-error", children: shapeTypeError }),
+              /* @__PURE__ */ jsx13("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
+              /* @__PURE__ */ jsx13("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ jsx13(
                 "button",
                 {
                   type: "button",
@@ -2880,9 +3229,9 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 mt-2", children: [
-                /* @__PURE__ */ jsx11("label", { className: "text-slate-400", children: "Color:" }),
-                /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 mt-2", children: [
+                /* @__PURE__ */ jsx13("label", { className: "text-slate-400", children: "Color:" }),
+                /* @__PURE__ */ jsx13(
                   "input",
                   {
                     type: "color",
@@ -2891,15 +3240,15 @@ var ImageEditor = ({
                     className: "w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
                   }
                 ),
-                /* @__PURE__ */ jsxs11("div", { className: "flex-1 ml-2", children: [
-                  /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
-                    /* @__PURE__ */ jsx11("span", { children: "Width:" }),
-                    /* @__PURE__ */ jsxs11("span", { className: "font-mono", children: [
+                /* @__PURE__ */ jsxs13("div", { className: "flex-1 ml-2", children: [
+                  /* @__PURE__ */ jsxs13("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
+                    /* @__PURE__ */ jsx13("span", { children: "Width:" }),
+                    /* @__PURE__ */ jsxs13("span", { className: "font-mono", children: [
                       strokeWidth,
                       "px"
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx13(
                     "input",
                     {
                       type: "range",
@@ -2912,10 +3261,10 @@ var ImageEditor = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsx11("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx13("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
+              /* @__PURE__ */ jsxs13("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx13(
                   "input",
                   {
                     type: "text",
@@ -2926,7 +3275,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__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2936,14 +3285,14 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between text-slate-400", children: [
-                /* @__PURE__ */ jsx11("span", { children: "Font Size:" }),
-                /* @__PURE__ */ jsxs11("span", { className: "font-mono", children: [
+              /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between text-slate-400", children: [
+                /* @__PURE__ */ jsx13("span", { children: "Font Size:" }),
+                /* @__PURE__ */ jsxs13("span", { className: "font-mono", children: [
                   fontSize,
                   "px"
                 ] })
               ] }),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx13(
                 "input",
                 {
                   type: "range",
@@ -2954,14 +3303,14 @@ var ImageEditor = ({
                   className: "w-full accent-indigo-500"
                 }
               ),
-              /* @__PURE__ */ jsx11("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxs11("span", { className: "text-slate-400", children: [
+              /* @__PURE__ */ jsx13("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs13("span", { className: "text-slate-400", children: [
                   "Layers (",
                   state.annotations.length,
                   ")"
                 ] }),
-                state.selectedAnnotationId && /* @__PURE__ */ jsx11(
+                state.selectedAnnotationId && /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2970,7 +3319,7 @@ var ImageEditor = ({
                     children: "Delete Selected"
                   }
                 ),
-                state.annotations.length > 0 && /* @__PURE__ */ jsx11(
+                state.annotations.length > 0 && /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2981,10 +3330,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "depth" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
-                /* @__PURE__ */ jsx11(
+            activeTab === "depth" && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -2994,8 +3343,8 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
-                /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
+                /* @__PURE__ */ jsx13(
                   "input",
                   {
                     type: "checkbox",
@@ -3004,12 +3353,12 @@ var ImageEditor = ({
                     className: "rounded accent-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ jsx11("span", { children: "Enable Depth / Alpha Mask" })
+                /* @__PURE__ */ jsx13("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
-              state.depthMask.enabled && /* @__PURE__ */ jsxs11(Fragment3, { children: [
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsx11("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
-                  /* @__PURE__ */ jsx11(
+              state.depthMask.enabled && /* @__PURE__ */ jsxs13(Fragment4, { children: [
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx13("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
+                  /* @__PURE__ */ jsx13(
                     "input",
                     {
                       type: "text",
@@ -3020,8 +3369,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsxs13("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx13(
                     "button",
                     {
                       type: "button",
@@ -3030,7 +3379,7 @@ var ImageEditor = ({
                       children: "Threshold Mode"
                     }
                   ),
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx13(
                     "button",
                     {
                       type: "button",
@@ -3040,12 +3389,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx11("span", { children: "Depth Start (Lower):" }),
-                    /* @__PURE__ */ jsx11("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsxs13("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx13("span", { children: "Depth Start (Lower):" }),
+                    /* @__PURE__ */ jsx13("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
                   ] }),
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx13(
                     "input",
                     {
                       type: "range",
@@ -3059,12 +3408,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx11("span", { children: "Depth Stop (Upper):" }),
-                    /* @__PURE__ */ jsx11("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsxs13("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx13("span", { children: "Depth Stop (Upper):" }),
+                    /* @__PURE__ */ jsx13("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
                   ] }),
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx13(
                     "input",
                     {
                       type: "range",
@@ -3078,12 +3427,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx11("span", { children: "Softness:" }),
-                    /* @__PURE__ */ jsx11("span", { className: "font-mono", children: state.depthMask.softness })
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsxs13("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx13("span", { children: "Softness:" }),
+                    /* @__PURE__ */ jsx13("span", { className: "font-mono", children: state.depthMask.softness })
                   ] }),
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx13(
                     "input",
                     {
                       type: "range",
@@ -3095,8 +3444,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
-                  /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
+                  /* @__PURE__ */ jsx13(
                     "input",
                     {
                       type: "checkbox",
@@ -3105,12 +3454,12 @@ var ImageEditor = ({
                       className: "rounded accent-indigo-500"
                     }
                   ),
-                  /* @__PURE__ */ jsx11("span", { children: "Invert Mask" })
+                  /* @__PURE__ */ jsx13("span", { children: "Invert Mask" })
                 ] })
               ] })
             ] }),
-            activeTab === "select" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsx11(
+            activeTab === "select" && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsx13(
                 SelectionOptionsBar,
                 {
                   controller,
@@ -3120,9 +3469,9 @@ var ImageEditor = ({
                   quickMask: Boolean(state.quickMask)
                 }
               ),
-              selectionError && /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-rose-400", children: selectionError }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ jsx11(
+              selectionError && /* @__PURE__ */ jsx13("p", { role: "alert", className: "text-rose-400", children: selectionError }),
+              /* @__PURE__ */ jsxs13("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -3133,7 +3482,7 @@ var ImageEditor = ({
                     children: "Transform Selection"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
@@ -3145,12 +3494,12 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx11(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
+              /* @__PURE__ */ jsx13(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
             ] }),
-            activeTab === "ai" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsxs11("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
-                /* @__PURE__ */ jsx11("span", { children: "Results go to" }),
-                /* @__PURE__ */ jsxs11(
+            activeTab === "ai" && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsxs13("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
+                /* @__PURE__ */ jsx13("span", { children: "Results go to" }),
+                /* @__PURE__ */ jsxs13(
                   "select",
                   {
                     "aria-label": "AI result target",
@@ -3158,54 +3507,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__ */ jsx11("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
-                      /* @__PURE__ */ jsx11("option", { value: "new-layer", children: "New layer / mask" }),
-                      /* @__PURE__ */ jsx11("option", { value: "replace", children: "Replace image" })
+                      /* @__PURE__ */ jsx13("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
+                      /* @__PURE__ */ jsx13("option", { value: "new-layer", children: "New layer / mask" }),
+                      /* @__PURE__ */ jsx13("option", { value: "replace", children: "Replace image" })
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx11("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("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__ */ jsxs13("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx13("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx13("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__ */ jsx11("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__ */ jsx13("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__ */ jsx11("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ jsx13(
                   "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__ */ jsxs11(Fragment3, { children: [
-                      /* @__PURE__ */ jsx11("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isRemovingBg ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
+                      /* @__PURE__ */ jsx13("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Removing Background..."
-                    ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
-                      /* @__PURE__ */ jsx11("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("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__ */ jsxs13(Fragment4, { children: [
+                      /* @__PURE__ */ jsx13("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx13("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__ */ jsxs11("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsxs11("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsx11("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__ */ jsx11("path", { d: "m14 7 3 3" })
+              /* @__PURE__ */ jsxs13("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs13("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxs13("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx13("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__ */ jsx13("path", { d: "m14 7 3 3" })
                     ] }),
                     "Generative Inpainting"
                   ] }),
-                  isInpainting && /* @__PURE__ */ jsx11("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__ */ jsx13("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__ */ jsx11("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
-                /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx11("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
-                  /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
+                /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx13("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ jsx13(
                     "textarea",
                     {
                       id: "ai-inpaint-prompt-react",
@@ -3217,10 +3566,10 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx11("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
-                  /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-1.5", children: [
-                    /* @__PURE__ */ jsxs11(
+                /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx13("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                    /* @__PURE__ */ jsxs13(
                       "button",
                       {
                         type: "button",
@@ -3233,7 +3582,7 @@ var ImageEditor = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs11(
+                    /* @__PURE__ */ jsxs13(
                       "button",
                       {
                         type: "button",
@@ -3248,25 +3597,25 @@ var ImageEditor = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx13(
                   "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__ */ jsxs11(Fragment3, { children: [
-                      /* @__PURE__ */ jsx11("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isInpainting ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
+                      /* @__PURE__ */ jsx13("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Generating Inpaint..."
-                    ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
-                      /* @__PURE__ */ jsx11("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("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__ */ jsxs13(Fragment4, { children: [
+                      /* @__PURE__ */ jsx13("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx13("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__ */ jsx11("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
-              aiSuccess && /* @__PURE__ */ jsx11("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
+              aiError && /* @__PURE__ */ jsx13("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
+              aiSuccess && /* @__PURE__ */ jsx13("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
             ] })
           ] })
         ] })
@@ -3288,6 +3637,8 @@ export {
   SelectionOptionsBar,
   RefineEdgePanel,
   FreeTransformOptionsBar,
+  ShapeOptionsBar,
+  TypeOptionsBar,
   ImageEditor
 };
-//# sourceMappingURL=chunk-LCTQWNTL.js.map
+//# sourceMappingURL=chunk-63FQB5BT.js.map