@chrono-os/image-editor-react 0.2.0

package/dist/index.cjs

@@ -0,0 +1,1989 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/image-picker.tsx
+var BADGE_DEFAULT_POS = {
+  numero: { x: 6, y: 84 },
+  label: { x: 36, y: 88 }
+};
+var BADGE_BASE_CQW = { numero: 15, label: 3.5 };
+function BadgeOverlay({ badge }) {
+  if (!badge) return null;
+  const showNumero = !!badge.numero && badge.numeroEnabled !== false;
+  const showLabel = !!badge.label && badge.labelEnabled !== false;
+  if (!showNumero && !showLabel) return null;
+  const numSizeCqw = BADGE_BASE_CQW.numero * ((badge.numeroSize ?? 100) / 100);
+  const labelSizeCqw = BADGE_BASE_CQW.label * ((badge.labelSize ?? 100) / 100);
+  const numX = badge.numeroOffsetX ?? BADGE_DEFAULT_POS.numero.x;
+  const numY = badge.numeroOffsetY ?? BADGE_DEFAULT_POS.numero.y;
+  const labelX = badge.labelOffsetX ?? BADGE_DEFAULT_POS.label.x;
+  const labelY = badge.labelOffsetY ?? BADGE_DEFAULT_POS.label.y;
+  const numeroColor = badge.numeroColor || "var(--ie-accent, #556FFF)";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showNumero && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "pointer-events-none absolute z-10 whitespace-nowrap font-extrabold leading-none tracking-tight",
+        style: {
+          left: `${numX}%`,
+          top: `${numY}%`,
+          fontSize: `${numSizeCqw}cqw`,
+          color: numeroColor
+        },
+        children: badge.numero
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "pointer-events-none absolute z-10 whitespace-pre-line font-semibold leading-tight text-white",
+        style: {
+          left: `${labelX}%`,
+          top: `${labelY}%`,
+          fontSize: `${labelSizeCqw}cqw`,
+          color: badge.labelColor || void 0
+        },
+        children: badge.label
+      }
+    )
+  ] });
+}
+function buildImageFilter(opts) {
+  const parts = [];
+  if (opts.saturation != null && opts.saturation !== 100) {
+    parts.push(`saturate(${opts.saturation}%)`);
+  }
+  if (opts.grayscale != null && opts.grayscale > 0) {
+    parts.push(`grayscale(${opts.grayscale}%)`);
+  }
+  if (opts.sepia != null && opts.sepia > 0) {
+    parts.push(`sepia(${opts.sepia}%)`);
+    if (opts.sepiaColor) {
+      const hue = hexToHueDeg(opts.sepiaColor);
+      const rotation = Math.round((hue - 35 + 360) % 360);
+      if (rotation !== 0) parts.push(`hue-rotate(${rotation}deg)`);
+    }
+  }
+  return parts.length ? parts.join(" ") : void 0;
+}
+function hexToHueDeg(hex) {
+  const h = hex.replace("#", "");
+  if (h.length !== 6) return 0;
+  const r = parseInt(h.slice(0, 2), 16) / 255;
+  const g = parseInt(h.slice(2, 4), 16) / 255;
+  const b = parseInt(h.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  if (d === 0) return 0;
+  let hDeg = 0;
+  if (max === r) hDeg = (g - b) / d % 6;
+  else if (max === g) hDeg = (b - r) / d + 2;
+  else hDeg = (r - g) / d + 4;
+  return (hDeg * 60 + 360) % 360;
+}
+var MIN_SCALE = 0.2;
+var MAX_SCALE = 5;
+function computeVisibleBase(imgAspect, targetAspect) {
+  if (imgAspect > targetAspect) {
+    return { vwBase: targetAspect / imgAspect, vhBase: 1 };
+  }
+  return { vwBase: 1, vhBase: imgAspect / targetAspect };
+}
+function buildImageGeometry(opts) {
+  const { vwBase, vhBase } = computeVisibleBase(opts.imgAspect, opts.targetAspect);
+  const coverWFrac = vwBase < 1 ? 1 / vwBase : 1;
+  const coverHFrac = vhBase < 1 ? 1 / vhBase : 1;
+  const renderedW = opts.scale * coverWFrac;
+  const renderedH = opts.scale * coverHFrac;
+  const fx = clamp(opts.focalX, 0, 100);
+  const fy = clamp(opts.focalY, 0, 100);
+  const leftFrac = fx / 100 * (1 - renderedW);
+  const topFrac = fy / 100 * (1 - renderedH);
+  return {
+    width: `${renderedW * 100}%`,
+    height: `${renderedH * 100}%`,
+    left: `${leftFrac * 100}%`,
+    top: `${topFrac * 100}%`,
+    renderedW,
+    renderedH
+  };
+}
+function parsePosition(raw) {
+  if (!raw) return { x: 50, y: 50 };
+  const trimmed = raw.trim().toLowerCase();
+  const keywords = {
+    left: 0,
+    center: 50,
+    right: 100,
+    top: 0,
+    bottom: 100
+  };
+  const tokens = trimmed.split(/\s+/);
+  if (tokens.length !== 2) return { x: 50, y: 50 };
+  function toNum(t, axis) {
+    if (t.endsWith("%")) {
+      const n = parseFloat(t);
+      if (!Number.isNaN(n)) return clamp(n, 0, 100);
+    }
+    if (t in keywords) {
+      const v = keywords[t];
+      if (axis === "x" && (t === "top" || t === "bottom")) return 50;
+      if (axis === "y" && (t === "left" || t === "right")) return 50;
+      return v;
+    }
+    return 50;
+  }
+  return {
+    x: toNum(tokens[0], "x"),
+    y: toNum(tokens[1], "y")
+  };
+}
+function formatPos(x, y) {
+  return `${Math.round(x)}% ${Math.round(y)}%`;
+}
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+function focalToOp(focal, visible) {
+  if (visible >= 0.999) return 50;
+  const overflow = 1 - visible;
+  const op = (focal / 100 - visible / 2) / overflow;
+  return clamp(op * 100, 0, 100);
+}
+function opToFocal(op, visible) {
+  if (visible >= 0.999) return 50;
+  const overflow = 1 - visible;
+  return clamp(overflow * op + visible * 50, 0, 100);
+}
+function ImageCropPicker({
+  imageUrl,
+  targetAspect,
+  value,
+  onChange,
+  maxHeight
+}) {
+  const outerRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const imgRef = react.useRef(null);
+  const [imgDims, setImgDims] = react.useState(null);
+  const [containerDims, setContainerDims] = react.useState(null);
+  const [dragMode, setDragMode] = react.useState(null);
+  const [liveCornerDrag, setLiveCornerDrag] = react.useState(null);
+  const dragStartRef = react.useRef(null);
+  const { x: opX, y: opY } = parsePosition(value.position);
+  const scale = clamp(value.scale ?? 1, MIN_SCALE, MAX_SCALE);
+  const mirror = !!value.mirror;
+  const filter = buildImageFilter({
+    grayscale: value.grayscale,
+    saturation: value.saturation,
+    sepia: value.sepia,
+    sepiaColor: value.sepiaColor
+  });
+  function onImgLoad() {
+    if (!imgRef.current) return;
+    setImgDims({
+      w: imgRef.current.naturalWidth,
+      h: imgRef.current.naturalHeight
+    });
+  }
+  react.useEffect(() => {
+    if (!imageUrl) return;
+    const probe = new Image();
+    let cancelled = false;
+    probe.onload = () => {
+      if (!cancelled) {
+        setImgDims({ w: probe.naturalWidth, h: probe.naturalHeight });
+      }
+    };
+    probe.onerror = () => {
+    };
+    probe.src = imageUrl;
+    if (probe.complete && probe.naturalWidth > 0) {
+      setImgDims({ w: probe.naturalWidth, h: probe.naturalHeight });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [imageUrl]);
+  react.useEffect(() => {
+    function measure() {
+      if (!containerRef.current) return;
+      const r = containerRef.current.getBoundingClientRect();
+      setContainerDims({ w: r.width, h: r.height });
+    }
+    measure();
+    const ro = new ResizeObserver(measure);
+    if (containerRef.current) ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [imgDims]);
+  const focalX = opX;
+  const focalY = opY;
+  const overflowX = value.overflowX ?? 0;
+  const overflowY = value.overflowY ?? 0;
+  const imgAspect = imgDims ? imgDims.w / imgDims.h : 1;
+  const panelAspect = imgAspect;
+  const { vwBase, vhBase } = computeVisibleBase(imgAspect, targetAspect);
+  const coverWFrac = vwBase < 1 ? 1 / vwBase : 1;
+  const coverHFrac = vhBase < 1 ? 1 / vhBase : 1;
+  const frameWFracSrc = 1 / (scale * coverWFrac);
+  const frameHFracSrc = 1 / (scale * coverHFrac);
+  const displayFocalX = mirror ? 100 - focalX : focalX;
+  const displayFocalY = focalY;
+  const displayOverflowX = mirror ? -overflowX : overflowX;
+  const frameLeftFracSrc = displayFocalX / 100 * (1 - frameWFracSrc) - displayOverflowX * frameWFracSrc;
+  const frameTopFracSrc = displayFocalY / 100 * (1 - frameHFracSrc) - overflowY * frameHFracSrc;
+  const applyFocal = react.useCallback(
+    (newFocalX, newFocalY, newScale, newOverflow) => {
+      const s = clamp(newScale ?? scale, MIN_SCALE, MAX_SCALE);
+      const fx = clamp(newFocalX, 0, 100);
+      const fy = clamp(newFocalY, 0, 100);
+      const ovX = newOverflow?.overflowX;
+      const ovY = newOverflow?.overflowY;
+      onChange({
+        ...value,
+        position: formatPos(fx, fy),
+        scale: s,
+        overflowX: ovX !== void 0 && Math.abs(ovX) > 1e-3 ? ovX : void 0,
+        overflowY: ovY !== void 0 && Math.abs(ovY) > 1e-3 ? ovY : void 0
+      });
+    },
+    [scale, value, onChange]
+  );
+  function startDrag(mode, e) {
+    if (!mode) return;
+    setDragMode(mode);
+    outerRef.current?.setPointerCapture(e.pointerId);
+    let anchorXpx;
+    let anchorYpx;
+    let cornerXpx;
+    let cornerYpx;
+    if (mode !== "move" && containerDims) {
+      const frameL = liveCornerDrag?.leftPx ?? frameLeftFracSrc * containerDims.w;
+      const frameT = liveCornerDrag?.topPx ?? frameTopFracSrc * containerDims.h;
+      const frameW = liveCornerDrag?.wPx ?? frameWFracSrc * containerDims.w;
+      const frameH = liveCornerDrag?.hPx ?? frameHFracSrc * containerDims.h;
+      switch (mode) {
+        case "nw":
+          anchorXpx = frameL + frameW;
+          anchorYpx = frameT + frameH;
+          cornerXpx = frameL;
+          cornerYpx = frameT;
+          break;
+        case "ne":
+          anchorXpx = frameL;
+          anchorYpx = frameT + frameH;
+          cornerXpx = frameL + frameW;
+          cornerYpx = frameT;
+          break;
+        case "sw":
+          anchorXpx = frameL + frameW;
+          anchorYpx = frameT;
+          cornerXpx = frameL;
+          cornerYpx = frameT + frameH;
+          break;
+        case "se":
+          anchorXpx = frameL;
+          anchorYpx = frameT;
+          cornerXpx = frameL + frameW;
+          cornerYpx = frameT + frameH;
+          break;
+      }
+    }
+    dragStartRef.current = {
+      pointerX: e.clientX,
+      pointerY: e.clientY,
+      focalX,
+      focalY,
+      scale,
+      overflowX,
+      overflowY,
+      anchorXpx,
+      anchorYpx,
+      cornerXpx,
+      cornerYpx,
+      cornerDragBegun: false,
+      snapEngaged: void 0
+    };
+  }
+  function handlePointerMove(e) {
+    if (!dragMode || !dragStartRef.current || !containerDims) return;
+    const start = dragStartRef.current;
+    if (dragMode === "move") {
+      if (!containerDims) return;
+      const actualFrameWSrc = liveCornerDrag && containerDims.w > 0 ? liveCornerDrag.wPx / containerDims.w : frameWFracSrc;
+      const actualFrameHSrc = liveCornerDrag && containerDims.h > 0 ? liveCornerDrag.hPx / containerDims.h : frameHFracSrc;
+      if (actualFrameWSrc <= 0 || actualFrameHSrc <= 0) return;
+      const dx = e.clientX - start.pointerX;
+      const dy = e.clientY - start.pointerY;
+      const dxTargetFrac = dx / (actualFrameWSrc * containerDims.w);
+      const dyTargetFrac = dy / (actualFrameHSrc * containerDims.h);
+      const adjDxTargetFrac = mirror ? -dxTargetFrac : dxTargetFrac;
+      let candOverflowX = start.overflowX - adjDxTargetFrac;
+      let candOverflowY = start.overflowY - dyTargetFrac;
+      const SOFT_SNAP_TOL = 0.04;
+      const snapDisabled = e.shiftKey;
+      const dispFocalX_b = mirror ? 100 - start.focalX : start.focalX;
+      const dispFocalY_b = start.focalY;
+      const dispOverflowX_cand = mirror ? -candOverflowX : candOverflowX;
+      const dispOverflowY_cand = candOverflowY;
+      const fLeftSrc = dispFocalX_b / 100 * (1 - actualFrameWSrc) - dispOverflowX_cand * actualFrameWSrc;
+      const fTopSrc = dispFocalY_b / 100 * (1 - actualFrameHSrc) - dispOverflowY_cand * actualFrameHSrc;
+      const snapTargetsX = snapDisabled ? [] : [0, 1 - actualFrameWSrc];
+      const snapTargetsY = snapDisabled ? [] : [0, 1 - actualFrameHSrc];
+      let snappedFLeftSrc = fLeftSrc;
+      let snappedFTopSrc = fTopSrc;
+      for (const t of snapTargetsX) {
+        if (Math.abs(fLeftSrc - t) < SOFT_SNAP_TOL) {
+          snappedFLeftSrc = t;
+          break;
+        }
+      }
+      for (const t of snapTargetsY) {
+        if (Math.abs(fTopSrc - t) < SOFT_SNAP_TOL) {
+          snappedFTopSrc = t;
+          break;
+        }
+      }
+      if (snappedFLeftSrc !== fLeftSrc && actualFrameWSrc > 1e-3) {
+        const snappedDispOverflowX = (dispFocalX_b / 100 * (1 - actualFrameWSrc) - snappedFLeftSrc) / actualFrameWSrc;
+        candOverflowX = mirror ? -snappedDispOverflowX : snappedDispOverflowX;
+      }
+      if (snappedFTopSrc !== fTopSrc && actualFrameHSrc > 1e-3) {
+        const snappedDispOverflowY = (dispFocalY_b / 100 * (1 - actualFrameHSrc) - snappedFTopSrc) / actualFrameHSrc;
+        candOverflowY = snappedDispOverflowY;
+      }
+      const MIN_FRAME_OVERLAP = 0.05;
+      const dispOverflowX_clamp = mirror ? -candOverflowX : candOverflowX;
+      const dispOverflowY_clamp = candOverflowY;
+      let clampedFLeftSrc = dispFocalX_b / 100 * (1 - actualFrameWSrc) - dispOverflowX_clamp * actualFrameWSrc;
+      let clampedFTopSrc = dispFocalY_b / 100 * (1 - actualFrameHSrc) - dispOverflowY_clamp * actualFrameHSrc;
+      const minFLeft = -(actualFrameWSrc - MIN_FRAME_OVERLAP);
+      const maxFLeft = 1 - MIN_FRAME_OVERLAP;
+      const minFTop = -(actualFrameHSrc - MIN_FRAME_OVERLAP);
+      const maxFTop = 1 - MIN_FRAME_OVERLAP;
+      clampedFLeftSrc = clamp(clampedFLeftSrc, minFLeft, maxFLeft);
+      clampedFTopSrc = clamp(clampedFTopSrc, minFTop, maxFTop);
+      if (actualFrameWSrc > 1e-3) {
+        const clampedDispOverflowX = (dispFocalX_b / 100 * (1 - actualFrameWSrc) - clampedFLeftSrc) / actualFrameWSrc;
+        candOverflowX = mirror ? -clampedDispOverflowX : clampedDispOverflowX;
+      }
+      if (actualFrameHSrc > 1e-3) {
+        const clampedDispOverflowY = (dispFocalY_b / 100 * (1 - actualFrameHSrc) - clampedFTopSrc) / actualFrameHSrc;
+        candOverflowY = clampedDispOverflowY;
+      }
+      const finalFrameLeftPx = clampedFLeftSrc * containerDims.w;
+      const finalFrameTopPx = clampedFTopSrc * containerDims.h;
+      const frameWPxOverride = liveCornerDrag?.wPx ?? frameWFracSrc * containerDims.w;
+      const frameHPxOverride = liveCornerDrag?.hPx ?? frameHFracSrc * containerDims.h;
+      setLiveCornerDrag({
+        leftPx: finalFrameLeftPx,
+        topPx: finalFrameTopPx,
+        wPx: frameWPxOverride,
+        hPx: frameHPxOverride
+      });
+      applyFocal(start.focalX, start.focalY, scale, {
+        overflowX: candOverflowX,
+        overflowY: candOverflowY
+      });
+      return;
+    }
+    if (start.anchorXpx === void 0 || start.anchorYpx === void 0) return;
+    if (start.cornerXpx === void 0 || start.cornerYpx === void 0) return;
+    if (!containerRef.current) return;
+    if (!start.cornerDragBegun) {
+      const initialDx = e.clientX - start.pointerX;
+      const initialDy = e.clientY - start.pointerY;
+      if (Math.abs(initialDx) < 4 && Math.abs(initialDy) < 4) return;
+      start.cornerDragBegun = true;
+      start.pointerX = e.clientX;
+      start.pointerY = e.clientY;
+      return;
+    }
+    const dragDx = e.clientX - start.pointerX;
+    const dragDy = e.clientY - start.pointerY;
+    const pointerXpx = start.cornerXpx + dragDx;
+    const pointerYpx = start.cornerYpx + dragDy;
+    const freeW = Math.abs(pointerXpx - start.anchorXpx);
+    const freeH = Math.abs(pointerYpx - start.anchorYpx);
+    if (freeW < 4 || freeH < 4) return;
+    let lockedW;
+    let lockedH;
+    if (freeH * targetAspect <= freeW) {
+      lockedH = freeH;
+      lockedW = freeH * targetAspect;
+    } else {
+      lockedW = freeW;
+      lockedH = freeW / targetAspect;
+    }
+    const minFrameW = containerDims.w / (MAX_SCALE * coverWFrac);
+    const maxFrameW = containerDims.w / (MIN_SCALE * coverWFrac);
+    if (lockedW < minFrameW) {
+      lockedW = minFrameW;
+      lockedH = lockedW / targetAspect;
+    }
+    if (lockedW > maxFrameW) {
+      lockedW = maxFrameW;
+      lockedH = lockedW / targetAspect;
+    }
+    const SNAP_ENGAGE_PX = 4;
+    const SNAP_DISENGAGE_PX = 12;
+    const cornerSnapDisabled = e.shiftKey;
+    const snapTargetW = dragMode === "nw" || dragMode === "sw" ? start.anchorXpx : containerDims.w - start.anchorXpx;
+    const snapTargetH = dragMode === "nw" || dragMode === "ne" ? start.anchorYpx : containerDims.h - start.anchorYpx;
+    const canSnapW = !cornerSnapDisabled && snapTargetW >= minFrameW && snapTargetW <= maxFrameW;
+    const canSnapH = !cornerSnapDisabled && snapTargetH * targetAspect >= minFrameW && snapTargetH * targetAspect <= maxFrameW;
+    const distW = Math.abs(lockedW - snapTargetW);
+    const distH = Math.abs(lockedH - snapTargetH);
+    const engageThreshold = SNAP_ENGAGE_PX;
+    const disengageThreshold = SNAP_DISENGAGE_PX;
+    if (cornerSnapDisabled) {
+      start.snapEngaged = void 0;
+    } else if (start.snapEngaged === "w") {
+      if (canSnapW && distW < disengageThreshold) {
+        lockedW = snapTargetW;
+        lockedH = lockedW / targetAspect;
+      } else {
+        start.snapEngaged = void 0;
+      }
+    } else if (start.snapEngaged === "h") {
+      if (canSnapH && distH < disengageThreshold) {
+        lockedH = snapTargetH;
+        lockedW = lockedH * targetAspect;
+      } else {
+        start.snapEngaged = void 0;
+      }
+    } else {
+      const approachingW = start.prevDistW !== void 0 && start.prevDistW >= engageThreshold && distW < engageThreshold;
+      const approachingH = start.prevDistH !== void 0 && start.prevDistH >= engageThreshold && distH < engageThreshold;
+      if (canSnapW && approachingW) {
+        lockedW = snapTargetW;
+        lockedH = lockedW / targetAspect;
+        start.snapEngaged = "w";
+      } else if (canSnapH && approachingH) {
+        lockedH = snapTargetH;
+        lockedW = lockedH * targetAspect;
+        start.snapEngaged = "h";
+      }
+    }
+    start.prevDistW = distW;
+    start.prevDistH = distH;
+    const newFrameLPx = pointerXpx >= start.anchorXpx ? start.anchorXpx : start.anchorXpx - lockedW;
+    const newFrameTPx = pointerYpx >= start.anchorYpx ? start.anchorYpx : start.anchorYpx - lockedH;
+    const newFrameWSrc = lockedW / containerDims.w;
+    const newFrameHSrc = lockedH / containerDims.h;
+    const newScale = clamp(
+      1 / (newFrameWSrc * coverWFrac),
+      MIN_SCALE,
+      MAX_SCALE
+    );
+    const newFrameLSrc = newFrameLPx / containerDims.w;
+    const newFrameTSrc = newFrameTPx / containerDims.h;
+    const startDispFocalX = mirror ? 100 - start.focalX : start.focalX;
+    const startDispFocalY = start.focalY;
+    const newDispOverflowX = newFrameWSrc > 1e-3 ? (startDispFocalX / 100 * (1 - newFrameWSrc) - newFrameLSrc) / newFrameWSrc : start.overflowX;
+    const newDispOverflowY = newFrameHSrc > 1e-3 ? (startDispFocalY / 100 * (1 - newFrameHSrc) - newFrameTSrc) / newFrameHSrc : start.overflowY;
+    const newOverflowX = mirror ? -newDispOverflowX : newDispOverflowX;
+    const newOverflowY = newDispOverflowY;
+    const MIN_FRAME_OVERLAP_CORNER = 0.05;
+    const dispOverflowX_corner = mirror ? -newOverflowX : newOverflowX;
+    const dispOverflowY_corner = newOverflowY;
+    let cornerClampedFLeftSrc = startDispFocalX / 100 * (1 - newFrameWSrc) - dispOverflowX_corner * newFrameWSrc;
+    let cornerClampedFTopSrc = startDispFocalY / 100 * (1 - newFrameHSrc) - dispOverflowY_corner * newFrameHSrc;
+    const minFLeft_c = -(newFrameWSrc - MIN_FRAME_OVERLAP_CORNER);
+    const maxFLeft_c = 1 - MIN_FRAME_OVERLAP_CORNER;
+    const minFTop_c = -(newFrameHSrc - MIN_FRAME_OVERLAP_CORNER);
+    const maxFTop_c = 1 - MIN_FRAME_OVERLAP_CORNER;
+    cornerClampedFLeftSrc = clamp(cornerClampedFLeftSrc, minFLeft_c, maxFLeft_c);
+    cornerClampedFTopSrc = clamp(cornerClampedFTopSrc, minFTop_c, maxFTop_c);
+    let finalOverflowX = newOverflowX;
+    let finalOverflowY = newOverflowY;
+    if (newFrameWSrc > 1e-3) {
+      const clampedDispOverflowX_c = (startDispFocalX / 100 * (1 - newFrameWSrc) - cornerClampedFLeftSrc) / newFrameWSrc;
+      finalOverflowX = mirror ? -clampedDispOverflowX_c : clampedDispOverflowX_c;
+    }
+    if (newFrameHSrc > 1e-3) {
+      const clampedDispOverflowY_c = (startDispFocalY / 100 * (1 - newFrameHSrc) - cornerClampedFTopSrc) / newFrameHSrc;
+      finalOverflowY = clampedDispOverflowY_c;
+    }
+    setLiveCornerDrag({
+      leftPx: newFrameLPx,
+      topPx: newFrameTPx,
+      wPx: lockedW,
+      hPx: lockedH
+    });
+    applyFocal(start.focalX, start.focalY, newScale, {
+      overflowX: finalOverflowX,
+      overflowY: finalOverflowY
+    });
+  }
+  const nudgeFrame = react.useCallback(
+    (deltaXpx, deltaYpx) => {
+      if (!containerDims) return;
+      const actualFrameWSrc = liveCornerDrag && containerDims.w > 0 ? liveCornerDrag.wPx / containerDims.w : frameWFracSrc;
+      const actualFrameHSrc = liveCornerDrag && containerDims.h > 0 ? liveCornerDrag.hPx / containerDims.h : frameHFracSrc;
+      if (actualFrameWSrc <= 0 || actualFrameHSrc <= 0) return;
+      const dxTargetFrac = deltaXpx / (actualFrameWSrc * containerDims.w);
+      const dyTargetFrac = deltaYpx / (actualFrameHSrc * containerDims.h);
+      const adjDxTargetFrac = mirror ? -dxTargetFrac : dxTargetFrac;
+      let candOverflowX = overflowX - adjDxTargetFrac;
+      let candOverflowY = overflowY - dyTargetFrac;
+      const MIN_FRAME_OVERLAP = 0.05;
+      const dispFocalX_b = mirror ? 100 - focalX : focalX;
+      const dispFocalY_b = focalY;
+      const dispOverflowX_clamp = mirror ? -candOverflowX : candOverflowX;
+      const dispOverflowY_clamp = candOverflowY;
+      let clampedFLeftSrc = dispFocalX_b / 100 * (1 - actualFrameWSrc) - dispOverflowX_clamp * actualFrameWSrc;
+      let clampedFTopSrc = dispFocalY_b / 100 * (1 - actualFrameHSrc) - dispOverflowY_clamp * actualFrameHSrc;
+      const minFLeft = -(actualFrameWSrc - MIN_FRAME_OVERLAP);
+      const maxFLeft = 1 - MIN_FRAME_OVERLAP;
+      const minFTop = -(actualFrameHSrc - MIN_FRAME_OVERLAP);
+      const maxFTop = 1 - MIN_FRAME_OVERLAP;
+      clampedFLeftSrc = clamp(clampedFLeftSrc, minFLeft, maxFLeft);
+      clampedFTopSrc = clamp(clampedFTopSrc, minFTop, maxFTop);
+      if (actualFrameWSrc > 1e-3) {
+        const clampedDispOverflowX = (dispFocalX_b / 100 * (1 - actualFrameWSrc) - clampedFLeftSrc) / actualFrameWSrc;
+        candOverflowX = mirror ? -clampedDispOverflowX : clampedDispOverflowX;
+      }
+      if (actualFrameHSrc > 1e-3) {
+        const clampedDispOverflowY = (dispFocalY_b / 100 * (1 - actualFrameHSrc) - clampedFTopSrc) / actualFrameHSrc;
+        candOverflowY = clampedDispOverflowY;
+      }
+      const frameWPxOverride = liveCornerDrag?.wPx ?? frameWFracSrc * containerDims.w;
+      const frameHPxOverride = liveCornerDrag?.hPx ?? frameHFracSrc * containerDims.h;
+      setLiveCornerDrag({
+        leftPx: clampedFLeftSrc * containerDims.w,
+        topPx: clampedFTopSrc * containerDims.h,
+        wPx: frameWPxOverride,
+        hPx: frameHPxOverride
+      });
+      applyFocal(focalX, focalY, scale, {
+        overflowX: candOverflowX,
+        overflowY: candOverflowY
+      });
+    },
+    [
+      containerDims,
+      liveCornerDrag,
+      frameWFracSrc,
+      frameHFracSrc,
+      mirror,
+      overflowX,
+      overflowY,
+      focalX,
+      focalY,
+      scale,
+      applyFocal
+    ]
+  );
+  react.useEffect(() => {
+    if (!imageUrl) return;
+    function onKey(e) {
+      const ae = document.activeElement;
+      if (ae) {
+        const tag = ae.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || ae.isContentEditable) {
+          return;
+        }
+      }
+      const step = e.shiftKey ? 10 : 1;
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          nudgeFrame(-step, 0);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          nudgeFrame(step, 0);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          nudgeFrame(0, -step);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          nudgeFrame(0, step);
+          break;
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [imageUrl, nudgeFrame]);
+  function handlePointerUp(e) {
+    setDragMode(null);
+    dragStartRef.current = null;
+    try {
+      outerRef.current?.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  }
+  if (!imageUrl) return null;
+  const backdropBg = (() => {
+    const c = value.backdropColor;
+    if (c === "transparent") return void 0;
+    const op = (value.backdropOpacity ?? 100) / 100;
+    const hex = c && c !== "transparent" ? c : "#13203B";
+    const h = hex.replace("#", "");
+    if (h.length !== 6) return hex;
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${op})`;
+  })();
+  const editorH = maxHeight ?? 520;
+  const PAD = 48;
+  const MAX_SOURCE_BOX_W = 544;
+  let sourceBoxH = Math.max(120, editorH - PAD * 2);
+  let sourceBoxW = sourceBoxH * panelAspect;
+  if (sourceBoxW > MAX_SOURCE_BOX_W) {
+    sourceBoxW = MAX_SOURCE_BOX_W;
+    sourceBoxH = sourceBoxW / panelAspect;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] font-semibold uppercase leading-snug tracking-wider text-neutral-500", children: [
+      "Arraste o quadro e puxe os cantos para posicionar",
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      "Setas = 1px \xB7 Shift+Setas = 10px \xB7 Shift ao arrastar = sem snap"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: outerRef,
+        className: "relative mx-auto select-none rounded-md border-2 border-white/30 shadow-[0_0_0_1px_rgba(0,0,0,0.5)]",
+        style: {
+          height: editorH,
+          width: sourceBoxW + PAD * 2,
+          maxWidth: "100%",
+          padding: PAD,
+          boxSizing: "border-box",
+          backgroundColor: backdropBg,
+          touchAction: "none",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: "relative",
+            style: {
+              height: sourceBoxH,
+              width: sourceBoxW,
+              overflow: "visible",
+              boxShadow: "0 0 0 1px rgba(255,255,255,0.18)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  ref: imgRef,
+                  src: imageUrl,
+                  alt: "",
+                  onLoad: onImgLoad,
+                  className: "pointer-events-none absolute inset-0 h-full w-full",
+                  draggable: false,
+                  style: {
+                    objectFit: "contain",
+                    objectPosition: "center",
+                    transform: mirror ? "scaleX(-1)" : void 0,
+                    transformOrigin: "center center",
+                    filter
+                  }
+                }
+              ),
+              imgDims && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "absolute pointer-events-auto",
+                  style: {
+                    // Durante corner drag ativo, render usa pixel ABSOLUTOS do
+                    // liveCornerDrag → anchor fica EXATAMENTE preso sem drift
+                    // da math state-based. Fora do corner drag, math normal.
+                    left: liveCornerDrag && containerDims ? `${liveCornerDrag.leftPx / containerDims.w * 100}%` : `${frameLeftFracSrc * 100}%`,
+                    top: liveCornerDrag && containerDims ? `${liveCornerDrag.topPx / containerDims.h * 100}%` : `${frameTopFracSrc * 100}%`,
+                    width: liveCornerDrag && containerDims ? `${liveCornerDrag.wPx / containerDims.w * 100}%` : `${frameWFracSrc * 100}%`,
+                    height: liveCornerDrag && containerDims ? `${liveCornerDrag.hPx / containerDims.h * 100}%` : `${frameHFracSrc * 100}%`,
+                    cursor: "move",
+                    boxShadow: "inset 0 0 0 2px white, inset 0 0 0 3px rgba(0,0,0,0.5), 0 0 8px rgba(0,0,0,0.4)"
+                  },
+                  onPointerDown: (e) => startDrag("move", e),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(CornerHandle, { pos: "nw", onStart: (e) => startDrag("nw", e) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(CornerHandle, { pos: "ne", onStart: (e) => startDrag("ne", e) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(CornerHandle, { pos: "sw", onStart: (e) => startDrag("sw", e) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(CornerHandle, { pos: "se", onStart: (e) => startDrag("se", e) })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function CornerHandle({
+  pos,
+  onStart
+}) {
+  const offset = "-8px";
+  const cornerStyle = {
+    position: "absolute",
+    width: 16,
+    height: 16,
+    borderRadius: 3,
+    background: "white",
+    border: "1px solid rgba(0,0,0,0.55)",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.4)",
+    touchAction: "none"
+  };
+  if (pos === "nw") {
+    cornerStyle.top = offset;
+    cornerStyle.left = offset;
+    cornerStyle.cursor = "nwse-resize";
+  } else if (pos === "ne") {
+    cornerStyle.top = offset;
+    cornerStyle.right = offset;
+    cornerStyle.cursor = "nesw-resize";
+  } else if (pos === "sw") {
+    cornerStyle.bottom = offset;
+    cornerStyle.left = offset;
+    cornerStyle.cursor = "nesw-resize";
+  } else {
+    cornerStyle.bottom = offset;
+    cornerStyle.right = offset;
+    cornerStyle.cursor = "nwse-resize";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: cornerStyle,
+      onPointerDown: (e) => {
+        e.stopPropagation();
+        onStart(e);
+      }
+    }
+  );
+}
+var DEFAULT_SEPIA_COLOR = "#704214";
+function defaultResolveUrl(url) {
+  return url;
+}
+function computeImageDisplayStyle(opts) {
+  const { position, scale, mirror, imgDims, targetAspect, filter } = opts;
+  const overflowX = opts.overflowX ?? 0;
+  const overflowY = opts.overflowY ?? 0;
+  const focal = parsePosition(position);
+  const imgAspect = imgDims ? imgDims.w / imgDims.h : 1;
+  let coverWFrac = 1;
+  let coverHFrac = 1;
+  if (imgAspect > targetAspect) {
+    coverWFrac = imgAspect / targetAspect;
+  } else {
+    coverHFrac = targetAspect / imgAspect;
+  }
+  const renderedW = scale * coverWFrac;
+  const renderedH = scale * coverHFrac;
+  const leftFrac = focal.x / 100 * (1 - renderedW) + overflowX;
+  const topFrac = focal.y / 100 * (1 - renderedH) + overflowY;
+  return {
+    position: "absolute",
+    display: "block",
+    // Override Tailwind/normalize reset (max-width:100%; height:auto) que
+    // estavam clampando a imagem em 100% do container e distorcendo o aspect.
+    maxWidth: "none",
+    maxHeight: "none",
+    width: `${renderedW * 100}%`,
+    height: `${renderedH * 100}%`,
+    left: `${leftFrac * 100}%`,
+    top: `${topFrac * 100}%`,
+    transform: mirror ? "scaleX(-1)" : void 0,
+    transformOrigin: "center center",
+    filter
+  };
+}
+function resolveBackdropBg(crop) {
+  if (!crop) return void 0;
+  const c = crop.backdropColor;
+  if (c === "transparent") return void 0;
+  const op = (crop.backdropOpacity ?? 100) / 100;
+  const hex = c && c !== "transparent" ? c : "#13203B";
+  const h = hex.replace("#", "");
+  if (h.length !== 6) return hex;
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${op})`;
+}
+var ASPECT_RATIO = {
+  "1/1": 1,
+  "3/4": 3 / 4,
+  "16/9": 16 / 9,
+  "4/3": 4 / 3
+};
+function bytesHuman(n) {
+  if (n < 1024) return `${n}B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)}KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)}MB`;
+}
+function computeEditModalSize(imageDims, targetAspect) {
+  if (typeof window === "undefined") {
+    return {
+      style: { width: "1100px", maxWidth: "calc(100vw - 32px)" },
+      editorMaxHeight: 480
+    };
+  }
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const bodyHeightAvail = Math.max(280, vh * 0.9 - 146);
+  const editorMaxHeight = Math.min(bodyHeightAvail, 520);
+  const sourceAspect = imageDims ? imageDims.w / imageDims.h : 4 / 3;
+  const sourceBoxH = Math.max(120, editorMaxHeight - 96);
+  const sourceBoxW = sourceBoxH * sourceAspect;
+  const editorWidth = Math.min(sourceBoxW + 96, 640);
+  const previewColWidth = targetAspect >= 1 ? 240 : 200;
+  const editColWidth = 208;
+  const gapsAndPadding = 32 + 40;
+  const total = previewColWidth + editorWidth + editColWidth + gapsAndPadding;
+  const clamped = Math.max(720, Math.min(1300, total));
+  const final = Math.min(clamped, vw - 32);
+  return {
+    style: { width: `${Math.round(final)}px` },
+    editorMaxHeight: Math.round(editorMaxHeight)
+  };
+}
+function probeImageDims(url) {
+  return new Promise((resolve) => {
+    if (typeof window === "undefined") {
+      resolve(null);
+      return;
+    }
+    const img = new window.Image();
+    img.onload = () => resolve({ w: img.naturalWidth, h: img.naturalHeight });
+    img.onerror = () => resolve(null);
+    img.src = url;
+  });
+}
+function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  widthClass = "max-w-3xl w-full",
+  widthStyle,
+  footer
+}) {
+  react.useEffect(() => {
+    if (!open) return;
+    function onKey(e) {
+      if (e.key === "Escape") onClose();
+    }
+    window.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4",
+      onMouseDown: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `${widthStyle ? "" : widthClass} flex max-h-[90vh] flex-col overflow-hidden rounded-lg bg-white shadow-2xl`,
+          style: widthStyle,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-neutral-200 px-5 py-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold uppercase tracking-wider text-neutral-700", children: title }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: "rounded-full p-1 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900",
+                  "aria-label": "Fechar",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center overflow-auto p-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children }) }),
+            footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-neutral-200 bg-neutral-50 px-5 py-3", children: footer })
+          ]
+        }
+      )
+    }
+  );
+}
+function Collapsible({
+  label,
+  defaultOpen = false,
+  children
+}) {
+  const [open, setOpen] = react.useState(defaultOpen);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-neutral-200 bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        className: "flex w-full items-center justify-between px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-neutral-700 hover:text-neutral-900",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: `transition-transform duration-200 ${open ? "rotate-180" : ""}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "grid transition-[grid-template-rows] duration-200 ease-out",
+        style: { gridTemplateRows: open ? "1fr" : "0fr" },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-neutral-200 p-3", children }) })
+      }
+    )
+  ] });
+}
+function EditControls({
+  crop,
+  onChange
+}) {
+  const saturation = crop.saturation ?? 100;
+  const sepia = crop.sepia ?? 0;
+  const sepiaColor = crop.sepiaColor ?? DEFAULT_SEPIA_COLOR;
+  const mirror = !!crop.mirror;
+  const backdropColor = crop.backdropColor;
+  const backdropOpacity = crop.backdropOpacity;
+  const { x: opX, y: opY } = parsePosition(crop.position);
+  function update(patch) {
+    onChange({ ...crop, ...patch });
+  }
+  function toggleMirror() {
+    update({
+      mirror: !mirror,
+      position: formatPos(100 - opX, opY)
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 rounded-md border border-neutral-200 bg-neutral-50 p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-neutral-500", children: "Edi\xE7\xE3o" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleMirror,
+        className: `w-full whitespace-nowrap rounded-md border px-3 py-1.5 text-xs font-semibold transition-colors ${mirror ? "border-[color:var(--ie-accent,#556FFF)] bg-[color:var(--ie-accent,#556FFF)] text-white" : "border-neutral-300 bg-white text-neutral-700 hover:border-neutral-500"}`,
+        children: mirror ? "\u21C6 Espelhada" : "\u21C6 Espelhar"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { label: "Cor de fundo", defaultOpen: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between text-[11px] text-neutral-700", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "backdrop-opacity", className: "font-semibold", children: "Opacidade" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono tabular-nums text-neutral-500", children: [
+            backdropOpacity ?? 100,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "backdrop-opacity",
+            type: "range",
+            min: 0,
+            max: 100,
+            step: 5,
+            value: backdropOpacity ?? 100,
+            onChange: (e) => update({ backdropOpacity: Number(e.target.value) }),
+            className: "w-full accent-[color:var(--ie-accent,#556FFF)]"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: "backdrop-color",
+            className: "text-[10px] font-semibold text-neutral-700",
+            children: "Cor:"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "backdrop-color",
+            type: "color",
+            value: backdropColor && backdropColor !== "transparent" ? backdropColor : "#13203B",
+            onChange: (e) => update({ backdropColor: e.target.value }),
+            className: "h-6 w-8 cursor-pointer rounded border border-neutral-300 p-0",
+            "aria-label": "Cor de fundo"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: backdropColor && backdropColor !== "transparent" ? backdropColor : "#13203B",
+            onChange: (e) => {
+              const v = e.target.value;
+              if (/^#[0-9a-fA-F]{0,6}$/.test(v)) update({ backdropColor: v });
+            },
+            className: "w-20 rounded border border-neutral-300 px-2 py-1 font-mono text-[10px] uppercase",
+            placeholder: "#13203B"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => update({ backdropColor: void 0, backdropOpacity: void 0 }),
+          className: "mt-3 w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-neutral-700 transition-colors hover:border-neutral-500",
+          children: "Resetar fundo"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { label: "Filtros", defaultOpen: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between text-[11px] text-neutral-700", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "filter-saturation", className: "font-semibold", children: "Satura\xE7\xE3o" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono tabular-nums text-neutral-500", children: [
+            saturation,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "filter-saturation",
+            type: "range",
+            min: 0,
+            max: 200,
+            step: 5,
+            value: saturation,
+            onChange: (e) => update({ saturation: Number(e.target.value) }),
+            className: "w-full accent-[color:var(--ie-accent,#556FFF)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-0.5 flex justify-between text-[9px] text-neutral-400", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sem cor" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Normal" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Vibrante" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between text-[11px] text-neutral-700", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "filter-sepia", className: "font-semibold", children: "S\xE9pia" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono tabular-nums text-neutral-500", children: [
+            sepia,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "filter-sepia",
+            type: "range",
+            min: 0,
+            max: 100,
+            step: 5,
+            value: sepia,
+            onChange: (e) => update({ sepia: Number(e.target.value) }),
+            className: "w-full accent-[color:var(--ie-accent,#556FFF)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: "filter-sepia-color",
+              className: "text-[10px] font-semibold text-neutral-700",
+              children: "Cor:"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "filter-sepia-color",
+              type: "color",
+              value: sepiaColor,
+              onChange: (e) => update({ sepiaColor: e.target.value }),
+              className: "h-6 w-8 cursor-pointer rounded border border-neutral-300 p-0",
+              "aria-label": "Cor do tint s\xE9pia"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: sepiaColor,
+              onChange: (e) => {
+                const v = e.target.value;
+                if (/^#[0-9a-fA-F]{0,6}$/.test(v)) update({ sepiaColor: v });
+              },
+              className: "w-20 rounded border border-neutral-300 px-2 py-1 font-mono text-[10px] uppercase",
+              placeholder: "#704214"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => update({
+            saturation: void 0,
+            sepia: void 0,
+            sepiaColor: void 0
+          }),
+          className: "mt-3 w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-neutral-700 hover:border-neutral-500",
+          children: "Resetar filtros"
+        }
+      )
+    ] })
+  ] });
+}
+function ImagePicker({
+  value,
+  onChange,
+  uploadAdapter,
+  label = "IMAGEM",
+  hint,
+  aspect = "3/4",
+  crop,
+  onCropChange,
+  badge,
+  extraCards,
+  presets
+}) {
+  const resolveUrl = uploadAdapter.resolveUrl ?? defaultResolveUrl;
+  const canEdit = !!onCropChange && !!value;
+  const currentPos = crop?.position ?? "center center";
+  const currentScale = crop?.scale ?? 1;
+  const currentMirror = !!crop?.mirror;
+  const currentFilter = buildImageFilter({
+    grayscale: crop?.grayscale,
+    saturation: crop?.saturation,
+    sepia: crop?.sepia,
+    sepiaColor: crop?.sepiaColor
+  });
+  const [panel, setPanel] = react.useState(null);
+  const [cropSnapshot, setCropSnapshot] = react.useState(null);
+  const [urlSnapshot, setUrlSnapshot] = react.useState(null);
+  const [imageDims, setImageDims] = react.useState(null);
+  const [editModalSize, setEditModalSize] = react.useState(null);
+  const [tab, setTab] = react.useState("images");
+  const [uploads, setUploads] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [progressMsg, setProgressMsg] = react.useState(null);
+  const fileInputRef = react.useRef(null);
+  const onCropChangeRef = react.useRef(onCropChange);
+  react.useEffect(() => {
+    onCropChangeRef.current = onCropChange;
+  }, [onCropChange]);
+  const uploadAdapterRef = react.useRef(uploadAdapter);
+  react.useEffect(() => {
+    uploadAdapterRef.current = uploadAdapter;
+  }, [uploadAdapter]);
+  react.useEffect(() => {
+    void refreshUploads();
+  }, []);
+  async function refreshUploads() {
+    setLoading(true);
+    try {
+      const items = await uploadAdapterRef.current.list();
+      setUploads(items);
+    } catch {
+      setUploads([]);
+    }
+    setLoading(false);
+  }
+  async function handleFile(file) {
+    setError(null);
+    setProgressMsg(`Otimizando ${file.name}...`);
+    try {
+      const result = await uploadAdapterRef.current.upload(file);
+      setUploads((prev) => [result, ...prev]);
+      const dimsTxt = result.width && result.height ? ` (${result.width}\xD7${result.height} WebP)` : "";
+      setProgressMsg(
+        `${file.name} \u2192 ${bytesHuman(result.sizeBytes)}${dimsTxt}`
+      );
+      setTab("images");
+      window.setTimeout(() => {
+        setProgressMsg(null);
+        void pickAndOpenEdit(result.url);
+      }, 900);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Falha ao subir imagem";
+      setError(msg);
+      setProgressMsg(null);
+    }
+  }
+  async function handleDelete(filename) {
+    if (!confirm(`Remover "${filename}"?`)) return;
+    const ok = await uploadAdapterRef.current.delete(filename);
+    if (!ok) {
+      setError("Falha ao remover");
+      return;
+    }
+    setUploads((prev) => prev.filter((u) => u.filename !== filename));
+  }
+  async function pickAndOpenEdit(url) {
+    const prevUrl = value;
+    const prevAspectRatio = imageDims ? imageDims.w / imageDims.h : void 0;
+    const prevCrop = crop ? { ...crop } : {};
+    const dims = await probeImageDims(resolveUrl(url));
+    const aspectRatio = dims ? dims.w / dims.h : void 0;
+    setUrlSnapshot(prevUrl ? { url: prevUrl, aspectRatio: prevAspectRatio } : null);
+    setCropSnapshot(prevCrop);
+    onChange(url, aspectRatio);
+    if (dims) setImageDims(dims);
+    setEditModalSize(computeEditModalSize(dims, ASPECT_RATIO[aspect]));
+    setPanel("edit");
+  }
+  function handlePickPreset(url) {
+    void pickAndOpenEdit(url);
+  }
+  function handlePickUpload(url) {
+    void pickAndOpenEdit(url);
+  }
+  function openEdit() {
+    setUrlSnapshot(null);
+    setCropSnapshot(crop ?? {});
+    setEditModalSize(computeEditModalSize(imageDims, ASPECT_RATIO[aspect]));
+    setPanel("edit");
+  }
+  function confirmEdit() {
+    setUrlSnapshot(null);
+    setCropSnapshot(null);
+    setEditModalSize(null);
+    setPanel(null);
+  }
+  function cancelEdit() {
+    const snapshot = cropSnapshot;
+    const urlSnap = urlSnapshot;
+    if (urlSnap && urlSnap.url !== value) {
+      onChange(urlSnap.url, urlSnap.aspectRatio);
+      if (snapshot) {
+        setTimeout(() => onCropChangeRef.current?.(snapshot), 0);
+      }
+    } else if (snapshot && onCropChange) {
+      onCropChange(snapshot);
+    }
+    setUrlSnapshot(null);
+    setCropSnapshot(null);
+    setEditModalSize(null);
+    setPanel(null);
+  }
+  const aspectClass = {
+    "1/1": "aspect-square",
+    "3/4": "aspect-[3/4]",
+    "16/9": "aspect-video",
+    "4/3": "aspect-[4/3]"
+  }[aspect];
+  const previewSrc = value ? resolveUrl(value) : null;
+  react.useEffect(() => {
+    if (!previewSrc) {
+      setImageDims(null);
+      return;
+    }
+    let cancelled = false;
+    const img = new window.Image();
+    img.onload = () => {
+      if (!cancelled) {
+        setImageDims({ w: img.naturalWidth, h: img.naturalHeight });
+      }
+    };
+    img.src = previewSrc;
+    return () => {
+      cancelled = true;
+    };
+  }, [previewSrc]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 rounded-md border border-neutral-200 bg-neutral-50 p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-wider text-neutral-500", children: label }),
+      hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-neutral-500", children: hint })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "grid grid-cols-1 gap-3 md:grid-cols-[var(--ip-cols)]",
+        style: {
+          "--ip-cols": extraCards && extraCards.length > 0 ? `220px ${Array(extraCards.length).fill("minmax(0, 1fr)").join(" ")}` : "1fr"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 rounded-md border border-neutral-200 bg-white p-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${aspectClass} relative mx-auto w-full max-w-[180px] overflow-hidden rounded-md border border-neutral-200 bg-neutral-50`,
+                style: {
+                  containerType: "inline-size",
+                  backgroundColor: previewSrc ? resolveBackdropBg(crop) : void 0
+                },
+                children: previewSrc ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: previewSrc,
+                      alt: "",
+                      style: computeImageDisplayStyle({
+                        position: currentPos,
+                        scale: currentScale,
+                        mirror: currentMirror,
+                        imgDims: imageDims,
+                        targetAspect: ASPECT_RATIO[aspect],
+                        filter: currentFilter,
+                        overflowX: crop?.overflowX,
+                        overflowY: crop?.overflowY
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(BadgeOverlay, { badge, size: "sm" })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center text-xs text-neutral-400", children: "sem imagem" })
+              }
+            ),
+            !value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-xs text-neutral-400", children: "Nenhuma imagem selecionada" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-[180px] flex-col gap-2", children: [
+              canEdit && /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: openEdit,
+                  className: "flex w-full items-center justify-center gap-2 rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs font-semibold text-neutral-700 hover:border-[color:var(--ie-accent,#556FFF)] hover:text-[color:var(--ie-accent,#556FFF)]",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) }),
+                    "Editar imagem"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setPanel("change"),
+                  className: "flex w-full items-center justify-center gap-2 rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs font-semibold text-neutral-700 hover:border-[color:var(--ie-accent,#556FFF)] hover:text-[color:var(--ie-accent,#556FFF)]",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m16 3 4 4-4 4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 7H4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8 21-4-4 4-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 17h16" })
+                    ] }),
+                    value ? "Trocar imagem" : "Selecionar imagem"
+                  ]
+                }
+              ),
+              value && /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (confirm("Remover a imagem selecionada?")) onChange("");
+                  },
+                  className: "flex w-full items-center justify-center gap-2 rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-semibold text-red-600 hover:border-red-500 hover:bg-red-50",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 6h18" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+                    ] }),
+                    "Remover imagem"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          extraCards?.map((card, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "min-w-0 rounded-md border border-neutral-200 bg-white p-4",
+              children: card
+            },
+            i
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        open: panel === "edit",
+        onClose: cancelEdit,
+        title: "Editar imagem",
+        widthStyle: editModalSize?.style,
+        footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: cancelEdit,
+              className: "rounded-md border border-neutral-300 bg-white px-5 py-2 text-xs font-semibold uppercase tracking-wider text-neutral-700 hover:border-neutral-400 hover:text-neutral-900",
+              children: "Cancelar"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: confirmEdit,
+              className: "rounded-md bg-[color:var(--ie-accent,#556FFF)] px-5 py-2 text-xs font-semibold uppercase tracking-wider text-white hover:bg-[color:var(--ie-accent-hover,#3957E2)]",
+              children: "Confirmar"
+            }
+          )
+        ] }),
+        children: canEdit && previewSrc && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-neutral-500", children: "Preview" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "relative mt-2 overflow-hidden rounded-md border border-neutral-200 shadow-sm",
+                style: {
+                  width: `${ASPECT_RATIO[aspect] >= 1 ? 240 : 200}px`,
+                  aspectRatio: ASPECT_RATIO[aspect],
+                  backgroundColor: resolveBackdropBg(crop),
+                  containerType: "inline-size"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: previewSrc,
+                      alt: "",
+                      style: computeImageDisplayStyle({
+                        position: crop?.position ?? "center center",
+                        scale: crop?.scale ?? 1,
+                        mirror: !!crop?.mirror,
+                        imgDims: imageDims,
+                        targetAspect: ASPECT_RATIO[aspect],
+                        filter: buildImageFilter({
+                          grayscale: crop?.grayscale,
+                          saturation: crop?.saturation,
+                          sepia: crop?.sepia,
+                          sepiaColor: crop?.sepiaColor
+                        }),
+                        overflowX: crop?.overflowX,
+                        overflowY: crop?.overflowY
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(BadgeOverlay, { badge, size: "md" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[10px] text-neutral-500", children: aspect === "16/9" ? "Aspect 16:9 (fundo)" : "Aspect 3:4 (foto)" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ImageCropPicker,
+            {
+              imageUrl: previewSrc,
+              targetAspect: ASPECT_RATIO[aspect],
+              value: crop ?? {},
+              onChange: (next) => onCropChange?.(next),
+              maxHeight: editModalSize?.editorMaxHeight
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:w-52 md:shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            EditControls,
+            {
+              crop: crop ?? {},
+              onChange: (next) => onCropChange?.(next)
+            }
+          ) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        open: panel === "change",
+        onClose: () => setPanel(null),
+        title: value ? "Trocar imagem" : "Selecionar imagem",
+        widthClass: "max-w-3xl w-full",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 border-b border-neutral-200", children: [
+            ["images", `Imagens (${uploads.length})`],
+            ["url", "URL manual"]
+          ].map(([id, name]) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setTab(id),
+              className: `px-3 py-2 text-xs font-semibold uppercase tracking-wider transition-colors ${tab === id ? "border-b-2 border-[color:var(--ie-accent,#556FFF)] text-[color:var(--ie-accent,#556FFF)]" : "text-neutral-500 hover:text-neutral-700"}`,
+              children: name
+            },
+            id
+          )) }),
+          progressMsg && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-800", children: progressMsg }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-800", children: error }),
+          tab === "images" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                onDragOver: (e) => e.preventDefault(),
+                onDrop: (e) => {
+                  e.preventDefault();
+                  const file = e.dataTransfer.files[0];
+                  if (file) void handleFile(file);
+                },
+                className: "flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-neutral-300 bg-neutral-50 px-4 py-5 text-center",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600", children: "Arraste uma imagem aqui ou" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => fileInputRef.current?.click(),
+                      className: "rounded-md bg-[color:var(--ie-accent,#556FFF)] px-4 py-2 text-xs font-semibold uppercase tracking-wider text-white hover:bg-[color:var(--ie-accent-hover,#3957E2)]",
+                      children: "Selecionar arquivo"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-neutral-500", children: "JPG, PNG, WebP ou AVIF \xB7 M\xE1x 15MB \xB7 Otimizado pra WebP automaticamente" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      ref: fileInputRef,
+                      type: "file",
+                      accept: "image/jpeg,image/png,image/webp,image/avif,image/gif",
+                      className: "hidden",
+                      onChange: (e) => {
+                        const file = e.target.files?.[0];
+                        if (file) void handleFile(file);
+                        e.target.value = "";
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            loading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-neutral-500", children: "Carregando subidas..." }),
+            uploads.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-neutral-500", children: [
+                "Subidas (",
+                uploads.length,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2 md:grid-cols-4", children: uploads.map((up) => {
+                const selected = value === up.url;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: `group relative overflow-hidden rounded-md border ${selected ? "border-[color:var(--ie-accent,#556FFF)] ring-2 ring-[color:var(--ie-accent,#556FFF)]" : "border-neutral-200"}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => handlePickUpload(up.url),
+                          className: "block w-full text-left",
+                          title: up.filename,
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square w-full bg-neutral-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "img",
+                              {
+                                src: resolveUrl(up.url),
+                                alt: up.filename,
+                                className: "h-full w-full object-cover",
+                                loading: "lazy"
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate px-2 py-1 text-[10px] text-neutral-600", children: bytesHuman(up.sizeBytes) })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => void handleDelete(up.filename),
+                          className: "absolute right-1 top-1 rounded-full bg-black/60 px-2 py-0.5 text-[10px] text-white opacity-0 transition-opacity hover:bg-red-600 group-hover:opacity-100",
+                          title: "Remover",
+                          children: "\u2715"
+                        }
+                      )
+                    ]
+                  },
+                  up.filename
+                );
+              }) })
+            ] }),
+            presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-neutral-500", children: "Do site" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2 md:grid-cols-4", children: presets.map((img) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handlePickPreset(img.url),
+                  className: `group overflow-hidden rounded-md border text-left transition-all ${value === img.url ? "border-[color:var(--ie-accent,#556FFF)] ring-2 ring-[color:var(--ie-accent,#556FFF)]" : "border-neutral-200 hover:border-neutral-400"}`,
+                  title: img.label,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square w-full bg-neutral-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: resolveUrl(img.url),
+                        alt: img.label,
+                        className: "h-full w-full object-cover",
+                        loading: "lazy"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate px-2 py-1 text-[10px] text-neutral-600 group-hover:text-neutral-900", children: img.label })
+                  ]
+                },
+                img.url
+              )) })
+            ] })
+          ] }),
+          tab === "url" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                value,
+                onChange: async (e) => {
+                  const url = e.target.value;
+                  if (url) {
+                    const dims = await probeImageDims(resolveUrl(url));
+                    const aspectRatio = dims ? dims.w / dims.h : void 0;
+                    onChange(url, aspectRatio);
+                  } else {
+                    onChange(url);
+                  }
+                },
+                placeholder: "/uploads/...webp ou https://...",
+                className: "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-[color:var(--ie-accent,#556FFF)] focus:outline-none"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-neutral-500", children: "Caminhos relativos buscam no dom\xEDnio atual; URLs absolutas funcionam tal qual." }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setPanel(null),
+                className: "rounded-md bg-[color:var(--ie-accent,#556FFF)] px-4 py-2 text-xs font-semibold uppercase tracking-wider text-white hover:bg-[color:var(--ie-accent-hover,#3957E2)]",
+                children: "Concluir"
+              }
+            ) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function SliderRow({
+  label,
+  min,
+  max,
+  step,
+  value,
+  fallback,
+  format,
+  isCustom,
+  onChange,
+  onReset
+}) {
+  const current = value ?? fallback;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-20 shrink-0 text-xs font-semibold uppercase tracking-wider text-neutral-600", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step,
+        value: current,
+        onChange: (e) => onChange(Number(e.target.value)),
+        className: "min-w-0 flex-1 accent-[color:var(--ie-accent,#556FFF)]"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-12 shrink-0 text-right font-mono text-xs tabular-nums text-neutral-500", children: format(current) }),
+    isCustom ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onReset,
+        className: "w-10 shrink-0 text-xs text-neutral-500 hover:text-neutral-900 hover:underline",
+        title: "Resetar para o padr\xE3o",
+        children: "reset"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-10 shrink-0", "aria-hidden": "true" })
+  ] });
+}
+var DEFAULT_SEED_COLORS = ["#FFFFFF", "#000000"];
+function BadgePartControls({
+  color,
+  defaultColor,
+  size,
+  offsetX,
+  offsetY,
+  defaultPosX,
+  defaultPosY,
+  onColorChange,
+  onSizeChange,
+  onOffsetXChange,
+  onOffsetYChange,
+  recentColors,
+  recentKind = "text",
+  seedColors = DEFAULT_SEED_COLORS,
+  sizeMin = 50,
+  sizeMax = 500
+}) {
+  const effectiveColor = color || defaultColor;
+  const valueUp = effectiveColor.toUpperCase();
+  const seen = /* @__PURE__ */ new Set([valueUp]);
+  const combined = [];
+  const recents = recentColors?.colors[recentKind] ?? [];
+  for (const hex of [...recents, ...seedColors]) {
+    const up = hex.toUpperCase();
+    if (!seen.has(up)) {
+      seen.add(up);
+      combined.push(up);
+    }
+  }
+  const swatches = combined.slice(0, 5);
+  function commitColor() {
+    if (color && /^#[0-9a-fA-F]{6}$/.test(color)) {
+      recentColors?.addColor(color, recentKind);
+    }
+  }
+  function applySwatch(hex) {
+    onColorChange(hex);
+    recentColors?.addColor(hex, recentKind);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-20 shrink-0 text-xs font-semibold uppercase tracking-wider text-neutral-600", children: "Cor" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "color",
+            value: effectiveColor,
+            onChange: (e) => onColorChange(e.target.value),
+            onBlur: commitColor,
+            className: "h-8 w-10 shrink-0 cursor-pointer rounded border border-neutral-300 p-0",
+            "aria-label": "Cor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: effectiveColor,
+            onChange: (e) => {
+              const v = e.target.value;
+              if (/^#[0-9a-fA-F]{0,6}$/.test(v)) onColorChange(v);
+            },
+            onBlur: commitColor,
+            className: "min-w-0 flex-1 rounded border border-neutral-300 px-2 py-1.5 font-mono text-xs uppercase",
+            placeholder: defaultColor
+          }
+        ),
+        color !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onColorChange(void 0),
+            className: "w-10 shrink-0 text-xs text-neutral-500 hover:text-neutral-900 hover:underline",
+            title: "Resetar para o padr\xE3o",
+            children: "reset"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-10 shrink-0", "aria-hidden": "true" })
+      ] }),
+      swatches.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5 pl-[92px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-wider text-neutral-400", children: "Recentes" }),
+        swatches.map((hex) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => applySwatch(hex),
+            className: "h-5 w-5 shrink-0 rounded border border-neutral-300 transition-transform hover:scale-125",
+            style: { backgroundColor: hex },
+            title: hex,
+            "aria-label": `Aplicar ${hex}`
+          },
+          hex
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SliderRow,
+      {
+        label: "Tamanho",
+        min: sizeMin,
+        max: sizeMax,
+        step: 5,
+        value: size,
+        fallback: 100,
+        format: (v) => `${v}%`,
+        isCustom: size !== void 0,
+        onChange: onSizeChange,
+        onReset: () => onSizeChange(void 0)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SliderRow,
+      {
+        label: "Pos. X",
+        min: 0,
+        max: 100,
+        step: 0.5,
+        value: offsetX,
+        fallback: defaultPosX,
+        format: (v) => `${v.toFixed(1)}%`,
+        isCustom: offsetX !== void 0,
+        onChange: onOffsetXChange,
+        onReset: () => onOffsetXChange(void 0)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SliderRow,
+      {
+        label: "Pos. Y",
+        min: 0,
+        max: 100,
+        step: 0.5,
+        value: offsetY,
+        fallback: defaultPosY,
+        format: (v) => `${v.toFixed(1)}%`,
+        isCustom: offsetY !== void 0,
+        onChange: onOffsetYChange,
+        onReset: () => onOffsetYChange(void 0)
+      }
+    )
+  ] });
+}
+function TextField({
+  label,
+  value,
+  onChange,
+  placeholder
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs font-semibold uppercase tracking-wider text-neutral-700 mb-1", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        className: "block w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-[color:var(--ie-accent,#556FFF)] focus:ring-2 focus:ring-blue-200",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        placeholder
+      }
+    )
+  ] });
+}
+function BadgeEditorCard({
+  title,
+  value,
+  onChange,
+  defaultColor,
+  defaultPosX,
+  defaultPosY,
+  enabledLabel = "Exibir",
+  textPlaceholder,
+  recentColors,
+  recentKind = "text",
+  seedColors,
+  sizeMin,
+  sizeMax
+}) {
+  const enabled = value.enabled !== false;
+  function patch(partial) {
+    onChange({ ...value, ...partial });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-wider text-neutral-500", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm text-neutral-700", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: enabled,
+          onChange: (e) => patch({ enabled: e.target.checked ? void 0 : false }),
+          className: "h-4 w-4 accent-[color:var(--ie-accent,#556FFF)]"
+        }
+      ),
+      enabledLabel
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TextField,
+      {
+        label: "Texto",
+        value: value.text,
+        onChange: (v) => patch({ text: v }),
+        placeholder: textPlaceholder
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BadgePartControls,
+      {
+        color: value.color,
+        defaultColor,
+        size: value.size,
+        offsetX: value.offsetX,
+        offsetY: value.offsetY,
+        defaultPosX,
+        defaultPosY,
+        onColorChange: (v) => patch({ color: v }),
+        onSizeChange: (v) => patch({ size: v }),
+        onOffsetXChange: (v) => patch({ offsetX: v }),
+        onOffsetYChange: (v) => patch({ offsetY: v }),
+        recentColors,
+        recentKind,
+        seedColors,
+        sizeMin,
+        sizeMax
+      }
+    )
+  ] });
+}
+
+exports.BadgeEditorCard = BadgeEditorCard;
+exports.BadgeOverlay = BadgeOverlay;
+exports.BadgePartControls = BadgePartControls;
+exports.ImageCropPicker = ImageCropPicker;
+exports.ImagePicker = ImagePicker;
+exports.MAX_SCALE = MAX_SCALE;
+exports.MIN_SCALE = MIN_SCALE;
+exports.SliderRow = SliderRow;
+exports.buildImageFilter = buildImageFilter;
+exports.buildImageGeometry = buildImageGeometry;
+exports.computeVisibleBase = computeVisibleBase;
+exports.focalToOp = focalToOp;
+exports.formatPos = formatPos;
+exports.opToFocal = opToFocal;
+exports.parsePosition = parsePosition;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map