@webiny/admin-ui 6.6.0-alpha.0 → 6.6.0-alpha.2

package/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\n\ntype ImagePreviewProps = FilePreviewDefaultProps;\n\nconst DecoratableImagePreview = ({\n    value,\n    className,\n    variant,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem\n}: ImagePreviewProps) => {\n    return (\n        <div\n            className={cn(\n                \"flex justify-center items-center py-sm rounded-md relative\",\n                previewVariants({ variant }),\n                className\n            )}\n            data-testid={\"image-preview\"}\n        >\n            <div\n                className={\"cursor-pointer size-[128px] flex justify-center items-center\"}\n                data-role={\"select-image\"}\n                onClick={onReplaceItem}\n            >\n                <img src={value.url} alt={value.name} className={\"object-contain size-full\"} />\n            </div>\n            <div className={\"absolute top-1 right-1.5\"}>\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"flex-col\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst ImagePreview = makeDecoratable(\"FileImagePreview\", DecoratableImagePreview);\n\nexport { ImagePreview, type ImagePreviewProps };\n"],"names":["DecoratableImagePreview","value","className","variant","disabled","onRemoveItem","onReplaceItem","onEditItem","cn","previewVariants","ItemActions","ImagePreview","makeDecoratable"],"mappings":";;;;AAQA,MAAMA,0BAA0B,CAAC,EAC7BC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACM,GACT,WAAP,GACI,oBAAC;QACG,WAAWC,GACP,8DACAC,gBAAgB;YAAEN;QAAQ,IAC1BD;QAEJ,eAAa;qBAEb,oBAAC;QACG,WAAW;QACX,aAAW;QACX,SAASI;qBAET,oBAAC;QAAI,KAAKL,MAAM,GAAG;QAAE,KAAKA,MAAM,IAAI;QAAE,WAAW;uBAErD,oBAAC;QAAI,WAAW;qBACZ,oBAACS,aAAWA;QACR,cAAcL;QACd,YAAYE;QACZ,UAAUH;QACV,WAAW;;AAO/B,MAAMO,eAAeC,gBAAgB,oBAAoBZ"}
+{"version":3,"file":"FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\n\ntype ImagePreviewProps = FilePreviewDefaultProps & {\n    /**\n     * Optional custom image renderer. Lets a consumer render, e.g., a cropped /\n     * focal-point-aware thumbnail while keeping all of the preview chrome. When\n     * omitted (or it returns a falsy value) a plain `<img>` is rendered.\n     */\n    renderImage?: (args: { url: string; name: string; className: string }) => React.ReactNode;\n};\n\nconst IMAGE_CLASS = \"object-contain size-full\";\n\nconst DecoratableImagePreview = ({\n    value,\n    className,\n    variant,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    renderImage\n}: ImagePreviewProps) => {\n    let image: React.ReactElement | React.ReactNode = (\n        <img src={value.url} alt={value.name} className={IMAGE_CLASS} />\n    );\n\n    if (typeof renderImage === \"function\") {\n        image = renderImage({ url: value.url, name: value.name, className: IMAGE_CLASS });\n    }\n\n    return (\n        <div\n            className={cn(\n                \"flex justify-center items-center py-sm rounded-md relative\",\n                previewVariants({ variant }),\n                className\n            )}\n            data-testid={\"image-preview\"}\n        >\n            <div\n                className={\"cursor-pointer size-[128px] flex justify-center items-center\"}\n                data-role={\"select-image\"}\n                onClick={onReplaceItem}\n            >\n                {image}\n            </div>\n            <div className={\"absolute top-1 right-1.5\"}>\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"flex-col\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst ImagePreview = makeDecoratable(\"FileImagePreview\", DecoratableImagePreview);\n\nexport { ImagePreview, type ImagePreviewProps };\n"],"names":["IMAGE_CLASS","DecoratableImagePreview","value","className","variant","disabled","onRemoveItem","onReplaceItem","onEditItem","renderImage","image","cn","previewVariants","ItemActions","ImagePreview","makeDecoratable"],"mappings":";;;;AAeA,MAAMA,cAAc;AAEpB,MAAMC,0BAA0B,CAAC,EAC7BC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,WAAW,EACK;IAChB,IAAIC,QAAAA,WAAAA,GACA,oBAAC;QAAI,KAAKR,MAAM,GAAG;QAAE,KAAKA,MAAM,IAAI;QAAE,WAAWF;;IAGrD,IAAI,AAAuB,cAAvB,OAAOS,aACPC,QAAQD,YAAY;QAAE,KAAKP,MAAM,GAAG;QAAE,MAAMA,MAAM,IAAI;QAAE,WAAWF;IAAY;IAGnF,OAAO,WAAP,GACI,oBAAC;QACG,WAAWW,GACP,8DACAC,gBAAgB;YAAER;QAAQ,IAC1BD;QAEJ,eAAa;qBAEb,oBAAC;QACG,WAAW;QACX,aAAW;QACX,SAASI;OAERG,QAAAA,WAAAA,GAEL,oBAAC;QAAI,WAAW;qBACZ,oBAACG,aAAWA;QACR,cAAcP;QACd,YAAYE;QACZ,UAAUH;QACV,WAAW;;AAK/B;AAEA,MAAMS,eAAeC,gBAAgB,oBAAoBd"}

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.d.ts

@@ -2,8 +2,13 @@ import React from "react";
 import type { FilePreviewDefaultProps } from "../../types.js";
 type RichItemPreviewProps = FilePreviewDefaultProps & {
     preview?: "thumbnail" | "file-type" | "placeholder";
+    /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */
+    renderImage?: (args: {
+        url: string;
+        name: string;
+    }) => React.ReactNode;
 };
-declare const DecoratableRichItemPreview: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element;
+declare const DecoratableRichItemPreview: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: RichItemPreviewProps) => React.JSX.Element;
 declare const RichItemPreview: typeof DecoratableRichItemPreview & {
     original: typeof DecoratableRichItemPreview;
     originalName: string;

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js

@@ -4,7 +4,7 @@ import { RichItemThumbnail } from "./RichItemThumbnail.js";
 import { ItemDescription } from "../ItemDescription.js";
 import { ItemActions } from "../ItemActions.js";
 import { previewVariants } from "../variants.js";
-const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props })=>/*#__PURE__*/ react.createElement("div", {
+const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props })=>/*#__PURE__*/ react.createElement("div", {
         "data-testid": "image-preview",
         className: cn("w-full rounded-md", previewVariants({
             variant,
@@ -20,7 +20,8 @@ const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onRepla
     }, /*#__PURE__*/ react.createElement(RichItemThumbnail, {
         ...value,
         disabled: disabled,
-        preview: preview
+        preview: preview,
+        renderImage: renderImage
     }), /*#__PURE__*/ react.createElement(ItemDescription, {
         item: value,
         disabled: disabled

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail.js\";\nimport { ItemDescription } from \"../ItemDescription.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\n\ntype RichItemPreviewProps = FilePreviewDefaultProps & {\n    preview?: \"thumbnail\" | \"file-type\" | \"placeholder\";\n};\n\nconst DecoratableRichItemPreview = ({\n    className,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    value,\n    variant,\n    preview,\n    ...props\n}: RichItemPreviewProps) => {\n    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\"w-full rounded-md\", previewVariants({ variant, disabled }), className)}\n            {...props}\n        >\n            <div\n                data-role=\"select-image\"\n                className=\"flex items-center justify-between gap-sm-extra min-w-0\"\n            >\n                <div\n                    className=\"flex items-center justify-between flex-1 cursor-pointer gap-sm-extra self-stretch min-w-0\"\n                    onClick={onReplaceItem}\n                >\n                    <RichItemThumbnail {...value} disabled={disabled} preview={preview} />\n                    <ItemDescription item={value} disabled={disabled} />\n                </div>\n\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onReplaceItem={onReplaceItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"pr-sm-extra\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst RichItemPreview = makeDecoratable(\"RichItemPreview\", DecoratableRichItemPreview);\n\nexport { RichItemPreview, type RichItemPreviewProps };\n"],"names":["DecoratableRichItemPreview","className","disabled","onRemoveItem","onReplaceItem","onEditItem","value","variant","preview","props","cn","previewVariants","RichItemThumbnail","ItemDescription","ItemActions","RichItemPreview","makeDecoratable"],"mappings":";;;;;;AAYA,MAAMA,6BAA6B,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,OAAO,EACP,GAAGC,OACgB,GACZ,WAAP,GACI,oBAAC;QACG,eAAY;QACZ,WAAWC,GAAG,qBAAqBC,gBAAgB;YAAEJ;YAASL;QAAS,IAAID;QAC1E,GAAGQ,KAAK;qBAET,oBAAC;QACG,aAAU;QACV,WAAU;qBAEV,oBAAC;QACG,WAAU;QACV,SAASL;qBAET,oBAACQ,mBAAiBA;QAAE,GAAGN,KAAK;QAAE,UAAUJ;QAAU,SAASM;sBAC3D,oBAACK,iBAAeA;QAAC,MAAMP;QAAO,UAAUJ;uBAG5C,oBAACY,aAAWA;QACR,cAAcX;QACd,eAAeC;QACf,YAAYC;QACZ,UAAUH;QACV,WAAW;;AAO/B,MAAMa,kBAAkBC,gBAAgB,mBAAmBhB"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail.js\";\nimport { ItemDescription } from \"../ItemDescription.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\n\ntype RichItemPreviewProps = FilePreviewDefaultProps & {\n    preview?: \"thumbnail\" | \"file-type\" | \"placeholder\";\n    /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */\n    renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n};\n\nconst DecoratableRichItemPreview = ({\n    className,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    value,\n    variant,\n    preview,\n    renderImage,\n    ...props\n}: RichItemPreviewProps) => {\n    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\"w-full rounded-md\", previewVariants({ variant, disabled }), className)}\n            {...props}\n        >\n            <div\n                data-role=\"select-image\"\n                className=\"flex items-center justify-between gap-sm-extra min-w-0\"\n            >\n                <div\n                    className=\"flex items-center justify-between flex-1 cursor-pointer gap-sm-extra self-stretch min-w-0\"\n                    onClick={onReplaceItem}\n                >\n                    <RichItemThumbnail\n                        {...value}\n                        disabled={disabled}\n                        preview={preview}\n                        renderImage={renderImage}\n                    />\n                    <ItemDescription item={value} disabled={disabled} />\n                </div>\n\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onReplaceItem={onReplaceItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"pr-sm-extra\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst RichItemPreview = makeDecoratable(\"RichItemPreview\", DecoratableRichItemPreview);\n\nexport { RichItemPreview, type RichItemPreviewProps };\n"],"names":["DecoratableRichItemPreview","className","disabled","onRemoveItem","onReplaceItem","onEditItem","value","variant","preview","renderImage","props","cn","previewVariants","RichItemThumbnail","ItemDescription","ItemActions","RichItemPreview","makeDecoratable"],"mappings":";;;;;;AAcA,MAAMA,6BAA6B,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,WAAW,EACX,GAAGC,OACgB,GACZ,WAAP,GACI,oBAAC;QACG,eAAY;QACZ,WAAWC,GAAG,qBAAqBC,gBAAgB;YAAEL;YAASL;QAAS,IAAID;QAC1E,GAAGS,KAAK;qBAET,oBAAC;QACG,aAAU;QACV,WAAU;qBAEV,oBAAC;QACG,WAAU;QACV,SAASN;qBAET,oBAACS,mBAAiBA;QACb,GAAGP,KAAK;QACT,UAAUJ;QACV,SAASM;QACT,aAAaC;sBAEjB,oBAACK,iBAAeA;QAAC,MAAMR;QAAO,UAAUJ;uBAG5C,oBAACa,aAAWA;QACR,cAAcZ;QACd,eAAeC;QACf,YAAYC;QACZ,UAAUH;QACV,WAAW;;AAO/B,MAAMc,kBAAkBC,gBAAgB,mBAAmBjB"}

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.d.ts

@@ -4,6 +4,15 @@ import type { RichItemPreviewProps } from "../../../../../FilePicker/primitives/
 type RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & FileItemFormatted & {
     preview?: RichItemPreviewProps["preview"];
     disabled?: boolean;
+    /**
+     * Optional custom image renderer for image thumbnails (e.g. a cropped /
+     * focal-point-aware image). Falls back to the default `<img>` when omitted
+     * or when it returns a falsy value.
+     */
+    renderImage?: (args: {
+        url: string;
+        name: string;
+    }) => React.ReactNode;
 };
-declare const RichItemThumbnail: ({ url, name, className, mimeType, preview, disabled }: RichItemThumbnailProps) => React.JSX.Element;
+declare const RichItemThumbnail: ({ url, name, className, mimeType, preview, disabled, renderImage }: RichItemThumbnailProps) => React.JSX.Element;
 export { RichItemThumbnail, type RichItemThumbnailProps };

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js

@@ -58,11 +58,15 @@ const Placeholder = ({ name })=>/*#__PURE__*/ react.createElement("div", {
         size: "lg",
         color: "neutral-light"
     }));
-const RichItemThumbnail = ({ url, name, className, mimeType, preview, disabled })=>{
+const RichItemThumbnail = ({ url, name, className, mimeType, preview, disabled, renderImage })=>{
     const isImage = mimeType?.startsWith("image/");
+    const customImage = "function" == typeof renderImage ? renderImage({
+        url,
+        name
+    }) : false;
     return /*#__PURE__*/ react.createElement("div", {
         className: cn("size-[56px] m-xs rounded-sm overflow-hidden relative", disabled && "[&_img]:filter [&_img]:grayscale [&_img]:opacity-50", className)
-    }, "thumbnail" === preview || isImage ? /*#__PURE__*/ react.createElement(Thumbnail, {
+    }, "thumbnail" === preview || isImage ? customImage || /*#__PURE__*/ react.createElement(Thumbnail, {
         url: url,
         name: name
     }) : "placeholder" === preview ? /*#__PURE__*/ react.createElement(Placeholder, {

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { RichItemPreviewProps } from \"~/FilePicker/primitives/components/index.js\";\n\nimport csvThumb from \"../assets/csv.svg\";\nimport docThumb from \"../assets/doc.svg\";\nimport docxThumb from \"../assets/docx.svg\";\nimport fileThumb from \"../assets/file.svg\";\nimport pdfThumb from \"../assets/pdf.svg\";\nimport pptThumb from \"../assets/ppt.svg\";\nimport pptxThumb from \"../assets/pptx.svg\";\nimport txtThumb from \"../assets/txt.svg\";\nimport xlsThumb from \"../assets/xls.svg\";\nimport xlsxThumb from \"../assets/xlsx.svg\";\n\ntype RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> &\n    FileItemFormatted & {\n        preview?: RichItemPreviewProps[\"preview\"];\n        disabled?: boolean;\n    };\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\">;\n\nconst Thumbnail = ({ url, name }: ThumbnailProps) => {\n    return (\n        <div className={\"size-full bg-neutral-muted\"}>\n            <img src={url} alt={name} className=\"size-full object-cover\" />\n        </div>\n    );\n};\n\ntype FileTypeProps = Pick<FileItemFormatted, \"mimeType\" | \"name\">;\n\nconst FileType = ({ mimeType = \"\", name }: FileTypeProps) => {\n    const getMimeTypeSrc = (mimeType: string) => {\n        switch (mimeType) {\n            case \"text/csv\": // .csv\n                return csvThumb;\n            case \"application/msword\": // .doc\n                return docThumb;\n            case \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": // .docx\n                return docxThumb;\n            case \"application/pdf\": // .pdf\n                return pdfThumb;\n            case \"application/vnd.ms-powerpoint\": // .ppt\n                return pptThumb;\n            case \"application/vnd.openxmlformats-officedocument.presentationml.presentation\": // .pptx\n                return pptxThumb;\n            case \"text/plain\": // .txt\n                return txtThumb;\n            case \"application/vnd.ms-excel\": // .xls\n                return xlsThumb;\n            case \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": // .xlsx\n                return xlsxThumb;\n            default:\n                return fileThumb;\n        }\n    };\n\n    return <img src={getMimeTypeSrc(mimeType)} alt={name} className=\"size-full p-sm-extra\" />;\n};\n\ntype PlaceholderProps = Pick<FileItemFormatted, \"name\">;\n\nconst Placeholder = ({ name }: PlaceholderProps) => {\n    return (\n        <div className={\"size-full flex justify-center items-center bg-transparent\"}>\n            <Icon icon={<PlaceholderIcon />} label={name} size={\"lg\"} color={\"neutral-light\"} />\n        </div>\n    );\n};\n\nconst RichItemThumbnail = ({\n    url,\n    name,\n    className,\n    mimeType,\n    preview,\n    disabled\n}: RichItemThumbnailProps) => {\n    const isImage = mimeType?.startsWith(\"image/\");\n\n    return (\n        <div\n            className={cn(\n                \"size-[56px] m-xs rounded-sm overflow-hidden relative\",\n                disabled && \"[&_img]:filter [&_img]:grayscale [&_img]:opacity-50\",\n                className\n            )}\n        >\n            {preview === \"thumbnail\" || isImage ? (\n                <Thumbnail url={url} name={name} />\n            ) : preview === \"placeholder\" ? (\n                <Placeholder name={name} />\n            ) : (\n                <FileType mimeType={mimeType} name={name} />\n            )}\n        </div>\n    );\n};\n\nexport { RichItemThumbnail, type RichItemThumbnailProps };\n"],"names":["Thumbnail","url","name","FileType","mimeType","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb","Placeholder","Icon","PlaceholderIcon","RichItemThumbnail","className","preview","disabled","isImage","cn"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAkB,GACrC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,KAAKD;QAAK,KAAKC;QAAM,WAAU;;AAOhD,MAAMC,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEF,IAAI,EAAiB;IACpD,MAAMG,iBAAiB,CAACD;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOE;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX;gBACI,OAAOC;QACf;IACJ;IAEA,OAAO,WAAP,GAAO,oBAAC;QAAI,KAAKV,eAAeD;QAAW,KAAKF;QAAM,WAAU;;AACpE;AAIA,MAAMc,cAAc,CAAC,EAAEd,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACe,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOhB;QAAM,MAAM;QAAM,OAAO;;AAK7E,MAAMiB,oBAAoB,CAAC,EACvBlB,GAAG,EACHC,IAAI,EACJkB,SAAS,EACThB,QAAQ,EACRiB,OAAO,EACPC,QAAQ,EACa;IACrB,MAAMC,UAAUnB,UAAU,WAAW;IAErC,OAAO,WAAP,GACI,oBAAC;QACG,WAAWoB,GACP,wDACAF,YAAY,uDACZF;OAGHC,AAAY,gBAAZA,WAA2BE,UAAU,WAAVA,GACxB,oBAACvB,WAASA;QAAC,KAAKC;QAAK,MAAMC;SAC3BmB,AAAY,kBAAZA,UAA4B,WAAhB,GACZ,oBAACL,aAAWA;QAAC,MAAMd;uBAEnB,oBAACC,UAAQA;QAAC,UAAUC;QAAU,MAAMF;;AAIpD"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { RichItemPreviewProps } from \"~/FilePicker/primitives/components/index.js\";\n\nimport csvThumb from \"../assets/csv.svg\";\nimport docThumb from \"../assets/doc.svg\";\nimport docxThumb from \"../assets/docx.svg\";\nimport fileThumb from \"../assets/file.svg\";\nimport pdfThumb from \"../assets/pdf.svg\";\nimport pptThumb from \"../assets/ppt.svg\";\nimport pptxThumb from \"../assets/pptx.svg\";\nimport txtThumb from \"../assets/txt.svg\";\nimport xlsThumb from \"../assets/xls.svg\";\nimport xlsxThumb from \"../assets/xlsx.svg\";\n\ntype RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> &\n    FileItemFormatted & {\n        preview?: RichItemPreviewProps[\"preview\"];\n        disabled?: boolean;\n        /**\n         * Optional custom image renderer for image thumbnails (e.g. a cropped /\n         * focal-point-aware image). Falls back to the default `<img>` when omitted\n         * or when it returns a falsy value.\n         */\n        renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n    };\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\">;\n\nconst Thumbnail = ({ url, name }: ThumbnailProps) => {\n    return (\n        <div className={\"size-full bg-neutral-muted\"}>\n            <img src={url} alt={name} className=\"size-full object-cover\" />\n        </div>\n    );\n};\n\ntype FileTypeProps = Pick<FileItemFormatted, \"mimeType\" | \"name\">;\n\nconst FileType = ({ mimeType = \"\", name }: FileTypeProps) => {\n    const getMimeTypeSrc = (mimeType: string) => {\n        switch (mimeType) {\n            case \"text/csv\": // .csv\n                return csvThumb;\n            case \"application/msword\": // .doc\n                return docThumb;\n            case \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": // .docx\n                return docxThumb;\n            case \"application/pdf\": // .pdf\n                return pdfThumb;\n            case \"application/vnd.ms-powerpoint\": // .ppt\n                return pptThumb;\n            case \"application/vnd.openxmlformats-officedocument.presentationml.presentation\": // .pptx\n                return pptxThumb;\n            case \"text/plain\": // .txt\n                return txtThumb;\n            case \"application/vnd.ms-excel\": // .xls\n                return xlsThumb;\n            case \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": // .xlsx\n                return xlsxThumb;\n            default:\n                return fileThumb;\n        }\n    };\n\n    return <img src={getMimeTypeSrc(mimeType)} alt={name} className=\"size-full p-sm-extra\" />;\n};\n\ntype PlaceholderProps = Pick<FileItemFormatted, \"name\">;\n\nconst Placeholder = ({ name }: PlaceholderProps) => {\n    return (\n        <div className={\"size-full flex justify-center items-center bg-transparent\"}>\n            <Icon icon={<PlaceholderIcon />} label={name} size={\"lg\"} color={\"neutral-light\"} />\n        </div>\n    );\n};\n\nconst RichItemThumbnail = ({\n    url,\n    name,\n    className,\n    mimeType,\n    preview,\n    disabled,\n    renderImage\n}: RichItemThumbnailProps) => {\n    const isImage = mimeType?.startsWith(\"image/\");\n    const customImage = typeof renderImage === \"function\" ? renderImage({ url, name }) : false;\n\n    return (\n        <div\n            className={cn(\n                \"size-[56px] m-xs rounded-sm overflow-hidden relative\",\n                disabled && \"[&_img]:filter [&_img]:grayscale [&_img]:opacity-50\",\n                className\n            )}\n        >\n            {preview === \"thumbnail\" || isImage ? (\n                customImage || <Thumbnail url={url} name={name} />\n            ) : preview === \"placeholder\" ? (\n                <Placeholder name={name} />\n            ) : (\n                <FileType mimeType={mimeType} name={name} />\n            )}\n        </div>\n    );\n};\n\nexport { RichItemThumbnail, type RichItemThumbnailProps };\n"],"names":["Thumbnail","url","name","FileType","mimeType","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb","Placeholder","Icon","PlaceholderIcon","RichItemThumbnail","className","preview","disabled","renderImage","isImage","customImage","cn"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAkB,GACrC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,KAAKD;QAAK,KAAKC;QAAM,WAAU;;AAOhD,MAAMC,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEF,IAAI,EAAiB;IACpD,MAAMG,iBAAiB,CAACD;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOE;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX;gBACI,OAAOC;QACf;IACJ;IAEA,OAAO,WAAP,GAAO,oBAAC;QAAI,KAAKV,eAAeD;QAAW,KAAKF;QAAM,WAAU;;AACpE;AAIA,MAAMc,cAAc,CAAC,EAAEd,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACe,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOhB;QAAM,MAAM;QAAM,OAAO;;AAK7E,MAAMiB,oBAAoB,CAAC,EACvBlB,GAAG,EACHC,IAAI,EACJkB,SAAS,EACThB,QAAQ,EACRiB,OAAO,EACPC,QAAQ,EACRC,WAAW,EACU;IACrB,MAAMC,UAAUpB,UAAU,WAAW;IACrC,MAAMqB,cAAc,AAAuB,cAAvB,OAAOF,cAA6BA,YAAY;QAAEtB;QAAKC;IAAK,KAAK;IAErF,OAAO,WAAP,GACI,oBAAC;QACG,WAAWwB,GACP,wDACAJ,YAAY,uDACZF;OAGHC,AAAY,gBAAZA,WAA2BG,UACxBC,eAAe,WAAfA,GAAe,oBAACzB,WAASA;QAAC,KAAKC;QAAK,MAAMC;SAC1CmB,AAAY,kBAAZA,UAA4B,WAAhB,GACZ,oBAACL,aAAWA;QAAC,MAAMd;uBAEnB,oBAACC,UAAQA;QAAC,UAAUC;QAAU,MAAMF;;AAIpD"}

package/ImageEditor/AspectRatioPreview.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { ImageEditorAspectRatio, ImageEditorCrop, ImageEditorHotspot } from "./types.js";
+interface AspectRatioPreviewProps {
+    src: string;
+    imageWidth: number;
+    imageHeight: number;
+    crop: ImageEditorCrop | undefined;
+    hotspot: ImageEditorHotspot | undefined;
+    aspectRatio: ImageEditorAspectRatio;
+}
+/**
+ * A single live preview showing how the current crop + hotspot renders at one
+ * target aspect ratio. Uses the shared preview geometry so it matches the site.
+ */
+export declare const AspectRatioPreview: ({ src, imageWidth, imageHeight, crop, hotspot, aspectRatio }: AspectRatioPreviewProps) => React.JSX.Element;
+export {};

package/ImageEditor/AspectRatioPreview.js

@@ -0,0 +1,26 @@
+import react from "react";
+import { getPreviewStyles } from "./geometry.js";
+const PREVIEW_HEIGHT = 120;
+const AspectRatioPreview = ({ src, imageWidth, imageHeight, crop, hotspot, aspectRatio })=>{
+    const styles = getPreviewStyles(imageWidth, imageHeight, crop, hotspot, aspectRatio.ratio);
+    const width = Math.round(PREVIEW_HEIGHT * aspectRatio.ratio);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center gap-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "relative overflow-hidden rounded-sm border border-neutral-dimmed bg-neutral-light",
+        style: {
+            width: `${width}px`,
+            height: `${PREVIEW_HEIGHT}px`
+        }
+    }, /*#__PURE__*/ react.createElement("img", {
+        src: src,
+        alt: "",
+        style: styles.image,
+        draggable: false
+    })), /*#__PURE__*/ react.createElement("span", {
+        className: "text-sm text-neutral-strong"
+    }, aspectRatio.label));
+};
+export { AspectRatioPreview };
+
+//# sourceMappingURL=AspectRatioPreview.js.map

package/ImageEditor/AspectRatioPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor/AspectRatioPreview.js","sources":["../../src/ImageEditor/AspectRatioPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { getPreviewStyles } from \"./geometry.js\";\nimport type { ImageEditorAspectRatio, ImageEditorCrop, ImageEditorHotspot } from \"./types.js\";\n\ninterface AspectRatioPreviewProps {\n    src: string;\n    imageWidth: number;\n    imageHeight: number;\n    crop: ImageEditorCrop | undefined;\n    hotspot: ImageEditorHotspot | undefined;\n    aspectRatio: ImageEditorAspectRatio;\n}\n\n// Fixed preview height (px). Each thumbnail keeps this height regardless of how\n// many are shown; the width is derived from the aspect ratio.\nconst PREVIEW_HEIGHT = 120;\n\n/**\n * A single live preview showing how the current crop + hotspot renders at one\n * target aspect ratio. Uses the shared preview geometry so it matches the site.\n */\nexport const AspectRatioPreview = ({\n    src,\n    imageWidth,\n    imageHeight,\n    crop,\n    hotspot,\n    aspectRatio\n}: AspectRatioPreviewProps) => {\n    const styles = getPreviewStyles(imageWidth, imageHeight, crop, hotspot, aspectRatio.ratio);\n    const width = Math.round(PREVIEW_HEIGHT * aspectRatio.ratio);\n\n    return (\n        <div className={\"flex flex-col items-center gap-xs\"}>\n            <div\n                className={\n                    \"relative overflow-hidden rounded-sm border border-neutral-dimmed bg-neutral-light\"\n                }\n                style={{ width: `${width}px`, height: `${PREVIEW_HEIGHT}px` }}\n            >\n                <img src={src} alt={\"\"} style={styles.image} draggable={false} />\n            </div>\n            <span className={\"text-sm text-neutral-strong\"}>{aspectRatio.label}</span>\n        </div>\n    );\n};\n"],"names":["PREVIEW_HEIGHT","AspectRatioPreview","src","imageWidth","imageHeight","crop","hotspot","aspectRatio","styles","getPreviewStyles","width","Math"],"mappings":";;AAeA,MAAMA,iBAAiB;AAMhB,MAAMC,qBAAqB,CAAC,EAC/BC,GAAG,EACHC,UAAU,EACVC,WAAW,EACXC,IAAI,EACJC,OAAO,EACPC,WAAW,EACW;IACtB,MAAMC,SAASC,iBAAiBN,YAAYC,aAAaC,MAAMC,SAASC,YAAY,KAAK;IACzF,MAAMG,QAAQC,KAAK,KAAK,CAACX,iBAAiBO,YAAY,KAAK;IAE3D,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;QAEJ,OAAO;YAAE,OAAO,GAAGG,MAAM,EAAE,CAAC;YAAE,QAAQ,GAAGV,eAAe,EAAE,CAAC;QAAC;qBAE5D,oBAAC;QAAI,KAAKE;QAAK,KAAK;QAAI,OAAOM,OAAO,KAAK;QAAE,WAAW;uBAE5D,oBAAC;QAAK,WAAW;OAAgCD,YAAY,KAAK;AAG9E"}

package/ImageEditor/CropHotspotEditor.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { ImageEditorCrop, ImageEditorHotspot, ImageEditorImage } from "./types.js";
+interface CropHotspotEditorProps {
+    image: ImageEditorImage;
+    crop: ImageEditorCrop | undefined;
+    hotspot: ImageEditorHotspot | undefined;
+    /** Currently selected crop shape id ("free" or a preset id). Controlled by the parent. */
+    aspectId: string;
+    onChangeAspect: (id: string) => void;
+    onChangeCrop: (crop: ImageEditorCrop) => void;
+    onChangeHotspot: (hotspot: ImageEditorHotspot) => void;
+}
+export declare const FREE = "free";
+/**
+ * Infer which crop-shape preset a saved crop corresponds to, by comparing the
+ * crop's on-screen (pixel) aspect ratio against the presets. The crop stores only
+ * edge insets — not the shape used to draw it — so on reopen we recover the shape
+ * here; a crop drawn with a preset matches it closely, while a free crop won't.
+ */
+export declare const inferAspectId: (crop: ImageEditorCrop | undefined, width: number, height: number) => string;
+export declare const CropHotspotEditor: ({ image, crop, hotspot, aspectId, onChangeAspect, onChangeCrop, onChangeHotspot }: CropHotspotEditorProps) => React.JSX.Element;
+export {};

package/ImageEditor/CropHotspotEditor.js

@@ -0,0 +1,402 @@
+import react, { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Select } from "../Select/index.js";
+import { Text } from "../Text/index.js";
+import { SectionLabel } from "./SectionLabel.js";
+import { DEFAULT_ASPECT_RATIOS } from "./types.js";
+const MIN = 0.05;
+const FREE = "free";
+const inferAspectId = (crop, width, height)=>{
+    if (!crop || !width || !height) return FREE;
+    const cropWidth = Math.max(0, 1 - (crop.left ?? 0) - (crop.right ?? 0));
+    const cropHeight = Math.max(0, 1 - (crop.top ?? 0) - (crop.bottom ?? 0));
+    if (cropWidth <= 0 || cropHeight <= 0) return FREE;
+    const displayRatio = cropWidth * width / (cropHeight * height);
+    const match = DEFAULT_ASPECT_RATIOS.find((ar)=>Math.abs(ar.ratio - displayRatio) < 0.02);
+    return match?.id ?? FREE;
+};
+const MAX_CANVAS_WIDTH = 640;
+const MAX_CANVAS_HEIGHT = 460;
+const clamp01 = (n)=>Math.min(1, Math.max(0, n));
+const cropToEdges = (crop)=>({
+        left: clamp01(crop?.left ?? 0),
+        top: clamp01(crop?.top ?? 0),
+        right: 1 - clamp01(crop?.right ?? 0),
+        bottom: 1 - clamp01(crop?.bottom ?? 0)
+    });
+const edgesToCrop = (e)=>({
+        top: e.top,
+        left: e.left,
+        bottom: 1 - e.bottom,
+        right: 1 - e.right
+    });
+const HANDLE_EDGES = {
+    nw: [
+        "top",
+        "left"
+    ],
+    n: [
+        "top"
+    ],
+    ne: [
+        "top",
+        "right"
+    ],
+    e: [
+        "right"
+    ],
+    se: [
+        "bottom",
+        "right"
+    ],
+    s: [
+        "bottom"
+    ],
+    sw: [
+        "bottom",
+        "left"
+    ],
+    w: [
+        "left"
+    ]
+};
+const CORNER_HANDLES = [
+    "nw",
+    "ne",
+    "se",
+    "sw"
+];
+const EDGE_HANDLES = [
+    "n",
+    "e",
+    "s",
+    "w"
+];
+const clampHotspot = (h, e)=>({
+        x: Math.min(e.right, Math.max(e.left, h?.x ?? (e.left + e.right) / 2)),
+        y: Math.min(e.bottom, Math.max(e.top, h?.y ?? (e.top + e.bottom) / 2)),
+        width: h?.width ?? 1,
+        height: h?.height ?? 1
+    });
+const CropHotspotEditor = ({ image, crop, hotspot, aspectId, onChangeAspect, onChangeCrop, onChangeHotspot })=>{
+    const surfaceRef = useRef(null);
+    const dragRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const [availWidth, setAvailWidth] = useState(0);
+    useLayoutEffect(()=>{
+        const el = wrapperRef.current;
+        if (!el) return;
+        const measure = ()=>setAvailWidth(el.getBoundingClientRect().width);
+        measure();
+        if ("u" < typeof ResizeObserver) return;
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return ()=>ro.disconnect();
+    }, []);
+    const imageRatio = (image.width || 1) / (image.height || 1);
+    const surfaceStyle = useMemo(()=>{
+        if (availWidth <= 0) return {
+            width: "100%",
+            aspectRatio: `${image.width || 1} / ${image.height || 1}`,
+            maxHeight: `${MAX_CANVAS_HEIGHT}px`
+        };
+        let width = Math.min(availWidth, MAX_CANVAS_WIDTH);
+        let height = width / imageRatio;
+        if (height > MAX_CANVAS_HEIGHT) {
+            height = MAX_CANVAS_HEIGHT;
+            width = height * imageRatio;
+        }
+        return {
+            width: `${width}px`,
+            height: `${height}px`
+        };
+    }, [
+        availWidth,
+        imageRatio,
+        image.width,
+        image.height
+    ]);
+    const edges = useMemo(()=>cropToEdges(crop), [
+        crop
+    ]);
+    const ratio = DEFAULT_ASPECT_RATIOS.find((ar)=>ar.id === aspectId)?.ratio ?? null;
+    const aspectOptions = useMemo(()=>[
+            {
+                label: "Free",
+                value: FREE
+            },
+            ...DEFAULT_ASPECT_RATIOS.map((ar)=>({
+                    label: ar.label,
+                    value: ar.id
+                }))
+        ], []);
+    const toNorm = useCallback((clientX, clientY)=>{
+        const rect = surfaceRef.current.getBoundingClientRect();
+        return {
+            x: clamp01((clientX - rect.left) / rect.width),
+            y: clamp01((clientY - rect.top) / rect.height)
+        };
+    }, []);
+    const commitEdges = useCallback((next)=>{
+        onChangeCrop(edgesToCrop(next));
+        onChangeHotspot(clampHotspot(hotspot, next));
+    }, [
+        onChangeCrop,
+        onChangeHotspot,
+        hotspot
+    ]);
+    const resizeFree = (handle, p)=>{
+        const moves = HANDLE_EDGES[handle];
+        const next = {
+            ...edges
+        };
+        if (moves.includes("left")) next.left = Math.min(p.x, next.right - MIN);
+        if (moves.includes("right")) next.right = Math.max(p.x, next.left + MIN);
+        if (moves.includes("top")) next.top = Math.min(p.y, next.bottom - MIN);
+        if (moves.includes("bottom")) next.bottom = Math.max(p.y, next.top + MIN);
+        return next;
+    };
+    const resizeLocked = (handle, p, r)=>{
+        const moves = HANDLE_EDGES[handle];
+        const rNorm = r / imageRatio;
+        const anchorX = moves.includes("left") ? edges.right : edges.left;
+        const anchorY = moves.includes("top") ? edges.bottom : edges.top;
+        const dirX = moves.includes("left") ? -1 : 1;
+        const dirY = moves.includes("top") ? -1 : 1;
+        const maxW = dirX > 0 ? 1 - anchorX : anchorX;
+        const maxH = dirY > 0 ? 1 - anchorY : anchorY;
+        let w = Math.abs(p.x - anchorX);
+        let h = w / rNorm;
+        if (h > Math.abs(p.y - anchorY)) {
+            h = Math.abs(p.y - anchorY);
+            w = h * rNorm;
+        }
+        w = Math.min(w, maxW);
+        h = w / rNorm;
+        if (h > maxH) {
+            h = maxH;
+            w = h * rNorm;
+        }
+        w = Math.max(w, MIN);
+        h = Math.max(h, MIN);
+        const next = {
+            ...edges
+        };
+        if (dirX > 0) {
+            next.left = anchorX;
+            next.right = anchorX + w;
+        } else {
+            next.right = anchorX;
+            next.left = anchorX - w;
+        }
+        if (dirY > 0) {
+            next.top = anchorY;
+            next.bottom = anchorY + h;
+        } else {
+            next.bottom = anchorY;
+            next.top = anchorY - h;
+        }
+        return next;
+    };
+    const moveCrop = (startEdges, dx, dy)=>{
+        const w = startEdges.right - startEdges.left;
+        const h = startEdges.bottom - startEdges.top;
+        const left = Math.min(Math.max(startEdges.left + dx, 0), 1 - w);
+        const top = Math.min(Math.max(startEdges.top + dy, 0), 1 - h);
+        return {
+            left,
+            top,
+            right: left + w,
+            bottom: top + h
+        };
+    };
+    const onPointerMove = useCallback((e)=>{
+        const drag = dragRef.current;
+        if (!drag) return;
+        const p = toNorm(e.clientX, e.clientY);
+        if ("focal" === drag.mode) return void onChangeHotspot(clampHotspot({
+            x: p.x,
+            y: p.y,
+            width: 1,
+            height: 1
+        }, edges));
+        if ("move" === drag.mode) {
+            const dx = p.x - drag.startPointer.x;
+            const dy = p.y - drag.startPointer.y;
+            commitEdges(moveCrop(drag.startEdges, dx, dy));
+            return;
+        }
+        const handle = drag.mode.slice(7);
+        commitEdges(null === ratio ? resizeFree(handle, p) : resizeLocked(handle, p, ratio));
+    }, [
+        toNorm,
+        onChangeHotspot,
+        edges,
+        commitEdges,
+        ratio
+    ]);
+    const startMoveCrop = useCallback((e)=>{
+        dragRef.current = {
+            mode: "move",
+            startPointer: toNorm(e.clientX, e.clientY),
+            startEdges: edges
+        };
+        surfaceRef.current?.setPointerCapture(e.pointerId);
+    }, [
+        toNorm,
+        edges
+    ]);
+    const startFocal = useCallback((e)=>{
+        e.stopPropagation();
+        dragRef.current = {
+            mode: "focal"
+        };
+        surfaceRef.current?.setPointerCapture(e.pointerId);
+    }, []);
+    const startResize = useCallback((handle)=>(e)=>{
+            e.stopPropagation();
+            dragRef.current = {
+                mode: `resize:${handle}`
+            };
+            surfaceRef.current?.setPointerCapture(e.pointerId);
+        }, []);
+    const endDrag = useCallback((e)=>{
+        dragRef.current = null;
+        surfaceRef.current?.releasePointerCapture(e.pointerId);
+    }, []);
+    const onSelectAspect = useCallback((value)=>{
+        onChangeAspect(value);
+        const r = DEFAULT_ASPECT_RATIOS.find((ar)=>ar.id === value)?.ratio;
+        if (value === FREE || !r) return;
+        const rNorm = r / imageRatio;
+        const cw = edges.right - edges.left;
+        const ch = edges.bottom - edges.top;
+        let w = cw;
+        let h = w / rNorm;
+        if (h > ch) {
+            h = ch;
+            w = h * rNorm;
+        }
+        const cx = (edges.left + edges.right) / 2;
+        const cy = (edges.top + edges.bottom) / 2;
+        commitEdges({
+            left: clamp01(cx - w / 2),
+            right: clamp01(cx + w / 2),
+            top: clamp01(cy - h / 2),
+            bottom: clamp01(cy + h / 2)
+        });
+    }, [
+        edges,
+        commitEdges,
+        imageRatio,
+        onChangeAspect
+    ]);
+    const activeHotspot = clampHotspot(hotspot, edges);
+    const handles = null === ratio ? [
+        ...CORNER_HANDLES,
+        ...EDGE_HANDLES
+    ] : CORNER_HANDLES;
+    const handlePosition = (handle)=>{
+        const cx = (edges.left + edges.right) / 2;
+        const cy = (edges.top + edges.bottom) / 2;
+        const x = handle.includes("w") ? edges.left : handle.includes("e") ? edges.right : cx;
+        const y = handle.includes("n") ? edges.top : handle.includes("s") ? edges.bottom : cy;
+        return {
+            left: `${100 * x}%`,
+            top: `${100 * y}%`
+        };
+    };
+    const cursorFor = (handle)=>{
+        const map = {
+            nw: "nwse-resize",
+            se: "nwse-resize",
+            ne: "nesw-resize",
+            sw: "nesw-resize",
+            n: "ns-resize",
+            s: "ns-resize",
+            e: "ew-resize",
+            w: "ew-resize"
+        };
+        return map[handle];
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-end justify-between gap-md"
+    }, /*#__PURE__*/ react.createElement(SectionLabel, null, "Crop & focal point"), /*#__PURE__*/ react.createElement("div", {
+        className: "w-[200px] shrink-0"
+    }, /*#__PURE__*/ react.createElement(Select, {
+        label: "Crop shape",
+        value: aspectId,
+        options: aspectOptions,
+        onChange: onSelectAspect,
+        displayResetAction: false
+    }))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center rounded-md bg-neutral-dark p-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: wrapperRef,
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: surfaceRef,
+        onPointerMove: onPointerMove,
+        onPointerUp: endDrag,
+        className: "relative mx-auto touch-none select-none overflow-hidden rounded-sm",
+        style: surfaceStyle
+    }, /*#__PURE__*/ react.createElement("img", {
+        src: image.src,
+        alt: "",
+        draggable: false,
+        className: "pointer-events-none absolute inset-0 h-full w-full object-cover"
+    }), /*#__PURE__*/ react.createElement("div", {
+        onPointerDown: startMoveCrop,
+        className: "absolute cursor-move border border-white/90",
+        style: {
+            left: `${100 * edges.left}%`,
+            top: `${100 * edges.top}%`,
+            width: `${(edges.right - edges.left) * 100}%`,
+            height: `${(edges.bottom - edges.top) * 100}%`,
+            boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 9999px rgba(0, 0, 0, 0.45)"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "pointer-events-none absolute inset-0"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-y-0 left-1/3 w-px bg-white/30"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-y-0 left-2/3 w-px bg-white/30"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-x-0 top-1/3 h-px bg-white/30"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-x-0 top-2/3 h-px bg-white/30"
+    })), /*#__PURE__*/ react.createElement("div", {
+        onPointerDown: startFocal,
+        className: "absolute flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 cursor-grab touch-none items-center justify-center active:cursor-grabbing",
+        style: {
+            left: `${(activeHotspot.x - edges.left) / Math.max(MIN, edges.right - edges.left) * 100}%`,
+            top: `${(activeHotspot.y - edges.top) / Math.max(MIN, edges.bottom - edges.top) * 100}%`
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "pointer-events-none relative h-6 w-6 rounded-full border-2 border-white bg-white/25 shadow-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute left-1/2 top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white"
+    })))), handles.map((handle)=>{
+        const pos = handlePosition(handle);
+        return /*#__PURE__*/ react.createElement("div", {
+            key: handle,
+            onPointerDown: startResize(handle),
+            className: "absolute flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 touch-none items-center justify-center",
+            style: {
+                left: pos.left,
+                top: pos.top,
+                cursor: cursorFor(handle)
+            }
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "pointer-events-none h-3 w-3 rounded-sm border border-neutral-dark bg-white shadow"
+        }));
+    })))), /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "Drag the handles to crop, drag inside to reposition, and drag the circle to set the focal point."));
+};
+export { CropHotspotEditor, FREE, inferAspectId };
+
+//# sourceMappingURL=CropHotspotEditor.js.map