@pixerate/editor-react 0.13.0 → 0.15.0

package/dist/{chunk-TL27COKM.js → chunk-LPFZMZ3L.js}

@@ -42,6 +42,7 @@ function useImageEditor(options = {}) {
     [controller]
   );
   const resetAdjustments = useCallback(() => controller.resetAdjustments(), [controller]);
+  const upgradeProcess = useCallback(() => controller.upgradeProcess(), [controller]);
   const setDepthMask = useCallback((partial) => controller.setDepthMask(partial), [controller]);
   const resetDepthMask = useCallback(() => controller.resetDepthMask(), [controller]);
   const addAnnotation = useCallback((ann) => controller.addAnnotation(ann), [controller]);
@@ -102,6 +103,7 @@ function useImageEditor(options = {}) {
       flipVertical,
       setAdjustments,
       resetAdjustments,
+      upgradeProcess,
       setDepthMask,
       resetDepthMask,
       addAnnotation,
@@ -141,7 +143,9 @@ import {
   hitTestCrop,
   getCropCursor,
   calculateCropDrag,
-  hitTestAnnotation
+  hitTestAnnotation,
+  normalizeProcessVersion,
+  LATEST_PROCESS_VERSION
 } from "@pixerate/editor/image-editor";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ImageEditor = ({
@@ -158,6 +162,7 @@ var ImageEditor = ({
   const internalEditor = useImageEditor({ image: src });
   const editor = externalEditor || internalEditor;
   const { state, controller } = editor;
+  const legacyProcess = normalizeProcessVersion(state.adjustments.process) < LATEST_PROCESS_VERSION;
   const canvasRef = useRef2(null);
   const containerRef = useRef2(null);
   const [activeTab, setActiveTab] = useState2("crop");
@@ -1017,6 +1022,44 @@ var ImageEditor = ({
                   }
                 )
               ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Tint" }),
+                  /* @__PURE__ */ jsx("span", { className: "font-mono", children: state.adjustments.tint ?? 0 })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "range",
+                    min: "-100",
+                    max: "100",
+                    "aria-label": "Tint",
+                    disabled: legacyProcess,
+                    value: state.adjustments.tint ?? 0,
+                    onChange: (e) => editor.setAdjustments({ tint: Number(e.target.value) }),
+                    className: "w-full accent-indigo-500 disabled:opacity-40"
+                  }
+                )
+              ] }),
+              legacyProcess && /* @__PURE__ */ 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__ */ jsx("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => editor.upgradeProcess(),
+                        className: "shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30",
+                        children: "Update"
+                      }
+                    )
+                  ]
+                }
+              ),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-slate-400 mb-1", children: [
                   /* @__PURE__ */ jsx("span", { children: "Blur" }),
@@ -1415,4 +1458,4 @@ export {
   useImageEditor,
   ImageEditor
 };
-//# sourceMappingURL=chunk-TL27COKM.js.map
+//# sourceMappingURL=chunk-LPFZMZ3L.js.map

