@namroodinc/liquid-editorial 0.1.8 → 0.1.9

package/dist/components/ImageCropper/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","useRef","useState","useCallback","useMemo","Stack","Field","Slider","ButtonGroup","_Fragment","Button","require_components_Button_index","require_components_ButtonGroup_index","require_components_Field_index","require_components_Grid_index","require_components_Slider_index","react","react_jsx_runtime","MIN_ZOOM","REST","ImageCropper","rest","frameRef","frame","setFrame","natural","setNatural","state","setState","dragRef","imageRef","prev","aspect","turn","by","adopt","img","src","quarter","view","baseScale","node","measure","observer","clamp","zoom","maxZoom","next","nextScale","limitX","limitY","offsetX","offsetY","bounded","scale","maxOffsetX","maxOffsetY","hint","width","height","onChange","onPointerDown","event","onPointerMove","drag","dx","dy","endDrag","nudge","className","step","move","props","rotatable","cropToBlob","image","rotation","turned","turnedContext","outputWidth","crop","canvas","context","blob","resolve","reject","type","quality"],"sources":["../../../src/components/ImageCropper/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport { Field } from \"../Field\";\nimport { Stack } from \"../Grid\";\nimport { Slider } from \"../Slider\";\nimport \"./style.css\";\n\nexport interface CropRect {\n  /** Left edge of the crop, in the (rotated) image's own pixels. */\n  x: number;\n  /** Top edge of the crop, in the (rotated) image's own pixels. */\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface CropState {\n  /** Pan, in stage pixels, from the centre. */\n  offsetX: number;\n  offsetY: number;\n  /** 1 is \"cover the crop window exactly\". */\n  zoom: number;\n  /** Quarter turns applied to the picture, clockwise: 0, 90, 180 or 270. */\n  rotation: number;\n}\n\nexport interface ImageCropperProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\"\n> {\n  src: string;\n  /** Describes the picture for people who cannot see the stage. */\n  alt?: string;\n  /** Required output shape, width / height. Must be positive and finite. */\n  aspect: number;\n  /** Highest allowed zoom. Past 3 the result is mush on most uploads. */\n  maxZoom?: number;\n  /** Offer the quarter-turn controls. */\n  rotatable?: boolean;\n  /** Fires on every pan, zoom, turn and reset, with the crop in image pixels. */\n  onChange?: (crop: CropRect, state: CropState) => void;\n}\n\nconst MIN_ZOOM = 1;\nconst REST: CropState = { offsetX: 0, offsetY: 0, zoom: 1, rotation: 0 };\n\n/**\n * Pan-and-zoom cropping over a fixed frame. The frame never moves — the\n * picture does — and the parts that fall outside it stay visible under a\n * veil, so the reader can see what they are trimming away.\n * Drag with a pointer, or focus the stage and use the arrow keys.\n */\nexport const ImageCropper = forwardRef<HTMLDivElement, ImageCropperProps>(\n  function ImageCropper(\n    {\n      src,\n      alt = \"\",\n      aspect,\n      maxZoom = 3,\n      rotatable = true,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) {\n    const frameRef = useRef<HTMLDivElement | null>(null);\n    const [frame, setFrame] = useState({ width: 0, height: 0 });\n    const [natural, setNatural] = useState({ width: 0, height: 0 });\n    const [state, setState] = useState<CropState>(REST);\n    const dragRef = useRef<{ pointerId: number; x: number; y: number } | null>(\n      null,\n    );\n    const imageRef = useRef<HTMLImageElement | null>(null);\n\n    // The prop stays the source of truth when the caller drives the shape.\n    useEffect(() => {\n      setState((prev) => ({ ...REST, rotation: prev.rotation }));\n    }, [aspect]);\n\n    const turn = (by: number) =>\n      setState((prev) => ({\n        ...REST,\n        rotation: (prev.rotation + by + 360) % 360,\n      }));\n\n    /** Take the picture's own pixels and start from a centred, unzoomed view. */\n    const adopt = useCallback((img: HTMLImageElement) => {\n      if (!img.naturalWidth) return;\n      setNatural({ width: img.naturalWidth, height: img.naturalHeight });\n      setState(REST);\n    }, []);\n\n    // A cached or server-rendered image can already be decoded before React\n    // attaches onLoad, and then that event never fires.\n    useEffect(() => {\n      const img = imageRef.current;\n      if (img?.complete) adopt(img);\n    }, [adopt, src]);\n\n    // After a quarter turn the picture presents its other side to the frame.\n    const quarter = state.rotation % 180 !== 0;\n    const view = {\n      width: quarter ? natural.height : natural.width,\n      height: quarter ? natural.width : natural.height,\n    };\n\n    // The scale at which the image exactly covers the frame; zoom multiplies it.\n    const baseScale =\n      view.width && frame.width\n        ? Math.max(frame.width / view.width, frame.height / view.height)\n        : 0;\n\n    useLayoutEffect(() => {\n      const node = frameRef.current;\n      if (!node) return;\n      const measure = () =>\n        setFrame({ width: node.clientWidth, height: node.clientHeight });\n      measure();\n      const observer = new ResizeObserver(measure);\n      observer.observe(node);\n      return () => observer.disconnect();\n    }, [aspect]);\n\n    const clamp = useCallback(\n      (next: CropState): CropState => {\n        const zoom = Math.min(\n          Math.max(MIN_ZOOM, maxZoom),\n          Math.max(MIN_ZOOM, next.zoom),\n        );\n        const nextScale = baseScale * zoom;\n        const limitX = nextScale\n          ? Math.max(0, (view.width * nextScale - frame.width) / 2)\n          : 0;\n        const limitY = nextScale\n          ? Math.max(0, (view.height * nextScale - frame.height) / 2)\n          : 0;\n        const offsetX = Math.min(limitX, Math.max(-limitX, next.offsetX));\n        const offsetY = Math.min(limitY, Math.max(-limitY, next.offsetY));\n        if (\n          zoom === next.zoom &&\n          offsetX === next.offsetX &&\n          offsetY === next.offsetY\n        )\n          return next;\n        return { ...next, zoom, offsetX, offsetY };\n      },\n      [baseScale, maxZoom, view.height, view.width, frame.height, frame.width],\n    );\n\n    // Keep the rendered transform bounded when the frame or zoom limit changes too.\n    const bounded = useMemo(() => clamp(state), [clamp, state]);\n    useEffect(() => {\n      setState(bounded);\n    }, [bounded]);\n    const scale = baseScale * bounded.zoom;\n    const maxOffsetX = scale\n      ? Math.max(0, (view.width * scale - frame.width) / 2)\n      : 0;\n    const maxOffsetY = scale\n      ? Math.max(0, (view.height * scale - frame.height) / 2)\n      : 0;\n    const hint = `Drag the picture to reposition it. Nothing is written until you save — ${\n      maxOffsetX === 0 && maxOffsetY === 0\n        ? \"at this zoom the whole picture is in frame.\"\n        : \"the veiled edges are what gets trimmed.\"\n    }`;\n\n    useEffect(() => {\n      if (!scale || !frame.width) return;\n      const width = Math.min(view.width, Math.round(frame.width / scale));\n      const height = Math.min(view.height, Math.round(frame.height / scale));\n      onChange?.(\n        {\n          x: Math.max(\n            0,\n            Math.min(\n              view.width - width,\n              Math.round(\n                view.width / 2 -\n                  bounded.offsetX / scale -\n                  frame.width / scale / 2,\n              ),\n            ),\n          ),\n          y: Math.max(\n            0,\n            Math.min(\n              view.height - height,\n              Math.round(\n                view.height / 2 -\n                  bounded.offsetY / scale -\n                  frame.height / scale / 2,\n              ),\n            ),\n          ),\n          width,\n          height,\n        },\n        bounded,\n      );\n      // onChange is intentionally not a dependency: callers pass inline handlers.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [scale, frame.width, frame.height, view.width, view.height, bounded]);\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (event.button !== 0) return;\n      dragRef.current = {\n        pointerId: event.pointerId,\n        x: event.clientX,\n        y: event.clientY,\n      };\n      event.currentTarget.setPointerCapture(event.pointerId);\n    };\n\n    const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n      const drag = dragRef.current;\n      if (!drag || drag.pointerId !== event.pointerId) return;\n      const dx = event.clientX - drag.x;\n      const dy = event.clientY - drag.y;\n      dragRef.current = { ...drag, x: event.clientX, y: event.clientY };\n      setState((prev) =>\n        clamp({\n          ...prev,\n          offsetX: prev.offsetX + dx,\n          offsetY: prev.offsetY + dy,\n        }),\n      );\n    };\n\n    const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (dragRef.current?.pointerId !== event.pointerId) return;\n      dragRef.current = null;\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    };\n\n    const nudge = (dx: number, dy: number) =>\n      setState((prev) =>\n        clamp({\n          ...prev,\n          offsetX: prev.offsetX + dx,\n          offsetY: prev.offsetY + dy,\n        }),\n      );\n\n    return (\n      <Stack\n        ref={ref}\n        className={[\"ds-cropper\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        <div\n          role=\"application\"\n          aria-label=\"Crop area — drag to reposition, arrow keys to nudge\"\n          tabIndex={0}\n          className=\"ds-cropper__stage\"\n          style={{ \"--cropper-aspect\": String(aspect) } as CSSProperties}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endDrag}\n          onPointerCancel={endDrag}\n          onKeyDown={(event) => {\n            const step = event.shiftKey ? 24 : 8;\n            const moves: Record<string, [number, number]> = {\n              ArrowLeft: [-step, 0],\n              ArrowRight: [step, 0],\n              ArrowUp: [0, -step],\n              ArrowDown: [0, step],\n            };\n            const move = moves[event.key];\n            if (!move) return;\n            event.preventDefault();\n            nudge(move[0], move[1]);\n          }}\n        >\n          <img\n            ref={imageRef}\n            src={src}\n            alt={alt}\n            draggable={false}\n            className=\"ds-cropper__image\"\n            onLoad={(event) => adopt(event.currentTarget)}\n            style={{\n              inlineSize: natural.width * scale || undefined,\n              blockSize: natural.height * scale || undefined,\n              transform: `translate(calc(-50% + ${bounded.offsetX}px), calc(-50% + ${bounded.offsetY}px)) rotate(${bounded.rotation}deg)`,\n            }}\n          />\n          {/* The window: everything outside it is veiled, not hidden. */}\n          <div className=\"ds-cropper__frame\" ref={frameRef} aria-hidden=\"true\">\n            <div className=\"ds-cropper__guides\" />\n          </div>\n        </div>\n\n        <Field label=\"Zoom\" hint={hint}>\n          {(props) => (\n            <Stack direction=\"horizontal\" gap=\"md\" align=\"center\" wrap>\n              <Stack style={{ flex: \"1 1 50%\", minInlineSize: 0 }}>\n                <Slider\n                  {...props}\n                  min={MIN_ZOOM}\n                  max={Math.max(MIN_ZOOM, maxZoom)}\n                  step={0.01}\n                  value={bounded.zoom}\n                  suffix=\"×\"\n                  onValueChange={(zoom) =>\n                    setState((prev) => clamp({ ...prev, zoom }))\n                  }\n                />\n              </Stack>\n              <ButtonGroup aria-label=\"Crop actions\">\n                {rotatable && (\n                  <>\n                    <Button\n                      size=\"sm\"\n                      iconStart=\"rotate-ccw\"\n                      aria-label=\"Rotate left\"\n                      onClick={() => turn(-90)}\n                    />\n                    <Button\n                      size=\"sm\"\n                      iconStart=\"rotate-cw\"\n                      aria-label=\"Rotate right\"\n                      onClick={() => turn(90)}\n                    />\n                  </>\n                )}\n                <Button size=\"sm\" onClick={() => setState(REST)}>\n                  Reset\n                </Button>\n              </ButtonGroup>\n            </Stack>\n          )}\n        </Field>\n      </Stack>\n    );\n  },\n);\n\nexport interface CropToBlobOptions {\n  /** Width of the output in pixels; the height follows the crop's aspect. */\n  outputWidth?: number;\n  /** Quarter turns applied before cropping — pass `state.rotation`. */\n  rotation?: number;\n  type?: \"image/png\" | \"image/jpeg\" | \"image/webp\";\n  quality?: number;\n}\n\n/**\n * Renders a `CropRect` to an image blob in the browser. Same-origin or\n * CORS-enabled sources only — a tainted canvas cannot be exported.\n */\nexport async function cropToBlob(\n  src: string,\n  crop: CropRect,\n  {\n    outputWidth,\n    rotation = 0,\n    type = \"image/png\",\n    quality = 0.92,\n  }: CropToBlobOptions = {},\n): Promise<Blob> {\n  const image = new Image();\n  image.crossOrigin = \"anonymous\";\n  image.src = src;\n  await image.decode();\n\n  // The crop is expressed against the turned picture, so turn it first.\n  const quarter = rotation % 180 !== 0;\n  const turned = document.createElement(\"canvas\");\n  turned.width = quarter ? image.naturalHeight : image.naturalWidth;\n  turned.height = quarter ? image.naturalWidth : image.naturalHeight;\n  const turnedContext = turned.getContext(\"2d\");\n  if (!turnedContext) throw new Error(\"Canvas 2D context unavailable\");\n  turnedContext.translate(turned.width / 2, turned.height / 2);\n  turnedContext.rotate((rotation * Math.PI) / 180);\n  turnedContext.drawImage(\n    image,\n    -image.naturalWidth / 2,\n    -image.naturalHeight / 2,\n  );\n\n  const width = outputWidth ?? crop.width;\n  const height = Math.round((crop.height / crop.width) * width);\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = width;\n  canvas.height = height;\n  const context = canvas.getContext(\"2d\");\n  if (!context) throw new Error(\"Canvas 2D context unavailable\");\n  context.drawImage(\n    turned,\n    crop.x,\n    crop.y,\n    crop.width,\n    crop.height,\n    0,\n    0,\n    width,\n    height,\n  );\n\n  return new Promise((resolve, reject) => {\n    canvas.toBlob(\n      (blob) =>\n        blob ? resolve(blob) : reject(new Error(\"Could not encode the crop\")),\n      type,\n      quality,\n    );\n  });\n}\n"],"mappings":"A,sSAuDA,IAAMkB,EAAW,EACXC,EAAkB,CAAE,QAAS,EAAG,QAAS,EAAG,KAAM,EAAG,SAAU,CAAE,EAQ1DC,GAAA,EAAepB,EAAAA,WAAAA,CAC1B,SACE,CACE,MACA,MAAM,GACN,SACA,UAAU,EACV,YAAY,GACZ,WACA,YACA,GAAGqB,GAEL,EACA,CACA,IAAMC,GAAA,EAAWrB,EAAAA,OAAAA,CAA8B,IAAI,EAC7C,CAACsB,EAAOC,IAAA,EAAYtB,EAAAA,SAAAA,CAAS,CAAE,MAAO,EAAG,OAAQ,CAAE,CAAC,EACpD,CAACuB,EAASC,IAAA,EAAcxB,EAAAA,SAAAA,CAAS,CAAE,MAAO,EAAG,OAAQ,CAAE,CAAC,EACxD,CAACyB,EAAOC,IAAA,EAAY1B,EAAAA,SAAAA,CAAoBiB,CAAI,EAC5CU,GAAA,EAAU5B,EAAAA,OAAAA,CACd,IACF,EACM6B,GAAA,EAAW7B,EAAAA,OAAAA,CAAgC,IAAI,GAGrD,EAAAe,EAAA,UAAA,KAAgB,CACdY,EAAU,IAAU,CAAE,GAAGT,EAAM,SAAUY,EAAK,QAAS,EAAE,CAC3D,EAAG,CAACC,CAAM,CAAC,EAEX,IAAMC,EAAQ,GACZL,EAAU,IAAU,CAClB,GAAGT,EACH,UAAWY,EAAK,SAAWG,EAAK,KAAO,GACzC,EAAE,EAGEC,GAAA,EAAQhC,EAAAA,YAAAA,CAAa,GAA0B,CAC9CiC,EAAI,eACTV,EAAW,CAAE,MAAOU,EAAI,aAAc,OAAQA,EAAI,aAAc,CAAC,EACjER,EAAST,CAAI,EACf,EAAG,CAAC,CAAC,GAIL,EAAAH,EAAA,UAAA,KAAgB,CACd,IAAMoB,EAAMN,EAAS,QACjBM,GAAK,UAAUD,EAAMC,CAAG,CAC9B,EAAG,CAACD,EAAOE,CAAG,CAAC,EAGf,IAAMC,EAAUX,EAAM,SAAW,KAAQ,EACnCY,EAAO,CACX,MAAOD,EAAUb,EAAQ,OAASA,EAAQ,MAC1C,OAAQa,EAAUb,EAAQ,MAAQA,EAAQ,MAC5C,EAGMe,EACJD,EAAK,OAAShB,EAAM,MAChB,KAAK,IAAIA,EAAM,MAAQgB,EAAK,MAAOhB,EAAM,OAASgB,EAAK,MAAM,EAC7D,GAEN,EAAAvB,EAAA,gBAAA,KAAsB,CACpB,IAAMyB,EAAOnB,EAAS,QACtB,GAAI,CAACmB,EAAM,OACX,IAAMC,MACJlB,EAAS,CAAE,MAAOiB,EAAK,YAAa,OAAQA,EAAK,YAAa,CAAC,EACjEC,EAAQ,EACR,IAAMC,EAAW,IAAI,eAAeD,CAAO,EAE3C,OADAC,EAAS,QAAQF,CAAI,MACRE,EAAS,WAAW,CACnC,EAAG,CAACX,CAAM,CAAC,EAEX,IAAMY,GAAA,EAAQzC,EAAAA,YAAAA,CACX,GAA+B,CAC9B,IAAM0C,EAAO,KAAK,IAChB,KAAK,IAAI3B,EAAU4B,CAAO,EAC1B,KAAK,IAAI5B,EAAU6B,EAAK,IAAI,CAC9B,EACMC,EAAYR,EAAYK,EACxBI,EAASD,EACX,KAAK,IAAI,GAAIT,EAAK,MAAQS,EAAYzB,EAAM,OAAS,CAAC,EACtD,EACE2B,EAASF,EACX,KAAK,IAAI,GAAIT,EAAK,OAASS,EAAYzB,EAAM,QAAU,CAAC,EACxD,EACE4B,EAAU,KAAK,IAAIF,EAAQ,KAAK,IAAI,CAACA,EAAQF,EAAK,OAAO,CAAC,EAC1DK,EAAU,KAAK,IAAIF,EAAQ,KAAK,IAAI,CAACA,EAAQH,EAAK,OAAO,CAAC,EAOhE,OALEF,IAASE,EAAK,MACdI,IAAYJ,EAAK,SACjBK,IAAYL,EAAK,QAEVA,EACF,CAAE,GAAGA,EAAM,OAAM,UAAS,SAAQ,CAC3C,EACA,CAACP,EAAWM,EAASP,EAAK,OAAQA,EAAK,MAAOhB,EAAM,OAAQA,EAAM,KAAK,CACzE,EAGM8B,GAAA,EAAUjD,EAAAA,QAAAA,KAAcwC,EAAMjB,CAAK,EAAG,CAACiB,EAAOjB,CAAK,CAAC,GAC1D,EAAAX,EAAA,UAAA,KAAgB,CACdY,EAASyB,CAAO,CAClB,EAAG,CAACA,CAAO,CAAC,EACZ,IAAMC,EAAQd,EAAYa,EAAQ,KAC5BE,EAAaD,EACf,KAAK,IAAI,GAAIf,EAAK,MAAQe,EAAQ/B,EAAM,OAAS,CAAC,EAClD,EACEiC,EAAaF,EACf,KAAK,IAAI,GAAIf,EAAK,OAASe,EAAQ/B,EAAM,QAAU,CAAC,EACpD,EACEkC,EAAO,0EACXF,IAAe,GAAKC,IAAe,EAC/B,8CACA,6CAGN,EAAAxC,EAAA,UAAA,KAAgB,CACd,GAAI,CAACsC,GAAS,CAAC/B,EAAM,MAAO,OAC5B,IAAMmC,EAAQ,KAAK,IAAInB,EAAK,MAAO,KAAK,MAAMhB,EAAM,MAAQ+B,CAAK,CAAC,EAC5DK,EAAS,KAAK,IAAIpB,EAAK,OAAQ,KAAK,MAAMhB,EAAM,OAAS+B,CAAK,CAAC,EACrEM,IACE,CACE,EAAG,KAAK,IACN,EACA,KAAK,IACHrB,EAAK,MAAQmB,EACb,KAAK,MACHnB,EAAK,MAAQ,EACXc,EAAQ,QAAUC,EAClB/B,EAAM,MAAQ+B,EAAQ,CAC1B,CACF,CACF,EACA,EAAG,KAAK,IACN,EACA,KAAK,IACHf,EAAK,OAASoB,EACd,KAAK,MACHpB,EAAK,OAAS,EACZc,EAAQ,QAAUC,EAClB/B,EAAM,OAAS+B,EAAQ,CAC3B,CACF,CACF,EACA,QACA,QACF,EACAD,CACF,CAGF,EAAG,CAACC,EAAO/B,EAAM,MAAOA,EAAM,OAAQgB,EAAK,MAAOA,EAAK,OAAQc,CAAO,CAAC,EAEvE,IAAMQ,EAAiB,GAA6C,CAC9DC,EAAM,SAAW,IACrB,EAAQ,QAAU,CAChB,UAAWA,EAAM,UACjB,EAAGA,EAAM,QACT,EAAGA,EAAM,OACX,EACAA,EAAM,cAAc,kBAAkBA,EAAM,SAAS,EACvD,EAEMC,EAAiB,GAA6C,CAClE,IAAMC,EAAOnC,EAAQ,QACrB,GAAI,CAACmC,GAAQA,EAAK,YAAcF,EAAM,UAAW,OACjD,IAAMG,EAAKH,EAAM,QAAUE,EAAK,EAC1BE,EAAKJ,EAAM,QAAUE,EAAK,EAChC,EAAQ,QAAU,CAAE,GAAGA,EAAM,EAAGF,EAAM,QAAS,EAAGA,EAAM,OAAQ,EAChElC,EAAU,GACRgB,EAAM,CACJ,GAAGb,EACH,QAASA,EAAK,QAAUkC,EACxB,QAASlC,EAAK,QAAUmC,CAC1B,CAAC,CACH,CACF,EAEMC,EAAW,GAA6C,CACxDtC,EAAQ,SAAS,YAAciC,EAAM,YACzC,EAAQ,QAAU,KAClBA,EAAM,cAAc,wBAAwBA,EAAM,SAAS,EAC7D,EAEMM,GAAS,EAAY,IACzBxC,EAAU,GACRgB,EAAM,CACJ,GAAGb,EACH,QAASA,EAAK,QAAUkC,EACxB,QAASlC,EAAK,QAAUmC,CAC1B,CAAC,CACH,EAEF,OACE,EAAAjD,EAAA,KAAA,CAACZ,EAAAA,MAAD,CACO,MACL,UAAW,CAAC,aAAcgE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC7D,GAAIhD,EAHN,SAAA,EAKE,EAAAJ,EAAA,KAAA,CAAC,MAAD,CACE,KAAK,cACL,aAAW,sDACX,SAAU,EACV,UAAU,oBACV,MAAO,CAAE,mBAAoB,OAAOe,CAAM,CAAE,EAC7B,gBACA,gBACf,YAAamC,EACb,gBAAiBA,EACjB,UAAY,GAAU,CACpB,IAAMG,EAAOR,EAAM,SAAW,GAAK,EAO7BS,EAAO,CALX,UAAW,CAAC,CAACD,EAAM,CAAC,EACpB,WAAY,CAACA,EAAM,CAAC,EACpB,QAAS,CAAC,EAAG,CAACA,CAAI,EAClB,UAAW,CAAC,EAAGA,CAAI,CAER,EAAMR,EAAM,KACpBS,IACLT,EAAM,eAAe,EACrBM,EAAMG,EAAK,GAAIA,EAAK,EAAE,EACxB,EAtBF,SAAA,EAwBE,EAAAtD,EAAA,IAAA,CAAC,MAAD,CACE,IAAKa,EACA,MACA,MACL,UAAW,GACX,UAAU,oBACV,OAAS,GAAUK,EAAM2B,EAAM,aAAa,EAC5C,MAAO,CACL,WAAYrC,EAAQ,MAAQ6B,GAAS,IAAA,GACrC,UAAW7B,EAAQ,OAAS6B,GAAS,IAAA,GACrC,UAAW,yBAAyBD,EAAQ,QAAQ,mBAAmBA,EAAQ,QAAQ,cAAcA,EAAQ,SAAS,KACxH,CACD,CAAA,GAED,EAAApC,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,oBAAoB,IAAKK,EAAU,cAAY,OAC5D,UAAA,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,oBAAsB,CAAA,CAClC,CAAA,CACF,CAEL,CAAA,GAAA,EAAAA,EAAA,IAAA,CAACX,EAAAA,MAAD,CAAO,MAAM,OAAa,OACtB,SAAA,IACA,EAAAW,EAAA,KAAA,CAACZ,EAAAA,MAAD,CAAO,UAAU,aAAa,IAAI,KAAK,MAAM,SAAS,KAAA,GAAtD,SAAA,EACE,EAAAY,EAAA,IAAA,CAACZ,EAAAA,MAAD,CAAO,MAAO,CAAE,KAAM,UAAW,cAAe,CAAE,EAChD,UAAA,EAAAY,EAAA,IAAA,CAACV,EAAAA,OAAD,CACE,GAAIiE,EACJ,IAAKtD,EACL,IAAK,KAAK,IAAIA,EAAU4B,CAAO,EAC/B,KAAM,IACN,MAAOO,EAAQ,KACf,OAAO,IACP,cAAgB,GACdzB,EAAU,GAASgB,EAAM,CAAE,GAAGb,EAAM,MAAK,CAAC,CAAC,CAE9C,CAAA,CACI,CAAA,GACP,EAAAd,EAAA,KAAA,CAACT,EAAAA,YAAD,CAAa,aAAW,eAAxB,SAAA,CACGiE,IACC,EAAAxD,EAAA,KAAA,CAAAR,EAAAA,SAAA,CAAA,SAAA,EACE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,OAAD,CACE,KAAK,KACL,UAAU,aACV,aAAW,cACX,YAAeuB,EAAK,GAAG,CACxB,CAAA,GACD,EAAAhB,EAAA,IAAA,CAACP,EAAAA,OAAD,CACE,KAAK,KACL,UAAU,YACV,aAAW,eACX,YAAeuB,EAAK,EAAE,CACvB,CAAA,CACD,CAAA,CAAA,GAEJ,EAAAhB,EAAA,IAAA,CAACP,EAAAA,OAAD,CAAQ,KAAK,KAAK,YAAekB,EAAST,CAAI,EAAG,SAAA,OAEzC,CAAA,CACG,CACR,CAAA,CAAA,C,EAEJ,CAAA,CACF,C,EAEX,CACF,EAeA,eAAsBuD,EACpB,EACA,EACA,CACE,cACA,WAAW,EACX,OAAO,YACP,UAAU,KACW,CAAC,EACT,CACf,IAAMC,EAAQ,IAAI,MAClB,EAAM,YAAc,YACpB,EAAM,IAAMtC,EACZ,MAAMsC,EAAM,OAAO,EAGnB,IAAMrC,EAAUsC,EAAW,KAAQ,EAC7BC,EAAS,SAAS,cAAc,QAAQ,EAC9C,EAAO,MAAQvC,EAAUqC,EAAM,cAAgBA,EAAM,aACrD,EAAO,OAASrC,EAAUqC,EAAM,aAAeA,EAAM,cACrD,IAAMG,EAAgBD,EAAO,WAAW,IAAI,EAC5C,GAAI,CAACC,EAAe,MAAU,MAAM,+BAA+B,EACnEA,EAAc,UAAUD,EAAO,MAAQ,EAAGA,EAAO,OAAS,CAAC,EAC3DC,EAAc,OAAQF,EAAW,KAAK,GAAM,GAAG,EAC/CE,EAAc,UACZH,EACA,CAACA,EAAM,aAAe,EACtB,CAACA,EAAM,cAAgB,CACzB,EAEA,IAAMjB,EAAQqB,GAAeC,EAAK,MAC5BrB,EAAS,KAAK,MAAOqB,EAAK,OAASA,EAAK,MAAStB,CAAK,EACtDuB,EAAS,SAAS,cAAc,QAAQ,EAC9C,EAAO,MAAQvB,EACf,EAAO,OAASC,EAChB,IAAMuB,EAAUD,EAAO,WAAW,IAAI,EACtC,GAAI,CAACC,EAAS,MAAU,MAAM,+BAA+B,EAa7D,OAZAA,EAAQ,UACNL,EACAG,EAAK,EACLA,EAAK,EACLA,EAAK,MACLA,EAAK,OACL,EACA,EACAtB,EACAC,CACF,EAEO,IAAI,SAAS,EAAS,IAAW,CACtCsB,EAAO,OACJ,GACCE,EAAOC,EAAQD,CAAI,EAAIE,EAAW,MAAM,2BAA2B,CAAC,EACtEC,EACAC,CACF,CACF,CAAC,CACH,C"}
+{"version":3,"file":"index.cjs","names":["forwardRef","useRef","useState","useCallback","useMemo","Stack","Field","Slider","ButtonGroup","_Fragment","Button","require_components_Button_index","require_components_ButtonGroup_index","require_components_Field_index","require_components_Grid_index","require_components_Slider_index","react","react_jsx_runtime","MIN_ZOOM","CENTRED","turnPoint","point","x","y","turns","degrees","project","quarter","rotation","width","picture","height","frame","zoom","seed","finite","value","fallback","fraction","saved","ImageCropper","rest","frameRef","imageRef","dragRef","setFrame","natural","setNatural","framing","setFraming","defaultState","shown","setShown","src","aspect","prev","adopt","img","node","measure","observer","clamp","maxZoom","next","view","halfX","halfY","bounded","scale","offsetX","offsetY","maxOffsetX","maxOffsetY","hint","cx","cy","onChange","pan","at","dx","dy","turn","by","onPointerDown","event","onPointerMove","drag","endDrag","className","step","move","props","rotatable","cropToBlob","image","turned","turnedContext","outputWidth","crop","canvas","context","blob","resolve","reject","type","quality"],"sources":["../../../src/components/ImageCropper/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport { Field } from \"../Field\";\nimport { Stack } from \"../Grid\";\nimport { Slider } from \"../Slider\";\nimport \"./style.css\";\n\nexport interface CropRect {\n  /** Left edge of the crop, in the (rotated) image's own pixels. */\n  x: number;\n  /** Top edge of the crop, in the (rotated) image's own pixels. */\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface CropState {\n  /** Pan, in stage pixels, from the centre. Follows the stage size, so save `cx`/`cy`. */\n  offsetX: number;\n  offsetY: number;\n  /** 1 is \"cover the crop window exactly\". */\n  zoom: number;\n  /** Quarter turns applied to the picture, clockwise: 0, 90, 180 or 270. */\n  rotation: number;\n  /** Crop centre as fractions of the unrotated source image. */\n  cx: number;\n  cy: number;\n}\n\n/** A saved selection. Every emitted `CropState` is one, so it can be passed straight back. */\nexport interface ImageCropperDefaultState {\n  /** Zoom at initialization; clamped to the supported range. */\n  zoom: number;\n  /** Crop centre as fractions of the unrotated source image. */\n  cx: number;\n  cy: number;\n  /** Clockwise quarter turns, snapped to 0, 90, 180 or 270. Defaults to 0. */\n  rotation?: number;\n}\n\nexport interface ImageCropperProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\"\n> {\n  src: string;\n  /** Uncontrolled initial selection. Applied again whenever `src` changes. */\n  defaultState?: ImageCropperDefaultState;\n  /** Describes the picture for people who cannot see the stage. */\n  alt?: string;\n  /** Required output shape, width / height. Must be positive and finite. */\n  aspect: number;\n  /** Highest allowed zoom. Past 3 the result is mush on most uploads. */\n  maxZoom?: number;\n  /** Offer the quarter-turn controls. */\n  rotatable?: boolean;\n  /** Fires on every pan, zoom, turn and reset, with the crop in image pixels. */\n  onChange?: (crop: CropRect, state: CropState) => void;\n}\n\ninterface Size {\n  width: number;\n  height: number;\n}\n\n/** The selection as the engine keeps it, independent of the stage's size. */\ninterface Framing {\n  zoom: number;\n  rotation: number;\n  /** Frame centre as fractions of the picture as turned. */\n  x: number;\n  y: number;\n}\n\nconst MIN_ZOOM = 1;\nconst CENTRED: Framing = { zoom: 1, rotation: 0, x: 0.5, y: 0.5 };\n\n/** Carries a point, in fractions of a picture, through clockwise quarter turns of it. */\nfunction turnPoint(x: number, y: number, degrees: number): [number, number] {\n  let point: [number, number] = [x, y];\n  for (let turns = Math.round(degrees / 90) % 4; turns > 0; turns--) {\n    point = [1 - point[1], point[0]];\n  }\n  return point;\n}\n\n/** The turned picture's size, and the stage scale at which it covers the frame at this zoom. */\nfunction project(picture: Size, frame: Size, rotation: number, zoom: number) {\n  const quarter = rotation % 180 !== 0;\n  const width = quarter ? picture.height : picture.width;\n  const height = quarter ? picture.width : picture.height;\n  return {\n    width,\n    height,\n    scale: Math.max(frame.width / width, frame.height / height) * zoom,\n  };\n}\n\n/** Reads a saved selection, falling back to the centre for anything unusable. */\nfunction seed(saved: ImageCropperDefaultState | undefined): Framing {\n  const finite = (value: number | undefined, fallback: number) =>\n    value != null && Number.isFinite(value) ? value : fallback;\n  const fraction = (value: number | undefined) =>\n    Math.min(1, Math.max(0, finite(value, 0.5)));\n  const rotation =\n    (((Math.round(finite(saved?.rotation, 0) / 90) * 90) % 360) + 360) % 360;\n  const [x, y] = turnPoint(fraction(saved?.cx), fraction(saved?.cy), rotation);\n  return { zoom: finite(saved?.zoom, 1), rotation, x, y };\n}\n\n/**\n * Pan-and-zoom cropping over a fixed frame. The frame never moves — the\n * picture does — and the parts that fall outside it stay visible under a\n * veil, so the reader can see what they are trimming away.\n * Drag with a pointer, or focus the stage and use the arrow keys.\n */\nexport const ImageCropper = forwardRef<HTMLDivElement, ImageCropperProps>(\n  function ImageCropper(\n    {\n      src,\n      alt = \"\",\n      aspect,\n      maxZoom = 3,\n      rotatable = true,\n      onChange,\n      defaultState,\n      className,\n      ...rest\n    },\n    ref,\n  ) {\n    const frameRef = useRef<HTMLDivElement | null>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const dragRef = useRef<{ pointerId: number; x: number; y: number } | null>(\n      null,\n    );\n    const [frame, setFrame] = useState<Size>({ width: 0, height: 0 });\n    const [natural, setNatural] = useState<(Size & { src: string }) | null>(\n      null,\n    );\n    const [framing, setFraming] = useState(() => seed(defaultState));\n    const [shown, setShown] = useState({ src, aspect });\n\n    // A new source starts again from the saved selection; a new shape starts\n    // centred and keeps the turn. Adjusting while rendering means no commit\n    // pairs the previous selection with the new picture or frame.\n    if (shown.src !== src || shown.aspect !== aspect) {\n      setShown({ src, aspect });\n      setFraming((prev) =>\n        shown.src !== src\n          ? seed(defaultState)\n          : { ...CENTRED, rotation: prev.rotation },\n      );\n    }\n\n    /** Take the picture's own pixels. Repeated load events for it change nothing. */\n    const adopt = useCallback(\n      (img: HTMLImageElement) => {\n        const { naturalWidth: width, naturalHeight: height } = img;\n        if (!width || !height) return;\n        setNatural((prev) =>\n          prev?.src === src && prev.width === width && prev.height === height\n            ? prev\n            : { src, width, height },\n        );\n      },\n      [src],\n    );\n\n    // A cached or server-rendered image can already be decoded before React\n    // attaches onLoad, and then that event never fires.\n    useEffect(() => {\n      const img = imageRef.current;\n      if (img?.complete) adopt(img);\n    }, [adopt]);\n\n    useLayoutEffect(() => {\n      const node = frameRef.current;\n      if (!node) return;\n      const measure = () => {\n        const width = node.clientWidth;\n        const height = node.clientHeight;\n        setFrame((prev) =>\n          prev.width === width && prev.height === height\n            ? prev\n            : { width, height },\n        );\n      };\n      measure();\n      const observer = new ResizeObserver(measure);\n      observer.observe(node);\n      return () => observer.disconnect();\n    }, [aspect]);\n\n    // Nothing is measured or reported until this source has loaded into a sized frame.\n    const picture =\n      natural?.src === src && frame.width > 0 && frame.height > 0\n        ? natural\n        : null;\n\n    const clamp = useCallback(\n      (next: Framing): Framing => {\n        const zoom = Math.min(\n          Math.max(MIN_ZOOM, maxZoom),\n          Math.max(MIN_ZOOM, next.zoom),\n        );\n        let { x, y } = next;\n        if (picture) {\n          // The frame's half-width and half-height, as shares of the picture.\n          const view = project(picture, frame, next.rotation, zoom);\n          const halfX = Math.min(0.5, frame.width / view.scale / view.width / 2);\n          const halfY = Math.min(0.5, frame.height / view.scale / view.height / 2);\n          x = Math.min(1 - halfX, Math.max(halfX, x));\n          y = Math.min(1 - halfY, Math.max(halfY, y));\n        }\n        if (zoom === next.zoom && x === next.x && y === next.y) return next;\n        return { ...next, zoom, x, y };\n      },\n      [frame, maxZoom, picture],\n    );\n\n    // Keep the rendered transform bounded when the frame or zoom limit changes too.\n    const bounded = useMemo(() => clamp(framing), [clamp, framing]);\n    useEffect(() => {\n      setFraming(bounded);\n    }, [bounded]);\n\n    const view = useMemo(\n      () =>\n        picture\n          ? project(picture, frame, bounded.rotation, bounded.zoom)\n          : null,\n      [picture, frame, bounded.rotation, bounded.zoom],\n    );\n    const scale = view?.scale ?? 0;\n    const offsetX = view ? (0.5 - bounded.x) * view.width * scale : 0;\n    const offsetY = view ? (0.5 - bounded.y) * view.height * scale : 0;\n    const maxOffsetX = view\n      ? Math.max(0, (view.width * scale - frame.width) / 2)\n      : 0;\n    const maxOffsetY = view\n      ? Math.max(0, (view.height * scale - frame.height) / 2)\n      : 0;\n    const hint = `Drag the picture to reposition it. Nothing is written until you save — ${\n      maxOffsetX === 0 && maxOffsetY === 0\n        ? \"at this zoom the whole picture is in frame.\"\n        : \"the veiled edges are what gets trimmed.\"\n    }`;\n\n    // A passive effect, so a parent that re-renders on every report never\n    // delays the frame that paints a drag.\n    useEffect(() => {\n      if (!view) return;\n      const width = Math.min(view.width, Math.round(frame.width / view.scale));\n      const height = Math.min(\n        view.height,\n        Math.round(frame.height / view.scale),\n      );\n      const [cx, cy] = turnPoint(bounded.x, bounded.y, 360 - bounded.rotation);\n      onChange?.(\n        {\n          x: Math.max(\n            0,\n            Math.min(\n              view.width - width,\n              Math.round(\n                bounded.x * view.width - frame.width / view.scale / 2,\n              ),\n            ),\n          ),\n          y: Math.max(\n            0,\n            Math.min(\n              view.height - height,\n              Math.round(\n                bounded.y * view.height - frame.height / view.scale / 2,\n              ),\n            ),\n          ),\n          width,\n          height,\n        },\n        {\n          offsetX,\n          offsetY,\n          zoom: bounded.zoom,\n          rotation: bounded.rotation,\n          cx,\n          cy,\n        },\n      );\n      // onChange is intentionally not a dependency: callers pass inline handlers.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [view, bounded, frame, offsetX, offsetY]);\n\n    /** Move the picture by stage pixels; the frame centre travels the other way. */\n    const pan = (dx: number, dy: number) =>\n      setFraming((prev) => {\n        if (!picture) return prev;\n        const { width, height, scale: at } = project(\n          picture,\n          frame,\n          prev.rotation,\n          prev.zoom,\n        );\n        return clamp({\n          ...prev,\n          x: prev.x - dx / (width * at),\n          y: prev.y - dy / (height * at),\n        });\n      });\n\n    const turn = (by: number) =>\n      setFraming((prev) => ({\n        ...CENTRED,\n        rotation: (prev.rotation + by + 360) % 360,\n      }));\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (event.button !== 0) return;\n      dragRef.current = {\n        pointerId: event.pointerId,\n        x: event.clientX,\n        y: event.clientY,\n      };\n      event.currentTarget.setPointerCapture(event.pointerId);\n    };\n\n    const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n      const drag = dragRef.current;\n      if (!drag || drag.pointerId !== event.pointerId) return;\n      const dx = event.clientX - drag.x;\n      const dy = event.clientY - drag.y;\n      dragRef.current = { ...drag, x: event.clientX, y: event.clientY };\n      pan(dx, dy);\n    };\n\n    const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (dragRef.current?.pointerId !== event.pointerId) return;\n      dragRef.current = null;\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    };\n\n    return (\n      <Stack\n        ref={ref}\n        className={[\"ds-cropper\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        <div\n          role=\"application\"\n          aria-label=\"Crop area — drag to reposition, arrow keys to nudge\"\n          tabIndex={0}\n          className=\"ds-cropper__stage\"\n          style={{ \"--cropper-aspect\": String(aspect) } as CSSProperties}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endDrag}\n          onPointerCancel={endDrag}\n          onKeyDown={(event) => {\n            const step = event.shiftKey ? 24 : 8;\n            const moves: Record<string, [number, number]> = {\n              ArrowLeft: [-step, 0],\n              ArrowRight: [step, 0],\n              ArrowUp: [0, -step],\n              ArrowDown: [0, step],\n            };\n            const move = moves[event.key];\n            if (!move) return;\n            event.preventDefault();\n            pan(move[0], move[1]);\n          }}\n        >\n          <img\n            ref={imageRef}\n            src={src}\n            alt={alt}\n            draggable={false}\n            className=\"ds-cropper__image\"\n            onLoad={(event) => adopt(event.currentTarget)}\n            style={{\n              inlineSize: picture ? picture.width * scale : undefined,\n              blockSize: picture ? picture.height * scale : undefined,\n              transform: `translate(calc(-50% + ${offsetX}px), calc(-50% + ${offsetY}px)) rotate(${bounded.rotation}deg)`,\n            }}\n          />\n          {/* The window: everything outside it is veiled, not hidden. */}\n          <div className=\"ds-cropper__frame\" ref={frameRef} aria-hidden=\"true\">\n            <div className=\"ds-cropper__guides\" />\n          </div>\n        </div>\n\n        <Field label=\"Zoom\" hint={hint}>\n          {(props) => (\n            <Stack direction=\"horizontal\" gap=\"md\" align=\"center\" wrap>\n              <Stack style={{ flex: \"1 1 50%\", minInlineSize: 0 }}>\n                <Slider\n                  {...props}\n                  min={MIN_ZOOM}\n                  max={Math.max(MIN_ZOOM, maxZoom)}\n                  step={0.01}\n                  value={bounded.zoom}\n                  suffix=\"×\"\n                  onValueChange={(zoom) =>\n                    setFraming((prev) => clamp({ ...prev, zoom }))\n                  }\n                />\n              </Stack>\n              <ButtonGroup aria-label=\"Crop actions\">\n                {rotatable && (\n                  <>\n                    <Button\n                      size=\"sm\"\n                      iconStart=\"rotate-ccw\"\n                      aria-label=\"Rotate left\"\n                      onClick={() => turn(-90)}\n                    />\n                    <Button\n                      size=\"sm\"\n                      iconStart=\"rotate-cw\"\n                      aria-label=\"Rotate right\"\n                      onClick={() => turn(90)}\n                    />\n                  </>\n                )}\n                <Button size=\"sm\" onClick={() => setFraming(CENTRED)}>\n                  Reset\n                </Button>\n              </ButtonGroup>\n            </Stack>\n          )}\n        </Field>\n      </Stack>\n    );\n  },\n);\n\nexport interface CropToBlobOptions {\n  /** Width of the output in pixels; the height follows the crop's aspect. */\n  outputWidth?: number;\n  /** Quarter turns applied before cropping — pass `state.rotation`. */\n  rotation?: number;\n  type?: \"image/png\" | \"image/jpeg\" | \"image/webp\";\n  quality?: number;\n}\n\n/**\n * Renders a `CropRect` to an image blob in the browser. Same-origin or\n * CORS-enabled sources only — a tainted canvas cannot be exported.\n */\nexport async function cropToBlob(\n  src: string,\n  crop: CropRect,\n  {\n    outputWidth,\n    rotation = 0,\n    type = \"image/png\",\n    quality = 0.92,\n  }: CropToBlobOptions = {},\n): Promise<Blob> {\n  const image = new Image();\n  image.crossOrigin = \"anonymous\";\n  image.src = src;\n  await image.decode();\n\n  // The crop is expressed against the turned picture, so turn it first.\n  const quarter = rotation % 180 !== 0;\n  const turned = document.createElement(\"canvas\");\n  turned.width = quarter ? image.naturalHeight : image.naturalWidth;\n  turned.height = quarter ? image.naturalWidth : image.naturalHeight;\n  const turnedContext = turned.getContext(\"2d\");\n  if (!turnedContext) throw new Error(\"Canvas 2D context unavailable\");\n  turnedContext.translate(turned.width / 2, turned.height / 2);\n  turnedContext.rotate((rotation * Math.PI) / 180);\n  turnedContext.drawImage(\n    image,\n    -image.naturalWidth / 2,\n    -image.naturalHeight / 2,\n  );\n\n  const width = outputWidth ?? crop.width;\n  const height = Math.round((crop.height / crop.width) * width);\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = width;\n  canvas.height = height;\n  const context = canvas.getContext(\"2d\");\n  if (!context) throw new Error(\"Canvas 2D context unavailable\");\n  context.drawImage(\n    turned,\n    crop.x,\n    crop.y,\n    crop.width,\n    crop.height,\n    0,\n    0,\n    width,\n    height,\n  );\n\n  return new Promise((resolve, reject) => {\n    canvas.toBlob(\n      (blob) =>\n        blob ? resolve(blob) : reject(new Error(\"Could not encode the crop\")),\n      type,\n      quality,\n    );\n  });\n}\n"],"mappings":"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"}

