pixedi 1.6.1 → 1.7.1

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## 1.7.0
+
+- Add method `setTheme` in widget.
+- Bugfix: the image resize with scroll up/down did not work in widget.
+
 ## 1.6.1
 
 - Bugfix, the Sidebar pop-left when change the crop resolution.

package/README.widget.md

@@ -0,0 +1,105 @@
+# pixedi widget
+
+A standalone UMD build of the Pixedi image editor for non-React environments. It mounts into a Shadow DOM, so its styles are fully isolated from the host page.
+
+## Installation
+
+Pin to a specific version in production:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/pixedi@1.3.0/dist/widget/pixedi-widget.js"></script>
+```
+
+For the latest version (use only for testing):
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/pixedi/dist/widget/pixedi-widget.js"></script>
+```
+
+The script exposes `window.PixediWidget`.
+
+## Usage
+
+```html
+<div id="editor" style="width: 100%; height: 600px"></div>
+
+<script>
+  const widget = PixediWidget.init({
+    containerId: "editor",
+    image: "https://example.com/photo.jpg",
+    theme: "light",
+    onSave: async (image) => {
+      // image is a Blob by default, or a base64 data URI when
+      // settings.exportAs is "base64"
+      console.log(image);
+    },
+    onBack: () => {
+      console.log("User cancelled editing");
+    },
+  });
+</script>
+```
+
+## `PixediWidget.init(options)`
+
+Creates the editor inside the element with the given `containerId`. Only one widget can be active at a time — calling `init` again destroys the previous instance. Returns a widget instance, or `undefined` if the container is not found or a shadow root cannot be attached.
+
+### Options
+
+| Option        | Type                                               | Description                                                                                   |
+| ------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `containerId` | `string`                                           | ID of the element to mount the editor into. Required.                                         |
+| `image`       | `string \| Blob`                                   | URL, base64 data URI, or `Blob` of the image to edit. Required.                               |
+| `onSave`      | `(image: Blob \| string) => void \| Promise<void>` | Called when the user clicks Save. Receives the edited image as a `Blob` or a base64 data URI. |
+| `onBack`      | `() => void`                                       | Called when the user clicks Back/Cancel.                                                      |
+| `theme`       | `"light" \| "dark"`                                | UI color theme. Defaults to `"light"`.                                                        |
+| `settings`    | `Settings`                                         | Optional editor settings — same shape as the React component's `settings` prop.               |
+
+### `Settings`
+
+| Setting      | Type                                                                           | Default                                                    | Description                                                                                     |
+| ------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `tools`      | `Array<"resize" \| "crop" \| "presetCrop" \| "flip" \| "rotate" \| "filters">` | `["resize","crop","presetCrop","flip","rotate","filters"]` | Tools to show in the sidebar. Use an empty array to disable editing.                            |
+| `infobar`    | `boolean`                                                                      | `false`                                                    | Show the image info panel below the canvas.                                                     |
+| `quality`    | `number`                                                                       | `0.85`                                                     | Output compression quality (`0`–`1`) for JPEG/WebP.                                             |
+| `saveAsWEBP` | `boolean`                                                                      | `false`                                                    | Encode the final image as WebP.                                                                 |
+| `exportAs`   | `"blob" \| "base64"`                                                           | `"blob"`                                                   | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
+
+## Widget instance
+
+`init` returns an object with two methods:
+
+| Method                 | Description                                                            |
+| ---------------------- | ---------------------------------------------------------------------- |
+| `setTheme(theme)`      | Switches the UI theme (`"light"` or `"dark"`) without losing edits.    |
+| `destroy()`            | Unmounts the editor and removes its styles.                            |
+
+### `setTheme(theme)`
+
+Re-renders the editor with a new theme. Because the widget lives in a Shadow DOM, it does not inherit `data-theme` or classes from the host page — call `setTheme` to keep it in sync with your app's theme.
+
+Example — follow a `data-theme` attribute on `<html>`:
+
+```js
+const widget = PixediWidget.init({
+  containerId: "editor",
+  image: photo,
+  onSave,
+  onBack,
+});
+
+new MutationObserver(() => {
+  widget.setTheme(
+    document.documentElement.dataset.theme === "dark" ? "dark" : "light",
+  );
+}).observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ["data-theme"],
+});
+```
+
+`setTheme` preserves the current editing state (crop, filters, undo history). Calling it after `destroy()` or after a newer `init()` is a safe no-op.
+
+## License
+
+MIT

package/dist/lib/index.js