package/dist/chunk-LPFZMZ3L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/image-editor/useImageEditor.ts","../src/image-editor/ImageEditor.tsx"],"sourcesContent":["import { useRef, useState, useEffect, useCallback, useMemo } from 'react';\nimport {\n  ImageEditorController,\n  type ImageEditorOptions,\n  type ImageEditorState,\n  type ImageEditorTool,\n  type CropBox,\n  type AspectRatio,\n  type ImageAdjustments,\n  type DepthMaskOptions,\n  type Annotation,\n  type CreateAnnotationPayload,\n  type ExportOptions,\n  type SerializedImageEditorState,\n  type ImagePoint,\n} from '@pixerate/editor/image-editor';\n\nexport interface UseImageEditorReturn {\n  controller: ImageEditorController;\n  state: ImageEditorState;\n  canUndo: boolean;\n  canRedo: boolean;\n  setTool: (tool: ImageEditorTool) => void;\n  setCrop: (crop: CropBox | null, addToHistory?: boolean) => void;\n  applyCropPreset: (ratio: AspectRatio) => void;\n  resetCrop: () => void;\n  rotate: (degrees: number) => void;\n  setRotation: (degrees: number) => void;\n  flipHorizontal: () => void;\n  flipVertical: () => void;\n  setAdjustments: (partial: Partial<ImageAdjustments>, commitToHistory?: boolean) => void;\n  resetAdjustments: () => void;\n  /** Update to Current Process: re-render the adjustments with the latest process (one undo step). */\n  upgradeProcess: () => boolean;\n  setDepthMask: (partial: Partial<DepthMaskOptions>) => void;\n  resetDepthMask: () => void;\n  addAnnotation: (annotation: CreateAnnotationPayload) => string;\n  updateAnnotation: (id: string, partial: Partial<Annotation>, commitToHistory?: boolean) => void;\n  removeAnnotation: (id: string) => void;\n  clearAnnotations: () => void;\n  selectAnnotation: (id: string | null) => void;\n  undo: () => boolean;\n  redo: () => boolean;\n  reset: () => void;\n  zoomIn: (factor?: number) => void;\n  zoomOut: (factor?: number) => void;\n  resetZoom: () => void;\n  setZoom: (zoom: number) => void;\n  setPan: (pan: ImagePoint) => void;\n  setComparing: (comparing: boolean) => void;\n  loadImage: (src: string | HTMLImageElement) => Promise<void>;\n  toDataURL: (options?: ExportOptions) => Promise<string>;\n  toBlob: (options?: ExportOptions) => Promise<Blob>;\n  toJSON: () => SerializedImageEditorState;\n  loadJSON: (data: SerializedImageEditorState) => void;\n  renderMask: (options?: { useAnnotations?: boolean; useCrop?: boolean }) => Promise<HTMLCanvasElement>;\n  toMaskDataURL: (options?: { useAnnotations?: boolean; useCrop?: boolean }) => Promise<string>;\n  toSourceDataURL: (options?: Pick<ExportOptions, 'format' | 'quality'>) => Promise<string>;\n  applyInpaintedImage: (newDataUrl: string) => Promise<void>;\n  applyBackgroundRemovedImage: (newDataUrl: string) => Promise<void>;\n}\n\nexport function useImageEditor(options: ImageEditorOptions = {}): UseImageEditorReturn {\n  const controllerRef = useRef<ImageEditorController | null>(null);\n\n  if (!controllerRef.current) {\n    controllerRef.current = new ImageEditorController(options);\n  }\n\n  const controller = controllerRef.current;\n  const [state, setState] = useState<ImageEditorState>(() => controller.getState());\n  const [historyTicks, setHistoryTicks] = useState(0);\n\n  useEffect(() => {\n    const unsub = controller.subscribe((next) => {\n      setState(next);\n      setHistoryTicks((t) => t + 1);\n    });\n    return unsub;\n  }, [controller]);\n\n  // The constructor loads the initial image. Reload only when the `image`\n  // option itself changes, not whenever the controller's source differs from\n  // it (AI edits replace the source with a data URL and must not be reverted).\n  const loadedImageRef = useRef(options.image);\n  useEffect(() => {\n    if (options.image === loadedImageRef.current) return;\n    loadedImageRef.current = options.image;\n    if (options.image) {\n      controller.loadImage(options.image);\n    }\n  }, [options.image, controller]);\n\n  const setTool = useCallback((tool: ImageEditorTool) => controller.setTool(tool), [controller]);\n  const setCrop = useCallback(\n    (crop: CropBox | null, addToHistory = true) => controller.setCrop(crop, addToHistory),\n    [controller]\n  );\n  const applyCropPreset = useCallback((ratio: AspectRatio) => controller.applyCropPreset(ratio), [controller]);\n  const resetCrop = useCallback(() => controller.resetCrop(), [controller]);\n  const rotate = useCallback((deg: number) => controller.rotate(deg), [controller]);\n  const setRotation = useCallback((deg: number) => controller.setRotation(deg), [controller]);\n  const flipHorizontal = useCallback(() => controller.flipHorizontal(), [controller]);\n  const flipVertical = useCallback(() => controller.flipVertical(), [controller]);\n  const setAdjustments = useCallback(\n    (partial: Partial<ImageAdjustments>, commitToHistory = true) =>\n      controller.setAdjustments(partial, commitToHistory),\n    [controller]\n  );\n  const resetAdjustments = useCallback(() => controller.resetAdjustments(), [controller]);\n  const upgradeProcess = useCallback(() => controller.upgradeProcess(), [controller]);\n  const setDepthMask = useCallback((partial: Partial<DepthMaskOptions>) => controller.setDepthMask(partial), [controller]);\n  const resetDepthMask = useCallback(() => controller.resetDepthMask(), [controller]);\n  const addAnnotation = useCallback((ann: CreateAnnotationPayload) => controller.addAnnotation(ann), [controller]);\n  const updateAnnotation = useCallback(\n    (id: string, partial: Partial<Annotation>, commitToHistory = true) =>\n      controller.updateAnnotation(id, partial, commitToHistory),\n    [controller]\n  );\n  const removeAnnotation = useCallback((id: string) => controller.removeAnnotation(id), [controller]);\n  const clearAnnotations = useCallback(() => controller.clearAnnotations(), [controller]);\n  const selectAnnotation = useCallback((id: string | null) => controller.selectAnnotation(id), [controller]);\n  const undo = useCallback(() => controller.undo(), [controller]);\n  const redo = useCallback(() => controller.redo(), [controller]);\n  const reset = useCallback(() => controller.reset(), [controller]);\n  const zoomIn = useCallback((factor?: number) => controller.zoomIn(factor), [controller]);\n  const zoomOut = useCallback((factor?: number) => controller.zoomOut(factor), [controller]);\n  const resetZoom = useCallback(() => controller.resetZoom(), [controller]);\n  const setZoom = useCallback((zoom: number) => controller.setZoom(zoom), [controller]);\n  const setPan = useCallback((pan: ImagePoint) => controller.setPan(pan), [controller]);\n  const setComparing = useCallback((comp: boolean) => controller.setComparing(comp), [controller]);\n  const loadImage = useCallback((src: string | HTMLImageElement) => controller.loadImage(src), [controller]);\n  const toDataURL = useCallback((opts?: ExportOptions) => controller.toDataURL(opts), [controller]);\n  const toBlob = useCallback((opts?: ExportOptions) => controller.toBlob(opts), [controller]);\n  const toJSON = useCallback(() => controller.toJSON(), [controller]);\n  const loadJSON = useCallback((data: SerializedImageEditorState) => controller.loadJSON(data), [controller]);\n  const renderMask = useCallback(\n    (opts?: { useAnnotations?: boolean; useCrop?: boolean }) => controller.renderMask(opts),\n    [controller]\n  );\n  const toMaskDataURL = useCallback(\n    (opts?: { useAnnotations?: boolean; useCrop?: boolean }) => controller.toMaskDataURL(opts),\n    [controller]\n  );\n  const toSourceDataURL = useCallback(\n    (opts?: Pick<ExportOptions, 'format' | 'quality'>) => controller.toSourceDataURL(opts),\n    [controller]\n  );\n  const applyInpaintedImage = useCallback(\n    (newDataUrl: string) => controller.applyInpaintedImage(newDataUrl),\n    [controller]\n  );\n  const applyBackgroundRemovedImage = useCallback(\n    (newDataUrl: string) => controller.applyBackgroundRemovedImage(newDataUrl),\n    [controller]\n  );\n\n  return useMemo(\n    () => ({\n      controller,\n      state,\n      canUndo: controller.canUndo,\n      canRedo: controller.canRedo,\n      setTool,\n      setCrop,\n      applyCropPreset,\n      resetCrop,\n      rotate,\n      setRotation,\n      flipHorizontal,\n      flipVertical,\n      setAdjustments,\n      resetAdjustments,\n      upgradeProcess,\n      setDepthMask,\n      resetDepthMask,\n      addAnnotation,\n      updateAnnotation,\n      removeAnnotation,\n      clearAnnotations,\n      selectAnnotation,\n      undo,\n      redo,\n      reset,\n      zoomIn,\n      zoomOut,\n      resetZoom,\n      setZoom,\n      setPan,\n      setComparing,\n      loadImage,\n      toDataURL,\n      toBlob,\n      toJSON,\n      loadJSON,\n      renderMask,\n      toMaskDataURL,\n      toSourceDataURL,\n      applyInpaintedImage,\n      applyBackgroundRemovedImage,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [controller, state, historyTicks]\n  );\n}\n","import React, { useRef, useEffect, useState, useCallback } from 'react';\nimport type {\n  Annotation,\n  CropBox,\n  CropHandle,\n  ExportOptions,\n  ImageEditorTool,\n  ImagePoint,\n  InpaintHook,\n  RemoveBackgroundHook,\n  ImageEditorAIHooks,\n} from '@pixerate/editor/image-editor';\nimport {\n  canvasToImagePoint,\n  hitTestCrop,\n  getCropCursor,\n  calculateCropDrag,\n  hitTestAnnotation,\n  normalizeProcessVersion,\n  LATEST_PROCESS_VERSION,\n} from '@pixerate/editor/image-editor';\nimport { useImageEditor, type UseImageEditorReturn } from './useImageEditor';\n\nexport interface ImageEditorProps {\n  editor?: UseImageEditorReturn;\n  src?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  onSave?: (dataUrl: string) => void;\n  exportOptions?: ExportOptions;\n  onInpaint?: InpaintHook;\n  onRemoveBackground?: RemoveBackgroundHook;\n  aiHooks?: ImageEditorAIHooks;\n}\n\ntype TabType = 'crop' | 'adjust' | 'annotate' | 'depth' | 'ai';\n\nexport const ImageEditor: React.FC<ImageEditorProps> = ({\n  editor: externalEditor,\n  src,\n  className = '',\n  style,\n  onSave,\n  exportOptions,\n  onInpaint,\n  onRemoveBackground,\n  aiHooks,\n}) => {\n  const internalEditor = useImageEditor({ image: src });\n  const editor = externalEditor || internalEditor;\n  const { state, controller } = editor;\n  const legacyProcess = normalizeProcessVersion(state.adjustments.process) < LATEST_PROCESS_VERSION;\n\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [activeTab, setActiveTab] = useState<TabType>('crop');\n  const [activeCropRatio, setActiveCropRatio] = useState<number | null>(null);\n\n  // AI Tools state\n  const [inpaintPrompt, setInpaintPrompt] = useState('');\n  const [inpaintMaskMode, setInpaintMaskMode] = useState<'annotations' | 'crop'>('annotations');\n  const [isRemovingBg, setIsRemovingBg] = useState(false);\n  const [isInpainting, setIsInpainting] = useState(false);\n  const [aiError, setAiError] = useState<string | null>(null);\n  const [aiSuccess, setAiSuccess] = useState<string | null>(null);\n\n  const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;\n  const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;\n\n  const handleRemoveBackground = async () => {\n    if (!effectiveOnRemoveBg) {\n      setAiError('No background removal hook is configured.');\n      return;\n    }\n    setAiError(null);\n    setAiSuccess(null);\n    setIsRemovingBg(true);\n    try {\n      // AI hooks work on the untransformed source image (natural pixels); crop, rotation,\n      // adjustments and annotations stay non-destructive and are re-applied on top.\n      const imageDataUrl = await editor.toSourceDataURL();\n      const result = await effectiveOnRemoveBg({ imageDataUrl });\n      if (typeof result === 'string') {\n        await editor.applyBackgroundRemovedImage(result);\n        setAiSuccess('Background removed successfully!');\n      } else {\n        setAiSuccess('Background removal complete.');\n      }\n    } catch (err: any) {\n      setAiError(err?.message || 'Failed to remove background.');\n    } finally {\n      setIsRemovingBg(false);\n    }\n  };\n\n  const handleInpaint = async () => {\n    if (!effectiveOnInpaint) {\n      setAiError('No inpainting hook is configured.');\n      return;\n    }\n    if (!inpaintPrompt.trim()) {\n      setAiError('Please enter an inpainting prompt.');\n      return;\n    }\n    setAiError(null);\n    setAiSuccess(null);\n    setIsInpainting(true);\n    try {\n      // Source image and mask share natural image space so they line up exactly.\n      const imageDataUrl = await editor.toSourceDataURL();\n      const maskDataUrl = await editor.toMaskDataURL({\n        useAnnotations: inpaintMaskMode === 'annotations',\n        useCrop: inpaintMaskMode === 'crop',\n      });\n      const result = await effectiveOnInpaint({\n        prompt: inpaintPrompt.trim(),\n        imageDataUrl,\n        maskDataUrl,\n        cropBox: inpaintMaskMode === 'crop' ? editor.state.crop : null,\n      });\n      if (typeof result === 'string') {\n        await editor.applyInpaintedImage(result);\n        setAiSuccess('Inpainting applied successfully!');\n      } else {\n        setAiSuccess('Inpainting complete.');\n      }\n    } catch (err: any) {\n      setAiError(err?.message || 'Failed to apply inpainting.');\n    } finally {\n      setIsInpainting(false);\n    }\n  };\n\n  // Annotation drafting state\n  const [activeColor, setActiveColor] = useState('#ef4444');\n  const [strokeWidth, setStrokeWidth] = useState(3);\n  const [fontSize, setFontSize] = useState(24);\n  const [textInput, setTextInput] = useState('');\n\n  // Live draft and drag references\n  const draftAnnotationRef = useRef<Annotation | null>(null);\n  const draftCropRef = useRef<CropBox | null>(null);\n  const cropDragInfoRef = useRef<{\n    handle: CropHandle | 'new';\n    startCanvasPt: ImagePoint;\n    startImgPt: ImagePoint;\n    startCrop: CropBox;\n  } | null>(null);\n  const annotationDragInfoRef = useRef<{\n    annId: string;\n    startImgPt: ImagePoint;\n    initialAnn: Annotation;\n  } | null>(null);\n  const isDrawingRef = useRef(false);\n  const currentPathRef = useRef<ImagePoint[]>([]);\n  const dragStartPointRef = useRef<ImagePoint | null>(null);\n\n  // Canvas viewport sizing and re-render\n  const renderCanvas = useCallback(\n    async (draftAnnotation?: Annotation | null, draftCrop?: CropBox | null) => {\n      const canvas = canvasRef.current;\n      const container = containerRef.current;\n      if (!canvas || !container) return;\n\n      const vpWidth = container.clientWidth || 800;\n      const vpHeight = container.clientHeight || 500;\n\n      await controller.render(canvas, {\n        viewportWidth: vpWidth,\n        viewportHeight: vpHeight,\n        showCropOverlay: activeTab === 'crop',\n        showSelectionOverlay: true,\n        interactive: true,\n        draftAnnotation: draftAnnotation !== undefined ? draftAnnotation : draftAnnotationRef.current,\n        draftCrop: draftCrop !== undefined ? draftCrop : draftCropRef.current,\n      });\n    },\n    [controller, activeTab]\n  );\n\n  useEffect(() => {\n    const raf =\n      typeof requestAnimationFrame !== 'undefined'\n        ? requestAnimationFrame\n        : (cb: () => void) => setTimeout(cb, 0) as unknown as number;\n    const caf =\n      typeof cancelAnimationFrame !== 'undefined'\n        ? cancelAnimationFrame\n        : (id: number) => clearTimeout(id);\n\n    const animId = raf(() => {\n      renderCanvas();\n    });\n    return () => caf(animId);\n  }, [renderCanvas, state]);\n\n  // Synchronize initial tool with activeTab\n  useEffect(() => {\n    if (activeTab === 'crop' && editor.state.activeTool !== 'crop') {\n      editor.setTool('crop');\n    }\n  }, [activeTab, editor]);\n\n  // Container resize observer to safely adapt viewport without feedback loops\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    if (typeof ResizeObserver !== 'undefined') {\n      const observer = new ResizeObserver(() => {\n        renderCanvas();\n      });\n      observer.observe(container);\n      return () => observer.disconnect();\n    } else {\n      const handleResize = () => renderCanvas();\n      window.addEventListener('resize', handleResize);\n      return () => window.removeEventListener('resize', handleResize);\n    }\n  }, [renderCanvas]);\n\n  // Convert mouse event coordinates to internal canvas pixel space\n  const getCanvasEventPoint = (e: React.MouseEvent<HTMLCanvasElement>): ImagePoint => {\n    const canvas = canvasRef.current;\n    if (!canvas) return { x: 0, y: 0 };\n    const rect = canvas.getBoundingClientRect();\n    const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;\n    const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;\n    return {\n      x: (e.clientX - rect.left) * scaleX,\n      y: (e.clientY - rect.top) * scaleY,\n    };\n  };\n\n  // Pointer event handlers for drawing and annotations\n  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const canvasPt = getCanvasEventPoint(e);\n\n    if (activeTab === 'crop') {\n      const activeCrop = draftCropRef.current || state.crop || {\n        x: 0,\n        y: 0,\n        width: state.imageDimensions.width,\n        height: state.imageDimensions.height,\n      };\n      const handle = hitTestCrop(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);\n      const startImgPt = canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, true);\n\n      if (handle) {\n        cropDragInfoRef.current = {\n          handle,\n          startCanvasPt: canvasPt,\n          startImgPt,\n          startCrop: activeCrop,\n        };\n      } else {\n        // Clicked outside crop box: start new crop selection\n        cropDragInfoRef.current = {\n          handle: 'new',\n          startCanvasPt: canvasPt,\n          startImgPt,\n          startCrop: { x: startImgPt.x, y: startImgPt.y, width: 0, height: 0 },\n        };\n      }\n      return;\n    }\n\n    if (activeTab === 'annotate') {\n      const imgPt = canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false);\n      dragStartPointRef.current = imgPt;\n\n      if (state.activeTool === 'select') {\n        for (let i = state.annotations.length - 1; i >= 0; i--) {\n          const ann = state.annotations[i];\n          if (hitTestAnnotation(imgPt, ann)) {\n            editor.selectAnnotation(ann.id);\n            annotationDragInfoRef.current = {\n              annId: ann.id,\n              startImgPt: imgPt,\n              initialAnn: { ...ann },\n            };\n            return;\n          }\n        }\n        editor.selectAnnotation(null);\n        return;\n      }\n\n      if (state.activeTool === 'pen') {\n        isDrawingRef.current = true;\n        currentPathRef.current = [imgPt];\n        const draft: Annotation = {\n          id: 'draft',\n          type: 'pen',\n          x: 0,\n          y: 0,\n          points: [imgPt],\n          strokeColor: activeColor,\n          strokeWidth,\n        };\n        draftAnnotationRef.current = draft;\n        renderCanvas(draft);\n      }\n    }\n  };\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const canvasPt = getCanvasEventPoint(e);\n\n    if (activeTab === 'crop') {\n      const drag = cropDragInfoRef.current;\n      if (drag) {\n        const currentImgPt = canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, true);\n        let newCrop: CropBox;\n\n        if (drag.handle === 'new') {\n          const minX = Math.max(0, Math.min(drag.startImgPt.x, currentImgPt.x));\n          const minY = Math.max(0, Math.min(drag.startImgPt.y, currentImgPt.y));\n          const maxX = Math.min(state.imageDimensions.width, Math.max(drag.startImgPt.x, currentImgPt.x));\n          const maxY = Math.min(state.imageDimensions.height, Math.max(drag.startImgPt.y, currentImgPt.y));\n          newCrop = {\n            x: Math.round(minX),\n            y: Math.round(minY),\n            width: Math.round(Math.max(20, maxX - minX)),\n            height: Math.round(Math.max(20, maxY - minY)),\n          };\n        } else {\n          newCrop = calculateCropDrag(\n            drag.startCrop,\n            drag.handle,\n            drag.startImgPt,\n            currentImgPt,\n            state.imageDimensions.width,\n            state.imageDimensions.height,\n            activeCropRatio,\n            state.transform\n          );\n        }\n\n        draftCropRef.current = newCrop;\n        renderCanvas(null, newCrop);\n      } else {\n        const activeCrop = draftCropRef.current || state.crop || {\n          x: 0,\n          y: 0,\n          width: state.imageDimensions.width,\n          height: state.imageDimensions.height,\n        };\n        const handle = hitTestCrop(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);\n        canvas.style.cursor = getCropCursor(handle, state.transform);\n      }\n      return;\n    }\n\n    if (activeTab === 'annotate') {\n      // If moving selected annotation\n      if (annotationDragInfoRef.current) {\n        const drag = annotationDragInfoRef.current;\n        const currentImgPt = canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false);\n        const dx = currentImgPt.x - drag.startImgPt.x;\n        const dy = currentImgPt.y - drag.startImgPt.y;\n        editor.updateAnnotation(drag.annId, {\n          x: Math.round(drag.initialAnn.x + dx),\n          y: Math.round(drag.initialAnn.y + dy),\n        });\n        return;\n      }\n\n      const startPt = dragStartPointRef.current;\n      if (!startPt) {\n        // Update cursor for hover on select tool\n        if (state.activeTool === 'select') {\n          const imgPt = canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false);\n          let hovered = false;\n          for (let i = state.annotations.length - 1; i >= 0; i--) {\n            if (hitTestAnnotation(imgPt, state.annotations[i])) {\n              hovered = true;\n              break;\n            }\n          }\n          canvas.style.cursor = hovered ? 'move' : 'default';\n        } else {\n          canvas.style.cursor = 'crosshair';\n        }\n        return;\n      }\n\n      const currentImgPt = canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false);\n\n      if (state.activeTool === 'pen' && isDrawingRef.current) {\n        currentPathRef.current.push(currentImgPt);\n        const draft: Annotation = {\n          id: 'draft',\n          type: 'pen',\n          x: 0,\n          y: 0,\n          points: [...currentPathRef.current],\n          strokeColor: activeColor,\n          strokeWidth,\n        };\n        draftAnnotationRef.current = draft;\n        renderCanvas(draft);\n      } else if (state.activeTool === 'rect') {\n        const w = currentImgPt.x - startPt.x;\n        const h = currentImgPt.y - startPt.y;\n        const draft: Annotation = {\n          id: 'draft',\n          type: 'rect',\n          x: Math.min(startPt.x, currentImgPt.x),\n          y: Math.min(startPt.y, currentImgPt.y),\n          width: Math.abs(w),\n          height: Math.abs(h),\n          strokeColor: activeColor,\n          strokeWidth,\n        };\n        draftAnnotationRef.current = draft;\n        renderCanvas(draft);\n      } else if (state.activeTool === 'circle') {\n        const rx = Math.abs(currentImgPt.x - startPt.x) / 2;\n        const ry = Math.abs(currentImgPt.y - startPt.y) / 2;\n        const draft: Annotation = {\n          id: 'draft',\n          type: 'circle',\n          x: Math.min(startPt.x, currentImgPt.x) + rx,\n          y: Math.min(startPt.y, currentImgPt.y) + ry,\n          radiusX: rx,\n          radiusY: ry,\n          strokeColor: activeColor,\n          strokeWidth,\n        };\n        draftAnnotationRef.current = draft;\n        renderCanvas(draft);\n      } else if (state.activeTool === 'arrow') {\n        const draft: Annotation = {\n          id: 'draft',\n          type: 'arrow',\n          x: startPt.x,\n          y: startPt.y,\n          endX: currentImgPt.x,\n          endY: currentImgPt.y,\n          strokeColor: activeColor,\n          strokeWidth,\n        };\n        draftAnnotationRef.current = draft;\n        renderCanvas(draft);\n      } else if (state.activeTool === 'line') {\n        const draft: Annotation = {\n          id: 'draft',\n          type: 'line',\n          x: startPt.x,\n          y: startPt.y,\n          endX: currentImgPt.x,\n          endY: currentImgPt.y,\n          strokeColor: activeColor,\n          strokeWidth,\n        };\n        draftAnnotationRef.current = draft;\n        renderCanvas(draft);\n      }\n    }\n  };\n\n  const handleMouseUp = (e: React.MouseEvent<HTMLCanvasElement>) => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const canvasPt = getCanvasEventPoint(e);\n\n    if (activeTab === 'crop') {\n      if (cropDragInfoRef.current) {\n        if (\n          draftCropRef.current &&\n          draftCropRef.current.width >= 20 &&\n          draftCropRef.current.height >= 20\n        ) {\n          editor.setCrop(draftCropRef.current, true);\n        }\n        cropDragInfoRef.current = null;\n        draftCropRef.current = null;\n        renderCanvas();\n      }\n      return;\n    }\n\n    if (activeTab === 'annotate') {\n      if (annotationDragInfoRef.current) {\n        annotationDragInfoRef.current = null;\n        return;\n      }\n\n      const startPt = dragStartPointRef.current;\n      if (startPt) {\n        const currentImgPt = canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false);\n\n        if (state.activeTool === 'pen' && isDrawingRef.current) {\n          if (currentPathRef.current.length > 1) {\n            editor.addAnnotation({\n              type: 'pen',\n              x: 0,\n              y: 0,\n              points: [...currentPathRef.current],\n              strokeColor: activeColor,\n              strokeWidth,\n            });\n          }\n          isDrawingRef.current = false;\n          currentPathRef.current = [];\n        } else if (state.activeTool === 'rect') {\n          const w = Math.abs(currentImgPt.x - startPt.x);\n          const h = Math.abs(currentImgPt.y - startPt.y);\n          if (w > 4 && h > 4) {\n            editor.addAnnotation({\n              type: 'rect',\n              x: Math.min(startPt.x, currentImgPt.x),\n              y: Math.min(startPt.y, currentImgPt.y),\n              width: w,\n              height: h,\n              strokeColor: activeColor,\n              strokeWidth,\n            });\n          }\n        } else if (state.activeTool === 'circle') {\n          const rx = Math.abs(currentImgPt.x - startPt.x) / 2;\n          const ry = Math.abs(currentImgPt.y - startPt.y) / 2;\n          if (rx > 4 && ry > 4) {\n            editor.addAnnotation({\n              type: 'circle',\n              x: Math.min(startPt.x, currentImgPt.x) + rx,\n              y: Math.min(startPt.y, currentImgPt.y) + ry,\n              radiusX: rx,\n              radiusY: ry,\n              strokeColor: activeColor,\n              strokeWidth,\n            });\n          }\n        } else if (state.activeTool === 'arrow') {\n          if (Math.hypot(currentImgPt.x - startPt.x, currentImgPt.y - startPt.y) > 4) {\n            editor.addAnnotation({\n              type: 'arrow',\n              x: startPt.x,\n              y: startPt.y,\n              endX: currentImgPt.x,\n              endY: currentImgPt.y,\n              strokeColor: activeColor,\n              strokeWidth,\n            });\n          }\n        } else if (state.activeTool === 'line') {\n          if (Math.hypot(currentImgPt.x - startPt.x, currentImgPt.y - startPt.y) > 4) {\n            editor.addAnnotation({\n              type: 'line',\n              x: startPt.x,\n              y: startPt.y,\n              endX: currentImgPt.x,\n              endY: currentImgPt.y,\n              strokeColor: activeColor,\n              strokeWidth,\n            });\n          }\n        }\n\n        draftAnnotationRef.current = null;\n        dragStartPointRef.current = null;\n        renderCanvas();\n      }\n    }\n  };\n\n  const handleAddText = () => {\n    if (!textInput.trim()) return;\n    editor.addAnnotation({\n      type: 'text',\n      x: 50,\n      y: 50,\n      text: textInput.trim(),\n      fontSize,\n      color: activeColor,\n    });\n    setTextInput('');\n  };\n\n  const handleExport = async () => {\n    const dataUrl = await editor.toDataURL(exportOptions);\n    if (onSave) {\n      onSave(dataUrl);\n    } else {\n      // Default download trigger\n      const link = document.createElement('a');\n      link.download = `edited-image-${Date.now()}.png`;\n      link.href = dataUrl;\n      link.click();\n    }\n  };\n\n  return (\n    <div\n      className={`flex flex-col bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-2xl text-slate-100 ${className}`}\n      style={style}\n    >\n      {/* Top Action Header */}\n      <div className=\"flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3\">\n        {/* Navigation Tabs */}\n        <div className=\"flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs\">\n          <button\n            type=\"button\"\n            onClick={() => {\n              setActiveTab('crop');\n              editor.setTool('crop');\n            }}\n            className={`px-3 py-1.5 rounded-md font-medium transition-colors ${\n              activeTab === 'crop' ? 'bg-indigo-600 text-white shadow' : 'text-slate-400 hover:text-slate-200'\n            }`}\n          >\n            Transform & Crop\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setActiveTab('adjust');\n              editor.setTool('select');\n            }}\n            className={`px-3 py-1.5 rounded-md font-medium transition-colors ${\n              activeTab === 'adjust' ? 'bg-indigo-600 text-white shadow' : 'text-slate-400 hover:text-slate-200'\n            }`}\n          >\n            Adjustments\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setActiveTab('annotate');\n              editor.setTool('pen');\n            }}\n            className={`px-3 py-1.5 rounded-md font-medium transition-colors ${\n              activeTab === 'annotate' ? 'bg-indigo-600 text-white shadow' : 'text-slate-400 hover:text-slate-200'\n            }`}\n          >\n            Annotations\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setActiveTab('depth');\n              editor.setTool('select');\n            }}\n            className={`px-3 py-1.5 rounded-md font-medium transition-colors ${\n              activeTab === 'depth' ? 'bg-indigo-600 text-white shadow' : 'text-slate-400 hover:text-slate-200'\n            }`}\n          >\n            Depth Mask\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setActiveTab('ai');\n              editor.setTool('select');\n            }}\n            className={`px-3 py-1.5 rounded-md font-medium transition-colors flex items-center gap-1.5 ${\n              activeTab === 'ai' ? 'bg-indigo-600 text-white shadow' : 'text-slate-400 hover:text-slate-200'\n            }`}\n          >\n            <svg className=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n              <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\" />\n            </svg>\n            AI Tools\n          </button>\n        </div>\n\n        {/* Global Action Tools (Undo/Redo, Zoom, Compare, Save) */}\n        <div className=\"flex items-center gap-2 text-xs\">\n          <button\n            type=\"button\"\n            disabled={!editor.canUndo}\n            onClick={() => editor.undo()}\n            className=\"p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-800\"\n            title=\"Undo\"\n          >\n            ↩\n          </button>\n          <button\n            type=\"button\"\n            disabled={!editor.canRedo}\n            onClick={() => editor.redo()}\n            className=\"p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-800\"\n            title=\"Redo\"\n          >\n            ↪\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => editor.reset()}\n            className=\"px-2 py-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-400 hover:text-slate-200 hover:bg-slate-800\"\n          >\n            Reset\n          </button>\n\n          <div className=\"h-4 w-px bg-slate-800 mx-1\" />\n\n          {/* Zoom */}\n          <button\n            type=\"button\"\n            onClick={() => editor.zoomOut()}\n            className=\"p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 hover:bg-slate-800\"\n            title=\"Zoom Out\"\n          >\n            -\n          </button>\n          <span className=\"font-mono text-slate-400 w-10 text-center\">{Math.round(state.zoom * 100)}%</span>\n          <button\n            type=\"button\"\n            onClick={() => editor.zoomIn()}\n            className=\"p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 hover:bg-slate-800\"\n            title=\"Zoom In\"\n          >\n            +\n          </button>\n\n          <div className=\"h-4 w-px bg-slate-800 mx-1\" />\n\n          {/* Live Compare */}\n          <button\n            type=\"button\"\n            onMouseDown={() => editor.setComparing(true)}\n            onMouseUp={() => editor.setComparing(false)}\n            onMouseLeave={() => editor.setComparing(false)}\n            className=\"px-2.5 py-1.5 rounded-lg border border-slate-800 bg-slate-900 text-amber-400 hover:bg-slate-800 select-none active:bg-amber-950/40\"\n          >\n            Hold Compare\n          </button>\n\n          {/* Save / Export */}\n          <button\n            type=\"button\"\n            onClick={handleExport}\n            className=\"px-4 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium shadow-md shadow-emerald-900/30 transition-colors\"\n          >\n            Export Image\n          </button>\n        </div>\n      </div>\n\n      {/* Main Viewport + Sidebar Layout */}\n      <div className=\"flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]\">\n        {/* Canvas Area */}\n        <div\n          ref={containerRef}\n          className=\"relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none\"\n        >\n          <canvas\n            ref={canvasRef}\n            onMouseDown={handleMouseDown}\n            onMouseMove={handleMouseMove}\n            onMouseUp={handleMouseUp}\n            onMouseLeave={handleMouseUp}\n            className=\"absolute inset-0 w-full h-full block\"\n          />\n        </div>\n\n        {/* Tab Controls Sidebar */}\n        <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]\">\n          {/* TAB 1: CROP & TRANSFORM */}\n          {activeTab === 'crop' && (\n            <div className=\"flex flex-col gap-4 text-xs\">\n              <span className=\"font-semibold text-slate-200 uppercase tracking-wider text-[11px]\">\n                Aspect Ratio Presets\n              </span>\n              <div className=\"grid grid-cols-3 gap-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setActiveCropRatio(null);\n                    editor.applyCropPreset(null);\n                  }}\n                  className={`px-2.5 py-2 rounded-lg border font-medium ${\n                    activeCropRatio === null && state.crop\n                      ? 'bg-indigo-600 border-indigo-500 text-white'\n                      : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700'\n                  }`}\n                >\n                  Freeform\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setActiveCropRatio(1);\n                    editor.applyCropPreset(1);\n                  }}\n                  className={`px-2.5 py-2 rounded-lg border font-medium ${\n                    activeCropRatio === 1\n                      ? 'bg-indigo-600 border-indigo-500 text-white'\n                      : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700'\n                  }`}\n                >\n                  1:1 Square\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setActiveCropRatio(4 / 3);\n                    editor.applyCropPreset(4 / 3);\n                  }}\n                  className={`px-2.5 py-2 rounded-lg border font-medium ${\n                    activeCropRatio === 4 / 3\n                      ? 'bg-indigo-600 border-indigo-500 text-white'\n                      : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700'\n                  }`}\n                >\n                  4:3 Standard\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setActiveCropRatio(16 / 9);\n                    editor.applyCropPreset(16 / 9);\n                  }}\n                  className={`px-2.5 py-2 rounded-lg border font-medium ${\n                    activeCropRatio === 16 / 9\n                      ? 'bg-indigo-600 border-indigo-500 text-white'\n                      : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700'\n                  }`}\n                >\n                  16:9 Wide\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setActiveCropRatio(3 / 2);\n                    editor.applyCropPreset(3 / 2);\n                  }}\n                  className={`px-2.5 py-2 rounded-lg border font-medium ${\n                    activeCropRatio === 3 / 2\n                      ? 'bg-indigo-600 border-indigo-500 text-white'\n                      : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700'\n                  }`}\n                >\n                  3:2 Photo\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setActiveCropRatio(null);\n                    editor.resetCrop();\n                  }}\n                  className=\"px-2.5 py-2 rounded-lg bg-rose-950/40 hover:bg-rose-900/60 text-rose-300 border border-rose-800/40 font-medium\"\n                >\n                  Clear Crop\n                </button>\n              </div>\n\n              <div className=\"h-px bg-slate-800 my-1\" />\n\n              <span className=\"font-semibold text-slate-200 uppercase tracking-wider text-[11px]\">\n                Orientation & Flips\n              </span>\n              <div className=\"grid grid-cols-2 gap-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => editor.rotate(-90)}\n                  className=\"px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700\"\n                >\n                  Rotate -90°\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => editor.rotate(90)}\n                  className=\"px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700\"\n                >\n                  Rotate +90°\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => editor.flipHorizontal()}\n                  className={`px-3 py-2 rounded-lg border transition-colors ${\n                    state.transform.flipH\n                      ? 'bg-indigo-600 border-indigo-500 text-white'\n                      : 'bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700'\n                  }`}\n                >\n                  Flip Horizontal\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => editor.flipVertical()}\n                  className={`px-3 py-2 rounded-lg border transition-colors ${\n                    state.transform.flipV\n                      ? 'bg-indigo-600 border-indigo-500 text-white'\n                      : 'bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700'\n                  }`}\n                >\n                  Flip Vertical\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* TAB 2: ADJUSTMENTS */}\n          {activeTab === 'adjust' && (\n            <div className=\"flex flex-col gap-3 text-xs\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"font-semibold text-slate-200 uppercase tracking-wider text-[11px]\">\n                  Color Adjustments\n                </span>\n                <button\n                  type=\"button\"\n                  onClick={() => editor.resetAdjustments()}\n                  className=\"text-[10px] text-rose-400 hover:underline\"\n                >\n                  Reset Sliders\n                </button>\n              </div>\n\n              {/* Brightness */}\n              <div>\n                <div className=\"flex justify-between text-slate-400 mb-1\">\n                  <span>Brightness</span>\n                  <span className=\"font-mono\">{state.adjustments.brightness}</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"-100\"\n                  max=\"100\"\n                  value={state.adjustments.brightness}\n                  onChange={(e) => editor.setAdjustments({ brightness: Number(e.target.value) })}\n                  className=\"w-full accent-indigo-500\"\n                />\n              </div>\n\n              {/* Contrast */}\n              <div>\n                <div className=\"flex justify-between text-slate-400 mb-1\">\n                  <span>Contrast</span>\n                  <span className=\"font-mono\">{state.adjustments.contrast}</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"-100\"\n                  max=\"100\"\n                  value={state.adjustments.contrast}\n                  onChange={(e) => editor.setAdjustments({ contrast: Number(e.target.value) })}\n                  className=\"w-full accent-indigo-500\"\n                />\n              </div>\n\n              {/* Saturation */}\n              <div>\n                <div className=\"flex justify-between text-slate-400 mb-1\">\n                  <span>Saturation</span>\n                  <span className=\"font-mono\">{state.adjustments.saturation}</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"-100\"\n                  max=\"100\"\n                  value={state.adjustments.saturation}\n                  onChange={(e) => editor.setAdjustments({ saturation: Number(e.target.value) })}\n                  className=\"w-full accent-indigo-500\"\n                />\n              </div>\n\n              {/* Exposure */}\n              <div>\n                <div className=\"flex justify-between text-slate-400 mb-1\">\n                  <span>Exposure</span>\n                  <span className=\"font-mono\">{state.adjustments.exposure}</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"-100\"\n                  max=\"100\"\n                  value={state.adjustments.exposure}\n                  onChange={(e) => editor.setAdjustments({ exposure: Number(e.target.value) })}\n                  className=\"w-full accent-indigo-500\"\n                />\n              </div>\n\n              {/* Temperature / Warmth */}\n              <div>\n                <div className=\"flex justify-between text-slate-400 mb-1\">\n                  <span>Warmth / Temperature</span>\n                  <span className=\"font-mono\">{state.adjustments.temperature}</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"-100\"\n                  max=\"100\"\n                  value={state.adjustments.temperature}\n                  onChange={(e) => editor.setAdjustments({ temperature: Number(e.target.value) })}\n                  className=\"w-full accent-indigo-500\"\n                />\n              </div>\n\n              {/* Tint (process 2 white balance) */}\n              <div>\n                <div className=\"flex justify-between text-slate-400 mb-1\">\n                  <span>Tint</span>\n                  <span className=\"font-mono\">{state.adjustments.tint ?? 0}</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"-100\"\n                  max=\"100\"\n                  aria-label=\"Tint\"\n                  disabled={legacyProcess}\n                  value={state.adjustments.tint ?? 0}\n                  onChange={(e) => editor.setAdjustments({ tint: Number(e.target.value) })}\n                  className=\"w-full accent-indigo-500 disabled:opacity-40\"\n                />\n              </div>\n\n              {legacyProcess && (\n                <div\n                  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\"\n                  data-testid=\"image-editor-process-notice\"\n                >\n                  <span>Legacy rendering (process 1). Tint needs the current process.</span>\n                  <button\n                    type=\"button\"\n                    onClick={() => editor.upgradeProcess()}\n                    className=\"shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30\"\n                  >\n                    Update\n                  </button>\n                </div>\n              )}\n\n              {/* Blur */}\n              <div>\n                <div className=\"flex justify-between text-slate-400 mb-1\">\n                  <span>Blur</span>\n                  <span className=\"font-mono\">{state.adjustments.blur}px</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"0\"\n                  max=\"30\"\n                  value={state.adjustments.blur}\n                  onChange={(e) => editor.setAdjustments({ blur: Number(e.target.value) })}\n                  className=\"w-full accent-indigo-500\"\n                />\n              </div>\n\n              {/* Opacity */}\n              <div>\n                <div className=\"flex justify-between text-slate-400 mb-1\">\n                  <span>Opacity</span>\n                  <span className=\"font-mono\">{Math.round(state.adjustments.opacity * 100)}%</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"0\"\n                  max=\"1\"\n                  step=\"0.05\"\n                  value={state.adjustments.opacity}\n                  onChange={(e) => editor.setAdjustments({ opacity: Number(e.target.value) })}\n                  className=\"w-full accent-indigo-500\"\n                />\n              </div>\n            </div>\n          )}\n\n          {/* TAB 3: ANNOTATIONS */}\n          {activeTab === 'annotate' && (\n            <div className=\"flex flex-col gap-3 text-xs\">\n              <span className=\"font-semibold text-slate-200 uppercase tracking-wider text-[11px]\">\n                Draw & Annotate\n              </span>\n\n              {/* Tool Picker */}\n              <div className=\"grid grid-cols-3 gap-1.5\">\n                {(['pen', 'rect', 'circle', 'arrow', 'line'] as ImageEditorTool[]).map((t) => (\n                  <button\n                    key={t}\n                    type=\"button\"\n                    onClick={() => editor.setTool(t)}\n                    className={`py-1.5 px-2 rounded-lg font-medium capitalize border transition-colors ${\n                      state.activeTool === t\n                        ? 'bg-indigo-600 border-indigo-500 text-white'\n                        : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'\n                    }`}\n                  >\n                    {t}\n                  </button>\n                ))}\n              </div>\n\n              {/* Color & Size */}\n              <div className=\"flex items-center gap-2 mt-2\">\n                <label className=\"text-slate-400\">Color:</label>\n                <input\n                  type=\"color\"\n                  value={activeColor}\n                  onChange={(e) => setActiveColor(e.target.value)}\n                  className=\"w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent\"\n                />\n                <div className=\"flex-1 ml-2\">\n                  <div className=\"flex justify-between text-slate-400 mb-0.5\">\n                    <span>Width:</span>\n                    <span className=\"font-mono\">{strokeWidth}px</span>\n                  </div>\n                  <input\n                    type=\"range\"\n                    min=\"1\"\n                    max=\"20\"\n                    value={strokeWidth}\n                    onChange={(e) => setStrokeWidth(Number(e.target.value))}\n                    className=\"w-full accent-indigo-500\"\n                  />\n                </div>\n              </div>\n\n              <div className=\"h-px bg-slate-800 my-1\" />\n\n              {/* Text Tool */}\n              <span className=\"font-semibold text-slate-200 uppercase tracking-wider text-[11px]\">Add Text</span>\n              <div className=\"flex gap-2\">\n                <input\n                  type=\"text\"\n                  placeholder=\"Type watermark or label...\"\n                  value={textInput}\n                  onChange={(e) => setTextInput(e.target.value)}\n                  onKeyDown={(e) => e.key === 'Enter' && handleAddText()}\n                  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\"\n                />\n                <button\n                  type=\"button\"\n                  onClick={handleAddText}\n                  className=\"px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium shadow\"\n                >\n                  Add\n                </button>\n              </div>\n              <div className=\"flex items-center justify-between text-slate-400\">\n                <span>Font Size:</span>\n                <span className=\"font-mono\">{fontSize}px</span>\n              </div>\n              <input\n                type=\"range\"\n                min=\"12\"\n                max=\"72\"\n                value={fontSize}\n                onChange={(e) => setFontSize(Number(e.target.value))}\n                className=\"w-full accent-indigo-500\"\n              />\n\n              {/* Layers & Selected Annotation */}\n              <div className=\"h-px bg-slate-800 my-1\" />\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-slate-400\">Layers ({state.annotations.length})</span>\n                {state.selectedAnnotationId && (\n                  <button\n                    type=\"button\"\n                    onClick={() => editor.removeAnnotation(state.selectedAnnotationId!)}\n                    className=\"text-rose-400 hover:underline text-[11px]\"\n                  >\n                    Delete Selected\n                  </button>\n                )}\n                {state.annotations.length > 0 && (\n                  <button\n                    type=\"button\"\n                    onClick={() => editor.clearAnnotations()}\n                    className=\"text-slate-400 hover:text-slate-200 text-[11px]\"\n                  >\n                    Clear All\n                  </button>\n                )}\n              </div>\n            </div>\n          )}\n\n          {/* TAB 4: GLEAMFORGE DEPTH MASKING */}\n          {activeTab === 'depth' && (\n            <div className=\"flex flex-col gap-3 text-xs\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"font-semibold text-slate-200 uppercase tracking-wider text-[11px]\">\n                  Depth Masking\n                </span>\n                <button\n                  type=\"button\"\n                  onClick={() => editor.resetDepthMask()}\n                  className=\"text-[10px] text-rose-400 hover:underline\"\n                >\n                  Reset Mask\n                </button>\n              </div>\n\n              <label className=\"flex items-center gap-2 cursor-pointer text-slate-300\">\n                <input\n                  type=\"checkbox\"\n                  checked={state.depthMask.enabled}\n                  onChange={(e) => editor.setDepthMask({ enabled: e.target.checked })}\n                  className=\"rounded accent-indigo-500\"\n                />\n                <span>Enable Depth / Alpha Mask</span>\n              </label>\n\n              {state.depthMask.enabled && (\n                <>\n                  <div>\n                    <label className=\"text-slate-400 block mb-1\">Mask Image URL:</label>\n                    <input\n                      type=\"text\"\n                      placeholder=\"https://.../depthmap.png\"\n                      value={state.depthMask.maskSource || ''}\n                      onChange={(e) => editor.setDepthMask({ maskSource: e.target.value || null })}\n                      className=\"w-full bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-100 placeholder-slate-500\"\n                    />\n                  </div>\n\n                  <div className=\"flex gap-2\">\n                    <button\n                      type=\"button\"\n                      onClick={() => editor.setDepthMask({ mode: 'threshold' })}\n                      className={`flex-1 py-1.5 rounded-lg border text-xs font-medium ${\n                        state.depthMask.mode === 'threshold'\n                          ? 'bg-indigo-600 border-indigo-500 text-white'\n                          : 'bg-slate-800 border-slate-700 text-slate-300'\n                      }`}\n                    >\n                      Threshold Mode\n                    </button>\n                    <button\n                      type=\"button\"\n                      onClick={() => editor.setDepthMask({ mode: 'brightness' })}\n                      className={`flex-1 py-1.5 rounded-lg border text-xs font-medium ${\n                        state.depthMask.mode === 'brightness'\n                          ? 'bg-indigo-600 border-indigo-500 text-white'\n                          : 'bg-slate-800 border-slate-700 text-slate-300'\n                      }`}\n                    >\n                      Brightness Mode\n                    </button>\n                  </div>\n\n                  <div>\n                    <div className=\"flex justify-between text-slate-400 mb-1\">\n                      <span>Depth Start (Lower):</span>\n                      <span className=\"font-mono\">{state.depthMask.depthRange[0]}</span>\n                    </div>\n                    <input\n                      type=\"range\"\n                      min=\"0\"\n                      max=\"255\"\n                      value={state.depthMask.depthRange[0]}\n                      onChange={(e) =>\n                        editor.setDepthMask({\n                          depthRange: [Number(e.target.value), state.depthMask.depthRange[1]],\n                        })\n                      }\n                      className=\"w-full accent-indigo-500\"\n                    />\n                  </div>\n\n                  <div>\n                    <div className=\"flex justify-between text-slate-400 mb-1\">\n                      <span>Depth Stop (Upper):</span>\n                      <span className=\"font-mono\">{state.depthMask.depthRange[1]}</span>\n                    </div>\n                    <input\n                      type=\"range\"\n                      min=\"0\"\n                      max=\"255\"\n                      value={state.depthMask.depthRange[1]}\n                      onChange={(e) =>\n                        editor.setDepthMask({\n                          depthRange: [state.depthMask.depthRange[0], Number(e.target.value)],\n                        })\n                      }\n                      className=\"w-full accent-indigo-500\"\n                    />\n                  </div>\n\n                  <div>\n                    <div className=\"flex justify-between text-slate-400 mb-1\">\n                      <span>Softness:</span>\n                      <span className=\"font-mono\">{state.depthMask.softness}</span>\n                    </div>\n                    <input\n                      type=\"range\"\n                      min=\"1\"\n                      max=\"50\"\n                      value={state.depthMask.softness}\n                      onChange={(e) => editor.setDepthMask({ softness: Number(e.target.value) })}\n                      className=\"w-full accent-indigo-500\"\n                    />\n                  </div>\n\n                  <label className=\"flex items-center gap-2 cursor-pointer text-slate-300 mt-1\">\n                    <input\n                      type=\"checkbox\"\n                      checked={state.depthMask.invert}\n                      onChange={(e) => editor.setDepthMask({ invert: e.target.checked })}\n                      className=\"rounded accent-indigo-500\"\n                    />\n                    <span>Invert Mask</span>\n                  </label>\n                </>\n              )}\n            </div>\n          )}\n\n          {/* TAB 5: AI TOOLS / INPAINTING & BACKGROUND REMOVAL */}\n          {activeTab === 'ai' && (\n            <div className=\"flex flex-col gap-4 text-xs\">\n              {/* Background Removal Section */}\n              <div className=\"p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5\">\n                    <svg className=\"w-3.5 h-3.5 text-indigo-400\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                      <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\" />\n                    </svg>\n                    Background Removal\n                  </span>\n                  {isRemovingBg && (\n                    <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\">\n                      Removing...\n                    </span>\n                  )}\n                </div>\n\n                <p className=\"text-slate-400 text-[11px] leading-relaxed\">\n                  Isolate foreground subject with AI alpha transparency segmentation.\n                </p>\n\n                <button\n                  type=\"button\"\n                  onClick={handleRemoveBackground}\n                  disabled={isRemovingBg || isInpainting}\n                  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\"\n                >\n                  {isRemovingBg ? (\n                    <>\n                      <div className=\"w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin\" />\n                      Removing Background...\n                    </>\n                  ) : (\n                    <>\n                      <svg className=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                        <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\" />\n                      </svg>\n                      Remove Background\n                    </>\n                  )}\n                </button>\n              </div>\n\n              {/* AI Inpainting / Generative Fill Section */}\n              <div className=\"p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5\">\n                    <svg className=\"w-3.5 h-3.5 text-purple-400\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                      <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\" />\n                      <path d=\"m14 7 3 3\" />\n                    </svg>\n                    Generative Inpainting\n                  </span>\n                  {isInpainting && (\n                    <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\">\n                      Inpainting...\n                    </span>\n                  )}\n                </div>\n\n                <p className=\"text-slate-400 text-[11px] leading-relaxed\">\n                  Replace, modify, or fill selected regions using prompt-guided generative inpainting.\n                </p>\n\n                <div className=\"flex flex-col gap-1\">\n                  <label htmlFor=\"ai-inpaint-prompt-react\" className=\"text-slate-300 text-[11px] font-medium\">Prompt</label>\n                  <textarea\n                    id=\"ai-inpaint-prompt-react\"\n                    value={inpaintPrompt}\n                    onChange={(e) => setInpaintPrompt(e.target.value)}\n                    placeholder=\"e.g. replace sunglasses with steampunk goggles, remove person in background...\"\n                    rows={3}\n                    className=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none\"\n                  />\n                </div>\n\n                <div className=\"flex flex-col gap-1\">\n                  <span className=\"text-slate-300 text-[11px] font-medium\">Target Mask Region</span>\n                  <div className=\"grid grid-cols-2 gap-1.5\">\n                    <button\n                      type=\"button\"\n                      onClick={() => setInpaintMaskMode('annotations')}\n                      className={`px-2 py-1.5 rounded border text-[11px] font-medium text-left transition-colors ${\n                        inpaintMaskMode === 'annotations'\n                          ? 'bg-purple-600/30 border-purple-500 text-purple-200'\n                          : 'bg-slate-900 border-slate-700 text-slate-400 hover:text-slate-200'\n                      }`}\n                    >\n                      Drawn Shapes ({state.annotations.length})\n                    </button>\n                    <button\n                      type=\"button\"\n                      onClick={() => setInpaintMaskMode('crop')}\n                      className={`px-2 py-1.5 rounded border text-[11px] font-medium text-left transition-colors ${\n                        inpaintMaskMode === 'crop'\n                          ? 'bg-purple-600/30 border-purple-500 text-purple-200'\n                          : 'bg-slate-900 border-slate-700 text-slate-400 hover:text-slate-200'\n                      }`}\n                    >\n                      Crop Box ({state.crop ? 'Selected' : 'Full'})\n                    </button>\n                  </div>\n                </div>\n\n                <button\n                  type=\"button\"\n                  onClick={handleInpaint}\n                  disabled={isInpainting || isRemovingBg || !inpaintPrompt.trim()}\n                  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\"\n                >\n                  {isInpainting ? (\n                    <>\n                      <div className=\"w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin\" />\n                      Generating Inpaint...\n                    </>\n                  ) : (\n                    <>\n                      <svg className=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                        <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\" />\n                      </svg>\n                      Apply Inpainting\n                    </>\n                  )}\n                </button>\n              </div>\n\n              {aiError && (\n                <div className=\"p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]\">\n                  {aiError}\n                </div>\n              )}\n\n              {aiSuccess && (\n                <div className=\"p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]\">\n                  {aiSuccess}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","names":["useRef","useEffect","useState","useCallback","useRef","useState","useCallback","useEffect","currentImgPt"]}

package/dist/{chunk-MHTAR3RS.js → chunk-QVQYYHJ5.js}

@@ -29,8 +29,12 @@ function useSpreadsheetEditor(options = {}) {
   const [activeCell, setActiveCell] = useState(controller.activeCell);
   const [selectedRange, setSelectedRange] = useState(controller.selectedRange);
   const [editingCell, setEditingCell] = useState(null);
-  const [draftValue, setDraftValue] = useState("");
+  const [draftValue, setDraftState] = useState("");
   settersRef.current = { setDoc, setActiveCell, setSelectedRange };
+  const setDraftValue = useCallback((value) => {
+    controller.draftValue = value;
+    setDraftState(value);
+  }, [controller]);
   const setCellValue = useCallback((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
@@ -163,21 +167,37 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-import { useRef as useRef5, useState as useState4, useMemo as useMemo3, useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import { useRef as useRef5, useState as useState5, useMemo as useMemo3, useEffect as useEffect4, useCallback as useCallback3 } from "react";
 import {
   indexToColName,
   getSpreadsheetMenuItems,
   normalizeRange as normalizeRange2,
-  rangeContains
+  rangeContains,
+  formatCellDisplay
 } from "@pixerate/editor/spreadsheet";
 
 // src/spreadsheet/SpreadsheetContextMenu.tsx
-import React, { useEffect, useRef as useRef2 } from "react";
+import React, { useEffect, useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
+import { clampMenuPosition } from "@pixerate/editor/spreadsheet";
 import { jsx, jsxs } from "react/jsx-runtime";
+var VIEWPORT_MARGIN = 4;
 var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
   const menuRef = useRef2(null);
   const onCloseRef = useRef2(onClose);
   onCloseRef.current = onClose;
+  const [position, setPosition] = useState2({ x, y });
+  useLayoutEffect(() => {
+    const menu = menuRef.current;
+    if (!menu || typeof window === "undefined") return;
+    const { width, height } = menu.getBoundingClientRect();
+    const next = clampMenuPosition(
+      { x, y },
+      { width, height },
+      { width: window.innerWidth, height: window.innerHeight },
+      VIEWPORT_MARGIN
+    );
+    setPosition((prev) => prev.x === next.x && prev.y === next.y ? prev : next);
+  }, [x, y, items]);
   useEffect(() => {
     const handlePointer = (e) => {
       if (!menuRef.current?.contains(e.target)) onCloseRef.current();
@@ -199,7 +219,13 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
       role: "menu",
       "aria-label": "Table actions",
       className: "fixed z-50 min-w-[14rem] rounded-md border border-border bg-popover py-1 text-xs text-popover-foreground shadow-lg",
-      style: { left: x, top: y, background: "var(--popover, var(--background, #fff))" },
+      style: {
+        left: position.x,
+        top: position.y,
+        maxHeight: `calc(100vh - ${VIEWPORT_MARGIN * 2}px)`,
+        overflowY: "auto",
+        background: "var(--popover, var(--background, #fff))"
+      },
       onContextMenu: (e) => e.preventDefault(),
       onKeyDown: (e) => e.stopPropagation(),
       children: items.map((item) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
@@ -236,7 +262,7 @@ var SpreadsheetGroupRow = ({
 }) => {
   const labelColId = columns.some((c) => c.column.id === groupColId) ? groupColId : columns[0]?.column.id;
   return /* @__PURE__ */ jsxs2("tr", { className: "border-b border-border bg-muted/40 font-semibold", "data-group-key": group.key, style: { height: 28 }, children: [
-    /* @__PURE__ */ jsx2("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/60 border-r border-border text-center", children: /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx2("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center", children: /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
@@ -267,7 +293,7 @@ var SpreadsheetGroupRow = ({
 };
 
 // src/spreadsheet/useSpreadsheetTableInteractions.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
 import {
   computeFillTarget,
   normalizeRange
@@ -312,13 +338,14 @@ function useSpreadsheetClipboard(gridRef, state, readOnly) {
     setTimeout(() => {
       if (copiedRef.current) return;
       const s = stateRef.current;
-      navigator.clipboard?.writeText(s.exportToTsv(s.selectedRange));
+      Promise.resolve(navigator.clipboard?.writeText(s.exportToTsv(s.selectedRange))).catch(() => {
+      });
     }, 0);
   }, []);
   return { copyShortcutFallback };
 }
 function useFillHandle(state) {
-  const [drag, setDrag] = useState2(null);
+  const [drag, setDrag] = useState3(null);
   const dragRef = useRef3(drag);
   dragRef.current = drag;
   const stateRef = useRef3(state);
@@ -349,15 +376,15 @@ function useFillHandle(state) {
 }
 
 // src/spreadsheet/FormulaHints.tsx
-import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo2, useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
 import { applyFormulaSuggestion, getFormulaHints } from "@pixerate/editor/spreadsheet";
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
-  const [caret, setCaret] = useState3(null);
-  const [focused, setFocused] = useState3(false);
-  const [selected, setSelected] = useState3(0);
-  const [dismissed, setDismissed] = useState3(false);
-  const [position, setPosition] = useState3(null);
+  const [caret, setCaret] = useState4(null);
+  const [focused, setFocused] = useState4(false);
+  const [selected, setSelected] = useState4(0);
+  const [dismissed, setDismissed] = useState4(false);
+  const [position, setPosition] = useState4(null);
   const pendingCaret = useRef4(null);
   const hints = useMemo2(
     () => getFormulaHints(value, caret ?? value.length, { limit }),
@@ -426,7 +453,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
       input.removeEventListener("keydown", onKeyDown);
     };
   }, [inputRef]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const input = inputRef.current;
     const at = pendingCaret.current;
     if (!input || at === null || input.value !== value) return;
@@ -435,7 +462,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
     setCaret(at);
     setSelected(0);
   }, [value, inputRef]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const input = inputRef.current;
     if (!visible || !input) return;
     const rect = input.getBoundingClientRect();
@@ -512,6 +539,20 @@ function frozenCellStyle(viewRow, viewCol) {
     background: "var(--background, #fff)"
   };
 }
+var coordKey = (cell) => cell ? `${indexToColName(cell.col)}${cell.row + 1}` : "";
+function spillBorderStyle(range, row, col) {
+  const line = "1px solid color-mix(in srgb, var(--primary, #6366f1) 60%, transparent)";
+  return {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 5,
+    borderTop: row === range.startRow ? line : void 0,
+    borderBottom: row === range.endRow ? line : void 0,
+    borderLeft: col === range.startCol ? line : void 0,
+    borderRight: col === range.endCol ? line : void 0
+  };
+}
 var SpreadsheetEditor = ({
   state: externalState,
   readOnly = false,
@@ -525,14 +566,14 @@ var SpreadsheetEditor = ({
   const gridRef = useRef5(null);
   const formulaBarRef = useRef5(null);
   const cellInputRef = useRef5(null);
-  const [resizingColId, setResizingColId] = useState4(null);
-  const [hoveredColId, setHoveredColId] = useState4(null);
-  const [resizeStartX, setResizeStartX] = useState4(0);
-  const [resizeStartWidth, setResizeStartWidth] = useState4(0);
+  const [resizingColId, setResizingColId] = useState5(null);
+  const [hoveredColId, setHoveredColId] = useState5(null);
+  const [resizeStartX, setResizeStartX] = useState5(0);
+  const [resizeStartWidth, setResizeStartWidth] = useState5(0);
   const view = state.viewModel;
   const { copyShortcutFallback } = useSpreadsheetClipboard(gridRef, state, readOnly);
   const { fillTarget, startFill, extendFill } = useFillHandle(state);
-  const [menu, setMenu] = useState4(null);
+  const [menu, setMenu] = useState5(null);
   const filter = state.document.table?.filter;
   const filteredColIds = useMemo3(
     () => new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []),
@@ -554,12 +595,18 @@ var SpreadsheetEditor = ({
     if (!row || !col) return "";
     return state.getCell(row.id, col.id).raw;
   }, [state.activeCell, state.document]);
+  const activeSpill = useMemo3(
+    () => state.activeCell ? state.controller.getSpillAt(state.activeCell.row, state.activeCell.col) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.controller, state.activeCell, state.document]
+  );
+  const spillFormula = activeSpill && !activeRawValue && activeSpill.key !== coordKey(state.activeCell) ? activeSpill.formula : "";
   const coordLabel = useMemo3(() => {
     if (!state.activeCell) return "--";
     const colName = indexToColName(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const [formulaDraft, setFormulaDraft] = useState4(null);
+  const [formulaDraft, setFormulaDraft] = useState5(null);
   const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
   const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
   useEffect4(() => {
@@ -603,7 +650,10 @@ var SpreadsheetEditor = ({
         e.preventDefault();
         state.commitEditing();
         state.moveCursor(e.shiftKey ? "left" : "right");
+      } else {
+        return;
       }
+      gridRef.current?.focus();
       return;
     }
     if (!state.activeCell) return;
@@ -651,6 +701,7 @@ var SpreadsheetEditor = ({
     } else if (!readOnly && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
       const col = state.document.columns[state.activeCell.col];
       if (!col?.readOnly) {
+        e.preventDefault();
         state.startEditing(state.activeCell.row, state.activeCell.col, e.key);
       }
     }
@@ -843,7 +894,9 @@ var SpreadsheetEditor = ({
               placeholder: "Enter a value or formula (e.g. =SUM(A1:A5))",
               "aria-label": "Formula bar",
               readOnly: formulaBarReadOnly,
-              value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
+              "data-spill-formula": !state.editingCell && formulaDraft === null && spillFormula ? "true" : void 0,
+              style: !state.editingCell && formulaDraft === null && spillFormula ? { color: "var(--muted-foreground, #94a3b8)" } : void 0,
+              value: state.editingCell ? state.draftValue : formulaDraft ?? (activeRawValue || spillFormula),
               onFocus: () => {
                 if (!state.editingCell) setFormulaDraft(activeRawValue);
               },
@@ -878,8 +931,8 @@ var SpreadsheetEditor = ({
           )
         ] }),
         /* @__PURE__ */ jsx4("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ jsxs4("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
-          /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs4("tr", { className: "h-7 bg-muted/60 sticky top-0 z-20 border-b border-border shadow-xs", children: [
-            /* @__PURE__ */ jsx4("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted/90 border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
+          /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs4("tr", { className: "h-7 bg-muted sticky top-0 z-20 border-b border-border shadow-xs", children: [
+            /* @__PURE__ */ jsx4("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
             view.columns.map(({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ jsxs4(
               "th",
               {
@@ -976,7 +1029,7 @@ var SpreadsheetEditor = ({
                   /* @__PURE__ */ jsx4(
                     "td",
                     {
-                      className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/50 border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none",
+                      className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none",
                       style: viewRow.frozen ? { top: COLUMN_HEADER_HEIGHT + viewRow.stickyTop, zIndex: 15 } : void 0,
                       children: displayRowIndex + 1
                     }
@@ -1023,6 +1076,10 @@ var SpreadsheetEditor = ({
                                 value: state.draftValue,
                                 onChange: (e) => state.setDraftValue(e.target.value),
                                 onBlur: () => state.commitEditing(),
+                                onFocus: (e) => {
+                                  const end = e.currentTarget.value.length;
+                                  e.currentTarget.setSelectionRange(end, end);
+                                },
                                 autoFocus: true
                               }
                             ),
@@ -1032,9 +1089,10 @@ var SpreadsheetEditor = ({
                             {
                               className: `truncate block max-w-full ${cell.error ? "text-destructive font-semibold" : ""}`,
                               title: cell.error ? cell.errorMessage ?? cell.error : void 0,
-                              children: cell.error || (cell.value ?? "")
+                              children: formatCellDisplay(cell)
                             }
                           ),
+                          activeSpill && rangeContains(activeSpill.range, rIdx, cIdx) && /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "spreadsheet-spill-border", style: spillBorderStyle(activeSpill.range, rIdx, cIdx) }),
                           showFillHandle && /* @__PURE__ */ jsx4(
                             "div",
                             {
@@ -1100,4 +1158,4 @@ export {
   FormulaHints,
   SpreadsheetEditor
 };
-//# sourceMappingURL=chunk-MHTAR3RS.js.map
+//# sourceMappingURL=chunk-QVQYYHJ5.js.map