package/dist/components/ImageCropper/index.d.cts

@@ -8,16 +8,31 @@ export interface CropRect {
     height: number;
 }
 export interface CropState {
-    /** Pan, in stage pixels, from the centre. */
+    /** Pan, in stage pixels, from the centre. Follows the stage size, so save `cx`/`cy`. */
     offsetX: number;
     offsetY: number;
     /** 1 is "cover the crop window exactly". */
     zoom: number;
     /** Quarter turns applied to the picture, clockwise: 0, 90, 180 or 270. */
     rotation: number;
+    /** Crop centre as fractions of the unrotated source image. */
+    cx: number;
+    cy: number;
+}
+/** A saved selection. Every emitted `CropState` is one, so it can be passed straight back. */
+export interface ImageCropperDefaultState {
+    /** Zoom at initialization; clamped to the supported range. */
+    zoom: number;
+    /** Crop centre as fractions of the unrotated source image. */
+    cx: number;
+    cy: number;
+    /** Clockwise quarter turns, snapped to 0, 90, 180 or 270. Defaults to 0. */
+    rotation?: number;
 }
 export interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     src: string;
+    /** Uncontrolled initial selection. Applied again whenever `src` changes. */
+    defaultState?: ImageCropperDefaultState;
     /** Describes the picture for people who cannot see the stage. */
     alt?: string;
     /** Required output shape, width / height. Must be positive and finite. */

