@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,15 @@
+import { type SVGProps } from "react";
+import { type IconName } from "./icons.cjs";
+export type IconSize = 16 | 20 | 24;
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /** Glyph name from the curated set in `icons.ts`. */
+    name: IconName;
+    /** 16 inside controls, 20 standalone, 24 for empty states. No other sizes. */
+    size?: IconSize;
+}
+/**
+ * A glyph that clarifies an action or a status. Inherits `currentColor`, so it
+ * takes its colour from the control it sits in — it never carries its own.
+ */
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IACrE,qDAAqD;IACrD,IAAI,EAAE,QAAQ,CAAC;IACf,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,qGAiBf,CAAC"}

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

@@ -0,0 +1,15 @@
+import { type SVGProps } from "react";
+import { type IconName } from "./icons.js";
+export type IconSize = 16 | 20 | 24;
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /** Glyph name from the curated set in `icons.ts`. */
+    name: IconName;
+    /** 16 inside controls, 20 standalone, 24 for empty states. No other sizes. */
+    size?: IconSize;
+}
+/**
+ * A glyph that clarifies an action or a status. Inherits `currentColor`, so it
+ * takes its colour from the control it sits in — it never carries its own.
+ */
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IACrE,qDAAqD;IACrD,IAAI,EAAE,QAAQ,CAAC;IACf,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,qGAiBf,CAAC"}

package/dist/components/Icon/index.js

@@ -0,0 +1 @@
+export { t as Icon } from "../../chunks/Icon-CGY1FNXT.js";

package/dist/components/Icon/style.css