@@ -2131,8 +2131,8 @@ var q = (e, t, n) => Math.max(t, Math.min(n, e)), $e = (e, t) => [[e[0][0] * t[0
 	};
 	return o(() => {
 		let e = (e) => {
-			let t = b.current?.parentElement;
-			return e.target instanceof Node && !!t?.contains(e.target);
+			let t = b.current?.parentElement, n = e.composedPath?.()[0] ?? e.target;
+			return n instanceof Node && !!t?.contains(n);
 		}, t = (t) => {
 			e(t) && x(v.current - Math.sign(t.deltaY) * jt);
 		}, n = (t) => {

package/dist/lib/index.umd.js

@@ -4,7 +4,7 @@
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,p,m,p),ie[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,ee=Array.isArray,j=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var te,M={},ne=m.react_stack_bottom_frame.bind(m,o)(),re=j(i(o)),ie={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):ne,r?j(i(e)):re)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):ne,r?j(i(e)):re)}})()})),_=c(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=h():t.exports=g()}))(),v=({children:e,mimeType:n,width:r,height:i,originalBlob:a,previewUrl:o,isAlpha:s,settings:c})=>{let[l,u]=(0,t.useState)(p(n,r,i,a,o,s,c)),f=(0,t.useRef)(null);(0,t.useEffect)(()=>()=>{f.current&&=(URL.revokeObjectURL(f.current),null)},[]);let h=e=>u(t=>({...t,currentAction:e})),g=e=>u(t=>{let n=t.history.pointer+1,r=[...t.history.items.slice(0,n),e];return{...t,currentAction:null,history:{items:r,pointer:n}}}),v=()=>u(e=>({...e,showCompare:!e.showCompare})),y=()=>{let{items:e,pointer:t}=l.history;return e.at(t)??e.at(0)??{width:0,height:0,action:{name:d.INITIAL,args:null}}},b=()=>{let{items:e,pointer:t}=l.history;return e.filter((e,n)=>n<=t&&e.action.name===d.FILTERS).at(-1)??null},x=()=>{let{items:e,pointer:t}=l.history;if(e.length===0||t<0)return 0;let n=e.slice(0,t+1).findLast(e=>e.action.name===d.ROTATE);return n?.action.name===d.ROTATE?n.action.args.degrees:0},S=()=>u(e=>({...e,history:{items:[e.history.items[0]],pointer:0}})),C=()=>u(e=>e.history.pointer<=0?e:{...e,history:{...e.history,pointer:e.history.pointer-1}}),w=()=>u(e=>e.history.pointer>=e.history.items.length-1?e:{...e,history:{...e.history,pointer:e.history.pointer+1}}),T=e=>u(t=>({...t,sidebar:e})),E=(0,t.useMemo)(()=>new EventTarget,[]),D=e=>{f.current&&URL.revokeObjectURL(f.current),f.current=URL.createObjectURL(e.previewBlob),u(p(e.mimeType,e.width,e.height,e.newBlob,f.current,e.isAlpha,c))};return(0,_.jsx)(m,{value:{...l,setImage:D,setCurrentAction:h,toggleCompare:v,getLastHistoryItem:y,getLastRotation:x,getLastFilter:b,addToHistory:g,resetHistory:S,undo:C,redo:w,setSidebar:T,eventBus:E},children:e})},y="(function(){let e=async e=>{let{width:t,height:n}=e,r=Math.min(1,1920/Math.max(t,n)),i=Math.round(t*r),a=Math.round(n*r),o=new OffscreenCanvas(i,a),s=o.getContext(`2d`);if(!s)throw Error(`Failed to get 2D context for preview canvas`);return s.drawImage(e,0,0,i,a),o.convertToBlob({type:`image/webp`,quality:.85})};function t(e){let t=new OffscreenCanvas(e.width,e.height),n=t.getContext(`2d`);if(!n)throw Error(`Failed to create 2D context for canvas.`);n.drawImage(e,0,0);try{let e=n.getImageData(0,0,t.width,t.height).data;for(let t=3;t<e.length;t+=4)if(e[t]<255)return!0;return!1}catch(e){throw Error(`Error reading pixels: ${e}`,{cause:e})}}self.onmessage=async n=>{let r=``;try{let i;if(n.data instanceof Blob)i=n.data;else{let e=n.data.trim();!e.startsWith(`http://`)&&!e.startsWith(`https://`)&&!e.startsWith(`blob:`)&&!e.startsWith(`data:`)&&(r=`image/png`,e=`data:${r};base64,${e}`);let t=await fetch(e);if(!t.ok)throw Error(`HTTP error! Status: ${t.status}`);i=await t.blob()}let a=i.type||r||`image/unknown`,o=await createImageBitmap(i),{width:s,height:c}=o,l=await e(o),u=t(o);o.close(),self.postMessage({success:!0,originalBlob:i,previewBlob:l,mimeType:a,width:s,height:c,isAlpha:u})}catch(e){self.postMessage({success:!1,error:e instanceof Error?e.message:`An error occurred during image loader worker execution.`})}}})();",b=typeof self<`u`&&self.Blob&&new Blob([`(self.URL || self.webkitURL).revokeObjectURL(self.location.href);`,y],{type:`text/javascript;charset=utf-8`});function x(e){let t;try{if(t=b&&(self.URL||self.webkitURL).createObjectURL(b),!t)throw``;let n=new Worker(t,{name:e?.name});return n.addEventListener(`error`,()=>{(self.URL||self.webkitURL).revokeObjectURL(t)}),n}catch{return new Worker(`data:text/javascript;charset=utf-8,`+encodeURIComponent(y),{name:e?.name})}}var S=({src:e,skip:n=!1})=>{let[r,i]=(0,t.useState)({loading:!n,error:``,width:0,height:0,mimeType:``,originalBlob:null,previewUrl:``,isAlpha:!1}),a=(0,t.useRef)(null);return(0,t.useEffect)(()=>{if(!e||n)return;let t=new x;return t.postMessage(e),t.onmessage=e=>{let t=e.data;t.success?(a.current&&URL.revokeObjectURL(a.current),a.current=URL.createObjectURL(t.previewBlob),i({loading:!1,error:``,mimeType:t.mimeType,width:t.width,height:t.height,originalBlob:t.originalBlob,previewUrl:a.current,isAlpha:t.isAlpha})):i(e=>({...e,loading:!1,error:t.error||`Error processing image.`}))},()=>{t.terminate(),a.current&&=(URL.revokeObjectURL(a.current),null)}},[n,e]),r},C=()=>{if(typeof window>`u`||!window.navigator)return null;let e=window.navigator.userAgent.toLowerCase();return/android/.test(e)?`android`:/iphone|ipad|ipod/.test(e)?`ios`:/windows phone/.test(e)?`windows-phone`:/blackberry|bb10/.test(e)?`blackberry`:/opera mini/.test(e)?`opera-mini`:/mobile/.test(e)?`mobile`:null},w=()=>{let[e]=(0,t.useState)(()=>C());return e};function T(e,n){let[r,i]=(0,t.useState)(!0);return(0,t.useEffect)(()=>{if(!n)return;let t=new ResizeObserver(([t])=>{t&&i(t.contentRect.width<u[e])});return t.observe(n),()=>t.disconnect()},[e,n]),r}var E={xmlns:`http://w3.org`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`},D=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`path`,{d:`M20 6 9 17l-5-5`})}),O=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M18 6 6 18`}),(0,_.jsx)(`path`,{d:`m6 6 12 12`})]}),k=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`rect`,{width:`18`,height:`11`,x:`3`,y:`11`,rx:`2`,ry:`2`}),(0,_.jsx)(`path`,{d:`M7 11V7a5 5 0 0 1 10 0v4`})]}),A=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`m12 19-7-7 7-7`}),(0,_.jsx)(`path`,{d:`M19 12H5`})]}),ee=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`path`,{d:`m6 9 6 6 6-6`})}),j=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M3 7v6h6`}),(0,_.jsx)(`path`,{d:`M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13`})]}),te=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M21 7v6h-6`}),(0,_.jsx)(`path`,{d:`M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7`})]}),M=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M6 2v14a2 2 0 0 0 2 2h14`}),(0,_.jsx)(`path`,{d:`M18 22V8a2 2 0 0 0-2-2H2`})]}),ne=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,ry:`2`}),(0,_.jsx)(`circle`,{cx:`9`,cy:`9`,r:`2`}),(0,_.jsx)(`path`,{d:`m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21`})]}),re=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`})}),ie=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`rect`,{width:`20`,height:`12`,x:`2`,y:`6`,rx:`2`})}),ae=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`rect`,{width:`20`,height:`15`,x:`2`,y:`4.5`,rx:`2`})}),oe=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M3 7V5a2 2 0 0 1 2-2h2`}),(0,_.jsx)(`path`,{d:`M17 3h2a2 2 0 0 1 2 2v2`}),(0,_.jsx)(`path`,{d:`M21 17v2a2 2 0 0 1-2 2h-2`}),(0,_.jsx)(`path`,{d:`M7 21H5a2 2 0 0 1-2-2v-2`}),(0,_.jsx)(`rect`,{width:`10`,height:`8`,x:`7`,y:`8`,rx:`1`})]}),se=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3`}),(0,_.jsx)(`path`,{d:`M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3`}),(0,_.jsx)(`path`,{d:`M12 20v2`}),(0,_.jsx)(`path`,{d:`M12 14v2`}),(0,_.jsx)(`path`,{d:`M12 8v2`}),(0,_.jsx)(`path`,{d:`M12 2v2`})]}),ce=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3`}),(0,_.jsx)(`path`,{d:`M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3`}),(0,_.jsx)(`path`,{d:`M4 12H2`}),(0,_.jsx)(`path`,{d:`M10 12H8`}),(0,_.jsx)(`path`,{d:`M16 12h-2`}),(0,_.jsx)(`path`,{d:`M22 12h-2`})]}),le=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8`}),(0,_.jsx)(`path`,{d:`M21 3v5h-5`})]}),ue=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`}),(0,_.jsx)(`path`,{d:`M3 3v5h5`})]}),de=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`rect`,{width:`7`,height:`7`,x:`3`,y:`3`,rx:`1`}),(0,_.jsx)(`rect`,{width:`7`,height:`7`,x:`3`,y:`14`,rx:`1`}),(0,_.jsx)(`path`,{d:`M14 4h7`}),(0,_.jsx)(`path`,{d:`M14 9h7`}),(0,_.jsx)(`path`,{d:`M14 15h7`}),(0,_.jsx)(`path`,{d:`M14 20h7`})]}),fe=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M10 5H3`}),(0,_.jsx)(`path`,{d:`M12 19H3`}),(0,_.jsx)(`path`,{d:`M14 3v4`}),(0,_.jsx)(`path`,{d:`M16 17v4`}),(0,_.jsx)(`path`,{d:`M21 12h-9`}),(0,_.jsx)(`path`,{d:`M21 19h-5`}),(0,_.jsx)(`path`,{d:`M21 5h-7`}),(0,_.jsx)(`path`,{d:`M8 10v4`}),(0,_.jsx)(`path`,{d:`M8 12H3`})]}),pe=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}),(0,_.jsx)(`path`,{d:`M9 3v18`}),(0,_.jsx)(`path`,{d:`m14 9 3 3-3 3`})]}),me=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}),(0,_.jsx)(`path`,{d:`M9 3v18`}),(0,_.jsx)(`path`,{d:`m16 15-3-3 3-3`})]}),he=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M15 4V2`}),(0,_.jsx)(`path`,{d:`M15 16v-2`}),(0,_.jsx)(`path`,{d:`M8 9h2`}),(0,_.jsx)(`path`,{d:`M20 9h2`}),(0,_.jsx)(`path`,{d:`M17.8 11.8 19 13`}),(0,_.jsx)(`path`,{d:`M15 9h.01`}),(0,_.jsx)(`path`,{d:`M17.8 6.2 19 5`}),(0,_.jsx)(`path`,{d:`m3 21 9-9`}),(0,_.jsx)(`path`,{d:`M12.2 6.2 11 5`})]}),ge=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M12 3v18`}),(0,_.jsx)(`path`,{d:`m16 16 4-4-4-4`}),(0,_.jsx)(`path`,{d:`m8 8-4 4 4 4`})]}),_e=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`path`,{d:`M21 12a9 9 0 1 1-6.219-8.56`,children:(0,_.jsx)(`animateTransform`,{attributeType:`xml`,attributeName:`transform`,type:`rotate`,from:`0 12 12`,to:`360 12 12`,dur:`0.8s`,repeatCount:`indefinite`})})}),N=()=>{let e=(0,t.useContext)(m);if(!e)throw Error(`usePixediContext must be used within an PixediProvider`);return e},P={button:`_button_1vpzl_1`,default:`_default_1vpzl_35`,outline:`_outline_1vpzl_44`,ghost:`_ghost_1vpzl_54`,rect:`_rect_1vpzl_63`},F=({className:e=``,variant:t=`default`,children:n,ref:r,...i})=>(0,_.jsx)(`button`,{ref:r,className:`${P.button} ${P[t]} ${e}`.trim(),...i,children:n}),ve={separator:`_separator_gp8ff_1`},ye=(0,t.forwardRef)(({className:e=``,orientation:t=`horizontal`,...n},r)=>(0,_.jsx)(`hr`,{ref:r,role:`separator`,"aria-orientation":t,"data-orientation":t,className:`${ve.separator} ${e}`.trim(),...n}));ye.displayName=`Separator`;var I={wrapper:`_wrapper_1aw0m_1`,trigger:`_trigger_1aw0m_6`,triggerArrow:`_triggerArrow_1aw0m_31`,content:`_content_1aw0m_40`,groupLabel:`_groupLabel_1aw0m_74`,item:`_item_1aw0m_81`,itemLeft:`_itemLeft_1aw0m_98`,itemAddon:`_itemAddon_1aw0m_102`,itemRightContainer:`_itemRightContainer_1aw0m_122`,itemRight:`_itemRight_1aw0m_122`,itemCheck:`_itemCheck_1aw0m_131`},L={root:`_root_1qifp_8`,textRed:`_textRed_1qifp_78`,bgRed:`_bgRed_1qifp_81`,bgGreen:`_bgGreen_1qifp_84`,textGreen:`_textGreen_1qifp_87`,mask:`_mask_1qifp_90`,semibold:`_semibold_1qifp_93`,bold:`_bold_1qifp_97`,system:`_system_1qifp_101`,wrapper:`_wrapper_1qifp_111`,grid:`_grid_1qifp_118`,mobile:`_mobile_1qifp_130`,gridNoInfobar:`_gridNoInfobar_1qifp_134`},be=e=>{let t=0,n=window.innerHeight;for(let r=e.parentElement;r;r=r.parentElement){let{overflow:e,overflowY:i}=getComputedStyle(r);if(e===`visible`&&i===`visible`)continue;let a=r.getBoundingClientRect();t=Math.max(t,a.top),n=Math.min(n,a.bottom)}return{top:t,bottom:n}},xe=({items:e,value:n,onChange:r})=>{let[i,a]=(0,t.useState)(!1),o=(0,t.useRef)(null),s=(0,t.useRef)(null),c=(0,t.useRef)(null),l=(0,t.useMemo)(()=>{let t=e=>e.reduce((e,n)=>n.options?[...e,...t(n.options.map(e=>({...e,fullName:`${n.label} ${e.label}`})))]:[...e,n],[]);return t(e)},[e]).find(e=>e.value===n),u=l?.fullName??l?.label;return(0,t.useEffect)(()=>{let e=e=>{o.current&&!e.composedPath().includes(o.current)&&a(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]),(0,t.useLayoutEffect)(()=>{let e=o.current,t=s.current,n=c.current;if(!i||!e||!t||!n)return;n.style.removeProperty(`top`),n.style.removeProperty(`max-height`);let{top:r,bottom:a}=be(e),l=e.getBoundingClientRect().top,u=t.getBoundingClientRect(),d=n.offsetHeight,f=a-8-u.bottom-4,p=u.top-4-r-8,m=u.bottom+4,h=0;d>f&&(d<=p?m=u.top-4-d:p>f?(h=Math.max(p,0),m=u.top-4-h):h=Math.max(f,0)),h&&(n.style.maxHeight=`${h}px`),n.style.top=`${m-l}px`},[i,e]),{isOpen:i,selectedLabel:u,containerRef:o,triggerRef:s,contentRef:c,handleSelectItem:e=>{r(e),a(!1)},toggleOpen:()=>a(e=>!e)}},Se=({items:e,value:t,onChange:n,placeholder:r=`Select an option`,className:i=``,renderOption:a})=>{let{isOpen:o,selectedLabel:s,containerRef:c,triggerRef:l,contentRef:u,handleSelectItem:d,toggleOpen:f}=xe({items:e,value:t,onChange:n});return(0,_.jsxs)(`div`,{ref:c,className:`${I.wrapper} ${i}`.trim(),"data-state":o?`open`:`closed`,children:[(0,_.jsxs)(`button`,{ref:l,type:`button`,className:I.trigger,onClick:f,children:[(0,_.jsx)(`span`,{children:s??r}),(0,_.jsx)(ee,{className:I.triggerArrow})]}),(0,_.jsx)(`div`,{ref:u,className:I.content,children:e.map((e,n)=>e.options?(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`div`,{className:`${I.groupLabel} ${L.semibold}`,children:e.label}),e.options.map(e=>(0,_.jsxs)(`div`,{className:I.item,onClick:()=>d(e.value),children:[a?a(e):(0,_.jsx)(`span`,{className:I.itemLeft,children:e.label}),(0,_.jsxs)(`div`,{className:I.itemAddon,children:[e.rightLabel&&(0,_.jsx)(`span`,{children:e.rightLabel}),t===e.value&&(0,_.jsx)(D,{className:I.itemCheck}),t!==e.value&&(0,_.jsx)(`b`,{})]})]},e.value))]},`group-${n}`):(0,_.jsxs)(`div`,{className:I.item,onClick:()=>d(e.value),children:[a?a(e):(0,_.jsx)(`span`,{className:I.itemLeft,children:e.label}),(0,_.jsxs)(`div`,{className:I.itemAddon,children:[e.rightLabel&&(0,_.jsx)(`span`,{children:e.rightLabel}),t===e.value&&(0,_.jsx)(D,{className:I.itemCheck}),t!==e.value&&(0,_.jsx)(`b`,{})]})]},e.value))})]})},Ce={input:`_input_kyavx_1`,numberClean:`_numberClean_kyavx_39`},we=({className:e=``,type:t=`text`,hideArrows:n=!0,ref:r,...i})=>{let a=t===`number`&&n?Ce.numberClean:``;return(0,_.jsx)(`input`,{ref:r,type:t,className:`${Ce.input} ${a} ${e}`.trim(),...i})},Te={container:`_container_14vsv_1`,legend:`_legend_14vsv_4`,suffix:`_suffix_14vsv_13`},Ee=({label:e,className:t=``,style:n,ref:r,...i})=>(0,_.jsxs)(`div`,{className:`${Te.container} ${t}`.trim(),style:n,children:[(0,_.jsx)(`span`,{className:Te.legend,children:e}),(0,_.jsx)(we,{ref:r,type:`number`,...i}),(0,_.jsx)(`span`,{className:Te.suffix,children:`px`})]}),De={group:`_group_1e7jm_1`,save:`_save_1e7jm_6`,close:`_close_1e7jm_13`},R=({onSave:e,onClose:t,saving:n=!1,disabled:r=!1})=>(0,_.jsxs)(`div`,{className:De.group,children:[(0,_.jsx)(F,{variant:`outline`,className:De.save,"aria-label":`Save`,disabled:r||n,onClick:e,children:n?(0,_.jsx)(_e,{}):(0,_.jsx)(D,{})}),(0,_.jsx)(F,{variant:`outline`,className:De.close,"aria-label":`Close`,disabled:n,onClick:t,children:(0,_.jsx)(O,{})})]}),z={sliderContainer:`_sliderContainer_1unyb_1`,disabled:`_disabled_1unyb_11`,sliderThumb:`_sliderThumb_1unyb_17`,sliderTrack:`_sliderTrack_1unyb_22`,sliderRange:`_sliderRange_1unyb_34`,sliderTooltip:`_sliderTooltip_1unyb_58`,hiddenInput:`_hiddenInput_1unyb_86`},Oe=(e,t,n)=>{let r=n-t;return r<=0?0:(e-t)/r*100},ke=new Set([`ArrowDown`,`ArrowLeft`,`ArrowRight`,`ArrowUp`,`End`,`Home`,`PageDown`,`PageUp`]),Ae=({min:e,max:n,value:r,step:i=1,disabled:a=!1,isTooltip:o=!1,unit:s=``,className:c,onChange:l,onInput:u,ref:d})=>{let f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=r??e,[h,g]=(0,t.useState)(m);(0,t.useImperativeHandle)(d,()=>({getValue:()=>h}),[h]);let v=t=>{g(t);let r=Oe(t,e,n);f.current?.style.setProperty(`--slider-progress`,`${r}%`)},y=()=>{!a&&p.current&&l?.(Number(p.current.value))};return(0,t.useLayoutEffect)(()=>{if(!p.current)return;r!==void 0&&(p.current.value=String(r));let t=Number(p.current.value);g(t);let i=Oe(t,e,n);f.current?.style.setProperty(`--slider-progress`,`${i}%`)},[r,e,n]),(0,_.jsxs)(`div`,{ref:f,className:`${z.sliderContainer} ${a?z.disabled:``} ${c||``}`,style:{"--slider-progress":`${Oe(m,e,n)}%`},children:[(0,_.jsxs)(`div`,{className:z.sliderTrack,children:[(0,_.jsx)(`div`,{className:z.sliderRange}),(0,_.jsx)(`div`,{className:z.sliderThumb}),o&&(0,_.jsx)(`div`,{className:z.sliderTooltip,children:`${h}${s}`})]}),(0,_.jsx)(`input`,{ref:p,type:`range`,min:e,max:n,step:i,defaultValue:m,disabled:a,onInput:e=>{let t=Number(e.currentTarget.value);v(t),u?.(t)},onPointerUp:()=>{y()},onKeyUp:e=>{ke.has(e.key)&&y()},className:z.hiddenInput})]})},B={tooltip:`_tooltip_1rdl9_1`,container:`_container_1rdl9_5`,popup:`_popup_1rdl9_19`,animated:`_animated_1rdl9_92`,mask:`_mask_1rdl9_101`,track:`_track_1rdl9_108`,title:`_title_1rdl9_125`},je=(e,n=`top`)=>{let[r,i]=(0,t.useState)(null),[a,o]=(0,t.useState)(null),[s,c]=(0,t.useState)(!1),[l,u]=(0,t.useState)(!1),[d,f]=(0,t.useState)([]),p=(0,t.useRef)(null),m=(0,t.useRef)(null),h=(0,t.useRef)([]),g=n===`left`||n===`right`,_=(0,t.useMemo)(()=>{let n=[];return t.Children.forEach(e,e=>{if((0,t.isValidElement)(e)){let{"data-tooltip":t}=e.props;t&&n.push(t)}}),n},[e]),v=_.join(`\0`),y=_.length;(0,t.useLayoutEffect)(()=>{let e=()=>{let e=h.current.slice(0,y).map(e=>({w:e?.offsetWidth??0,h:e?.offsetHeight??0}));f(t=>t.length===e.length&&t.every((t,n)=>t.w===e[n].w&&t.h===e[n].h)?t:e)};e();let t=m.current;if(!t||typeof ResizeObserver>`u`)return;let n=new ResizeObserver(e);return n.observe(t),()=>n.disconnect()},[v,y]),(0,t.useEffect)(()=>{if(!s||l)return;let e=0,t=requestAnimationFrame(()=>{e=requestAnimationFrame(()=>u(!0))});return()=>{cancelAnimationFrame(t),cancelAnimationFrame(e)}},[s,l]);let b=e=>{let t=e.target.closest(`[data-tooltip]`);if(!t){c(!1);return}let a=t.parentElement;if(!a)return;let l=Array.from(a.children).indexOf(t);if(l===-1||s&&l===r)return;let d=p.current?.getBoundingClientRect();if(!d)return;let f=t.getBoundingClientRect(),m=g?{x:n===`left`?f.left-d.left-4:f.right-d.left+4,y:f.top-d.top+f.height/2}:{x:f.left-d.left+f.width/2,y:n===`top`?f.top-d.top-8:f.bottom-d.top+8};s||u(!1),o(m),i(l),c(!0)},x=()=>c(!1),S=r??0,C=d[S],w=d.slice(0,S).reduce((e,t)=>e+(g?t.h:t.w),0);return{containerRef:p,trackRef:m,titleRefs:h,titles:_,position:n,isVisible:s,isAnimated:l,cssVars:{"--tooltip-x":a?`${a.x}px`:`0px`,"--tooltip-y":a?`${a.y}px`:`0px`,"--tooltip-opacity":s?`1`:`0`,"--tooltip-w":C?.w?`${C.w}px`:`auto`,"--tooltip-h":C?.h?`${C.h}px`:`auto`,"--tooltip-offset":`${w}px`},handleMouseMove:b,handleMouseLeave:x}},V=({children:e,position:t=`top`,className:n=``,classNameTitle:r=``,style:i})=>{let{containerRef:a,trackRef:o,titleRefs:s,titles:c,isAnimated:l,cssVars:u,handleMouseMove:d,handleMouseLeave:f}=je(e,t);return(0,_.jsxs)(`div`,{ref:a,onMouseMove:d,onMouseLeave:f,onBlur:f,className:B.tooltip,style:{...u,...i},children:[(0,_.jsx)(`div`,{"data-position":t,className:`${B.container} ${n}`,children:e}),(0,_.jsx)(`div`,{"aria-hidden":`true`,"data-position":t,className:`${B.popup} ${l?B.animated:``}`,children:(0,_.jsx)(`div`,{className:B.mask,children:(0,_.jsx)(`div`,{ref:o,"data-position":t,className:B.track,children:c.map((e,t)=>(0,_.jsx)(`div`,{ref:e=>{s.current[t]=e},className:`${B.title} ${r}`,children:e},t))})})})]})},Me={surfaceTool:`_surfaceTool_e739m_1`},H=({children:e,className:t=``,ref:n})=>(0,_.jsx)(`div`,{ref:n,className:`${Me.surfaceTool} ${t}`,children:e}),Ne=1920,Pe=.85,Fe=[{label:`Facebook`,value:`facebook`,options:[{value:`facebook-post`,label:`Post`,w:1200,h:630,rightLabel:`1200 x 630`},{value:`facebook-cover`,label:`Cover`,w:851,h:315,rightLabel:`851 x 315`},{value:`facebook-profile`,label:`Profile`,w:170,h:170,rightLabel:`170 x 170`},{value:`facebook-story`,label:`Story`,w:1080,h:1920,rightLabel:`1080 x 1920`}]},{label:`Instagram`,value:`instagram`,options:[{value:`instagram-landscape`,label:`Landscape`,w:1080,h:566,rightLabel:`1080 x 566`},{value:`instagram-portait`,label:`Portait`,w:1080,h:1350,rightLabel:`1080 x 1350`},{value:`instagram-square`,label:`Square`,w:1080,h:1080,rightLabel:`1080 x 1080`},{value:`instagram-story`,label:`Story`,w:1080,h:1920,rightLabel:`1080 x 1920`},{value:`instagram-thumbnail`,label:`Thumbnail`,w:161,h:161,rightLabel:`161 x 161`}]},{label:`LinkedIn`,value:`linkedin`,options:[{value:`linkedin-blog-post`,label:`Blog Post`,w:1200,h:627,rightLabel:`1200 x 627`},{value:`linkedin-cover`,label:`Cover`,w:1128,h:191,rightLabel:`1128 x 191`},{value:`linkedin-profile`,label:`Profile`,w:400,h:400,rightLabel:`400 x 400`}]}],Ie=[{value:`saturate`,label:`Saturate`,min:0,max:200,step:1,unit:`%`,sliderValue:100,rightLabel:`100%`},{value:`grayscale`,label:`Grayscale`,min:0,max:100,step:1,unit:`%`,sliderValue:0,rightLabel:`0%`},{value:`sepia`,label:`Sepia`,min:0,max:100,step:1,unit:`%`,sliderValue:0,rightLabel:`0%`},{value:`invert`,label:`Invert`,min:0,max:100,step:1,unit:`%`,sliderValue:0,rightLabel:`0%`},{value:`hueRotate`,label:`Hue Rotate`,min:0,max:360,step:1,unit:`°`,sliderValue:0,rightLabel:`0°`},{value:`brightness`,label:`Brightness`,min:0,max:200,step:1,unit:`%`,sliderValue:100,rightLabel:`100%`},{value:`contrast`,label:`Contrast`,min:0,max:200,step:1,unit:`%`,sliderValue:100,rightLabel:`100%`}],Le=[{value:`vintage`,label:`Vintage`},{value:`olive-army`,label:`Olive Army`},{value:`warm-sunset`,label:`Warm Sunset`},{value:`sin-city-red`,label:`Sin City Red`},{value:`plastic-wrap`,label:`Plastic Wrap`},{value:`cross-process`,label:`Cross-Processing`},{value:`crt-lines`,label:`CRT Monitor`},{value:`grain`,label:`Grain / Noise`},{value:`emboss`,label:`Emboss Effect`},{value:`x-ray`,label:`X-Ray`}],U=32,Re=(e,t,n,r,i,a,o,s,c,l)=>{let{x:u,y:d,w:f,h:p}=c;if(e){let e=o-c.w-c.x;u+=i-n,u<0&&(u=0),f=o-u-e,f<U&&(f=U,u=o-e-U);let t=s-p-d;d+=a-r,d<0&&(d=0),p=s-d-t,p<U&&(p=U,d=s-t-U)}else{if(t>=1){let e=i-n,r=Math.round(e/t);f-=e,p-=r,u+=e,d+=r}else{let e=a-r,n=Math.round(e*t);f-=n,p-=e,u+=n,d+=e}if(u<0||d<0||f<U||p<U)return l}return{x:u,y:d,w:f,h:p}},ze=(e,t,n,r,i,a,o,s,c,l)=>{let{x:u}=c,{y:d,w:f,h:p}=c;if(e){f+=i-n,f+u>o&&(f=o-u),f<U&&(f=U);let e=s-p-d;d+=a-r,d<0&&(d=0),p=s-d-e,p<U&&(p=U,d=s-e-U)}else{if(t>1){let e=i-n,r=Math.round(e/t);f+=e,p+=r,d-=r}else{let e=a-r,n=Math.round(e*t);f-=n,p-=e,d+=e}if(f+u>o||d<0||f<U||p<U)return l}return{x:u,y:d,w:f,h:p}},Be=(e,t,n,r,i,a,o,s,c,l)=>{let{y:u}=c,{x:d,w:f,h:p}=c;if(e){p+=a-r,p+u>s&&(p=s-u),p<U&&(p=U);let e=o-c.w-c.x;d+=i-n,d<0&&(d=0),f=o-d-e,f<U&&(f=U,d=o-e-U)}else{if(t>=1){let e=i-n,r=Math.round(e/t);f-=e,p-=r,d+=e}else{let e=a-r,n=Math.round(e*t);f+=n,p+=e,d-=n}if(p+u>s||d<0||f<U||p<U)return l}return{x:d,y:u,w:f,h:p}},Ve=(e,t,n,r,i,a,o,s,c,l)=>{let{x:u,y:d}=c,{w:f,h:p}=c;if(e)f+=i-n,f+u>o&&(f=o-u),f<U&&(f=U),p+=a-r,p+d>s&&(p=s-d),p<U&&(p=U);else{if(t>=1){let e=i-n,r=Math.round(e/t);f+=e,p+=r}else{let e=a-r,n=Math.round(e*t);f+=n,p+=e}if(p+d>s||f+u>o||f<U||p<U)return l}return{x:u,y:d,w:f,h:p}},He=(e,t,n,r,i,a,o,s,c)=>{let l=e===`tl`||e===`bl`,u=e===`tl`||e===`tr`,d=c.x+c.w,f=c.y+c.h,p=i-n,m=a-r,h=t>=1?c.w+(l?-p:p):(c.h+(u?-m:m))*t,g=l?d:o-c.x,_=u?f:s-c.y,v=Math.min(g,_*t),y=Math.max(U,U*t),b=Math.min(Math.max(h,y),v),x=b/t;return{x:l?d-b:c.x,y:u?f-x:c.y,w:b,h:x}},Ue=(e,t,n,r,i,a,o,s,c,l,u)=>t?e===`tl`?Re(t,n,r,i,a,o,s,c,l,u):e===`tr`?ze(t,n,r,i,a,o,s,c,l,u):e===`bl`?Be(t,n,r,i,a,o,s,c,l,u):e===`br`?Ve(t,n,r,i,a,o,s,c,l,u):{x:0,y:0,w:0,h:0}:He(e,n,r,i,a,o,s,c,l),W=(e,t,n)=>{let r=.12,i=t/n,a=0,o=0;e===1&&(a=(i>1?n:t)*(1-r*2),o=a),e>1&&(i>e?(o=n*(1-r*2),a=o*e):(a=t*(1-r*2),o=a/e)),e<1&&(i>e?(o=n*(1-r*2),a=o*e):(a=t*(1-r*2),o=a/e));let s=a/t*100,c=o/n*100,l=(t-a)/2/t*100,u=(n-o)/2/n*100;return{x:l,y:u,w:s,h:c,xP:Math.round(l/100*t),yP:Math.round(u/100*n),wP:Math.round(s/100*t),hP:Math.round(c/100*n)}},We=(e,t,n,r)=>{let i=e.w/100*n,a=e.h/100*r;t>=1?a=i/t:i=a*t;let o=i/n*100,s=a/r*100,c=Math.max(o/(100-e.x),s/(100-e.y),1);return o/=c,s/=c,{...e,w:o,h:s}},G=e=>Math.abs(Math.round(e/90))%2==1,Ge=(e,t,n,r)=>G(n)===G(r)?{width:e,height:t}:{width:t,height:e},Ke=async e=>{let{width:t,height:n}=e,r=Math.min(1,Ne/Math.max(t,n)),i=Math.round(t*r),a=Math.round(n*r),o=new OffscreenCanvas(i,a),s=o.getContext(`2d`);if(!s)throw Error(`Failed to get 2D context for preview canvas`);return s.drawImage(e,0,0,i,a),o.convertToBlob({type:`image/webp`,quality:Pe})};function qe(e){let t=new OffscreenCanvas(e.width,e.height),n=t.getContext(`2d`);if(!n)throw Error(`Failed to create 2D context for canvas.`);n.drawImage(e,0,0);try{let e=n.getImageData(0,0,t.width,t.height).data;for(let t=3;t<e.length;t+=4)if(e[t]<255)return!0;return!1}catch(e){throw Error(`Error reading pixels: ${e}`,{cause:e})}}var Je=e=>new Promise((t,n)=>{let r=new FileReader;r.onloadend=()=>{let e=r.result;typeof e==`string`?t(e):n(Error(`Failed to read blob as base64`))},r.onerror=()=>n(r.error??Error(`FileReader error`)),r.readAsDataURL(e)});async function Ye(e){let t=await createImageBitmap(e),n=e.type||`image/png`,r=n===`image/gif`?`image/png`:n,i=document.createElement(`canvas`),a=i.getContext(`2d`,{alpha:!0});i.width=t.width,i.height=t.height,a?.drawImage(t,0,0),t.close();let o=()=>{let e=document.createElement(`canvas`);return e.width=i.width,e.height=i.height,e.getContext(`2d`,{alpha:!0})?.drawImage(i,0,0),e};return{crop:(e,t,n,r)=>{if(!a)return;let s=o();i.width=n,i.height=r,a.clearRect(0,0,n,r),a.drawImage(s,e,t,n,r,0,0,n,r)},flip:(e,t)=>{if(!a)return;let n=o();a.clearRect(0,0,i.width,i.height),a.save(),a.translate(e?i.width:0,t?i.height:0),a.scale(e?-1:1,t?-1:1),a.drawImage(n,0,0),a.restore()},rotate:e=>{if(!a)return;let t=o(),n=e*Math.PI/180,r=Math.abs(Math.sin(n)),s=Math.abs(Math.cos(n));i.width=Math.round(t.width*s+t.height*r),i.height=Math.round(t.width*r+t.height*s),a.clearRect(0,0,i.width,i.height),a.save(),a.translate(i.width/2,i.height/2),a.rotate(n),a.drawImage(t,-t.width/2,-t.height/2),a.restore()},resize:(e,t)=>{if(!a)return;let n=o();i.width=e,i.height=t,a.clearRect(0,0,e,t),a.drawImage(n,0,0,e,t)},filters:e=>{if(!a)return;let t=o(),n=`url`in e?`url(#${e.url})`:Object.entries(e).map(([e,t])=>e===`hueRotate`?`hue-rotate(${t}deg)`:`${e}(${t}%)`).join(` `);a.clearRect(0,0,i.width,i.height),a.filter=n,a.drawImage(t,0,0),a.filter=`none`},get:async e=>{let{quality:t=.85,saveAsWEBP:n=!1}=e,a=n?`image/webp`:r,o=await new Promise((e,o)=>{r===`image/jpeg`||r===`image/webp`||n?i.toBlob(t=>{t?e(t):o(Error(`Failed to encode image as ${a}`))},a,t):i.toBlob(t=>{t?e(t):o(Error(`Failed to encode image as image/png`))},`image/png`)}),s=await createImageBitmap(o),c=await Ke(s),{width:l,height:u}=s,d=qe(s);return s.close(),{newBlob:o,previewBlob:c,mimeType:a,width:l,height:u,isAlpha:d}}}}var K=(e,t,n)=>Math.max(t,Math.min(n,e)),Xe=(e,t)=>[[e[0][0]*t[0][0]+e[0][1]*t[1][0],e[0][0]*t[0][1]+e[0][1]*t[1][1]],[e[1][0]*t[0][0]+e[1][1]*t[1][0],e[1][0]*t[0][1]+e[1][1]*t[1][1]]],Ze=e=>(Math.round(e/90)%4+4)%4*90,Qe=e=>{switch(Ze(e)){case 90:return[[0,-1],[1,0]];case 180:return[[-1,0],[0,-1]];case 270:return[[0,1],[-1,0]];default:return[[1,0],[0,1]]}},$e=(e,t)=>[[e?-1:1,0],[0,t?-1:1]],et=(e,t,n)=>Xe($e(t,n),Qe(-e)),tt=e=>[+(e[0][0]<0||e[0][1]<0),+(e[1][0]<0||e[1][1]<0)],q=(e,t,n)=>{let r=tt(e);return[e[0][0]*t+e[0][1]*n+r[0],e[1][0]*t+e[1][1]*n+r[1]]},nt=e=>{let t=1,n=1,r={x:0,y:0,w:1,h:1},i=0,a=!1,o=!1;for(let s=0;s<e.length;s++){let c=e[s];if(c.action.name===d.INITIAL)t=c.width,n=c.height,r={x:0,y:0,w:1,h:1},i=0,a=!1,o=!1;else if(c.action.name===d.CROP){let e=(c.action.args.x??0)/100,t=(c.action.args.y??0)/100,n=(c.action.args.w??100)/100,s=(c.action.args.h??100)/100,l=et(i,a,o),u=[q(l,e,t),q(l,e+n,t),q(l,e,t+s),q(l,e+n,t+s)],d=Math.min(...u.map(e=>e[0])),f=Math.max(...u.map(e=>e[0])),p=Math.min(...u.map(e=>e[1])),m=Math.max(...u.map(e=>e[1]));r={x:r.x+d*r.w,y:r.y+p*r.h,w:r.w*(f-d),h:r.h*(m-p)}}else if(c.action.name===d.FLIP){let e=G(i),t=e?c.action.args.vertical:c.action.args.horizontal,n=e?c.action.args.horizontal:c.action.args.vertical;t&&(a=!a),n&&(o=!o)}else c.action.name===d.ROTATE&&(i=c.action.args.degrees)}let s=r.w*t,c=r.h*n,l=G(i),u=l?c:s,f=l?s:c,p=e.at(-1)?.width||0,m=e.at(-1)?.height||0,h=e.filter(e=>e.action.name===d.FILTERS).at(-1),g=Object.entries(h?.action.args||{}).map(([e,t])=>e===`url`?`url(#${t})`:e===`hueRotate`?`hue-rotate(${t}deg)`:`${e}(${t}%)`);return{box:r,boxWidth:s,boxHeight:c,newWidth:p,newHeight:m,initWidth:t,initHeight:n,viewWidth:u,viewHeight:f,rotation:i,flipH:a,flipV:o,filters:g}},rt=e=>{let{box:t,flipH:n,flipV:r,rotation:i,newWidth:a,newHeight:o,initWidth:s,initHeight:c,viewWidth:l,viewHeight:u}=nt(e),f=e.filter(e=>e.action.name===d.FILTERS).at(-1)?.action.args,p=K(t.x,0,1),m=K(t.y,0,1),h={x:p,y:m,w:K(t.w,0,1-p),h:K(t.h,0,1-m)},g=Ze(i);return{...h.x===0&&h.y===0&&h.w===1&&h.h===1?{}:{crop:{x:Math.round(s*t.x),y:Math.round(c*t.y),w:Math.round(s*t.w),h:Math.round(c*t.h)}},...g===0?{}:{rotate:{degrees:g}},...n||r?{flip:{horizontal:n,vertical:r}}:{},...Math.round(l)!==a||Math.round(u)!==o?{resize:{width:a,height:o}}:{},...f?{filters:f}:{}}},it=e=>{let[n,r]=(0,t.useState)(!1),{setImage:i,settings:a,history:o,originalBlob:s,setCurrentAction:c,resetHistory:l}=N();return{save:async()=>{if(!s)return;r(!0);let t=rt(o.items.slice(0,o.pointer+1));try{let n=await Ye(s);t.crop&&n.crop(t.crop.x,t.crop.y,t.crop.w,t.crop.h),t.flip&&n.flip(t.flip.horizontal,t.flip.vertical),t.rotate&&n.rotate(t.rotate.degrees),t.resize&&n.resize(t.resize.width,t.resize.height),t.filters&&n.filters(t.filters);let{newBlob:r,previewBlob:o,mimeType:c,width:l,height:u,isAlpha:d}=await n.get(a),f=``;a.exportAs===`base64`&&(f=await Je(r)),await e(f||r),i({newBlob:r,previewBlob:o,mimeType:c,width:l,height:u,isAlpha:d})}catch(e){throw Error(`Error saving image: ${e}`,{cause:e})}finally{r(!1)}},reset:()=>{c(null),l()},isSaving:n}},J={header:`_header_m05h6_1`,left:`_left_m05h6_12`,sidebarToggle:`_sidebarToggle_m05h6_17`,mobile:`_mobile_m05h6_30`,sidebarIcon:`_sidebarIcon_m05h6_34`,tools:`_tools_m05h6_39`,history:`_history_m05h6_43`,historyText:`_historyText_m05h6_48`},at=({onBack:e,onSave:t,isMobile:n})=>{let{save:r,reset:i,isSaving:a}=it(t),{sidebar:o,history:s,undo:c,redo:l,setSidebar:u,setCurrentAction:d}=N(),f=s.items.length>1&&!a,p=s.pointer===0,m=s.pointer===s.items.length-1,h=s.items.length<2||a,g=h||s.pointer===0;return(0,_.jsxs)(`div`,{className:J.header,children:[(0,_.jsxs)(`div`,{className:J.left,children:[(0,_.jsx)(`div`,{className:`${J.sidebarToggle} ${n?J.mobile:``}`,onClick:()=>{u(!o)},children:o?(0,_.jsx)(me,{className:J.sidebarIcon}):(0,_.jsx)(pe,{className:J.sidebarIcon})}),(0,_.jsx)(F,{variant:`ghost`,className:P.rect,onClick:e,children:(0,_.jsx)(A,{})})]}),(0,_.jsxs)(`div`,{className:J.tools,children:[f&&(0,_.jsxs)(`div`,{className:J.history,children:[(0,_.jsx)(F,{variant:`outline`,disabled:p,className:P.rect,onClick:()=>{c(),d(null)},children:(0,_.jsx)(j,{})}),(0,_.jsxs)(`div`,{className:J.historyText,children:[s.pointer+1,`/`,s.items.length]}),(0,_.jsx)(F,{variant:`outline`,disabled:m,className:P.rect,onClick:()=>{l(),d(null)},children:(0,_.jsx)(te,{})})]}),(0,_.jsx)(F,{variant:`outline`,disabled:h,onClick:i,children:`Reset`}),(0,_.jsxs)(F,{disabled:g,onClick:r,children:[a?(0,_.jsx)(_e,{}):(0,_.jsx)(D,{}),`Save`]})]})]})},ot=(e,t)=>{let n=new CustomEvent(`crop-update`,{detail:t});e.dispatchEvent(n)},st=(e,t)=>{let n=new CustomEvent(`clip-path-update`,{detail:t});e.dispatchEvent(n)},ct=(e,t)=>{let n=new CustomEvent(`resize-update`,{detail:t});e.dispatchEvent(n)},Y=(e,t)=>{let n=new CustomEvent(`filter-update`,{detail:t});e.dispatchEvent(n)},lt=(e,t)=>{let n=new CustomEvent(`compare-update`,{detail:t});e.dispatchEvent(n)},ut=()=>{let{showCompare:e,previewUrl:n,getLastFilter:r,getLastHistoryItem:i,setCurrentAction:a,setSidebar:o,toggleCompare:s,addToHistory:c,eventBus:l}=N(),{width:u,height:f}=i(),{action:p}=r()||{},m=p?.args||{},h=m?.url,g=Ie.map(e=>({...e,sliderValue:m[e.value]??e.sliderValue,rightLabel:`${m[e.value]??e.sliderValue}${e.unit}`})),_=g.find(e=>e.value===`saturate`)?.sliderValue,[v,y]=(0,t.useState)(`saturate`),[b,x]=(0,t.useState)(h??`vintage`),[S,C]=(0,t.useState)(g),[w,T]=(0,t.useState)(_??0),[E,D]=(0,t.useState)(!!h),O=(0,t.useMemo)(()=>Object.fromEntries(S.map(e=>[e.value,e.sliderValue])),[S]),k=()=>{s(),lt(l,50)},A=e=>{Y(l,{...O,[v]:e})},ee=S.find(e=>e.value===v);return(0,t.useEffect)(()=>{E?Y(l,{url:b}):Y(l,{...O,[v]:w})},[E,b,w,O,v,l]),{showCompare:e,previewUrl:n,isUrl:E,toggleIsUrl:()=>D(!E),filters:S,selectedFilter:v,selectedFilterItem:ee,selectedUrl:b,sliderValue:w,handleToggleCompare:k,handleSliderInput:A,handleSliderChange:e=>{T(e),C(t=>t.map(t=>t.value===v?{...t,sliderValue:e,rightLabel:`${e}${t.unit}`}:t))},handleChange:e=>{y(e),T(S.find(t=>t.value===e)?.sliderValue||0)},handleChangeWhenUrl:e=>{x(e),Y(l,{url:e})},handleSave:()=>{c({width:u,height:f,action:{name:d.FILTERS,args:{...E?{url:b}:Object.fromEntries(S.map(e=>[e.value,e.sliderValue]))}}}),e&&s(),o(!0)},handleClose:()=>{e&&s(),a(null),o(!0)}}},X={tools:`_tools_5caap_1`,row1:`_row1_5caap_5`,min:`_min_5caap_13`,slider:`_slider_5caap_19`,max:`_max_5caap_23`,row2:`_row2_5caap_29`,select:`_select_5caap_35`,option:`_option_5caap_39`,active:`_active_5caap_50`,filterInteract:`_filterInteract_5caap_55`,compare:`_compare_5caap_70`,compareThumb:`_compareThumb_5caap_88`},dt=()=>{let{showCompare:e,previewUrl:t,isUrl:n,toggleIsUrl:r,filters:i,selectedFilter:a,selectedFilterItem:o,selectedUrl:s,sliderValue:c,handleToggleCompare:l,handleSliderInput:u,handleSliderChange:d,handleChange:f,handleChangeWhenUrl:p,handleSave:m,handleClose:h}=ut();return(0,_.jsxs)(H,{className:X.tools,children:[!n&&o&&(0,_.jsxs)(`div`,{className:X.row1,children:[(0,_.jsxs)(`div`,{className:X.min,children:[o.min,o.unit]}),(0,_.jsx)(Ae,{className:X.slider,min:o.min,max:o.max,step:o.step,value:c,isTooltip:!0,unit:o.unit,onInput:u,onChange:d}),(0,_.jsxs)(`div`,{className:X.max,children:[o.max,o.unit]})]}),(0,_.jsxs)(`div`,{className:X.row2,children:[(0,_.jsx)(V,{position:`top`,children:(0,_.jsx)(F,{variant:`outline`,"aria-label":`Compare`,"data-tooltip":`Compare`,onClick:l,className:e?X.active:``,children:(0,_.jsx)(ge,{})})}),(0,_.jsx)(V,{position:`top`,children:(0,_.jsx)(F,{variant:`outline`,"aria-label":n?`Filters`:`Predefined Filters`,"data-tooltip":n?`Filters`:`Predefined Filters`,onClick:r,children:n?(0,_.jsx)(fe,{}):(0,_.jsx)(he,{})})}),(0,_.jsx)(Se,{items:n?Le:i,value:n?s:a,placeholder:`Select filter`,className:X.select,renderOption:n?e=>(0,_.jsx)(`div`,{className:X.option,children:(0,_.jsx)(`img`,{src:t,alt:e.label,style:{filter:`url(#${e.value})`}})}):void 0,onChange:n?p:f}),(0,_.jsx)(R,{onSave:m,onClose:h})]})]})},ft=({isClipped:e,isFilter:n})=>{let{history:r,previewUrl:i,currentAction:a,getLastRotation:o,eventBus:s}=N(),c=(0,t.useRef)(null),l=(0,t.useRef)(null),u=(0,t.useRef)(a?.name),f=(0,t.useRef)(i);(0,t.useLayoutEffect)(()=>{let e=u.current,t=a?.name,n=f.current!==i;if(u.current=t,f.current=i,!(e&&t&&e!==t)&&!n)return;let r=c.current;if(!r)return;let o=[r,...r.querySelectorAll(`*`)];o.forEach(e=>{e.style.transition=`none`}),r.getBoundingClientRect();let s=()=>{o.forEach(e=>{e.style.removeProperty(`transition`)})},l=requestAnimationFrame(s);return()=>{cancelAnimationFrame(l),s()}},[a?.name,i]);let p=r.items.slice(0,r.pointer+1);if(a){let{width:e,height:t}=r.items.at(r.pointer);p.push({...a.name===d.ROTATE?Ge(e,t,o(),a.args.degrees):{width:e,height:t},action:a})}let m=nt(p);return(0,t.useEffect)(()=>{e&&c.current&&(c.current.style.transition=`none`),a?.name!==d.RESIZE&&c.current&&(c.current.style.transform=`scale(1)`);let t=e=>{let t=e.detail;c.current&&(c.current.style.transform=`scale(${t/100})`)},r=t=>{if(!e)return;let{x:n,y:r,w:i,h:a}=t.detail;c.current&&(c.current.style.clipPath=`xywh(${n}% ${r}% ${i}% ${a}%)`)},i=e=>{if(!n)return;let t=e.detail;if(l.current)if(t.url)l.current.style.filter=`url(#${t.url})`;else{let e=Object.entries(t).map(([e,t])=>e===`hueRotate`?`hue-rotate(${t}deg)`:`${e}(${t}%)`).join(` `);l.current.style.filter=e}},o=e=>{if(!n)return;let t=e.detail;c.current&&(c.current.style.clipPath=`xywh(${t}% 0% ${100-t}% 100%)`)},u=new AbortController,{signal:f}=u;return s.addEventListener(`resize-update`,t,{signal:f}),s.addEventListener(`clip-path-update`,r,{signal:f}),s.addEventListener(`filter-update`,i,{signal:f}),s.addEventListener(`compare-update`,o,{signal:f}),()=>u.abort()},[e,n,a?.name,s]),{previewRef:c,imageRef:l,previewUrl:i,...m}},Z={preview:`_preview_t77n1_1`,faded:`_faded_t77n1_13`,rotate:`_rotate_t77n1_19`,flip:`_flip_t77n1_31`,image:`_image_t77n1_39`,label:`_label_t77n1_49`,before:`_before_t77n1_67`,after:`_after_t77n1_71`},pt=({isClipped:e,isFilter:t,faded:n,style:r={}})=>{let{showCompare:i}=N(),{previewRef:a,imageRef:o,previewUrl:s,box:c,boxWidth:l,boxHeight:u,viewWidth:d,viewHeight:f,rotation:p,flipH:m,flipV:h,filters:g}=ft({isClipped:e,isFilter:t});return(0,_.jsxs)(`div`,{ref:a,className:`${Z.preview} ${n?Z.faded:``}`,style:{aspectRatio:`${d} / ${f}`,...r},children:[i&&!t&&(0,_.jsx)(`div`,{className:`${Z.label} ${Z.before}`,children:`Before`}),i&&t&&(0,_.jsx)(`div`,{className:`${Z.label} ${Z.after}`,children:`After`}),(0,_.jsx)(`div`,{className:Z.rotate,style:{width:`${l/d*100}%`,height:`${u/f*100}%`,transform:`translate(-50%, -50%) rotate(${p}deg)`},children:(0,_.jsx)(`div`,{className:Z.flip,style:{transform:`scale(${m?-1:1}, ${h?-1:1})`},children:(0,_.jsx)(`img`,{ref:o,className:Z.image,src:s,alt:`Preview Image`,style:{width:`${1/c.w*100}%`,height:`${1/c.h*100}%`,left:`${-(c.x/c.w)*100}%`,top:`${-(c.y/c.h)*100}%`,filter:g.join(` `)}})})})]})},mt=({compareRef:e})=>{let{eventBus:n}=N(),r=w(),i=(0,t.useRef)(null),a=(0,t.useRef)(null);return(0,t.useEffect)(()=>{a.current=0,lt(n,0)},[n]),(0,t.useEffect)(()=>{let t=t=>{if(!e.current||!i.current)return;t.preventDefault();let r=e.current.parentElement;if(!r)return;let o=`clientX`in t?t.clientX:t.touches[0].clientX,{width:s,left:c}=r.getBoundingClientRect(),l=Math.min(Math.max(o-c,0),s)/s*100;a.current=l,e.current.style.left=`${l}%`,lt(n,l)},r=()=>{e.current&&(i.current=null,document.body.style.cursor=`auto`)},o=new AbortController,{signal:s}=o;return document.addEventListener(`mousemove`,t,{signal:s}),document.addEventListener(`touchmove`,t,{signal:s,passive:!1}),document.addEventListener(`mouseup`,r,{signal:s}),document.addEventListener(`touchend`,r,{signal:s}),()=>o.abort()},[e,n]),{handleDragStart:t=>{if(!e.current)return;t.stopPropagation(),t.preventDefault(),i.current=a.current;let n=`clientX`in t?t.clientX:t.touches[0].clientX;i.current=n,r||(document.body.style.cursor=`pointer`)}}},ht=()=>{let{showCompare:e,getLastHistoryItem:n}=N(),{width:r,height:i}=n(),a=(0,t.useRef)(null),{handleDragStart:o}=mt({compareRef:a});return(0,_.jsxs)(`div`,{className:X.filterInteract,style:{aspectRatio:`${r} / ${i}`},children:[(0,_.jsx)(pt,{isFilter:!0}),e&&(0,_.jsx)(_.Fragment,{children:(0,_.jsx)(`div`,{ref:a,className:X.compare,style:{left:`50%`},children:(0,_.jsx)(`div`,{className:X.compareThumb,onMouseDown:o,onTouchStart:o,children:(0,_.jsx)(ge,{})})})})]})},gt=()=>({saturate:100,grayscale:0,sepia:0,invert:0,hueRotate:0,brightness:100,contrast:100}),_t={[d.RESIZE]:{icon:(0,_.jsx)(oe,{}),label:`Resize`},[d.CROP]:{icon:(0,_.jsx)(M,{}),label:`Crop`},[d.PRESET_CROP]:{icon:(0,_.jsx)(de,{}),label:`Presets`},[d.FLIP]:{icon:(0,_.jsx)(se,{}),label:`Flip`},[d.ROTATE]:{icon:(0,_.jsx)(le,{}),label:`Rotate`},[d.FILTERS]:{icon:(0,_.jsx)(fe,{}),label:`Filters`}},vt=e=>_t[e]??null,yt=()=>{let{settings:e,currentAction:t,showCompare:n,toggleCompare:r,getLastRotation:i,getLastHistoryItem:a,setCurrentAction:o,setSidebar:s}=N(),c=e?.tools||[],l=t?.name,{width:u,height:f}=a();return{click:e=>{if(c.includes(e)&&l===e){o(null);return}switch(e){case d.RESIZE:o({name:d.RESIZE,args:{width:u,height:f}});break;case d.CROP:o({name:d.CROP,args:{id:`freeform`,ratio:u/f,isFree:!0}});break;case d.PRESET_CROP:o({name:d.PRESET_CROP,args:{id:`facebook-post`,ratio:1200/630,isFree:!1,preset:{width:1200,height:630}}});break;case d.FLIP:o({name:d.FLIP,args:{horizontal:!1,vertical:!1}});break;case d.ROTATE:o({name:d.ROTATE,args:{degrees:i()}});break;case d.FILTERS:o({name:d.FILTERS,args:gt()});break}n&&r(),s(!1)}}},Q={sidebar:`_sidebar_1lx29_1`,mobile:`_mobile_1lx29_10`,open:`_open_1lx29_15`,wrapper:`_wrapper_1lx29_20`,item:`_item_1lx29_24`,selected:`_selected_1lx29_43`},bt=({isMobile:e})=>{let{settings:t,sidebar:n,currentAction:r}=N(),i=t?.tools||[],a=r?.name,{click:o}=yt();return(0,_.jsx)(`nav`,{className:`${Q.sidebar} ${e?Q.mobile:``} ${e&&n?Q.open:``}`,children:(0,_.jsx)(V,{position:`right`,className:Q.tooltip,children:i.map(e=>{let t=vt(e);if(!t)return null;let{icon:n,label:r}=t;return(0,_.jsx)(`div`,{className:`${Q.item} ${a===e?Q.selected:``}`,onClick:()=>o(e),"data-tooltip":r,"aria-label":r,children:n},e)})})})},xt={infobar:`_infobar_895qe_1`},St=e=>e<1024?`${e} B`:e<1024*1024?`${(e/1024).toFixed(2)} KB`:`${(e/1024/1024).toFixed(2)} MB`,Ct=()=>{let{originalBlob:e,getLastHistoryItem:t}=N(),{width:n,height:r}=t();return(0,_.jsxs)(`div`,{className:xt.infobar,children:[(0,_.jsx)(`div`,{className:xt.filesize,children:e?St(e.size):`0 B`}),(0,_.jsxs)(`div`,{className:xt.sizes,children:[n,` / `,r]})]})},wt=15,Tt=200,Et=2,Dt=(e,t,n)=>{let r=Math.min(Tt,Math.max(wt,e));return{scale:r,width:Math.round(r/100*t),height:Math.round(r/100*n)}},Ot=()=>{let{getLastHistoryItem:e,setCurrentAction:n,addToHistory:r,setSidebar:i,eventBus:a}=N(),{width:o,height:s}=e(),[c,l]=(0,t.useState)(o),[u,f]=(0,t.useState)(s),[p,m]=(0,t.useState)(100),h=(0,t.useRef)(p),g=(0,t.useRef)(0),_=(0,t.useRef)(null),v=(0,t.useCallback)(e=>{let t=Dt(e,o,s);l(t.width),f(t.height),m(t.scale),h.current=t.scale,ct(a,t.scale)},[s,o,a]),y=(e,t)=>{let n=Number.parseInt(e,10);if(!Number.isFinite(n)){v(100);return}v(n/t*100)};return(0,t.useEffect)(()=>{let e=e=>{let t=_.current?.parentElement;return e.target instanceof Node&&!!t?.contains(e.target)},t=t=>{e(t)&&v(h.current-Math.sign(t.deltaY)*Et)},n=t=>{e(t)&&(g.current=t.touches[0].clientY)},r=t=>{if(!e(t))return;let n=t.touches[0].clientY,r=g.current-n;Math.abs(r)<10||(v(h.current+Math.sign(r)*Et),g.current=n)},i=new AbortController,{signal:a}=i;return window.addEventListener(`wheel`,t,{signal:a}),window.addEventListener(`touchstart`,n,{signal:a}),window.addEventListener(`touchmove`,r,{signal:a}),()=>i.abort()},[v]),{resizeRef:_,width:c,height:u,scale:p,currentWidth:o,currentHeight:s,setWidth:l,setHeight:f,handleWidthBlur:e=>{y(e.target.value,o)},handleHeightBlur:e=>{y(e.target.value,s)},save:()=>{r({width:c,height:u,action:{name:d.RESIZE,args:{width:c,height:u}}}),ct(a,100),i(!0)},close:()=>{ct(a,100),n(null),i(!0)}}},kt={resize:`_resize_1sbig_1`,toolsLock:`_toolsLock_1sbig_5`,indicatorWrapper:`_indicatorWrapper_1sbig_10`,indicator:`_indicator_1sbig_10`},At=()=>{let{resizeRef:e,width:t,height:n,scale:r,currentWidth:i,currentHeight:a,setWidth:o,setHeight:s,handleWidthBlur:c,handleHeightBlur:l,save:u,close:d}=Ot();return(0,_.jsxs)(H,{ref:e,className:kt.resize,children:[(0,_.jsx)(`div`,{className:kt.indicatorWrapper,children:(0,_.jsx)(`div`,{className:kt.indicator,style:{width:`${r/2}%`}})}),(0,_.jsx)(Ee,{value:t,name:`width`,label:`Width`,style:{width:`88px`},onChange:e=>o(Number(e.target.value)),onBlur:c}),(0,_.jsx)(k,{className:kt.toolsLock}),(0,_.jsx)(Ee,{value:n,name:`height`,label:`Height`,style:{width:`88px`},onChange:e=>s(Number(e.target.value)),onBlur:l}),(0,_.jsx)(R,{onSave:u,onClose:d,disabled:t===i&&n===a})]})},$={wrapper:`_wrapper_1co2u_1`,box:`_box_1co2u_9`,toolsInfo:`_toolsInfo_1co2u_18`,toolsInfoLabel:`_toolsInfoLabel_1co2u_25`,toolsInfoValue:`_toolsInfoValue_1co2u_30`,linesBox:`_linesBox_1co2u_35`,line:`_line_1co2u_35`,lineV:`_lineV_1co2u_45`,lineH:`_lineH_1co2u_53`,pointer:`_pointer_1co2u_61`,pointerTopLeft:`_pointerTopLeft_1co2u_67`,pointerTopRight:`_pointerTopRight_1co2u_74`,pointerBottomRight:`_pointerBottomRight_1co2u_81`,pointerBottomLeft:`_pointerBottomLeft_1co2u_88`,mobileBorder:`_mobileBorder_1co2u_95`,mobilePointer:`_mobilePointer_1co2u_101`,info:`_info_1co2u_112`,infoX:`_infoX_1co2u_129`,infoY:`_infoY_1co2u_134`,infoW:`_infoW_1co2u_141`,infoH:`_infoH_1co2u_146`,group:`_group_1co2u_153`,active:`_active_1co2u_162`},jt=()=>{let{getLastHistoryItem:e}=N(),n=w(),r=(0,t.useRef)(null),{handleCropStart:i,initialCrop:a}=Ut({boxRef:r}),{width:o,height:s}=e(),{x:c,y:l,w:u,h:d}=a;return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(pt,{isClipped:!0,style:{clipPath:`xywh(${c}% ${l}% ${u}% ${d}%)`}}),(0,_.jsx)(`div`,{className:$.wrapper,style:{aspectRatio:`${o} / ${s}`},children:(0,_.jsxs)(`div`,{ref:r,className:$.box,style:{width:`${u}%`,height:`${d}%`,top:`${l}%`,left:`${c}%`},children:[(0,_.jsx)(It,{}),n?(0,_.jsx)(Wt,{onMouseDown:i}):(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(Lt,{onMouseDown:i}),(0,_.jsx)(Gt,{})]})]})})]})},Mt=[{id:`freeform`,icon:(0,_.jsx)(M,{}),label:`Freeform`},{id:`origin`,icon:(0,_.jsx)(ne,{}),label:`Original`},{id:`1:1`,icon:(0,_.jsx)(re,{}),label:`1 : 1`},{id:`4:3`,icon:(0,_.jsx)(ae,{}),label:`4 : 3`},{id:`16:9`,icon:(0,_.jsx)(ie,{}),label:`16 : 9`}],Nt=({value:e,onChange:t})=>(0,_.jsx)(`div`,{className:$.group,children:(0,_.jsx)(V,{position:`top`,children:Mt.map(n=>(0,_.jsx)(F,{variant:`outline`,className:`${$.groupBtn} ${e===n.id?$.active:``}`,onClick:()=>t(n.id),"aria-label":n.label,"data-tooltip":n.label,children:n.icon},n.id))})}),Pt=()=>{let{setCurrentAction:e,currentAction:n,getLastHistoryItem:r,addToHistory:i,setSidebar:a,eventBus:o}=N(),{width:s,height:c}=r(),{name:l,args:u}=n||{},f=l===d.CROP?u?.id:``,p=s/c,m=(0,t.useRef)({x:0,y:0,w:0,h:0});return(0,t.useEffect)(()=>{if(n?.name!==d.CROP)return;let e=W(n.args.ratio,s,c);m.current=e;let t=e=>{m.current=e.detail};return o.addEventListener(`clip-path-update`,t),()=>{o.removeEventListener(`clip-path-update`,t)}},[n,s,c,o]),{currentValue:f,handleChange:t=>{t!==f&&e({name:d.CROP,args:{id:t,ratio:/^\d+:\d+$/.test(t)?t.split(`:`).map(Number).reduce((e,t)=>e/t):p,isFree:t===`freeform`}})},handleSave:()=>{if(!n||n.name!==d.CROP)return;let e=n.args?.preset?.width||Math.round(s*m.current.w/100),t=n.args?.preset?.height||Math.round(c*m.current.h/100);i({width:e,height:t,action:{name:d.CROP,args:{...n.args,...m.current}}}),a(!0)},handleClose:()=>{e(null),a(!0)}}},Ft=()=>{let{currentValue:e,handleChange:t,handleSave:n,handleClose:r}=Pt();return(0,_.jsxs)(H,{children:[(0,_.jsx)(Nt,{value:e,onChange:t}),(0,_.jsx)(R,{onSave:n,onClose:r})]})},It=()=>(0,_.jsxs)(`div`,{className:$.linesBox,children:[(0,_.jsx)(`span`,{className:`${$.line} ${$.lineV}`}),(0,_.jsx)(`span`,{className:`${$.line} ${$.lineH}`})]}),Lt=({onMouseDown:e})=>(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`div`,{className:`${$.pointer} ${$.pointerTopLeft}`,onMouseDown:t=>e(t,`tl`,`nwse`)}),(0,_.jsx)(`div`,{className:`${$.pointer} ${$.pointerTopRight}`,onMouseDown:t=>e(t,`tr`,`nesw`)}),(0,_.jsx)(`div`,{className:`${$.pointer} ${$.pointerBottomRight}`,onMouseDown:t=>e(t,`br`,`nwse`)}),(0,_.jsx)(`div`,{className:`${$.pointer} ${$.pointerBottomLeft}`,onMouseDown:t=>e(t,`bl`,`nesw`)})]});function Rt(e,t,n){return Math.min(Math.max(e,t),n)}function zt(e,{x:t,y:n,w:r,h:i}){e.style.left=`${t}%`,e.style.top=`${n}%`,e.style.width=`${r}%`,e.style.height=`${i}%`}function Bt(e){let{width:t,height:n}=e.getBoundingClientRect();return{frameW:t,frameH:n}}function Vt({x:e,y:t,w:n,h:r},i,a){return{x:e/100*i,y:t/100*a,w:n/100*i,h:r/100*a}}function Ht({x:e,y:t,w:n,h:r},i,a){return{x:e/i*100,y:t/a*100,w:n/i*100,h:r/a*100}}var Ut=({boxRef:e})=>{let{currentAction:n,getLastHistoryItem:r,eventBus:i}=N(),a=w(),{width:o,height:s}=r(),c=n?.name===d.CROP||n?.name===d.PRESET_CROP,l=c?n.args.ratio:1,u=!c||n.args.isFree,f=(0,t.useMemo)(()=>W(l,o,s),[l,o,s]),p=(0,t.useRef)(null),m=(0,t.useRef)(``),h=(0,t.useRef)(f),g=(0,t.useRef)(f);return(0,t.useEffect)(()=>{h.current=f,st(i,f)},[f,i]),(0,t.useEffect)(()=>{let t=(e,t)=>{h.current=t,zt(e,t),ot(i,{x:Math.round(t.x/100*o),y:Math.round(t.y/100*s),w:Math.round(t.w/100*o),h:Math.round(t.h/100*s)}),st(i,t)},n=e=>{e.preventDefault(),g.current=h.current;let t=`clientX`in e?e.clientX:e.touches[0].clientX,n=`clientY`in e?e.clientY:e.touches[0].clientY;p.current={x:t,y:n},document.body.style.cursor=`move`},r=t=>{if(!e.current||!p.current)return;t.preventDefault();let n=e.current,r=n.parentElement;if(!r)return;let{frameW:i,frameH:o}=Bt(r);if(m.current){a(t,n,i,o);return}c(t,n,i,o)},a=(e,n,r,i)=>{if(!p.current)return;let a=`clientX`in e?e.clientX:e.touches[0].clientX,c=`clientY`in e?e.clientY:e.touches[0].clientY,d=Ht(Ue(m.current,u,l,p.current.x,p.current.y,a,c,r,i,Vt(g.current,r,i),Vt(h.current,r,i)),r,i);t(n,u?d:We(d,l,o,s))},c=(e,n,r,i)=>{if(!p.current)return;let{x:a,y:o,w:s,h:c}=g.current,l=`clientX`in e?e.clientX:e.touches[0].clientX,u=`clientY`in e?e.clientY:e.touches[0].clientY,d=(l-p.current.x)/r*100,f=(u-p.current.y)/i*100;t(n,{x:Rt(a+d,0,Math.max(0,100-s)),y:Rt(o+f,0,Math.max(0,100-c)),w:s,h:c})},d=()=>{e.current&&(p.current=null,m.current=``,e.current.style.cursor=`move`,document.body.style.cursor=`auto`)};if(!e.current)return;let f=new AbortController,{signal:_}=f;return e.current.addEventListener(`mousedown`,n,{signal:_}),e.current.addEventListener(`touchstart`,n,{signal:_,passive:!1}),document.addEventListener(`mousemove`,r,{signal:_}),document.addEventListener(`touchmove`,r,{signal:_,passive:!1}),document.addEventListener(`mouseup`,d,{signal:_}),document.addEventListener(`touchend`,d,{signal:_}),()=>f.abort()},[u,l,o,s,e,i]),{handleCropStart:(t,n,r)=>{if(!e.current)return;t.stopPropagation(),t.preventDefault(),g.current=h.current;let i=`clientX`in t?t.clientX:t.touches[0].clientX,o=`clientY`in t?t.clientY:t.touches[0].clientY;p.current={x:i,y:o},m.current=n,a||(e.current.style.cursor=`${r}-resize`,document.body.style.cursor=`${r}-resize`)},initialCrop:f}},Wt=({onMouseDown:e})=>(0,_.jsx)(`div`,{className:$.mobileBorder,children:(0,_.jsx)(`div`,{className:$.mobilePointer,onTouchStart:t=>e(t,`br`,`nwse`)})}),Gt=()=>{let e=(0,t.useRef)(null),n=(0,t.useRef)(null),r=(0,t.useRef)(null),i=(0,t.useRef)(null),{currentAction:a,getLastHistoryItem:o,eventBus:s}=N(),{width:c,height:l}=o();return(0,t.useEffect)(()=>{if(!(a?.name===d.CROP||a?.name===d.PRESET_CROP))return;let{xP:t,yP:o,wP:u,hP:f}=W(a.args.ratio,c,l);e.current&&(e.current.textContent=t.toString()),n.current&&(n.current.textContent=o.toString()),r.current&&(r.current.textContent=u.toString()),i.current&&(i.current.textContent=f.toString());let p=t=>{let{x:a,y:o,w:s,h:c}=t.detail;e.current&&(e.current.textContent=a.toString()),n.current&&(n.current.textContent=o.toString()),r.current&&(r.current.textContent=s.toString()),i.current&&(i.current.textContent=c.toString())};return s.addEventListener(`crop-update`,p),()=>{s.removeEventListener(`crop-update`,p)}},[a,l,c,s]),(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`div`,{className:`${$.info} ${$.infoX}`,children:(0,_.jsx)(`b`,{ref:e})}),(0,_.jsx)(`div`,{className:`${$.info} ${$.infoY}`,children:(0,_.jsx)(`b`,{ref:n})}),(0,_.jsx)(`div`,{className:`${$.info} ${$.infoW}`,children:(0,_.jsx)(`b`,{ref:r})}),(0,_.jsx)(`div`,{className:`${$.info} ${$.infoH}`,children:(0,_.jsx)(`b`,{ref:i})})]})},Kt=Fe.map(e=>e.options).flat(),qt=()=>Kt,Jt=()=>{let{currentAction:e,getLastHistoryItem:n,addToHistory:r,setSidebar:i,setCurrentAction:a,eventBus:o}=N(),{width:s,height:c}=n(),l=e?.name===d.PRESET_CROP&&Kt.some(t=>t.value===e.args.id)?e.args.id:``,u=(0,t.useRef)({x:0,y:0,w:0,h:0});return(0,t.useEffect)(()=>{if(e?.name!==d.PRESET_CROP)return;let t=W(e.args.ratio,s,c);u.current=t;let n=e=>{u.current=e.detail};return o.addEventListener(`clip-path-update`,n),()=>{o.removeEventListener(`clip-path-update`,n)}},[e,s,c,o]),{currentValue:l,presetsData:Fe,handleChange:e=>{if(!e)return;let t=qt().find(t=>t.value===e);if(!t)return;let n={id:e,ratio:t.w/t.h,isFree:!1,preset:{width:t.w,height:t.h}};a({name:d.PRESET_CROP,args:n})},handleSave:()=>{!e||e.name!==d.PRESET_CROP||(r({width:e.args?.preset?.width||0,height:e.args?.preset?.height||0,action:{name:d.CROP,args:{...e.args,...u.current}}}),i(!0))},handleClose:()=>{a(null),i(!0)}}},Yt={select:`_select_1ieak_1`},Xt=()=>{let{currentValue:e,presetsData:t,handleChange:n,handleSave:r,handleClose:i}=Jt();return(0,_.jsxs)(H,{children:[(0,_.jsx)(Se,{value:e,placeholder:`Select preset`,onChange:n,items:t,className:Yt.select}),(0,_.jsx)(R,{onSave:r,onClose:i})]})},Zt=()=>{let{getLastHistoryItem:e,setCurrentAction:n,addToHistory:r,setSidebar:i}=N(),{width:a,height:o}=e(),[s,c]=(0,t.useState)(!1),[l,u]=(0,t.useState)(!1),f=(e,t)=>{n({name:d.FLIP,args:{horizontal:e,vertical:t}})};return{flipHorizontal:s,flipVertical:l,handleFlipHorizontal:()=>{let e=!s;c(e),f(e,l)},handleFlipVertical:()=>{let e=!l;u(e),f(s,e)},handleSave:()=>{r({width:a,height:o,action:{name:d.FLIP,args:{horizontal:s,vertical:l}}}),i(!0)},handleClose:()=>{n(null),i(!0)}}},Qt={btnH:`_btnH_15adi_1`,btnV:`_btnV_15adi_7`},$t=()=>{let{flipHorizontal:e,flipVertical:t,handleFlipHorizontal:n,handleFlipVertical:r,handleSave:i,handleClose:a}=Zt();return(0,_.jsxs)(H,{children:[(0,_.jsx)(`div`,{className:Qt.scGroup,children:(0,_.jsxs)(V,{position:`top`,children:[(0,_.jsx)(F,{variant:`outline`,className:Qt.btnH,onClick:n,"aria-label":`Horizontal`,"data-tooltip":`Horizontal`,children:(0,_.jsx)(se,{style:{color:e?`var(--accent-blue)`:`var(--foreground)`}})}),(0,_.jsx)(F,{variant:`outline`,className:Qt.btnV,onClick:r,"aria-label":`Vertical`,"data-tooltip":`Vertical`,children:(0,_.jsx)(ce,{style:{color:t?`var(--accent-blue)`:`var(--foreground)`}})})]})}),(0,_.jsx)(R,{disabled:!e&&!t,onSave:i,onClose:a})]})},en=()=>{let{getLastRotation:e,getLastHistoryItem:n,addToHistory:r,setSidebar:i,setCurrentAction:a}=N(),{width:o,height:s}=n(),c=e(),l=(0,t.useRef)(c),u=(0,t.useRef)(c);return{handleRotate:e=>{u.current+=e,a({name:d.ROTATE,args:{degrees:u.current}})},handleSave:()=>{r({...Ge(o,s,l.current,u.current),action:{name:d.ROTATE,args:{degrees:u.current}}}),i(!0)},handleClose:()=>{a(null),i(!0)}}},tn={btnH:`_btnH_15adi_1`,btnV:`_btnV_15adi_7`},nn=()=>{let{handleRotate:e,handleSave:t,handleClose:n}=en();return(0,_.jsxs)(H,{children:[(0,_.jsx)(`div`,{className:tn.scGroup,children:(0,_.jsxs)(V,{position:`top`,children:[(0,_.jsx)(F,{variant:`outline`,className:tn.btnH,onClick:()=>e(90),"aria-label":`+90°`,"data-tooltip":`+90°`,children:(0,_.jsx)(le,{})}),(0,_.jsx)(F,{variant:`outline`,className:tn.btnV,onClick:()=>e(-90),"aria-label":`-90°`,"data-tooltip":`-90°`,children:(0,_.jsx)(ue,{})})]})}),(0,_.jsx)(R,{onSave:t,onClose:n})]})},rn={frame:`_frame_1p6kh_1`},an=()=>{let{currentAction:e}=N(),t=e?.name===d.RESIZE,n=e?.name===d.CROP,r=e?.name===d.PRESET_CROP,i=e?.name===d.FLIP,a=e?.name===d.ROTATE,o=e?.name===d.FILTERS,s=n||r;return(0,_.jsxs)(`div`,{className:`${rn.frame} ${s?L.mask:``}`,children:[(0,_.jsx)(pt,{faded:s}),t&&(0,_.jsx)(At,{}),n&&(0,_.jsx)(Ft,{}),r&&(0,_.jsx)(Xt,{}),i&&(0,_.jsx)($t,{}),a&&(0,_.jsx)(nn,{}),o&&(0,_.jsx)(dt,{}),(n||r)&&(0,_.jsx)(jt,{},e?.args?.id),o&&(0,_.jsx)(ht,{})]})},on=()=>(0,_.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0,overflow:`hidden`},xmlns:`http://www.w3.org/2000/svg`,children:(0,_.jsxs)(`defs`,{children:[(0,_.jsx)(`filter`,{id:`vintage`,children:(0,_.jsx)(`feColorMatrix`,{type:`matrix`,values:`
+  <%s key={someKey} {...props} />`,o,p,m,p),ie[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,ee=Array.isArray,j=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var te,M={},ne=m.react_stack_bottom_frame.bind(m,o)(),re=j(i(o)),ie={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):ne,r?j(i(e)):re)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):ne,r?j(i(e)):re)}})()})),_=c(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=h():t.exports=g()}))(),v=({children:e,mimeType:n,width:r,height:i,originalBlob:a,previewUrl:o,isAlpha:s,settings:c})=>{let[l,u]=(0,t.useState)(p(n,r,i,a,o,s,c)),f=(0,t.useRef)(null);(0,t.useEffect)(()=>()=>{f.current&&=(URL.revokeObjectURL(f.current),null)},[]);let h=e=>u(t=>({...t,currentAction:e})),g=e=>u(t=>{let n=t.history.pointer+1,r=[...t.history.items.slice(0,n),e];return{...t,currentAction:null,history:{items:r,pointer:n}}}),v=()=>u(e=>({...e,showCompare:!e.showCompare})),y=()=>{let{items:e,pointer:t}=l.history;return e.at(t)??e.at(0)??{width:0,height:0,action:{name:d.INITIAL,args:null}}},b=()=>{let{items:e,pointer:t}=l.history;return e.filter((e,n)=>n<=t&&e.action.name===d.FILTERS).at(-1)??null},x=()=>{let{items:e,pointer:t}=l.history;if(e.length===0||t<0)return 0;let n=e.slice(0,t+1).findLast(e=>e.action.name===d.ROTATE);return n?.action.name===d.ROTATE?n.action.args.degrees:0},S=()=>u(e=>({...e,history:{items:[e.history.items[0]],pointer:0}})),C=()=>u(e=>e.history.pointer<=0?e:{...e,history:{...e.history,pointer:e.history.pointer-1}}),w=()=>u(e=>e.history.pointer>=e.history.items.length-1?e:{...e,history:{...e.history,pointer:e.history.pointer+1}}),T=e=>u(t=>({...t,sidebar:e})),E=(0,t.useMemo)(()=>new EventTarget,[]),D=e=>{f.current&&URL.revokeObjectURL(f.current),f.current=URL.createObjectURL(e.previewBlob),u(p(e.mimeType,e.width,e.height,e.newBlob,f.current,e.isAlpha,c))};return(0,_.jsx)(m,{value:{...l,setImage:D,setCurrentAction:h,toggleCompare:v,getLastHistoryItem:y,getLastRotation:x,getLastFilter:b,addToHistory:g,resetHistory:S,undo:C,redo:w,setSidebar:T,eventBus:E},children:e})},y="(function(){let e=async e=>{let{width:t,height:n}=e,r=Math.min(1,1920/Math.max(t,n)),i=Math.round(t*r),a=Math.round(n*r),o=new OffscreenCanvas(i,a),s=o.getContext(`2d`);if(!s)throw Error(`Failed to get 2D context for preview canvas`);return s.drawImage(e,0,0,i,a),o.convertToBlob({type:`image/webp`,quality:.85})};function t(e){let t=new OffscreenCanvas(e.width,e.height),n=t.getContext(`2d`);if(!n)throw Error(`Failed to create 2D context for canvas.`);n.drawImage(e,0,0);try{let e=n.getImageData(0,0,t.width,t.height).data;for(let t=3;t<e.length;t+=4)if(e[t]<255)return!0;return!1}catch(e){throw Error(`Error reading pixels: ${e}`,{cause:e})}}self.onmessage=async n=>{let r=``;try{let i;if(n.data instanceof Blob)i=n.data;else{let e=n.data.trim();!e.startsWith(`http://`)&&!e.startsWith(`https://`)&&!e.startsWith(`blob:`)&&!e.startsWith(`data:`)&&(r=`image/png`,e=`data:${r};base64,${e}`);let t=await fetch(e);if(!t.ok)throw Error(`HTTP error! Status: ${t.status}`);i=await t.blob()}let a=i.type||r||`image/unknown`,o=await createImageBitmap(i),{width:s,height:c}=o,l=await e(o),u=t(o);o.close(),self.postMessage({success:!0,originalBlob:i,previewBlob:l,mimeType:a,width:s,height:c,isAlpha:u})}catch(e){self.postMessage({success:!1,error:e instanceof Error?e.message:`An error occurred during image loader worker execution.`})}}})();",b=typeof self<`u`&&self.Blob&&new Blob([`(self.URL || self.webkitURL).revokeObjectURL(self.location.href);`,y],{type:`text/javascript;charset=utf-8`});function x(e){let t;try{if(t=b&&(self.URL||self.webkitURL).createObjectURL(b),!t)throw``;let n=new Worker(t,{name:e?.name});return n.addEventListener(`error`,()=>{(self.URL||self.webkitURL).revokeObjectURL(t)}),n}catch{return new Worker(`data:text/javascript;charset=utf-8,`+encodeURIComponent(y),{name:e?.name})}}var S=({src:e,skip:n=!1})=>{let[r,i]=(0,t.useState)({loading:!n,error:``,width:0,height:0,mimeType:``,originalBlob:null,previewUrl:``,isAlpha:!1}),a=(0,t.useRef)(null);return(0,t.useEffect)(()=>{if(!e||n)return;let t=new x;return t.postMessage(e),t.onmessage=e=>{let t=e.data;t.success?(a.current&&URL.revokeObjectURL(a.current),a.current=URL.createObjectURL(t.previewBlob),i({loading:!1,error:``,mimeType:t.mimeType,width:t.width,height:t.height,originalBlob:t.originalBlob,previewUrl:a.current,isAlpha:t.isAlpha})):i(e=>({...e,loading:!1,error:t.error||`Error processing image.`}))},()=>{t.terminate(),a.current&&=(URL.revokeObjectURL(a.current),null)}},[n,e]),r},C=()=>{if(typeof window>`u`||!window.navigator)return null;let e=window.navigator.userAgent.toLowerCase();return/android/.test(e)?`android`:/iphone|ipad|ipod/.test(e)?`ios`:/windows phone/.test(e)?`windows-phone`:/blackberry|bb10/.test(e)?`blackberry`:/opera mini/.test(e)?`opera-mini`:/mobile/.test(e)?`mobile`:null},w=()=>{let[e]=(0,t.useState)(()=>C());return e};function T(e,n){let[r,i]=(0,t.useState)(!0);return(0,t.useEffect)(()=>{if(!n)return;let t=new ResizeObserver(([t])=>{t&&i(t.contentRect.width<u[e])});return t.observe(n),()=>t.disconnect()},[e,n]),r}var E={xmlns:`http://w3.org`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`},D=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`path`,{d:`M20 6 9 17l-5-5`})}),O=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M18 6 6 18`}),(0,_.jsx)(`path`,{d:`m6 6 12 12`})]}),k=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`rect`,{width:`18`,height:`11`,x:`3`,y:`11`,rx:`2`,ry:`2`}),(0,_.jsx)(`path`,{d:`M7 11V7a5 5 0 0 1 10 0v4`})]}),A=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`m12 19-7-7 7-7`}),(0,_.jsx)(`path`,{d:`M19 12H5`})]}),ee=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`path`,{d:`m6 9 6 6 6-6`})}),j=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M3 7v6h6`}),(0,_.jsx)(`path`,{d:`M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13`})]}),te=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M21 7v6h-6`}),(0,_.jsx)(`path`,{d:`M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7`})]}),M=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M6 2v14a2 2 0 0 0 2 2h14`}),(0,_.jsx)(`path`,{d:`M18 22V8a2 2 0 0 0-2-2H2`})]}),ne=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,ry:`2`}),(0,_.jsx)(`circle`,{cx:`9`,cy:`9`,r:`2`}),(0,_.jsx)(`path`,{d:`m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21`})]}),re=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`})}),ie=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`rect`,{width:`20`,height:`12`,x:`2`,y:`6`,rx:`2`})}),ae=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`rect`,{width:`20`,height:`15`,x:`2`,y:`4.5`,rx:`2`})}),oe=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M3 7V5a2 2 0 0 1 2-2h2`}),(0,_.jsx)(`path`,{d:`M17 3h2a2 2 0 0 1 2 2v2`}),(0,_.jsx)(`path`,{d:`M21 17v2a2 2 0 0 1-2 2h-2`}),(0,_.jsx)(`path`,{d:`M7 21H5a2 2 0 0 1-2-2v-2`}),(0,_.jsx)(`rect`,{width:`10`,height:`8`,x:`7`,y:`8`,rx:`1`})]}),se=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3`}),(0,_.jsx)(`path`,{d:`M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3`}),(0,_.jsx)(`path`,{d:`M12 20v2`}),(0,_.jsx)(`path`,{d:`M12 14v2`}),(0,_.jsx)(`path`,{d:`M12 8v2`}),(0,_.jsx)(`path`,{d:`M12 2v2`})]}),ce=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3`}),(0,_.jsx)(`path`,{d:`M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3`}),(0,_.jsx)(`path`,{d:`M4 12H2`}),(0,_.jsx)(`path`,{d:`M10 12H8`}),(0,_.jsx)(`path`,{d:`M16 12h-2`}),(0,_.jsx)(`path`,{d:`M22 12h-2`})]}),le=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8`}),(0,_.jsx)(`path`,{d:`M21 3v5h-5`})]}),ue=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`}),(0,_.jsx)(`path`,{d:`M3 3v5h5`})]}),de=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`rect`,{width:`7`,height:`7`,x:`3`,y:`3`,rx:`1`}),(0,_.jsx)(`rect`,{width:`7`,height:`7`,x:`3`,y:`14`,rx:`1`}),(0,_.jsx)(`path`,{d:`M14 4h7`}),(0,_.jsx)(`path`,{d:`M14 9h7`}),(0,_.jsx)(`path`,{d:`M14 15h7`}),(0,_.jsx)(`path`,{d:`M14 20h7`})]}),fe=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M10 5H3`}),(0,_.jsx)(`path`,{d:`M12 19H3`}),(0,_.jsx)(`path`,{d:`M14 3v4`}),(0,_.jsx)(`path`,{d:`M16 17v4`}),(0,_.jsx)(`path`,{d:`M21 12h-9`}),(0,_.jsx)(`path`,{d:`M21 19h-5`}),(0,_.jsx)(`path`,{d:`M21 5h-7`}),(0,_.jsx)(`path`,{d:`M8 10v4`}),(0,_.jsx)(`path`,{d:`M8 12H3`})]}),pe=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}),(0,_.jsx)(`path`,{d:`M9 3v18`}),(0,_.jsx)(`path`,{d:`m14 9 3 3-3 3`})]}),me=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}),(0,_.jsx)(`path`,{d:`M9 3v18`}),(0,_.jsx)(`path`,{d:`m16 15-3-3 3-3`})]}),he=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M15 4V2`}),(0,_.jsx)(`path`,{d:`M15 16v-2`}),(0,_.jsx)(`path`,{d:`M8 9h2`}),(0,_.jsx)(`path`,{d:`M20 9h2`}),(0,_.jsx)(`path`,{d:`M17.8 11.8 19 13`}),(0,_.jsx)(`path`,{d:`M15 9h.01`}),(0,_.jsx)(`path`,{d:`M17.8 6.2 19 5`}),(0,_.jsx)(`path`,{d:`m3 21 9-9`}),(0,_.jsx)(`path`,{d:`M12.2 6.2 11 5`})]}),ge=e=>(0,_.jsxs)(`svg`,{...E,...e,children:[(0,_.jsx)(`path`,{d:`M12 3v18`}),(0,_.jsx)(`path`,{d:`m16 16 4-4-4-4`}),(0,_.jsx)(`path`,{d:`m8 8-4 4 4 4`})]}),_e=e=>(0,_.jsx)(`svg`,{...E,...e,children:(0,_.jsx)(`path`,{d:`M21 12a9 9 0 1 1-6.219-8.56`,children:(0,_.jsx)(`animateTransform`,{attributeType:`xml`,attributeName:`transform`,type:`rotate`,from:`0 12 12`,to:`360 12 12`,dur:`0.8s`,repeatCount:`indefinite`})})}),N=()=>{let e=(0,t.useContext)(m);if(!e)throw Error(`usePixediContext must be used within an PixediProvider`);return e},P={button:`_button_1vpzl_1`,default:`_default_1vpzl_35`,outline:`_outline_1vpzl_44`,ghost:`_ghost_1vpzl_54`,rect:`_rect_1vpzl_63`},F=({className:e=``,variant:t=`default`,children:n,ref:r,...i})=>(0,_.jsx)(`button`,{ref:r,className:`${P.button} ${P[t]} ${e}`.trim(),...i,children:n}),ve={separator:`_separator_gp8ff_1`},ye=(0,t.forwardRef)(({className:e=``,orientation:t=`horizontal`,...n},r)=>(0,_.jsx)(`hr`,{ref:r,role:`separator`,"aria-orientation":t,"data-orientation":t,className:`${ve.separator} ${e}`.trim(),...n}));ye.displayName=`Separator`;var I={wrapper:`_wrapper_1aw0m_1`,trigger:`_trigger_1aw0m_6`,triggerArrow:`_triggerArrow_1aw0m_31`,content:`_content_1aw0m_40`,groupLabel:`_groupLabel_1aw0m_74`,item:`_item_1aw0m_81`,itemLeft:`_itemLeft_1aw0m_98`,itemAddon:`_itemAddon_1aw0m_102`,itemRightContainer:`_itemRightContainer_1aw0m_122`,itemRight:`_itemRight_1aw0m_122`,itemCheck:`_itemCheck_1aw0m_131`},L={root:`_root_1qifp_8`,textRed:`_textRed_1qifp_78`,bgRed:`_bgRed_1qifp_81`,bgGreen:`_bgGreen_1qifp_84`,textGreen:`_textGreen_1qifp_87`,mask:`_mask_1qifp_90`,semibold:`_semibold_1qifp_93`,bold:`_bold_1qifp_97`,system:`_system_1qifp_101`,wrapper:`_wrapper_1qifp_111`,grid:`_grid_1qifp_118`,mobile:`_mobile_1qifp_130`,gridNoInfobar:`_gridNoInfobar_1qifp_134`},be=e=>{let t=0,n=window.innerHeight;for(let r=e.parentElement;r;r=r.parentElement){let{overflow:e,overflowY:i}=getComputedStyle(r);if(e===`visible`&&i===`visible`)continue;let a=r.getBoundingClientRect();t=Math.max(t,a.top),n=Math.min(n,a.bottom)}return{top:t,bottom:n}},xe=({items:e,value:n,onChange:r})=>{let[i,a]=(0,t.useState)(!1),o=(0,t.useRef)(null),s=(0,t.useRef)(null),c=(0,t.useRef)(null),l=(0,t.useMemo)(()=>{let t=e=>e.reduce((e,n)=>n.options?[...e,...t(n.options.map(e=>({...e,fullName:`${n.label} ${e.label}`})))]:[...e,n],[]);return t(e)},[e]).find(e=>e.value===n),u=l?.fullName??l?.label;return(0,t.useEffect)(()=>{let e=e=>{o.current&&!e.composedPath().includes(o.current)&&a(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]),(0,t.useLayoutEffect)(()=>{let e=o.current,t=s.current,n=c.current;if(!i||!e||!t||!n)return;n.style.removeProperty(`top`),n.style.removeProperty(`max-height`);let{top:r,bottom:a}=be(e),l=e.getBoundingClientRect().top,u=t.getBoundingClientRect(),d=n.offsetHeight,f=a-8-u.bottom-4,p=u.top-4-r-8,m=u.bottom+4,h=0;d>f&&(d<=p?m=u.top-4-d:p>f?(h=Math.max(p,0),m=u.top-4-h):h=Math.max(f,0)),h&&(n.style.maxHeight=`${h}px`),n.style.top=`${m-l}px`},[i,e]),{isOpen:i,selectedLabel:u,containerRef:o,triggerRef:s,contentRef:c,handleSelectItem:e=>{r(e),a(!1)},toggleOpen:()=>a(e=>!e)}},Se=({items:e,value:t,onChange:n,placeholder:r=`Select an option`,className:i=``,renderOption:a})=>{let{isOpen:o,selectedLabel:s,containerRef:c,triggerRef:l,contentRef:u,handleSelectItem:d,toggleOpen:f}=xe({items:e,value:t,onChange:n});return(0,_.jsxs)(`div`,{ref:c,className:`${I.wrapper} ${i}`.trim(),"data-state":o?`open`:`closed`,children:[(0,_.jsxs)(`button`,{ref:l,type:`button`,className:I.trigger,onClick:f,children:[(0,_.jsx)(`span`,{children:s??r}),(0,_.jsx)(ee,{className:I.triggerArrow})]}),(0,_.jsx)(`div`,{ref:u,className:I.content,children:e.map((e,n)=>e.options?(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`div`,{className:`${I.groupLabel} ${L.semibold}`,children:e.label}),e.options.map(e=>(0,_.jsxs)(`div`,{className:I.item,onClick:()=>d(e.value),children:[a?a(e):(0,_.jsx)(`span`,{className:I.itemLeft,children:e.label}),(0,_.jsxs)(`div`,{className:I.itemAddon,children:[e.rightLabel&&(0,_.jsx)(`span`,{children:e.rightLabel}),t===e.value&&(0,_.jsx)(D,{className:I.itemCheck}),t!==e.value&&(0,_.jsx)(`b`,{})]})]},e.value))]},`group-${n}`):(0,_.jsxs)(`div`,{className:I.item,onClick:()=>d(e.value),children:[a?a(e):(0,_.jsx)(`span`,{className:I.itemLeft,children:e.label}),(0,_.jsxs)(`div`,{className:I.itemAddon,children:[e.rightLabel&&(0,_.jsx)(`span`,{children:e.rightLabel}),t===e.value&&(0,_.jsx)(D,{className:I.itemCheck}),t!==e.value&&(0,_.jsx)(`b`,{})]})]},e.value))})]})},Ce={input:`_input_kyavx_1`,numberClean:`_numberClean_kyavx_39`},we=({className:e=``,type:t=`text`,hideArrows:n=!0,ref:r,...i})=>{let a=t===`number`&&n?Ce.numberClean:``;return(0,_.jsx)(`input`,{ref:r,type:t,className:`${Ce.input} ${a} ${e}`.trim(),...i})},Te={container:`_container_14vsv_1`,legend:`_legend_14vsv_4`,suffix:`_suffix_14vsv_13`},Ee=({label:e,className:t=``,style:n,ref:r,...i})=>(0,_.jsxs)(`div`,{className:`${Te.container} ${t}`.trim(),style:n,children:[(0,_.jsx)(`span`,{className:Te.legend,children:e}),(0,_.jsx)(we,{ref:r,type:`number`,...i}),(0,_.jsx)(`span`,{className:Te.suffix,children:`px`})]}),De={group:`_group_1e7jm_1`,save:`_save_1e7jm_6`,close:`_close_1e7jm_13`},R=({onSave:e,onClose:t,saving:n=!1,disabled:r=!1})=>(0,_.jsxs)(`div`,{className:De.group,children:[(0,_.jsx)(F,{variant:`outline`,className:De.save,"aria-label":`Save`,disabled:r||n,onClick:e,children:n?(0,_.jsx)(_e,{}):(0,_.jsx)(D,{})}),(0,_.jsx)(F,{variant:`outline`,className:De.close,"aria-label":`Close`,disabled:n,onClick:t,children:(0,_.jsx)(O,{})})]}),z={sliderContainer:`_sliderContainer_1unyb_1`,disabled:`_disabled_1unyb_11`,sliderThumb:`_sliderThumb_1unyb_17`,sliderTrack:`_sliderTrack_1unyb_22`,sliderRange:`_sliderRange_1unyb_34`,sliderTooltip:`_sliderTooltip_1unyb_58`,hiddenInput:`_hiddenInput_1unyb_86`},Oe=(e,t,n)=>{let r=n-t;return r<=0?0:(e-t)/r*100},ke=new Set([`ArrowDown`,`ArrowLeft`,`ArrowRight`,`ArrowUp`,`End`,`Home`,`PageDown`,`PageUp`]),Ae=({min:e,max:n,value:r,step:i=1,disabled:a=!1,isTooltip:o=!1,unit:s=``,className:c,onChange:l,onInput:u,ref:d})=>{let f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=r??e,[h,g]=(0,t.useState)(m);(0,t.useImperativeHandle)(d,()=>({getValue:()=>h}),[h]);let v=t=>{g(t);let r=Oe(t,e,n);f.current?.style.setProperty(`--slider-progress`,`${r}%`)},y=()=>{!a&&p.current&&l?.(Number(p.current.value))};return(0,t.useLayoutEffect)(()=>{if(!p.current)return;r!==void 0&&(p.current.value=String(r));let t=Number(p.current.value);g(t);let i=Oe(t,e,n);f.current?.style.setProperty(`--slider-progress`,`${i}%`)},[r,e,n]),(0,_.jsxs)(`div`,{ref:f,className:`${z.sliderContainer} ${a?z.disabled:``} ${c||``}`,style:{"--slider-progress":`${Oe(m,e,n)}%`},children:[(0,_.jsxs)(`div`,{className:z.sliderTrack,children:[(0,_.jsx)(`div`,{className:z.sliderRange}),(0,_.jsx)(`div`,{className:z.sliderThumb}),o&&(0,_.jsx)(`div`,{className:z.sliderTooltip,children:`${h}${s}`})]}),(0,_.jsx)(`input`,{ref:p,type:`range`,min:e,max:n,step:i,defaultValue:m,disabled:a,onInput:e=>{let t=Number(e.currentTarget.value);v(t),u?.(t)},onPointerUp:()=>{y()},onKeyUp:e=>{ke.has(e.key)&&y()},className:z.hiddenInput})]})},B={tooltip:`_tooltip_1rdl9_1`,container:`_container_1rdl9_5`,popup:`_popup_1rdl9_19`,animated:`_animated_1rdl9_92`,mask:`_mask_1rdl9_101`,track:`_track_1rdl9_108`,title:`_title_1rdl9_125`},je=(e,n=`top`)=>{let[r,i]=(0,t.useState)(null),[a,o]=(0,t.useState)(null),[s,c]=(0,t.useState)(!1),[l,u]=(0,t.useState)(!1),[d,f]=(0,t.useState)([]),p=(0,t.useRef)(null),m=(0,t.useRef)(null),h=(0,t.useRef)([]),g=n===`left`||n===`right`,_=(0,t.useMemo)(()=>{let n=[];return t.Children.forEach(e,e=>{if((0,t.isValidElement)(e)){let{"data-tooltip":t}=e.props;t&&n.push(t)}}),n},[e]),v=_.join(`\0`),y=_.length;(0,t.useLayoutEffect)(()=>{let e=()=>{let e=h.current.slice(0,y).map(e=>({w:e?.offsetWidth??0,h:e?.offsetHeight??0}));f(t=>t.length===e.length&&t.every((t,n)=>t.w===e[n].w&&t.h===e[n].h)?t:e)};e();let t=m.current;if(!t||typeof ResizeObserver>`u`)return;let n=new ResizeObserver(e);return n.observe(t),()=>n.disconnect()},[v,y]),(0,t.useEffect)(()=>{if(!s||l)return;let e=0,t=requestAnimationFrame(()=>{e=requestAnimationFrame(()=>u(!0))});return()=>{cancelAnimationFrame(t),cancelAnimationFrame(e)}},[s,l]);let b=e=>{let t=e.target.closest(`[data-tooltip]`);if(!t){c(!1);return}let a=t.parentElement;if(!a)return;let l=Array.from(a.children).indexOf(t);if(l===-1||s&&l===r)return;let d=p.current?.getBoundingClientRect();if(!d)return;let f=t.getBoundingClientRect(),m=g?{x:n===`left`?f.left-d.left-4:f.right-d.left+4,y:f.top-d.top+f.height/2}:{x:f.left-d.left+f.width/2,y:n===`top`?f.top-d.top-8:f.bottom-d.top+8};s||u(!1),o(m),i(l),c(!0)},x=()=>c(!1),S=r??0,C=d[S],w=d.slice(0,S).reduce((e,t)=>e+(g?t.h:t.w),0);return{containerRef:p,trackRef:m,titleRefs:h,titles:_,position:n,isVisible:s,isAnimated:l,cssVars:{"--tooltip-x":a?`${a.x}px`:`0px`,"--tooltip-y":a?`${a.y}px`:`0px`,"--tooltip-opacity":s?`1`:`0`,"--tooltip-w":C?.w?`${C.w}px`:`auto`,"--tooltip-h":C?.h?`${C.h}px`:`auto`,"--tooltip-offset":`${w}px`},handleMouseMove:b,handleMouseLeave:x}},V=({children:e,position:t=`top`,className:n=``,classNameTitle:r=``,style:i})=>{let{containerRef:a,trackRef:o,titleRefs:s,titles:c,isAnimated:l,cssVars:u,handleMouseMove:d,handleMouseLeave:f}=je(e,t);return(0,_.jsxs)(`div`,{ref:a,onMouseMove:d,onMouseLeave:f,onBlur:f,className:B.tooltip,style:{...u,...i},children:[(0,_.jsx)(`div`,{"data-position":t,className:`${B.container} ${n}`,children:e}),(0,_.jsx)(`div`,{"aria-hidden":`true`,"data-position":t,className:`${B.popup} ${l?B.animated:``}`,children:(0,_.jsx)(`div`,{className:B.mask,children:(0,_.jsx)(`div`,{ref:o,"data-position":t,className:B.track,children:c.map((e,t)=>(0,_.jsx)(`div`,{ref:e=>{s.current[t]=e},className:`${B.title} ${r}`,children:e},t))})})})]})},Me={surfaceTool:`_surfaceTool_e739m_1`},H=({children:e,className:t=``,ref:n})=>(0,_.jsx)(`div`,{ref:n,className:`${Me.surfaceTool} ${t}`,children:e}),Ne=1920,Pe=.85,Fe=[{label:`Facebook`,value:`facebook`,options:[{value:`facebook-post`,label:`Post`,w:1200,h:630,rightLabel:`1200 x 630`},{value:`facebook-cover`,label:`Cover`,w:851,h:315,rightLabel:`851 x 315`},{value:`facebook-profile`,label:`Profile`,w:170,h:170,rightLabel:`170 x 170`},{value:`facebook-story`,label:`Story`,w:1080,h:1920,rightLabel:`1080 x 1920`}]},{label:`Instagram`,value:`instagram`,options:[{value:`instagram-landscape`,label:`Landscape`,w:1080,h:566,rightLabel:`1080 x 566`},{value:`instagram-portait`,label:`Portait`,w:1080,h:1350,rightLabel:`1080 x 1350`},{value:`instagram-square`,label:`Square`,w:1080,h:1080,rightLabel:`1080 x 1080`},{value:`instagram-story`,label:`Story`,w:1080,h:1920,rightLabel:`1080 x 1920`},{value:`instagram-thumbnail`,label:`Thumbnail`,w:161,h:161,rightLabel:`161 x 161`}]},{label:`LinkedIn`,value:`linkedin`,options:[{value:`linkedin-blog-post`,label:`Blog Post`,w:1200,h:627,rightLabel:`1200 x 627`},{value:`linkedin-cover`,label:`Cover`,w:1128,h:191,rightLabel:`1128 x 191`},{value:`linkedin-profile`,label:`Profile`,w:400,h:400,rightLabel:`400 x 400`}]}],Ie=[{value:`saturate`,label:`Saturate`,min:0,max:200,step:1,unit:`%`,sliderValue:100,rightLabel:`100%`},{value:`grayscale`,label:`Grayscale`,min:0,max:100,step:1,unit:`%`,sliderValue:0,rightLabel:`0%`},{value:`sepia`,label:`Sepia`,min:0,max:100,step:1,unit:`%`,sliderValue:0,rightLabel:`0%`},{value:`invert`,label:`Invert`,min:0,max:100,step:1,unit:`%`,sliderValue:0,rightLabel:`0%`},{value:`hueRotate`,label:`Hue Rotate`,min:0,max:360,step:1,unit:`°`,sliderValue:0,rightLabel:`0°`},{value:`brightness`,label:`Brightness`,min:0,max:200,step:1,unit:`%`,sliderValue:100,rightLabel:`100%`},{value:`contrast`,label:`Contrast`,min:0,max:200,step:1,unit:`%`,sliderValue:100,rightLabel:`100%`}],Le=[{value:`vintage`,label:`Vintage`},{value:`olive-army`,label:`Olive Army`},{value:`warm-sunset`,label:`Warm Sunset`},{value:`sin-city-red`,label:`Sin City Red`},{value:`plastic-wrap`,label:`Plastic Wrap`},{value:`cross-process`,label:`Cross-Processing`},{value:`crt-lines`,label:`CRT Monitor`},{value:`grain`,label:`Grain / Noise`},{value:`emboss`,label:`Emboss Effect`},{value:`x-ray`,label:`X-Ray`}],U=32,Re=(e,t,n,r,i,a,o,s,c,l)=>{let{x:u,y:d,w:f,h:p}=c;if(e){let e=o-c.w-c.x;u+=i-n,u<0&&(u=0),f=o-u-e,f<U&&(f=U,u=o-e-U);let t=s-p-d;d+=a-r,d<0&&(d=0),p=s-d-t,p<U&&(p=U,d=s-t-U)}else{if(t>=1){let e=i-n,r=Math.round(e/t);f-=e,p-=r,u+=e,d+=r}else{let e=a-r,n=Math.round(e*t);f-=n,p-=e,u+=n,d+=e}if(u<0||d<0||f<U||p<U)return l}return{x:u,y:d,w:f,h:p}},ze=(e,t,n,r,i,a,o,s,c,l)=>{let{x:u}=c,{y:d,w:f,h:p}=c;if(e){f+=i-n,f+u>o&&(f=o-u),f<U&&(f=U);let e=s-p-d;d+=a-r,d<0&&(d=0),p=s-d-e,p<U&&(p=U,d=s-e-U)}else{if(t>1){let e=i-n,r=Math.round(e/t);f+=e,p+=r,d-=r}else{let e=a-r,n=Math.round(e*t);f-=n,p-=e,d+=e}if(f+u>o||d<0||f<U||p<U)return l}return{x:u,y:d,w:f,h:p}},Be=(e,t,n,r,i,a,o,s,c,l)=>{let{y:u}=c,{x:d,w:f,h:p}=c;if(e){p+=a-r,p+u>s&&(p=s-u),p<U&&(p=U);let e=o-c.w-c.x;d+=i-n,d<0&&(d=0),f=o-d-e,f<U&&(f=U,d=o-e-U)}else{if(t>=1){let e=i-n,r=Math.round(e/t);f-=e,p-=r,d+=e}else{let e=a-r,n=Math.round(e*t);f+=n,p+=e,d-=n}if(p+u>s||d<0||f<U||p<U)return l}return{x:d,y:u,w:f,h:p}},Ve=(e,t,n,r,i,a,o,s,c,l)=>{let{x:u,y:d}=c,{w:f,h:p}=c;if(e)f+=i-n,f+u>o&&(f=o-u),f<U&&(f=U),p+=a-r,p+d>s&&(p=s-d),p<U&&(p=U);else{if(t>=1){let e=i-n,r=Math.round(e/t);f+=e,p+=r}else{let e=a-r,n=Math.round(e*t);f+=n,p+=e}if(p+d>s||f+u>o||f<U||p<U)return l}return{x:u,y:d,w:f,h:p}},He=(e,t,n,r,i,a,o,s,c)=>{let l=e===`tl`||e===`bl`,u=e===`tl`||e===`tr`,d=c.x+c.w,f=c.y+c.h,p=i-n,m=a-r,h=t>=1?c.w+(l?-p:p):(c.h+(u?-m:m))*t,g=l?d:o-c.x,_=u?f:s-c.y,v=Math.min(g,_*t),y=Math.max(U,U*t),b=Math.min(Math.max(h,y),v),x=b/t;return{x:l?d-b:c.x,y:u?f-x:c.y,w:b,h:x}},Ue=(e,t,n,r,i,a,o,s,c,l,u)=>t?e===`tl`?Re(t,n,r,i,a,o,s,c,l,u):e===`tr`?ze(t,n,r,i,a,o,s,c,l,u):e===`bl`?Be(t,n,r,i,a,o,s,c,l,u):e===`br`?Ve(t,n,r,i,a,o,s,c,l,u):{x:0,y:0,w:0,h:0}:He(e,n,r,i,a,o,s,c,l),W=(e,t,n)=>{let r=.12,i=t/n,a=0,o=0;e===1&&(a=(i>1?n:t)*(1-r*2),o=a),e>1&&(i>e?(o=n*(1-r*2),a=o*e):(a=t*(1-r*2),o=a/e)),e<1&&(i>e?(o=n*(1-r*2),a=o*e):(a=t*(1-r*2),o=a/e));let s=a/t*100,c=o/n*100,l=(t-a)/2/t*100,u=(n-o)/2/n*100;return{x:l,y:u,w:s,h:c,xP:Math.round(l/100*t),yP:Math.round(u/100*n),wP:Math.round(s/100*t),hP:Math.round(c/100*n)}},We=(e,t,n,r)=>{let i=e.w/100*n,a=e.h/100*r;t>=1?a=i/t:i=a*t;let o=i/n*100,s=a/r*100,c=Math.max(o/(100-e.x),s/(100-e.y),1);return o/=c,s/=c,{...e,w:o,h:s}},G=e=>Math.abs(Math.round(e/90))%2==1,Ge=(e,t,n,r)=>G(n)===G(r)?{width:e,height:t}:{width:t,height:e},Ke=async e=>{let{width:t,height:n}=e,r=Math.min(1,Ne/Math.max(t,n)),i=Math.round(t*r),a=Math.round(n*r),o=new OffscreenCanvas(i,a),s=o.getContext(`2d`);if(!s)throw Error(`Failed to get 2D context for preview canvas`);return s.drawImage(e,0,0,i,a),o.convertToBlob({type:`image/webp`,quality:Pe})};function qe(e){let t=new OffscreenCanvas(e.width,e.height),n=t.getContext(`2d`);if(!n)throw Error(`Failed to create 2D context for canvas.`);n.drawImage(e,0,0);try{let e=n.getImageData(0,0,t.width,t.height).data;for(let t=3;t<e.length;t+=4)if(e[t]<255)return!0;return!1}catch(e){throw Error(`Error reading pixels: ${e}`,{cause:e})}}var Je=e=>new Promise((t,n)=>{let r=new FileReader;r.onloadend=()=>{let e=r.result;typeof e==`string`?t(e):n(Error(`Failed to read blob as base64`))},r.onerror=()=>n(r.error??Error(`FileReader error`)),r.readAsDataURL(e)});async function Ye(e){let t=await createImageBitmap(e),n=e.type||`image/png`,r=n===`image/gif`?`image/png`:n,i=document.createElement(`canvas`),a=i.getContext(`2d`,{alpha:!0});i.width=t.width,i.height=t.height,a?.drawImage(t,0,0),t.close();let o=()=>{let e=document.createElement(`canvas`);return e.width=i.width,e.height=i.height,e.getContext(`2d`,{alpha:!0})?.drawImage(i,0,0),e};return{crop:(e,t,n,r)=>{if(!a)return;let s=o();i.width=n,i.height=r,a.clearRect(0,0,n,r),a.drawImage(s,e,t,n,r,0,0,n,r)},flip:(e,t)=>{if(!a)return;let n=o();a.clearRect(0,0,i.width,i.height),a.save(),a.translate(e?i.width:0,t?i.height:0),a.scale(e?-1:1,t?-1:1),a.drawImage(n,0,0),a.restore()},rotate:e=>{if(!a)return;let t=o(),n=e*Math.PI/180,r=Math.abs(Math.sin(n)),s=Math.abs(Math.cos(n));i.width=Math.round(t.width*s+t.height*r),i.height=Math.round(t.width*r+t.height*s),a.clearRect(0,0,i.width,i.height),a.save(),a.translate(i.width/2,i.height/2),a.rotate(n),a.drawImage(t,-t.width/2,-t.height/2),a.restore()},resize:(e,t)=>{if(!a)return;let n=o();i.width=e,i.height=t,a.clearRect(0,0,e,t),a.drawImage(n,0,0,e,t)},filters:e=>{if(!a)return;let t=o(),n=`url`in e?`url(#${e.url})`:Object.entries(e).map(([e,t])=>e===`hueRotate`?`hue-rotate(${t}deg)`:`${e}(${t}%)`).join(` `);a.clearRect(0,0,i.width,i.height),a.filter=n,a.drawImage(t,0,0),a.filter=`none`},get:async e=>{let{quality:t=.85,saveAsWEBP:n=!1}=e,a=n?`image/webp`:r,o=await new Promise((e,o)=>{r===`image/jpeg`||r===`image/webp`||n?i.toBlob(t=>{t?e(t):o(Error(`Failed to encode image as ${a}`))},a,t):i.toBlob(t=>{t?e(t):o(Error(`Failed to encode image as image/png`))},`image/png`)}),s=await createImageBitmap(o),c=await Ke(s),{width:l,height:u}=s,d=qe(s);return s.close(),{newBlob:o,previewBlob:c,mimeType:a,width:l,height:u,isAlpha:d}}}}var K=(e,t,n)=>Math.max(t,Math.min(n,e)),Xe=(e,t)=>[[e[0][0]*t[0][0]+e[0][1]*t[1][0],e[0][0]*t[0][1]+e[0][1]*t[1][1]],[e[1][0]*t[0][0]+e[1][1]*t[1][0],e[1][0]*t[0][1]+e[1][1]*t[1][1]]],Ze=e=>(Math.round(e/90)%4+4)%4*90,Qe=e=>{switch(Ze(e)){case 90:return[[0,-1],[1,0]];case 180:return[[-1,0],[0,-1]];case 270:return[[0,1],[-1,0]];default:return[[1,0],[0,1]]}},$e=(e,t)=>[[e?-1:1,0],[0,t?-1:1]],et=(e,t,n)=>Xe($e(t,n),Qe(-e)),tt=e=>[+(e[0][0]<0||e[0][1]<0),+(e[1][0]<0||e[1][1]<0)],q=(e,t,n)=>{let r=tt(e);return[e[0][0]*t+e[0][1]*n+r[0],e[1][0]*t+e[1][1]*n+r[1]]},nt=e=>{let t=1,n=1,r={x:0,y:0,w:1,h:1},i=0,a=!1,o=!1;for(let s=0;s<e.length;s++){let c=e[s];if(c.action.name===d.INITIAL)t=c.width,n=c.height,r={x:0,y:0,w:1,h:1},i=0,a=!1,o=!1;else if(c.action.name===d.CROP){let e=(c.action.args.x??0)/100,t=(c.action.args.y??0)/100,n=(c.action.args.w??100)/100,s=(c.action.args.h??100)/100,l=et(i,a,o),u=[q(l,e,t),q(l,e+n,t),q(l,e,t+s),q(l,e+n,t+s)],d=Math.min(...u.map(e=>e[0])),f=Math.max(...u.map(e=>e[0])),p=Math.min(...u.map(e=>e[1])),m=Math.max(...u.map(e=>e[1]));r={x:r.x+d*r.w,y:r.y+p*r.h,w:r.w*(f-d),h:r.h*(m-p)}}else if(c.action.name===d.FLIP){let e=G(i),t=e?c.action.args.vertical:c.action.args.horizontal,n=e?c.action.args.horizontal:c.action.args.vertical;t&&(a=!a),n&&(o=!o)}else c.action.name===d.ROTATE&&(i=c.action.args.degrees)}let s=r.w*t,c=r.h*n,l=G(i),u=l?c:s,f=l?s:c,p=e.at(-1)?.width||0,m=e.at(-1)?.height||0,h=e.filter(e=>e.action.name===d.FILTERS).at(-1),g=Object.entries(h?.action.args||{}).map(([e,t])=>e===`url`?`url(#${t})`:e===`hueRotate`?`hue-rotate(${t}deg)`:`${e}(${t}%)`);return{box:r,boxWidth:s,boxHeight:c,newWidth:p,newHeight:m,initWidth:t,initHeight:n,viewWidth:u,viewHeight:f,rotation:i,flipH:a,flipV:o,filters:g}},rt=e=>{let{box:t,flipH:n,flipV:r,rotation:i,newWidth:a,newHeight:o,initWidth:s,initHeight:c,viewWidth:l,viewHeight:u}=nt(e),f=e.filter(e=>e.action.name===d.FILTERS).at(-1)?.action.args,p=K(t.x,0,1),m=K(t.y,0,1),h={x:p,y:m,w:K(t.w,0,1-p),h:K(t.h,0,1-m)},g=Ze(i);return{...h.x===0&&h.y===0&&h.w===1&&h.h===1?{}:{crop:{x:Math.round(s*t.x),y:Math.round(c*t.y),w:Math.round(s*t.w),h:Math.round(c*t.h)}},...g===0?{}:{rotate:{degrees:g}},...n||r?{flip:{horizontal:n,vertical:r}}:{},...Math.round(l)!==a||Math.round(u)!==o?{resize:{width:a,height:o}}:{},...f?{filters:f}:{}}},it=e=>{let[n,r]=(0,t.useState)(!1),{setImage:i,settings:a,history:o,originalBlob:s,setCurrentAction:c,resetHistory:l}=N();return{save:async()=>{if(!s)return;r(!0);let t=rt(o.items.slice(0,o.pointer+1));try{let n=await Ye(s);t.crop&&n.crop(t.crop.x,t.crop.y,t.crop.w,t.crop.h),t.flip&&n.flip(t.flip.horizontal,t.flip.vertical),t.rotate&&n.rotate(t.rotate.degrees),t.resize&&n.resize(t.resize.width,t.resize.height),t.filters&&n.filters(t.filters);let{newBlob:r,previewBlob:o,mimeType:c,width:l,height:u,isAlpha:d}=await n.get(a),f=``;a.exportAs===`base64`&&(f=await Je(r)),await e(f||r),i({newBlob:r,previewBlob:o,mimeType:c,width:l,height:u,isAlpha:d})}catch(e){throw Error(`Error saving image: ${e}`,{cause:e})}finally{r(!1)}},reset:()=>{c(null),l()},isSaving:n}},J={header:`_header_m05h6_1`,left:`_left_m05h6_12`,sidebarToggle:`_sidebarToggle_m05h6_17`,mobile:`_mobile_m05h6_30`,sidebarIcon:`_sidebarIcon_m05h6_34`,tools:`_tools_m05h6_39`,history:`_history_m05h6_43`,historyText:`_historyText_m05h6_48`},at=({onBack:e,onSave:t,isMobile:n})=>{let{save:r,reset:i,isSaving:a}=it(t),{sidebar:o,history:s,undo:c,redo:l,setSidebar:u,setCurrentAction:d}=N(),f=s.items.length>1&&!a,p=s.pointer===0,m=s.pointer===s.items.length-1,h=s.items.length<2||a,g=h||s.pointer===0;return(0,_.jsxs)(`div`,{className:J.header,children:[(0,_.jsxs)(`div`,{className:J.left,children:[(0,_.jsx)(`div`,{className:`${J.sidebarToggle} ${n?J.mobile:``}`,onClick:()=>{u(!o)},children:o?(0,_.jsx)(me,{className:J.sidebarIcon}):(0,_.jsx)(pe,{className:J.sidebarIcon})}),(0,_.jsx)(F,{variant:`ghost`,className:P.rect,onClick:e,children:(0,_.jsx)(A,{})})]}),(0,_.jsxs)(`div`,{className:J.tools,children:[f&&(0,_.jsxs)(`div`,{className:J.history,children:[(0,_.jsx)(F,{variant:`outline`,disabled:p,className:P.rect,onClick:()=>{c(),d(null)},children:(0,_.jsx)(j,{})}),(0,_.jsxs)(`div`,{className:J.historyText,children:[s.pointer+1,`/`,s.items.length]}),(0,_.jsx)(F,{variant:`outline`,disabled:m,className:P.rect,onClick:()=>{l(),d(null)},children:(0,_.jsx)(te,{})})]}),(0,_.jsx)(F,{variant:`outline`,disabled:h,onClick:i,children:`Reset`}),(0,_.jsxs)(F,{disabled:g,onClick:r,children:[a?(0,_.jsx)(_e,{}):(0,_.jsx)(D,{}),`Save`]})]})]})},ot=(e,t)=>{let n=new CustomEvent(`crop-update`,{detail:t});e.dispatchEvent(n)},st=(e,t)=>{let n=new CustomEvent(`clip-path-update`,{detail:t});e.dispatchEvent(n)},ct=(e,t)=>{let n=new CustomEvent(`resize-update`,{detail:t});e.dispatchEvent(n)},Y=(e,t)=>{let n=new CustomEvent(`filter-update`,{detail:t});e.dispatchEvent(n)},lt=(e,t)=>{let n=new CustomEvent(`compare-update`,{detail:t});e.dispatchEvent(n)},ut=()=>{let{showCompare:e,previewUrl:n,getLastFilter:r,getLastHistoryItem:i,setCurrentAction:a,setSidebar:o,toggleCompare:s,addToHistory:c,eventBus:l}=N(),{width:u,height:f}=i(),{action:p}=r()||{},m=p?.args||{},h=m?.url,g=Ie.map(e=>({...e,sliderValue:m[e.value]??e.sliderValue,rightLabel:`${m[e.value]??e.sliderValue}${e.unit}`})),_=g.find(e=>e.value===`saturate`)?.sliderValue,[v,y]=(0,t.useState)(`saturate`),[b,x]=(0,t.useState)(h??`vintage`),[S,C]=(0,t.useState)(g),[w,T]=(0,t.useState)(_??0),[E,D]=(0,t.useState)(!!h),O=(0,t.useMemo)(()=>Object.fromEntries(S.map(e=>[e.value,e.sliderValue])),[S]),k=()=>{s(),lt(l,50)},A=e=>{Y(l,{...O,[v]:e})},ee=S.find(e=>e.value===v);return(0,t.useEffect)(()=>{E?Y(l,{url:b}):Y(l,{...O,[v]:w})},[E,b,w,O,v,l]),{showCompare:e,previewUrl:n,isUrl:E,toggleIsUrl:()=>D(!E),filters:S,selectedFilter:v,selectedFilterItem:ee,selectedUrl:b,sliderValue:w,handleToggleCompare:k,handleSliderInput:A,handleSliderChange:e=>{T(e),C(t=>t.map(t=>t.value===v?{...t,sliderValue:e,rightLabel:`${e}${t.unit}`}:t))},handleChange:e=>{y(e),T(S.find(t=>t.value===e)?.sliderValue||0)},handleChangeWhenUrl:e=>{x(e),Y(l,{url:e})},handleSave:()=>{c({width:u,height:f,action:{name:d.FILTERS,args:{...E?{url:b}:Object.fromEntries(S.map(e=>[e.value,e.sliderValue]))}}}),e&&s(),o(!0)},handleClose:()=>{e&&s(),a(null),o(!0)}}},X={tools:`_tools_5caap_1`,row1:`_row1_5caap_5`,min:`_min_5caap_13`,slider:`_slider_5caap_19`,max:`_max_5caap_23`,row2:`_row2_5caap_29`,select:`_select_5caap_35`,option:`_option_5caap_39`,active:`_active_5caap_50`,filterInteract:`_filterInteract_5caap_55`,compare:`_compare_5caap_70`,compareThumb:`_compareThumb_5caap_88`},dt=()=>{let{showCompare:e,previewUrl:t,isUrl:n,toggleIsUrl:r,filters:i,selectedFilter:a,selectedFilterItem:o,selectedUrl:s,sliderValue:c,handleToggleCompare:l,handleSliderInput:u,handleSliderChange:d,handleChange:f,handleChangeWhenUrl:p,handleSave:m,handleClose:h}=ut();return(0,_.jsxs)(H,{className:X.tools,children:[!n&&o&&(0,_.jsxs)(`div`,{className:X.row1,children:[(0,_.jsxs)(`div`,{className:X.min,children:[o.min,o.unit]}),(0,_.jsx)(Ae,{className:X.slider,min:o.min,max:o.max,step:o.step,value:c,isTooltip:!0,unit:o.unit,onInput:u,onChange:d}),(0,_.jsxs)(`div`,{className:X.max,children:[o.max,o.unit]})]}),(0,_.jsxs)(`div`,{className:X.row2,children:[(0,_.jsx)(V,{position:`top`,children:(0,_.jsx)(F,{variant:`outline`,"aria-label":`Compare`,"data-tooltip":`Compare`,onClick:l,className:e?X.active:``,children:(0,_.jsx)(ge,{})})}),(0,_.jsx)(V,{position:`top`,children:(0,_.jsx)(F,{variant:`outline`,"aria-label":n?`Filters`:`Predefined Filters`,"data-tooltip":n?`Filters`:`Predefined Filters`,onClick:r,children:n?(0,_.jsx)(fe,{}):(0,_.jsx)(he,{})})}),(0,_.jsx)(Se,{items:n?Le:i,value:n?s:a,placeholder:`Select filter`,className:X.select,renderOption:n?e=>(0,_.jsx)(`div`,{className:X.option,children:(0,_.jsx)(`img`,{src:t,alt:e.label,style:{filter:`url(#${e.value})`}})}):void 0,onChange:n?p:f}),(0,_.jsx)(R,{onSave:m,onClose:h})]})]})},ft=({isClipped:e,isFilter:n})=>{let{history:r,previewUrl:i,currentAction:a,getLastRotation:o,eventBus:s}=N(),c=(0,t.useRef)(null),l=(0,t.useRef)(null),u=(0,t.useRef)(a?.name),f=(0,t.useRef)(i);(0,t.useLayoutEffect)(()=>{let e=u.current,t=a?.name,n=f.current!==i;if(u.current=t,f.current=i,!(e&&t&&e!==t)&&!n)return;let r=c.current;if(!r)return;let o=[r,...r.querySelectorAll(`*`)];o.forEach(e=>{e.style.transition=`none`}),r.getBoundingClientRect();let s=()=>{o.forEach(e=>{e.style.removeProperty(`transition`)})},l=requestAnimationFrame(s);return()=>{cancelAnimationFrame(l),s()}},[a?.name,i]);let p=r.items.slice(0,r.pointer+1);if(a){let{width:e,height:t}=r.items.at(r.pointer);p.push({...a.name===d.ROTATE?Ge(e,t,o(),a.args.degrees):{width:e,height:t},action:a})}let m=nt(p);return(0,t.useEffect)(()=>{e&&c.current&&(c.current.style.transition=`none`),a?.name!==d.RESIZE&&c.current&&(c.current.style.transform=`scale(1)`);let t=e=>{let t=e.detail;c.current&&(c.current.style.transform=`scale(${t/100})`)},r=t=>{if(!e)return;let{x:n,y:r,w:i,h:a}=t.detail;c.current&&(c.current.style.clipPath=`xywh(${n}% ${r}% ${i}% ${a}%)`)},i=e=>{if(!n)return;let t=e.detail;if(l.current)if(t.url)l.current.style.filter=`url(#${t.url})`;else{let e=Object.entries(t).map(([e,t])=>e===`hueRotate`?`hue-rotate(${t}deg)`:`${e}(${t}%)`).join(` `);l.current.style.filter=e}},o=e=>{if(!n)return;let t=e.detail;c.current&&(c.current.style.clipPath=`xywh(${t}% 0% ${100-t}% 100%)`)},u=new AbortController,{signal:f}=u;return s.addEventListener(`resize-update`,t,{signal:f}),s.addEventListener(`clip-path-update`,r,{signal:f}),s.addEventListener(`filter-update`,i,{signal:f}),s.addEventListener(`compare-update`,o,{signal:f}),()=>u.abort()},[e,n,a?.name,s]),{previewRef:c,imageRef:l,previewUrl:i,...m}},Z={preview:`_preview_t77n1_1`,faded:`_faded_t77n1_13`,rotate:`_rotate_t77n1_19`,flip:`_flip_t77n1_31`,image:`_image_t77n1_39`,label:`_label_t77n1_49`,before:`_before_t77n1_67`,after:`_after_t77n1_71`},pt=({isClipped:e,isFilter:t,faded:n,style:r={}})=>{let{showCompare:i}=N(),{previewRef:a,imageRef:o,previewUrl:s,box:c,boxWidth:l,boxHeight:u,viewWidth:d,viewHeight:f,rotation:p,flipH:m,flipV:h,filters:g}=ft({isClipped:e,isFilter:t});return(0,_.jsxs)(`div`,{ref:a,className:`${Z.preview} ${n?Z.faded:``}`,style:{aspectRatio:`${d} / ${f}`,...r},children:[i&&!t&&(0,_.jsx)(`div`,{className:`${Z.label} ${Z.before}`,children:`Before`}),i&&t&&(0,_.jsx)(`div`,{className:`${Z.label} ${Z.after}`,children:`After`}),(0,_.jsx)(`div`,{className:Z.rotate,style:{width:`${l/d*100}%`,height:`${u/f*100}%`,transform:`translate(-50%, -50%) rotate(${p}deg)`},children:(0,_.jsx)(`div`,{className:Z.flip,style:{transform:`scale(${m?-1:1}, ${h?-1:1})`},children:(0,_.jsx)(`img`,{ref:o,className:Z.image,src:s,alt:`Preview Image`,style:{width:`${1/c.w*100}%`,height:`${1/c.h*100}%`,left:`${-(c.x/c.w)*100}%`,top:`${-(c.y/c.h)*100}%`,filter:g.join(` `)}})})})]})},mt=({compareRef:e})=>{let{eventBus:n}=N(),r=w(),i=(0,t.useRef)(null),a=(0,t.useRef)(null);return(0,t.useEffect)(()=>{a.current=0,lt(n,0)},[n]),(0,t.useEffect)(()=>{let t=t=>{if(!e.current||!i.current)return;t.preventDefault();let r=e.current.parentElement;if(!r)return;let o=`clientX`in t?t.clientX:t.touches[0].clientX,{width:s,left:c}=r.getBoundingClientRect(),l=Math.min(Math.max(o-c,0),s)/s*100;a.current=l,e.current.style.left=`${l}%`,lt(n,l)},r=()=>{e.current&&(i.current=null,document.body.style.cursor=`auto`)},o=new AbortController,{signal:s}=o;return document.addEventListener(`mousemove`,t,{signal:s}),document.addEventListener(`touchmove`,t,{signal:s,passive:!1}),document.addEventListener(`mouseup`,r,{signal:s}),document.addEventListener(`touchend`,r,{signal:s}),()=>o.abort()},[e,n]),{handleDragStart:t=>{if(!e.current)return;t.stopPropagation(),t.preventDefault(),i.current=a.current;let n=`clientX`in t?t.clientX:t.touches[0].clientX;i.current=n,r||(document.body.style.cursor=`pointer`)}}},ht=()=>{let{showCompare:e,getLastHistoryItem:n}=N(),{width:r,height:i}=n(),a=(0,t.useRef)(null),{handleDragStart:o}=mt({compareRef:a});return(0,_.jsxs)(`div`,{className:X.filterInteract,style:{aspectRatio:`${r} / ${i}`},children:[(0,_.jsx)(pt,{isFilter:!0}),e&&(0,_.jsx)(_.Fragment,{children:(0,_.jsx)(`div`,{ref:a,className:X.compare,style:{left:`50%`},children:(0,_.jsx)(`div`,{className:X.compareThumb,onMouseDown:o,onTouchStart:o,children:(0,_.jsx)(ge,{})})})})]})},gt=()=>({saturate:100,grayscale:0,sepia:0,invert:0,hueRotate:0,brightness:100,contrast:100}),_t={[d.RESIZE]:{icon:(0,_.jsx)(oe,{}),label:`Resize`},[d.CROP]:{icon:(0,_.jsx)(M,{}),label:`Crop`},[d.PRESET_CROP]:{icon:(0,_.jsx)(de,{}),label:`Presets`},[d.FLIP]:{icon:(0,_.jsx)(se,{}),label:`Flip`},[d.ROTATE]:{icon:(0,_.jsx)(le,{}),label:`Rotate`},[d.FILTERS]:{icon:(0,_.jsx)(fe,{}),label:`Filters`}},vt=e=>_t[e]??null,yt=()=>{let{settings:e,currentAction:t,showCompare:n,toggleCompare:r,getLastRotation:i,getLastHistoryItem:a,setCurrentAction:o,setSidebar:s}=N(),c=e?.tools||[],l=t?.name,{width:u,height:f}=a();return{click:e=>{if(c.includes(e)&&l===e){o(null);return}switch(e){case d.RESIZE:o({name:d.RESIZE,args:{width:u,height:f}});break;case d.CROP:o({name:d.CROP,args:{id:`freeform`,ratio:u/f,isFree:!0}});break;case d.PRESET_CROP:o({name:d.PRESET_CROP,args:{id:`facebook-post`,ratio:1200/630,isFree:!1,preset:{width:1200,height:630}}});break;case d.FLIP:o({name:d.FLIP,args:{horizontal:!1,vertical:!1}});break;case d.ROTATE:o({name:d.ROTATE,args:{degrees:i()}});break;case d.FILTERS:o({name:d.FILTERS,args:gt()});break}n&&r(),s(!1)}}},Q={sidebar:`_sidebar_1lx29_1`,mobile:`_mobile_1lx29_10`,open:`_open_1lx29_15`,wrapper:`_wrapper_1lx29_20`,item:`_item_1lx29_24`,selected:`_selected_1lx29_43`},bt=({isMobile:e})=>{let{settings:t,sidebar:n,currentAction:r}=N(),i=t?.tools||[],a=r?.name,{click:o}=yt();return(0,_.jsx)(`nav`,{className:`${Q.sidebar} ${e?Q.mobile:``} ${e&&n?Q.open:``}`,children:(0,_.jsx)(V,{position:`right`,className:Q.tooltip,children:i.map(e=>{let t=vt(e);if(!t)return null;let{icon:n,label:r}=t;return(0,_.jsx)(`div`,{className:`${Q.item} ${a===e?Q.selected:``}`,onClick:()=>o(e),"data-tooltip":r,"aria-label":r,children:n},e)})})})},xt={infobar:`_infobar_895qe_1`},St=e=>e<1024?`${e} B`:e<1024*1024?`${(e/1024).toFixed(2)} KB`:`${(e/1024/1024).toFixed(2)} MB`,Ct=()=>{let{originalBlob:e,getLastHistoryItem:t}=N(),{width:n,height:r}=t();return(0,_.jsxs)(`div`,{className:xt.infobar,children:[(0,_.jsx)(`div`,{className:xt.filesize,children:e?St(e.size):`0 B`}),(0,_.jsxs)(`div`,{className:xt.sizes,children:[n,` / `,r]})]})},wt=15,Tt=200,Et=2,Dt=(e,t,n)=>{let r=Math.min(Tt,Math.max(wt,e));return{scale:r,width:Math.round(r/100*t),height:Math.round(r/100*n)}},Ot=()=>{let{getLastHistoryItem:e,setCurrentAction:n,addToHistory:r,setSidebar:i,eventBus:a}=N(),{width:o,height:s}=e(),[c,l]=(0,t.useState)(o),[u,f]=(0,t.useState)(s),[p,m]=(0,t.useState)(100),h=(0,t.useRef)(p),g=(0,t.useRef)(0),_=(0,t.useRef)(null),v=(0,t.useCallback)(e=>{let t=Dt(e,o,s);l(t.width),f(t.height),m(t.scale),h.current=t.scale,ct(a,t.scale)},[s,o,a]),y=(e,t)=>{let n=Number.parseInt(e,10);if(!Number.isFinite(n)){v(100);return}v(n/t*100)};return(0,t.useEffect)(()=>{let e=e=>{let t=_.current?.parentElement,n=e.composedPath?.()[0]??e.target;return n instanceof Node&&!!t?.contains(n)},t=t=>{e(t)&&v(h.current-Math.sign(t.deltaY)*Et)},n=t=>{e(t)&&(g.current=t.touches[0].clientY)},r=t=>{if(!e(t))return;let n=t.touches[0].clientY,r=g.current-n;Math.abs(r)<10||(v(h.current+Math.sign(r)*Et),g.current=n)},i=new AbortController,{signal:a}=i;return window.addEventListener(`wheel`,t,{signal:a}),window.addEventListener(`touchstart`,n,{signal:a}),window.addEventListener(`touchmove`,r,{signal:a}),()=>i.abort()},[v]),{resizeRef:_,width:c,height:u,scale:p,currentWidth:o,currentHeight:s,setWidth:l,setHeight:f,handleWidthBlur:e=>{y(e.target.value,o)},handleHeightBlur:e=>{y(e.target.value,s)},save:()=>{r({width:c,height:u,action:{name:d.RESIZE,args:{width:c,height:u}}}),ct(a,100),i(!0)},close:()=>{ct(a,100),n(null),i(!0)}}},kt={resize:`_resize_1sbig_1`,toolsLock:`_toolsLock_1sbig_5`,indicatorWrapper:`_indicatorWrapper_1sbig_10`,indicator:`_indicator_1sbig_10`},At=()=>{let{resizeRef:e,width:t,height:n,scale:r,currentWidth:i,currentHeight:a,setWidth:o,setHeight:s,handleWidthBlur:c,handleHeightBlur:l,save:u,close:d}=Ot();return(0,_.jsxs)(H,{ref:e,className:kt.resize,children:[(0,_.jsx)(`div`,{className:kt.indicatorWrapper,children:(0,_.jsx)(`div`,{className:kt.indicator,style:{width:`${r/2}%`}})}),(0,_.jsx)(Ee,{value:t,name:`width`,label:`Width`,style:{width:`88px`},onChange:e=>o(Number(e.target.value)),onBlur:c}),(0,_.jsx)(k,{className:kt.toolsLock}),(0,_.jsx)(Ee,{value:n,name:`height`,label:`Height`,style:{width:`88px`},onChange:e=>s(Number(e.target.value)),onBlur:l}),(0,_.jsx)(R,{onSave:u,onClose:d,disabled:t===i&&n===a})]})},$={wrapper:`_wrapper_1co2u_1`,box:`_box_1co2u_9`,toolsInfo:`_toolsInfo_1co2u_18`,toolsInfoLabel:`_toolsInfoLabel_1co2u_25`,toolsInfoValue:`_toolsInfoValue_1co2u_30`,linesBox:`_linesBox_1co2u_35`,line:`_line_1co2u_35`,lineV:`_lineV_1co2u_45`,lineH:`_lineH_1co2u_53`,pointer:`_pointer_1co2u_61`,pointerTopLeft:`_pointerTopLeft_1co2u_67`,pointerTopRight:`_pointerTopRight_1co2u_74`,pointerBottomRight:`_pointerBottomRight_1co2u_81`,pointerBottomLeft:`_pointerBottomLeft_1co2u_88`,mobileBorder:`_mobileBorder_1co2u_95`,mobilePointer:`_mobilePointer_1co2u_101`,info:`_info_1co2u_112`,infoX:`_infoX_1co2u_129`,infoY:`_infoY_1co2u_134`,infoW:`_infoW_1co2u_141`,infoH:`_infoH_1co2u_146`,group:`_group_1co2u_153`,active:`_active_1co2u_162`},jt=()=>{let{getLastHistoryItem:e}=N(),n=w(),r=(0,t.useRef)(null),{handleCropStart:i,initialCrop:a}=Ut({boxRef:r}),{width:o,height:s}=e(),{x:c,y:l,w:u,h:d}=a;return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(pt,{isClipped:!0,style:{clipPath:`xywh(${c}% ${l}% ${u}% ${d}%)`}}),(0,_.jsx)(`div`,{className:$.wrapper,style:{aspectRatio:`${o} / ${s}`},children:(0,_.jsxs)(`div`,{ref:r,className:$.box,style:{width:`${u}%`,height:`${d}%`,top:`${l}%`,left:`${c}%`},children:[(0,_.jsx)(It,{}),n?(0,_.jsx)(Wt,{onMouseDown:i}):(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(Lt,{onMouseDown:i}),(0,_.jsx)(Gt,{})]})]})})]})},Mt=[{id:`freeform`,icon:(0,_.jsx)(M,{}),label:`Freeform`},{id:`origin`,icon:(0,_.jsx)(ne,{}),label:`Original`},{id:`1:1`,icon:(0,_.jsx)(re,{}),label:`1 : 1`},{id:`4:3`,icon:(0,_.jsx)(ae,{}),label:`4 : 3`},{id:`16:9`,icon:(0,_.jsx)(ie,{}),label:`16 : 9`}],Nt=({value:e,onChange:t})=>(0,_.jsx)(`div`,{className:$.group,children:(0,_.jsx)(V,{position:`top`,children:Mt.map(n=>(0,_.jsx)(F,{variant:`outline`,className:`${$.groupBtn} ${e===n.id?$.active:``}`,onClick:()=>t(n.id),"aria-label":n.label,"data-tooltip":n.label,children:n.icon},n.id))})}),Pt=()=>{let{setCurrentAction:e,currentAction:n,getLastHistoryItem:r,addToHistory:i,setSidebar:a,eventBus:o}=N(),{width:s,height:c}=r(),{name:l,args:u}=n||{},f=l===d.CROP?u?.id:``,p=s/c,m=(0,t.useRef)({x:0,y:0,w:0,h:0});return(0,t.useEffect)(()=>{if(n?.name!==d.CROP)return;let e=W(n.args.ratio,s,c);m.current=e;let t=e=>{m.current=e.detail};return o.addEventListener(`clip-path-update`,t),()=>{o.removeEventListener(`clip-path-update`,t)}},[n,s,c,o]),{currentValue:f,handleChange:t=>{t!==f&&e({name:d.CROP,args:{id:t,ratio:/^\d+:\d+$/.test(t)?t.split(`:`).map(Number).reduce((e,t)=>e/t):p,isFree:t===`freeform`}})},handleSave:()=>{if(!n||n.name!==d.CROP)return;let e=n.args?.preset?.width||Math.round(s*m.current.w/100),t=n.args?.preset?.height||Math.round(c*m.current.h/100);i({width:e,height:t,action:{name:d.CROP,args:{...n.args,...m.current}}}),a(!0)},handleClose:()=>{e(null),a(!0)}}},Ft=()=>{let{currentValue:e,handleChange:t,handleSave:n,handleClose:r}=Pt();return(0,_.jsxs)(H,{children:[(0,_.jsx)(Nt,{value:e,onChange:t}),(0,_.jsx)(R,{onSave:n,onClose:r})]})},It=()=>(0,_.jsxs)(`div`,{className:$.linesBox,children:[(0,_.jsx)(`span`,{className:`${$.line} ${$.lineV}`}),(0,_.jsx)(`span`,{className:`${$.line} ${$.lineH}`})]}),Lt=({onMouseDown:e})=>(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`div`,{className:`${$.pointer} ${$.pointerTopLeft}`,onMouseDown:t=>e(t,`tl`,`nwse`)}),(0,_.jsx)(`div`,{className:`${$.pointer} ${$.pointerTopRight}`,onMouseDown:t=>e(t,`tr`,`nesw`)}),(0,_.jsx)(`div`,{className:`${$.pointer} ${$.pointerBottomRight}`,onMouseDown:t=>e(t,`br`,`nwse`)}),(0,_.jsx)(`div`,{className:`${$.pointer} ${$.pointerBottomLeft}`,onMouseDown:t=>e(t,`bl`,`nesw`)})]});function Rt(e,t,n){return Math.min(Math.max(e,t),n)}function zt(e,{x:t,y:n,w:r,h:i}){e.style.left=`${t}%`,e.style.top=`${n}%`,e.style.width=`${r}%`,e.style.height=`${i}%`}function Bt(e){let{width:t,height:n}=e.getBoundingClientRect();return{frameW:t,frameH:n}}function Vt({x:e,y:t,w:n,h:r},i,a){return{x:e/100*i,y:t/100*a,w:n/100*i,h:r/100*a}}function Ht({x:e,y:t,w:n,h:r},i,a){return{x:e/i*100,y:t/a*100,w:n/i*100,h:r/a*100}}var Ut=({boxRef:e})=>{let{currentAction:n,getLastHistoryItem:r,eventBus:i}=N(),a=w(),{width:o,height:s}=r(),c=n?.name===d.CROP||n?.name===d.PRESET_CROP,l=c?n.args.ratio:1,u=!c||n.args.isFree,f=(0,t.useMemo)(()=>W(l,o,s),[l,o,s]),p=(0,t.useRef)(null),m=(0,t.useRef)(``),h=(0,t.useRef)(f),g=(0,t.useRef)(f);return(0,t.useEffect)(()=>{h.current=f,st(i,f)},[f,i]),(0,t.useEffect)(()=>{let t=(e,t)=>{h.current=t,zt(e,t),ot(i,{x:Math.round(t.x/100*o),y:Math.round(t.y/100*s),w:Math.round(t.w/100*o),h:Math.round(t.h/100*s)}),st(i,t)},n=e=>{e.preventDefault(),g.current=h.current;let t=`clientX`in e?e.clientX:e.touches[0].clientX,n=`clientY`in e?e.clientY:e.touches[0].clientY;p.current={x:t,y:n},document.body.style.cursor=`move`},r=t=>{if(!e.current||!p.current)return;t.preventDefault();let n=e.current,r=n.parentElement;if(!r)return;let{frameW:i,frameH:o}=Bt(r);if(m.current){a(t,n,i,o);return}c(t,n,i,o)},a=(e,n,r,i)=>{if(!p.current)return;let a=`clientX`in e?e.clientX:e.touches[0].clientX,c=`clientY`in e?e.clientY:e.touches[0].clientY,d=Ht(Ue(m.current,u,l,p.current.x,p.current.y,a,c,r,i,Vt(g.current,r,i),Vt(h.current,r,i)),r,i);t(n,u?d:We(d,l,o,s))},c=(e,n,r,i)=>{if(!p.current)return;let{x:a,y:o,w:s,h:c}=g.current,l=`clientX`in e?e.clientX:e.touches[0].clientX,u=`clientY`in e?e.clientY:e.touches[0].clientY,d=(l-p.current.x)/r*100,f=(u-p.current.y)/i*100;t(n,{x:Rt(a+d,0,Math.max(0,100-s)),y:Rt(o+f,0,Math.max(0,100-c)),w:s,h:c})},d=()=>{e.current&&(p.current=null,m.current=``,e.current.style.cursor=`move`,document.body.style.cursor=`auto`)};if(!e.current)return;let f=new AbortController,{signal:_}=f;return e.current.addEventListener(`mousedown`,n,{signal:_}),e.current.addEventListener(`touchstart`,n,{signal:_,passive:!1}),document.addEventListener(`mousemove`,r,{signal:_}),document.addEventListener(`touchmove`,r,{signal:_,passive:!1}),document.addEventListener(`mouseup`,d,{signal:_}),document.addEventListener(`touchend`,d,{signal:_}),()=>f.abort()},[u,l,o,s,e,i]),{handleCropStart:(t,n,r)=>{if(!e.current)return;t.stopPropagation(),t.preventDefault(),g.current=h.current;let i=`clientX`in t?t.clientX:t.touches[0].clientX,o=`clientY`in t?t.clientY:t.touches[0].clientY;p.current={x:i,y:o},m.current=n,a||(e.current.style.cursor=`${r}-resize`,document.body.style.cursor=`${r}-resize`)},initialCrop:f}},Wt=({onMouseDown:e})=>(0,_.jsx)(`div`,{className:$.mobileBorder,children:(0,_.jsx)(`div`,{className:$.mobilePointer,onTouchStart:t=>e(t,`br`,`nwse`)})}),Gt=()=>{let e=(0,t.useRef)(null),n=(0,t.useRef)(null),r=(0,t.useRef)(null),i=(0,t.useRef)(null),{currentAction:a,getLastHistoryItem:o,eventBus:s}=N(),{width:c,height:l}=o();return(0,t.useEffect)(()=>{if(!(a?.name===d.CROP||a?.name===d.PRESET_CROP))return;let{xP:t,yP:o,wP:u,hP:f}=W(a.args.ratio,c,l);e.current&&(e.current.textContent=t.toString()),n.current&&(n.current.textContent=o.toString()),r.current&&(r.current.textContent=u.toString()),i.current&&(i.current.textContent=f.toString());let p=t=>{let{x:a,y:o,w:s,h:c}=t.detail;e.current&&(e.current.textContent=a.toString()),n.current&&(n.current.textContent=o.toString()),r.current&&(r.current.textContent=s.toString()),i.current&&(i.current.textContent=c.toString())};return s.addEventListener(`crop-update`,p),()=>{s.removeEventListener(`crop-update`,p)}},[a,l,c,s]),(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`div`,{className:`${$.info} ${$.infoX}`,children:(0,_.jsx)(`b`,{ref:e})}),(0,_.jsx)(`div`,{className:`${$.info} ${$.infoY}`,children:(0,_.jsx)(`b`,{ref:n})}),(0,_.jsx)(`div`,{className:`${$.info} ${$.infoW}`,children:(0,_.jsx)(`b`,{ref:r})}),(0,_.jsx)(`div`,{className:`${$.info} ${$.infoH}`,children:(0,_.jsx)(`b`,{ref:i})})]})},Kt=Fe.map(e=>e.options).flat(),qt=()=>Kt,Jt=()=>{let{currentAction:e,getLastHistoryItem:n,addToHistory:r,setSidebar:i,setCurrentAction:a,eventBus:o}=N(),{width:s,height:c}=n(),l=e?.name===d.PRESET_CROP&&Kt.some(t=>t.value===e.args.id)?e.args.id:``,u=(0,t.useRef)({x:0,y:0,w:0,h:0});return(0,t.useEffect)(()=>{if(e?.name!==d.PRESET_CROP)return;let t=W(e.args.ratio,s,c);u.current=t;let n=e=>{u.current=e.detail};return o.addEventListener(`clip-path-update`,n),()=>{o.removeEventListener(`clip-path-update`,n)}},[e,s,c,o]),{currentValue:l,presetsData:Fe,handleChange:e=>{if(!e)return;let t=qt().find(t=>t.value===e);if(!t)return;let n={id:e,ratio:t.w/t.h,isFree:!1,preset:{width:t.w,height:t.h}};a({name:d.PRESET_CROP,args:n})},handleSave:()=>{!e||e.name!==d.PRESET_CROP||(r({width:e.args?.preset?.width||0,height:e.args?.preset?.height||0,action:{name:d.CROP,args:{...e.args,...u.current}}}),i(!0))},handleClose:()=>{a(null),i(!0)}}},Yt={select:`_select_1ieak_1`},Xt=()=>{let{currentValue:e,presetsData:t,handleChange:n,handleSave:r,handleClose:i}=Jt();return(0,_.jsxs)(H,{children:[(0,_.jsx)(Se,{value:e,placeholder:`Select preset`,onChange:n,items:t,className:Yt.select}),(0,_.jsx)(R,{onSave:r,onClose:i})]})},Zt=()=>{let{getLastHistoryItem:e,setCurrentAction:n,addToHistory:r,setSidebar:i}=N(),{width:a,height:o}=e(),[s,c]=(0,t.useState)(!1),[l,u]=(0,t.useState)(!1),f=(e,t)=>{n({name:d.FLIP,args:{horizontal:e,vertical:t}})};return{flipHorizontal:s,flipVertical:l,handleFlipHorizontal:()=>{let e=!s;c(e),f(e,l)},handleFlipVertical:()=>{let e=!l;u(e),f(s,e)},handleSave:()=>{r({width:a,height:o,action:{name:d.FLIP,args:{horizontal:s,vertical:l}}}),i(!0)},handleClose:()=>{n(null),i(!0)}}},Qt={btnH:`_btnH_15adi_1`,btnV:`_btnV_15adi_7`},$t=()=>{let{flipHorizontal:e,flipVertical:t,handleFlipHorizontal:n,handleFlipVertical:r,handleSave:i,handleClose:a}=Zt();return(0,_.jsxs)(H,{children:[(0,_.jsx)(`div`,{className:Qt.scGroup,children:(0,_.jsxs)(V,{position:`top`,children:[(0,_.jsx)(F,{variant:`outline`,className:Qt.btnH,onClick:n,"aria-label":`Horizontal`,"data-tooltip":`Horizontal`,children:(0,_.jsx)(se,{style:{color:e?`var(--accent-blue)`:`var(--foreground)`}})}),(0,_.jsx)(F,{variant:`outline`,className:Qt.btnV,onClick:r,"aria-label":`Vertical`,"data-tooltip":`Vertical`,children:(0,_.jsx)(ce,{style:{color:t?`var(--accent-blue)`:`var(--foreground)`}})})]})}),(0,_.jsx)(R,{disabled:!e&&!t,onSave:i,onClose:a})]})},en=()=>{let{getLastRotation:e,getLastHistoryItem:n,addToHistory:r,setSidebar:i,setCurrentAction:a}=N(),{width:o,height:s}=n(),c=e(),l=(0,t.useRef)(c),u=(0,t.useRef)(c);return{handleRotate:e=>{u.current+=e,a({name:d.ROTATE,args:{degrees:u.current}})},handleSave:()=>{r({...Ge(o,s,l.current,u.current),action:{name:d.ROTATE,args:{degrees:u.current}}}),i(!0)},handleClose:()=>{a(null),i(!0)}}},tn={btnH:`_btnH_15adi_1`,btnV:`_btnV_15adi_7`},nn=()=>{let{handleRotate:e,handleSave:t,handleClose:n}=en();return(0,_.jsxs)(H,{children:[(0,_.jsx)(`div`,{className:tn.scGroup,children:(0,_.jsxs)(V,{position:`top`,children:[(0,_.jsx)(F,{variant:`outline`,className:tn.btnH,onClick:()=>e(90),"aria-label":`+90°`,"data-tooltip":`+90°`,children:(0,_.jsx)(le,{})}),(0,_.jsx)(F,{variant:`outline`,className:tn.btnV,onClick:()=>e(-90),"aria-label":`-90°`,"data-tooltip":`-90°`,children:(0,_.jsx)(ue,{})})]})}),(0,_.jsx)(R,{onSave:t,onClose:n})]})},rn={frame:`_frame_1p6kh_1`},an=()=>{let{currentAction:e}=N(),t=e?.name===d.RESIZE,n=e?.name===d.CROP,r=e?.name===d.PRESET_CROP,i=e?.name===d.FLIP,a=e?.name===d.ROTATE,o=e?.name===d.FILTERS,s=n||r;return(0,_.jsxs)(`div`,{className:`${rn.frame} ${s?L.mask:``}`,children:[(0,_.jsx)(pt,{faded:s}),t&&(0,_.jsx)(At,{}),n&&(0,_.jsx)(Ft,{}),r&&(0,_.jsx)(Xt,{}),i&&(0,_.jsx)($t,{}),a&&(0,_.jsx)(nn,{}),o&&(0,_.jsx)(dt,{}),(n||r)&&(0,_.jsx)(jt,{},e?.args?.id),o&&(0,_.jsx)(ht,{})]})},on=()=>(0,_.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0,overflow:`hidden`},xmlns:`http://www.w3.org/2000/svg`,children:(0,_.jsxs)(`defs`,{children:[(0,_.jsx)(`filter`,{id:`vintage`,children:(0,_.jsx)(`feColorMatrix`,{type:`matrix`,values:`
         1.2  0    0    0  0.1
         0    1.0  0    0  0.0
         0    0    0.8  0  0.1