package/dist/components/ImageCropper/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAMf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,QAAQ;IACvB,kEAAkE;IAClE,CAAC,EAAE,MAAM,CAAC;IACV,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvD;AAKD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,8GA6RxB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAC9B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,EACd,EACE,WAAW,EACX,QAAY,EACZ,IAAkB,EAClB,OAAc,GACf,GAAE,iBAAsB,GACxB,OAAO,CAAC,IAAI,CAAC,CAgDf"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAMf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,QAAQ;IACvB,kEAAkE;IAClE,CAAC,EAAE,MAAM,CAAC;IACV,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,wFAAwF;IACxF,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,8FAA8F;AAC9F,MAAM,WAAW,wBAAwB;IACvC,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvD;AAoDD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,8GA+TxB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAC9B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,EACd,EACE,WAAW,EACX,QAAY,EACZ,IAAkB,EAClB,OAAc,GACf,GAAE,iBAAsB,GACxB,OAAO,CAAC,IAAI,CAAC,CAgDf"}

package/dist/components/ImageCropper/index.d.ts

@@ -8,16 +8,31 @@ export interface CropRect {
     height: number;
 }
 export interface CropState {
-    /** Pan, in stage pixels, from the centre. */
+    /** Pan, in stage pixels, from the centre. Follows the stage size, so save `cx`/`cy`. */
     offsetX: number;
     offsetY: number;
     /** 1 is "cover the crop window exactly". */
     zoom: number;
     /** Quarter turns applied to the picture, clockwise: 0, 90, 180 or 270. */
     rotation: number;
+    /** Crop centre as fractions of the unrotated source image. */
+    cx: number;
+    cy: number;
+}
+/** A saved selection. Every emitted `CropState` is one, so it can be passed straight back. */
+export interface ImageCropperDefaultState {
+    /** Zoom at initialization; clamped to the supported range. */
+    zoom: number;
+    /** Crop centre as fractions of the unrotated source image. */
+    cx: number;
+    cy: number;
+    /** Clockwise quarter turns, snapped to 0, 90, 180 or 270. Defaults to 0. */
+    rotation?: number;
 }
 export interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     src: string;