@@ -0,0 +1,10 @@
+@layer components {
+  .ds-icon {
+    flex: none;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: var(--icon-stroke);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}

package/dist/components/ImageCropper/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs"),t=require("../ButtonGroup/index.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=[{label:`1:1`,value:1},{label:`4:5`,value:4/5},{label:`4:3`,value:4/3},{label:`16:9`,value:16/9}],a=1,o={offsetX:0,offsetY:0,zoom:1,rotation:0},s=(0,n.forwardRef)(function({src:i,alt:s=``,aspect:c=1,ratios:l,onAspectChange:u,maxZoom:d=3,rotatable:f=!0,onChange:p,className:m,...h},g){let _=(0,n.useRef)(null),[v,y]=(0,n.useState)({width:0,height:0}),[b,x]=(0,n.useState)({width:0,height:0}),[S,C]=(0,n.useState)(o),[w,T]=(0,n.useState)(c),E=(0,n.useRef)(null),D=(0,n.useRef)(null);(0,n.useEffect)(()=>{T(c),C(e=>({...o,rotation:e.rotation}))},[c]);let O=e=>{T(e),C(e=>({...o,rotation:e.rotation})),u?.(e)},k=e=>C(t=>({...o,rotation:(t.rotation+e+360)%360})),A=(0,n.useCallback)(e=>{e.naturalWidth&&(x({width:e.naturalWidth,height:e.naturalHeight}),C(o))},[]);(0,n.useEffect)(()=>{let e=D.current;e?.complete&&A(e)},[A,i]);let j=S.rotation%180!=0,M={width:j?b.height:b.width,height:j?b.width:b.height},N=M.width&&v.width?Math.max(v.width/M.width,v.height/M.height):0,P=N*S.zoom,F=P?Math.max(0,(M.width*P-v.width)/2):0,I=P?Math.max(0,(M.height*P-v.height)/2):0;(0,n.useLayoutEffect)(()=>{let e=_.current;if(!e)return;let t=()=>y({width:e.clientWidth,height:e.clientHeight});t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[]);let L=(0,n.useCallback)(e=>{let t=N*e.zoom,n=t?Math.max(0,(M.width*t-v.width)/2):0,r=t?Math.max(0,(M.height*t-v.height)/2):0;return{rotation:e.rotation,zoom:Math.min(d,Math.max(a,e.zoom)),offsetX:Math.min(n,Math.max(-n,e.offsetX)),offsetY:Math.min(r,Math.max(-r,e.offsetY))}},[N,d,M.height,M.width,v.height,v.width]);(0,n.useEffect)(()=>{if(!P||!v.width)return;let e=v.width/P,t=v.height/P;p?.({x:Math.round(M.width/2-S.offsetX/P-e/2),y:Math.round(M.height/2-S.offsetY/P-t/2),width:Math.round(e),height:Math.round(t)},S)},[P,v.width,v.height,M.width,M.height,S]);let R=e=>{e.button===0&&(E.current={pointerId:e.pointerId,x:e.clientX,y:e.clientY},e.currentTarget.setPointerCapture(e.pointerId))},z=e=>{let t=E.current;if(!t||t.pointerId!==e.pointerId)return;let n=e.clientX-t.x,r=e.clientY-t.y;E.current={...t,x:e.clientX,y:e.clientY},C(e=>L({...e,offsetX:e.offsetX+n,offsetY:e.offsetY+r}))},B=e=>{E.current?.pointerId===e.pointerId&&(E.current=null,e.currentTarget.releasePointerCapture?.(e.pointerId))},V=(e,t)=>C(n=>L({...n,offsetX:n.offsetX+e,offsetY:n.offsetY+t}));return(0,r.jsxs)(`div`,{ref:g,className:[`ds-cropper`,m].filter(Boolean).join(` `),...h,children:[l&&l.length>1&&(0,r.jsx)(t.ButtonGroup,{"aria-label":`Crop ratio`,className:`ds-cropper__ratios`,children:l.map(t=>(0,r.jsx)(e.Button,{size:`sm`,variant:t.value===w?`active`:`neutral`,"aria-pressed":t.value===w,onClick:()=>O(t.value),children:t.label},t.label))}),(0,r.jsxs)(`div`,{role:`application`,"aria-label":`Crop area — drag to reposition, arrow keys to nudge`,tabIndex:0,className:`ds-cropper__stage`,style:{"--cropper-aspect":String(w)},onPointerDown:R,onPointerMove:z,onPointerUp:B,onPointerCancel:B,onKeyDown:e=>{let t=e.shiftKey?24:8,n={ArrowLeft:[-t,0],ArrowRight:[t,0],ArrowUp:[0,-t],ArrowDown:[0,t]}[e.key];n&&(e.preventDefault(),V(n[0],n[1]))},children:[(0,r.jsx)(`img`,{ref:D,src:i,alt:s,draggable:!1,className:`ds-cropper__image`,onLoad:e=>A(e.currentTarget),style:{inlineSize:b.width*P||void 0,blockSize:b.height*P||void 0,transform:`translate(calc(-50% + ${S.offsetX}px), calc(-50% + ${S.offsetY}px)) rotate(${S.rotation}deg)`}}),(0,r.jsx)(`div`,{className:`ds-cropper__frame`,ref:_,"aria-hidden":`true`,children:(0,r.jsx)(`div`,{className:`ds-cropper__guides`})})]}),(0,r.jsxs)(`div`,{className:`ds-cropper__controls`,children:[(0,r.jsxs)(`label`,{className:`ds-cropper__zoom`,children:[(0,r.jsx)(`span`,{className:`ds-cropper__zoom-label`,children:`Zoom`}),(0,r.jsx)(`input`,{type:`range`,min:a,max:d,step:.01,value:S.zoom,className:`ds-cropper__slider`,onChange:e=>C(t=>L({...t,zoom:Number(e.target.value)}))}),(0,r.jsxs)(`span`,{className:`ds-cropper__value`,children:[S.zoom.toFixed(2),`×`]})]}),(0,r.jsxs)(t.ButtonGroup,{"aria-label":`Crop actions`,children:[f&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.Button,{size:`sm`,iconStart:`rotate-ccw`,"aria-label":`Rotate left`,onClick:()=>k(-90)}),(0,r.jsx)(e.Button,{size:`sm`,iconStart:`rotate-cw`,"aria-label":`Rotate right`,onClick:()=>k(90)})]}),(0,r.jsx)(e.Button,{size:`sm`,onClick:()=>C(o),children:`Reset`})]})]}),(0,r.jsxs)(`p`,{className:`ds-cropper__hint`,children:[`Drag the picture to reposition it. Nothing is written until you save —`,` `,F===0&&I===0?`at this zoom the whole picture is in frame.`:`the veiled edges are what gets trimmed.`]})]})});async function c(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`);c.width=s?o.naturalHeight:o.naturalWidth,c.height=s?o.naturalWidth:o.naturalHeight;let l=c.getContext(`2d`);if(!l)throw Error(`Canvas 2D context unavailable`);l.translate(c.width/2,c.height/2),l.rotate(r*Math.PI/180),l.drawImage(o,-o.naturalWidth/2,-o.naturalHeight/2);let u=n??t.width,d=Math.round(t.height/t.width*u),f=document.createElement(`canvas`);f.width=u,f.height=d;let p=f.getContext(`2d`);if(!p)throw Error(`Canvas 2D context unavailable`);return p.drawImage(c,t.x,t.y,t.width,t.height,0,0,u,d),new Promise((e,t)=>{f.toBlob(n=>n?e(n):t(Error(`Could not encode the crop`)),i,a)})}exports.ImageCropper=s,exports.cropRatios=i,exports.cropToBlob=c;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useRef","useState","useCallback","ButtonGroup","Button","_Fragment","require_components_Button_index","require_components_ButtonGroup_index","react","react_jsx_runtime","cropRatios","MIN_ZOOM","REST","ImageCropper","rest","frameRef","frame","setFrame","natural","setNatural","state","setState","ratio","setRatio","aspect","dragRef","imageRef","prev","chooseRatio","next","onAspectChange","turn","by","adopt","img","src","quarter","view","baseScale","scale","maxOffsetX","maxOffsetY","node","measure","observer","clamp","nextScale","limitX","limitY","maxZoom","width","height","onChange","onPointerDown","event","onPointerMove","drag","dx","dy","endDrag","nudge","className","ratios","option","step","move","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  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 \"./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\n/** One offered output shape. `value` is width / height. */\nexport interface CropRatio {\n  label: string;\n  value: number;\n}\n\n/** The house set: square, portrait, landscape, wide. */\nexport const cropRatios: CropRatio[] = [\n  { label: \"1:1\", value: 1 },\n  { label: \"4:5\", value: 4 / 5 },\n  { label: \"4:3\", value: 4 / 3 },\n  { label: \"16:9\", value: 16 / 9 },\n];\n\nexport interface ImageCropperProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  src: string;\n  /** Describes the picture for people who cannot see the stage. */\n  alt?: string;\n  /** Output shape, width / height. 1 for an avatar, 16 / 9 for a hero. */\n  aspect?: number;\n  /**\n   * Offer the reader a choice of output shapes. Omit it — or pass one ratio —\n   * when the shape is fixed by the slot the picture is going into.\n   */\n  ratios?: CropRatio[];\n  /** Fires when the reader picks a different shape. */\n  onAspectChange?: (aspect: number) => void;\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 = 1,\n      ratios,\n      onAspectChange,\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 [ratio, setRatio] = useState(aspect);\n    const dragRef = useRef<{ pointerId: number; x: number; y: number } | null>(null);\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      setRatio(aspect);\n      setState((prev) => ({ ...REST, rotation: prev.rotation }));\n    }, [aspect]);\n\n    const chooseRatio = (next: number) => {\n      setRatio(next);\n      setState((prev) => ({ ...REST, rotation: prev.rotation }));\n      onAspectChange?.(next);\n    };\n\n    const turn = (by: number) =>\n      setState((prev) => ({ ...REST, rotation: (prev.rotation + by + 360) % 360 }));\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    const scale = baseScale * state.zoom;\n    const maxOffsetX = scale ? Math.max(0, (view.width * scale - frame.width) / 2) : 0;\n    const maxOffsetY = scale ? Math.max(0, (view.height * scale - frame.height) / 2) : 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    }, []);\n\n    const clamp = useCallback(\n      (next: CropState): CropState => {\n        const nextScale = baseScale * next.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        return {\n          rotation: next.rotation,\n          zoom: Math.min(maxZoom, Math.max(MIN_ZOOM, next.zoom)),\n          offsetX: Math.min(limitX, Math.max(-limitX, next.offsetX)),\n          offsetY: Math.min(limitY, Math.max(-limitY, next.offsetY)),\n        };\n      },\n      [baseScale, maxZoom, view.height, view.width, frame.height, frame.width],\n    );\n\n    useEffect(() => {\n      if (!scale || !frame.width) return;\n      const width = frame.width / scale;\n      const height = frame.height / scale;\n      onChange?.(\n        {\n          x: Math.round(view.width / 2 - state.offsetX / scale - width / 2),\n          y: Math.round(view.height / 2 - state.offsetY / scale - height / 2),\n          width: Math.round(width),\n          height: Math.round(height),\n        },\n        state,\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, state]);\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (event.button !== 0) return;\n      dragRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };\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) => clamp({ ...prev, offsetX: prev.offsetX + dx, offsetY: prev.offsetY + 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    const nudge = (dx: number, dy: number) =>\n      setState((prev) => clamp({ ...prev, offsetX: prev.offsetX + dx, offsetY: prev.offsetY + dy }));\n\n    return (\n      <div ref={ref} className={[\"ds-cropper\", className].filter(Boolean).join(\" \")} {...rest}>\n        {ratios && ratios.length > 1 && (\n          <ButtonGroup aria-label=\"Crop ratio\" className=\"ds-cropper__ratios\">\n            {ratios.map((option) => (\n              <Button\n                key={option.label}\n                size=\"sm\"\n                variant={option.value === ratio ? \"active\" : \"neutral\"}\n                aria-pressed={option.value === ratio}\n                onClick={() => chooseRatio(option.value)}\n              >\n                {option.label}\n              </Button>\n            ))}\n          </ButtonGroup>\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(ratio) } 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% + ${state.offsetX}px), calc(-50% + ${state.offsetY}px)) rotate(${state.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        <div className=\"ds-cropper__controls\">\n          <label className=\"ds-cropper__zoom\">\n            <span className=\"ds-cropper__zoom-label\">Zoom</span>\n            <input\n              type=\"range\"\n              min={MIN_ZOOM}\n              max={maxZoom}\n              step={0.01}\n              value={state.zoom}\n              className=\"ds-cropper__slider\"\n              onChange={(event) =>\n                setState((prev) => clamp({ ...prev, zoom: Number(event.target.value) }))\n              }\n            />\n            <span className=\"ds-cropper__value\">{state.zoom.toFixed(2)}×</span>\n          </label>\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        </div>\n\n        <p className=\"ds-cropper__hint\">\n          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        </p>\n      </div>\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  { outputWidth, rotation = 0, type = \"image/png\", quality = 0.92 }: 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(image, -image.naturalWidth / 2, -image.naturalHeight / 2);\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(turned, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height);\n\n  return new Promise((resolve, reject) => {\n    canvas.toBlob(\n      (blob) => (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

@@ -0,0 +1,66 @@
+import { type HTMLAttributes } from "react";
+export interface CropRect {
+    /** Left edge of the crop, in the (rotated) image's own pixels. */
+    x: number;
+    /** Top edge of the crop, in the (rotated) image's own pixels. */
+    y: number;
+    width: number;
+    height: number;
+}
+export interface CropState {
+    /** Pan, in stage pixels, from the centre. */
+    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;
+}
+/** One offered output shape. `value` is width / height. */
+export interface CropRatio {
+    label: string;
+    value: number;
+}
+/** The house set: square, portrait, landscape, wide. */
+export declare const cropRatios: CropRatio[];
+export interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    src: string;
+    /** Describes the picture for people who cannot see the stage. */
+    alt?: string;
+    /** Output shape, width / height. 1 for an avatar, 16 / 9 for a hero. */
+    aspect?: number;
+    /**
+     * Offer the reader a choice of output shapes. Omit it — or pass one ratio —
+     * when the shape is fixed by the slot the picture is going into.
+     */
+    ratios?: CropRatio[];
+    /** Fires when the reader picks a different shape. */
+    onAspectChange?: (aspect: number) => void;
+    /** Highest allowed zoom. Past 3 the result is mush on most uploads. */
+    maxZoom?: number;
+    /** Offer the quarter-turn controls. */
+    rotatable?: boolean;
+    /** Fires on every pan, zoom, turn and reset, with the crop in image pixels. */
+    onChange?: (crop: CropRect, state: CropState) => void;
+}
+/**
+ * Pan-and-zoom cropping over a fixed frame. The frame never moves — the
+ * picture does — and the parts that fall outside it stay visible under a
+ * veil, so the reader can see what they are trimming away.
+ * Drag with a pointer, or focus the stage and use the arrow keys.
+ */
+export declare const ImageCropper: import("react").ForwardRefExoticComponent<ImageCropperProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface CropToBlobOptions {
+    /** Width of the output in pixels; the height follows the crop's aspect. */
+    outputWidth?: number;
+    /** Quarter turns applied before cropping — pass `state.rotation`. */
+    rotation?: number;
+    type?: "image/png" | "image/jpeg" | "image/webp";
+    quality?: number;
+}
+/**
+ * Renders a `CropRect` to an image blob in the browser. Same-origin or
+ * CORS-enabled sources only — a tainted canvas cannot be exported.
+ */
+export declare function cropToBlob(src: string, crop: CropRect, { outputWidth, rotation, type, quality }?: CropToBlobOptions): Promise<Blob>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAGf,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,2DAA2D;AAC3D,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,eAAO,MAAM,UAAU,EAAE,SAAS,EAKjC,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,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,8GAwPxB,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,EAAE,WAAW,EAAE,QAAY,EAAE,IAAkB,EAAE,OAAc,EAAE,GAAE,iBAAsB,GACxF,OAAO,CAAC,IAAI,CAAC,CAiCf"}

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

@@ -0,0 +1,66 @@
+import { type HTMLAttributes } from "react";
+export interface CropRect {
+    /** Left edge of the crop, in the (rotated) image's own pixels. */
+    x: number;
+    /** Top edge of the crop, in the (rotated) image's own pixels. */
+    y: number;
+    width: number;
+    height: number;
+}
+export interface CropState {
+    /** Pan, in stage pixels, from the centre. */
+    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;
+}
+/** One offered output shape. `value` is width / height. */
+export interface CropRatio {
+    label: string;
+    value: number;
+}
+/** The house set: square, portrait, landscape, wide. */
+export declare const cropRatios: CropRatio[];
+export interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    src: string;
+    /** Describes the picture for people who cannot see the stage. */
+    alt?: string;
+    /** Output shape, width / height. 1 for an avatar, 16 / 9 for a hero. */
+    aspect?: number;
+    /**
+     * Offer the reader a choice of output shapes. Omit it — or pass one ratio —
+     * when the shape is fixed by the slot the picture is going into.
+     */
+    ratios?: CropRatio[];
+    /** Fires when the reader picks a different shape. */
+    onAspectChange?: (aspect: number) => void;
+    /** Highest allowed zoom. Past 3 the result is mush on most uploads. */
+    maxZoom?: number;
+    /** Offer the quarter-turn controls. */
+    rotatable?: boolean;
+    /** Fires on every pan, zoom, turn and reset, with the crop in image pixels. */
+    onChange?: (crop: CropRect, state: CropState) => void;
+}
+/**
+ * Pan-and-zoom cropping over a fixed frame. The frame never moves — the
+ * picture does — and the parts that fall outside it stay visible under a
+ * veil, so the reader can see what they are trimming away.
+ * Drag with a pointer, or focus the stage and use the arrow keys.
+ */
+export declare const ImageCropper: import("react").ForwardRefExoticComponent<ImageCropperProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface CropToBlobOptions {
+    /** Width of the output in pixels; the height follows the crop's aspect. */
+    outputWidth?: number;
+    /** Quarter turns applied before cropping — pass `state.rotation`. */
+    rotation?: number;
+    type?: "image/png" | "image/jpeg" | "image/webp";
+    quality?: number;
+}
+/**
+ * Renders a `CropRect` to an image blob in the browser. Same-origin or
+ * CORS-enabled sources only — a tainted canvas cannot be exported.
+ */
+export declare function cropToBlob(src: string, crop: CropRect, { outputWidth, rotation, type, quality }?: CropToBlobOptions): Promise<Blob>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAGf,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,2DAA2D;AAC3D,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,eAAO,MAAM,UAAU,EAAE,SAAS,EAKjC,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,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,8GAwPxB,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,EAAE,WAAW,EAAE,QAAY,EAAE,IAAkB,EAAE,OAAc,EAAE,GAAE,iBAAsB,GACxF,OAAO,CAAC,IAAI,CAAC,CAiCf"}

package/dist/components/ImageCropper/index.js

@@ -0,0 +1,263 @@
+import { Button as e } from "../Button/index.js";
+import { ButtonGroup as t } from "../ButtonGroup/index.js";
+import { forwardRef as n, useCallback as r, useEffect as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/ImageCropper/index.tsx
+var d = [
+	{
+		label: "1:1",
+		value: 1
+	},
+	{
+		label: "4:5",
+		value: 4 / 5
+	},
+	{
+		label: "4:3",
+		value: 4 / 3
+	},
+	{
+		label: "16:9",
+		value: 16 / 9
+	}
+], f = 1, p = {
+	offsetX: 0,
+	offsetY: 0,
+	zoom: 1,
+	rotation: 0
+}, m = n(function({ src: n, alt: d = "", aspect: m = 1, ratios: h, onAspectChange: g, maxZoom: _ = 3, rotatable: v = !0, onChange: y, className: b, ...x }, S) {
+	let C = o(null), [w, T] = s({
+		width: 0,
+		height: 0
+	}), [E, D] = s({
+		width: 0,
+		height: 0
+	}), [O, k] = s(p), [A, j] = s(m), M = o(null), N = o(null);
+	i(() => {
+		j(m), k((e) => ({
+			...p,
+			rotation: e.rotation
+		}));
+	}, [m]);
+	let P = (e) => {
+		j(e), k((e) => ({
+			...p,
+			rotation: e.rotation
+		})), g?.(e);
+	}, F = (e) => k((t) => ({
+		...p,
+		rotation: (t.rotation + e + 360) % 360
+	})), I = r((e) => {
+		e.naturalWidth && (D({
+			width: e.naturalWidth,
+			height: e.naturalHeight
+		}), k(p));
+	}, []);
+	i(() => {
+		let e = N.current;
+		e?.complete && I(e);
+	}, [I, n]);
+	let L = O.rotation % 180 != 0, R = {
+		width: L ? E.height : E.width,
+		height: L ? E.width : E.height
+	}, z = R.width && w.width ? Math.max(w.width / R.width, w.height / R.height) : 0, B = z * O.zoom, V = B ? Math.max(0, (R.width * B - w.width) / 2) : 0, H = B ? Math.max(0, (R.height * B - w.height) / 2) : 0;
+	a(() => {
+		let e = C.current;
+		if (!e) return;
+		let t = () => T({
+			width: e.clientWidth,
+			height: e.clientHeight
+		});
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []);
+	let U = r((e) => {
+		let t = z * e.zoom, n = t ? Math.max(0, (R.width * t - w.width) / 2) : 0, r = t ? Math.max(0, (R.height * t - w.height) / 2) : 0;
+		return {
+			rotation: e.rotation,
+			zoom: Math.min(_, Math.max(f, e.zoom)),
+			offsetX: Math.min(n, Math.max(-n, e.offsetX)),
+			offsetY: Math.min(r, Math.max(-r, e.offsetY))
+		};
+	}, [
+		z,
+		_,
+		R.height,
+		R.width,
+		w.height,
+		w.width
+	]);
+	i(() => {
+		if (!B || !w.width) return;
+		let e = w.width / B, t = w.height / B;
+		y?.({
+			x: Math.round(R.width / 2 - O.offsetX / B - e / 2),
+			y: Math.round(R.height / 2 - O.offsetY / B - t / 2),
+			width: Math.round(e),
+			height: Math.round(t)
+		}, O);
+	}, [
+		B,
+		w.width,
+		w.height,
+		R.width,
+		R.height,
+		O
+	]);
+	let W = (e) => {
+		e.button === 0 && (M.current = {
+			pointerId: e.pointerId,
+			x: e.clientX,
+			y: e.clientY
+		}, e.currentTarget.setPointerCapture(e.pointerId));
+	}, G = (e) => {
+		let t = M.current;
+		if (!t || t.pointerId !== e.pointerId) return;
+		let n = e.clientX - t.x, r = e.clientY - t.y;
+		M.current = {
+			...t,
+			x: e.clientX,
+			y: e.clientY
+		}, k((e) => U({
+			...e,
+			offsetX: e.offsetX + n,
+			offsetY: e.offsetY + r
+		}));
+	}, K = (e) => {
+		M.current?.pointerId === e.pointerId && (M.current = null, e.currentTarget.releasePointerCapture?.(e.pointerId));
+	}, q = (e, t) => k((n) => U({
+		...n,
+		offsetX: n.offsetX + e,
+		offsetY: n.offsetY + t
+	}));
+	return /* @__PURE__ */ u("div", {
+		ref: S,
+		className: ["ds-cropper", b].filter(Boolean).join(" "),
+		...x,
+		children: [
+			h && h.length > 1 && /* @__PURE__ */ l(t, {
+				"aria-label": "Crop ratio",
+				className: "ds-cropper__ratios",
+				children: h.map((t) => /* @__PURE__ */ l(e, {
+					size: "sm",
+					variant: t.value === A ? "active" : "neutral",
+					"aria-pressed": t.value === A,
+					onClick: () => P(t.value),
+					children: t.label
+				}, t.label))
+			}),
+			/* @__PURE__ */ u("div", {
+				role: "application",
+				"aria-label": "Crop area — drag to reposition, arrow keys to nudge",
+				tabIndex: 0,
+				className: "ds-cropper__stage",
+				style: { "--cropper-aspect": String(A) },
+				onPointerDown: W,
+				onPointerMove: G,
+				onPointerUp: K,
+				onPointerCancel: K,
+				onKeyDown: (e) => {
+					let t = e.shiftKey ? 24 : 8, n = {
+						ArrowLeft: [-t, 0],
+						ArrowRight: [t, 0],
+						ArrowUp: [0, -t],
+						ArrowDown: [0, t]
+					}[e.key];
+					n && (e.preventDefault(), q(n[0], n[1]));
+				},
+				children: [/* @__PURE__ */ l("img", {
+					ref: N,
+					src: n,
+					alt: d,
+					draggable: !1,
+					className: "ds-cropper__image",
+					onLoad: (e) => I(e.currentTarget),
+					style: {
+						inlineSize: E.width * B || void 0,
+						blockSize: E.height * B || void 0,
+						transform: `translate(calc(-50% + ${O.offsetX}px), calc(-50% + ${O.offsetY}px)) rotate(${O.rotation}deg)`
+					}
+				}), /* @__PURE__ */ l("div", {
+					className: "ds-cropper__frame",
+					ref: C,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ l("div", { className: "ds-cropper__guides" })
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "ds-cropper__controls",
+				children: [/* @__PURE__ */ u("label", {
+					className: "ds-cropper__zoom",
+					children: [
+						/* @__PURE__ */ l("span", {
+							className: "ds-cropper__zoom-label",
+							children: "Zoom"
+						}),
+						/* @__PURE__ */ l("input", {
+							type: "range",
+							min: f,
+							max: _,
+							step: .01,
+							value: O.zoom,
+							className: "ds-cropper__slider",
+							onChange: (e) => k((t) => U({
+								...t,
+								zoom: Number(e.target.value)
+							}))
+						}),
+						/* @__PURE__ */ u("span", {
+							className: "ds-cropper__value",
+							children: [O.zoom.toFixed(2), "×"]
+						})
+					]
+				}), /* @__PURE__ */ u(t, {
+					"aria-label": "Crop actions",
+					children: [v && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(e, {
+						size: "sm",
+						iconStart: "rotate-ccw",
+						"aria-label": "Rotate left",
+						onClick: () => F(-90)
+					}), /* @__PURE__ */ l(e, {
+						size: "sm",
+						iconStart: "rotate-cw",
+						"aria-label": "Rotate right",
+						onClick: () => F(90)
+					})] }), /* @__PURE__ */ l(e, {
+						size: "sm",
+						onClick: () => k(p),
+						children: "Reset"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ u("p", {
+				className: "ds-cropper__hint",
+				children: [
+					"Drag the picture to reposition it. Nothing is written until you save —",
+					" ",
+					V === 0 && H === 0 ? "at this zoom the whole picture is in frame." : "the veiled edges are what gets trimmed."
+				]
+			})
+		]
+	});
+});
+async function h(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");
+	c.width = s ? o.naturalHeight : o.naturalWidth, c.height = s ? o.naturalWidth : o.naturalHeight;
+	let l = c.getContext("2d");
+	if (!l) throw Error("Canvas 2D context unavailable");
+	l.translate(c.width / 2, c.height / 2), l.rotate(r * Math.PI / 180), l.drawImage(o, -o.naturalWidth / 2, -o.naturalHeight / 2);
+	let u = n ?? t.width, d = Math.round(t.height / t.width * u), f = document.createElement("canvas");
+	f.width = u, f.height = d;
+	let p = f.getContext("2d");
+	if (!p) throw Error("Canvas 2D context unavailable");
+	return p.drawImage(c, t.x, t.y, t.width, t.height, 0, 0, u, d), new Promise((e, t) => {
+		f.toBlob((n) => n ? e(n) : t(/* @__PURE__ */ Error("Could not encode the crop")), i, a);
+	});
+}
+//#endregion
+export { m as ImageCropper, d as cropRatios, h as cropToBlob };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","cropRatios","MIN_ZOOM","REST","ImageCropper","forwardRef","rest","frameRef","useRef","frame","setFrame","useState","natural","setNatural","state","setState","ratio","setRatio","aspect","dragRef","imageRef","prev","chooseRatio","next","onAspectChange","turn","by","adopt","useCallback","img","src","quarter","view","baseScale","scale","maxOffsetX","maxOffsetY","node","measure","observer","clamp","nextScale","limitX","limitY","maxZoom","width","height","onPointerDown","event","onPointerMove","drag","dx","dy","endDrag","nudge","className","ratios","ButtonGroup","Button","option","step","move","rotatable","Fragment","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  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 \"./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\n/** One offered output shape. `value` is width / height. */\nexport interface CropRatio {\n  label: string;\n  value: number;\n}\n\n/** The house set: square, portrait, landscape, wide. */\nexport const cropRatios: CropRatio[] = [\n  { label: \"1:1\", value: 1 },\n  { label: \"4:5\", value: 4 / 5 },\n  { label: \"4:3\", value: 4 / 3 },\n  { label: \"16:9\", value: 16 / 9 },\n];\n\nexport interface ImageCropperProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  src: string;\n  /** Describes the picture for people who cannot see the stage. */\n  alt?: string;\n  /** Output shape, width / height. 1 for an avatar, 16 / 9 for a hero. */\n  aspect?: number;\n  /**\n   * Offer the reader a choice of output shapes. Omit it — or pass one ratio —\n   * when the shape is fixed by the slot the picture is going into.\n   */\n  ratios?: CropRatio[];\n  /** Fires when the reader picks a different shape. */\n  onAspectChange?: (aspect: number) => void;\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 = 1,\n      ratios,\n      onAspectChange,\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 [ratio, setRatio] = useState(aspect);\n    const dragRef = useRef<{ pointerId: number; x: number; y: number } | null>(null);\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      setRatio(aspect);\n      setState((prev) => ({ ...REST, rotation: prev.rotation }));\n    }, [aspect]);\n\n    const chooseRatio = (next: number) => {\n      setRatio(next);\n      setState((prev) => ({ ...REST, rotation: prev.rotation }));\n      onAspectChange?.(next);\n    };\n\n    const turn = (by: number) =>\n      setState((prev) => ({ ...REST, rotation: (prev.rotation + by + 360) % 360 }));\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    const scale = baseScale * state.zoom;\n    const maxOffsetX = scale ? Math.max(0, (view.width * scale - frame.width) / 2) : 0;\n    const maxOffsetY = scale ? Math.max(0, (view.height * scale - frame.height) / 2) : 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    }, []);\n\n    const clamp = useCallback(\n      (next: CropState): CropState => {\n        const nextScale = baseScale * next.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        return {\n          rotation: next.rotation,\n          zoom: Math.min(maxZoom, Math.max(MIN_ZOOM, next.zoom)),\n          offsetX: Math.min(limitX, Math.max(-limitX, next.offsetX)),\n          offsetY: Math.min(limitY, Math.max(-limitY, next.offsetY)),\n        };\n      },\n      [baseScale, maxZoom, view.height, view.width, frame.height, frame.width],\n    );\n\n    useEffect(() => {\n      if (!scale || !frame.width) return;\n      const width = frame.width / scale;\n      const height = frame.height / scale;\n      onChange?.(\n        {\n          x: Math.round(view.width / 2 - state.offsetX / scale - width / 2),\n          y: Math.round(view.height / 2 - state.offsetY / scale - height / 2),\n          width: Math.round(width),\n          height: Math.round(height),\n        },\n        state,\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, state]);\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (event.button !== 0) return;\n      dragRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };\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) => clamp({ ...prev, offsetX: prev.offsetX + dx, offsetY: prev.offsetY + 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    const nudge = (dx: number, dy: number) =>\n      setState((prev) => clamp({ ...prev, offsetX: prev.offsetX + dx, offsetY: prev.offsetY + dy }));\n\n    return (\n      <div ref={ref} className={[\"ds-cropper\", className].filter(Boolean).join(\" \")} {...rest}>\n        {ratios && ratios.length > 1 && (\n          <ButtonGroup aria-label=\"Crop ratio\" className=\"ds-cropper__ratios\">\n            {ratios.map((option) => (\n              <Button\n                key={option.label}\n                size=\"sm\"\n                variant={option.value === ratio ? \"active\" : \"neutral\"}\n                aria-pressed={option.value === ratio}\n                onClick={() => chooseRatio(option.value)}\n              >\n                {option.label}\n              </Button>\n            ))}\n          </ButtonGroup>\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(ratio) } 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% + ${state.offsetX}px), calc(-50% + ${state.offsetY}px)) rotate(${state.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        <div className=\"ds-cropper__controls\">\n          <label className=\"ds-cropper__zoom\">\n            <span className=\"ds-cropper__zoom-label\">Zoom</span>\n            <input\n              type=\"range\"\n              min={MIN_ZOOM}\n              max={maxZoom}\n              step={0.01}\n              value={state.zoom}\n              className=\"ds-cropper__slider\"\n              onChange={(event) =>\n                setState((prev) => clamp({ ...prev, zoom: Number(event.target.value) }))\n              }\n            />\n            <span className=\"ds-cropper__value\">{state.zoom.toFixed(2)}×</span>\n          </label>\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        </div>\n\n        <p className=\"ds-cropper__hint\">\n          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        </p>\n      </div>\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  { outputWidth, rotation = 0, type = \"image/png\", quality = 0.92 }: 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(image, -image.naturalWidth / 2, -image.naturalHeight / 2);\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(turned, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height);\n\n  return new Promise((resolve, reject) => {\n    canvas.toBlob(\n      (blob) => (blob ? resolve(blob) : reject(new Error(\"Could not encode the crop\"))),\n      type,\n      quality,\n    );\n  });\n}\n"],"mappings":"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"}