+    /** Uncontrolled initial selection. Applied again whenever `src` changes. */
+    defaultState?: ImageCropperDefaultState;
     /** Describes the picture for people who cannot see the stage. */
     alt?: string;
     /** Required output shape, width / height. Must be positive and finite. */

package/dist/components/ImageCropper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAMf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,QAAQ;IACvB,kEAAkE;IAClE,CAAC,EAAE,MAAM,CAAC;IACV,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvD;AAKD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,8GA6RxB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAC9B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,EACd,EACE,WAAW,EACX,QAAY,EACZ,IAAkB,EAClB,OAAc,GACf,GAAE,iBAAsB,GACxB,OAAO,CAAC,IAAI,CAAC,CAgDf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAMf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,QAAQ;IACvB,kEAAkE;IAClE,CAAC,EAAE,MAAM,CAAC;IACV,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,wFAAwF;IACxF,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,8FAA8F;AAC9F,MAAM,WAAW,wBAAwB;IACvC,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvD;AAoDD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,8GA+TxB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAC9B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,EACd,EACE,WAAW,EACX,QAAY,EACZ,IAAkB,EAClB,OAAc,GACf,GAAE,iBAAsB,GACxB,OAAO,CAAC,IAAI,CAAC,CAgDf"}

package/dist/components/ImageCropper/index.js

@@ -7,129 +7,165 @@ import { forwardRef as a, useCallback as o, useEffect as s, useLayoutEffect as c
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/ImageCropper/index.tsx
 var h = 1, g = {
-	offsetX: 0,
-	offsetY: 0,
 	zoom: 1,
-	rotation: 0
-}, _ = a(function({ src: a, alt: _ = "", aspect: v, maxZoom: y = 3, rotatable: b = !0, onChange: x, className: S, ...C }, w) {
-	let T = u(null), [E, D] = d({
-		width: 0,
-		height: 0
-	}), [O, k] = d({
+	rotation: 0,
+	x: .5,
+	y: .5
+};
+function _(e, t, n) {
+	let r = [e, t];
+	for (let e = Math.round(n / 90) % 4; e > 0; e--) r = [1 - r[1], r[0]];
+	return r;
+}
+function v(e, t, n, r) {
+	let i = n % 180 != 0, a = i ? e.height : e.width, o = i ? e.width : e.height;
+	return {
+		width: a,
+		height: o,
+		scale: Math.max(t.width / a, t.height / o) * r
+	};
+}
+function y(e) {
+	let t = (e, t) => e != null && Number.isFinite(e) ? e : t, n = (e) => Math.min(1, Math.max(0, t(e, .5))), r = (Math.round(t(e?.rotation, 0) / 90) * 90 % 360 + 360) % 360, [i, a] = _(n(e?.cx), n(e?.cy), r);
+	return {
+		zoom: t(e?.zoom, 1),
+		rotation: r,
+		x: i,
+		y: a
+	};
+}
+var b = a(function({ src: a, alt: b = "", aspect: x, maxZoom: S = 3, rotatable: C = !0, onChange: w, defaultState: T, className: E, ...D }, O) {
+	let k = u(null), A = u(null), j = u(null), [M, N] = d({
 		width: 0,
 		height: 0
-	}), [A, j] = d(g), M = u(null), N = u(null);
-	s(() => {
-		j((e) => ({
-			...g,
-			rotation: e.rotation
-		}));
-	}, [v]);
-	let P = (e) => j((t) => ({
+	}), [P, ee] = d(null), [F, I] = d(() => y(T)), [L, R] = d({
+		src: a,
+		aspect: x
+	});
+	(L.src !== a || L.aspect !== x) && (R({
+		src: a,
+		aspect: x
+	}), I((e) => L.src === a ? {
 		...g,
-		rotation: (t.rotation + e + 360) % 360
-	})), F = o((e) => {
-		e.naturalWidth && (k({
-			width: e.naturalWidth,
-			height: e.naturalHeight
-		}), j(g));
-	}, []);
+		rotation: e.rotation
+	} : y(T)));
+	let z = o((e) => {
+		let { naturalWidth: t, naturalHeight: n } = e;
+		t && n && ee((e) => e?.src === a && e.width === t && e.height === n ? e : {
+			src: a,
+			width: t,
+			height: n
+		});
+	}, [a]);
 	s(() => {
-		let e = N.current;
-		e?.complete && F(e);
-	}, [F, a]);
-	let I = A.rotation % 180 != 0, L = {
-		width: I ? O.height : O.width,
-		height: I ? O.width : O.height
-	}, R = L.width && E.width ? Math.max(E.width / L.width, E.height / L.height) : 0;
-	c(() => {
-		let e = T.current;
+		let e = A.current;
+		e?.complete && z(e);
+	}, [z]), c(() => {
+		let e = k.current;
 		if (!e) return;
-		let t = () => D({
-			width: e.clientWidth,
-			height: e.clientHeight
-		});
+		let t = () => {
+			let t = e.clientWidth, n = e.clientHeight;
+			N((e) => e.width === t && e.height === n ? e : {
+				width: t,
+				height: n
+			});
+		};
 		t();
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, [v]);
-	let z = o((e) => {
-		let t = Math.min(Math.max(h, y), Math.max(h, e.zoom)), n = R * t, r = n ? Math.max(0, (L.width * n - E.width) / 2) : 0, i = n ? Math.max(0, (L.height * n - E.height) / 2) : 0, a = Math.min(r, Math.max(-r, e.offsetX)), o = Math.min(i, Math.max(-i, e.offsetY));
-		return t === e.zoom && a === e.offsetX && o === e.offsetY ? e : {
+	}, [x]);
+	let B = P?.src === a && M.width > 0 && M.height > 0 ? P : null, V = o((e) => {
+		let t = Math.min(Math.max(h, S), Math.max(h, e.zoom)), { x: n, y: r } = e;
+		if (B) {
+			let i = v(B, M, e.rotation, t), a = Math.min(.5, M.width / i.scale / i.width / 2), o = Math.min(.5, M.height / i.scale / i.height / 2);
+			n = Math.min(1 - a, Math.max(a, n)), r = Math.min(1 - o, Math.max(o, r));
+		}
+		return t === e.zoom && n === e.x && r === e.y ? e : {
 			...e,
 			zoom: t,
-			offsetX: a,
-			offsetY: o
+			x: n,
+			y: r
 		};
 	}, [
-		R,
-		y,
-		L.height,
-		L.width,
-		E.height,
-		E.width
-	]), B = l(() => z(A), [z, A]);
+		M,
+		S,
+		B
+	]), H = l(() => V(F), [V, F]);
 	s(() => {
-		j(B);
-	}, [B]);
-	let V = R * B.zoom, H = V ? Math.max(0, (L.width * V - E.width) / 2) : 0, U = V ? Math.max(0, (L.height * V - E.height) / 2) : 0, W = `Drag the picture to reposition it. Nothing is written until you save — ${H === 0 && U === 0 ? "at this zoom the whole picture is in frame." : "the veiled edges are what gets trimmed."}`;
+		I(H);
+	}, [H]);
+	let U = l(() => B ? v(B, M, H.rotation, H.zoom) : null, [
+		B,
+		M,
+		H.rotation,
+		H.zoom
+	]), W = U?.scale ?? 0, G = U ? (.5 - H.x) * U.width * W : 0, K = U ? (.5 - H.y) * U.height * W : 0, q = U ? Math.max(0, (U.width * W - M.width) / 2) : 0, J = U ? Math.max(0, (U.height * W - M.height) / 2) : 0, Y = `Drag the picture to reposition it. Nothing is written until you save — ${q === 0 && J === 0 ? "at this zoom the whole picture is in frame." : "the veiled edges are what gets trimmed."}`;
 	s(() => {
-		if (!V || !E.width) return;
-		let e = Math.min(L.width, Math.round(E.width / V)), t = Math.min(L.height, Math.round(E.height / V));
-		x?.({
-			x: Math.max(0, Math.min(L.width - e, Math.round(L.width / 2 - B.offsetX / V - E.width / V / 2))),
-			y: Math.max(0, Math.min(L.height - t, Math.round(L.height / 2 - B.offsetY / V - E.height / V / 2))),
+		if (!U) return;
+		let e = Math.min(U.width, Math.round(M.width / U.scale)), t = Math.min(U.height, Math.round(M.height / U.scale)), [n, r] = _(H.x, H.y, 360 - H.rotation);
+		w?.({
+			x: Math.max(0, Math.min(U.width - e, Math.round(H.x * U.width - M.width / U.scale / 2))),
+			y: Math.max(0, Math.min(U.height - t, Math.round(H.y * U.height - M.height / U.scale / 2))),
 			width: e,
 			height: t
-		}, B);
+		}, {
+			offsetX: G,
+			offsetY: K,
+			zoom: H.zoom,
+			rotation: H.rotation,
+			cx: n,
+			cy: r
+		});
 	}, [
-		V,
-		E.width,
-		E.height,
-		L.width,
-		L.height,
-		B
+		U,
+		H,
+		M,
+		G,
+		K
 	]);
-	let G = (e) => {
-		e.button === 0 && (M.current = {
+	let X = (e, t) => I((n) => {
+		if (!B) return n;
+		let { width: r, height: i, scale: a } = v(B, M, n.rotation, n.zoom);
+		return V({
+			...n,
+			x: n.x - e / (r * a),
+			y: n.y - t / (i * a)
+		});
+	}), Z = (e) => I((t) => ({
+		...g,
+		rotation: (t.rotation + e + 360) % 360
+	})), Q = (e) => {
+		e.button === 0 && (j.current = {
 			pointerId: e.pointerId,
 			x: e.clientX,
 			y: e.clientY
 		}, e.currentTarget.setPointerCapture(e.pointerId));
-	}, K = (e) => {
-		let t = M.current;
+	}, te = (e) => {
+		let t = j.current;
 		if (!t || t.pointerId !== e.pointerId) return;
 		let n = e.clientX - t.x, r = e.clientY - t.y;
-		M.current = {
+		j.current = {
 			...t,
 			x: e.clientX,
 			y: e.clientY
-		}, j((e) => z({
-			...e,
-			offsetX: e.offsetX + n,
-			offsetY: e.offsetY + r
-		}));
-	}, q = (e) => {
-		M.current?.pointerId === e.pointerId && (M.current = null, e.currentTarget.releasePointerCapture?.(e.pointerId));
-	}, J = (e, t) => j((n) => z({
-		...n,
-		offsetX: n.offsetX + e,
-		offsetY: n.offsetY + t
-	}));
+		}, X(n, r);
+	}, $ = (e) => {
+		j.current?.pointerId === e.pointerId && (j.current = null, e.currentTarget.releasePointerCapture?.(e.pointerId));
+	};
 	return /* @__PURE__ */ m(r, {
-		ref: w,
-		className: ["ds-cropper", S].filter(Boolean).join(" "),
-		...C,
+		ref: O,
+		className: ["ds-cropper", E].filter(Boolean).join(" "),
+		...D,
 		children: [/* @__PURE__ */ m("div", {
 			role: "application",
 			"aria-label": "Crop area — drag to reposition, arrow keys to nudge",
 			tabIndex: 0,
 			className: "ds-cropper__stage",
-			style: { "--cropper-aspect": String(v) },
-			onPointerDown: G,
-			onPointerMove: K,
-			onPointerUp: q,
-			onPointerCancel: q,
+			style: { "--cropper-aspect": String(x) },
+			onPointerDown: Q,
+			onPointerMove: te,
+			onPointerUp: $,
+			onPointerCancel: $,
 			onKeyDown: (e) => {
 				let t = e.shiftKey ? 24 : 8, n = {
 					ArrowLeft: [-t, 0],
@@ -137,29 +173,29 @@ var h = 1, g = {
 					ArrowUp: [0, -t],
 					ArrowDown: [0, t]
 				}[e.key];
-				n && (e.preventDefault(), J(n[0], n[1]));
+				n && (e.preventDefault(), X(n[0], n[1]));
 			},
 			children: [/* @__PURE__ */ p("img", {
-				ref: N,
+				ref: A,
 				src: a,
-				alt: _,
+				alt: b,
 				draggable: !1,
 				className: "ds-cropper__image",
-				onLoad: (e) => F(e.currentTarget),
+				onLoad: (e) => z(e.currentTarget),
 				style: {
-					inlineSize: O.width * V || void 0,
-					blockSize: O.height * V || void 0,
-					transform: `translate(calc(-50% + ${B.offsetX}px), calc(-50% + ${B.offsetY}px)) rotate(${B.rotation}deg)`
+					inlineSize: B ? B.width * W : void 0,
+					blockSize: B ? B.height * W : void 0,
+					transform: `translate(calc(-50% + ${G}px), calc(-50% + ${K}px)) rotate(${H.rotation}deg)`
 				}
 			}), /* @__PURE__ */ p("div", {
 				className: "ds-cropper__frame",
-				ref: T,
+				ref: k,
 				"aria-hidden": "true",
 				children: /* @__PURE__ */ p("div", { className: "ds-cropper__guides" })
 			})]
 		}), /* @__PURE__ */ p(n, {
 			label: "Zoom",
-			hint: W,
+			hint: Y,
 			children: (n) => /* @__PURE__ */ m(r, {
 				direction: "horizontal",
 				gap: "md",
@@ -173,30 +209,30 @@ var h = 1, g = {
 					children: /* @__PURE__ */ p(i, {
 						...n,
 						min: h,
-						max: Math.max(h, y),
+						max: Math.max(h, S),
 						step: .01,
-						value: B.zoom,
+						value: H.zoom,
 						suffix: "×",
-						onValueChange: (e) => j((t) => z({
+						onValueChange: (e) => I((t) => V({
 							...t,
 							zoom: e
 						}))
 					})
 				}), /* @__PURE__ */ m(t, {
 					"aria-label": "Crop actions",
-					children: [b && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(e, {
+					children: [C && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(e, {
 						size: "sm",
 						iconStart: "rotate-ccw",
 						"aria-label": "Rotate left",
-						onClick: () => P(-90)
+						onClick: () => Z(-90)
 					}), /* @__PURE__ */ p(e, {
 						size: "sm",
 						iconStart: "rotate-cw",
 						"aria-label": "Rotate right",
-						onClick: () => P(90)
+						onClick: () => Z(90)
 					})] }), /* @__PURE__ */ p(e, {
 						size: "sm",
-						onClick: () => j(g),
+						onClick: () => I(g),
 						children: "Reset"
 					})]
 				})]
@@ -204,7 +240,7 @@ var h = 1, g = {
 		})]
 	});
 });
-async function v(e, t, { outputWidth: n, rotation: r = 0, type: i = "image/png", quality: a = .92 } = {}) {
+async function x(e, t, { outputWidth: n, rotation: r = 0, type: i = "image/png", quality: a = .92 } = {}) {
 	let o = new Image();
 	o.crossOrigin = "anonymous", o.src = e, await o.decode();
 	let s = r % 180 != 0, c = document.createElement("canvas");
@@ -221,6 +257,6 @@ async function v(e, t, { outputWidth: n, rotation: r = 0, type: i = "image/png",
 	});
 }
 //#endregion
-export { _ as ImageCropper, v as cropToBlob };
+export { b as ImageCropper, x as cropToBlob };
 
 //# sourceMappingURL=index.js.map